Merge branch 'develop' into feat-mijs-expose-error-types
This commit is contained in:
kakkokari-gtyih
parent
3156b2d2b5
commit
28af53e221
1031 changed files with 41072 additions and 16771 deletions
|
|
@ -13,9 +13,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
>
|
||||
<span :class="$style.icon">
|
||||
<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
|
||||
<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--warn);"></i>
|
||||
<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--error);"></i>
|
||||
<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--success);"></i>
|
||||
<i v-else-if="announcement.icon === 'warning'" class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i>
|
||||
<i v-else-if="announcement.icon === 'error'" class="ti ti-circle-x" style="color: var(--MI_THEME-error);"></i>
|
||||
<i v-else-if="announcement.icon === 'success'" class="ti ti-check" style="color: var(--MI_THEME-success);"></i>
|
||||
</span>
|
||||
<span :class="$style.title">{{ announcement.title }}</span>
|
||||
<span :class="$style.body">{{ announcement.text }}</span>
|
||||
|
|
@ -30,7 +30,7 @@ import { $i } from '@/account.js';
|
|||
<style lang="scss" module>
|
||||
.root {
|
||||
font-size: 15px;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
@ -44,8 +44,8 @@ import { $i } from '@/account.js';
|
|||
height: var(--height);
|
||||
overflow: clip;
|
||||
contain: strict;
|
||||
background: var(--accent);
|
||||
color: var(--fgOnAccent);
|
||||
background: var(--MI_THEME-accent);
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
|
||||
@container (max-width: 1000px) {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { defineAsyncComponent } from 'vue';
|
|||
import type { MenuItem } from '@/types/menu.js';
|
||||
import * as os from '@/os.js';
|
||||
import { instance } from '@/instance.js';
|
||||
import { host } from '@/config.js';
|
||||
import { host } from '@@/js/config.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { $i } from '@/account.js';
|
||||
|
||||
|
|
@ -41,7 +41,9 @@ function toolsMenuItems(): MenuItem[] {
|
|||
}
|
||||
|
||||
export function openInstanceMenu(ev: MouseEvent) {
|
||||
os.popupMenu([{
|
||||
const menuItems: MenuItem[] = [];
|
||||
|
||||
menuItems.push({
|
||||
text: instance.name ?? host,
|
||||
type: 'label',
|
||||
}, {
|
||||
|
|
@ -69,12 +71,18 @@ export function openInstanceMenu(ev: MouseEvent) {
|
|||
text: i18n.ts.ads,
|
||||
icon: 'ti ti-ad',
|
||||
to: '/ads',
|
||||
}, ($i && ($i.isAdmin || $i.policies.canInvite) && instance.disableRegistration) ? {
|
||||
type: 'link',
|
||||
to: '/invite',
|
||||
text: i18n.ts.invite,
|
||||
icon: 'ti ti-user-plus',
|
||||
} : undefined, {
|
||||
});
|
||||
|
||||
if ($i && ($i.isAdmin || $i.policies.canInvite) && instance.disableRegistration) {
|
||||
menuItems.push({
|
||||
type: 'link',
|
||||
to: '/invite',
|
||||
text: i18n.ts.invite,
|
||||
icon: 'ti ti-user-plus',
|
||||
});
|
||||
}
|
||||
|
||||
menuItems.push({
|
||||
type: 'parent',
|
||||
text: i18n.ts.tools,
|
||||
icon: 'ti ti-tool',
|
||||
|
|
@ -84,41 +92,69 @@ export function openInstanceMenu(ev: MouseEvent) {
|
|||
text: i18n.ts.inquiry,
|
||||
icon: 'ti ti-help-circle',
|
||||
to: '/contact',
|
||||
}, (instance.impressumUrl) ? {
|
||||
text: i18n.ts.impressum,
|
||||
icon: 'ti ti-file-invoice',
|
||||
action: () => {
|
||||
window.open(instance.impressumUrl, '_blank', 'noopener');
|
||||
},
|
||||
} : undefined, (instance.tosUrl) ? {
|
||||
text: i18n.ts.termsOfService,
|
||||
icon: 'ti ti-notebook',
|
||||
action: () => {
|
||||
window.open(instance.tosUrl, '_blank', 'noopener');
|
||||
},
|
||||
} : undefined, (instance.privacyPolicyUrl) ? {
|
||||
text: i18n.ts.privacyPolicy,
|
||||
icon: 'ti ti-shield-lock',
|
||||
action: () => {
|
||||
window.open(instance.privacyPolicyUrl, '_blank', 'noopener');
|
||||
},
|
||||
} : undefined, (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl) ? undefined : { type: 'divider' }, {
|
||||
});
|
||||
|
||||
if (instance.impressumUrl) {
|
||||
menuItems.push({
|
||||
type: 'a',
|
||||
text: i18n.ts.impressum,
|
||||
icon: 'ti ti-file-invoice',
|
||||
href: instance.impressumUrl,
|
||||
target: '_blank',
|
||||
});
|
||||
}
|
||||
|
||||
if (instance.tosUrl) {
|
||||
menuItems.push({
|
||||
type: 'a',
|
||||
text: i18n.ts.termsOfService,
|
||||
icon: 'ti ti-notebook',
|
||||
href: instance.tosUrl,
|
||||
target: '_blank',
|
||||
});
|
||||
}
|
||||
|
||||
if (instance.privacyPolicyUrl) {
|
||||
menuItems.push({
|
||||
type: 'a',
|
||||
text: i18n.ts.privacyPolicy,
|
||||
icon: 'ti ti-shield-lock',
|
||||
href: instance.privacyPolicyUrl,
|
||||
target: '_blank',
|
||||
});
|
||||
}
|
||||
|
||||
if (!instance.impressumUrl && !instance.tosUrl && !instance.privacyPolicyUrl) {
|
||||
menuItems.push({ type: 'divider' });
|
||||
}
|
||||
|
||||
menuItems.push({
|
||||
type: 'a',
|
||||
text: i18n.ts.document,
|
||||
icon: 'ti ti-bulb',
|
||||
action: () => {
|
||||
window.open('https://misskey-hub.net/docs/for-users/', '_blank', 'noopener');
|
||||
},
|
||||
}, ($i) ? {
|
||||
text: i18n.ts._initialTutorial.launchTutorial,
|
||||
icon: 'ti ti-presentation',
|
||||
action: () => {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {}, {}, 'closed');
|
||||
},
|
||||
} : undefined, {
|
||||
href: 'https://misskey-hub.net/docs/for-users/',
|
||||
target: '_blank',
|
||||
});
|
||||
|
||||
if ($i) {
|
||||
menuItems.push({
|
||||
text: i18n.ts._initialTutorial.launchTutorial,
|
||||
icon: 'ti ti-presentation',
|
||||
action: () => {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTutorialDialog.vue')), {}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
menuItems.push({
|
||||
type: 'link',
|
||||
text: i18n.ts.aboutMisskey,
|
||||
to: '/about-misskey',
|
||||
}], ev.currentTarget ?? ev.target, {
|
||||
});
|
||||
|
||||
os.popupMenu(menuItems, ev.currentTarget ?? ev.target, {
|
||||
align: 'left',
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,9 +39,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<div v-if="pendingApiRequestsCount > 0" id="wait"></div>
|
||||
|
||||
<div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
|
||||
<div v-if="dev" id="devTicker"><span style="animation: dev-ticker-blink 2s infinite;">DEV BUILD</span></div>
|
||||
|
||||
<div v-if="$i && $i.isBot" id="botWarn"><span>{{ i18n.ts.loggedInAsBot }}</span></div>
|
||||
<div v-if="$i && $i.isBot" id="botWarn"><span style="animation: dev-ticker-blink 2s infinite;">{{ i18n.ts.loggedInAsBot }}</span></div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -116,27 +116,27 @@ if ($i) {
|
|||
.notifications {
|
||||
position: fixed;
|
||||
z-index: 3900000;
|
||||
padding: 0 var(--margin);
|
||||
padding: 0 var(--MI-margin);
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
|
||||
&.notificationsPosition_leftTop {
|
||||
top: var(--margin);
|
||||
top: var(--MI-margin);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.notificationsPosition_rightTop {
|
||||
top: var(--margin);
|
||||
top: var(--MI-margin);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.notificationsPosition_leftBottom {
|
||||
bottom: calc(var(--minBottomSpacing) + var(--margin));
|
||||
bottom: calc(var(--MI-minBottomSpacing) + var(--MI-margin));
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.notificationsPosition_rightBottom {
|
||||
bottom: calc(var(--minBottomSpacing) + var(--margin));
|
||||
bottom: calc(var(--MI-minBottomSpacing) + var(--MI-margin));
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
|
@ -227,15 +227,15 @@ if ($i) {
|
|||
right: 15px;
|
||||
pointer-events: none;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
border: solid 2px transparent;
|
||||
border-top-color: var(--accent);
|
||||
border-left-color: var(--accent);
|
||||
border-top-color: var(--MI_THEME-accent);
|
||||
border-left-color: var(--MI_THEME-accent);
|
||||
border-radius: 50%;
|
||||
animation: progress-spinner 400ms linear infinite;
|
||||
}
|
||||
|
|
@ -258,10 +258,6 @@ if ($i) {
|
|||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
> span {
|
||||
animation: dev-ticker-blink 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
#devTicker {
|
||||
|
|
@ -275,9 +271,5 @@ if ($i) {
|
|||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
> span {
|
||||
animation: dev-ticker-blink 2s infinite;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -74,13 +74,16 @@ function openAccountMenu(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
function more() {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
|
||||
}, 'closed');
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
--nav-bg-transparent: color(from var(--MI_THEME-navBg) srgb r g b / 0.5);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -90,9 +93,9 @@ function more() {
|
|||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 20px 0;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
|
||||
backdrop-filter: var(--MI-blur, blur(8px));
|
||||
}
|
||||
|
||||
.banner {
|
||||
|
|
@ -124,9 +127,9 @@ function more() {
|
|||
position: sticky;
|
||||
bottom: 0;
|
||||
padding: 20px 0;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
|
||||
backdrop-filter: var(--MI-blur, blur(8px));
|
||||
}
|
||||
|
||||
.post {
|
||||
|
|
@ -134,11 +137,11 @@ function more() {
|
|||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: var(--fgOnAccent);
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 38px);
|
||||
|
|
@ -150,12 +153,12 @@ function more() {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
background: var(--accentLighten);
|
||||
&::before {
|
||||
background: var(--MI_THEME-accentLighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -199,7 +202,7 @@ function more() {
|
|||
|
||||
.divider {
|
||||
margin: 16px 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
@ -213,19 +216,19 @@ function more() {
|
|||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
color: var(--MI_THEME-navFg);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
color: var(--MI_THEME-navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
color: var(--MI_THEME-navActive);
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 24px);
|
||||
|
|
@ -237,7 +240,7 @@ function more() {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--accentedBg);
|
||||
background: var(--MI_THEME-accentedBg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -252,7 +255,7 @@ function more() {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
color: var(--navIndicator);
|
||||
color: var(--MI_THEME-navIndicator);
|
||||
font-size: 8px;
|
||||
animation: global-blink 1s infinite;
|
||||
|
||||
|
|
|
|||
|
|
@ -99,10 +99,11 @@ function openAccountMenu(ev: MouseEvent) {
|
|||
}
|
||||
|
||||
function more(ev: MouseEvent) {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
||||
src: ev.currentTarget ?? ev.target,
|
||||
}, {
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -110,6 +111,7 @@ function more(ev: MouseEvent) {
|
|||
.root {
|
||||
--nav-width: 250px;
|
||||
--nav-icon-only-width: 80px;
|
||||
--nav-bg-transparent: color(from var(--MI_THEME-navBg) srgb r g b / 0.5);
|
||||
|
||||
flex: 0 0 var(--nav-width);
|
||||
width: var(--nav-width);
|
||||
|
|
@ -127,7 +129,7 @@ function more(ev: MouseEvent) {
|
|||
overflow: auto;
|
||||
overflow-x: clip;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--navBg);
|
||||
background: var(--MI_THEME-navBg);
|
||||
contain: strict;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -143,9 +145,9 @@ function more(ev: MouseEvent) {
|
|||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 20px 0;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
|
||||
backdrop-filter: var(--MI-blur, blur(8px));
|
||||
}
|
||||
|
||||
.banner {
|
||||
|
|
@ -165,6 +167,15 @@ function more(ev: MouseEvent) {
|
|||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
> .instanceIcon {
|
||||
outline: 2px solid var(--MI_THEME-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.instanceIcon {
|
||||
|
|
@ -177,9 +188,9 @@ function more(ev: MouseEvent) {
|
|||
position: sticky;
|
||||
bottom: 0;
|
||||
padding-top: 20px;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
|
||||
backdrop-filter: var(--MI-blur, blur(8px));
|
||||
}
|
||||
|
||||
.post {
|
||||
|
|
@ -187,11 +198,11 @@ function more(ev: MouseEvent) {
|
|||
display: block;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
color: var(--fgOnAccent);
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 38px);
|
||||
|
|
@ -203,12 +214,21 @@ function more(ev: MouseEvent) {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
&::before {
|
||||
outline: 2px solid var(--MI_THEME-fgOnAccent);
|
||||
outline-offset: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
background: var(--accentLighten);
|
||||
&::before {
|
||||
background: var(--MI_THEME-accentLighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -233,6 +253,14 @@ function more(ev: MouseEvent) {
|
|||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
overflow: clip;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
> .avatar {
|
||||
box-shadow: 0 0 0 4px var(--MI_THEME-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
|
|
@ -256,7 +284,7 @@ function more(ev: MouseEvent) {
|
|||
|
||||
.divider {
|
||||
margin: 16px 16px;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
@ -270,21 +298,30 @@ function more(ev: MouseEvent) {
|
|||
width: 100%;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
color: var(--navFg);
|
||||
color: var(--MI_THEME-navFg);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
color: var(--MI_THEME-navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
color: var(--MI_THEME-navActive);
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
color: var(--accent);
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
outline: 2px solid var(--MI_THEME-focus);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.active, &:focus {
|
||||
color: var(--MI_THEME-accent);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: calc(100% - 34px);
|
||||
|
|
@ -296,7 +333,7 @@ function more(ev: MouseEvent) {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--accentedBg);
|
||||
background: var(--MI_THEME-accentedBg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -311,7 +348,7 @@ function more(ev: MouseEvent) {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
color: var(--navIndicator);
|
||||
color: var(--MI_THEME-navIndicator);
|
||||
font-size: 8px;
|
||||
animation: global-blink 1s infinite;
|
||||
|
||||
|
|
@ -342,15 +379,24 @@ function more(ev: MouseEvent) {
|
|||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 20px 0;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
|
||||
backdrop-filter: var(--MI-blur, blur(8px));
|
||||
}
|
||||
|
||||
.instance {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
> .instanceIcon {
|
||||
outline: 2px solid var(--MI_THEME-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.instanceIcon {
|
||||
|
|
@ -363,9 +409,9 @@ function more(ev: MouseEvent) {
|
|||
position: sticky;
|
||||
bottom: 0;
|
||||
padding-top: 20px;
|
||||
background: var(--X14);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
|
||||
backdrop-filter: var(--MI-blur, blur(8px));
|
||||
}
|
||||
|
||||
.post {
|
||||
|
|
@ -375,7 +421,7 @@ function more(ev: MouseEvent) {
|
|||
height: 52px;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -387,19 +433,28 @@ function more(ev: MouseEvent) {
|
|||
width: 52px;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 100%;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
&::before {
|
||||
outline: 2px solid var(--MI_THEME-fgOnAccent);
|
||||
outline-offset: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
&:before {
|
||||
background: var(--accentLighten);
|
||||
&::before {
|
||||
background: var(--MI_THEME-accentLighten);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.postIcon {
|
||||
position: relative;
|
||||
color: var(--fgOnAccent);
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
}
|
||||
|
||||
.postText {
|
||||
|
|
@ -412,6 +467,14 @@ function more(ev: MouseEvent) {
|
|||
padding: 20px 0;
|
||||
width: 100%;
|
||||
overflow: clip;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
> .avatar {
|
||||
box-shadow: 0 0 0 4px var(--MI_THEME-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
|
|
@ -431,7 +494,7 @@ function more(ev: MouseEvent) {
|
|||
.divider {
|
||||
margin: 8px auto;
|
||||
width: calc(100% - 32px);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
@ -441,11 +504,20 @@ function more(ev: MouseEvent) {
|
|||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
&:hover, &.active {
|
||||
text-decoration: none;
|
||||
color: var(--accent);
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
|
||||
&:before {
|
||||
&::before {
|
||||
outline: 2px solid var(--MI_THEME-focus);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.active, &:focus {
|
||||
text-decoration: none;
|
||||
color: var(--MI_THEME-accent);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100%;
|
||||
|
|
@ -457,7 +529,7 @@ function more(ev: MouseEvent) {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--accentedBg);
|
||||
background: var(--MI_THEME-accentedBg);
|
||||
}
|
||||
|
||||
> .icon,
|
||||
|
|
@ -481,7 +553,7 @@ function more(ev: MouseEvent) {
|
|||
position: absolute;
|
||||
top: 6px;
|
||||
left: 24px;
|
||||
color: var(--navIndicator);
|
||||
color: var(--MI_THEME-navIndicator);
|
||||
font-size: 8px;
|
||||
animation: global-blink 1s infinite;
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ import { ref } from 'vue';
|
|||
import * as Misskey from 'misskey-js';
|
||||
import MarqueeText from '@/components/MkMarquee.vue';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { useInterval } from '@/scripts/use-interval.js';
|
||||
import { useInterval } from '@@/js/use-interval.js';
|
||||
import { getProxiedImageUrlNullable } from '@/scripts/media-proxy.js';
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import { ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import MarqueeText from '@/components/MkMarquee.vue';
|
||||
import { useInterval } from '@/scripts/use-interval.js';
|
||||
import { useInterval } from '@@/js/use-interval.js';
|
||||
import { shuffle } from '@/scripts/shuffle.js';
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ import { ref, watch } from 'vue';
|
|||
import * as Misskey from 'misskey-js';
|
||||
import MarqueeText from '@/components/MkMarquee.vue';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { useInterval } from '@/scripts/use-interval.js';
|
||||
import { useInterval } from '@@/js/use-interval.js';
|
||||
import { getNoteSummary } from '@/scripts/get-note-summary.js';
|
||||
import { notePage } from '@/filters/note.js';
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
|
|||
<style lang="scss" module>
|
||||
.root {
|
||||
font-size: 15px;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
||||
.item {
|
||||
|
|
@ -40,6 +40,14 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
|
|||
--nameMargin: 10px;
|
||||
font-size: 0.85em;
|
||||
|
||||
display: flex;
|
||||
vertical-align: bottom;
|
||||
width: 100%;
|
||||
line-height: var(--height);
|
||||
height: var(--height);
|
||||
overflow: clip;
|
||||
contain: strict;
|
||||
|
||||
&.verySmall {
|
||||
--nameMargin: 7px;
|
||||
--height: 16px;
|
||||
|
|
@ -64,14 +72,6 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
|
|||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
vertical-align: bottom;
|
||||
width: 100%;
|
||||
line-height: var(--height);
|
||||
height: var(--height);
|
||||
overflow: clip;
|
||||
contain: strict;
|
||||
|
||||
&.black {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
|
|
@ -81,7 +81,7 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
|
|||
.name {
|
||||
padding: 0 var(--nameMargin);
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
color: var(--MI_THEME-accent);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@ onUnmounted(() => {
|
|||
.root {
|
||||
position: fixed;
|
||||
z-index: v-bind(zIndex);
|
||||
bottom: calc(var(--minBottomSpacing) + var(--margin));
|
||||
right: var(--margin);
|
||||
bottom: calc(var(--MI-minBottomSpacing) + var(--MI-margin));
|
||||
right: var(--MI-margin);
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
font-size: 0.9em;
|
||||
|
|
|
|||
|
|
@ -125,10 +125,10 @@ const zIndex = os.claimZIndex('high');
|
|||
height: 8px;
|
||||
}
|
||||
.mk-uploader > ol > li > progress::-webkit-progress-value {
|
||||
background: var(--accent);
|
||||
background: var(--MI_THEME-accent);
|
||||
}
|
||||
.mk-uploader > ol > li > progress::-webkit-progress-bar {
|
||||
//background: var(--accentAlpha01);
|
||||
//background: var(--MI_THEME-accentAlpha01);
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -71,11 +71,12 @@ const otherNavItemIndicated = computed<boolean>(() => {
|
|||
});
|
||||
|
||||
function more(ev: MouseEvent) {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
||||
src: ev.currentTarget ?? ev.target,
|
||||
anchor: { x: 'center', y: 'bottom' },
|
||||
}, {
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
function openAccountMenu(ev: MouseEvent) {
|
||||
|
|
@ -103,7 +104,7 @@ onMounted(() => {
|
|||
z-index: 1000;
|
||||
width: 100%;
|
||||
height: $height;
|
||||
background-color: var(--bg);
|
||||
background-color: var(--MI_THEME-bg);
|
||||
|
||||
> .body {
|
||||
max-width: 1380px;
|
||||
|
|
@ -139,18 +140,18 @@ onMounted(() => {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: var(--navIndicator);
|
||||
color: var(--MI_THEME-navIndicator);
|
||||
font-size: 8px;
|
||||
animation: global-blink 1s infinite;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
color: var(--MI_THEME-navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
color: var(--MI_THEME-navActive);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -158,7 +159,7 @@ onMounted(() => {
|
|||
display: inline-block;
|
||||
height: 16px;
|
||||
margin: 0 10px;
|
||||
border-right: solid 0.5px var(--divider);
|
||||
border-right: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
> .instance {
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, computed, watch, ref, shallowRef } from 'vue';
|
||||
import { openInstanceMenu } from './_common_/common.js';
|
||||
// import { host } from '@/config.js';
|
||||
// import { host } from '@@/js/config.js';
|
||||
import * as os from '@/os.js';
|
||||
import { navbarItemDef } from '@/navbar.js';
|
||||
import { openAccountMenu as openAccountMenu_, $i } from '@/account.js';
|
||||
|
|
@ -86,9 +86,11 @@ function calcViewState() {
|
|||
}
|
||||
|
||||
function more(ev: MouseEvent) {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
|
||||
src: ev.currentTarget ?? ev.target,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
function openAccountMenu(ev: MouseEvent) {
|
||||
|
|
@ -155,7 +157,7 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
|
|||
|
||||
> .divider {
|
||||
margin: 10px 0;
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
> .post {
|
||||
|
|
@ -163,7 +165,7 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
|
|||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 16px 0;
|
||||
background: var(--bg);
|
||||
background: var(--MI_THEME-bg);
|
||||
|
||||
> .button {
|
||||
min-width: 0;
|
||||
|
|
@ -218,7 +220,7 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: var(--navIndicator);
|
||||
color: var(--MI_THEME-navIndicator);
|
||||
font-size: 8px;
|
||||
animation: global-blink 1s infinite;
|
||||
|
||||
|
|
@ -231,11 +233,11 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
|
|||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--navHoverFg);
|
||||
color: var(--MI_THEME-navHoverFg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--navActive);
|
||||
color: var(--MI_THEME-navActive);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<XSidebar/>
|
||||
</div>
|
||||
<div v-else-if="!pageMetadata?.needWideArea" ref="widgetsLeft" class="widgets left">
|
||||
<XWidgets place="left" :marginTop="'var(--margin)'" @mounted="attachSticky(widgetsLeft)"/>
|
||||
<XWidgets place="left" :marginTop="'var(--MI-margin)'" @mounted="attachSticky(widgetsLeft)"/>
|
||||
</div>
|
||||
|
||||
<main class="main" @contextmenu.stop="onContextmenu">
|
||||
|
|
@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</main>
|
||||
|
||||
<div v-if="isDesktop && !pageMetadata?.needWideArea" ref="widgetsRight" class="widgets right">
|
||||
<XWidgets :place="showMenuOnTop ? 'right' : null" :marginTop="showMenuOnTop ? '0' : 'var(--margin)'" @mounted="attachSticky(widgetsRight)"/>
|
||||
<XWidgets :place="showMenuOnTop ? 'right' : null" :marginTop="showMenuOnTop ? '0' : 'var(--MI-margin)'" @mounted="attachSticky(widgetsRight)"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import { defineAsyncComponent, onMounted, provide, ref, computed, shallowRef } from 'vue';
|
||||
import XSidebar from './classic.sidebar.vue';
|
||||
import XCommon from './_common_/common.vue';
|
||||
import { instanceName } from '@/config.js';
|
||||
import { instanceName } from '@@/js/config.js';
|
||||
import { StickySidebar } from '@/scripts/sticky-sidebar.js';
|
||||
import * as os from '@/os.js';
|
||||
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
|
||||
|
|
@ -57,6 +57,8 @@ import { defaultStore } from '@/store.js';
|
|||
import { i18n } from '@/i18n.js';
|
||||
import { miLocalStorage } from '@/local-storage.js';
|
||||
import { mainRouter } from '@/router/main.js';
|
||||
import { isLink } from '@@/js/is-link.js';
|
||||
|
||||
const XHeaderMenu = defineAsyncComponent(() => import('./classic.header.vue'));
|
||||
const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
|
||||
|
||||
|
|
@ -104,12 +106,6 @@ function top() {
|
|||
}
|
||||
|
||||
function onContextmenu(ev: MouseEvent) {
|
||||
const isLink = (el: HTMLElement) => {
|
||||
if (el.tagName === 'A') return true;
|
||||
if (el.parentElement) {
|
||||
return isLink(el.parentElement);
|
||||
}
|
||||
};
|
||||
if (isLink(ev.target)) return;
|
||||
if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
|
||||
if (window.getSelection().toString() !== '') return;
|
||||
|
|
@ -220,8 +216,8 @@ onMounted(() => {
|
|||
box-sizing: border-box;
|
||||
|
||||
&.wallpaper {
|
||||
background: var(--wallpaperOverlay);
|
||||
//backdrop-filter: var(--blur, blur(4px));
|
||||
background: var(--MI_THEME-wallpaperOverlay);
|
||||
//backdrop-filter: var(--MI-blur, blur(4px));
|
||||
}
|
||||
|
||||
> .columns {
|
||||
|
|
@ -253,17 +249,17 @@ onMounted(() => {
|
|||
min-width: 0;
|
||||
width: 750px;
|
||||
margin: 0 16px 0 0;
|
||||
border-left: solid 1px var(--divider);
|
||||
border-right: solid 1px var(--divider);
|
||||
border-left: solid 1px var(--MI_THEME-divider);
|
||||
border-right: solid 1px var(--MI_THEME-divider);
|
||||
border-radius: 0;
|
||||
overflow: clip;
|
||||
--margin: 12px;
|
||||
--MI-margin: 12px;
|
||||
}
|
||||
|
||||
> .widgets {
|
||||
//--panelBorder: none;
|
||||
//--MI_THEME-panelBorder: none;
|
||||
width: 300px;
|
||||
padding-bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px));
|
||||
padding-bottom: calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
|
||||
|
||||
@media (max-width: $widgets-hide-threshold) {
|
||||
display: none;
|
||||
|
|
@ -281,13 +277,13 @@ onMounted(() => {
|
|||
&.withGlobalHeader {
|
||||
> .main {
|
||||
margin-top: 0;
|
||||
border: solid 1px var(--divider);
|
||||
border-radius: var(--radius);
|
||||
--stickyTop: var(--globalHeaderHeight);
|
||||
border: solid 1px var(--MI_THEME-divider);
|
||||
border-radius: var(--MI-radius);
|
||||
--MI-stickyTop: var(--globalHeaderHeight);
|
||||
}
|
||||
|
||||
> .widgets {
|
||||
--stickyTop: var(--globalHeaderHeight);
|
||||
--MI-stickyTop: var(--globalHeaderHeight);
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -296,7 +292,7 @@ onMounted(() => {
|
|||
margin: 0;
|
||||
|
||||
> .sidebar {
|
||||
border-right: solid 0.5px var(--divider);
|
||||
border-right: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
> .main {
|
||||
|
|
@ -318,10 +314,10 @@ onMounted(() => {
|
|||
right: 0;
|
||||
z-index: 1001;
|
||||
height: 100dvh;
|
||||
padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
|
||||
padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
background: var(--bg);
|
||||
background: var(--MI_THEME-bg);
|
||||
}
|
||||
|
||||
> .ivnzpscs {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:ref="id"
|
||||
:key="id"
|
||||
:class="$style.column"
|
||||
:column="columns.find(c => c.id === id)"
|
||||
:column="columns.find(c => c.id === id)!"
|
||||
:isStacked="ids.length > 1"
|
||||
@headerWheel="onWheel"
|
||||
/>
|
||||
|
|
@ -95,7 +95,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import { computed, defineAsyncComponent, ref, watch, shallowRef } from 'vue';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import XCommon from './_common_/common.vue';
|
||||
import { deckStore, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store.js';
|
||||
import { deckStore, columnTypes, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store.js';
|
||||
import type { ColumnType } from './deck/deck-store.js';
|
||||
import XSidebar from '@/ui/_common_/navbar.vue';
|
||||
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
|
|
@ -117,7 +118,7 @@ import XMentionsColumn from '@/ui/deck/mentions-column.vue';
|
|||
import XDirectColumn from '@/ui/deck/direct-column.vue';
|
||||
import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue';
|
||||
import { mainRouter } from '@/router/main.js';
|
||||
import { MenuItem } from '@/types/menu.js';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
|
||||
const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
|
||||
|
||||
|
|
@ -152,10 +153,12 @@ window.addEventListener('resize', () => {
|
|||
const snapScroll = deviceKind === 'smartphone' || deviceKind === 'tablet';
|
||||
const drawerMenuShowing = ref(false);
|
||||
|
||||
/*
|
||||
const route = 'TODO';
|
||||
watch(route, () => {
|
||||
drawerMenuShowing.value = false;
|
||||
});
|
||||
*/
|
||||
|
||||
const columns = deckStore.reactiveState.columns;
|
||||
const layout = deckStore.reactiveState.layout;
|
||||
|
|
@ -174,32 +177,20 @@ function showSettings() {
|
|||
const columnsEl = shallowRef<HTMLElement>();
|
||||
|
||||
const addColumn = async (ev) => {
|
||||
const columns = [
|
||||
'main',
|
||||
'widgets',
|
||||
'notifications',
|
||||
'tl',
|
||||
'antenna',
|
||||
'list',
|
||||
'channel',
|
||||
'mentions',
|
||||
'direct',
|
||||
'roleTimeline',
|
||||
];
|
||||
|
||||
const { canceled, result: column } = await os.select({
|
||||
title: i18n.ts._deck.addColumn,
|
||||
items: columns.map(column => ({
|
||||
items: columnTypes.map(column => ({
|
||||
value: column, text: i18n.ts._deck._columns[column],
|
||||
})),
|
||||
});
|
||||
if (canceled) return;
|
||||
if (canceled || column == null) return;
|
||||
|
||||
addColumnToStore({
|
||||
type: column,
|
||||
id: uuid(),
|
||||
name: i18n.ts._deck._columns[column],
|
||||
width: 330,
|
||||
soundSetting: { type: null, volume: 1 },
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -211,7 +202,7 @@ const onContextmenu = (ev) => {
|
|||
};
|
||||
|
||||
function onWheel(ev: WheelEvent) {
|
||||
if (ev.deltaX === 0) {
|
||||
if (ev.deltaX === 0 && columnsEl.value != null) {
|
||||
columnsEl.value.scrollLeft += ev.deltaY;
|
||||
}
|
||||
}
|
||||
|
|
@ -242,7 +233,7 @@ function changeProfile(ev: MouseEvent) {
|
|||
title: i18n.ts._deck.profile,
|
||||
minLength: 1,
|
||||
});
|
||||
if (canceled) return;
|
||||
if (canceled || name == null) return;
|
||||
|
||||
deckStore.set('profile', name);
|
||||
unisonReload();
|
||||
|
|
@ -314,7 +305,7 @@ body {
|
|||
.root {
|
||||
$nav-hide-threshold: 650px; // TODO: どこかに集約したい
|
||||
|
||||
--margin: var(--marginHalf);
|
||||
--MI-margin: var(--MI-marginHalf);
|
||||
|
||||
--columnGap: 6px;
|
||||
|
||||
|
|
@ -341,7 +332,7 @@ body {
|
|||
overflow-x: auto;
|
||||
overflow-y: clip;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--deckBg);
|
||||
background: var(--MI_THEME-deckBg);
|
||||
|
||||
&.center {
|
||||
> .section:first-of-type {
|
||||
|
|
@ -423,7 +414,7 @@ body {
|
|||
contain: strict;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--navBg);
|
||||
background: var(--MI_THEME-navBg);
|
||||
}
|
||||
|
||||
.nav {
|
||||
|
|
@ -437,10 +428,10 @@ body {
|
|||
grid-gap: 8px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
-webkit-backdrop-filter: var(--blur, blur(32px));
|
||||
backdrop-filter: var(--blur, blur(32px));
|
||||
background-color: var(--header);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(32px));
|
||||
backdrop-filter: var(--MI-blur, blur(32px));
|
||||
background-color: var(--MI_THEME-header);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.navButton {
|
||||
|
|
@ -451,29 +442,29 @@ body {
|
|||
max-width: 60px;
|
||||
margin: auto;
|
||||
border-radius: 100%;
|
||||
background: var(--panel);
|
||||
color: var(--fg);
|
||||
background: var(--MI_THEME-panel);
|
||||
color: var(--MI_THEME-fg);
|
||||
|
||||
&:hover {
|
||||
background: var(--panelHighlight);
|
||||
background: var(--MI_THEME-panelHighlight);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--X2);
|
||||
background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
|
||||
}
|
||||
}
|
||||
|
||||
.postButton {
|
||||
composes: navButton;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
color: var(--fgOnAccent);
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
||||
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
||||
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -486,7 +477,7 @@ body {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: var(--indicator);
|
||||
color: var(--MI_THEME-indicator);
|
||||
font-size: 16px;
|
||||
animation: global-blink 1s infinite;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()">
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="async () => { await timeline?.reloadTimeline() }">
|
||||
<template #header>
|
||||
<i class="ti ti-antenna"></i><span style="margin-left: 8px;">{{ column.name }}</span>
|
||||
</template>
|
||||
|
|
@ -14,14 +14,16 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, shallowRef, watch } from 'vue';
|
||||
import { onMounted, ref, shallowRef, watch, defineAsyncComponent } from 'vue';
|
||||
import type { entities as MisskeyEntities } from 'misskey-js';
|
||||
import XColumn from './column.vue';
|
||||
import { updateColumn, Column } from './deck-store.js';
|
||||
import MkTimeline from '@/components/MkTimeline.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { MenuItem } from '@/types/menu.js';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
import { antennasCache } from '@/cache.js';
|
||||
import { SoundStore } from '@/store.js';
|
||||
import { soundSettingsButton } from '@/ui/deck/tl-note-notification.js';
|
||||
import * as sound from '@/scripts/sound.js';
|
||||
|
|
@ -46,14 +48,36 @@ watch(soundSetting, v => {
|
|||
|
||||
async function setAntenna() {
|
||||
const antennas = await misskeyApi('antennas/list');
|
||||
const { canceled, result: antenna } = await os.select({
|
||||
const { canceled, result: antenna } = await os.select<MisskeyEntities.Antenna | '_CREATE_'>({
|
||||
title: i18n.ts.selectAntenna,
|
||||
items: antennas.map(x => ({
|
||||
value: x, text: x.name,
|
||||
})),
|
||||
items: [
|
||||
{ value: '_CREATE_', text: i18n.ts.createNew },
|
||||
(antennas.length > 0 ? {
|
||||
sectionTitle: i18n.ts.createdAntennas,
|
||||
items: antennas.map(x => ({
|
||||
value: x, text: x.name,
|
||||
})),
|
||||
} : undefined),
|
||||
],
|
||||
default: props.column.antennaId,
|
||||
});
|
||||
if (canceled) return;
|
||||
if (canceled || antenna == null) return;
|
||||
|
||||
if (antenna === '_CREATE_') {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkAntennaEditorDialog.vue')), {}, {
|
||||
created: (newAntenna: MisskeyEntities.Antenna) => {
|
||||
antennasCache.delete();
|
||||
updateColumn(props.column.id, {
|
||||
antennaId: newAntenna.id,
|
||||
});
|
||||
},
|
||||
closed: () => {
|
||||
dispose();
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
updateColumn(props.column.id, {
|
||||
antennaId: antenna.id,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()">
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="async () => { await timeline?.reloadTimeline() }">
|
||||
<template #header>
|
||||
<i class="ti ti-device-tv"></i><span style="margin-left: 8px;">{{ column.name }}</span>
|
||||
</template>
|
||||
|
|
@ -29,7 +29,7 @@ import * as os from '@/os.js';
|
|||
import { favoritedChannelsCache } from '@/cache.js';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { MenuItem } from '@/types/menu.js';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
import { SoundStore } from '@/store.js';
|
||||
import { soundSettingsButton } from '@/ui/deck/tl-note-notification.js';
|
||||
import * as sound from '@/scripts/sound.js';
|
||||
|
|
@ -68,6 +68,7 @@ async function setChannel() {
|
|||
}
|
||||
|
||||
async function post() {
|
||||
if (props.column.channelId == null) return;
|
||||
if (!channel.value || channel.value.id !== props.column.channelId) {
|
||||
channel.value = await misskeyApi('channels/show', {
|
||||
channelId: props.column.channelId,
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
>
|
||||
<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);"/>
|
||||
<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(--MI_THEME-deckBg);"/>
|
||||
</g>
|
||||
</svg>
|
||||
<div :class="$style.color"></div>
|
||||
|
|
@ -46,7 +46,7 @@ import { onBeforeUnmount, onMounted, provide, watch, shallowRef, ref, computed }
|
|||
import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn, Column } from './deck-store.js';
|
||||
import * as os from '@/os.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { MenuItem } from '@/types/menu.js';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
|
||||
provide('shouldHeaderThin', true);
|
||||
provide('shouldOmitHeaderTitle', true);
|
||||
|
|
@ -104,7 +104,27 @@ function toggleActive() {
|
|||
}
|
||||
|
||||
function getMenu() {
|
||||
let items: MenuItem[] = [{
|
||||
const menuItems: MenuItem[] = [];
|
||||
|
||||
if (props.menu) {
|
||||
menuItems.push(...props.menu, {
|
||||
type: 'divider',
|
||||
});
|
||||
}
|
||||
|
||||
if (props.refresher) {
|
||||
menuItems.push({
|
||||
icon: 'ti ti-refresh',
|
||||
text: i18n.ts.reload,
|
||||
action: () => {
|
||||
if (props.refresher) {
|
||||
props.refresher();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
menuItems.push({
|
||||
icon: 'ti ti-settings',
|
||||
text: i18n.ts._deck.configureColumn,
|
||||
action: async () => {
|
||||
|
|
@ -129,74 +149,73 @@ function getMenu() {
|
|||
if (canceled) return;
|
||||
updateColumn(props.column.id, result);
|
||||
},
|
||||
});
|
||||
|
||||
const moveToMenuItems: MenuItem[] = [];
|
||||
|
||||
moveToMenuItems.push({
|
||||
icon: 'ti ti-arrow-left',
|
||||
text: i18n.ts._deck.swapLeft,
|
||||
action: () => {
|
||||
swapLeftColumn(props.column.id);
|
||||
},
|
||||
}, {
|
||||
type: 'parent',
|
||||
text: i18n.ts.move + '...',
|
||||
icon: 'ti ti-arrows-move',
|
||||
children: [{
|
||||
icon: 'ti ti-arrow-left',
|
||||
text: i18n.ts._deck.swapLeft,
|
||||
action: () => {
|
||||
swapLeftColumn(props.column.id);
|
||||
},
|
||||
}, {
|
||||
icon: 'ti ti-arrow-right',
|
||||
text: i18n.ts._deck.swapRight,
|
||||
action: () => {
|
||||
swapRightColumn(props.column.id);
|
||||
},
|
||||
}, props.isStacked ? {
|
||||
icon: 'ti ti-arrow-right',
|
||||
text: i18n.ts._deck.swapRight,
|
||||
action: () => {
|
||||
swapRightColumn(props.column.id);
|
||||
},
|
||||
});
|
||||
|
||||
if (props.isStacked) {
|
||||
moveToMenuItems.push({
|
||||
icon: 'ti ti-arrow-up',
|
||||
text: i18n.ts._deck.swapUp,
|
||||
action: () => {
|
||||
swapUpColumn(props.column.id);
|
||||
},
|
||||
} : undefined, props.isStacked ? {
|
||||
}, {
|
||||
icon: 'ti ti-arrow-down',
|
||||
text: i18n.ts._deck.swapDown,
|
||||
action: () => {
|
||||
swapDownColumn(props.column.id);
|
||||
},
|
||||
} : undefined],
|
||||
});
|
||||
}
|
||||
|
||||
menuItems.push({
|
||||
type: 'parent',
|
||||
text: i18n.ts.move + '...',
|
||||
icon: 'ti ti-arrows-move',
|
||||
children: moveToMenuItems,
|
||||
}, {
|
||||
icon: 'ti ti-stack-2',
|
||||
text: i18n.ts._deck.stackLeft,
|
||||
action: () => {
|
||||
stackLeftColumn(props.column.id);
|
||||
},
|
||||
}, props.isStacked ? {
|
||||
icon: 'ti ti-window-maximize',
|
||||
text: i18n.ts._deck.popRight,
|
||||
action: () => {
|
||||
popRightColumn(props.column.id);
|
||||
},
|
||||
} : undefined, { type: 'divider' }, {
|
||||
});
|
||||
|
||||
if (props.isStacked) {
|
||||
menuItems.push({
|
||||
icon: 'ti ti-window-maximize',
|
||||
text: i18n.ts._deck.popRight,
|
||||
action: () => {
|
||||
popRightColumn(props.column.id);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
menuItems.push({ type: 'divider' }, {
|
||||
icon: 'ti ti-trash',
|
||||
text: i18n.ts.remove,
|
||||
danger: true,
|
||||
action: () => {
|
||||
removeColumn(props.column.id);
|
||||
},
|
||||
}];
|
||||
});
|
||||
|
||||
if (props.menu) {
|
||||
items.unshift({ type: 'divider' });
|
||||
items = props.menu.concat(items);
|
||||
}
|
||||
|
||||
if (props.refresher) {
|
||||
items = [{
|
||||
icon: 'ti ti-refresh',
|
||||
text: i18n.ts.reload,
|
||||
action: () => {
|
||||
if (props.refresher) {
|
||||
props.refresher();
|
||||
}
|
||||
},
|
||||
}, ...items];
|
||||
}
|
||||
|
||||
return items;
|
||||
return menuItems;
|
||||
}
|
||||
|
||||
function showSettingsMenu(ev: MouseEvent) {
|
||||
|
|
@ -271,7 +290,7 @@ function onDrop(ev) {
|
|||
border-radius: 10px;
|
||||
|
||||
&.draghover {
|
||||
&:after {
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -280,12 +299,12 @@ function onDrop(ev) {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--focus);
|
||||
background: var(--MI_THEME-focus);
|
||||
}
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
&:after {
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
|
@ -294,7 +313,7 @@ function onDrop(ev) {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--focus);
|
||||
background: var(--MI_THEME-focus);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
|
@ -312,37 +331,37 @@ function onDrop(ev) {
|
|||
}
|
||||
|
||||
&.naked {
|
||||
background: var(--acrylicBg) !important;
|
||||
-webkit-backdrop-filter: var(--blur, blur(10px));
|
||||
backdrop-filter: var(--blur, blur(10px));
|
||||
background: var(--MI_THEME-acrylicBg) !important;
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(10px));
|
||||
backdrop-filter: var(--MI-blur, blur(10px));
|
||||
|
||||
> .header {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: var(--fg);
|
||||
color: var(--MI_THEME-fg);
|
||||
}
|
||||
|
||||
> .body {
|
||||
background: transparent !important;
|
||||
scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
scrollbar-color: var(--scrollbarHandle) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.paged {
|
||||
background: var(--bg) !important;
|
||||
background: var(--MI_THEME-bg) !important;
|
||||
|
||||
> .body {
|
||||
background: var(--bg) !important;
|
||||
background: var(--MI_THEME-bg) !important;
|
||||
overflow-y: scroll !important;
|
||||
scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: inherit;
|
||||
}
|
||||
scrollbar-color: var(--scrollbarHandle) transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -355,9 +374,9 @@ function onDrop(ev) {
|
|||
height: var(--deckColumnHeaderHeight);
|
||||
padding: 0 16px 0 30px;
|
||||
font-size: 0.9em;
|
||||
color: var(--panelHeaderFg);
|
||||
background: var(--panelHeaderBg);
|
||||
box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
|
||||
color: var(--MI_THEME-panelHeaderFg);
|
||||
background: var(--MI_THEME-panelHeaderBg);
|
||||
box-shadow: 0 1px 0 0 var(--MI_THEME-panelHeaderDivider);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
|
@ -368,7 +387,7 @@ function onDrop(ev) {
|
|||
left: 12px;
|
||||
width: 3px;
|
||||
height: calc(100% - 24px);
|
||||
background: var(--accent);
|
||||
background: var(--MI_THEME-accent);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
|
|
@ -422,11 +441,11 @@ function onDrop(ev) {
|
|||
overscroll-behavior-y: contain;
|
||||
box-sizing: border-box;
|
||||
container-type: size;
|
||||
background-color: var(--bg);
|
||||
background-color: var(--MI_THEME-bg);
|
||||
scrollbar-color: var(--MI_THEME-scrollbarHandle) var(--MI_THEME-panel);
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
scrollbar-color: var(--scrollbarHandle) var(--panel);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
import { throttle } from 'throttle-debounce';
|
||||
import { markRaw } from 'vue';
|
||||
import { notificationTypes } from 'misskey-js';
|
||||
import type { BasicTimelineType } from '@/timelines.js';
|
||||
import { Storage } from '@/pizzax.js';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { deepClone } from '@/scripts/clone.js';
|
||||
|
|
@ -17,9 +18,24 @@ type ColumnWidget = {
|
|||
data: Record<string, any>;
|
||||
};
|
||||
|
||||
export const columnTypes = [
|
||||
'main',
|
||||
'widgets',
|
||||
'notifications',
|
||||
'tl',
|
||||
'antenna',
|
||||
'list',
|
||||
'channel',
|
||||
'mentions',
|
||||
'direct',
|
||||
'roleTimeline',
|
||||
] as const;
|
||||
|
||||
export type ColumnType = typeof columnTypes[number];
|
||||
|
||||
export type Column = {
|
||||
id: string;
|
||||
type: 'main' | 'widgets' | 'notifications' | 'tl' | 'antenna' | 'channel' | 'list' | 'mentions' | 'direct';
|
||||
type: ColumnType;
|
||||
name: string | null;
|
||||
width: number;
|
||||
widgets?: ColumnWidget[];
|
||||
|
|
@ -30,7 +46,7 @@ export type Column = {
|
|||
channelId?: string;
|
||||
roleId?: string;
|
||||
excludeTypes?: typeof notificationTypes[number][];
|
||||
tl?: 'home' | 'local' | 'social' | 'global';
|
||||
tl?: BasicTimelineType;
|
||||
withRenotes?: boolean;
|
||||
withReplies?: boolean;
|
||||
onlyFiles?: boolean;
|
||||
|
|
@ -265,7 +281,7 @@ export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) {
|
|||
const columns = deepClone(deckStore.state.columns);
|
||||
const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
|
||||
const column = deepClone(deckStore.state.columns[columnIndex]);
|
||||
if (column == null) return;
|
||||
if (column == null || column.widgets == null) return;
|
||||
column.widgets = column.widgets.filter(w => w.id !== widget.id);
|
||||
columns[columnIndex] = column;
|
||||
deckStore.set('columns', columns);
|
||||
|
|
@ -287,7 +303,7 @@ export function updateColumnWidget(id: Column['id'], widgetId: string, widgetDat
|
|||
const columns = deepClone(deckStore.state.columns);
|
||||
const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
|
||||
const column = deepClone(deckStore.state.columns[columnIndex]);
|
||||
if (column == null) return;
|
||||
if (column == null || column.widgets == null) return;
|
||||
column.widgets = column.widgets.map(w => w.id === widgetId ? {
|
||||
...w,
|
||||
data: widgetData,
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const tlComponent = ref<InstanceType<typeof MkNotes>>();
|
|||
|
||||
function reloadTimeline() {
|
||||
return new Promise<void>((res) => {
|
||||
tlComponent.value.pagingComponent?.reload().then(() => {
|
||||
tlComponent.value?.pagingComponent?.reload().then(() => {
|
||||
res();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()">
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="async () => { await timeline?.reloadTimeline() }">
|
||||
<template #header>
|
||||
<i class="ti ti-list"></i><span style="margin-left: 8px;">{{ column.name }}</span>
|
||||
</template>
|
||||
|
|
@ -15,14 +15,16 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { watch, shallowRef, ref } from 'vue';
|
||||
import type { entities as MisskeyEntities } from 'misskey-js';
|
||||
import XColumn from './column.vue';
|
||||
import { updateColumn, Column } from './deck-store.js';
|
||||
import MkTimeline from '@/components/MkTimeline.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { MenuItem } from '@/types/menu.js';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
import { SoundStore } from '@/store.js';
|
||||
import { userListsCache } from '@/cache.js';
|
||||
import { soundSettingsButton } from '@/ui/deck/tl-note-notification.js';
|
||||
import * as sound from '@/scripts/sound.js';
|
||||
|
||||
|
|
@ -51,17 +53,38 @@ watch(soundSetting, v => {
|
|||
|
||||
async function setList() {
|
||||
const lists = await misskeyApi('users/lists/list');
|
||||
const { canceled, result: list } = await os.select({
|
||||
const { canceled, result: list } = await os.select<MisskeyEntities.UserList | '_CREATE_'>({
|
||||
title: i18n.ts.selectList,
|
||||
items: lists.map(x => ({
|
||||
value: x, text: x.name,
|
||||
})),
|
||||
items: [
|
||||
{ value: '_CREATE_', text: i18n.ts.createNew },
|
||||
(lists.length > 0 ? {
|
||||
sectionTitle: i18n.ts.createdLists,
|
||||
items: lists.map(x => ({
|
||||
value: x, text: x.name,
|
||||
})),
|
||||
} : undefined),
|
||||
],
|
||||
default: props.column.listId,
|
||||
});
|
||||
if (canceled) return;
|
||||
updateColumn(props.column.id, {
|
||||
listId: list.id,
|
||||
});
|
||||
if (canceled || list == null) return;
|
||||
|
||||
if (list === '_CREATE_') {
|
||||
const { canceled, result: name } = await os.inputText({
|
||||
title: i18n.ts.enterListName,
|
||||
});
|
||||
if (canceled || name == null || name === '') return;
|
||||
|
||||
const res = await os.apiWithDialog('users/lists/create', { name: name });
|
||||
userListsCache.delete();
|
||||
|
||||
updateColumn(props.column.id, {
|
||||
listId: res.id,
|
||||
});
|
||||
} else {
|
||||
updateColumn(props.column.id, {
|
||||
listId: list.id,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function editList() {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@ import * as os from '@/os.js';
|
|||
import { i18n } from '@/i18n.js';
|
||||
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
|
||||
import { useScrollPositionManager } from '@/nirax.js';
|
||||
import { getScrollContainer } from '@/scripts/scroll.js';
|
||||
import { getScrollContainer } from '@@/js/scroll.js';
|
||||
import { isLink } from '@@/js/is-link.js';
|
||||
import { mainRouter } from '@/router/main.js';
|
||||
|
||||
defineProps<{
|
||||
|
|
@ -52,12 +53,6 @@ function back() {
|
|||
function onContextmenu(ev: MouseEvent) {
|
||||
if (!ev.target) return;
|
||||
|
||||
const isLink = (el: HTMLElement) => {
|
||||
if (el.tagName === 'A') return true;
|
||||
if (el.parentElement) {
|
||||
return isLink(el.parentElement);
|
||||
}
|
||||
};
|
||||
if (isLink(ev.target as HTMLElement)) return;
|
||||
if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes((ev.target as HTMLElement).tagName) || (ev.target as HTMLElement).attributes['contenteditable']) return;
|
||||
if (window.getSelection()?.toString() !== '') return;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const tlComponent = ref<InstanceType<typeof MkNotes>>();
|
|||
|
||||
function reloadTimeline() {
|
||||
return new Promise<void>((res) => {
|
||||
tlComponent.value.pagingComponent?.reload().then(() => {
|
||||
tlComponent.value?.pagingComponent?.reload().then(() => {
|
||||
res();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<XColumn :column="column" :isStacked="isStacked" :menu="menu" :refresher="() => notificationsComponent.reload()">
|
||||
<XColumn :column="column" :isStacked="isStacked" :menu="menu" :refresher="async () => { await notificationsComponent?.reload() }">
|
||||
<template #header><i class="ti ti-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
|
||||
|
||||
<XNotifications ref="notificationsComponent" :excludeTypes="props.column.excludeTypes"/>
|
||||
|
|
@ -27,7 +27,7 @@ const props = defineProps<{
|
|||
const notificationsComponent = shallowRef<InstanceType<typeof XNotifications>>();
|
||||
|
||||
function func() {
|
||||
os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), {
|
||||
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), {
|
||||
excludeTypes: props.column.excludeTypes,
|
||||
}, {
|
||||
done: async (res) => {
|
||||
|
|
@ -36,7 +36,8 @@ function func() {
|
|||
excludeTypes: excludeTypes,
|
||||
});
|
||||
},
|
||||
}, 'closed');
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
const menu = [{
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()">
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="async () => { await timeline?.reloadTimeline() }">
|
||||
<template #header>
|
||||
<i class="ti ti-badge"></i><span style="margin-left: 8px;">{{ column.name }}</span>
|
||||
</template>
|
||||
|
|
@ -21,7 +21,7 @@ import MkTimeline from '@/components/MkTimeline.vue';
|
|||
import * as os from '@/os.js';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { MenuItem } from '@/types/menu.js';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
import { SoundStore } from '@/store.js';
|
||||
import { soundSettingsButton } from '@/ui/deck/tl-note-notification.js';
|
||||
import * as sound from '@/scripts/sound.js';
|
||||
|
|
@ -53,7 +53,7 @@ async function setRole() {
|
|||
})),
|
||||
default: props.column.roleId,
|
||||
});
|
||||
if (canceled) return;
|
||||
if (canceled || role == null) return;
|
||||
updateColumn(props.column.id, {
|
||||
roleId: role.id,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,16 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="() => timeline.reloadTimeline()">
|
||||
<XColumn :menu="menu" :column="column" :isStacked="isStacked" :refresher="async () => { await timeline?.reloadTimeline() }">
|
||||
<template #header>
|
||||
<i v-if="column.tl === 'home'" class="ti ti-home"></i>
|
||||
<i v-else-if="column.tl === 'local'" class="ti ti-planet"></i>
|
||||
<i v-else-if="column.tl === 'social'" class="ti ti-universe"></i>
|
||||
<i v-else-if="column.tl === 'global'" class="ti ti-whirl"></i>
|
||||
<i v-if="column.tl != null" :class="basicTimelineIconClass(column.tl)"/>
|
||||
<span style="margin-left: 8px;">{{ column.name }}</span>
|
||||
</template>
|
||||
|
||||
<div v-if="(((column.tl === 'local' || column.tl === 'social') && !isLocalTimelineAvailable) || (column.tl === 'global' && !isGlobalTimelineAvailable))" :class="$style.disabled">
|
||||
<div v-if="!isAvailableBasicTimeline(column.tl)" :class="$style.disabled">
|
||||
<p :class="$style.disabledTitle">
|
||||
<i class="ti ti-circle-minus"></i>
|
||||
{{ i18n.ts._disabledTimeline.title }}
|
||||
|
|
@ -34,15 +31,15 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, watch, ref, shallowRef } from 'vue';
|
||||
import { onMounted, watch, ref, shallowRef, computed } from 'vue';
|
||||
import XColumn from './column.vue';
|
||||
import { removeColumn, updateColumn, Column } from './deck-store.js';
|
||||
import type { MenuItem } from '@/types/menu.js';
|
||||
import MkTimeline from '@/components/MkTimeline.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { $i } from '@/account.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { hasWithReplies, isAvailableBasicTimeline, basicTimelineIconClass } from '@/timelines.js';
|
||||
import { instance } from '@/instance.js';
|
||||
import { MenuItem } from '@/types/menu.js';
|
||||
import { SoundStore } from '@/store.js';
|
||||
import { soundSettingsButton } from '@/ui/deck/tl-note-notification.js';
|
||||
import * as sound from '@/scripts/sound.js';
|
||||
|
|
@ -52,11 +49,8 @@ const props = defineProps<{
|
|||
isStacked: boolean;
|
||||
}>();
|
||||
|
||||
const disabled = ref(false);
|
||||
const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
|
||||
|
||||
const isLocalTimelineAvailable = (($i == null && instance.policies.ltlAvailable) || ($i != null && $i.policies.ltlAvailable));
|
||||
const isGlobalTimelineAvailable = (($i == null && instance.policies.gtlAvailable) || ($i != null && $i.policies.gtlAvailable));
|
||||
const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });
|
||||
const withRenotes = ref(props.column.withRenotes ?? true);
|
||||
const withReplies = ref(props.column.withReplies ?? false);
|
||||
|
|
@ -87,10 +81,6 @@ watch(soundSetting, v => {
|
|||
onMounted(() => {
|
||||
if (props.column.tl == null) {
|
||||
setType();
|
||||
} else if ($i) {
|
||||
disabled.value = (
|
||||
(!((instance.policies.ltlAvailable) || ($i.policies.ltlAvailable)) && ['local', 'social'].includes(props.column.tl)) ||
|
||||
(!((instance.policies.gtlAvailable) || ($i.policies.gtlAvailable)) && ['global'].includes(props.column.tl)));
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -113,8 +103,9 @@ async function setType() {
|
|||
}
|
||||
return;
|
||||
}
|
||||
if (src == null) return;
|
||||
updateColumn(props.column.id, {
|
||||
tl: src,
|
||||
tl: src ?? undefined,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -122,29 +113,41 @@ function onNote() {
|
|||
sound.playMisskeySfxFile(soundSetting.value);
|
||||
}
|
||||
|
||||
const menu: MenuItem[] = [{
|
||||
icon: 'ti ti-pencil',
|
||||
text: i18n.ts.timeline,
|
||||
action: setType,
|
||||
}, {
|
||||
icon: 'ti ti-bell',
|
||||
text: i18n.ts._deck.newNoteNotificationSettings,
|
||||
action: () => soundSettingsButton(soundSetting),
|
||||
}, {
|
||||
type: 'switch',
|
||||
text: i18n.ts.showRenotes,
|
||||
ref: withRenotes,
|
||||
}, props.column.tl === 'local' || props.column.tl === 'social' ? {
|
||||
type: 'switch',
|
||||
text: i18n.ts.showRepliesToOthersInTimeline,
|
||||
ref: withReplies,
|
||||
disabled: onlyFiles,
|
||||
} : undefined, {
|
||||
type: 'switch',
|
||||
text: i18n.ts.fileAttachedOnly,
|
||||
ref: onlyFiles,
|
||||
disabled: props.column.tl === 'local' || props.column.tl === 'social' ? withReplies : false,
|
||||
}];
|
||||
const menu = computed<MenuItem[]>(() => {
|
||||
const menuItems: MenuItem[] = [];
|
||||
|
||||
menuItems.push({
|
||||
icon: 'ti ti-pencil',
|
||||
text: i18n.ts.timeline,
|
||||
action: setType,
|
||||
}, {
|
||||
icon: 'ti ti-bell',
|
||||
text: i18n.ts._deck.newNoteNotificationSettings,
|
||||
action: () => soundSettingsButton(soundSetting),
|
||||
}, {
|
||||
type: 'switch',
|
||||
text: i18n.ts.showRenotes,
|
||||
ref: withRenotes,
|
||||
});
|
||||
|
||||
if (hasWithReplies(props.column.tl)) {
|
||||
menuItems.push({
|
||||
type: 'switch',
|
||||
text: i18n.ts.showRepliesToOthersInTimeline,
|
||||
ref: withReplies,
|
||||
disabled: onlyFiles,
|
||||
});
|
||||
}
|
||||
|
||||
menuItems.push({
|
||||
type: 'switch',
|
||||
text: i18n.ts.fileAttachedOnly,
|
||||
ref: onlyFiles,
|
||||
disabled: hasWithReplies(props.column.tl) ? withReplies : false,
|
||||
});
|
||||
|
||||
return menuItems;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
|
|||
|
|
@ -57,10 +57,10 @@ const menu = [{
|
|||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
--margin: 8px;
|
||||
--panelBorder: none;
|
||||
--MI-margin: 8px;
|
||||
--MI_THEME-panelBorder: none;
|
||||
|
||||
padding: 0 var(--margin);
|
||||
padding: 0 var(--MI-margin);
|
||||
}
|
||||
|
||||
.intro {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import { computed, provide, ref } from 'vue';
|
||||
import XCommon from './_common_/common.vue';
|
||||
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
|
||||
import { instanceName } from '@/config.js';
|
||||
import { instanceName } from '@@/js/config.js';
|
||||
import { mainRouter } from '@/router/main.js';
|
||||
|
||||
const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import { defineAsyncComponent, provide, onMounted, computed, ref, watch, shallowRef, Ref } from 'vue';
|
||||
import XCommon from './_common_/common.vue';
|
||||
import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
|
||||
import { instanceName } from '@/config.js';
|
||||
import { instanceName } from '@@/js/config.js';
|
||||
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
|
|
@ -108,9 +108,10 @@ import { $i } from '@/account.js';
|
|||
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
|
||||
import { deviceKind } from '@/scripts/device-kind.js';
|
||||
import { miLocalStorage } from '@/local-storage.js';
|
||||
import { CURRENT_STICKY_BOTTOM } from '@/const.js';
|
||||
import { CURRENT_STICKY_BOTTOM } from '@@/js/const.js';
|
||||
import { useScrollPositionManager } from '@/nirax.js';
|
||||
import { mainRouter } from '@/router/main.js';
|
||||
import { isLink } from '@@/js/is-link.js';
|
||||
|
||||
const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
|
||||
const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
|
||||
|
|
@ -195,12 +196,6 @@ onMounted(() => {
|
|||
});
|
||||
|
||||
const onContextmenu = (ev) => {
|
||||
const isLink = (el: HTMLElement) => {
|
||||
if (el.tagName === 'A') return true;
|
||||
if (el.parentElement) {
|
||||
return isLink(el.parentElement);
|
||||
}
|
||||
};
|
||||
if (isLink(ev.target)) return;
|
||||
if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
|
||||
if (window.getSelection()?.toString() !== '') return;
|
||||
|
|
@ -230,12 +225,12 @@ provide<Ref<number>>(CURRENT_STICKY_BOTTOM, navFooterHeight);
|
|||
watch(navFooter, () => {
|
||||
if (navFooter.value) {
|
||||
navFooterHeight.value = navFooter.value.offsetHeight;
|
||||
document.body.style.setProperty('--stickyBottom', `${navFooterHeight.value}px`);
|
||||
document.body.style.setProperty('--minBottomSpacing', 'var(--minBottomSpacingMobile)');
|
||||
document.body.style.setProperty('--MI-stickyBottom', `${navFooterHeight.value}px`);
|
||||
document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
|
||||
} else {
|
||||
navFooterHeight.value = 0;
|
||||
document.body.style.setProperty('--stickyBottom', '0px');
|
||||
document.body.style.setProperty('--minBottomSpacing', '0px');
|
||||
document.body.style.setProperty('--MI-stickyBottom', '0px');
|
||||
document.body.style.setProperty('--MI-minBottomSpacing', '0px');
|
||||
}
|
||||
}, {
|
||||
immediate: true,
|
||||
|
|
@ -323,7 +318,7 @@ $widgets-hide-threshold: 1090px;
|
|||
}
|
||||
|
||||
.sidebar {
|
||||
border-right: solid 0.5px var(--divider);
|
||||
border-right: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.contents {
|
||||
|
|
@ -333,7 +328,7 @@ $widgets-hide-threshold: 1090px;
|
|||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--bg);
|
||||
background: var(--MI_THEME-bg);
|
||||
}
|
||||
|
||||
.widgets {
|
||||
|
|
@ -341,9 +336,9 @@ $widgets-hide-threshold: 1090px;
|
|||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px));
|
||||
border-left: solid 0.5px var(--divider);
|
||||
background: var(--bg);
|
||||
padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
|
||||
border-left: solid 0.5px var(--MI_THEME-divider);
|
||||
background: var(--MI_THEME-bg);
|
||||
|
||||
@media (max-width: $widgets-hide-threshold) {
|
||||
display: none;
|
||||
|
|
@ -361,7 +356,7 @@ $widgets-hide-threshold: 1090px;
|
|||
border-radius: 100%;
|
||||
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
|
||||
font-size: 22px;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
||||
.widgetsDrawerBg {
|
||||
|
|
@ -375,11 +370,11 @@ $widgets-hide-threshold: 1090px;
|
|||
z-index: 1001;
|
||||
width: 310px;
|
||||
height: 100dvh;
|
||||
padding: var(--margin) var(--margin) calc(var(--margin) + env(safe-area-inset-bottom, 0px)) !important;
|
||||
padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px)) !important;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--bg);
|
||||
background: var(--MI_THEME-bg);
|
||||
}
|
||||
|
||||
.widgetsCloseButton {
|
||||
|
|
@ -405,10 +400,10 @@ $widgets-hide-threshold: 1090px;
|
|||
grid-gap: 8px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
-webkit-backdrop-filter: var(--blur, blur(24px));
|
||||
backdrop-filter: var(--blur, blur(24px));
|
||||
background-color: var(--header);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
-webkit-backdrop-filter: var(--MI-blur, blur(24px));
|
||||
backdrop-filter: var(--MI-blur, blur(24px));
|
||||
background-color: var(--MI_THEME-header);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
.navButton {
|
||||
|
|
@ -419,29 +414,29 @@ $widgets-hide-threshold: 1090px;
|
|||
max-width: 60px;
|
||||
margin: auto;
|
||||
border-radius: 100%;
|
||||
background: var(--panel);
|
||||
color: var(--fg);
|
||||
background: var(--MI_THEME-panel);
|
||||
color: var(--MI_THEME-fg);
|
||||
|
||||
&:hover {
|
||||
background: var(--panelHighlight);
|
||||
background: var(--MI_THEME-panelHighlight);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--X2);
|
||||
background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
|
||||
}
|
||||
}
|
||||
|
||||
.postButton {
|
||||
composes: navButton;
|
||||
background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
|
||||
color: var(--fgOnAccent);
|
||||
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
|
||||
color: var(--MI_THEME-fgOnAccent);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
||||
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: linear-gradient(90deg, var(--X8), var(--X8));
|
||||
background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -454,7 +449,7 @@ $widgets-hide-threshold: 1090px;
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: var(--indicator);
|
||||
color: var(--MI_THEME-indicator);
|
||||
font-size: 16px;
|
||||
animation: global-blink 1s infinite;
|
||||
|
||||
|
|
@ -479,7 +474,7 @@ $widgets-hide-threshold: 1090px;
|
|||
contain: strict;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
background: var(--navBg);
|
||||
background: var(--MI_THEME-navBg);
|
||||
}
|
||||
|
||||
.statusbars {
|
||||
|
|
@ -489,6 +484,6 @@ $widgets-hide-threshold: 1090px;
|
|||
}
|
||||
|
||||
.spacer {
|
||||
height: calc(var(--minBottomSpacing));
|
||||
height: calc(var(--MI-minBottomSpacing));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
|
||||
<template>
|
||||
<div class="mk-app">
|
||||
<a v-if="isRoot" href="https://github.com/misskey-dev/misskey" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--panel); color:var(--fg); position: fixed; z-index: 10; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
|
||||
<a v-if="isRoot" href="https://github.com/misskey-dev/misskey" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--MI_THEME-panel); color:var(--MI_THEME-fg); position: fixed; z-index: 10; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
|
||||
|
||||
<div v-if="!narrow && !isRoot" class="side">
|
||||
<div class="banner" :style="{ backgroundImage: instance.backgroundImageUrl ? `url(${ instance.backgroundImageUrl })` : 'none' }"></div>
|
||||
|
|
@ -71,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<script lang="ts" setup>
|
||||
import { onMounted, provide, ref, computed } from 'vue';
|
||||
import XCommon from './_common_/common.vue';
|
||||
import { instanceName } from '@/config.js';
|
||||
import { instanceName } from '@@/js/config.js';
|
||||
import * as os from '@/os.js';
|
||||
import { instance } from '@/instance.js';
|
||||
import XSigninDialog from '@/components/MkSigninDialog.vue';
|
||||
|
|
@ -126,15 +126,19 @@ const keymap = computed(() => {
|
|||
});
|
||||
|
||||
function signin() {
|
||||
os.popup(XSigninDialog, {
|
||||
const { dispose } = os.popup(XSigninDialog, {
|
||||
autoSet: true,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
function signup() {
|
||||
os.popup(XSignupDialog, {
|
||||
const { dispose } = os.popup(XSignupDialog, {
|
||||
autoSet: true,
|
||||
}, {}, 'closed');
|
||||
}, {
|
||||
closed: () => dispose(),
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -187,7 +191,7 @@ defineExpose({
|
|||
left: 0;
|
||||
width: 500px;
|
||||
height: 100vh;
|
||||
background: var(--accent);
|
||||
background: var(--MI_THEME-accent);
|
||||
|
||||
> .banner {
|
||||
position: absolute;
|
||||
|
|
@ -215,7 +219,7 @@ defineExpose({
|
|||
min-width: 0;
|
||||
|
||||
> .header {
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
|
||||
> .wide {
|
||||
line-height: 50px;
|
||||
|
|
@ -250,7 +254,7 @@ defineExpose({
|
|||
left: 0;
|
||||
width: 240px;
|
||||
height: 100vh;
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
|
||||
> .link {
|
||||
display: block;
|
||||
|
|
@ -264,7 +268,7 @@ defineExpose({
|
|||
> .divider {
|
||||
margin: 8px auto;
|
||||
width: calc(100% - 32px);
|
||||
border-top: solid 0.5px var(--divider);
|
||||
border-top: solid 0.5px var(--MI_THEME-divider);
|
||||
}
|
||||
|
||||
> .action {
|
||||
|
|
@ -279,7 +283,7 @@ defineExpose({
|
|||
border-radius: 999px;
|
||||
|
||||
&._button {
|
||||
background: var(--panel);
|
||||
background: var(--MI_THEME-panel);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import { computed, provide, ref } from 'vue';
|
||||
import XCommon from './_common_/common.vue';
|
||||
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
|
||||
import { instanceName, ui } from '@/config.js';
|
||||
import { instanceName, ui } from '@@/js/config.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { mainRouter } from '@/router/main.js';
|
||||
|
||||
|
|
@ -63,12 +63,12 @@ document.documentElement.style.overflowY = 'scroll';
|
|||
}
|
||||
|
||||
.rootWithBottom {
|
||||
min-height: calc(100dvh - (60px + (var(--margin) * 2) + env(safe-area-inset-bottom, 0px)));
|
||||
min-height: calc(100dvh - (60px + (var(--MI-margin) * 2) + env(safe-area-inset-bottom, 0px)));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
height: calc(60px + (var(--margin) * 2) + env(safe-area-inset-bottom, 0px));
|
||||
height: calc(60px + (var(--MI-margin) * 2) + env(safe-area-inset-bottom, 0px));
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
|
@ -81,9 +81,9 @@ document.documentElement.style.overflowY = 'scroll';
|
|||
max-width: 60px;
|
||||
margin: auto;
|
||||
border-radius: 100%;
|
||||
background: var(--panel);
|
||||
color: var(--fg);
|
||||
right: var(--margin);
|
||||
bottom: calc(var(--margin) + env(safe-area-inset-bottom, 0px));
|
||||
background: var(--MI_THEME-panel);
|
||||
color: var(--MI_THEME-fg);
|
||||
right: var(--MI-margin);
|
||||
bottom: calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue