wip

7 files changed, 13 insertions, 83 deletions

diff --git a/src/client/app.vue b/src/client/app.vue
index b0c92105ed..4e5dfbd18a 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -51,11 +51,7 @@
 					<fa :icon="faHome" fixed-width/><span class="text">{{ $store.getters.isSignedIn ? $t('timeline') : $t('home') }}</span>
 				</router-link>
 				<template v-if="$store.getters.isSignedIn">
-					<button class="item _button notifications" @click="notificationsOpen = !notificationsOpen" ref="notificationButton" v-if="$store.state.device.useNotificationsPopup">
-						<fa :icon="faBell" fixed-width/><span class="text">{{ $t('notifications') }}</span>
-						<i v-if="$store.state.i.hasUnreadNotification"><fa :icon="faCircle"/></i>
-					</button>
-					<router-link class="item notifications" active-class="active" to="/my/notifications" ref="notificationButton" v-else>
+					<router-link class="item notifications" active-class="active" to="/my/notifications" ref="notificationButton">
 						<fa :icon="faBell" fixed-width/><span class="text">{{ $t('notifications') }}</span>
 						<i v-if="$store.state.i.hasUnreadNotification"><fa :icon="faCircle"/></i>
 					</router-link>
@@ -149,17 +145,12 @@
 		<button class="button nav _button" @click="showNav = true" ref="navButton"><fa :icon="faBars"/><i v-if="$store.getters.isSignedIn && ($store.state.i.hasUnreadSpecifiedNotes || $store.state.i.hasPendingReceivedFollowRequest || $store.state.i.hasUnreadMessagingMessage || $store.state.i.hasUnreadAnnouncement)"><fa :icon="faCircle"/></i></button>
 		<button v-if="$route.name === 'index'" class="button home _button" @click="top()"><fa :icon="faHome"/></button>
 		<button v-else class="button home _button" @click="$router.push('/')"><fa :icon="faHome"/></button>
-		<button v-if="$store.getters.isSignedIn && $store.state.device.useNotificationsPopup" class="button notifications _button" @click="notificationsOpen = !notificationsOpen" ref="notificationButton2"><fa :icon="notificationsOpen ? faTimes : faBell"/><i v-if="$store.state.i.hasUnreadNotification"><fa :icon="faCircle"/></i></button>
-		<button v-if="$store.getters.isSignedIn && !$store.state.device.useNotificationsPopup" class="button notifications _button" @click="$router.push('/my/notifications')" ref="notificationButton2"><fa :icon="faBell"/><i v-if="$store.state.i.hasUnreadNotification"><fa :icon="faCircle"/></i></button>
+		<button v-if="$store.getters.isSignedIn" class="button notifications _button" @click="$router.push('/my/notifications')" ref="notificationButton2"><fa :icon="faBell"/><i v-if="$store.state.i.hasUnreadNotification"><fa :icon="faCircle"/></i></button>
 		<button v-if="$store.getters.isSignedIn" class="button post _buttonPrimary" @click="post()"><fa :icon="faPencilAlt"/></button>
 	</div>
 
 	<button v-if="$store.getters.isSignedIn" class="post _buttonPrimary" @click="post()"><fa :icon="faPencilAlt"/></button>
 
-	<transition name="zoom-in-top">
-		<x-notifications v-if="notificationsOpen" class="notifications" ref="notifications"/>
-	</transition>
-
 	<stream-indicator v-if="$store.getters.isSignedIn"/>
 </div>
 </template>
@@ -173,7 +164,6 @@ import { v4 as uuid } from 'uuid';
 import i18n from './i18n';
 import { host, instanceName } from './config';
 import { search } from './scripts/search';
-import contains from './scripts/contains';
 import MkToast from './components/toast.vue';
 
 const DESKTOP_THRESHOLD = 1100;
@@ -183,7 +173,6 @@ export default Vue.extend({
 
 	components: {
 		XClock: () => import('./components/header-clock.vue').then(m => m.default),
-		XNotifications: () => import('./components/notifications.vue').then(m => m.default),
 		MkButton: () => import('./components/ui/button.vue').then(m => m.default),
 		XDraggable: () => import('vuedraggable'),
 	},
@@ -194,7 +183,6 @@ export default Vue.extend({
 			pageKey: 0,
 			showNav: false,
 			searching: false,
-			notificationsOpen: false,
 			accounts: [],
 			lists: [],
 			connection: null,
@@ -226,23 +214,10 @@ export default Vue.extend({
 	watch:{
 		$route(to, from) {
 			this.pageKey++;
-			this.notificationsOpen = false;
 			this.showNav = false;
 			this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
 		},
 
-		notificationsOpen(open) {
-			if (open) {
-				for (const el of Array.from(document.querySelectorAll('*'))) {
-					el.addEventListener('mousedown', this.onMousedown);
-				}
-			} else {
-				for (const el of Array.from(document.querySelectorAll('*'))) {
-					el.removeEventListener('mousedown', this.onMousedown);
-				}
-			}
-		},
-
 		isDesktop() {
 			if (this.isDesktop) this.adjustWidgetsWidth();
 		}
@@ -568,15 +543,6 @@ export default Vue.extend({
 			this.$root.sound('notification');
 		},
 
-		onMousedown(e) {
-			e.preventDefault();
-			if (!contains(this.$refs.notifications.$el, e.target) &&
-				!contains(this.$refs.notificationButton, e.target) &&
-				!contains(this.$refs.notificationButton2, e.target)
-				) this.notificationsOpen = false;
-			return false;
-		},
-
 		widgetFunc(id) {
 			const w = this.$refs[id][0];
 			if (w.func) w.func();
@@ -976,18 +942,20 @@ export default Vue.extend({
 			width: $main-width;
 			min-width: $main-width;
 			box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider);
-			background: var(--mainBg);
 
 			@media (max-width: $side-hide-threshold) {
 				min-width: 0;
 			}
 
 			> .content {
-				padding: 16px 0;
-				box-sizing: border-box;
+				> * {
+					&:not(.full) {
+						padding: var(--margin) 0;
+					}
 
-				@media (max-width: 500px) {
-					padding: 8px 0;
+					&:not(.naked) {
+						background: var(--pageBg);
+					}
 				}
 			}
 
@@ -1178,34 +1146,5 @@ export default Vue.extend({
 			}
 		}
 	}
-
-	> .notifications {
-		position: fixed;
-		top: 32px;
-		left: 0;
-		right: 0;
-		margin: 0 auto;
-		padding: 8px 8px 0 8px;
-		z-index: 10001;
-		width: 350px;
-		height: 400px;
-		box-sizing: border-box;
-		background: var(--vocsgcxy);
-		-webkit-backdrop-filter: blur(12px);
-		backdrop-filter: blur(12px);
-		border-radius: 6px;
-		box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
-		overflow: auto;
-
-		@media (max-width: 800px) {
-			width: 320px;
-			height: 350px;
-		}
-
-		@media (max-width: 500px) {
-			width: 290px;
-			height: 310px;
-		}
-	}
 }
 </style>
diff --git a/src/client/pages/drive.vue b/src/client/pages/drive.vue
index 7b648939f2..8f8e949dcb 100644
--- a/src/client/pages/drive.vue
+++ b/src/client/pages/drive.vue
@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="naked full">
 	<portal to="header">
 		<button @click="menu" class="_button _jmoebdiw_">
 			<fa :icon="faCloud" style="margin-right: 8px;"/>
diff --git a/src/client/pages/messaging-room.vue b/src/client/pages/messaging-room.vue
index 7f7e77fc14..5fca8c0ff3 100644
--- a/src/client/pages/messaging-room.vue
+++ b/src/client/pages/messaging-room.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-messaging-room"
+<div class="mk-messaging-room naked"
 	@dragover.prevent.stop="onDragover"
 	@drop.prevent.stop="onDrop"
 >
diff --git a/src/client/pages/preferences/index.vue b/src/client/pages/preferences/index.vue
index 3bc305a229..8ffb481c99 100644
--- a/src/client/pages/preferences/index.vue
+++ b/src/client/pages/preferences/index.vue
@@ -63,7 +63,6 @@
 				<template #desc><mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></template>
 			</mk-switch>
 			<mk-switch v-model="showFixedPostForm">{{ $t('showFixedPostForm') }}</mk-switch>
-			<mk-switch v-model="useNotificationsPopup">{{ $t('useNotificationsPopup') }}</mk-switch>
 		</div>
 		<div class="_content">
 			<mk-select v-model="lang">
@@ -175,11 +174,6 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'showFixedPostForm', value }); }
 		},
 
-		useNotificationsPopup: {
-			get() { return this.$store.state.device.useNotificationsPopup; },
-			set(value) { this.$store.commit('device/set', { key: 'useNotificationsPopup', value }); }
-		},
-
 		sfxVolume: {
 			get() { return this.$store.state.device.sfxVolume; },
 			set(value) { this.$store.commit('device/set', { key: 'sfxVolume', value: parseFloat(value, 10) }); }
diff --git a/src/client/store.ts b/src/client/store.ts
index 8ded1ba00d..29709096ee 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -40,7 +40,6 @@ const defaultDeviceSettings = {
 	animatedMfm: true,
 	imageNewTab: false,
 	showFixedPostForm: false,
-	useNotificationsPopup: true,
 	sfxVolume: 0.3,
 	sfxNote: 'syuilo/down',
 	sfxNoteMy: 'syuilo/up',
diff --git a/src/client/themes/_dark.json5 b/src/client/themes/_dark.json5
index 7ef6e339b5..5aecffa7cb 100644
--- a/src/client/themes/_dark.json5
+++ b/src/client/themes/_dark.json5
@@ -20,7 +20,7 @@
 		panel: '#000',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: 'rgba(20, 20, 20, 0.75)',
-		mainBg: ':lighten<3<@bg',
+		pageBg: ':lighten<5<@bg',
 		navBg: '@panel',
 		navFg: '@fg',
 		navHoverFg: ':lighten<17<@fg',
@@ -53,7 +53,6 @@
 		badge: '#31b1ce',
 		bonzsgfz: ':alpha<0<@bg',
 		pcncwizz: ':darken<2<@panel',
-		vocsgcxy: 'rgba(0, 0, 0, 0.5)',
 		yrnqrguo: 'rgba(255, 255, 255, 0.05)',
 		nwjktjjq: 'rgba(255, 255, 255, 0.1)',
 		geavgsxy: 'rgba(255, 255, 255, 0.05)',
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index 3727b93a3b..6d55546bb5 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -20,7 +20,7 @@
 		panel: '#fff',
 		shadow: 'rgba(0, 0, 0, 0.1)',
 		header: 'rgba(255, 255, 255, 0.75)',
-		mainBg: '@bg',
+		pageBg: '@bg',
 		navBg: '@panel',
 		navFg: '@fg',
 		navHoverFg: ':darken<17<@fg',
@@ -53,7 +53,6 @@
 		badge: '#31b1ce',
 		bonzsgfz: ':alpha<0<@bg',
 		pcncwizz: ':darken<2<@panel',
-		vocsgcxy: 'rgba(255, 255, 255, 0.5)',
 		yrnqrguo: 'rgba(0, 0, 0, 0.05)',
 		nwjktjjq: 'rgba(0, 0, 0, 0.1)',
 		geavgsxy: 'rgba(0, 0, 0, 0.05)',