From 713d587abf2909851b8db08ee16f1efd12ce7776 Mon Sep 17 00:00:00 2001 From: masaaki Date: Mon, 22 May 2023 01:11:00 +0000 Subject: [PATCH] =?UTF-8?q?Merged=20PR=20112:=20=E7=94=BB=E9=9D=A2?= =?UTF-8?q?=E5=AE=9F=E8=A3=85=EF=BC=88=E3=83=A9=E3=82=A4=E3=82=BB=E3=83=B3?= =?UTF-8?q?=E3=82=B9=E6=83=85=E5=A0=B1=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 概要 [Task1683: 画面実装（ライセンス情報）](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/1683) - ライセンス情報画面を仮実装。ライセンス注文を起動するためのボタンを用意しました。 - 画面デザイン上に登場する文言については、多言語対応を実施しています。 - このPull Requestで対象外 - 細かな画面の実装部分は別PBIのため対象外 - ライセンス注文のボタン実装については、「タスク 1684: 画面実装（ライセンス注文ポップアップ）」で実装するため対象外 - AppRouter.tsxの定義について、本来、ログイン後の画面のため、RouteAuthGuardの設定を行う必要がありますが、タスク1786の事象により多言語でのログインが出来なく、多言語対応の確認ができないため一時的に外しています。タスク1789で対応予定です。（ソースコメントにも記載） ## レビューポイント - 特にありません ## UIの変更 https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task1683?csf=1&web=1&e=agPOmO ## 動作確認状況 - ローカルで確認済 ## 補足 - 無し --- dictation_client/src/AppRouter.tsx | 10 ++- .../src/assets/images/history.svg | 13 +++ dictation_client/src/assets/images/key.svg | 15 ++++ .../src/assets/images/post_add.svg | 11 +++ .../src/pages/LicensePage/index.tsx | 89 +++++++++++++++++++ dictation_client/src/styles/app.module.scss | 36 ++++++-- .../src/styles/app.module.scss.d.ts | 1 + dictation_client/src/translation/de.json | 11 ++- dictation_client/src/translation/en.json | 11 ++- dictation_client/src/translation/es.json | 11 ++- dictation_client/src/translation/fr.json | 11 ++- 11 files changed, 204 insertions(+), 15 deletions(-) create mode 100644 dictation_client/src/assets/images/history.svg create mode 100644 dictation_client/src/assets/images/key.svg create mode 100644 dictation_client/src/assets/images/post_add.svg create mode 100644 dictation_client/src/pages/LicensePage/index.tsx diff --git a/dictation_client/src/AppRouter.tsx b/dictation_client/src/AppRouter.tsx index 03a581c..7e6362a 100644 --- a/dictation_client/src/AppRouter.tsx +++ b/dictation_client/src/AppRouter.tsx @@ -13,6 +13,7 @@ import VerifyFailedPage from "pages/VerifyFailedPage"; import VerifyAlreadyExistPage from "pages/VerifyAlreadyExistPage"; import SignupCompletePage from "pages/SignupCompletePage"; import UserListPage from "pages/UserListPage"; +import LicensePage from "pages/LicensePage"; const AppRouter: React.FC = () => ( @@ -36,6 +37,11 @@ const AppRouter: React.FC = () => ( path="/user" element={} />} /> + + {/* XXX 本来{}とすべきだが、タスク1786により + 多言語でのログインが出来なく、多言語対応の確認ができないため一時的に外す + タスク1789で対応予定 */} + } /> } />} @@ -49,10 +55,6 @@ const AppRouter: React.FC = () => ( path="/dictations" element={} />} /> - } />} - /> } />} diff --git a/dictation_client/src/assets/images/history.svg b/dictation_client/src/assets/images/history.svg new file mode 100644 index 0000000..d108bf4 --- /dev/null +++ b/dictation_client/src/assets/images/history.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/dictation_client/src/assets/images/key.svg b/dictation_client/src/assets/images/key.svg new file mode 100644 index 0000000..e86e331 --- /dev/null +++ b/dictation_client/src/assets/images/key.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/dictation_client/src/assets/images/post_add.svg b/dictation_client/src/assets/images/post_add.svg new file mode 100644 index 0000000..675731a --- /dev/null +++ b/dictation_client/src/assets/images/post_add.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/dictation_client/src/pages/LicensePage/index.tsx b/dictation_client/src/pages/LicensePage/index.tsx new file mode 100644 index 0000000..7acc098 --- /dev/null +++ b/dictation_client/src/pages/LicensePage/index.tsx @@ -0,0 +1,89 @@ +import { useMsal } from "@azure/msal-react"; +import { AppDispatch } from "app/store"; +import { UpdateTokenTimer } from "components/auth/updateTokenTimer"; +import Footer from "components/footer"; +import Header from "components/header"; +import { clearToken } from "features/auth"; +import React from "react"; +import { useDispatch } from "react-redux"; +import styles from "styles/app.module.scss"; +import { getTranslationID } from "translation"; +import { useTranslation } from "react-i18next"; +import postAdd from "../../assets/images/post_add.svg"; +import history from "../../assets/images/history.svg"; +import key from "../../assets/images/key.svg"; + +// eslintの検査エラー無視設定 +/* eslint-disable jsx-a11y/anchor-is-valid */ + +const LicensePage: React.FC = (): JSX.Element => { + const { instance } = useMsal(); + const dispatch: AppDispatch = useDispatch(); + const [t] = useTranslation(); + + return ( + /* TODO 現状（PBI1221）はライセンス注文PUを起動するためのボタンのみ。別途ライセンス注文を実装するPBIで全般的に見直し。 */ +
+
+ + +
+
+
+

+ {t(getTranslationID("LicensePage.label.title"))} +

+
+
+
+

+ {t(getTranslationID("LicensePage.label.subTitle"))} +

+ +
+
+
+
+ + {/* TODO 画面デザインにはないが、試験時に便利なので配置しておく。ライセンス注文を実装するPBIで正式なサインアウトのレイアウトに直す */} +
+ +
+
+ ); +}; + +export default LicensePage; diff --git a/dictation_client/src/styles/app.module.scss b/dictation_client/src/styles/app.module.scss index 2a1d0ed..4e0abe3 100644 --- a/dictation_client/src/styles/app.module.scss +++ b/dictation_client/src/styles/app.module.scss @@ -796,27 +796,49 @@ _:-ms-lang(x)::-ms-backdrop, width: auto; } -.user > div { +.user > div, +.license > div { padding: 0 2rem; } -.user .table tr:not(.tableHeader) { +.user .table tr:not(.tableHeader), +.license .table tr:not(.tableHeader) { cursor: pointer; + position: relative; } -.user .table tr:not(.tableHeader):hover { - color: #0084b2; +.user .table tr:not(.tableHeader):hover .tdEx, +.license .table tr:not(.tableHeader):hover .tdEx { + opacity: 1; } -.user .table tr:not(.tableHeader).isSelected { +.user .table tr:not(.tableHeader).isSelected, +.license .table tr:not(.tableHeader).isSelected { background: #0084b2; color: #ffffff; } -.user .table tr:not(.tableHeader).isSelected:hover { +.user .table tr:not(.tableHeader).isSelected:hover, +.license .table tr:not(.tableHeader).isSelected:hover { color: #ffffff; } -.user .table td { +.user .table td:not(.tdEx), +.license .table td:not(.tdEx) { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + padding-bottom: 2rem; +} +.user .table td.tdEx, +.license .table td.tdEx { + display: block; + width: 100%; + padding: 0 0.5rem; + position: absolute; + left: 0; + bottom: 0.5rem; + -moz-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -webkit-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; + opacity: 0; } .menuAction { diff --git a/dictation_client/src/styles/app.module.scss.d.ts b/dictation_client/src/styles/app.module.scss.d.ts index 3756c2c..11b807b 100644 --- a/dictation_client/src/styles/app.module.scss.d.ts +++ b/dictation_client/src/styles/app.module.scss.d.ts @@ -64,6 +64,7 @@ declare const classNames: { readonly pgHomeLinks: "pgHomeLinks"; readonly buttonIcon: "buttonIcon"; readonly user: "user"; + readonly license: "license"; readonly isSelected: "isSelected"; readonly menuAction: "menuAction"; readonly menuLink: "menuLink"; diff --git a/dictation_client/src/translation/de.json b/dictation_client/src/translation/de.json index 6c27146..39b4999 100644 --- a/dictation_client/src/translation/de.json +++ b/dictation_client/src/translation/de.json @@ -127,5 +127,14 @@ "transcriptionist": "(de)Transcriptionist", "none": "(de)None" } + }, + "LicensePage": { + "label": { + "title": "(de)License", + "subTitle": "(de)EFGI Legal", + "orderLicense": "(de)Order License", + "orderHistory": "(de)Order History", + "importLicenseKey": "(de)Import License Key" + } } -} +} \ No newline at end of file diff --git a/dictation_client/src/translation/en.json b/dictation_client/src/translation/en.json index cf937a8..f4d70c4 100644 --- a/dictation_client/src/translation/en.json +++ b/dictation_client/src/translation/en.json @@ -127,5 +127,14 @@ "transcriptionist": "Transcriptionist", "none": "None" } + }, + "LicensePage": { + "label": { + "title": "License", + "subTitle": "EFGI Legal", + "orderLicense": "Order License", + "orderHistory": "Order History", + "importLicenseKey": "Import License Key" + } } -} +} \ No newline at end of file diff --git a/dictation_client/src/translation/es.json b/dictation_client/src/translation/es.json index ece7341..4ac6865 100644 --- a/dictation_client/src/translation/es.json +++ b/dictation_client/src/translation/es.json @@ -127,5 +127,14 @@ "transcriptionist": "(es)Transcriptionist", "none": "(es)None" } + }, + "LicensePage": { + "label": { + "title": "(es)License", + "subTitle": "(es)EFGI Legal", + "orderLicense": "(es)Order License", + "orderHistory": "(es)Order History", + "importLicenseKey": "(es)Import License Key" + } } -} +} \ No newline at end of file diff --git a/dictation_client/src/translation/fr.json b/dictation_client/src/translation/fr.json index 5199abf..16a0fda 100644 --- a/dictation_client/src/translation/fr.json +++ b/dictation_client/src/translation/fr.json @@ -127,5 +127,14 @@ "transcriptionist": "(fr)Transcriptionist", "none": "(fr)None" } + }, + "LicensePage": { + "label": { + "title": "(fr)License", + "subTitle": "(fr)EFGI Legal", + "orderLicense": "(fr)Order License", + "orderHistory": "(fr)Order History", + "importLicenseKey": "(fr)Import License Key" + } } -} +} \ No newline at end of file