Merge branch 'develop' into mkjs-n
This commit is contained in:
commit
0ef7a3db0f
|
@ -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;
|
||||||
|
|
|
@ -1057,6 +1057,7 @@ rolesThatCanBeUsedThisEmojiAsReactionEmptyDescription: "ロールの指定が一
|
||||||
rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn: "ロールは公開ロールである必要があります。"
|
rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn: "ロールは公開ロールである必要があります。"
|
||||||
cancelReactionConfirm: "リアクションを取り消しますか?"
|
cancelReactionConfirm: "リアクションを取り消しますか?"
|
||||||
changeReactionConfirm: "リアクションを変更しますか?"
|
changeReactionConfirm: "リアクションを変更しますか?"
|
||||||
|
goToMisskey: "Misskeyへ"
|
||||||
|
|
||||||
_initialAccountSetting:
|
_initialAccountSetting:
|
||||||
accountCreated: "アカウントの作成が完了しました!"
|
accountCreated: "アカウントの作成が完了しました!"
|
||||||
|
|
|
@ -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>
|
|
||||||
|
|
|
@ -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)',
|
||||||
|
|
|
@ -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)',
|
||||||
|
|
|
@ -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',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue