From c88e737a84190acb0ab8f1502b3aeacb6c2f2e44 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 20 Mar 2020 22:37:44 +0900
Subject: [PATCH] wip
---
locales/ja-JP.yml | 1 -
src/client/app.vue | 79 +++-----------------------
src/client/pages/drive.vue | 2 +-
src/client/pages/messaging-room.vue | 2 +-
src/client/pages/preferences/index.vue | 6 --
src/client/store.ts | 1 -
src/client/themes/_dark.json5 | 3 +-
src/client/themes/_light.json5 | 3 +-
8 files changed, 13 insertions(+), 84 deletions(-)
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 3f70c8dbbf..3e57120871 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -439,7 +439,6 @@ serverLogs: "サーバーログ"
deleteAll: "全て削除"
showFixedPostForm: "タイムライン上部に投稿フォームを表示する"
newNoteRecived: "新しいノートがあります"
-useNotificationsPopup: "通知一覧をポップアップで表示"
sounds: "サウンド"
listen: "聴く"
none: "なし"
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)',