From 7d40708c429e309d09a0b1ce0b17655180a0bf95 Mon Sep 17 00:00:00 2001 From: Xeltica Date: Wed, 22 Jun 2022 22:54:39 +0900 Subject: [PATCH] =?UTF-8?q?UI=E8=AA=BF=E6=95=B4=E3=81=AA=E3=81=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/types/design-system-color.ts | 18 ++ src/frontend/components/AnnouncementList.tsx | 5 +- src/frontend/components/DeveloperInfo.tsx | 26 --- src/frontend/components/Ranking.tsx | 53 ++--- src/frontend/const.ts | 11 +- src/frontend/hooks/useAnnouncements.ts | 20 ++ src/frontend/langs/ja-JP.json | 3 +- src/frontend/misc/theme.ts | 11 +- src/frontend/pages/account.tsx | 16 +- src/frontend/pages/announcement.tsx | 28 +-- src/frontend/pages/apps/misshai.tsx | 227 +++++++++---------- src/frontend/pages/apps/misshai/ranking.tsx | 2 +- src/frontend/pages/index.session.tsx | 116 ++++++---- src/frontend/pages/index.welcome.tsx | 22 +- src/frontend/pages/settings.tsx | 90 +++++--- src/frontend/store/slices/screen.ts | 12 +- src/frontend/style.scss | 15 +- 17 files changed, 359 insertions(+), 316 deletions(-) create mode 100644 src/common/types/design-system-color.ts delete mode 100644 src/frontend/components/DeveloperInfo.tsx create mode 100644 src/frontend/hooks/useAnnouncements.ts diff --git a/src/common/types/design-system-color.ts b/src/common/types/design-system-color.ts new file mode 100644 index 0000000..6f3422e --- /dev/null +++ b/src/common/types/design-system-color.ts @@ -0,0 +1,18 @@ +export const designSystemColors = [ + 'red', + 'vermilion', + 'orange', + 'yellow', + 'lime', + 'green', + 'teal', + 'cyan', + 'skyblue', + 'blue', + 'indigo', + 'purple', + 'magenta', + 'pink', +]; + +export type DesignSystemColor = typeof designSystemColors[number]; diff --git a/src/frontend/components/AnnouncementList.tsx b/src/frontend/components/AnnouncementList.tsx index 04f8b20..5b6c93a 100644 --- a/src/frontend/components/AnnouncementList.tsx +++ b/src/frontend/components/AnnouncementList.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useState } from 'react'; -import { useTranslation } from 'react-i18next'; import { Link } from 'react-router-dom'; import { IAnnouncement } from '../../common/types/announcement'; @@ -7,7 +6,6 @@ import { $get } from '../misc/api'; export const AnnouncementList: React.VFC = () => { const [announcements, setAnnouncements] = useState([]); - const {t} = useTranslation(); const fetchAllAnnouncements = () => { setAnnouncements([]); @@ -24,8 +22,7 @@ export const AnnouncementList: React.VFC = () => { return ( <> -

{t('announcements')}

-
+
{announcements.map(a => ( {a.title} diff --git a/src/frontend/components/DeveloperInfo.tsx b/src/frontend/components/DeveloperInfo.tsx deleted file mode 100644 index f371f99..0000000 --- a/src/frontend/components/DeveloperInfo.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -export const DeveloperInfo: React.VFC = () => { - const {t} = useTranslation(); - return ( - <> -

{t('_developerInfo.title')}

-

{t('_developerInfo.description')}

-
- - - Lutica@groundpolis.app - - - - le@misskey.io - - - - EbiseLutica@twitter.com - -
- - ); -}; diff --git a/src/frontend/components/Ranking.tsx b/src/frontend/components/Ranking.tsx index 79bc5ab..f923b5f 100644 --- a/src/frontend/components/Ranking.tsx +++ b/src/frontend/components/Ranking.tsx @@ -45,44 +45,21 @@ export const Ranking: React.VFC = ({limit}) => { ) : isError ? (
{t('failedToFetch')}
) : response ? ( - <> - - {response.isCalculating ? ( -

{t('isCalculating')}

- ) : ( - - // - // - // - // - // - // - // - // - // - // {response.ranking.map((r, i) => ( - // - // - // - // - // - // ))} - // - //
{t('_missHai.order')}{t('name')}{t('_missHai.rating')}
{i + 1} - // {r.username}@{r.host} - // {r.rating}
- )} - + response.isCalculating ? ( +

{t('isCalculating')}

+ ) : ( + + ) ) : null ); }; diff --git a/src/frontend/const.ts b/src/frontend/const.ts index e0ad2cb..daef188 100644 --- a/src/frontend/const.ts +++ b/src/frontend/const.ts @@ -1,11 +1,20 @@ +/** ローカルストレージキー Misskey Tools API トークン */ export const LOCALSTORAGE_KEY_TOKEN = 'token'; +/** ローカルストレージキー テーマ設定 */ export const LOCALSTORAGE_KEY_THEME = 'theme'; +/** ローカルストレージキー 言語設定 */ export const LOCALSTORAGE_KEY_LANG = 'lang'; +/** ローカルストレージキー ログイン済みアカウント一覧 */ export const LOCALSTORAGE_KEY_ACCOUNTS = 'accounts'; +/** ローカルストレージキー アクセントカラー設定 */ +export const LOCALSTORAGE_KEY_ACCENT_COLOR = 'accent_color'; +/** Misskey Tools API エンドポイント */ export const API_ENDPOINT = `//${location.host}/api/v1/`; - +/** 更新履歴URL */ export const CHANGELOG_URL = 'https://github.com/Xeltica/MisskeyTools/blob/master/CHANGELOG.md'; +/** Xeltica Studio 公式サイトURL */ export const XELTICA_STUDIO_URL = 'https://xeltica.work'; +/** ブレークポイント モバイル */ export const BREAKPOINT_SM = '800px'; diff --git a/src/frontend/hooks/useAnnouncements.ts b/src/frontend/hooks/useAnnouncements.ts new file mode 100644 index 0000000..22684b5 --- /dev/null +++ b/src/frontend/hooks/useAnnouncements.ts @@ -0,0 +1,20 @@ +import { useEffect, useState } from 'react'; +import { IAnnouncement } from '../../common/types/announcement'; +import { $get } from '../misc/api'; + +export const useAnnouncements = () => { + const [announcements, setAnnouncements] = useState([]); + + const fetchAllAnnouncements = () => { + setAnnouncements([]); + $get('announcements').then(announcements => { + setAnnouncements(announcements ?? []); + }); + }; + + useEffect(() => { + fetchAllAnnouncements(); + }, []); + + return announcements; +}; diff --git a/src/frontend/langs/ja-JP.json b/src/frontend/langs/ja-JP.json index 2b6c3aa..b512823 100644 --- a/src/frontend/langs/ja-JP.json +++ b/src/frontend/langs/ja-JP.json @@ -50,6 +50,8 @@ "shareMisskeyTools": "#MisskeyTools をシェアする", "shareMisskeyToolsNote": "#MisskeyTools はいいぞ\n\nhttps://misskey.tools", "instanceUrlPlaceholder": "例：misskey.io", + "settings": "設定", + "accentColor": "アクセントカラー", "_sidebar": { "dashboard": "ダッシュボード", "tools": "ツール", @@ -100,7 +102,6 @@ "useRanking": "ランキングに参加する" }, "_accounts": { - "currentAccount": "現在ログインしているアカウント", "switchAccount": "アカウント切り替え", "useAnother": "他のアカウントで登録する" }, diff --git a/src/frontend/misc/theme.ts b/src/frontend/misc/theme.ts index fc6fbc8..d7fcb75 100644 --- a/src/frontend/misc/theme.ts +++ b/src/frontend/misc/theme.ts @@ -16,7 +16,7 @@ export type Theme = typeof themes[number]; export type ActualTheme = typeof actualThemes[number]; export const useTheme = () => { - const theme = useSelector(state => state.screen.theme); + const {theme, accentColor} = useSelector(state => state.screen); const [ osTheme, setOsTheme ] = useState('dark'); @@ -45,4 +45,13 @@ export const useTheme = () => { q.removeEventListener('change', listener); }; }, [osTheme, setOsTheme]); + + // カラー変更に追従する + useEffect(() => { + const {style} = document.body; + style.setProperty('--primary', `var(--${accentColor})`); + for (let i = 1; i <= 10; i++) { + style.setProperty(`--primary-${i}`, `var(--${accentColor}-${i})`); + } + }, [accentColor]); }; diff --git a/src/frontend/pages/account.tsx b/src/frontend/pages/account.tsx index 8660f31..47e3d1f 100644 --- a/src/frontend/pages/account.tsx +++ b/src/frontend/pages/account.tsx @@ -33,12 +33,11 @@ export const AccountsPage: React.VFC = () => {
) : ( -
-
-
- {t('_accounts.switchAccount')} -
-
+
+
+

{t('_accounts.switchAccount')}

+ +
{ accounts.length === accountTokens.length ? ( accounts.map(account => ( @@ -59,8 +58,11 @@ export const AccountsPage: React.VFC = () => { ) }
+
+
+

{t('_accounts.useAnother')}

-
+
); }; diff --git a/src/frontend/pages/announcement.tsx b/src/frontend/pages/announcement.tsx index 8c112e8..1e855c6 100644 --- a/src/frontend/pages/announcement.tsx +++ b/src/frontend/pages/announcement.tsx @@ -21,22 +21,18 @@ export const AnnouncementPage: React.VFC = () => { useEffect(() => { $get('announcements/' + id).then(setAnnouncement); }, [setAnnouncement]); - return ( -
- {!announcement ? : ( - <> -

- {announcement.title} - -

-
- {announcement.body} -
- - )} + return !announcement ? : ( +
+

+ {announcement.title} + +

+
+ {announcement.body} +
); }; diff --git a/src/frontend/pages/apps/misshai.tsx b/src/frontend/pages/apps/misshai.tsx index ed1d70a..1b009bd 100644 --- a/src/frontend/pages/apps/misshai.tsx +++ b/src/frontend/pages/apps/misshai.tsx @@ -1,5 +1,5 @@ import insertTextAtCursor from 'insert-text-at-cursor'; -import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useReducer, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; import { alertModes } from '../../../common/types/alert-mode'; @@ -44,7 +44,6 @@ type DraftReducer = React.Reducer>; export const MisshaiPage: React.VFC = () => { const dispatch = useDispatch(); const session = useGetSessionQuery(undefined); - const [limit, setLimit] = useState(10); const data = session.data; const score = useGetScoreQuery(undefined); @@ -196,129 +195,113 @@ export const MisshaiPage: React.VFC = () => {
) : ( -
-
-
-

{t('_missHai.data')}

- - - - - - - - - - - - - - - - - - - - - - - - - -
{t('_missHai.dataScore')}{t('_missHai.dataDelta')}
{t('notes')}{score.data.notesCount}{score.data.notesDelta}
{t('following')}{score.data.followingCount}{score.data.followingDelta}
{t('followers')}{score.data.followersCount}{score.data.followersDelta}
-

- - {t('_missHai.rating')}{': '} - - {session.data.rating} -

+
+
+

{t('_missHai.data')}

+ + + + + + + + + + + + + + + + + + + + + + + + + +
{t('_missHai.dataScore')}{t('_missHai.dataDelta')}
{t('notes')}{score.data.notesCount}{score.data.notesDelta}
{t('following')}{score.data.followingCount}{score.data.followingDelta}
{t('followers')}{score.data.followersCount}{score.data.followersDelta}
+

{t('_missHai.rating')}{': '}{session.data.rating}

+
+
+

{t('_missHai.ranking')}

+ + {t('_missHai.showAll')} +
+
+

{t('settings')}

+ +

{t('alertMode')}

+
+ { alertModes.map((mode) => ( + + ))}
-
-
-
-

{t('_missHai.ranking')}

- - setLimit(undefined)}>{t('_missHai.showAll')} - -
-
-
-
-
-

{t('alertMode')}

+ { (draft.alertMode === 'notification' || draft.alertMode === 'both') && ( +
+ + {t('_alertMode.notificationWarning')} +
+ )} + { (draft.alertMode === 'note' || draft.alertMode === 'both') && ( + <> +

{t('visibility')}

- { alertModes.map((mode) => ( - - ))} + { + availableVisibilities.map((visibility) => ( + + )) + }
- { (draft.alertMode === 'notification' || draft.alertMode === 'both') && ( -
- - {t('_alertMode.notificationWarning')} -
- )} - { (draft.alertMode === 'note' || draft.alertMode === 'both') && ( - <> -

{t('visibility')}

-
- { - availableVisibilities.map((visibility) => ( - - )) - } -
- - - )} -
+ + + )} +

{t('template')}

+

{t('_template.description')}

+
+ +
-
-
-

{t('template')}

-

{t('_template.description')}

-
- - -
-