From 64be9baed0b64d882115bbfd3732a0791baa3ff8 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 14 Jul 2022 17:22:06 +0900 Subject: chore(client): tweak style --- packages/client/src/ui/_common_/sidebar.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/client/src') diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/sidebar.vue index a72bf786ad..f082af9aa8 100644 --- a/packages/client/src/ui/_common_/sidebar.vue +++ b/packages/client/src/ui/_common_/sidebar.vue @@ -244,7 +244,7 @@ function more(ev: MouseEvent) { padding: 18px 0; width: 100%; text-align: center; - font-size: $ui-font-size * 1.1; + font-size: $ui-font-size; line-height: initial; > .icon, -- cgit v1.2.3-freya From 242538ddce37de41d924f12ab8a3637c264d231c Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 14 Jul 2022 17:42:12 +0900 Subject: refactor(client): rename menu(sidebar) -> navbar --- locales/ja-JP.yml | 1 + packages/client/src/components/launch-pad.vue | 4 +- packages/client/src/menu.ts | 135 --------- packages/client/src/navbar.ts | 135 +++++++++ packages/client/src/pages/settings/index.vue | 16 +- packages/client/src/pages/settings/menu.vue | 87 ------ packages/client/src/pages/settings/navbar.vue | 87 ++++++ .../src/pages/settings/statusbars.statusbar.vue | 1 - .../client/src/ui/_common_/navbar-for-mobile.vue | 209 ++++++++++++++ packages/client/src/ui/_common_/navbar.vue | 303 +++++++++++++++++++++ .../client/src/ui/_common_/sidebar-for-mobile.vue | 209 -------------- packages/client/src/ui/_common_/sidebar.vue | 303 --------------------- packages/client/src/ui/classic.header.vue | 16 +- packages/client/src/ui/classic.sidebar.vue | 16 +- packages/client/src/ui/classic.vue | 1 - packages/client/src/ui/deck.vue | 10 +- packages/client/src/ui/universal.vue | 10 +- 17 files changed, 772 insertions(+), 771 deletions(-) delete mode 100644 packages/client/src/menu.ts create mode 100644 packages/client/src/navbar.ts delete mode 100644 packages/client/src/pages/settings/menu.vue create mode 100644 packages/client/src/pages/settings/navbar.vue create mode 100644 packages/client/src/ui/_common_/navbar-for-mobile.vue create mode 100644 packages/client/src/ui/_common_/navbar.vue delete mode 100644 packages/client/src/ui/_common_/sidebar-for-mobile.vue delete mode 100644 packages/client/src/ui/_common_/sidebar.vue (limited to 'packages/client/src') diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 0e278bead6..fd8aca868b 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -887,6 +887,7 @@ beta: "ベータ" enableAutoSensitive: "自動NSFW判定" enableAutoSensitiveDescription: "利用可能な場合は、機械学習を利用して自動でメディアにNSFWフラグを設定します。この機能をオフにしても、インスタンスによっては自動で設定されることがあります。" activeEmailValidationDescription: "ユーザーのメールアドレスのバリデーションを、捨てアドかどうかや実際に通信可能かどうかなどを判定しより積極的に行います。オフにすると単に文字列として正しいかどうかのみチェックされます。" +navbar: "ナビゲーションバー" _sensitiveMediaDetection: description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。" diff --git a/packages/client/src/components/launch-pad.vue b/packages/client/src/components/launch-pad.vue index a6025f8b27..4693df2916 100644 --- a/packages/client/src/components/launch-pad.vue +++ b/packages/client/src/components/launch-pad.vue @@ -36,7 +36,7 @@ diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue new file mode 100644 index 0000000000..4fb3980142 --- /dev/null +++ b/packages/client/src/ui/_common_/navbar.vue @@ -0,0 +1,303 @@ + + + + + diff --git a/packages/client/src/ui/_common_/sidebar-for-mobile.vue b/packages/client/src/ui/_common_/sidebar-for-mobile.vue deleted file mode 100644 index e789ae5e06..0000000000 --- a/packages/client/src/ui/_common_/sidebar-for-mobile.vue +++ /dev/null @@ -1,209 +0,0 @@ - - - - - diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/sidebar.vue deleted file mode 100644 index f082af9aa8..0000000000 --- a/packages/client/src/ui/_common_/sidebar.vue +++ /dev/null @@ -1,303 +0,0 @@ - - - - - diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue index 57008aeaed..131767c0e3 100644 --- a/packages/client/src/ui/classic.header.vue +++ b/packages/client/src/ui/classic.header.vue @@ -7,9 +7,9 @@
@@ -43,7 +43,7 @@ import { defineAsyncComponent, defineComponent } from 'vue'; import { host } from '@/config'; import { search } from '@/scripts/search'; import * as os from '@/os'; -import { menuDef } from '@/menu'; +import { navbarItemDef } from '@/navbar'; import { openAccountMenu } from '@/account'; import MkButton from '@/components/ui/button.vue'; @@ -57,7 +57,7 @@ export default defineComponent({ host: host, accounts: [], connection: null, - menuDef: menuDef, + navbarItemDef: navbarItemDef, settingsWindowed: false, }; }, @@ -68,9 +68,9 @@ export default defineComponent({ }, otherNavItemIndicated(): boolean { - for (const def in this.menuDef) { + for (const def in this.navbarItemDef) { if (this.menu.includes(def)) continue; - if (this.menuDef[def].indicated) return true; + if (this.navbarItemDef[def].indicated) return true; } return false; }, @@ -113,7 +113,7 @@ export default defineComponent({ withExtraOperation: true, }, ev); }, - } + }, }); diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue index 6c0ce023e4..172401f420 100644 --- a/packages/client/src/ui/classic.sidebar.vue +++ b/packages/client/src/ui/classic.sidebar.vue @@ -14,9 +14,9 @@
@@ -45,7 +45,7 @@ import { defineAsyncComponent, defineComponent } from 'vue'; import { host } from '@/config'; import { search } from '@/scripts/search'; import * as os from '@/os'; -import { menuDef } from '@/menu'; +import { navbarItemDef } from '@/navbar'; import { openAccountMenu } from '@/account'; import MkButton from '@/components/ui/button.vue'; import { StickySidebar } from '@/scripts/sticky-sidebar'; @@ -62,7 +62,7 @@ export default defineComponent({ host: host, accounts: [], connection: null, - menuDef: menuDef, + navbarItemDef: navbarItemDef, iconOnly: false, settingsWindowed: false, }; @@ -74,9 +74,9 @@ export default defineComponent({ }, otherNavItemIndicated(): boolean { - for (const def in this.menuDef) { + for (const def in this.navbarItemDef) { if (this.menu.includes(def)) continue; - if (this.menuDef[def].indicated) return true; + if (this.navbarItemDef[def].indicated) return true; } return false; }, @@ -131,7 +131,7 @@ export default defineComponent({ withExtraOperation: true, }, ev); }, - } + }, }); diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue index 70db7ed12b..c42407f5b0 100644 --- a/packages/client/src/ui/classic.vue +++ b/packages/client/src/ui/classic.vue @@ -47,7 +47,6 @@ import XCommon from './_common_/common.vue'; import { instanceName } from '@/config'; import { StickySidebar } from '@/scripts/sticky-sidebar'; import * as os from '@/os'; -import { menuDef } from '@/menu'; import { mainRouter } from '@/router'; import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata'; import { defaultStore } from '@/store'; diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue index 19a99a95aa..f330c99814 100644 --- a/packages/client/src/ui/deck.vue +++ b/packages/client/src/ui/deck.vue @@ -69,12 +69,12 @@ import { v4 as uuid } from 'uuid'; import XCommon from './_common_/common.vue'; import { deckStore, addColumn as addColumnToStore, loadDeck } from './deck/deck-store'; import DeckColumnCore from '@/ui/deck/column-core.vue'; -import XSidebar from '@/ui/_common_/sidebar.vue'; -import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue'; +import XSidebar from '@/ui/_common_/navbar.vue'; +import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; import MkButton from '@/components/ui/button.vue'; import { getScrollContainer } from '@/scripts/scroll'; import * as os from '@/os'; -import { menuDef } from '@/menu'; +import { navbarItemDef } from '@/navbar'; import { $i } from '@/account'; import { i18n } from '@/i18n'; import { mainRouter } from '@/router'; @@ -105,8 +105,8 @@ const columns = deckStore.reactiveState.columns; const layout = deckStore.reactiveState.layout; const menuIndicated = computed(() => { if ($i == null) return false; - for (const def in menuDef) { - if (menuDef[def].indicated) return true; + for (const def in navbarItemDef) { + if (navbarItemDef[def].indicated) return true; } return false; }); diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index 2edfb3f12d..fe4fc425cd 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -61,17 +61,17 @@ import { defineAsyncComponent, provide, onMounted, computed, ref, watch, Compute import XCommon from './_common_/common.vue'; import { instanceName } from '@/config'; import { StickySidebar } from '@/scripts/sticky-sidebar'; -import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue'; +import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; import * as os from '@/os'; import { defaultStore } from '@/store'; -import { menuDef } from '@/menu'; +import { navbarItemDef } from '@/navbar'; import { i18n } from '@/i18n'; import { $i } from '@/account'; import { Router } from '@/nirax'; import { mainRouter } from '@/router'; import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata'; const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue')); -const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/sidebar.vue')); +const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue')); const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue')); const DESKTOP_THRESHOLD = 1100; @@ -97,9 +97,9 @@ provideMetadataReceiver((info) => { }); const menuIndicated = computed(() => { - for (const def in menuDef) { + for (const def in navbarItemDef) { if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから - if (menuDef[def].indicated) return true; + if (navbarItemDef[def].indicated) return true; } return false; }); -- cgit v1.2.3-freya From f3b0c6f1e7a37973f2d43a8ff56fbe19adc28ac4 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 14 Jul 2022 17:52:59 +0900 Subject: chore(client): tweak ui --- packages/client/src/components/ui/tooltip.vue | 2 +- packages/client/src/ui/_common_/navbar.vue | 30 ++++++++++++++++++--------- 2 files changed, 21 insertions(+), 11 deletions(-) (limited to 'packages/client/src') diff --git a/packages/client/src/components/ui/tooltip.vue b/packages/client/src/components/ui/tooltip.vue index 152c939a1a..f81bf2fc5b 100644 --- a/packages/client/src/components/ui/tooltip.vue +++ b/packages/client/src/components/ui/tooltip.vue @@ -116,7 +116,7 @@ const setPosition = () => { let top: number; if (props.targetElement) { - left = (rect.left + window.pageXOffset) + props.innerMargin; + left = (rect.left + props.targetElement.offsetWidth + window.pageXOffset) + props.innerMargin; top = rect.top + window.pageYOffset + (props.targetElement.offsetHeight / 2); } else { left = props.x + props.innerMargin; diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue index 4fb3980142..924dda25d7 100644 --- a/packages/client/src/ui/_common_/navbar.vue +++ b/packages/client/src/ui/_common_/navbar.vue @@ -4,29 +4,38 @@ - - {{ $ts.timeline }} + + {{ i18n.ts.timeline }}
- - {{ $ts.controlPanel }} + + {{ i18n.ts.controlPanel }} - - {{ $ts.settings }} + + {{ i18n.ts.settings }} @@ -38,6 +47,7 @@ import * as os from '@/os'; import { navbarItemDef } from '@/navbar'; import { $i, openAccountMenu as openAccountMenu_ } from '@/account'; import { defaultStore } from '@/store'; +import { i18n } from '@/i18n'; const iconOnly = ref(false); -- cgit v1.2.3-freya From 0ddabdbf68767566fd8f4fdeab1de82535dc44cb Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 14 Jul 2022 21:06:07 +0900 Subject: fix(client): revert es2017 --- packages/client/src/init.ts | 636 ++++++++++++++++++++--------------------- packages/client/vite.config.ts | 1 - 2 files changed, 317 insertions(+), 320 deletions(-) (limited to 'packages/client/src') diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts index 94e7f9f6b3..98f69c701f 100644 --- a/packages/client/src/init.ts +++ b/packages/client/src/init.ts @@ -39,403 +39,401 @@ import { reactionPicker } from '@/scripts/reaction-picker'; import { getUrlWithoutLoginId } from '@/scripts/login-id'; import { getAccountFromId } from '@/scripts/get-account-from-id'; -(async () => { - console.info(`Misskey v${version}`); +console.info(`Misskey v${version}`); - if (_DEV_) { - console.warn('Development mode!!!'); - - console.info(`vue ${vueVersion}`); - - (window as any).$i = $i; - (window as any).$store = defaultStore; - - window.addEventListener('error', event => { - console.error(event); - /* - alert({ - type: 'error', - title: 'DEV: Unhandled error', - text: event.message - }); - */ +if (_DEV_) { + console.warn('Development mode!!!'); + + console.info(`vue ${vueVersion}`); + + (window as any).$i = $i; + (window as any).$store = defaultStore; + + window.addEventListener('error', event => { + console.error(event); + /* + alert({ + type: 'error', + title: 'DEV: Unhandled error', + text: event.message }); + */ + }); - window.addEventListener('unhandledrejection', event => { - console.error(event); - /* - alert({ - type: 'error', - title: 'DEV: Unhandled promise rejection', - text: event.reason - }); - */ + window.addEventListener('unhandledrejection', event => { + console.error(event); + /* + alert({ + type: 'error', + title: 'DEV: Unhandled promise rejection', + text: event.reason }); - } + */ + }); +} - // タッチデバイスでCSSの:hoverを機能させる - document.addEventListener('touchend', () => {}, { passive: true }); +// タッチデバイスでCSSの:hoverを機能させる +document.addEventListener('touchend', () => {}, { passive: true }); - // 一斉リロード - reloadChannel.addEventListener('message', path => { - if (path !== null) location.href = path; - else location.reload(); - }); +// 一斉リロード +reloadChannel.addEventListener('message', path => { + if (path !== null) location.href = path; + else location.reload(); +}); - //#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ - // TODO: いつの日にか消したい +//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ +// TODO: いつの日にか消したい +const vh = window.innerHeight * 0.01; +document.documentElement.style.setProperty('--vh', `${vh}px`); +window.addEventListener('resize', () => { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); - window.addEventListener('resize', () => { - const vh = window.innerHeight * 0.01; - document.documentElement.style.setProperty('--vh', `${vh}px`); - }); - //#endregion +}); +//#endregion - // If mobile, insert the viewport meta tag - if (['smartphone', 'tablet'].includes(deviceKind)) { - const viewport = document.getElementsByName('viewport').item(0); - viewport.setAttribute('content', - `${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`); - } +// If mobile, insert the viewport meta tag +if (['smartphone', 'tablet'].includes(deviceKind)) { + const viewport = document.getElementsByName('viewport').item(0); + viewport.setAttribute('content', + `${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`); +} - //#region Set lang attr - const html = document.documentElement; - html.setAttribute('lang', lang); - //#endregion +//#region Set lang attr +const html = document.documentElement; +html.setAttribute('lang', lang); +//#endregion - //#region loginId - const params = new URLSearchParams(location.search); - const loginId = params.get('loginId'); +//#region loginId +const params = new URLSearchParams(location.search); +const loginId = params.get('loginId'); - if (loginId) { - const target = getUrlWithoutLoginId(location.href); +if (loginId) { + const target = getUrlWithoutLoginId(location.href); - if (!$i || $i.id !== loginId) { - const account = await getAccountFromId(loginId); - if (account) { - await login(account.token, target); - } + if (!$i || $i.id !== loginId) { + const account = await getAccountFromId(loginId); + if (account) { + await login(account.token, target); } + } + + history.replaceState({ misskey: 'loginId' }, '', target); +} + +//#endregion + +//#region Fetch user +if ($i && $i.token) { + if (_DEV_) { + console.log('account cache found. refreshing...'); + } - history.replaceState({ misskey: 'loginId' }, '', target); + refreshAccount(); +} else { + if (_DEV_) { + console.log('no account cache found.'); } - //#endregion + // 連携ログインの場合用にCookieを参照する + const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1]; - //#region Fetch user - if ($i && $i.token) { + if (i != null && i !== 'null') { if (_DEV_) { - console.log('account cache found. refreshing...'); + console.log('signing...'); } - refreshAccount(); + try { + document.body.innerHTML = '
Please wait...
'; + await login(i); + } catch (err) { + // Render the error screen + // TODO: ちゃんとしたコンポーネントをレンダリングする(v10とかのトラブルシューティングゲーム付きのやつみたいな) + document.body.innerHTML = '
Oops!
'; + } } else { if (_DEV_) { - console.log('no account cache found.'); - } - - // 連携ログインの場合用にCookieを参照する - const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1]; - - if (i != null && i !== 'null') { - if (_DEV_) { - console.log('signing...'); - } - - try { - document.body.innerHTML = '
Please wait...
'; - await login(i); - } catch (err) { - // Render the error screen - // TODO: ちゃんとしたコンポーネントをレンダリングする(v10とかのトラブルシューティングゲーム付きのやつみたいな) - document.body.innerHTML = '
Oops!
'; - } - } else { - if (_DEV_) { - console.log('not signed in'); - } + console.log('not signed in'); } } - //#endregion - - const fetchInstanceMetaPromise = fetchInstance(); - - fetchInstanceMetaPromise.then(() => { - localStorage.setItem('v', instance.version); - - // Init service worker - initializeSw(); - }); +} +//#endregion - const app = createApp( - window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) : - !$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) : - ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) : - ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) : - defineAsyncComponent(() => import('@/ui/universal.vue')), - ); +const fetchInstanceMetaPromise = fetchInstance(); - if (_DEV_) { - app.config.performance = true; - } +fetchInstanceMetaPromise.then(() => { + localStorage.setItem('v', instance.version); - app.config.globalProperties = { - $i, - $store: defaultStore, - $instance: instance, - $t: i18n.t, - $ts: i18n.ts, - }; - - widgets(app); - directives(app); - components(app); - - const splash = document.getElementById('splash'); - // 念のためnullチェック(HTMLが古い場合があるため(そのうち消す)) - if (splash) splash.addEventListener('transitionend', () => { - splash.remove(); - }); + // Init service worker + initializeSw(); +}); - // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 - // なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する - const rootEl = (() => { - const MISSKEY_MOUNT_DIV_ID = 'misskey_app'; +const app = createApp( + window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) : + !$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) : + ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) : + ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) : + defineAsyncComponent(() => import('@/ui/universal.vue')), +); - const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID); +if (_DEV_) { + app.config.performance = true; +} - if (currentEl) { - console.warn('multiple import detected'); - return currentEl; - } +app.config.globalProperties = { + $i, + $store: defaultStore, + $instance: instance, + $t: i18n.t, + $ts: i18n.ts, +}; + +widgets(app); +directives(app); +components(app); + +const splash = document.getElementById('splash'); +// 念のためnullチェック(HTMLが古い場合があるため(そのうち消す)) +if (splash) splash.addEventListener('transitionend', () => { + splash.remove(); +}); + +// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 +// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する +const rootEl = (() => { + const MISSKEY_MOUNT_DIV_ID = 'misskey_app'; + + const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID); + + if (currentEl) { + console.warn('multiple import detected'); + return currentEl; + } - const rootEl = document.createElement('div'); - rootEl.id = MISSKEY_MOUNT_DIV_ID; - document.body.appendChild(rootEl); - return rootEl; - })(); + const rootEl = document.createElement('div'); + rootEl.id = MISSKEY_MOUNT_DIV_ID; + document.body.appendChild(rootEl); + return rootEl; +})(); - app.mount(rootEl); +app.mount(rootEl); - // boot.jsのやつを解除 - window.onerror = null; - window.onunhandledrejection = null; +// boot.jsのやつを解除 +window.onerror = null; +window.onunhandledrejection = null; - reactionPicker.init(); +reactionPicker.init(); - if (splash) { - splash.style.opacity = '0'; - splash.style.pointerEvents = 'none'; - } +if (splash) { + splash.style.opacity = '0'; + splash.style.pointerEvents = 'none'; +} - // クライアントが更新されたか？ - const lastVersion = localStorage.getItem('lastVersion'); - if (lastVersion !== version) { - localStorage.setItem('lastVersion', version); +// クライアントが更新されたか？ +const lastVersion = localStorage.getItem('lastVersion'); +if (lastVersion !== version) { + localStorage.setItem('lastVersion', version); - // テーマリビルドするため - localStorage.removeItem('theme'); + // テーマリビルドするため + localStorage.removeItem('theme'); - try { // 変なバージョン文字列来るとcompareVersionsでエラーになるため - if (lastVersion != null && compareVersions(version, lastVersion) === 1) { - // ログインしてる場合だけ - if ($i) { - popup(defineAsyncComponent(() => import('@/components/updated.vue')), {}, {}, 'closed'); - } + try { // 変なバージョン文字列来るとcompareVersionsでエラーになるため + if (lastVersion != null && compareVersions(version, lastVersion) === 1) { + // ログインしてる場合だけ + if ($i) { + popup(defineAsyncComponent(() => import('@/components/updated.vue')), {}, {}, 'closed'); } - } catch (err) { } + } catch (err) { } +} - // NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため) - watch(defaultStore.reactiveState.darkMode, (darkMode) => { - applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme')); - }, { immediate: localStorage.theme == null }); - - const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme')); - const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme')); +// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため) +watch(defaultStore.reactiveState.darkMode, (darkMode) => { + applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme')); +}, { immediate: localStorage.theme == null }); - watch(darkTheme, (theme) => { - if (defaultStore.state.darkMode) { - applyTheme(theme); - } - }); +const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme')); +const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme')); - watch(lightTheme, (theme) => { - if (!defaultStore.state.darkMode) { - applyTheme(theme); - } - }); +watch(darkTheme, (theme) => { + if (defaultStore.state.darkMode) { + applyTheme(theme); + } +}); - //#region Sync dark mode - if (ColdDeviceStorage.get('syncDeviceDarkMode')) { - defaultStore.set('darkMode', isDeviceDarkmode()); +watch(lightTheme, (theme) => { + if (!defaultStore.state.darkMode) { + applyTheme(theme); } +}); - window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => { - if (ColdDeviceStorage.get('syncDeviceDarkMode')) { - defaultStore.set('darkMode', mql.matches); - } - }); - //#endregion +//#region Sync dark mode +if (ColdDeviceStorage.get('syncDeviceDarkMode')) { + defaultStore.set('darkMode', isDeviceDarkmode()); +} - fetchInstanceMetaPromise.then(() => { - if (defaultStore.state.themeInitial) { - if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme)); - if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON5.parse(instance.defaultDarkTheme)); - defaultStore.set('themeInitial', false); - } - }); +window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => { + if (ColdDeviceStorage.get('syncDeviceDarkMode')) { + defaultStore.set('darkMode', mql.matches); + } +}); +//#endregion - watch(defaultStore.reactiveState.useBlurEffectForModal, v => { - document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none'); - }, { immediate: true }); +fetchInstanceMetaPromise.then(() => { + if (defaultStore.state.themeInitial) { + if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme)); + if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON5.parse(instance.defaultDarkTheme)); + defaultStore.set('themeInitial', false); + } +}); - watch(defaultStore.reactiveState.useBlurEffect, v => { - if (v) { - document.documentElement.style.removeProperty('--blur'); - } else { - document.documentElement.style.setProperty('--blur', 'none'); - } - }, { immediate: true }); +watch(defaultStore.reactiveState.useBlurEffectForModal, v => { + document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none'); +}, { immediate: true }); - let reloadDialogShowing = false; - stream.on('_disconnected_', async () => { - if (defaultStore.state.serverDisconnectedBehavior === 'reload') { +watch(defaultStore.reactiveState.useBlurEffect, v => { + if (v) { + document.documentElement.style.removeProperty('--blur'); + } else { + document.documentElement.style.setProperty('--blur', 'none'); + } +}, { immediate: true }); + +let reloadDialogShowing = false; +stream.on('_disconnected_', async () => { + if (defaultStore.state.serverDisconnectedBehavior === 'reload') { + location.reload(); + } else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') { + if (reloadDialogShowing) return; + reloadDialogShowing = true; + const { canceled } = await confirm({ + type: 'warning', + title: i18n.ts.disconnectedFromServer, + text: i18n.ts.reloadConfirm, + }); + reloadDialogShowing = false; + if (!canceled) { location.reload(); - } else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') { - if (reloadDialogShowing) return; - reloadDialogShowing = true; - const { canceled } = await confirm({ - type: 'warning', - title: i18n.ts.disconnectedFromServer, - text: i18n.ts.reloadConfirm, - }); - reloadDialogShowing = false; - if (!canceled) { - location.reload(); - } } - }); + } +}); + +stream.on('emojiAdded', emojiData => { + // TODO + //store.commit('instance/set', ); +}); - stream.on('emojiAdded', emojiData => { - // TODO - //store.commit('instance/set', ); +for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) { + import('./plugin').then(({ install }) => { + install(plugin); }); +} - for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) { - import('./plugin').then(({ install }) => { - install(plugin); +const hotkeys = { + 'd': (): void => { + defaultStore.set('darkMode', !defaultStore.state.darkMode); + }, + 's': search, +}; + +if ($i) { + // only add post shortcuts if logged in + hotkeys['p|n'] = post; + + if ($i.isDeleted) { + alert({ + type: 'warning', + text: i18n.ts.accountDeletionInProgress, }); } - const hotkeys = { - 'd': (): void => { - defaultStore.set('darkMode', !defaultStore.state.darkMode); - }, - 's': search, - }; - - if ($i) { - // only add post shortcuts if logged in - hotkeys['p|n'] = post; - - if ($i.isDeleted) { - alert({ - type: 'warning', - text: i18n.ts.accountDeletionInProgress, - }); + const lastUsed = localStorage.getItem('lastUsed'); + if (lastUsed) { + const lastUsedDate = parseInt(lastUsed, 10); + // 二時間以上前なら + if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) { + toast(i18n.t('welcomeBackWithName', { + name: $i.name || $i.username, + })); } + } + localStorage.setItem('lastUsed', Date.now().toString()); - const lastUsed = localStorage.getItem('lastUsed'); - if (lastUsed) { - const lastUsedDate = parseInt(lastUsed, 10); - // 二時間以上前なら - if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) { - toast(i18n.t('welcomeBackWithName', { - name: $i.name || $i.username, - })); - } - } - localStorage.setItem('lastUsed', Date.now().toString()); - - if ('Notification' in window) { - // 許可を得ていなかったらリクエスト - if (Notification.permission === 'default') { - Notification.requestPermission(); - } + if ('Notification' in window) { + // 許可を得ていなかったらリクエスト + if (Notification.permission === 'default') { + Notification.requestPermission(); } + } - const main = markRaw(stream.useChannel('main', null, 'System')); + const main = markRaw(stream.useChannel('main', null, 'System')); - // 自分の情報が更新されたとき - main.on('meUpdated', i => { - updateAccount(i); - }); + // 自分の情報が更新されたとき + main.on('meUpdated', i => { + updateAccount(i); + }); - main.on('readAllNotifications', () => { - updateAccount({ hasUnreadNotification: false }); - }); + main.on('readAllNotifications', () => { + updateAccount({ hasUnreadNotification: false }); + }); - main.on('unreadNotification', () => { - updateAccount({ hasUnreadNotification: true }); - }); + main.on('unreadNotification', () => { + updateAccount({ hasUnreadNotification: true }); + }); - main.on('unreadMention', () => { - updateAccount({ hasUnreadMentions: true }); - }); + main.on('unreadMention', () => { + updateAccount({ hasUnreadMentions: true }); + }); - main.on('readAllUnreadMentions', () => { - updateAccount({ hasUnreadMentions: false }); - }); + main.on('readAllUnreadMentions', () => { + updateAccount({ hasUnreadMentions: false }); + }); - main.on('unreadSpecifiedNote', () => { - updateAccount({ hasUnreadSpecifiedNotes: true }); - }); + main.on('unreadSpecifiedNote', () => { + updateAccount({ hasUnreadSpecifiedNotes: true }); + }); - main.on('readAllUnreadSpecifiedNotes', () => { - updateAccount({ hasUnreadSpecifiedNotes: false }); - }); + main.on('readAllUnreadSpecifiedNotes', () => { + updateAccount({ hasUnreadSpecifiedNotes: false }); + }); - main.on('readAllMessagingMessages', () => { - updateAccount({ hasUnreadMessagingMessage: false }); - }); + main.on('readAllMessagingMessages', () => { + updateAccount({ hasUnreadMessagingMessage: false }); + }); - main.on('unreadMessagingMessage', () => { - updateAccount({ hasUnreadMessagingMessage: true }); - sound.play('chatBg'); - }); + main.on('unreadMessagingMessage', () => { + updateAccount({ hasUnreadMessagingMessage: true }); + sound.play('chatBg'); + }); - main.on('readAllAntennas', () => { - updateAccount({ hasUnreadAntenna: false }); - }); + main.on('readAllAntennas', () => { + updateAccount({ hasUnreadAntenna: false }); + }); - main.on('unreadAntenna', () => { - updateAccount({ hasUnreadAntenna: true }); - sound.play('antenna'); - }); + main.on('unreadAntenna', () => { + updateAccount({ hasUnreadAntenna: true }); + sound.play('antenna'); + }); - main.on('readAllAnnouncements', () => { - updateAccount({ hasUnreadAnnouncement: false }); - }); + main.on('readAllAnnouncements', () => { + updateAccount({ hasUnreadAnnouncement: false }); + }); - main.on('readAllChannels', () => { - updateAccount({ hasUnreadChannel: false }); - }); + main.on('readAllChannels', () => { + updateAccount({ hasUnreadChannel: false }); + }); - main.on('unreadChannel', () => { - updateAccount({ hasUnreadChannel: true }); - sound.play('channel'); - }); + main.on('unreadChannel', () => { + updateAccount({ hasUnreadChannel: true }); + sound.play('channel'); + }); - // トークンが再生成されたとき - // このままではMisskeyが利用できないので強制的にサインアウトさせる - main.on('myTokenRegenerated', () => { - signout(); - }); - } + // トークンが再生成されたとき + // このままではMisskeyが利用できないので強制的にサインアウトさせる + main.on('myTokenRegenerated', () => { + signout(); + }); +} - // shortcut - document.addEventListener('keydown', makeHotkey(hotkeys)); -})(); +// shortcut +document.addEventListener('keydown', makeHotkey(hotkeys)); diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts index f23c621131..5800cf5021 100644 --- a/packages/client/vite.config.ts +++ b/packages/client/vite.config.ts @@ -49,7 +49,6 @@ export default defineConfig(({ command, mode }) => { 'chrome100', 'firefox100', 'safari15', - 'es2017', // TODO: そのうち消す ], manifest: 'manifest.json', rollupOptions: { -- cgit v1.2.3-freya From fa5140310f05c00d641e794329073eb7d44f6825 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 14 Jul 2022 21:32:21 +0900 Subject: debug --- packages/client/src/init.ts | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) (limited to 'packages/client/src') diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts index 98f69c701f..243d287543 100644 --- a/packages/client/src/init.ts +++ b/packages/client/src/init.ts @@ -74,12 +74,14 @@ if (_DEV_) { // タッチデバイスでCSSの:hoverを機能させる document.addEventListener('touchend', () => {}, { passive: true }); +console.info('1'); // 一斉リロード reloadChannel.addEventListener('message', path => { if (path !== null) location.href = path; else location.reload(); }); +console.info('2'); //#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ // TODO: いつの日にか消したい @@ -90,6 +92,7 @@ window.addEventListener('resize', () => { document.documentElement.style.setProperty('--vh', `${vh}px`); }); //#endregion +console.info('3'); // If mobile, insert the viewport meta tag if (['smartphone', 'tablet'].includes(deviceKind)) { @@ -97,15 +100,18 @@ if (['smartphone', 'tablet'].includes(deviceKind)) { viewport.setAttribute('content', `${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`); } +console.info('4'); //#region Set lang attr const html = document.documentElement; html.setAttribute('lang', lang); //#endregion +console.info('5'); //#region loginId const params = new URLSearchParams(location.search); const loginId = params.get('loginId'); +console.info('6', loginId); if (loginId) { const target = getUrlWithoutLoginId(location.href); @@ -119,6 +125,7 @@ if (loginId) { history.replaceState({ misskey: 'loginId' }, '', target); } +console.info('7'); //#endregion @@ -127,12 +134,14 @@ if ($i && $i.token) { if (_DEV_) { console.log('account cache found. refreshing...'); } + console.info('8'); refreshAccount(); } else { if (_DEV_) { console.log('no account cache found.'); } + console.info('9'); // 連携ログインの場合用にCookieを参照する const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1]; @@ -166,6 +175,7 @@ fetchInstanceMetaPromise.then(() => { // Init service worker initializeSw(); }); +console.info('10'); const app = createApp( window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) : @@ -175,6 +185,8 @@ const app = createApp( defineAsyncComponent(() => import('@/ui/universal.vue')), ); +console.info('11'); + if (_DEV_) { app.config.performance = true; } @@ -191,12 +203,16 @@ widgets(app); directives(app); components(app); +console.info('12'); + const splash = document.getElementById('splash'); // 念のためnullチェック(HTMLが古い場合があるため(そのうち消す)) if (splash) splash.addEventListener('transitionend', () => { splash.remove(); }); +console.info('13'); + // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 // なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する const rootEl = (() => { @@ -215,19 +231,27 @@ const rootEl = (() => { return rootEl; })(); +console.info('14'); + app.mount(rootEl); +console.info('15'); + // boot.jsのやつを解除 window.onerror = null; window.onunhandledrejection = null; reactionPicker.init(); +console.info('16'); + if (splash) { splash.style.opacity = '0'; splash.style.pointerEvents = 'none'; } +console.info('17'); + // クライアントが更新されたか？ const lastVersion = localStorage.getItem('lastVersion'); if (lastVersion !== version) { @@ -247,6 +271,8 @@ if (lastVersion !== version) { } } +console.info('18'); + // NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため) watch(defaultStore.reactiveState.darkMode, (darkMode) => { applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme')); @@ -267,6 +293,8 @@ watch(lightTheme, (theme) => { } }); +console.info('19'); + //#region Sync dark mode if (ColdDeviceStorage.get('syncDeviceDarkMode')) { defaultStore.set('darkMode', isDeviceDarkmode()); @@ -279,6 +307,8 @@ window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => { }); //#endregion +console.info('20'); + fetchInstanceMetaPromise.then(() => { if (defaultStore.state.themeInitial) { if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme)); -- cgit v1.2.3-freya From 800bbc4328e27944e785d2ad50da0293df0ee114 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 14 Jul 2022 21:40:30 +0900 Subject: debug --- packages/client/src/init.ts | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'packages/client/src') diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts index 243d287543..c826b6a33b 100644 --- a/packages/client/src/init.ts +++ b/packages/client/src/init.ts @@ -216,18 +216,26 @@ console.info('13'); // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 // なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する const rootEl = (() => { + console.info('13-1'); const MISSKEY_MOUNT_DIV_ID = 'misskey_app'; + console.info('13-2'); const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID); + console.info('13-3'); if (currentEl) { + console.info('13-4'); console.warn('multiple import detected'); return currentEl; } + console.info('13-5'); const rootEl = document.createElement('div'); + console.info('13-6'); rootEl.id = MISSKEY_MOUNT_DIV_ID; + console.info('13-7'); document.body.appendChild(rootEl); + console.info('13-8'); return rootEl; })(); -- cgit v1.2.3-freya From 1ba559a98bfb389b94e75441ef835fe93d097029 Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 14 Jul 2022 22:13:00 +0900 Subject: Revert "debug" This reverts commit 800bbc4328e27944e785d2ad50da0293df0ee114. --- packages/client/src/init.ts | 8 -------- 1 file changed, 8 deletions(-) (limited to 'packages/client/src') diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts index c826b6a33b..243d287543 100644 --- a/packages/client/src/init.ts +++ b/packages/client/src/init.ts @@ -216,26 +216,18 @@ console.info('13'); // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 // なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する const rootEl = (() => { - console.info('13-1'); const MISSKEY_MOUNT_DIV_ID = 'misskey_app'; - console.info('13-2'); const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID); - console.info('13-3'); if (currentEl) { - console.info('13-4'); console.warn('multiple import detected'); return currentEl; } - console.info('13-5'); const rootEl = document.createElement('div'); - console.info('13-6'); rootEl.id = MISSKEY_MOUNT_DIV_ID; - console.info('13-7'); document.body.appendChild(rootEl); - console.info('13-8'); return rootEl; })(); -- cgit v1.2.3-freya From e3bad795e057333019f937abd64270dd7f5bac4e Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 14 Jul 2022 22:13:04 +0900 Subject: Revert "debug" This reverts commit fa5140310f05c00d641e794329073eb7d44f6825. --- packages/client/src/init.ts | 30 ------------------------------ 1 file changed, 30 deletions(-) (limited to 'packages/client/src') diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts index 243d287543..98f69c701f 100644 --- a/packages/client/src/init.ts +++ b/packages/client/src/init.ts @@ -74,14 +74,12 @@ if (_DEV_) { // タッチデバイスでCSSの:hoverを機能させる document.addEventListener('touchend', () => {}, { passive: true }); -console.info('1'); // 一斉リロード reloadChannel.addEventListener('message', path => { if (path !== null) location.href = path; else location.reload(); }); -console.info('2'); //#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ // TODO: いつの日にか消したい @@ -92,7 +90,6 @@ window.addEventListener('resize', () => { document.documentElement.style.setProperty('--vh', `${vh}px`); }); //#endregion -console.info('3'); // If mobile, insert the viewport meta tag if (['smartphone', 'tablet'].includes(deviceKind)) { @@ -100,18 +97,15 @@ if (['smartphone', 'tablet'].includes(deviceKind)) { viewport.setAttribute('content', `${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`); } -console.info('4'); //#region Set lang attr const html = document.documentElement; html.setAttribute('lang', lang); //#endregion -console.info('5'); //#region loginId const params = new URLSearchParams(location.search); const loginId = params.get('loginId'); -console.info('6', loginId); if (loginId) { const target = getUrlWithoutLoginId(location.href); @@ -125,7 +119,6 @@ if (loginId) { history.replaceState({ misskey: 'loginId' }, '', target); } -console.info('7'); //#endregion @@ -134,14 +127,12 @@ if ($i && $i.token) { if (_DEV_) { console.log('account cache found. refreshing...'); } - console.info('8'); refreshAccount(); } else { if (_DEV_) { console.log('no account cache found.'); } - console.info('9'); // 連携ログインの場合用にCookieを参照する const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1]; @@ -175,7 +166,6 @@ fetchInstanceMetaPromise.then(() => { // Init service worker initializeSw(); }); -console.info('10'); const app = createApp( window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) : @@ -185,8 +175,6 @@ const app = createApp( defineAsyncComponent(() => import('@/ui/universal.vue')), ); -console.info('11'); - if (_DEV_) { app.config.performance = true; } @@ -203,16 +191,12 @@ widgets(app); directives(app); components(app); -console.info('12'); - const splash = document.getElementById('splash'); // 念のためnullチェック(HTMLが古い場合があるため(そのうち消す)) if (splash) splash.addEventListener('transitionend', () => { splash.remove(); }); -console.info('13'); - // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 // なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する const rootEl = (() => { @@ -231,27 +215,19 @@ const rootEl = (() => { return rootEl; })(); -console.info('14'); - app.mount(rootEl); -console.info('15'); - // boot.jsのやつを解除 window.onerror = null; window.onunhandledrejection = null; reactionPicker.init(); -console.info('16'); - if (splash) { splash.style.opacity = '0'; splash.style.pointerEvents = 'none'; } -console.info('17'); - // クライアントが更新されたか？ const lastVersion = localStorage.getItem('lastVersion'); if (lastVersion !== version) { @@ -271,8 +247,6 @@ if (lastVersion !== version) { } } -console.info('18'); - // NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため) watch(defaultStore.reactiveState.darkMode, (darkMode) => { applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme')); @@ -293,8 +267,6 @@ watch(lightTheme, (theme) => { } }); -console.info('19'); - //#region Sync dark mode if (ColdDeviceStorage.get('syncDeviceDarkMode')) { defaultStore.set('darkMode', isDeviceDarkmode()); @@ -307,8 +279,6 @@ window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => { }); //#endregion -console.info('20'); - fetchInstanceMetaPromise.then(() => { if (defaultStore.state.themeInitial) { if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme)); -- cgit v1.2.3-freya From 17500fc9c9fad0f4b00d8ce070597fb86d0b50fa Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 14 Jul 2022 22:14:42 +0900 Subject: Revert "fix(client): revert es2017" This reverts commit 0ddabdbf68767566fd8f4fdeab1de82535dc44cb. --- packages/client/src/init.ts | 636 +++++++++++++++++++++-------------------- packages/client/vite.config.ts | 1 + 2 files changed, 320 insertions(+), 317 deletions(-) (limited to 'packages/client/src') diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts index 98f69c701f..94e7f9f6b3 100644 --- a/packages/client/src/init.ts +++ b/packages/client/src/init.ts @@ -39,401 +39,403 @@ import { reactionPicker } from '@/scripts/reaction-picker'; import { getUrlWithoutLoginId } from '@/scripts/login-id'; import { getAccountFromId } from '@/scripts/get-account-from-id'; -console.info(`Misskey v${version}`); +(async () => { + console.info(`Misskey v${version}`); -if (_DEV_) { - console.warn('Development mode!!!'); - - console.info(`vue ${vueVersion}`); - - (window as any).$i = $i; - (window as any).$store = defaultStore; - - window.addEventListener('error', event => { - console.error(event); - /* - alert({ - type: 'error', - title: 'DEV: Unhandled error', - text: event.message + if (_DEV_) { + console.warn('Development mode!!!'); + + console.info(`vue ${vueVersion}`); + + (window as any).$i = $i; + (window as any).$store = defaultStore; + + window.addEventListener('error', event => { + console.error(event); + /* + alert({ + type: 'error', + title: 'DEV: Unhandled error', + text: event.message + }); + */ }); - */ - }); - window.addEventListener('unhandledrejection', event => { - console.error(event); - /* - alert({ - type: 'error', - title: 'DEV: Unhandled promise rejection', - text: event.reason + window.addEventListener('unhandledrejection', event => { + console.error(event); + /* + alert({ + type: 'error', + title: 'DEV: Unhandled promise rejection', + text: event.reason + }); + */ }); - */ - }); -} + } -// タッチデバイスでCSSの:hoverを機能させる -document.addEventListener('touchend', () => {}, { passive: true }); + // タッチデバイスでCSSの:hoverを機能させる + document.addEventListener('touchend', () => {}, { passive: true }); -// 一斉リロード -reloadChannel.addEventListener('message', path => { - if (path !== null) location.href = path; - else location.reload(); -}); + // 一斉リロード + reloadChannel.addEventListener('message', path => { + if (path !== null) location.href = path; + else location.reload(); + }); -//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ -// TODO: いつの日にか消したい -const vh = window.innerHeight * 0.01; -document.documentElement.style.setProperty('--vh', `${vh}px`); -window.addEventListener('resize', () => { + //#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ + // TODO: いつの日にか消したい const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); -}); -//#endregion + window.addEventListener('resize', () => { + const vh = window.innerHeight * 0.01; + document.documentElement.style.setProperty('--vh', `${vh}px`); + }); + //#endregion -// If mobile, insert the viewport meta tag -if (['smartphone', 'tablet'].includes(deviceKind)) { - const viewport = document.getElementsByName('viewport').item(0); - viewport.setAttribute('content', - `${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`); -} + // If mobile, insert the viewport meta tag + if (['smartphone', 'tablet'].includes(deviceKind)) { + const viewport = document.getElementsByName('viewport').item(0); + viewport.setAttribute('content', + `${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`); + } -//#region Set lang attr -const html = document.documentElement; -html.setAttribute('lang', lang); -//#endregion + //#region Set lang attr + const html = document.documentElement; + html.setAttribute('lang', lang); + //#endregion -//#region loginId -const params = new URLSearchParams(location.search); -const loginId = params.get('loginId'); + //#region loginId + const params = new URLSearchParams(location.search); + const loginId = params.get('loginId'); -if (loginId) { - const target = getUrlWithoutLoginId(location.href); + if (loginId) { + const target = getUrlWithoutLoginId(location.href); - if (!$i || $i.id !== loginId) { - const account = await getAccountFromId(loginId); - if (account) { - await login(account.token, target); + if (!$i || $i.id !== loginId) { + const account = await getAccountFromId(loginId); + if (account) { + await login(account.token, target); + } } - } - - history.replaceState({ misskey: 'loginId' }, '', target); -} - -//#endregion - -//#region Fetch user -if ($i && $i.token) { - if (_DEV_) { - console.log('account cache found. refreshing...'); - } - refreshAccount(); -} else { - if (_DEV_) { - console.log('no account cache found.'); + history.replaceState({ misskey: 'loginId' }, '', target); } - // 連携ログインの場合用にCookieを参照する - const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1]; + //#endregion - if (i != null && i !== 'null') { + //#region Fetch user + if ($i && $i.token) { if (_DEV_) { - console.log('signing...'); + console.log('account cache found. refreshing...'); } - try { - document.body.innerHTML = '
Please wait...
'; - await login(i); - } catch (err) { - // Render the error screen - // TODO: ちゃんとしたコンポーネントをレンダリングする(v10とかのトラブルシューティングゲーム付きのやつみたいな) - document.body.innerHTML = '
Oops!
'; - } + refreshAccount(); } else { if (_DEV_) { - console.log('not signed in'); + console.log('no account cache found.'); } - } -} -//#endregion -const fetchInstanceMetaPromise = fetchInstance(); + // 連携ログインの場合用にCookieを参照する + const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1]; -fetchInstanceMetaPromise.then(() => { - localStorage.setItem('v', instance.version); + if (i != null && i !== 'null') { + if (_DEV_) { + console.log('signing...'); + } - // Init service worker - initializeSw(); -}); + try { + document.body.innerHTML = '
Please wait...
'; + await login(i); + } catch (err) { + // Render the error screen + // TODO: ちゃんとしたコンポーネントをレンダリングする(v10とかのトラブルシューティングゲーム付きのやつみたいな) + document.body.innerHTML = '
Oops!
'; + } + } else { + if (_DEV_) { + console.log('not signed in'); + } + } + } + //#endregion -const app = createApp( - window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) : - !$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) : - ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) : - ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) : - defineAsyncComponent(() => import('@/ui/universal.vue')), -); + const fetchInstanceMetaPromise = fetchInstance(); -if (_DEV_) { - app.config.performance = true; -} + fetchInstanceMetaPromise.then(() => { + localStorage.setItem('v', instance.version); + + // Init service worker + initializeSw(); + }); + + const app = createApp( + window.location.search === '?zen' ? defineAsyncComponent(() => import('@/ui/zen.vue')) : + !$i ? defineAsyncComponent(() => import('@/ui/visitor.vue')) : + ui === 'deck' ? defineAsyncComponent(() => import('@/ui/deck.vue')) : + ui === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) : + defineAsyncComponent(() => import('@/ui/universal.vue')), + ); -app.config.globalProperties = { - $i, - $store: defaultStore, - $instance: instance, - $t: i18n.t, - $ts: i18n.ts, -}; - -widgets(app); -directives(app); -components(app); - -const splash = document.getElementById('splash'); -// 念のためnullチェック(HTMLが古い場合があるため(そのうち消す)) -if (splash) splash.addEventListener('transitionend', () => { - splash.remove(); -}); - -// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 -// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する -const rootEl = (() => { - const MISSKEY_MOUNT_DIV_ID = 'misskey_app'; - - const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID); - - if (currentEl) { - console.warn('multiple import detected'); - return currentEl; + if (_DEV_) { + app.config.performance = true; } - const rootEl = document.createElement('div'); - rootEl.id = MISSKEY_MOUNT_DIV_ID; - document.body.appendChild(rootEl); - return rootEl; -})(); + app.config.globalProperties = { + $i, + $store: defaultStore, + $instance: instance, + $t: i18n.t, + $ts: i18n.ts, + }; + + widgets(app); + directives(app); + components(app); + + const splash = document.getElementById('splash'); + // 念のためnullチェック(HTMLが古い場合があるため(そのうち消す)) + if (splash) splash.addEventListener('transitionend', () => { + splash.remove(); + }); -app.mount(rootEl); + // https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210 + // なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する + const rootEl = (() => { + const MISSKEY_MOUNT_DIV_ID = 'misskey_app'; -// boot.jsのやつを解除 -window.onerror = null; -window.onunhandledrejection = null; + const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID); -reactionPicker.init(); + if (currentEl) { + console.warn('multiple import detected'); + return currentEl; + } -if (splash) { - splash.style.opacity = '0'; - splash.style.pointerEvents = 'none'; -} + const rootEl = document.createElement('div'); + rootEl.id = MISSKEY_MOUNT_DIV_ID; + document.body.appendChild(rootEl); + return rootEl; + })(); -// クライアントが更新されたか？ -const lastVersion = localStorage.getItem('lastVersion'); -if (lastVersion !== version) { - localStorage.setItem('lastVersion', version); + app.mount(rootEl); - // テーマリビルドするため - localStorage.removeItem('theme'); + // boot.jsのやつを解除 + window.onerror = null; + window.onunhandledrejection = null; - try { // 変なバージョン文字列来るとcompareVersionsでエラーになるため - if (lastVersion != null && compareVersions(version, lastVersion) === 1) { - // ログインしてる場合だけ - if ($i) { - popup(defineAsyncComponent(() => import('@/components/updated.vue')), {}, {}, 'closed'); - } - } - } catch (err) { + reactionPicker.init(); + + if (splash) { + splash.style.opacity = '0'; + splash.style.pointerEvents = 'none'; } -} -// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため) -watch(defaultStore.reactiveState.darkMode, (darkMode) => { - applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme')); -}, { immediate: localStorage.theme == null }); + // クライアントが更新されたか？ + const lastVersion = localStorage.getItem('lastVersion'); + if (lastVersion !== version) { + localStorage.setItem('lastVersion', version); -const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme')); -const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme')); + // テーマリビルドするため + localStorage.removeItem('theme'); -watch(darkTheme, (theme) => { - if (defaultStore.state.darkMode) { - applyTheme(theme); + try { // 変なバージョン文字列来るとcompareVersionsでエラーになるため + if (lastVersion != null && compareVersions(version, lastVersion) === 1) { + // ログインしてる場合だけ + if ($i) { + popup(defineAsyncComponent(() => import('@/components/updated.vue')), {}, {}, 'closed'); + } + } + } catch (err) { + } } -}); -watch(lightTheme, (theme) => { - if (!defaultStore.state.darkMode) { - applyTheme(theme); - } -}); + // NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため) + watch(defaultStore.reactiveState.darkMode, (darkMode) => { + applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme')); + }, { immediate: localStorage.theme == null }); -//#region Sync dark mode -if (ColdDeviceStorage.get('syncDeviceDarkMode')) { - defaultStore.set('darkMode', isDeviceDarkmode()); -} + const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme')); + const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme')); + + watch(darkTheme, (theme) => { + if (defaultStore.state.darkMode) { + applyTheme(theme); + } + }); + + watch(lightTheme, (theme) => { + if (!defaultStore.state.darkMode) { + applyTheme(theme); + } + }); -window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => { + //#region Sync dark mode if (ColdDeviceStorage.get('syncDeviceDarkMode')) { - defaultStore.set('darkMode', mql.matches); + defaultStore.set('darkMode', isDeviceDarkmode()); } -}); -//#endregion -fetchInstanceMetaPromise.then(() => { - if (defaultStore.state.themeInitial) { - if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme)); - if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON5.parse(instance.defaultDarkTheme)); - defaultStore.set('themeInitial', false); - } -}); + window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => { + if (ColdDeviceStorage.get('syncDeviceDarkMode')) { + defaultStore.set('darkMode', mql.matches); + } + }); + //#endregion -watch(defaultStore.reactiveState.useBlurEffectForModal, v => { - document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none'); -}, { immediate: true }); + fetchInstanceMetaPromise.then(() => { + if (defaultStore.state.themeInitial) { + if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme)); + if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON5.parse(instance.defaultDarkTheme)); + defaultStore.set('themeInitial', false); + } + }); -watch(defaultStore.reactiveState.useBlurEffect, v => { - if (v) { - document.documentElement.style.removeProperty('--blur'); - } else { - document.documentElement.style.setProperty('--blur', 'none'); - } -}, { immediate: true }); - -let reloadDialogShowing = false; -stream.on('_disconnected_', async () => { - if (defaultStore.state.serverDisconnectedBehavior === 'reload') { - location.reload(); - } else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') { - if (reloadDialogShowing) return; - reloadDialogShowing = true; - const { canceled } = await confirm({ - type: 'warning', - title: i18n.ts.disconnectedFromServer, - text: i18n.ts.reloadConfirm, - }); - reloadDialogShowing = false; - if (!canceled) { - location.reload(); + watch(defaultStore.reactiveState.useBlurEffectForModal, v => { + document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none'); + }, { immediate: true }); + + watch(defaultStore.reactiveState.useBlurEffect, v => { + if (v) { + document.documentElement.style.removeProperty('--blur'); + } else { + document.documentElement.style.setProperty('--blur', 'none'); } - } -}); + }, { immediate: true }); -stream.on('emojiAdded', emojiData => { - // TODO - //store.commit('instance/set', ); -}); + let reloadDialogShowing = false; + stream.on('_disconnected_', async () => { + if (defaultStore.state.serverDisconnectedBehavior === 'reload') { + location.reload(); + } else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') { + if (reloadDialogShowing) return; + reloadDialogShowing = true; + const { canceled } = await confirm({ + type: 'warning', + title: i18n.ts.disconnectedFromServer, + text: i18n.ts.reloadConfirm, + }); + reloadDialogShowing = false; + if (!canceled) { + location.reload(); + } + } + }); -for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) { - import('./plugin').then(({ install }) => { - install(plugin); + stream.on('emojiAdded', emojiData => { + // TODO + //store.commit('instance/set', ); }); -} -const hotkeys = { - 'd': (): void => { - defaultStore.set('darkMode', !defaultStore.state.darkMode); - }, - 's': search, -}; - -if ($i) { - // only add post shortcuts if logged in - hotkeys['p|n'] = post; - - if ($i.isDeleted) { - alert({ - type: 'warning', - text: i18n.ts.accountDeletionInProgress, + for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) { + import('./plugin').then(({ install }) => { + install(plugin); }); } - const lastUsed = localStorage.getItem('lastUsed'); - if (lastUsed) { - const lastUsedDate = parseInt(lastUsed, 10); - // 二時間以上前なら - if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) { - toast(i18n.t('welcomeBackWithName', { - name: $i.name || $i.username, - })); + const hotkeys = { + 'd': (): void => { + defaultStore.set('darkMode', !defaultStore.state.darkMode); + }, + 's': search, + }; + + if ($i) { + // only add post shortcuts if logged in + hotkeys['p|n'] = post; + + if ($i.isDeleted) { + alert({ + type: 'warning', + text: i18n.ts.accountDeletionInProgress, + }); } - } - localStorage.setItem('lastUsed', Date.now().toString()); - if ('Notification' in window) { - // 許可を得ていなかったらリクエスト - if (Notification.permission === 'default') { - Notification.requestPermission(); + const lastUsed = localStorage.getItem('lastUsed'); + if (lastUsed) { + const lastUsedDate = parseInt(lastUsed, 10); + // 二時間以上前なら + if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) { + toast(i18n.t('welcomeBackWithName', { + name: $i.name || $i.username, + })); + } } - } + localStorage.setItem('lastUsed', Date.now().toString()); - const main = markRaw(stream.useChannel('main', null, 'System')); + if ('Notification' in window) { + // 許可を得ていなかったらリクエスト + if (Notification.permission === 'default') { + Notification.requestPermission(); + } + } - // 自分の情報が更新されたとき - main.on('meUpdated', i => { - updateAccount(i); - }); + const main = markRaw(stream.useChannel('main', null, 'System')); - main.on('readAllNotifications', () => { - updateAccount({ hasUnreadNotification: false }); - }); + // 自分の情報が更新されたとき + main.on('meUpdated', i => { + updateAccount(i); + }); - main.on('unreadNotification', () => { - updateAccount({ hasUnreadNotification: true }); - }); + main.on('readAllNotifications', () => { + updateAccount({ hasUnreadNotification: false }); + }); - main.on('unreadMention', () => { - updateAccount({ hasUnreadMentions: true }); - }); + main.on('unreadNotification', () => { + updateAccount({ hasUnreadNotification: true }); + }); - main.on('readAllUnreadMentions', () => { - updateAccount({ hasUnreadMentions: false }); - }); + main.on('unreadMention', () => { + updateAccount({ hasUnreadMentions: true }); + }); - main.on('unreadSpecifiedNote', () => { - updateAccount({ hasUnreadSpecifiedNotes: true }); - }); + main.on('readAllUnreadMentions', () => { + updateAccount({ hasUnreadMentions: false }); + }); - main.on('readAllUnreadSpecifiedNotes', () => { - updateAccount({ hasUnreadSpecifiedNotes: false }); - }); + main.on('unreadSpecifiedNote', () => { + updateAccount({ hasUnreadSpecifiedNotes: true }); + }); - main.on('readAllMessagingMessages', () => { - updateAccount({ hasUnreadMessagingMessage: false }); - }); + main.on('readAllUnreadSpecifiedNotes', () => { + updateAccount({ hasUnreadSpecifiedNotes: false }); + }); - main.on('unreadMessagingMessage', () => { - updateAccount({ hasUnreadMessagingMessage: true }); - sound.play('chatBg'); - }); + main.on('readAllMessagingMessages', () => { + updateAccount({ hasUnreadMessagingMessage: false }); + }); - main.on('readAllAntennas', () => { - updateAccount({ hasUnreadAntenna: false }); - }); + main.on('unreadMessagingMessage', () => { + updateAccount({ hasUnreadMessagingMessage: true }); + sound.play('chatBg'); + }); - main.on('unreadAntenna', () => { - updateAccount({ hasUnreadAntenna: true }); - sound.play('antenna'); - }); + main.on('readAllAntennas', () => { + updateAccount({ hasUnreadAntenna: false }); + }); - main.on('readAllAnnouncements', () => { - updateAccount({ hasUnreadAnnouncement: false }); - }); + main.on('unreadAntenna', () => { + updateAccount({ hasUnreadAntenna: true }); + sound.play('antenna'); + }); - main.on('readAllChannels', () => { - updateAccount({ hasUnreadChannel: false }); - }); + main.on('readAllAnnouncements', () => { + updateAccount({ hasUnreadAnnouncement: false }); + }); - main.on('unreadChannel', () => { - updateAccount({ hasUnreadChannel: true }); - sound.play('channel'); - }); + main.on('readAllChannels', () => { + updateAccount({ hasUnreadChannel: false }); + }); - // トークンが再生成されたとき - // このままではMisskeyが利用できないので強制的にサインアウトさせる - main.on('myTokenRegenerated', () => { - signout(); - }); -} + main.on('unreadChannel', () => { + updateAccount({ hasUnreadChannel: true }); + sound.play('channel'); + }); -// shortcut -document.addEventListener('keydown', makeHotkey(hotkeys)); + // トークンが再生成されたとき + // このままではMisskeyが利用できないので強制的にサインアウトさせる + main.on('myTokenRegenerated', () => { + signout(); + }); + } + + // shortcut + document.addEventListener('keydown', makeHotkey(hotkeys)); +})(); diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts index 5800cf5021..f23c621131 100644 --- a/packages/client/vite.config.ts +++ b/packages/client/vite.config.ts @@ -49,6 +49,7 @@ export default defineConfig(({ command, mode }) => { 'chrome100', 'firefox100', 'safari15', + 'es2017', // TODO: そのうち消す ], manifest: 'manifest.json', rollupOptions: { -- cgit v1.2.3-freya From de241319933eeb2601d9bf535d60a3c6e32cb8d6 Mon Sep 17 00:00:00 2001 From: tamaina Date: Thu, 14 Jul 2022 23:31:01 +0900 Subject: use MkStickyContainer (#9000) --- packages/client/src/directives/index.ts | 2 -- packages/client/src/directives/sticky-container.ts | 17 ------------- packages/client/src/pages/user/index.timeline.vue | 28 +++++++++++----------- 3 files changed, 14 insertions(+), 33 deletions(-) delete mode 100644 packages/client/src/directives/sticky-container.ts (limited to 'packages/client/src') diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts index fc9b6f86da..401a917cba 100644 --- a/packages/client/src/directives/index.ts +++ b/packages/client/src/directives/index.ts @@ -8,7 +8,6 @@ import tooltip from './tooltip'; import hotkey from './hotkey'; import appear from './appear'; import anim from './anim'; -import stickyContainer from './sticky-container'; import clickAnime from './click-anime'; import panel from './panel'; import adaptiveBorder from './adaptive-border'; @@ -24,7 +23,6 @@ export default function(app: App) { app.directive('appear', appear); app.directive('anim', anim); app.directive('click-anime', clickAnime); - app.directive('sticky-container', stickyContainer); app.directive('panel', panel); app.directive('adaptive-border', adaptiveBorder); } diff --git a/packages/client/src/directives/sticky-container.ts b/packages/client/src/directives/sticky-container.ts deleted file mode 100644 index 3cf813054b..0000000000 --- a/packages/client/src/directives/sticky-container.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Directive } from 'vue'; - -export default { - mounted(src, binding, vn) { - //const query = binding.value; - - const header = src.children[0]; - const body = src.children[1]; - const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop') || '0px'; - src.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`); - if (body) body.dataset.stickyContainerHeaderHeight = header.offsetHeight.toString(); - header.style.setProperty('--stickyTop', currentStickyTop); - header.style.position = 'sticky'; - header.style.top = 'var(--stickyTop)'; - header.style.zIndex = '1'; - }, -} as Directive; diff --git a/packages/client/src/pages/user/index.timeline.vue b/packages/client/src/pages/user/index.timeline.vue index a1329a7411..1bcc0a1b85 100644 --- a/packages/client/src/pages/user/index.timeline.vue +++ b/packages/client/src/pages/user/index.timeline.vue @@ -1,12 +1,14 @@ - -- cgit v1.2.3-freya From 77c2a7cd71efea318f4fd7ba0ee54b32e9c8f7ba Mon Sep 17 00:00:00 2001 From: tamaina Date: Thu, 14 Jul 2022 23:32:00 +0900 Subject: refactor(client): remove useCssModule (#8999) * refactor(client): remove useCssModule() * use MkStickyContainer * Revert "use MkStickyContainer" This reverts commit 639746786bb7e3342db9cbd3452854fc29aacf88. --- packages/client/src/components/global/loading.vue | 4 +--- packages/client/src/components/mention.vue | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) (limited to 'packages/client/src') diff --git a/packages/client/src/components/global/loading.vue b/packages/client/src/components/global/loading.vue index 5a7e362fcf..bcc6dfac01 100644 --- a/packages/client/src/components/global/loading.vue +++ b/packages/client/src/components/global/loading.vue @@ -16,9 +16,7 @@ diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index fe4fc425cd..e4b5de9918 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -365,11 +365,11 @@ const wallpaper = localStorage.getItem('wallpaper') != null; height: calc(var(--vh, 1vh) * 100); width: 240px; box-sizing: border-box; + contain: strict; overflow: auto; overscroll-behavior: contain; - background: var(--bg); + background: var(--navBg); } - } -- cgit v1.2.3-freya