Refactor

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

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

src/client/app/common/views/components/ui/card.vue

@@ -1,5 +1,5 @@
 <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>
 		<slot name="title"></slot>
 	</header>
@@ -25,7 +25,9 @@ export default Vue.extend({
 	max-width 850px
 	color var(--faceText)
 	background var(--face)
-	border-radius var(--round)
+
+	&.round
+		border-radius 6px
 
 	&.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)

src/client/app/common/views/deck/deck.column.vue

@@ -1,5 +1,5 @@
 <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"
 		@dragleave="onDragleave"
 		@drop.prevent.stop="onDrop"
@@ -322,10 +322,14 @@ export default Vue.extend({
 
 	height 100%
 	background var(--face)
-	border-radius var(--round)
-	box-shadow var(--shadow)
 	overflow hidden
 
+	&.round
+		border-radius 6px
+
+	&.shadow
+		box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+
 	&.draghover
 		box-shadow 0 0 0 2px var(--primaryAlpha08)
 

src/client/app/desktop/views/components/calendar.vue

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

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

@@ -1,5 +1,5 @@
 <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
 		class="read-more"
 		v-if="appearNote.reply && appearNote.reply.replyId && conversation.length == 0"
@@ -159,8 +159,15 @@ export default Vue.extend({
 	overflow hidden
 	text-align left
 	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
 		display block
@@ -175,7 +182,6 @@ export default Vue.extend({
 		outline none
 		border none
 		border-bottom solid 1px var(--faceDivider)
-		border-radius var(--round) var(--round) 0 0
 
 		&:hover
 			box-shadow 0 0 0 100px inset rgba(0, 0, 0, 0.05)

src/client/app/desktop/views/components/notes.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-notes">
+<div class="mk-notes" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
 	<slot name="header"></slot>
 
 	<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>
 .mk-notes
 	background var(--face)
-	box-shadow var(--shadow)
-	border-radius var(--round)
 	overflow hidden
 
+	&.round
+		border-radius 6px
+
+	&.shadow
+		box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
+
 	.transition
 		.mk-notes-enter
 		.mk-notes-leave-to

src/client/app/desktop/views/components/settings.vue

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

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

@@ -1,5 +1,5 @@
 <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">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
@@ -60,8 +60,12 @@ export default Vue.extend({
 
 	&:not(.inNakedDeckColumn)
 		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
 			margin-top 16px

src/client/app/desktop/views/components/ui.sidebar.vue

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

src/client/app/desktop/views/home/timeline.vue

@@ -1,6 +1,6 @@
 <template>
 <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">
 		<component :is="src == 'list' ? 'mk-user-list-timeline' : 'x-core'" ref="tl" v-bind="options">
 			<header class="zahtxcqi">
@@ -193,8 +193,12 @@ export default Vue.extend({
 .pwbzawku
 	> .form
 		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
 		padding 0 8px

src/client/app/desktop/views/home/user/index.vue

@@ -1,7 +1,11 @@
 <template>
 <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">
 		<x-header class="header" :user="user"/>
 		<router-view :user="user"></router-view>
@@ -61,8 +65,12 @@ export default Vue.extend({
 		margin-bottom 16px
 		padding 14px 16px
 		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
 			color var(--suspendedInfoFg)

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

@@ -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>

src/client/app/desktop/views/home/user/user.friends.vue

@@ -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>

src/client/app/desktop/views/home/user/user.header.vue

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

src/client/app/desktop/views/pages/welcome.vue

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

src/client/app/init.ts

@@ -401,34 +401,6 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
 				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
 			document.documentElement.style.setProperty('--lineWidth', `${os.store.state.device.lineWidth}px`);
 			os.store.watch(s => {