wip
This commit is contained in:
syuilo
parent
def5ea7978
commit
c88e737a84
8 changed files with 13 additions and 84 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;"/>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="mk-messaging-room"
|
||||
<div class="mk-messaging-room naked"
|
||||
@dragover.prevent.stop="onDragover"
|
||||
@drop.prevent.stop="onDrop"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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) }); }
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@ const defaultDeviceSettings = {
|
|||
animatedMfm: true,
|
||||
imageNewTab: false,
|
||||
showFixedPostForm: false,
|
||||
useNotificationsPopup: true,
|
||||
sfxVolume: 0.3,
|
||||
sfxNote: 'syuilo/down',
|
||||
sfxNoteMy: 'syuilo/up',
|
||||
|
|
|
|||
|
|
@ -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)',
|
||||
|
|
|
|||
|
|
@ -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)',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue