Merge branch 'develop' into mkjs-n

This commit is contained in:
tamaina 2023-05-26 07:01:29 +00:00
commit 0ef7a3db0f
9 changed files with 130 additions and 82 deletions

1
locales/index.d.ts vendored
View File

@ -1060,6 +1060,7 @@ export interface Locale {
"rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn": string; "rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn": string;
"cancelReactionConfirm": string; "cancelReactionConfirm": string;
"changeReactionConfirm": string; "changeReactionConfirm": string;
"goToMisskey": string;
"_initialAccountSetting": { "_initialAccountSetting": {
"accountCreated": string; "accountCreated": string;
"letsStartAccountSetup": string; "letsStartAccountSetup": string;

View File

@ -1057,6 +1057,7 @@ rolesThatCanBeUsedThisEmojiAsReactionEmptyDescription: "ロールの指定が一
rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn: "ロールは公開ロールである必要があります。" rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn: "ロールは公開ロールである必要があります。"
cancelReactionConfirm: "リアクションを取り消しますか?" cancelReactionConfirm: "リアクションを取り消しますか?"
changeReactionConfirm: "リアクションを変更しますか?" changeReactionConfirm: "リアクションを変更しますか?"
goToMisskey: "Misskeyへ"
_initialAccountSetting: _initialAccountSetting:
accountCreated: "アカウントの作成が完了しました!" accountCreated: "アカウントの作成が完了しました!"

View File

@ -16,7 +16,10 @@
class="_panel" class="_panel"
@posted="state = 'posted'" @posted="state = 'posted'"
/> />
<MkButton v-else-if="state === 'posted'" primary :class="$style.close" @click="close()">{{ i18n.ts.close }}</MkButton> <div v-else-if="state === 'posted'" class="_buttonsCenter">
<MkButton primary @click="close">{{ i18n.ts.close }}</MkButton>
<MkButton @click="goToMisskey">{{ i18n.ts.goToMisskey }}</MkButton>
</div>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
@ -148,10 +151,14 @@ function close(): void {
// 100ms // 100ms
window.setTimeout(() => { window.setTimeout(() => {
mainRouter.push('/'); location.href = '/';
}, 100); }, 100);
} }
function goToMisskey(): void {
location.href = '/';
}
const headerActions = $computed(() => []); const headerActions = $computed(() => []);
const headerTabs = $computed(() => []); const headerTabs = $computed(() => []);
@ -161,9 +168,3 @@ definePageMetadata({
icon: 'ti ti-share', icon: 'ti ti-share',
}); });
</script> </script>
<style lang="scss" module>
.close {
margin: 16px auto;
}
</style>

View File

@ -77,7 +77,7 @@
codeString: '#ffb675', codeString: '#ffb675',
codeNumber: '#cfff9e', codeNumber: '#cfff9e',
codeBoolean: '#c59eff', codeBoolean: '#c59eff',
deckDivider: '#000', deckBg: '#000',
htmlThemeColor: '@bg', htmlThemeColor: '@bg',
X2: ':darken<2<@panel', X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)', X3: 'rgba(255, 255, 255, 0.05)',

View File

@ -77,7 +77,7 @@
codeString: '#b98710', codeString: '#b98710',
codeNumber: '#0fbbbb', codeNumber: '#0fbbbb',
codeBoolean: '#62b70c', codeBoolean: '#62b70c',
deckDivider: ':darken<3<@bg', deckBg: ':darken<3<@bg',
htmlThemeColor: '@bg', htmlThemeColor: '@bg',
X2: ':darken<2<@panel', X2: ':darken<2<@panel',
X3: 'rgba(0, 0, 0, 0.05)', X3: 'rgba(0, 0, 0, 0.05)',

View File

@ -83,6 +83,6 @@
fgTransparentWeak: ':alpha<0.75<@fg', fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)', panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)', scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
deckDivider: '#142022', deckBg: '#142022',
}, },
} }

View File

@ -1,18 +1,18 @@
<template> <template>
<div class="dlrsnxqu"> <div :class="$style.root">
<div <div
v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="[{ black: x.black }, { v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" :class="[$style.item, { [$style.black]: x.black,
verySmall: x.size === 'verySmall', [$style.verySmall]: x.size === 'verySmall',
small: x.size === 'small', [$style.small]: x.size === 'small',
medium: x.size === 'medium', [$style.medium]: x.size === 'medium',
large: x.size === 'large', [$style.large]: x.size === 'large',
veryLarge: x.size === 'veryLarge', [$style.veryLarge]: x.size === 'veryLarge',
}]" }]"
> >
<span class="name">{{ x.name }}</span> <span :class="$style.name">{{ x.name }}</span>
<XRss v-if="x.type === 'rss'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url" :shuffle="x.props.shuffle"/> <XRss v-if="x.type === 'rss'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url" :shuffle="x.props.shuffle"/>
<XFederation v-else-if="x.type === 'federation'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/> <XFederation v-else-if="x.type === 'federation'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/>
<XUserList v-else-if="x.type === 'userList'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :userListId="x.props.userListId"/> <XUserList v-else-if="x.type === 'userList'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :userListId="x.props.userListId"/>
</div> </div>
</div> </div>
</template> </template>
@ -25,67 +25,67 @@ const XFederation = defineAsyncComponent(() => import('./statusbar-federation.vu
const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')); const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue'));
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.dlrsnxqu { .root {
font-size: 15px; font-size: 15px;
background: var(--panel); background: var(--panel);
}
> .item { .item {
--height: 24px; --height: 24px;
--nameMargin: 10px; --nameMargin: 10px;
font-size: 0.85em; font-size: 0.85em;
&.verySmall { &.verySmall {
--nameMargin: 7px; --nameMargin: 7px;
--height: 16px; --height: 16px;
font-size: 0.75em; font-size: 0.75em;
} }
&.small { &.small {
--nameMargin: 8px; --nameMargin: 8px;
--height: 20px; --height: 20px;
font-size: 0.8em; font-size: 0.8em;
} }
&.large { &.large {
--nameMargin: 12px; --nameMargin: 12px;
--height: 26px; --height: 26px;
font-size: 0.875em; font-size: 0.875em;
} }
&.veryLarge { &.veryLarge {
--nameMargin: 14px; --nameMargin: 14px;
--height: 30px; --height: 30px;
font-size: 0.9em; font-size: 0.9em;
} }
display: flex; display: flex;
vertical-align: bottom; vertical-align: bottom;
width: 100%; width: 100%;
line-height: var(--height); line-height: var(--height);
height: var(--height); height: var(--height);
overflow: clip; overflow: clip;
contain: strict; contain: strict;
> .name { &.black {
padding: 0 var(--nameMargin); background: #000;
font-weight: bold; color: #fff;
color: var(--accent);
&:empty {
display: none;
}
}
> .body {
min-width: 0;
flex: 1;
}
&.black {
background: #000;
color: #fff;
}
} }
} }
.name {
padding: 0 var(--nameMargin);
font-weight: bold;
color: var(--accent);
&:empty {
display: none;
}
}
.body {
min-width: 0;
flex: 1;
}
</style> </style>

View File

@ -4,7 +4,7 @@
<div :class="$style.main"> <div :class="$style.main">
<XStatusBars/> <XStatusBars/>
<div ref="columnsEl" :class="[$style.sections, deckStore.reactiveState.columnAlign.value, { [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu"> <div ref="columnsEl" :class="[$style.sections, { [$style.center]: deckStore.reactiveState.columnAlign.value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu">
<!-- sectionを利用しているのはdeck.vue側でcolumnに対してfirst-of-typeを効かせるため --> <!-- sectionを利用しているのはdeck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
<section <section
v-for="ids in layout" v-for="ids in layout"
@ -282,7 +282,7 @@ async function deleteProfile() {
--margin: var(--marginHalf); --margin: var(--marginHalf);
--deckDividerThickness: 5px; --columnGap: 6px;
display: flex; display: flex;
height: 100dvh; height: 100dvh;
@ -306,14 +306,15 @@ async function deleteProfile() {
display: flex; display: flex;
overflow-x: auto; overflow-x: auto;
overflow-y: clip; overflow-y: clip;
background: var(--deckBg);
&.center { &.center {
> .section:first-of-type { > .section:first-of-type {
margin-left: auto; margin-left: auto !important;
} }
> .section:last-of-type { > .section:last-of-type {
margin-right: auto; margin-right: auto !important;
} }
} }
@ -327,14 +328,16 @@ async function deleteProfile() {
flex-direction: column; flex-direction: column;
scroll-snap-align: start; scroll-snap-align: start;
flex-shrink: 0; flex-shrink: 0;
border-right: solid var(--deckDividerThickness) var(--deckDivider); margin-top: var(--columnGap);
margin-bottom: var(--columnGap);
margin-right: var(--columnGap);
&:first-of-type { &:first-of-type {
border-left: solid var(--deckDividerThickness) var(--deckDivider); margin-left: var(--columnGap);
} }
> .column:not(:last-of-type) { > .column:not(:last-of-type) {
border-bottom: solid var(--deckDividerThickness) var(--deckDivider); margin-bottom: var(--columnGap);
} }
} }

View File

@ -13,6 +13,12 @@
@dragend="onDragend" @dragend="onDragend"
@contextmenu.prevent.stop="onContextmenu" @contextmenu.prevent.stop="onContextmenu"
> >
<svg viewBox="0 0 256 128" :class="$style.tabShape">
<g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)">
<path d="M149.512,4.707L108.507,4.707C116.252,4.719 118.758,14.958 118.758,14.958C118.758,14.958 121.381,25.283 129.009,25.209L149.512,25.209L149.512,4.707Z" style="fill:var(--deckBg);"/>
</g>
</svg>
<div :class="$style.color"></div>
<button v-if="isStacked && !isMainColumn" :class="$style.toggleActive" class="_button" @click="toggleActive"> <button v-if="isStacked && !isMainColumn" :class="$style.toggleActive" class="_button" @click="toggleActive">
<template v-if="active"><i class="ti ti-chevron-up"></i></template> <template v-if="active"><i class="ti ti-chevron-up"></i></template>
<template v-else><i class="ti ti-chevron-down"></i></template> <template v-else><i class="ti ti-chevron-down"></i></template>
@ -235,6 +241,7 @@ function onDrop(ev) {
height: 100%; height: 100%;
overflow: clip; overflow: clip;
contain: strict; contain: strict;
border-radius: 10px;
&.draghover { &.draghover {
&:after { &:after {
@ -274,6 +281,7 @@ function onDrop(ev) {
&:not(.active) { &:not(.active) {
flex-basis: var(--deckColumnHeaderHeight); flex-basis: var(--deckColumnHeaderHeight);
min-height: var(--deckColumnHeaderHeight); min-height: var(--deckColumnHeaderHeight);
border-bottom-right-radius: 0;
} }
&.naked { &.naked {
@ -286,10 +294,22 @@ function onDrop(ev) {
box-shadow: none; box-shadow: none;
color: var(--fg); color: var(--fg);
} }
> .body {
&::-webkit-scrollbar-track {
background: inherit;
}
}
} }
&.paged { &.paged {
background: var(--bg) !important; background: var(--bg) !important;
> .body {
&::-webkit-scrollbar-track {
background: inherit;
}
}
} }
} }
@ -299,7 +319,7 @@ function onDrop(ev) {
z-index: 2; z-index: 2;
line-height: var(--deckColumnHeaderHeight); line-height: var(--deckColumnHeaderHeight);
height: var(--deckColumnHeaderHeight); height: var(--deckColumnHeaderHeight);
padding: 0 16px; padding: 0 16px 0 30px;
font-size: 0.9em; font-size: 0.9em;
color: var(--panelHeaderFg); color: var(--panelHeaderFg);
background: var(--panelHeaderBg); background: var(--panelHeaderBg);
@ -308,6 +328,24 @@ function onDrop(ev) {
user-select: none; user-select: none;
} }
.color {
position: absolute;
top: 12px;
left: 12px;
width: 3px;
height: calc(100% - 24px);
background: var(--accent);
border-radius: 999px;
}
.tabShape {
position: absolute;
top: 0;
right: -8px;
width: auto;
height: calc(100% - 6px);
}
.title { .title {
display: inline-block; display: inline-block;
align-items: center; align-items: center;
@ -351,5 +389,9 @@ function onDrop(ev) {
box-sizing: border-box; box-sizing: border-box;
container-type: size; container-type: size;
background-color: var(--bg); background-color: var(--bg);
&::-webkit-scrollbar-track {
background: var(--panel);
}
} }
</style> </style>