Merge branch 'develop' into mkjs-n
This commit is contained in:
commit
0ef7a3db0f
|
@ -1060,6 +1060,7 @@ export interface Locale {
|
|||
"rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn": string;
|
||||
"cancelReactionConfirm": string;
|
||||
"changeReactionConfirm": string;
|
||||
"goToMisskey": string;
|
||||
"_initialAccountSetting": {
|
||||
"accountCreated": string;
|
||||
"letsStartAccountSetup": string;
|
||||
|
|
|
@ -1057,6 +1057,7 @@ rolesThatCanBeUsedThisEmojiAsReactionEmptyDescription: "ロールの指定が一
|
|||
rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn: "ロールは公開ロールである必要があります。"
|
||||
cancelReactionConfirm: "リアクションを取り消しますか?"
|
||||
changeReactionConfirm: "リアクションを変更しますか?"
|
||||
goToMisskey: "Misskeyへ"
|
||||
|
||||
_initialAccountSetting:
|
||||
accountCreated: "アカウントの作成が完了しました!"
|
||||
|
|
|
@ -16,7 +16,10 @@
|
|||
class="_panel"
|
||||
@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>
|
||||
</MkStickyContainer>
|
||||
</template>
|
||||
|
@ -148,10 +151,14 @@ function close(): void {
|
|||
|
||||
// 閉じなければ100ms後タイムラインに
|
||||
window.setTimeout(() => {
|
||||
mainRouter.push('/');
|
||||
location.href = '/';
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function goToMisskey(): void {
|
||||
location.href = '/';
|
||||
}
|
||||
|
||||
const headerActions = $computed(() => []);
|
||||
|
||||
const headerTabs = $computed(() => []);
|
||||
|
@ -161,9 +168,3 @@ definePageMetadata({
|
|||
icon: 'ti ti-share',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.close {
|
||||
margin: 16px auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -77,7 +77,7 @@
|
|||
codeString: '#ffb675',
|
||||
codeNumber: '#cfff9e',
|
||||
codeBoolean: '#c59eff',
|
||||
deckDivider: '#000',
|
||||
deckBg: '#000',
|
||||
htmlThemeColor: '@bg',
|
||||
X2: ':darken<2<@panel',
|
||||
X3: 'rgba(255, 255, 255, 0.05)',
|
||||
|
|
|
@ -77,7 +77,7 @@
|
|||
codeString: '#b98710',
|
||||
codeNumber: '#0fbbbb',
|
||||
codeBoolean: '#62b70c',
|
||||
deckDivider: ':darken<3<@bg',
|
||||
deckBg: ':darken<3<@bg',
|
||||
htmlThemeColor: '@bg',
|
||||
X2: ':darken<2<@panel',
|
||||
X3: 'rgba(0, 0, 0, 0.05)',
|
||||
|
|
|
@ -83,6 +83,6 @@
|
|||
fgTransparentWeak: ':alpha<0.75<@fg',
|
||||
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
|
||||
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
|
||||
deckDivider: '#142022',
|
||||
deckBg: '#142022',
|
||||
},
|
||||
}
|
||||
|
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<div class="dlrsnxqu">
|
||||
<div :class="$style.root">
|
||||
<div
|
||||
v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="[{ black: x.black }, {
|
||||
verySmall: x.size === 'verySmall',
|
||||
small: x.size === 'small',
|
||||
medium: x.size === 'medium',
|
||||
large: x.size === 'large',
|
||||
veryLarge: x.size === 'veryLarge',
|
||||
v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" :class="[$style.item, { [$style.black]: x.black,
|
||||
[$style.verySmall]: x.size === 'verySmall',
|
||||
[$style.small]: x.size === 'small',
|
||||
[$style.medium]: x.size === 'medium',
|
||||
[$style.large]: x.size === 'large',
|
||||
[$style.veryLarge]: x.size === 'veryLarge',
|
||||
}]"
|
||||
>
|
||||
<span class="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"/>
|
||||
<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"/>
|
||||
<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"/>
|
||||
<span :class="$style.name">{{ x.name }}</span>
|
||||
<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="$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="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :userListId="x.props.userListId"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -25,67 +25,67 @@ const XFederation = defineAsyncComponent(() => import('./statusbar-federation.vu
|
|||
const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue'));
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dlrsnxqu {
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
font-size: 15px;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
> .item {
|
||||
--height: 24px;
|
||||
--nameMargin: 10px;
|
||||
font-size: 0.85em;
|
||||
.item {
|
||||
--height: 24px;
|
||||
--nameMargin: 10px;
|
||||
font-size: 0.85em;
|
||||
|
||||
&.verySmall {
|
||||
--nameMargin: 7px;
|
||||
--height: 16px;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
&.verySmall {
|
||||
--nameMargin: 7px;
|
||||
--height: 16px;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
&.small {
|
||||
--nameMargin: 8px;
|
||||
--height: 20px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
&.small {
|
||||
--nameMargin: 8px;
|
||||
--height: 20px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
&.large {
|
||||
--nameMargin: 12px;
|
||||
--height: 26px;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
&.large {
|
||||
--nameMargin: 12px;
|
||||
--height: 26px;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
&.veryLarge {
|
||||
--nameMargin: 14px;
|
||||
--height: 30px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
&.veryLarge {
|
||||
--nameMargin: 14px;
|
||||
--height: 30px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
vertical-align: bottom;
|
||||
width: 100%;
|
||||
line-height: var(--height);
|
||||
height: var(--height);
|
||||
overflow: clip;
|
||||
contain: strict;
|
||||
display: flex;
|
||||
vertical-align: bottom;
|
||||
width: 100%;
|
||||
line-height: var(--height);
|
||||
height: var(--height);
|
||||
overflow: clip;
|
||||
contain: strict;
|
||||
|
||||
> .name {
|
||||
padding: 0 var(--nameMargin);
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .body {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.black {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
&.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>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<div :class="$style.main">
|
||||
<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
|
||||
v-for="ids in layout"
|
||||
|
@ -282,7 +282,7 @@ async function deleteProfile() {
|
|||
|
||||
--margin: var(--marginHalf);
|
||||
|
||||
--deckDividerThickness: 5px;
|
||||
--columnGap: 6px;
|
||||
|
||||
display: flex;
|
||||
height: 100dvh;
|
||||
|
@ -306,14 +306,15 @@ async function deleteProfile() {
|
|||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: clip;
|
||||
background: var(--deckBg);
|
||||
|
||||
&.center {
|
||||
> .section:first-of-type {
|
||||
margin-left: auto;
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
> .section:last-of-type {
|
||||
margin-right: auto;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -327,14 +328,16 @@ async function deleteProfile() {
|
|||
flex-direction: column;
|
||||
scroll-snap-align: start;
|
||||
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 {
|
||||
border-left: solid var(--deckDividerThickness) var(--deckDivider);
|
||||
margin-left: var(--columnGap);
|
||||
}
|
||||
|
||||
> .column:not(:last-of-type) {
|
||||
border-bottom: solid var(--deckDividerThickness) var(--deckDivider);
|
||||
margin-bottom: var(--columnGap);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -13,6 +13,12 @@
|
|||
@dragend="onDragend"
|
||||
@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">
|
||||
<template v-if="active"><i class="ti ti-chevron-up"></i></template>
|
||||
<template v-else><i class="ti ti-chevron-down"></i></template>
|
||||
|
@ -235,6 +241,7 @@ function onDrop(ev) {
|
|||
height: 100%;
|
||||
overflow: clip;
|
||||
contain: strict;
|
||||
border-radius: 10px;
|
||||
|
||||
&.draghover {
|
||||
&:after {
|
||||
|
@ -274,6 +281,7 @@ function onDrop(ev) {
|
|||
&:not(.active) {
|
||||
flex-basis: var(--deckColumnHeaderHeight);
|
||||
min-height: var(--deckColumnHeaderHeight);
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&.naked {
|
||||
|
@ -286,10 +294,22 @@ function onDrop(ev) {
|
|||
box-shadow: none;
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
> .body {
|
||||
&::-webkit-scrollbar-track {
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.paged {
|
||||
background: var(--bg) !important;
|
||||
|
||||
> .body {
|
||||
&::-webkit-scrollbar-track {
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -299,7 +319,7 @@ function onDrop(ev) {
|
|||
z-index: 2;
|
||||
line-height: var(--deckColumnHeaderHeight);
|
||||
height: var(--deckColumnHeaderHeight);
|
||||
padding: 0 16px;
|
||||
padding: 0 16px 0 30px;
|
||||
font-size: 0.9em;
|
||||
color: var(--panelHeaderFg);
|
||||
background: var(--panelHeaderBg);
|
||||
|
@ -308,6 +328,24 @@ function onDrop(ev) {
|
|||
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 {
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
|
@ -351,5 +389,9 @@ function onDrop(ev) {
|
|||
box-sizing: border-box;
|
||||
container-type: size;
|
||||
background-color: var(--bg);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--panel);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue