Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into mkjs-n

Browse source
This commit is contained in:
tamaina 2023-05-26 07:01:29 +00:00
parent c264b01658 eee1e74174
commit 0ef7a3db0f
9 changed files with 130 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
locales/index.d.ts vendored
View file

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

1
locales/ja-JP.yml
View file

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

17
packages/frontend/src/pages/share.vue
View file

@ -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>

2
packages/frontend/src/themes/_dark.json5
View file

@ -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)',

2
packages/frontend/src/themes/_light.json5
View file

@ -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)',

2
packages/frontend/src/themes/d-u0.json5
View file

@ -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',
},
}

126
packages/frontend/src/ui/_common_/statusbars.vue
View file

@ -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>

17
packages/frontend/src/ui/deck.vue
View file

@ -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);
}
}

44
packages/frontend/src/ui/deck/column.vue
View file

@ -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>