From 25b7936bf4248262b13aad3312b6a41ad4263aec Mon Sep 17 00:00:00 2001 From: "saito.k" Date: Wed, 14 Feb 2024 01:50:38 +0000 Subject: [PATCH] =?UTF-8?q?Merged=20PR=20747:=20=E3=83=87=E3=82=B6?= =?UTF-8?q?=E3=82=A4=E3=83=B3=E5=8F=8D=E6=98=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 概要 [Task3670: デザイン反映](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/3670) - ユーザー一覧画面のヘッダーのスタイル修正 - ブラウザのサイズに合わせて折り返すようにした - ユーザー一覧のテーブルを横スクロールできるように修正 - ライセンス履歴画面にパンくずリストを表示 - OptionItem更新ポップアップのスタイル修正 - 端が切れてしまっていたため枠に収まるようにした - Typistを「Selected」と「Pool」で選択するUIのスタイル修正 - typist名やグループ名が長くてもチェックアイコンに重ならないようにした ## レビューポイント - 特になし ## 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/Task3670?csf=1&web=1&e=zIcngJ ## 動作確認状況 - ローカルで確認 ## 補足 - 相談、参考資料などがあれば --- .../pages/LicensePage/licenseOrderHistory.tsx | 5 +- .../src/pages/UserListPage/index.tsx | 310 +++++++++--------- .../editOptionItemsPopup.tsx | 207 ++++++------ dictation_client/src/styles/app.module.scss | 29 +- .../src/styles/app.module.scss.d.ts | 1 + 5 files changed, 296 insertions(+), 256 deletions(-) diff --git a/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx b/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx index 9cbafd0..1a3a4cb 100644 --- a/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx +++ b/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx @@ -171,8 +171,11 @@ export const LicenseOrderHistory: React.FC = (

- {t(getTranslationID("orderHistoriesPage.label.title"))} + {t(getTranslationID("LicenseSummaryPage.label.title"))}

+

+ {t(getTranslationID("orderHistoriesPage.label.orderHistory"))} +

diff --git a/dictation_client/src/pages/UserListPage/index.tsx b/dictation_client/src/pages/UserListPage/index.tsx index b6b0072..76b3a8b 100644 --- a/dictation_client/src/pages/UserListPage/index.tsx +++ b/dictation_client/src/pages/UserListPage/index.tsx @@ -147,104 +147,115 @@ const UserListPage: React.FC = (): JSX.Element => { - - - - - - - - - - - - - - - - - - - {!isLoading && - users.map((user) => ( - - + + + + + + + + + + + + + + + ))} + +
{/** th is empty */}{t(getTranslationID("userListPage.label.name"))}{t(getTranslationID("userListPage.label.role"))} - {t(getTranslationID("userListPage.label.authorID"))} - - {t(getTranslationID("userListPage.label.encryption"))} - - {t(getTranslationID("userListPage.label.prompt"))} - - {t(getTranslationID("userListPage.label.typistGroup"))} - {t(getTranslationID("userListPage.label.email"))} - {t(getTranslationID("userListPage.label.status"))} - - {t(getTranslationID("userListPage.label.expiration"))} - - {t(getTranslationID("userListPage.label.remaining"))} - - {t(getTranslationID("userListPage.label.autoRenew"))} - - {t(getTranslationID("userListPage.label.notification"))} - - {t( - getTranslationID("userListPage.label.emailVerified") - )} -
- + {user.name}{user.role}{user.authorId}{boolToElement(user.encryption)}{boolToElement(user.prompt)}{arrayToElement(user.typistGroupName)}{user.email} + + {getLicenseStatus(user.licenseStatus)} + + + + {user.expiration ?? "-"} + + + + {user.remaining ?? "-"} + + {boolToElement(user.autoRenew)}{boolToElement(user.notification)}{boolToElement(user.emailVerified)}
+
{!isLoading && users.length === 0 && (

= (

- - - - - - - {optionItems?.map((item) => ( - - - -
- {t(getTranslationID("worktypeIdSetting.label.itemLabel"))} - - {t( - getTranslationID("worktypeIdSetting.label.defaultValue") - )} - - {t( - getTranslationID("worktypeIdSetting.label.initialValue") - )} -
- { - const { value } = e.target; - // optionItemsの更新 - const newOptionItem = { - ...item, - itemLabel: value, - }; - onChangeOptionItem(newOptionItem); - }} - /> - - - - {item.defaultValueType === - OPTION_ITEMS_DEFAULT_VALUE_TYPE.DEFAULT ? ( + + + + + + + + {optionItems?.map((item) => ( + + + + + + ))} + + - ))} +
+ {t( + getTranslationID("worktypeIdSetting.label.itemLabel") + )} + + {t( + getTranslationID( + "worktypeIdSetting.label.defaultValue" + ) + )} + + {t( + getTranslationID( + "worktypeIdSetting.label.initialValue" + ) + )} +
{ const { value } = e.target; // optionItemsの更新 const newOptionItem = { ...item, - initialValue: value, + itemLabel: value, }; onChangeOptionItem(newOptionItem); }} /> - ) : ( - "-" - )} + + + + {item.defaultValueType === + OPTION_ITEMS_DEFAULT_VALUE_TYPE.DEFAULT ? ( + { + const { value } = e.target; + // optionItemsの更新 + const newOptionItem = { + ...item, + initialValue: value, + }; + onChangeOptionItem(newOptionItem); + }} + /> + ) : ( + "-" + )} +
+ + {t( + getTranslationID( + "worktypeIdSetting.label.optionItemTerms" + ) + )} +
{isPushSaveButton && hasInvalidOptionItems && ( @@ -248,14 +273,6 @@ export const EditOptionItemsPopup: React.FC = ( )} )} - - {t( - getTranslationID("worktypeIdSetting.label.optionItemTerms") - )} -
diff --git a/dictation_client/src/styles/app.module.scss b/dictation_client/src/styles/app.module.scss index c075fdc..0753e75 100644 --- a/dictation_client/src/styles/app.module.scss +++ b/dictation_client/src/styles/app.module.scss @@ -1130,6 +1130,9 @@ h3 + .brCrumb .tlIcon { .modal .form .table.backup td:first-child { padding: 0.6rem 0.2rem; } +.modal .form .table.optionItem select { + width: 123px; +} .modal .form .pagenation { margin-bottom: 1.5rem; padding-right: 2.5%; @@ -1597,15 +1600,6 @@ _:-ms-lang(x)::-ms-backdrop, left: 0; z-index: 2; } -.account .table.user, -.user .table.user, -.license .table.user, -.dictation .table.user, -.partners .table.user, -.workflow .table.user, -.support .table.user { - margin-bottom: 5rem; -} .account .table.user th::after, .user .table.user th::after, .license .table.user th::after, @@ -1626,6 +1620,16 @@ _:-ms-lang(x)::-ms-backdrop, vertical-align: top; } +.user .table { + margin-bottom: 0; +} +.user .tableWrap { + max-width: calc(100vw - 5.1rem); + max-height: 90vh; + overflow-x: scroll; + margin-bottom: 5rem; +} + .account .listVertical { margin-bottom: 3rem; } @@ -2488,10 +2492,13 @@ tr.isSelected .menuInTable li a.isDisable { .formChange ul.chooseMember li input + label, .formChange ul.holdMember li input + label { display: block; - padding: 0.2rem 0 0.2rem 1.5rem; + padding: 0.4rem 0 0.4rem 1.5rem; margin-right: 0; background: url(../assets/images/circle.svg) no-repeat left center; background-size: 1.3rem; + white-space: pre-line; + word-break: break-all; + line-height: 1.3; } .formChange ul.chooseMember li input + label:hover, .formChange ul.holdMember li input + label:hover { @@ -2501,7 +2508,7 @@ tr.isSelected .menuInTable li a.isDisable { } .formChange ul.chooseMember li input:checked + label, .formChange ul.holdMember li input:checked + label { - padding: 0.2rem 1rem 0.2rem 0; + padding: 0.4rem 1.5rem 0.4rem 0; background: url(../assets/images/check_circle_fill.svg) no-repeat right center; background-size: 1.3rem; } diff --git a/dictation_client/src/styles/app.module.scss.d.ts b/dictation_client/src/styles/app.module.scss.d.ts index 68fcbca..d6ebd8f 100644 --- a/dictation_client/src/styles/app.module.scss.d.ts +++ b/dictation_client/src/styles/app.module.scss.d.ts @@ -74,6 +74,7 @@ declare const classNames: { readonly table: "table"; readonly tableHeader: "tableHeader"; readonly backup: "backup"; + readonly optionItem: "optionItem"; readonly pagenation: "pagenation"; readonly encryptionPass: "encryptionPass"; readonly pageHeader: "pageHeader";