jormungandr-bite/packages/client/src/ui/deck.vue

590 lines
13 KiB
Vue
Raw Normal View History

<template>
2023-04-07 18:01:42 -06:00
<div class="mk-deck" :class="[{ isMobile }]">
<XSidebar v-if="!isMobile" />
<div class="main">
<XStatusBars class="statusbars" />
<div
ref="columnsEl"
class="columns"
:class="deckStore.reactiveState.columnAlign.value"
@contextmenu.self.prevent="onContextmenu"
>
<template v-for="ids in layout">
<!-- sectionを利用しているのはdeck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
<section
v-if="ids.length > 1"
class="folder column"
:style="
columns
.filter((c) => ids.includes(c.id))
.some((c) => c.flexible)
? { flex: 1, minWidth: '350px' }
: {
width:
Math.max(
...columns
.filter((c) =>
ids.includes(c.id)
)
.map((c) => c.width)
) + 'px',
}
"
>
<DeckColumnCore
v-for="id in ids"
:ref="id"
:key="id"
:column="columns.find((c) => c.id === id)"
:is-stacked="true"
@parent-focus="moveFocus(id, $event)"
/>
</section>
<DeckColumnCore
v-else
:ref="ids[0]"
:key="ids[0]"
class="column"
:column="columns.find((c) => c.id === ids[0])"
:is-stacked="false"
:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
@parent-focus="moveFocus(ids[0], $event)"
/>
</template>
<div v-if="layout.length === 0" class="intro _panel">
<div>{{ i18n.ts._deck.introduction }}</div>
<MkButton primary class="add" @click="addColumn">{{
i18n.ts._deck.addColumn
}}</MkButton>
<div>{{ i18n.ts._deck.introduction2 }}</div>
2022-07-16 00:19:44 -06:00
</div>
2023-04-07 18:01:42 -06:00
<div class="sideMenu">
<div class="top">
<button
v-tooltip.noDelay.left="
`${i18n.ts._deck.profile}: ${deckStore.state.profile}`
"
class="_button button"
@click="changeProfile"
>
<i class="ph-caret-down ph-bold ph-lg"></i>
</button>
2023-04-15 10:05:18 -06:00
<button
v-if="deckStore.state.profile !== 'default'"
v-tooltip.noDelay.left="i18n.ts._deck.renameProfile"
class="_button button"
@click="renameProfile"
>
<i class="ph-pencil ph-bold ph-lg"></i>
</button>
2023-04-07 18:01:42 -06:00
<button
v-if="deckStore.state.profile !== 'default'"
v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile"
class="_button button"
@click="deleteProfile"
>
<i class="ph-trash ph-bold ph-lg"></i>
</button>
</div>
<div class="middle">
<button
v-tooltip.noDelay.left="i18n.ts._deck.addColumn"
class="_button button new"
@click="addColumn"
>
<i class="ph-plus ph-bold ph-lg"></i>
</button>
</div>
<div class="bottom">
<button
v-tooltip.noDelay.left="i18n.ts.settings"
class="_button button settings"
@click="showSettings"
>
<i class="ph-gear-six ph-bold ph-lg"></i>
</button>
</div>
2022-07-16 00:19:44 -06:00
</div>
2022-07-03 05:30:58 -06:00
</div>
</div>
2023-04-07 18:01:42 -06:00
<div v-if="isMobile" class="buttons">
<button
aria-label="Menu"
2023-04-07 18:01:42 -06:00
class="button nav _button"
@click="drawerMenuShowing = true"
>
<i class="ph-list ph-bold ph-lg"></i
><span v-if="menuIndicated" class="indicator"
><i class="ph-circle ph-fill"></i
></span>
</button>
<button aria-label="Home" class="button home _button" @click="mainRouter.push('/')">
2023-04-07 18:01:42 -06:00
<i class="ph-house ph-bold ph-lg"></i>
</button>
<button
aria-label="Notifications"
2023-04-07 18:01:42 -06:00
class="button notifications _button"
@click="mainRouter.push('/my/notifications')"
>
<i class="ph-bell ph-bold ph-lg"></i
><span v-if="$i?.hasUnreadNotification" class="indicator"
><i class="ph-circle ph-fill"></i
></span>
</button>
<button aria-label="Post" class="button post _button" @click="os.post()">
2023-04-07 18:01:42 -06:00
<i class="ph-pencil ph-bold ph-lg"></i>
</button>
</div>
2023-04-07 18:01:42 -06:00
<transition :name="$store.state.animation ? 'menu-back' : ''">
<div
v-if="drawerMenuShowing"
class="menu-back _modalBg"
@click="drawerMenuShowing = false"
@touchstart.passive="drawerMenuShowing = false"
></div>
</transition>
<transition :name="$store.state.animation ? 'menu' : ''">
<XDrawerMenu v-if="drawerMenuShowing" class="menu" />
</transition>
<XCommon />
</div>
</template>
<script lang="ts" setup>
2023-04-07 18:01:42 -06:00
import {
computed,
defineAsyncComponent,
onMounted,
provide,
ref,
watch,
} from "vue";
import { v4 as uuid } from "uuid";
import XCommon from "./_common_/common.vue";
import {
deckStore,
addColumn as addColumnToStore,
loadDeck,
getProfiles,
2023-04-15 10:05:18 -06:00
renameProfile as renameProfile_,
2023-04-07 18:01:42 -06:00
deleteProfile as deleteProfile_,
} from "./deck/deck-store";
import DeckColumnCore from "@/ui/deck/column-core.vue";
import XSidebar from "@/ui/_common_/navbar.vue";
import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue";
import MkButton from "@/components/MkButton.vue";
import { getScrollContainer } from "@/scripts/scroll";
import * as os from "@/os";
import { navbarItemDef } from "@/navbar";
import { $i } from "@/account";
import { i18n } from "@/i18n";
import { mainRouter } from "@/router";
import { unisonReload } from "@/scripts/unison-reload";
const XStatusBars = defineAsyncComponent(
() => import("@/ui/_common_/statusbars.vue")
);
Migrate to Vue3 (#6587) * Update reaction.vue * fix bug * wip * wip * wjio * wip * Revert "wip" This reverts commit e427f2160adf4e8a4147006e25a89854edab0033. * wip * wip * wip * Update init.ts * Update drive-window.vue * wip * wip * Use PascalCase for components * Use PascalCase for components * update dep * wip * wip * wip * Update init.ts * wip * Update paging.ts * Update test.vue * watch deep * wip * lint * wip * wip * wip * wip * wiop * wip * Update webpack.config.ts * alllow null poll * wip * wip * wip * wiop * UI redesign & refactor (#6714) * wip * wip * wip * wip * wip * Update drive.vue * Update word-mute.vue * wip * wip * wip * clean up * wip * Update default.vue * wip * Update notes.vue * Update mfm.ts * Update index.home.vue * Update post-form.vue * Update post-form-attaches.vue * wip * Update post-form.vue * Update sidebar.vue * wip * wip * Update index.vue * wip * Update default.vue * Update index.vue * Update index.vue * wip * Update post-form-attaches.vue * Update note.vue * wip * clean up * Update notes.vue * wip * wip * Update ja-JP.yml * wip * wip * Update index.vue * wip * wip * wip * wip * wip * wip * wip * wip * Update default.vue * wip * Update _dark.json5 * wip * wip * wip * clean up * wip * wip * Update index.vue * Update test.vue * wip * wip * fix * wip * wip * wip * wip * clena yop * wip * wip * Update store.ts * Update messaging-room.vue * Update default.widgets.vue * fix * wip * wip * Update modal.vue * wip * Update os.ts * Update os.ts * Update deck.vue * Update init.ts * wip * Update ja-JP.yml * v-sizeは単にwindowのresizeを監視するだけで良いかもしれない * Update modal.vue * wip * Update tooltip.ts * wip * wip * wip * wip * wip * Update image-viewer.vue * wip * wip * Update style.scss * Update style.scss * Update visitor.vue * wip * Update init.ts * Update init.ts * wip * wip * Update visitor.vue * Update visitor.vue * Update visitor.vue * Update visitor.vue * wip * wip * Update modal.vue * Update header.vue * Update menu.vue * Update about.vue * Update about-misskey.vue * wip * wip * Update visitor.vue * Update tooltip.ts * wip * Update drive.vue * wip * Update style.scss * Update header.vue * wip * wip * Update users.user.vue * Update announcements.vue * wip * wip * wip * Update emojis.vue * wip * Update emojis.vue * Update style.scss * Update users.vue * wip * Update style.scss * wip * Update welcome.entrance.vue * Update radio.vue * Update size.ts * Update emoji-edit-dialog.vue * wip * Update emojis.vue * wip * Update emojis.vue * Update emojis.vue * Update emojis.vue * wip * wip * wip * wip * Update file-dialog.vue * wip * wip * Update token-generate-window.vue * Update notification-setting-window.vue * wip * wip * Update _error_.vue * Update ja-JP.yml * wip * wip * Update store.ts * Update emojis.vue * Update emojis.vue * Update emojis.vue * Update announcements.vue * Update store.ts * wip * Update page-editor.vue * wip * wip * Update modal.vue * wip * Update select-file.ts * Update timeline.vue * Update emojis.vue * Update os.ts * wip * Update user-select.vue * Update mfm.ts * Update get-file-info.ts * Update drive.vue * Update init.ts * Update mfm.ts * wip * wip * Update window.vue * Update note.vue * wip * wip * Update user-info.vue * wip * wip * wip * wip * wip * Update header.vue * Update header.vue * wip * Update explore.vue * wip * wip * wip * Update webpack.config.ts * wip * wip * wip * wip * wip * wip * Update autocomplete.ts * wip * wip * wip * Update toast.vue * wip * Update post-form-dialog.vue * wip * wip * wip * wip * wip * Update users.vue * wip * Update explore.vue * wip * wip * wip * Update package.json * wip * Update icon-dialog.vue * wip * wip * Update user-preview.ts * wip * wip * wip * wip * wip * Update instance.vue * Update user-name.vue * Update federation.vue * Update instance.vue * wip * wip * Update tag.vue * wip * wip * wip * wip * wip * Update instance.vue * wip * Update os.ts * Update os.ts * wip * wip * wip * Update router.ts * wip * Update init.ts * Update note.vue * Update messages.vue * wip * wip * wip * wip * wip * google * wip * wip * wip * wip * Update theme-editor.vue * wip * wip * Update room.vue * Update channel-editor.vue * wip * Update window.vue * Update window.vue * wip * Update window.vue * Update window.vue * wip * Update menu.vue * wip * wip * wip * wip * Update messaging-room.vue * wip * Update post-form.vue * Update default.widgets.vue * Update window.vue * wip
2020-10-17 05:12:00 -06:00
mainRouter.navHook = (path, flag): boolean => {
2023-04-07 18:01:42 -06:00
if (flag === "forcePage") return false;
const noMainColumn = !deckStore.state.columns.some(
(x) => x.type === "main"
);
2022-07-05 00:55:55 -06:00
if (deckStore.state.navWindow || noMainColumn) {
2022-06-28 02:59:23 -06:00
os.pageWindow(path);
return true;
2022-07-05 00:55:55 -06:00
}
return false;
};
2022-06-28 02:59:23 -06:00
const isMobile = ref(window.innerWidth <= 500);
2023-04-07 18:01:42 -06:00
window.addEventListener("resize", () => {
isMobile.value = window.innerWidth <= 500;
});
const drawerMenuShowing = ref(false);
2023-04-07 18:01:42 -06:00
const route = "TODO";
watch(route, () => {
drawerMenuShowing.value = false;
});
const columns = deckStore.reactiveState.columns;
const layout = deckStore.reactiveState.layout;
const menuIndicated = computed(() => {
if ($i == null) return false;
for (const def in navbarItemDef) {
if (navbarItemDef[def].indicated) return true;
}
return false;
});
2022-07-05 01:07:53 -06:00
function showSettings() {
2023-04-07 18:01:42 -06:00
os.pageWindow("/settings/deck");
2022-07-05 01:07:53 -06:00
}
let columnsEl = $ref<HTMLElement>();
const addColumn = async (ev) => {
const columns = [
2023-04-07 18:01:42 -06:00
"main",
"widgets",
"notifications",
"tl",
"antenna",
"list",
"mentions",
"direct",
];
const { canceled, result: column } = await os.select({
title: i18n.ts._deck.addColumn,
2023-04-07 18:01:42 -06:00
items: columns.map((column) => ({
value: column,
text: i18n.t("_deck._columns." + column),
})),
});
if (canceled) return;
addColumnToStore({
type: column,
id: uuid(),
2023-04-07 18:01:42 -06:00
name: i18n.t("_deck._columns." + column),
width: 330,
});
};
const onContextmenu = (ev) => {
2023-04-07 18:01:42 -06:00
os.contextMenu(
[
{
text: i18n.ts._deck.addColumn,
action: addColumn,
},
],
ev
);
};
2023-04-07 18:01:42 -06:00
document.documentElement.style.overflowY = "hidden";
document.documentElement.style.scrollBehavior = "auto";
window.addEventListener("wheel", (ev) => {
if (ev.target === columnsEl && ev.deltaX === 0) {
columnsEl.scrollLeft += ev.deltaY;
2023-04-07 18:01:42 -06:00
} else if (
getScrollContainer(ev.target as HTMLElement) == null &&
ev.deltaX === 0
) {
columnsEl.scrollLeft += ev.deltaY;
}
});
loadDeck();
2023-04-07 18:01:42 -06:00
function moveFocus(id: string, direction: "up" | "down" | "left" | "right") {
// TODO??
}
2022-07-16 00:19:44 -06:00
function changeProfile(ev: MouseEvent) {
2023-04-07 18:01:42 -06:00
const items = ref([
{
2022-07-16 00:19:44 -06:00
text: deckStore.state.profile,
active: true.valueOf,
2023-04-07 18:01:42 -06:00
},
]);
getProfiles().then((profiles) => {
items.value = [
{
text: deckStore.state.profile,
active: true.valueOf,
2022-07-16 00:19:44 -06:00
},
2023-04-07 18:01:42 -06:00
...profiles
.filter((k) => k !== deckStore.state.profile)
.map((k) => ({
text: k,
action: () => {
deckStore.set("profile", k);
unisonReload();
},
})),
null,
{
text: i18n.ts._deck.newProfile,
icon: "ph-plus ph-bold ph-lg",
action: async () => {
const { canceled, result: name } = await os.inputText({
title: i18n.ts._deck.profile,
allowEmpty: false,
});
if (canceled) return;
deckStore.set("profile", name);
unisonReload();
},
2022-07-16 00:19:44 -06:00
},
2023-04-07 18:01:42 -06:00
];
2022-07-16 00:19:44 -06:00
});
os.popupMenu(items, ev.currentTarget ?? ev.target);
}
2023-04-15 10:05:18 -06:00
async function renameProfile() {
const { canceled, result: newProfileName } = await os.inputText({
title: i18n.ts._deck.renameProfile,
allowEmpty: false,
});
if (canceled) return;
const profiles = await getProfiles();
if (profiles.includes(newProfileName)) {
os.alert({ type: "error", text: i18n.ts._deck.nameAlreadyExists });
return;
}
await renameProfile_(deckStore.state.profile, newProfileName);
unisonReload();
}
2022-07-16 00:19:44 -06:00
async function deleteProfile() {
const { canceled } = await os.confirm({
2023-04-07 18:01:42 -06:00
type: "warning",
text: i18n.t("deleteAreYouSure", { x: deckStore.state.profile }),
2022-07-16 00:19:44 -06:00
});
if (canceled) return;
deleteProfile_(deckStore.state.profile);
2023-04-07 18:01:42 -06:00
deckStore.set("profile", "default");
2022-07-16 00:19:44 -06:00
unisonReload();
}
</script>
<style lang="scss" scoped>
.menu-enter-active,
.menu-leave-active {
opacity: 1;
transform: translateX(0);
2023-04-07 18:01:42 -06:00
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-enter-from,
.menu-leave-active {
opacity: 0;
transform: translateX(-240px);
}
.menu-back-enter-active,
.menu-back-leave-active {
opacity: 1;
transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menu-back-enter-from,
.menu-back-leave-active {
opacity: 0;
}
.mk-deck {
$nav-hide-threshold: 650px; // TODO: どこかに集約したい
2020-12-26 06:41:00 -07:00
// TODO: ここではなくて、各カラムで自身の幅に応じて上書きするようにしたい
--margin: var(--marginHalf);
2022-07-03 05:30:58 -06:00
--deckDividerThickness: 5px;
display: flex;
2020-07-15 03:22:19 -06:00
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box;
flex: 1;
&.isMobile {
padding-bottom: 100px;
}
> .main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
2022-07-03 08:13:41 -06:00
> .columns {
flex: 1;
2022-07-03 05:30:58 -06:00
display: flex;
2022-07-03 08:13:41 -06:00
overflow-x: auto;
overflow-y: clip;
2022-07-03 05:30:58 -06:00
2022-07-03 08:13:41 -06:00
&.center {
> .column:first-of-type {
margin-left: auto;
}
2022-07-03 05:30:58 -06:00
2022-07-03 08:13:41 -06:00
> .column:last-of-type {
margin-right: auto;
}
}
2022-07-03 05:30:58 -06:00
2022-07-03 08:13:41 -06:00
> .column {
flex-shrink: 0;
2023-01-03 17:37:31 -07:00
border-right: solid var(--deckDividerThickness) var(--bg);
2022-07-03 08:13:41 -06:00
&:first-of-type {
2023-01-03 17:37:31 -07:00
border-left: solid var(--deckDividerThickness) var(--bg);
2022-07-03 05:30:58 -06:00
}
2022-07-03 08:13:41 -06:00
&.folder {
display: flex;
flex-direction: column;
2022-07-03 08:13:41 -06:00
> *:not(:last-of-type) {
2023-04-07 18:01:42 -06:00
border-bottom: solid var(--deckDividerThickness)
var(--bg);
2022-07-03 05:30:58 -06:00
}
2022-07-03 08:13:41 -06:00
}
}
2022-07-03 08:13:41 -06:00
> .intro {
padding: 32px;
height: min-content;
text-align: center;
margin: auto;
2022-07-03 08:13:41 -06:00
> .add {
margin: 1em auto;
}
}
2022-07-03 05:30:58 -06:00
> .sideMenu {
2022-07-03 08:13:41 -06:00
flex-shrink: 0;
margin-right: 0;
margin-left: auto;
2022-07-03 05:30:58 -06:00
display: flex;
flex-direction: column;
justify-content: center;
2022-11-18 20:46:30 -07:00
width: 44px;
2022-07-03 05:30:58 -06:00
2023-04-07 18:01:42 -06:00
> .top,
> .middle,
> .bottom {
2022-07-16 00:19:44 -06:00
> .button {
display: block;
width: 100%;
aspect-ratio: 1;
}
}
> .top {
margin-bottom: auto;
}
> .middle {
margin-top: auto;
margin-bottom: auto;
2022-11-18 20:46:30 -07:00
> .new {
font-size: 20px;
background-color: var(--accentedBg);
2023-04-02 00:53:31 -06:00
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
2023-04-02 01:21:43 -06:00
margin: -0.35rem;
transform: scale(0.8);
2022-11-18 20:46:30 -07:00
}
2022-07-16 00:19:44 -06:00
}
> .bottom {
margin-top: auto;
2022-07-03 05:30:58 -06:00
}
}
}
}
> .buttons {
position: fixed;
z-index: 1000;
bottom: 0;
left: 0;
padding: 16px;
display: flex;
width: 100%;
box-sizing: border-box;
> .button {
position: relative;
flex: 1;
padding: 0;
margin: auto;
height: 64px;
border-radius: 8px;
background: var(--panel);
color: var(--fg);
&:not(:last-child) {
margin-right: 12px;
}
@media (max-width: 400px) {
height: 60px;
&:not(:last-child) {
margin-right: 8px;
}
}
&:hover {
background: var(--X2);
}
> .indicator {
position: absolute;
top: 0;
left: 0;
color: var(--indicator);
font-size: 16px;
animation: blink 1s infinite;
}
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
> * {
2022-02-12 01:00:09 -07:00
font-size: 20px;
}
&:disabled {
cursor: default;
> * {
opacity: 0.5;
}
}
}
}
> .menu-back {
z-index: 1001;
}
> .menu {
position: fixed;
top: 0;
left: 0;
z-index: 1001;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
height: calc(var(--vh, 1vh) * 100);
width: 240px;
box-sizing: border-box;
2022-07-15 07:09:05 -06:00
contain: strict;
overflow: auto;
2021-12-03 06:22:08 -07:00
overscroll-behavior: contain;
2022-07-15 07:09:05 -06:00
background: var(--navBg);
}
}
</style>