From ab58af85431425d5c0b5799a09f45c0d3226a7b3 Mon Sep 17 00:00:00 2001 From: Xeltica Date: Sun, 19 Jun 2022 10:42:00 +0900 Subject: [PATCH] =?UTF-8?q?=E8=AB=B8=E3=80=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/frontend/GeneralLayout.tsx | 4 +- src/frontend/components/LoginForm.tsx | 8 +- src/frontend/components/NavigationMenu.tsx | 56 ++++----- src/frontend/langs/ja-JP.json | 3 +- src/frontend/misc/is-mobile-prop.tsx | 2 + src/frontend/pages/announcements/index.tsx | 11 ++ src/frontend/pages/index.welcome.tsx | 130 ++++++++++++++++++--- src/frontend/pages/settings.tsx | 4 +- src/frontend/style.scss | 6 + yarn.lock | 71 +++++++++++ 11 files changed, 246 insertions(+), 51 deletions(-) create mode 100644 src/frontend/misc/is-mobile-prop.tsx create mode 100644 src/frontend/pages/announcements/index.tsx diff --git a/package.json b/package.json index e83403d..f68b147 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@types/react": "^17.0.19", "@types/react-dom": "^17.0.9", "@types/react-router-dom": "^5.1.8", + "@types/react-twemoji": "^0.4.0", "@types/styled-components": "^5.1.13", "@types/uuid": "^8.0.0", "axios": "^0.21.2", @@ -75,6 +76,7 @@ "react-modal-hook": "^3.0.0", "react-redux": "^7.2.4", "react-router-dom": "^5.2.1", + "react-twemoji": "^0.5.0", "reflect-metadata": "^0.1.13", "rndstr": "^1.0.0", "routing-controllers": "^0.9.0", diff --git a/src/frontend/GeneralLayout.tsx b/src/frontend/GeneralLayout.tsx index c470bfd..7808c74 100644 --- a/src/frontend/GeneralLayout.tsx +++ b/src/frontend/GeneralLayout.tsx @@ -1,16 +1,14 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; -import { NavLink } from 'react-router-dom'; import styled from 'styled-components'; import { NavigationMenu } from './components/NavigationMenu'; +import { IsMobileProp } from './misc/is-mobile-prop'; import { useGetMetaQuery, useGetSessionQuery } from './services/session'; import { useSelector } from './store'; import { setDrawerShown } from './store/slices/screen'; -type IsMobileProp = { isMobile: boolean }; - const Container = styled.div` padding: var(--margin); position: relative; diff --git a/src/frontend/components/LoginForm.tsx b/src/frontend/components/LoginForm.tsx index 7a3aed2..250ba9b 100644 --- a/src/frontend/components/LoginForm.tsx +++ b/src/frontend/components/LoginForm.tsx @@ -1,5 +1,11 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; +import styled from 'styled-components'; + +const Input = styled.input` + width: auto; + flex: 1; +`; export const LoginForm: React.VFC = () => { const [host, setHost] = useState(''); @@ -11,7 +17,7 @@ export const LoginForm: React.VFC = () => { {t('instanceUrl')}
- {
- - {t('_sidebar.dashboard')} + + {t(session ? '_sidebar.dashboard' : '_sidebar.return')}
-
-

{t('_sidebar.tools')}

- - - {t('_sidebar.missHaiAlert')} - - - - {t('_sidebar.cropper')} - -
-
- {session &&

{session.username}@{session.host}

} - {session && ( + {session && ( +
+

{t('_sidebar.tools')}

+ + + {t('_sidebar.missHaiAlert')} + + + + {t('_sidebar.cropper')} + +
+ )} + {session && ( +
+

{session.username}@{session.host}

{t('_sidebar.accounts')} - )} - - - {t('_sidebar.settings')} - - - - {t('_sidebar.admin')} - -
+ + + {t('_sidebar.settings')} + + {session.isAdmin && ( + + + {t('_sidebar.admin')} + + )} +
+ )}
); diff --git a/src/frontend/langs/ja-JP.json b/src/frontend/langs/ja-JP.json index 4fad25e..6f038ba 100644 --- a/src/frontend/langs/ja-JP.json +++ b/src/frontend/langs/ja-JP.json @@ -58,7 +58,8 @@ "accounts": "アカウント", "settings": "設定", "admin": "管理画面", - "about": "Misskey Toolsについて" + "about": "Misskey Toolsについて", + "return": "トップページに戻る" }, "_welcomeMessage": { "pattern1": "ついついノートしすぎていませんか？", diff --git a/src/frontend/misc/is-mobile-prop.tsx b/src/frontend/misc/is-mobile-prop.tsx new file mode 100644 index 0000000..ca299fc --- /dev/null +++ b/src/frontend/misc/is-mobile-prop.tsx @@ -0,0 +1,2 @@ + +export type IsMobileProp = { isMobile: boolean; }; diff --git a/src/frontend/pages/announcements/index.tsx b/src/frontend/pages/announcements/index.tsx new file mode 100644 index 0000000..83e93ed --- /dev/null +++ b/src/frontend/pages/announcements/index.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { useTitle } from '../../hooks/useTitle'; + +export const AnnouncementsPage: React.VFC = () => { + useTitle('announcements'); + return ( +
+ +
+ ); +}; diff --git a/src/frontend/pages/index.welcome.tsx b/src/frontend/pages/index.welcome.tsx index 8d79f80..1ae151c 100644 --- a/src/frontend/pages/index.welcome.tsx +++ b/src/frontend/pages/index.welcome.tsx @@ -1,28 +1,122 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { LoginForm } from '../components/LoginForm'; -import { Header } from '../Header'; -import { AnnouncementList } from '../components/AnnouncementList'; +import styled from 'styled-components'; +import { useSelector } from '../store'; +import { IsMobileProp } from '../misc/is-mobile-prop'; +import { IAnnouncement } from '../../common/types/announcement'; +import { $get } from '../misc/api'; +import Twemoji from 'react-twemoji'; + +const Hero = styled.div` + display: flex; + position: relative; + background: linear-gradient(-135deg, rgb(1, 169, 46), rgb(134, 179, 0) 35%); + color: var(--white); + padding: ${f => f.isMobile ? '16px' : '60px 90px'}; + overflow: hidden; + gap: var(--margin); + > .hero { + flex: 2; + min-width: 0; + position: relative; + z-index: 1000; + p { + ${f => f.isMobile ? 'font-size: 1rem;' : ''} + } + } + > .announcements { + flex: 1; + min-width: 0; + max-height: 512px; + overflow: auto; + padding: var(--margin); + border-radius: var(--radius); + background: var(--black-50); + backdrop-filter: blur(4px) brightness(120%); + z-index: 1000; + @media screen and (max-width: 800px) { + display: none; + } + } + > .rects { + position: absolute; + display: grid; + right: 160px; + bottom: -120px; + width: 400px; + height: 400px; + gap: 8px; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + transform-origin: center center; + transform: rotate(45deg); + opacity: 0.5; + > .rect { + border: 2px solid var(--white); + border-radius: 24px; + box-shadow: 0 2px 4px var(--shadow-color); + } + } +`; + +const FormWrapper = styled.div` + max-width: 500px; + color: var(--fg); +`; + export const IndexWelcomePage: React.VFC = () => { + const [announcements, setAnnouncements] = useState([]); + + const {isMobile} = useSelector(state => state.screen); const {t} = useTranslation(); + const fetchAllAnnouncements = () => { + setAnnouncements([]); + $get('announcements').then(announcements => { + setAnnouncements(announcements ?? []); + }); + }; + + useEffect(() => { + fetchAllAnnouncements(); + }, []); + return ( <> -
-
-

{t('description1')}

-

{t('description2')}

-
- -
-
-
- + +
+

Misskey Tools

+

{t('description1')}

+

{t('description2')}

+ + +
-
-
+
+

お知らせ

+
+ {announcements.map(a => ( + + {a.title} + + ))} +
+
+
+
+
+
+
+
+ + +
+ 👍 ❤ 😆 🎉 🍮 +
+

{t('_welcome.title')}

@@ -30,7 +124,7 @@ export const IndexWelcomePage: React.VFC = () => {
-

{t('_welcome.misshaiAlertTitle')}

+

{t('_welcome.misshaiAlertTitle')}

{t('_welcome.misshaiAlertDescription')}

@@ -38,10 +132,10 @@ export const IndexWelcomePage: React.VFC = () => {

{t('_welcome.misshaiRankingDescription')}

{t('_missHai.showRanking')}
-
+

{t('catAdjuster')}

{t('_welcome.catAdjusterDescription')}

-
+

{t('_welcome.nextFeaturesTitle')}

diff --git a/src/frontend/pages/settings.tsx b/src/frontend/pages/settings.tsx index db09eb3..311516b 100644 --- a/src/frontend/pages/settings.tsx +++ b/src/frontend/pages/settings.tsx @@ -42,7 +42,7 @@ export const SettingPage: React.VFC = () => { onSelect(i) { if (i === 0) { localStorage.removeItem(LOCALSTORAGE_KEY_TOKEN); - location.reload(); + location.href = '/'; } }, })); @@ -72,7 +72,7 @@ export const SettingPage: React.VFC = () => { message: t('_deactivate.success'), icon: 'info', onSelect() { - location.reload(); + location.href = '/'; } })); }).catch((e) => { diff --git a/src/frontend/style.scss b/src/frontend/style.scss index 019ef04..08abc35 100644 --- a/src/frontend/style.scss +++ b/src/frontend/style.scss @@ -143,4 +143,10 @@ small { animation: earwiggleright 1s infinite; } } +} + +.twemoji { + height: 1em; + width: 1em; + vertical-align: -0.1em; } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 7b96b03..61560c8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -622,6 +622,13 @@ "@types/history" "*" "@types/react" "*" +"@types/react-twemoji@^0.4.0": + version "0.4.0" + resolved "https://registry.yarnpkg.com/@types/react-twemoji/-/react-twemoji-0.4.0.tgz#3f3ce96e273ec0aa4b4ddca2913951b168fd72ee" + integrity sha512-OVkDaNTg9WqqM2MBqL68FNPsn+5aabQIbL9KY+ofK/Q4ENOuaHOWsg/jRD9zQ+GX5L+7LC1Ztgr4iK0/qZd17w== + dependencies: + "@types/react" "*" + "@types/react@*", "@types/react@^17.0.19": version "17.0.27" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.27.tgz#6498ed9b3ad117e818deb5525fa1946c09f2e0e6" @@ -2376,6 +2383,15 @@ fresh@0.5.2, fresh@~0.5.2: resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7" integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac= +fs-extra@^8.0.1: + version "8.1.0" + resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0" + integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g== + dependencies: + graceful-fs "^4.2.0" + jsonfile "^4.0.0" + universalify "^0.1.0" + fs.realpath@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" @@ -2546,6 +2562,11 @@ graceful-fs@^4.1.2, graceful-fs@^4.2.4: resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a" integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg== +graceful-fs@^4.1.6, graceful-fs@^4.2.0: + version "4.2.10" + resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c" + integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA== + has-ansi@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91" @@ -3195,6 +3216,22 @@ json5@^2.1.2, json5@^2.1.3: dependencies: minimist "^1.2.5" +jsonfile@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb" + integrity sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg== + optionalDependencies: + graceful-fs "^4.1.6" + +jsonfile@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-5.0.0.tgz#e6b718f73da420d612823996fdf14a03f6ff6922" + integrity sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w== + dependencies: + universalify "^0.1.2" + optionalDependencies: + graceful-fs "^4.1.6" + jstransformer@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/jstransformer/-/jstransformer-1.0.0.tgz#ed8bf0921e2f3f1ed4d5c1a44f68709ed24722c3" @@ -3428,6 +3465,11 @@ lodash.clonedeep@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8= +lodash.isequal@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" + integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ== + lodash.merge@^4.6.2: version "4.6.2" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" @@ -4822,6 +4864,15 @@ react-router@5.2.1: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" +react-twemoji@^0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/react-twemoji/-/react-twemoji-0.5.0.tgz#0565f8e427fc4c9ef3680977c4a88fbdef79f874" + integrity sha512-xz3NLWTFCfWOmPd559jcFX4f976ORIPpL9SwdBQO5BZwIYD1U1vpbY2E6k2vwPCVH78s2m1GbG5jpHKGUPZ+gw== + dependencies: + lodash.isequal "^4.5.0" + prop-types "^15.7.2" + twemoji "14.0.1" + react@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" @@ -5762,6 +5813,21 @@ tsutils@^3.21.0: dependencies: tslib "^1.8.1" +twemoji-parser@14.0.0: + version "14.0.0" + resolved "https://registry.yarnpkg.com/twemoji-parser/-/twemoji-parser-14.0.0.tgz#13dabcb6d3a261d9efbf58a1666b182033bf2b62" + integrity sha512-9DUOTGLOWs0pFWnh1p6NF+C3CkQ96PWmEFwhOVmT3WbecRC+68AIqpsnJXygfkFcp4aXbOp8Dwbhh/HQgvoRxA== + +twemoji@14.0.1: + version "14.0.1" + resolved "https://registry.yarnpkg.com/twemoji/-/twemoji-14.0.1.tgz#0640887ef149403ae577081cbc2480a026e55ed6" + integrity sha512-eoqhea0sUhmC10iTacksyp1v9O4BP1jKmVqtK+Nztw40/dzawSHkXL3/xCpyh+mukmEvJ0Gw9VLvwZfQ9HKXDw== + dependencies: + fs-extra "^8.0.1" + jsonfile "^5.0.0" + twemoji-parser "14.0.0" + universalify "^0.1.2" + type-check@^0.4.0, type-check@~0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1" @@ -5937,6 +6003,11 @@ unist-util-visit@^4.0.0: unist-util-is "^5.0.0" unist-util-visit-parents "^5.0.0" +universalify@^0.1.0, universalify@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66" + integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg== + unpipe@1.0.0, unpipe@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"