@@ -64,7 +64,7 @@
-
-
-
-
-
-
diff --git a/src/client/components/ui/select.vue b/src/client/components/ui/select.vue
deleted file mode 100644
index e9d43d8a64..0000000000
--- a/src/client/components/ui/select.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-
-
- {{ $ts.save }}
-
-
-
-
-
-
diff --git a/src/client/components/ui/super-menu.vue b/src/client/components/ui/super-menu.vue
new file mode 100644
index 0000000000..35fc81550d
--- /dev/null
+++ b/src/client/components/ui/super-menu.vue
@@ -0,0 +1,151 @@
+
+
-
-
-
+
+
+
+
+
+
diff --git a/src/client/components/ui/switch.vue b/src/client/components/ui/switch.vue
deleted file mode 100644
index 7aa9c0619d..0000000000
--- a/src/client/components/ui/switch.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-
-
+
+{{ group.title }}
+
+
+
+
+
+ {{ item.text }}
+
+
+
+
+ {{ item.text }}
+
+
+
+
-
-
-
-
-
-
-
-
-
diff --git a/src/client/components/ui/textarea.vue b/src/client/components/ui/textarea.vue
deleted file mode 100644
index 08ac3182a9..0000000000
--- a/src/client/components/ui/textarea.vue
+++ /dev/null
@@ -1,254 +0,0 @@
-
-
- {{ $ts.save }}
-
-
-
-
-
-
diff --git a/src/client/components/ui/window.vue b/src/client/components/ui/window.vue
index 773c3b9b13..00284b0467 100644
--- a/src/client/components/ui/window.vue
+++ b/src/client/components/ui/window.vue
@@ -3,11 +3,16 @@
-
-
-
-
-
+
+
@@ -377,7 +382,7 @@ export default defineComponent({
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index 612bfa762a..7b07bf2dde 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -1,51 +1,16 @@
-
-
- {{ $ts.overview }}
-
-
- {{ $ts.quickAction }}
- {{ $ts.lookup }}
- {{ $ts.invite }}
-
-
- {{ $ts.administration }}
- {{ $ts.users }}
- {{ $ts.customEmojis }}
- {{ $ts.federation }}
- {{ $ts.jobQueue }}
- {{ $ts.files }}
- {{ $ts.announcements }}
- {{ $ts.ads }}
- {{ $ts.abuseReports }}
-
-
- {{ $ts.settings }}
- {{ $ts.general }}
- {{ $ts.files }}
- {{ $ts.emailServer }}
- {{ $ts.objectStorage }}
- {{ $ts.security }}
- ServiceWorker
- {{ $ts.relays }}
- {{ $ts.integration }}
- {{ $ts.instanceBlocking }}
- {{ $ts.proxyAccount }}
- {{ $ts.other }}
-
-
- {{ $ts.info }}
- {{ $ts.database }}
- {{ $ts.logs }}
-
-
+ {{ $ts.noMaintainerInformationWarning }} {{ $ts.configure }}
+ {{ $ts.noBotProtectionWarning }} {{ $ts.configure }}
+
+
-
-
- ![]()
-
-
+ ![]()
+
+
+
-
-
+
@@ -60,6 +60,8 @@ export default defineComponent({
diff --git a/src/client/ui/_common_/sidebar.vue b/src/client/ui/_common_/sidebar.vue
index 9817a46e30..d00327b096 100644
--- a/src/client/ui/_common_/sidebar.vue
+++ b/src/client/ui/_common_/sidebar.vue
@@ -50,7 +50,7 @@ import { host } from '@client/config';
import { search } from '@client/scripts/search';
import * as os from '@client/os';
import { menuDef } from '@client/menu';
-import { getAccounts, addAccount, login } from '@client/account';
+import { openAccountMenu } from '@client/account';
export default defineComponent({
props: {
@@ -134,76 +134,12 @@ export default defineComponent({
search();
},
- async openAccountMenu(ev) {
- const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== this.$i.id));
- const accountsPromise = os.api('users/show', { userIds: storedAccounts.map(x => x.id) });
-
- const accountItemPromises = storedAccounts.map(a => new Promise(res => {
- accountsPromise.then(accounts => {
- const account = accounts.find(x => x.id === a.id);
- if (account == null) return res(null);
- res({
- type: 'user',
- user: account,
- action: () => { this.switchAccount(account); }
- });
- });
- }));
-
- os.popupMenu([...[{
- type: 'link',
- text: this.$ts.profile,
- to: `/@${ this.$i.username }`,
- avatar: this.$i,
- }, null, ...accountItemPromises, {
- icon: 'fas fa-plus',
- text: this.$ts.addAccount,
- action: () => {
- os.popupMenu([{
- text: this.$ts.existingAccount,
- action: () => { this.addAccount(); },
- }, {
- text: this.$ts.createAccount,
- action: () => { this.createAccount(); },
- }], ev.currentTarget || ev.target);
- },
- }]], ev.currentTarget || ev.target, {
- align: 'left'
- });
- },
-
more(ev) {
os.popup(import('@client/components/launch-pad.vue'), {}, {
}, 'closed');
},
- addAccount() {
- os.popup(import('@client/components/signin-dialog.vue'), {}, {
- done: res => {
- addAccount(res.id, res.i);
- os.success();
- },
- }, 'closed');
- },
-
- createAccount() {
- os.popup(import('@client/components/signup-dialog.vue'), {}, {
- done: res => {
- addAccount(res.id, res.i);
- this.switchAccountWithToken(res.i);
- },
- }, 'closed');
- },
-
- async switchAccount(account: any) {
- const storedAccounts = await getAccounts();
- const token = storedAccounts.find(x => x.id === account.id).token;
- this.switchAccountWithToken(token);
- },
-
- switchAccountWithToken(token: string) {
- login(token);
- },
+ openAccountMenu,
}
});
@@ -395,7 +331,7 @@ export default defineComponent({
left: 0;
right: 0;
bottom: 0;
- border-radius: 8px;
+ border-radius: 999px;
background: var(--accentedBg);
}
}
@@ -436,7 +372,7 @@ export default defineComponent({
right: 0;
bottom: 0;
border-radius: 999px;
- background: var(--accent);
+ background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
}
&:hover, &.active {
diff --git a/src/client/ui/chat/index.vue b/src/client/ui/chat/index.vue
index e8275def81..4c068b0d94 100644
--- a/src/client/ui/chat/index.vue
+++ b/src/client/ui/chat/index.vue
@@ -74,7 +74,7 @@
-
@@ -101,7 +101,6 @@ import XSidebar from '@client/ui/_common_/sidebar.vue';
import XWidgets from './widgets.vue';
import XCommon from '../_common_/common.vue';
import XSide from './side.vue';
-import XHeader from '../_common_/header.vue';
import XHeaderClock from './header-clock.vue';
import * as os from '@client/os';
import { router } from '@client/router';
@@ -110,6 +109,7 @@ import { search } from '@client/scripts/search';
import copyToClipboard from '@client/scripts/copy-to-clipboard';
import { store } from './store';
import * as symbols from '@client/symbols';
+import { openAccountMenu } from '@client/account';
export default defineComponent({
components: {
@@ -117,7 +117,6 @@ export default defineComponent({
XSidebar,
XWidgets,
XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
- XHeader,
XHeaderClock,
},
@@ -255,6 +254,8 @@ export default defineComponent({
}
}], e);
},
+
+ openAccountMenu,
}
});
diff --git a/src/client/ui/chat/note-preview.vue b/src/client/ui/chat/note-preview.vue
index 77949e314b..beb38de644 100644
--- a/src/client/ui/chat/note-preview.vue
+++ b/src/client/ui/chat/note-preview.vue
@@ -6,7 +6,7 @@
-
-
-
+
{{ note.cw }}
-
@@ -56,7 +56,7 @@
-
+
@@ -13,10 +13,7 @@
-
-
-
+
@@ -67,7 +64,6 @@ import { StickySidebar } from '@client/scripts/sticky-sidebar';
import XSidebar from './default.sidebar.vue';
import XDrawerSidebar from '@client/ui/_common_/sidebar.vue';
import XCommon from './_common_/common.vue';
-import XHeader from './_common_/header.vue';
import * as os from '@client/os';
import { menuDef } from '@client/menu';
import * as symbols from '@client/symbols';
@@ -80,15 +76,21 @@ export default defineComponent({
XCommon,
XSidebar,
XDrawerSidebar,
- XHeader,
XHeaderMenu: defineAsyncComponent(() => import('./default.header.vue')),
XWidgets: defineAsyncComponent(() => import('./default.widgets.vue')),
},
+ provide() {
+ return {
+ shouldHeaderThin: this.showMenuOnTop,
+ };
+ },
+
data() {
return {
pageInfo: null,
menuDef: menuDef,
+ globalHeaderHeight: 0,
isMobile: window.innerWidth <= MOBILE_THRESHOLD,
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
widgetsShowing: false,
@@ -193,10 +195,6 @@ export default defineComponent({
if (window._scroll) window._scroll();
},
- onHeaderClick() {
- window.scroll({ top: 0, behavior: 'smooth' });
- },
-
onContextmenu(e) {
const isLink = (el: HTMLElement) => {
if (el.tagName === 'A') return true;
@@ -257,7 +255,6 @@ export default defineComponent({
}
.mk-app {
- $header-height: 50px;
$ui-font-size: 1em;
$widgets-hide-threshold: 1200px;
$nav-icon-only-width: 78px; // TODO: どこかに集約したい
@@ -282,10 +279,6 @@ export default defineComponent({
border: none;
width: 100%;
border-radius: 0;
-
- > .header {
- width: 100%;
- }
}
}
}
@@ -325,30 +318,6 @@ export default defineComponent({
border-radius: 0;
overflow: clip;
--margin: 12px;
-
- > .header {
- position: sticky;
- z-index: 1000;
- top: var(--globalHeaderHeight, 0px);
- height: $header-height;
- -webkit-backdrop-filter: var(--blur, blur(32px));
- backdrop-filter: var(--blur, blur(32px));
- background-color: var(--header);
- border-bottom: solid 0.5px var(--divider);
- }
-
- > .content {
- --stickyTop: calc(var(--globalHeaderHeight, 0px) + #{$header-height});
- }
-
- @media (max-width: 850px) {
- padding-top: $header-height;
-
- > .header {
- position: fixed;
- width: calc(100% - #{$nav-icon-only-width});
- }
- }
}
> .widgets {
@@ -370,12 +339,11 @@ export default defineComponent({
}
&.withGlobalHeader {
- --globalHeaderHeight: 60px; // TODO: 60pxと決め打ちしているのを直す
-
> .main {
margin-top: 0;
border: solid 1px var(--divider);
border-radius: var(--radius);
+ --stickyTop: var(--globalHeaderHeight);
}
> .widgets {
diff --git a/src/client/ui/universal.vue b/src/client/ui/universal.vue
index ec9254b697..7c25d71bb3 100644
--- a/src/client/ui/universal.vue
+++ b/src/client/ui/universal.vue
@@ -3,9 +3,6 @@
-
-
@@ -58,7 +55,6 @@ import { instanceName } from '@client/config';
import { StickySidebar } from '@client/scripts/sticky-sidebar';
import XSidebar from '@client/ui/_common_/sidebar.vue';
import XCommon from './_common_/common.vue';
-import XHeader from './_common_/header.vue';
import XSide from './default.side.vue';
import * as os from '@client/os';
import { menuDef } from '@client/menu';
@@ -70,7 +66,6 @@ export default defineComponent({
components: {
XCommon,
XSidebar,
- XHeader,
XWidgets: defineAsyncComponent(() => import('./universal.widgets.vue')),
XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
},
@@ -151,9 +146,6 @@ export default defineComponent({
adjustUI() {
const navWidth = this.$refs.nav.$el.offsetWidth;
this.navHidden = navWidth === 0;
- if (this.$refs.contents == null) return;
- const width = this.$refs.contents.offsetWidth;
- if (this.$refs.header) this.$refs.header.style.width = `${width}px`;
},
showNav() {
@@ -183,10 +175,6 @@ export default defineComponent({
if (window._scroll) window._scroll();
},
- onHeaderClick() {
- window.scroll({ top: 0, behavior: 'smooth' });
- },
-
onContextmenu(e) {
const isLink = (el: HTMLElement) => {
if (el.tagName === 'A') return true;
@@ -243,7 +231,6 @@ export default defineComponent({
}
.mk-app {
- $header-height: 58px; // TODO: どこかに集約したい
$ui-font-size: 1em; // TODO: どこかに集約したい
$widgets-hide-threshold: 1090px;
@@ -263,37 +250,11 @@ export default defineComponent({
> .contents {
width: 100%;
min-width: 0;
- --stickyTop: #{$header-height};
- padding-top: $header-height;
background: var(--panel);
- > .header {
- position: fixed;
- z-index: 1000;
- top: 0;
- height: $header-height;
- width: 100%;
- line-height: $header-height;
- text-align: center;
- font-weight: bold;
- //background-color: var(--panel);
- -webkit-backdrop-filter: var(--blur, blur(32px));
- backdrop-filter: var(--blur, blur(32px));
- background-color: var(--header);
- border-bottom: solid 0.5px var(--divider);
- user-select: none;
- }
-
> main {
min-width: 0;
- > .content {
- > * {
- // ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
- min-height: calc((var(--vh, 1vh) * 100) - #{$header-height});
- }
- }
-
> .spacer {
height: 82px;
diff --git a/src/client/ui/zen.vue b/src/client/ui/zen.vue
index 3756ddb5c3..98e2b8dac6 100644
--- a/src/client/ui/zen.vue
+++ b/src/client/ui/zen.vue
@@ -2,7 +2,7 @@
-
@@ -24,14 +24,12 @@