Merge branch 'develop' into sw-notification-action

This commit is contained in:
tamaina 2021-02-17 02:21:11 +09:00
commit e41aa2390c
20 changed files with 740 additions and 377 deletions

View File

@ -97,6 +97,7 @@ cantRenote: "この投稿はRenoteできません。"
cantReRenote: "RenoteをRenoteすることはできません。"
quote: "引用"
pinnedNote: "ピン留めされたノート"
pinned: "ピン留め"
you: "あなた"
clickToShow: "クリックして表示"
sensitive: "閲覧注意"

View File

@ -1,6 +1,6 @@
<template>
<div
class="note _panel"
class="tkcbzcuz _panel"
v-if="!muted"
v-show="!isDeleted"
:tabindex="!isDeleted ? '-1' : null"
@ -858,7 +858,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.note {
.tkcbzcuz {
position: relative;
transition: box-shadow 0.1s ease;
overflow: hidden;

View File

@ -1,5 +1,5 @@
<template>
<div class="mfcuwfyp">
<div class="mfcuwfyp _noGap_">
<XList class="notifications" :items="items" v-slot="{ item: notification }">
<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>

View File

@ -98,11 +98,11 @@ export default defineComponent({
}
} else {
if (left + width - window.pageXOffset > window.innerWidth) {
left = window.innerWidth - width + window.pageXOffset;
left = window.innerWidth - width + window.pageXOffset - 1;
}
if (top + height - window.pageYOffset > window.innerHeight) {
top = window.innerHeight - height + window.pageYOffset;
top = window.innerHeight - height + window.pageYOffset - 1;
}
}

View File

@ -1,6 +1,6 @@
<template>
<transition name="zoom-in-top" appear @after-leave="$emit('closed')">
<div class="buebdbiu _acrylic _shadow" v-if="showing">
<transition name="tooltip" appear @after-leave="$emit('closed')">
<div class="buebdbiu _acrylic _shadow" v-show="showing" ref="content">
<slot>{{ text }}</slot>
</div>
</transition>
@ -35,19 +35,43 @@ export default defineComponent({
const rect = this.source.getBoundingClientRect();
let x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
let y = rect.top + window.pageYOffset + this.source.offsetHeight;
const contentWidth = this.$refs.content.offsetWidth;
const contentHeight = this.$refs.content.offsetHeight;
x -= (this.$el.offsetWidth / 2);
let left = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
let top = rect.top + window.pageYOffset + this.source.offsetHeight;
this.$el.style.left = x + 'px';
this.$el.style.top = y + 'px';
left -= (this.$el.offsetWidth / 2);
if (left + contentWidth - window.pageXOffset > window.innerWidth) {
left = window.innerWidth - contentWidth + window.pageXOffset - 1;
}
if (top + contentHeight - window.pageYOffset > window.innerHeight) {
top = rect.top + window.pageYOffset - contentHeight;
this.$refs.content.style.transformOrigin = 'center bottom';
}
this.$el.style.left = left + 'px';
this.$el.style.top = top + 'px';
});
},
})
</script>
<style lang="scss" scoped>
.tooltip-enter-active,
.tooltip-leave-active {
opacity: 1;
transform: scale(1);
transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.tooltip-enter-from,
.tooltip-leave-active {
opacity: 0;
transform: scale(0.75);
}
.buebdbiu {
position: absolute;
z-index: 11000;
@ -57,6 +81,6 @@ export default defineComponent({
text-align: center;
border-radius: 4px;
pointer-events: none;
transform-origin: center -16px;
transform-origin: center top;
}
</style>

View File

@ -0,0 +1,153 @@
<template>
<div class="vjoppmmu">
<template v-if="edit">
<header>
<MkSelect v-model:value="widgetAdderSelected" style="margin-bottom: var(--margin)">
<template #label>{{ $ts.selectWidget }}</template>
<option v-for="widget in widgetDefs" :value="widget" :key="widget">{{ $t(`_widgets.${widget}`) }}</option>
</MkSelect>
<MkButton inline @click="addWidget" primary><Fa :icon="faPlus"/> {{ $ts.add }}</MkButton>
<MkButton inline @click="$emit('exit')">{{ $ts.close }}</MkButton>
</header>
<XDraggable
v-model="_widgets"
item-key="id"
animation="150"
>
<template #item="{element}">
<div class="customize-container">
<button class="config _button" @click.prevent.stop="configWidget(element.id)"><Fa :icon="faCog"/></button>
<button class="remove _button" @click.prevent.stop="removeWidget(element)"><Fa :icon="faTimes"/></button>
<component :is="`mkw-${element.name}`" :widget="element" :setting-callback="setting => settings[element.id] = setting" :column="column" @updateProps="updateWidget(element.id, $event)"/>
</div>
</template>
</XDraggable>
</template>
<component v-else class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column" @updateProps="updateWidget(widget.id, $event)"/>
</div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { v4 as uuid } from 'uuid';
import { faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
import MkSelect from '@/components/ui/select.vue';
import MkButton from '@/components/ui/button.vue';
import { widgets as widgetDefs } from '@/widgets';
export default defineComponent({
components: {
XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
MkSelect,
MkButton,
},
props: {
widgets: {
required: true,
},
edit: {
type: Boolean,
required: true,
},
},
emits: ['updateWidgets', 'addWidget', 'removeWidget', 'updateWidget', 'exit'],
data() {
return {
widgetAdderSelected: null,
widgetDefs,
settings: {},
faTimes, faPlus, faCog
};
},
computed: {
_widgets: {
get() {
return this.widgets;
},
set(value) {
this.$emit('updateWidgets', value);
}
}
},
methods: {
configWidget(id) {
this.settings[id]();
},
addWidget() {
if (this.widgetAdderSelected == null) return;
this.$emit('addWidget', {
name: this.widgetAdderSelected,
id: uuid(),
data: {}
});
this.widgetAdderSelected = null;
},
removeWidget(widget) {
this.$emit('removeWidget', widget);
},
updateWidget(id, data) {
this.$emit('updateWidget', { id, data });
},
}
});
</script>
<style lang="scss" scoped>
.vjoppmmu {
> header {
margin: 16px 0;
> * {
width: 100%;
padding: 4px;
}
}
> .widget, .customize-container {
margin: var(--margin) 0;
&:first-of-type {
margin-top: 0;
}
}
.customize-container {
position: relative;
cursor: move;
> *:not(.remove):not(.config) {
pointer-events: none;
}
> .config,
> .remove {
position: absolute;
z-index: 10000;
top: 8px;
width: 32px;
height: 32px;
color: #fff;
background: rgba(#000, 0.7);
border-radius: 4px;
}
> .config {
right: 8px + 8px + 32px;
}
> .remove {
right: 8px;
}
}
}
</style>

View File

@ -13,12 +13,10 @@ export default {
const viewHeight = container.clientHeight;
const height = container.scrollHeight;
isBottom = (pos + viewHeight > height - 32);
console.log(isBottom);
}, { passive: true });
container.scrollTop = container.scrollHeight;
const ro = new ResizeObserver((entries, observer) => {
console.log(isBottom);
if (isBottom) {
const height = container.scrollHeight;
container.scrollTop = height;

View File

@ -4,6 +4,7 @@ import { popup } from '@/os';
const start = isDeviceTouch ? 'touchstart' : 'mouseover';
const end = isDeviceTouch ? 'touchend' : 'mouseleave';
const delay = 100;
export default {
mounted(el: HTMLElement, binding, vn) {
@ -47,13 +48,13 @@ export default {
el.addEventListener(start, () => {
clearTimeout(self.showTimer);
clearTimeout(self.hideTimer);
self.showTimer = setTimeout(show, 300);
self.showTimer = setTimeout(show, delay);
}, { passive: true });
el.addEventListener(end, () => {
clearTimeout(self.showTimer);
clearTimeout(self.hideTimer);
self.hideTimer = setTimeout(self.close, 300);
self.hideTimer = setTimeout(self.close, delay);
}, { passive: true });
el.addEventListener('click', () => {

View File

@ -488,19 +488,6 @@ hr {
transform: scale(0.9);
}
.zoom-in-top-enter-active,
.zoom-in-top-leave-active {
opacity: 1;
transform: scaleY(1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
transform-origin: center top;
}
.zoom-in-top-enter-from,
.zoom-in-top-leave-active {
opacity: 0;
transform: scaleY(0);
}
@keyframes blink {
0% { opacity: 1; transform: scale(1); }
30% { opacity: 1; transform: scale(1); }

View File

@ -9,11 +9,6 @@ export default defineComponent({
type: Array,
required: true,
},
direction: {
type: String,
required: false,
default: 'down'
},
reversed: {
type: Boolean,
required: false,
@ -37,14 +32,10 @@ export default defineComponent({
});
}
return h(!this.reversed ? TransitionGroup : 'div', !this.reversed ? {
return h(TransitionGroup, {
class: 'hmjzthxl',
name: 'list',
name: this.reversed ? 'list-reversed' : 'list',
tag: 'div',
'data-direction': this.direction,
'data-reversed': this.reversed ? 'true' : 'false',
} : {
class: 'hmjzthxl',
}, this.items.map((item, i) => {
const el = this.$slots.default({
item: item
@ -95,23 +86,20 @@ export default defineComponent({
> .list-move {
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
> .list-enter-active {
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
&[data-direction="up"] {
> .list-enter-from {
opacity: 0;
transform: translateY(64px);
}
> .list-enter-from {
opacity: 0;
transform: translateY(-64px);
}
&[data-direction="down"] {
> .list-enter-from {
opacity: 0;
transform: translateY(-64px);
}
> .list-reversed-enter-active, > .list-reversed-leave-active {
transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
> .list-reversed-enter-from {
opacity: 0;
transform: translateY(64px);
}
}
</style>
@ -120,6 +108,20 @@ export default defineComponent({
.hmjzthxl {
> .separator {
text-align: center;
position: relative;
&:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
width: calc(100% - 32px);
height: 1px;
background: var(--divider);
}
> .date {
display: inline-block;
@ -130,6 +132,7 @@ export default defineComponent({
text-align: center;
font-size: 12px;
color: var(--dateLabelFg);
background: var(--panel);
> span {
&:first-child {

View File

@ -0,0 +1,44 @@
<template>
<div class="_monospace">
<span>
<span v-text="hh"></span>
<span :style="{ visibility: showColon ? 'visible' : 'hidden' }">:</span>
<span v-text="mm"></span>
<span :style="{ visibility: showColon ? 'visible' : 'hidden' }">:</span>
<span v-text="ss"></span>
</span>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import * as os from '@/os';
export default defineComponent({
data() {
return {
clock: null,
hh: null,
mm: null,
ss: null,
showColon: true,
};
},
created() {
this.tick();
this.clock = setInterval(this.tick, 1000);
},
beforeUnmount() {
clearInterval(this.clock);
},
methods: {
tick() {
const now = new Date();
this.hh = now.getHours().toString().padStart(2, '0');
this.mm = now.getMinutes().toString().padStart(2, '0');
this.ss = now.getSeconds().toString().padStart(2, '0');
this.showColon = now.getSeconds() % 2 === 0;
}
}
});
</script>

View File

@ -6,11 +6,14 @@
<header class="header">
<div class="left">
<button class="_button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
<MkAvatar :user="$i" class="avatar"/><!--<MkAcct class="text" :user="$i"/>-->
</button>
</div>
<div class="right">
<MkA class="item" to="/my/notifications"><Fa :icon="faBell"/><i v-if="$i.hasUnreadNotification"><Fa :icon="faCircle"/></i></MkA>
<MkA class="item" to="/my/messaging" v-tooltip="$ts.messaging"><Fa class="icon" :icon="faComments"/><i v-if="$i.hasUnreadMessagingMessage"><Fa :icon="faCircle"/></i></MkA>
<MkA class="item" to="/my/messages" v-tooltip="$ts.directNotes"><Fa class="icon" :icon="faEnvelope"/><i v-if="$i.hasUnreadSpecifiedNotes"><Fa :icon="faCircle"/></i></MkA>
<MkA class="item" to="/my/mentions" v-tooltip="$ts.mentions"><Fa class="icon" :icon="faAt"/><i v-if="$i.hasUnreadMentions"><Fa :icon="faCircle"/></i></MkA>
<MkA class="item" to="/my/notifications" v-tooltip="$ts.notifications"><Fa class="icon" :icon="faBell"/><i v-if="$i.hasUnreadNotification"><Fa :icon="faCircle"/></i></MkA>
</div>
</header>
<div class="body">
@ -18,65 +21,94 @@
<div class="header">{{ $ts.timeline }}</div>
<div class="body">
<MkA to="/timeline/home" class="item" :class="{ active: tl === 'home' }"><Fa :icon="faHome" class="icon"/>{{ $ts._timelines.home }}</MkA>
<MkA to="/timeline/local" class="item" :class="{ active: tl === 'local' }"><Fa :icon="faHome" class="icon"/>{{ $ts._timelines.local }}</MkA>
<MkA to="/timeline/social" class="item" :class="{ active: tl === 'social' }"><Fa :icon="faHome" class="icon"/>{{ $ts._timelines.social }}</MkA>
<MkA to="/timeline/global" class="item" :class="{ active: tl === 'global' }"><Fa :icon="faHome" class="icon"/>{{ $ts._timelines.global }}</MkA>
</div>
</div>
<div class="container" v-if="lists">
<div class="header">{{ $ts.lists }}</div>
<div class="body">
<MkA v-for="list in lists" :key="list.id" :to="`/my/list/${ list.id }`" class="item" :class="{ active: tl === `list:${ list.id }` }"><Fa :icon="faListUl" class="icon"/>{{ list.name }}</MkA>
</div>
</div>
<div class="container" v-if="antennas">
<div class="header">{{ $ts.antennas }}</div>
<div class="body">
<MkA v-for="antenna in antennas" :key="antenna.id" :to="`/my/antenna/${ antenna.id }`" class="item" :class="{ active: tl === `antenna:${ antenna.id }` }"><Fa :icon="faSatellite" class="icon"/>{{ antenna.name }}</MkA>
<MkA to="/timeline/local" class="item" :class="{ active: tl === 'local' }"><Fa :icon="faComments" class="icon"/>{{ $ts._timelines.local }}</MkA>
<MkA to="/timeline/social" class="item" :class="{ active: tl === 'social' }"><Fa :icon="faShareAlt" class="icon"/>{{ $ts._timelines.social }}</MkA>
<MkA to="/timeline/global" class="item" :class="{ active: tl === 'global' }"><Fa :icon="faGlobe" class="icon"/>{{ $ts._timelines.global }}</MkA>
</div>
</div>
<div class="container" v-if="followedChannels">
<div class="header">{{ $ts.channel }}</div>
<div class="header">{{ $ts.channel }} ({{ $ts.following }})<button class="_button add" @click="addChannel"><Fa :icon="faPlus"/></button></div>
<div class="body">
<MkA v-for="channel in followedChannels" :key="channel.id" :to="`/channels/${ channel.id }`" class="item" :class="{ active: tl === `channel:${ channel.id }`, read: !channel.hasUnreadNote }"><Fa :icon="faSatelliteDish" class="icon"/>{{ channel.name }}</MkA>
</div>
</div>
<div class="container" v-if="featuredChannels">
<div class="header">{{ $ts.channel }}</div>
<div class="header">{{ $ts.channel }}<button class="_button add" @click="addChannel"><Fa :icon="faPlus"/></button></div>
<div class="body">
<MkA v-for="channel in featuredChannels" :key="channel.id" :to="`/channels/${ channel.id }`" class="item" :class="{ active: tl === `channel:${ channel.id }` }"><Fa :icon="faSatelliteDish" class="icon"/>{{ channel.name }}</MkA>
</div>
</div>
<div class="container" v-if="lists">
<div class="header">{{ $ts.lists }}<button class="_button add" @click="addList"><Fa :icon="faPlus"/></button></div>
<div class="body">
<MkA v-for="list in lists" :key="list.id" :to="`/my/list/${ list.id }`" class="item" :class="{ active: tl === `list:${ list.id }` }"><Fa :icon="faListUl" class="icon"/>{{ list.name }}</MkA>
</div>
</div>
<div class="container" v-if="antennas">
<div class="header">{{ $ts.antennas }}<button class="_button add" @click="addAntenna"><Fa :icon="faPlus"/></button></div>
<div class="body">
<MkA v-for="antenna in antennas" :key="antenna.id" :to="`/my/antenna/${ antenna.id }`" class="item" :class="{ active: tl === `antenna:${ antenna.id }` }"><Fa :icon="faSatellite" class="icon"/>{{ antenna.name }}</MkA>
</div>
</div>
<div class="container">
<div class="body">
<MkA to="/my/favorites" class="item"><Fa :icon="faStar" class="icon"/>{{ $ts.favorites }}</MkA>
</div>
</div>
</div>
<footer class="footer">
<div class="left">
<button class="_button menu" @click="showMenu">
<Fa :icon="faBars"/>
<Fa class="icon" :icon="faBars"/>
</button>
</div>
<div class="right">
<MkA class="item" to="/settings"><Fa :icon="faCog"/></MkA>
<button class="_button item search" @click="search" v-tooltip="$ts.search">
<Fa :icon="faSearch"/>
</button>
<MkA class="item" to="/settings" v-tooltip="$ts.settings"><Fa class="icon" :icon="faCog"/></MkA>
</div>
</footer>
</div>
<main class="main" @contextmenu.stop="onContextmenu">
<header class="header" ref="header" @click="onHeaderClick">
<div v-if="tl === 'home'">
<Fa :icon="faHome" class="icon"/>
<div class="title">{{ $ts._timelines.home }}</div>
<div class="left">
<template v-if="tl === 'home'">
<Fa :icon="faHome" class="icon"/>
<div class="title">{{ $ts._timelines.home }}</div>
</template>
<template v-else-if="tl === 'local'">
<Fa :icon="faComments" class="icon"/>
<div class="title">{{ $ts._timelines.local }}</div>
</template>
<template v-else-if="tl === 'social'">
<Fa :icon="faShareAlt" class="icon"/>
<div class="title">{{ $ts._timelines.social }}</div>
</template>
<template v-else-if="tl === 'global'">
<Fa :icon="faGlobe" class="icon"/>
<div class="title">{{ $ts._timelines.global }}</div>
</template>
<template v-else-if="tl.startsWith('channel:')">
<Fa :icon="faSatelliteDish" class="icon"/>
<div class="title" v-if="currentChannel">{{ currentChannel.name }}<div class="description">{{ currentChannel.description }}</div></div>
</template>
</div>
<div v-else-if="tl === 'local'">
<Fa :icon="faShareAlt" class="icon"/>
<div class="title">{{ $ts._timelines.local }}</div>
</div>
<div v-else-if="tl === 'social'">
<Fa :icon="faShareAlt" class="icon"/>
<div class="title">{{ $ts._timelines.social }}</div>
</div>
<div v-else-if="tl === 'global'">
<Fa :icon="faShareAlt" class="icon"/>
<div class="title">{{ $ts._timelines.global }}</div>
<div class="right">
<div class="instance">{{ instanceName }}</div>
<XHeaderClock class="clock"/>
<button class="_button button search" @click="search" v-tooltip="$ts.search">
<Fa :icon="faSearch"/>
</button>
<button class="_button button follow" v-if="tl.startsWith('channel:') && currentChannel" :class="{ followed: currentChannel.isFollowing }" @click="toggleChannelFollow" v-tooltip="currentChannel.isFollowing ? $ts.unfollow : $ts.follow">
<Fa v-if="currentChannel.isFollowing" :icon="faStar"/>
<Fa v-else :icon="farStar"/>
</button>
<button class="_button button menu" v-if="tl.startsWith('channel:') && currentChannel" @click="openChannelMenu">
<Fa :icon="faEllipsisH"/>
</button>
</div>
</header>
<div class="body">
@ -89,7 +121,10 @@
</footer>
</main>
<XSide class="side" ref="side"/>
<XSide class="side" ref="side" @open="sideViewOpening = true" @close="sideViewOpening = false"/>
<div class="side widgets" :class="{ sideViewOpening }">
<XWidgets/>
</div>
<XCommon/>
</div>
@ -97,24 +132,31 @@
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faColumns, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog } from '@fortawesome/free-solid-svg-icons';
import { faBell } from '@fortawesome/free-regular-svg-icons';
import { instanceName } from '@/config';
import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faColumns, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog, faSearch, faPlus, faStar, faAt, faLink, faEllipsisH, faGlobe } from '@fortawesome/free-solid-svg-icons';
import { faBell, faStar as farStar, faEnvelope, faComments } from '@fortawesome/free-regular-svg-icons';
import { instanceName, url } from '@/config';
import XSidebar from '@/components/sidebar.vue';
import XWidgets from './widgets.vue';
import XCommon from '../_common_/common.vue';
import XSide from './side.vue';
import XTimeline from './timeline.vue';
import XPostForm from './post-form.vue';
import XHeaderClock from './header-clock.vue';
import * as os from '@/os';
import { router } from '@/router';
import { sidebarDef } from '@/sidebar';
import { search } from '@/scripts/search';
import copyToClipboard from '@/scripts/copy-to-clipboard';
export default defineComponent({
components: {
XCommon,
XSidebar,
XWidgets,
XSide, // NOTE: dynamic importAsyncComponentWrapperref
XTimeline,
XPostForm,
XHeaderClock,
},
provide() {
@ -149,12 +191,21 @@ export default defineComponent({
antennas: null,
followedChannels: null,
featuredChannels: null,
currentChannel: null,
menuDef: sidebarDef,
faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog,
sideViewOpening: false,
instanceName,
faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog, faSearch, faPlus, faStar, farStar, faAt, faLink, faEllipsisH, faGlobe, faComments, faEnvelope,
};
},
created() {
router.beforeEach((to, from) => {
this.$refs.side.navigate(to.fullPath);
// search?q=foo return false
//return false;
});
os.api('users/lists/list').then(lists => {
this.lists = lists;
});
@ -170,6 +221,14 @@ export default defineComponent({
os.api('channels/featured').then(channels => {
this.featuredChannels = channels;
});
this.$watch('tl', () => {
if (this.tl.startsWith('channel:')) {
os.api('channels/show', { channelId: this.tl.replace('channel:', '') }).then(channel => {
this.currentChannel = channel;
});
}
}, { immediate: true });
},
methods: {
@ -181,10 +240,38 @@ export default defineComponent({
os.post();
},
search() {
search();
},
top() {
window.scroll({ top: 0, behavior: 'smooth' });
},
async toggleChannelFollow() {
if (this.currentChannel.isFollowing) {
await os.apiWithDialog('channels/unfollow', {
channelId: this.currentChannel.id
});
this.currentChannel.isFollowing = false;
} else {
await os.apiWithDialog('channels/follow', {
channelId: this.currentChannel.id
});
this.currentChannel.isFollowing = true;
}
},
openChannelMenu(ev) {
os.modalMenu([{
text: this.$ts.copyUrl,
icon: faLink,
action: () => {
copyToClipboard(`${url}/channels/${this.currentChannel.id}`);
}
}], ev.currentTarget || ev.target);
},
onTransition() {
if (window._scroll) window._scroll();
},
@ -231,8 +318,7 @@ export default defineComponent({
$ui-font-size: 1em; // TODO:
// 100vh ... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
min-height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box;
height: calc(var(--vh, 1vh) * 100);
display: flex;
> .nav {
@ -245,11 +331,11 @@ export default defineComponent({
> .header, > .footer {
$padding: 8px;
display: flex;
align-items: center;
z-index: 1000;
height: $header-height;
padding: $padding;
box-sizing: border-box;
line-height: ($header-height - ($padding * 2));
user-select: none;
&.header {
@ -260,31 +346,29 @@ export default defineComponent({
border-top: solid 1px var(--divider);
}
> .left {
> .account {
display: flex;
align-items: center;
padding: 0 8px;
> .avatar {
width: 26px;
height: 26px;
margin-right: 8px;
}
}
}
> .right {
margin-left: auto;
> .item {
> .left, > .right {
> .item, > .menu {
display: inline-block;
vertical-align: middle;
height: ($header-height - ($padding * 2));
width: ($header-height - ($padding * 2));
padding: 10px;
box-sizing: border-box;
margin-right: 4px;
//opacity: 0.6;
position: relative;
border-radius: 5px;
&:hover {
background: rgba(0, 0, 0, 0.05);
}
> .icon {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
> i {
position: absolute;
@ -297,11 +381,40 @@ export default defineComponent({
}
}
}
> .left {
flex: 1;
min-width: 0;
> .account {
display: flex;
align-items: center;
padding: 0 8px;
> .avatar {
width: 26px;
height: 26px;
margin-right: 8px;
}
> .text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.9em;
}
}
}
> .right {
margin-left: auto;
}
}
> .body {
flex: 1;
min-width: 0;
padding: 8px 0;
overflow: auto;
> .container {
@ -310,9 +423,14 @@ export default defineComponent({
}
> .header {
display: flex;
font-size: 0.9em;
padding: 8px 16px;
opacity: 0.7;
> .add {
margin-left: auto;
}
}
> .body {
@ -338,7 +456,7 @@ export default defineComponent({
}
> .icon {
margin-right: 6px;
margin-right: 8px;
opacity: 0.6;
}
}
@ -358,18 +476,20 @@ export default defineComponent({
> .header {
$padding: 8px;
display: flex;
z-index: 1000;
height: $header-height;
padding: $padding;
box-sizing: border-box;
line-height: ($header-height - ($padding * 2));
font-weight: bold;
background-color: var(--panel);
border-bottom: solid 1px var(--divider);
user-select: none;
> div {
> .left {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
> .icon {
height: ($header-height - ($padding * 2));
@ -379,11 +499,60 @@ export default defineComponent({
margin-right: 4px;
opacity: 0.6;
}
> .title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
font-weight: bold;
> .description {
opacity: 0.6;
font-size: 0.8em;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
> .right {
display: flex;
align-items: center;
min-width: 0;
margin-left: auto;
padding-left: 8px;
> .instance {
margin-right: 16px;
}
> .clock {
margin-right: 16px;
}
> .button {
height: ($header-height - ($padding * 2));
width: ($header-height - ($padding * 2));
box-sizing: border-box;
position: relative;
border-radius: 5px;
&:hover {
background: rgba(0, 0, 0, 0.05);
}
&.follow.followed {
color: var(--accent);
}
}
}
}
> .footer {
padding: 16px;
padding: 0 16px 16px 16px;
}
> .body {
@ -394,7 +563,14 @@ export default defineComponent({
}
> .side {
width: 350px;
border-left: solid 1px var(--divider);
&.widgets.sideViewOpening {
@media (max-width: 1400px) {
display: none;
}
}
}
}
</style>

View File

@ -1,10 +1,10 @@
<template>
<div
class="note"
class="vfzoeqcg"
v-if="!muted"
v-show="!isDeleted"
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }"
:class="{ renote: isRenote, highlighted: appearNote._prId_ || appearNote._featuredId_, operating }"
v-hotkey="keymap"
>
<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
@ -171,6 +171,7 @@ export default defineComponent({
collapsed: false,
isDeleted: false,
muted: false,
operating: false,
faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish
};
},
@ -439,16 +440,19 @@ export default defineComponent({
reply(viaKeyboard = false) {
pleaseLogin();
this.operating = true;
os.post({
reply: this.appearNote,
animation: !viaKeyboard,
}, () => {
this.operating = false;
this.focus();
});
},
renote(viaKeyboard = false) {
pleaseLogin();
this.operating = true;
this.blur();
os.modalMenu([{
text: this.$ts.renote,
@ -468,6 +472,8 @@ export default defineComponent({
}
}], this.$refs.renoteButton, {
viaKeyboard
}).then(() => {
this.operating = false;
});
},
@ -494,10 +500,11 @@ export default defineComponent({
});
},
react(viaKeyboard = false) {
async react(viaKeyboard = false) {
pleaseLogin();
this.operating = true;
this.blur();
os.popup(import('@/components/emoji-picker.vue'), {
const { dispose } = await os.popup(import('@/components/emoji-picker.vue'), {
src: this.$refs.reactButton,
asReactionPicker: true
}, {
@ -508,9 +515,13 @@ export default defineComponent({
reaction: reaction
});
}
this.focus();
},
}, 'closed');
closed: () => {
this.operating = false;
this.focus();
dispose();
}
});
},
reactDirectly(reaction) {
@ -734,9 +745,13 @@ export default defineComponent({
},
menu(viaKeyboard = false) {
this.operating = true;
os.modalMenu(this.getMenu(), this.$refs.menuButton, {
viaKeyboard
}).then(this.focus);
}).then(() => {
this.operating = false;
this.focus();
});
},
showRenoteMenu(viaKeyboard = false) {
@ -857,10 +872,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.note {
.vfzoeqcg {
position: relative;
transition: box-shadow 0.1s ease;
overflow: hidden;
contain: content;
//
@ -879,18 +892,24 @@ export default defineComponent({
background: rgba(0, 0, 0, 0.05);
}
&:hover > .article > .main > .footer {
display: block;
&:hover, &.operating {
> .article > .main > .footer {
display: block;
}
}
&.renote {
background: rgba(128, 255, 0, 0.05);
}
&.highlighted {
background: rgba(255, 128, 0, 0.05);
}
> .info {
display: flex;
align-items: center;
padding: 16px 32px 8px 32px;
padding: 12px 16px 4px 16px;
line-height: 24px;
font-size: 90%;
white-space: pre;
@ -901,8 +920,9 @@ export default defineComponent({
}
> .hide {
margin-left: auto;
margin-left: 16px;
color: inherit;
opacity: 0.7;
}
}
@ -918,7 +938,7 @@ export default defineComponent({
> .renote {
display: flex;
align-items: center;
padding: 12px 16px 8px 16px;
padding: 12px 16px 4px 16px;
line-height: 28px;
white-space: pre;
color: var(--renote);
@ -983,8 +1003,8 @@ export default defineComponent({
> .avatar {
flex-shrink: 0;
display: block;
//position: sticky;
//top: 72px;
position: sticky;
top: 12px;
margin: 0 14px 0 0;
width: 46px;
height: 46px;
@ -1054,8 +1074,13 @@ export default defineComponent({
}
}
> .files {
max-width: 500px;
}
> .url-preview {
margin-top: 8px;
max-width: 500px;
}
> .poll {
@ -1122,5 +1147,9 @@ export default defineComponent({
.muted {
padding: 8px 16px;
opacity: 0.7;
&:hover {
background: rgba(0, 0, 0, 0.05);
}
}
</style>

View File

@ -108,7 +108,7 @@ export default defineComponent({
autofocus: {
type: Boolean,
required: false,
default: true
default: false
},
},

View File

@ -1,13 +1,11 @@
<template>
<div class="qvzfzxam _narrow_" v-if="component">
<div class="container">
<header class="header" @contextmenu.prevent.stop="onContextmenu">
<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
<XHeader class="title" :info="pageInfo" :with-back="false" :center="false"/>
<button class="_button" @click="close()"><Fa :icon="faTimes"/></button>
</header>
<component :is="component" v-bind="props" :ref="changePage"/>
</div>
<div class="mrajymqm _narrow_" v-if="component">
<header class="header" @contextmenu.prevent.stop="onContextmenu">
<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
<XHeader class="title" :info="pageInfo" :with-back="false" :center="false"/>
<button class="_button" @click="close()"><Fa :icon="faTimes"/></button>
</header>
<component :is="component" v-bind="props" :ref="changePage"/>
</div>
</template>
@ -64,6 +62,7 @@ export default defineComponent({
const { component, props } = resolve(path);
this.component = component;
this.props = props;
this.$emit('open');
},
back() {
@ -74,6 +73,7 @@ export default defineComponent({
this.path = null;
this.component = null;
this.props = {};
this.$emit('close');
},
onContextmenu(e) {
@ -114,50 +114,44 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.qvzfzxam {
.mrajymqm {
$header-height: 54px; // TODO:
--section-padding: 16px;
--margin: var(--marginHalf);
width: 390px;
height: 100%;
overflow: auto;
box-sizing: border-box;
> .container {
position: fixed;
width: 390px;
height: 100vh;
overflow: auto;
> .header {
display: flex;
position: sticky;
z-index: 1000;
top: 0;
height: $header-height;
width: 100%;
line-height: $header-height;
font-weight: bold;
//background-color: var(--panel);
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
background-color: var(--header);
border-bottom: solid 1px var(--divider);
box-sizing: border-box;
> .header {
display: flex;
position: sticky;
z-index: 1000;
top: 0;
> ._button {
height: $header-height;
width: 100%;
line-height: $header-height;
font-weight: bold;
//background-color: var(--panel);
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
background-color: var(--header);
border-bottom: solid 1px var(--divider);
box-sizing: border-box;
width: $header-height;
> ._button {
height: $header-height;
width: $header-height;
&:hover {
color: var(--fgHighlighted);
}
&:hover {
color: var(--fgHighlighted);
}
}
> .title {
flex: 1;
position: relative;
}
> .title {
flex: 1;
position: relative;
}
}
}

View File

@ -0,0 +1,13 @@
import { markRaw } from 'vue';
import { Storage } from '../../pizzax';
export const store = markRaw(new Storage('chatUi', {
widgets: {
where: 'account',
default: [] as {
name: string;
id: string;
data: Record<string, any>;
}[]
},
}));

View File

@ -1,5 +1,8 @@
<template>
<XNotes ref="tl" :pagination="pagination" @queue="$emit('queue', $event)" v-follow="pagination.reversed"/>
<div class="dbiokgaf">
<div class="new" v-if="queue > 0" :style="{ width: width + 'px', [pagination.reversed ? 'bottom' : 'top']: pagination.reversed ? bottom + 'px' : top + 'px' }"><button class="_buttonPrimary" @click="goTop()">{{ $ts.newNoteRecived }}</button></div>
<XNotes class="tl" ref="tl" :pagination="pagination" @queue="queueUpdated" v-follow="pagination.reversed"/>
</div>
</template>
<script lang="ts">
@ -7,7 +10,7 @@ import { defineComponent } from 'vue';
import XNotes from './notes.vue';
import * as os from '@/os';
import * as sound from '@/scripts/sound';
import { scrollToBottom } from '@/scripts/scroll';
import { scrollToBottom, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
import follow from '@/directives/follow-append';
export default defineComponent({
@ -62,6 +65,10 @@ export default defineComponent({
includeLocalRenotes: this.$store.state.showLocalRenotes
},
query: {},
queue: 0,
width: 0,
top: 0,
bottom: 0,
};
},
@ -185,6 +192,43 @@ export default defineComponent({
focus() {
this.$refs.tl.focus();
},
goTop() {
const container = getScrollContainer(this.$el);
container.scrollTop = 0;
},
queueUpdated(q) {
if (this.$el.offsetWidth !== 0) {
const rect = this.$el.getBoundingClientRect();
const scrollTop = getScrollPosition(this.$el);
this.width = this.$el.offsetWidth;
this.top = rect.top + scrollTop;
this.bottom = this.$el.offsetHeight;
}
this.queue = q;
},
}
});
</script>
<style lang="scss" scoped>
.dbiokgaf {
padding: 16px 0;
// TODO: position sticky
overflow: hidden;
> .new {
position: fixed;
z-index: 1000;
> button {
display: block;
margin: 16px auto;
padding: 8px 16px;
border-radius: 32px;
}
}
}
</style>

View File

@ -0,0 +1,61 @@
<template>
<div class="qydbhufi">
<XWidgets :edit="edit" :widgets="widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
<button v-if="edit" @click="edit = false" class="_textButton" style="font-size: 0.9em;">{{ $ts.editWidgetsExit }}</button>
<button v-else @click="edit = true" class="_textButton" style="font-size: 0.9em;">{{ $ts.editWidgets }}</button>
</div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import XWidgets from '@/components/widgets.vue';
import { store } from './store.ts';
export default defineComponent({
components: {
XWidgets,
},
data() {
return {
edit: false,
widgets: store.reactiveState.widgets
};
},
methods: {
addWidget(widget) {
store.set('widgets', [widget, ...store.state.widgets]);
},
removeWidget(widget) {
store.set('widgets', store.state.widgets.filter(w => w.id != widget.id));
},
updateWidget({ id, data }) {
store.set('widgets', store.state.widgets.map(w => w.id === id ? {
...w,
data: data
} : w));
},
updateWidgets(widgets) {
store.set('widgets', widgets);
}
}
});
</script>
<style lang="scss" scoped>
.qydbhufi {
height: 100%;
box-sizing: border-box;
overflow: auto;
padding: var(--margin);
::v-deep(._panel) {
box-shadow: none;
}
}
</style>

View File

@ -3,49 +3,22 @@
<template #header><Fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template>
<div class="wtdtxvec">
<template v-if="edit">
<header>
<MkSelect v-model:value="widgetAdderSelected" style="margin-bottom: var(--margin)">
<template #label>{{ $ts.selectWidget }}</template>
<option v-for="widget in widgets" :value="widget" :key="widget">{{ $t(`_widgets.${widget}`) }}</option>
</MkSelect>
<MkButton inline @click="addWidget" primary><Fa :icon="faPlus"/> {{ $ts.add }}</MkButton>
<MkButton inline @click="edit = false">{{ $ts.close }}</MkButton>
</header>
<XDraggable
v-model="_widgets"
item-key="id"
animation="150"
>
<template #item="{element}">
<div class="customize-container" @click="widgetFunc(element.id)">
<button class="remove _button" @click.prevent.stop="removeWidget(element)"><Fa :icon="faTimes"/></button>
<component :is="`mkw-${element.name}`" :widget="element" :setting-callback="setting => settings[element.id] = setting" :column="column" @updateProps="saveWidget(element.id, $event)"/>
</div>
</template>
</XDraggable>
</template>
<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column" @updateProps="saveWidget(widget.id, $event)"/>
<XWidgets :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
</div>
</XColumn>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { v4 as uuid } from 'uuid';
import { faWindowMaximize, faTimes, faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
import MkSelect from '@/components/ui/select.vue';
import MkButton from '@/components/ui/button.vue';
import XWidgets from '@/components/widgets.vue';
import XColumn from './column.vue';
import { widgets } from '../../widgets';
import { addColumnWidget, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';
export default defineComponent({
components: {
XColumn,
XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
MkSelect,
MkButton,
XWidgets,
},
props: {
@ -62,49 +35,27 @@ export default defineComponent({
data() {
return {
edit: false,
widgetAdderSelected: null,
widgets,
settings: {},
faWindowMaximize, faTimes, faPlus
};
},
computed: {
_widgets: {
get() {
return this.column.widgets;
},
set(value) {
setColumnWidgets(this.column.id, value);
}
}
},
methods: {
widgetFunc(id) {
this.settings[id]();
},
addWidget() {
if (this.widgetAdderSelected == null) return;
addColumnWidget(this.column.id, {
name: this.widgetAdderSelected,
id: uuid(),
data: {}
});
this.widgetAdderSelected = null;
addWidget(widget) {
addColumnWidget(this.column.id, widget);
},
removeWidget(widget) {
removeColumnWidget(this.column.id, widget);
},
saveWidget(id, data) {
updateWidget({ id, data }) {
updateColumnWidget(this.column.id, id, data);
},
updateWidgets(widgets) {
setColumnWidgets(this.column.id, widgets);
},
func() {
this.edit = !this.edit;
}
@ -114,46 +65,12 @@ export default defineComponent({
<style lang="scss" scoped>
.wtdtxvec {
._panel {
--margin: 8px;
padding: 0 var(--margin);
::v-deep(._panel) {
box-shadow: none;
}
> header {
padding: 16px;
> * {
width: 100%;
padding: 4px;
}
}
> .widget, .customize-container {
margin: 8px;
&:first-of-type {
margin-top: 0;
}
}
.customize-container {
position: relative;
cursor: move;
> *:not(.remove) {
pointer-events: none;
}
> .remove {
position: absolute;
z-index: 2;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
color: #fff;
background: rgba(#000, 0.7);
border-radius: 4px;
}
}
}
</style>

View File

@ -1,46 +1,21 @@
<template>
<div class="efzpzdvf">
<template v-if="editMode">
<MkButton primary @click="addWidget" class="add"><Fa :icon="faPlus"/></MkButton>
<XDraggable
v-model="widgets"
item-key="id"
handle=".handle"
animation="150"
class="sortable"
>
<template #item="{element}">
<div class="customize-container _panel">
<header>
<span class="handle"><Fa :icon="faBars"/></span>{{ $t('_widgets.' + element.name) }}<button class="remove _button" @click="removeWidget(element)"><Fa :icon="faTimes"/></button>
</header>
<div @click="widgetFunc(element.id)">
<component class="_inContainer_ _forceContainerFull_" :is="`mkw-${element.name}`" :widget="element" :ref="element.id" :setting-callback="setting => settings[element.id] = setting" @updateProps="saveWidget(element.id, $event)"/>
</div>
</div>
</template>
</XDraggable>
<button @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $ts.editWidgetsExit }}</button>
</template>
<template v-else>
<component v-for="widget in widgets" class="_inContainer_ _forceContainerFull_" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" @updateProps="saveWidget(widget.id, $event)"/>
<button @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $ts.editWidgets }}</button>
</template>
<XWidgets :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
<button v-if="editMode" @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $ts.editWidgetsExit }}</button>
<button v-else @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faPencilAlt"/> {{ $ts.editWidgets }}</button>
</div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue';
import { v4 as uuid } from 'uuid';
import { faPencilAlt, faPlus, faBars, faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
import { widgets } from '@/widgets';
import XWidgets from '@/components/widgets.vue';
import * as os from '@/os';
import MkButton from '@/components/ui/button.vue';
export default defineComponent({
components: {
MkButton,
XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
XWidgets
},
emits: ['mounted'],
@ -48,62 +23,35 @@ export default defineComponent({
data() {
return {
editMode: false,
settings: {},
faPencilAlt, faPlus, faBars, faTimes, faCheck,
};
},
computed: {
widgets: {
get() {
return this.$store.reactiveState.widgets.value;
},
set(value) {
this.$store.set('widgets', value);
}
},
},
mounted() {
this.$emit('mounted', this.$el);
},
methods: {
widgetFunc(id) {
this.settings[id]();
},
async addWidget() {
const { canceled, result: widget } = await os.dialog({
type: null,
title: this.$ts.chooseWidget,
select: {
items: widgets.map(widget => ({
value: widget,
text: this.$t('_widgets.' + widget),
}))
},
showCancelButton: true
});
if (canceled) return;
this.$store.set('widgets', [...this.$store.state.widgets, {
name: widget,
id: uuid(),
addWidget(widget) {
this.$store.set('widgets', [{
...widget,
place: null,
data: {}
}]);
}, ...this.$store.state.widgets]);
},
removeWidget(widget) {
this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
},
saveWidget(id, data) {
updateWidget({ id, data }) {
this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
...w,
data: data
} : w));
},
updateWidgets(widgets) {
this.$store.set('widgets', widgets);
}
}
});
@ -129,35 +77,5 @@ export default defineComponent({
> .add {
margin: 0 auto;
}
.customize-container {
margin: 8px 0;
> header {
position: relative;
line-height: 32px;
> .handle {
padding: 0 8px;
cursor: move;
}
> .remove {
position: absolute;
top: 0;
right: 0;
padding: 0 8px;
line-height: 32px;
}
}
> div {
padding: 8px;
> * {
pointer-events: none;
}
}
}
}
</style>