SuperDicq/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor

Browse source
This commit is contained in:
syuilo 2019-02-28 12:49:13 +09:00
parent 9c363ff045
commit b7927ba386
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
16 changed files with 83 additions and 264 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/client/app/common/views/components/media-image.vue
View file

@ -80,7 +80,7 @@ export default Vue.extend({
> div > div
background-color var(--text) background-color var(--text)
border-radius var(--round) border-radius 6px
color var(--secondary) color var(--secondary)
display inline-block display inline-block
font-size 14px font-size 14px

6
src/client/app/common/views/components/ui/card.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="ui-card" :class="{ shadow: $store.state.device.useShadow }"> <div class="ui-card" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
<header> <header>
<slot name="title"></slot> <slot name="title"></slot>
</header> </header>
@ -25,7 +25,9 @@ export default Vue.extend({
max-width 850px max-width 850px
color var(--faceText) color var(--faceText)
background var(--face) background var(--face)
border-radius var(--round)
&.round
border-radius 6px
&.shadow &.shadow
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12) box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)

10
src/client/app/common/views/deck/deck.column.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready, isMobile: $root.isMobile }" <div class="dnpfarvgbnfmyzbdquhhzyxcmstpdqzs" :class="{ naked, narrow, active, isStacked, draghover, dragging, dropready, isMobile: $root.isMobile, shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }"
@dragover.prevent.stop="onDragover" @dragover.prevent.stop="onDragover"
@dragleave="onDragleave" @dragleave="onDragleave"
@drop.prevent.stop="onDrop" @drop.prevent.stop="onDrop"
@ -322,10 +322,14 @@ export default Vue.extend({
height 100% height 100%
background var(--face) background var(--face)
border-radius var(--round)
box-shadow var(--shadow)
overflow hidden overflow hidden
&.round
border-radius 6px
&.shadow
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
&.draghover &.draghover
box-shadow 0 0 0 2px var(--primaryAlpha08) box-shadow 0 0 0 2px var(--primaryAlpha08)

10
src/client/app/desktop/views/components/calendar.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-calendar" :data-melt="design == 4 || design == 5"> <div class="mk-calendar" :data-melt="design == 4 || design == 5" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
<template v-if="design == 0 || design == 1"> <template v-if="design == 0 || design == 1">
<button @click="prev" :title="$t('prev')"><fa icon="chevron-circle-left"/></button> <button @click="prev" :title="$t('prev')"><fa icon="chevron-circle-left"/></button>
<p class="title">{{ $t('title', { year, month }) }}</p> <p class="title">{{ $t('title', { year, month }) }}</p>
@ -133,10 +133,14 @@ export default Vue.extend({
.mk-calendar .mk-calendar
color var(--calendarDay) color var(--calendarDay)
background var(--face) background var(--face)
box-shadow var(--shadow)
border-radius var(--round)
overflow hidden overflow hidden
&.round
border-radius 6px
&.shadow
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
&[data-melt] &[data-melt]
background transparent !important background transparent !important
border none !important border none !important

14
src/client/app/desktop/views/components/note-detail.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-note-detail" :title="title" tabindex="-1"> <div class="mk-note-detail" :title="title" tabindex="-1" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
<button <button
class="read-more" class="read-more"
v-if="appearNote.reply && appearNote.reply.replyId && conversation.length == 0" v-if="appearNote.reply && appearNote.reply.replyId && conversation.length == 0"
@ -159,8 +159,15 @@ export default Vue.extend({
overflow hidden overflow hidden
text-align left text-align left
background var(--face) background var(--face)
box-shadow var(--shadow)
border-radius var(--round) &.round
border-radius 6px
> .read-more
border-radius 6px 6px 0 0
&.shadow
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
> .read-more > .read-more
display block display block
@ -175,7 +182,6 @@ export default Vue.extend({
outline none outline none
border none border none
border-bottom solid 1px var(--faceDivider) border-bottom solid 1px var(--faceDivider)
border-radius var(--round) var(--round) 0 0
&:hover &:hover
box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05) box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)

10
src/client/app/desktop/views/components/notes.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-notes"> <div class="mk-notes" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
<slot name="header"></slot> <slot name="header"></slot>
<div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div> <div class="newer-indicator" :style="{ top: $store.state.uiHeaderHeight + 'px' }" v-show="queue.length > 0"></div>
@ -191,10 +191,14 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-notes .mk-notes
background var(--face) background var(--face)
box-shadow var(--shadow)
border-radius var(--round)
overflow hidden overflow hidden
&.round
border-radius 6px
&.shadow
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
.transition .transition
.mk-notes-enter .mk-notes-enter
.mk-notes-leave-to .mk-notes-leave-to

3
src/client/app/desktop/views/components/settings.vue
View file

@ -603,9 +603,6 @@ export default Vue.extend({
z-index 1 z-index 1
font-size 15px font-size 15px
&.inWindow
box-shadow var(--shadowRight)
> p > p
display block display block
padding 10px 16px padding 10px 16px

10
src/client/app/desktop/views/components/ui-container.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="kedshtep" :class="{ naked, inNakedDeckColumn }"> <div class="kedshtep" :class="{ naked, inNakedDeckColumn, shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
<header v-if="showHeader"> <header v-if="showHeader">
<div class="title"><slot name="header"></slot></div> <div class="title"><slot name="header"></slot></div>
<slot name="func"></slot> <slot name="func"></slot>
@ -60,8 +60,12 @@ export default Vue.extend({
&:not(.inNakedDeckColumn) &:not(.inNakedDeckColumn)
background var(--face) background var(--face)
box-shadow var(--shadow)
border-radius var(--round) &.round
border-radius 6px
&.shadow
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
& + .kedshtep & + .kedshtep
margin-top 16px margin-top 16px

20
src/client/app/desktop/views/components/ui.sidebar.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="header" :class="navbar"> <div class="header" :class="navbar" :data-shadow="$store.state.device.useShadow">
<div class="body"> <div class="body">
<div class="post"> <div class="post">
<button @click="post" :title="$t('title')"><fa icon="pencil-alt"/></button> <button @click="post" :title="$t('title')"><fa icon="pencil-alt"/></button>
@ -62,7 +62,7 @@
</div> </div>
<transition :name="`slide-${navbar}`"> <transition :name="`slide-${navbar}`">
<div class="notifications" v-if="showNotifications" ref="notifications" :class="navbar"> <div class="notifications" v-if="showNotifications" ref="notifications" :class="navbar" :data-shadow="$store.state.device.useShadow">
<mk-notifications/> <mk-notifications/>
</div> </div>
</transition> </transition>
@ -226,11 +226,15 @@ export default Vue.extend({
&.left &.left
left 0 left 0
box-shadow var(--shadowRight)
&[data-shadow]
box-shadow 4px 0 4px rgba(0, 0, 0, 0.1)
&.right &.right
right 0 right 0
box-shadow var(--shadowLeft)
&[data-shadow]
box-shadow -4px 0 4px rgba(0, 0, 0, 0.1)
> .body > .body
position fixed position fixed
@ -302,11 +306,15 @@ export default Vue.extend({
&.left &.left
left $width left $width
box-shadow var(--shadowRight)
&[data-shadow]
box-shadow 4px 0 4px rgba(0, 0, 0, 0.1)
&.right &.right
right $width right $width
box-shadow var(--shadowLeft)
&[data-shadow]
box-shadow -4px 0 4px rgba(0, 0, 0, 0.1)
.nav .nav
> * > *

10
src/client/app/desktop/views/home/timeline.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="pwbzawku"> <div class="pwbzawku">
<mk-post-form class="form" v-if="$store.state.settings.showPostFormOnTopOfTl"/> <mk-post-form class="form" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }" v-if="$store.state.settings.showPostFormOnTopOfTl"/>
<div class="main"> <div class="main">
<component :is="src == 'list' ? 'mk-user-list-timeline' : 'x-core'" ref="tl" v-bind="options"> <component :is="src == 'list' ? 'mk-user-list-timeline' : 'x-core'" ref="tl" v-bind="options">
<header class="zahtxcqi"> <header class="zahtxcqi">
@ -193,8 +193,12 @@ export default Vue.extend({
.pwbzawku .pwbzawku
> .form > .form
margin-bottom 16px margin-bottom 16px
box-shadow var(--shadow)
border-radius var(--round) &.round
border-radius 6px
&.shadow
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
.zahtxcqi .zahtxcqi
padding 0 8px padding 0 8px

16
src/client/app/desktop/views/home/user/index.vue
View file

@ -1,7 +1,11 @@
<template> <template>
<div class="omechnps" v-if="!fetching"> <div class="omechnps" v-if="!fetching">
<div class="is-suspended" v-if="user.isSuspended"><fa icon="exclamation-triangle"/> {{ $t('@.user-suspended') }}</div> <div class="is-suspended" v-if="user.isSuspended" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
<div class="is-remote" v-if="user.host != null"><fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a></div> <fa icon="exclamation-triangle"/> {{ $t('@.user-suspended') }}
</div>
<div class="is-remote" v-if="user.host != null" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
<fa icon="exclamation-triangle"/> {{ $t('@.is-remote-user') }}<a :href="user.url || user.uri" target="_blank">{{ $t('@.view-on-remote') }}</a>
</div>
<div class="main"> <div class="main">
<x-header class="header" :user="user"/> <x-header class="header" :user="user"/>
<router-view :user="user"></router-view> <router-view :user="user"></router-view>
@ -61,8 +65,12 @@ export default Vue.extend({
margin-bottom 16px margin-bottom 16px
padding 14px 16px padding 14px 16px
font-size 14px font-size 14px
box-shadow var(--shadow)
border-radius var(--round) &.round
border-radius 6px
&.shadow
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
&.is-suspended &.is-suspended
color var(--suspendedInfoFg) color var(--suspendedInfoFg)

84
src/client/app/desktop/views/home/user/user.followers-you-know.vue
View file

@ -1,84 +0,0 @@
<template>
<div class="vahgrswmbzfdlmomxnqftuueyvwaafth">
<p class="title"><fa icon="users"/>{{ $t('title') }}</p>
<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
<div v-if="!fetching && users.length > 0">
<router-link v-for="user in users" :to="user | userPage" :key="user.id">
<img :src="user.avatarUrl" :alt="user | userName" v-user-preview="user.id"/>
</router-link>
</div>
<p class="empty" v-if="!fetching && users.length == 0">{{ $t('no-users') }}</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
export default Vue.extend({
i18n: i18n('desktop/views/pages/user/user.followers-you-know.vue'),
props: ['user'],
data() {
return {
users: [],
fetching: true
};
},
mounted() {
this.$root.api('users/followers', {
userId: this.user.id,
iknow: true,
limit: 16
}).then(x => {
this.users = x.users;
this.fetching = false;
});
}
});
</script>
<style lang="stylus" scoped>
.vahgrswmbzfdlmomxnqftuueyvwaafth
background var(--face)
box-shadow var(--shadow)
border-radius var(--round)
> .title
z-index 1
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
color var(--faceHeaderText)
box-shadow 0 1px rgba(#000, 0.07)
> i
margin-right 4px
> div
padding 8px
> a
display inline-block
margin 4px
> img
display inline-block
text-align center
width 48px
height 48px
vertical-align bottom
border-radius 100%
> .initializing
> .empty
margin 0
padding 16px
text-align center
color var(--text)
> i
margin-right 4px
</style>

112
src/client/app/desktop/views/home/user/user.friends.vue
View file

@ -1,112 +0,0 @@
<template>
<div class="hozptpaliadatkehcmcayizwzwwctpbc">
<p class="title"><fa icon="users"/>{{ $t('title') }}</p>
<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('loading') }}<mk-ellipsis/></p>
<template v-if="!fetching && users.length != 0">
<div class="user" v-for="friend in users">
<mk-avatar class="avatar" :user="friend"/>
<div class="body">
<router-link class="name" :to="friend | userPage" v-user-preview="friend.id"><mk-user-name :user="friend"/></router-link>
<p class="username">@{{ friend | acct }}</p>
</div>
</div>
</template>
<p class="empty" v-if="!fetching && users.length == 0">{{ $t('no-users') }}</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../i18n';
export default Vue.extend({
i18n: i18n('desktop/views/pages/user/user.friends.vue'),
props: ['user'],
data() {
return {
users: [],
fetching: true
};
},
mounted() {
this.$root.api('users/get_frequently_replied_users', {
userId: this.user.id,
limit: 4
}).then(docs => {
this.users = docs.map(doc => doc.user);
this.fetching = false;
});
}
});
</script>
<style lang="stylus" scoped>
.hozptpaliadatkehcmcayizwzwwctpbc
background var(--face)
box-shadow var(--shadow)
border-radius var(--round)
overflow hidden
> .title
z-index 1
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
background var(--faceHeader)
color var(--faceHeaderText)
box-shadow 0 1px rgba(#000, 0.07)
> i
margin-right 4px
> .initializing
> .empty
margin 0
padding 16px
text-align center
color var(--text)
> i
margin-right 4px
> .user
padding 16px
border-bottom solid 1px var(--faceDivider)
&:last-child
border-bottom none
&:after
content ""
display block
clear both
> .avatar
display block
float left
margin 0 12px 0 0
width 42px
height 42px
border-radius 8px
> .body
float left
width calc(100% - 54px)
> .name
margin 0
font-size 16px
line-height 24px
color var(--text)
> .username
display block
margin 0
font-size 15px
line-height 16px
color var(--text)
opacity 0.7
</style>

10
src/client/app/desktop/views/home/user/user.header.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="header"> <div class="header" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
<div class="banner-container" :style="style"> <div class="banner-container" :style="style">
<div class="banner" ref="banner" :style="style" @click="onBannerClick"></div> <div class="banner" ref="banner" :style="style" @click="onBannerClick"></div>
<div class="fade"></div> <div class="fade"></div>
@ -126,10 +126,14 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.header .header
background var(--face) background var(--face)
box-shadow var(--shadow)
border-radius var(--round)
overflow hidden overflow hidden
&.round
border-radius 6px
&.shadow
box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
> .banner-container > .banner-container
height 250px height 250px
overflow hidden overflow hidden

2
src/client/app/desktop/views/pages/welcome.vue
View file

@ -344,8 +344,6 @@ export default Vue.extend({
.block .block
color var(--text) color var(--text)
background var(--face) background var(--face)
box-shadow var(--shadow)
//border-radius 8px
overflow auto overflow auto
> header > header

28
src/client/app/init.ts
View file

@ -401,34 +401,6 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
console.log(`Cannot reapply theme. ${e}`); console.log(`Cannot reapply theme. ${e}`);
} }
//#region shadow
const shadow = '0 3px 8px rgba(0, 0, 0, 0.2)';
const shadowRight = '4px 0 4px rgba(0, 0, 0, 0.1)';
const shadowLeft = '-4px 0 4px rgba(0, 0, 0, 0.1)';
if (os.store.state.device.useShadow) {
document.documentElement.style.setProperty('--shadow', shadow);
document.documentElement.style.setProperty('--shadowRight', shadowRight);
document.documentElement.style.setProperty('--shadowLeft', shadowLeft);
}
os.store.watch(s => {
return s.device.useShadow;
}, v => {
document.documentElement.style.setProperty('--shadow', v ? shadow : 'none');
document.documentElement.style.setProperty('--shadowRight', v ? shadowRight : 'none');
document.documentElement.style.setProperty('--shadowLeft', v ? shadowLeft : 'none');
});
//#endregion
//#region rounded corners
const round = '6px';
if (os.store.state.device.roundedCorners) document.documentElement.style.setProperty('--round', round);
os.store.watch(s => {
return s.device.roundedCorners;
}, v => {
document.documentElement.style.setProperty('--round', v ? round : '0');
});
//#endregion
//#region line width //#region line width
document.documentElement.style.setProperty('--lineWidth', `${os.store.state.device.lineWidth}px`); document.documentElement.style.setProperty('--lineWidth', `${os.store.state.device.lineWidth}px`);
os.store.watch(s => { os.store.watch(s => {