nik/OMDSCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 747: デザイン反映

Browse Source 
## 概要
[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
## 動作確認状況
- ローカルで確認

## 補足
- 相談、参考資料などがあれば
This commit is contained in:
saito.k 2024-02-14 01:50:38 +00:00
parent 73ef74770e
commit 25b7936bf4
5 changed files with 296 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx
View File

@ -171,8 +171,11 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
<div> <div>
<div className={styles.pageHeader}> <div className={styles.pageHeader}>
<h1 className={styles.pageTitle}> <h1 className={styles.pageTitle}>
{t(getTranslationID("orderHistoriesPage.label.title"))} {t(getTranslationID("LicenseSummaryPage.label.title"))}
</h1> </h1>
<p className={styles.pageTx}>
{t(getTranslationID("orderHistoriesPage.label.orderHistory"))}
</p>
</div> </div>
<section className={styles.license}> <section className={styles.license}>
<div> <div>

310
dictation_client/src/pages/UserListPage/index.tsx
View File

@ -147,104 +147,115 @@ const UserListPage: React.FC = (): JSX.Element => {
</a> </a>
</li> </li>
</ul> </ul>
<table className={`${styles.table} ${styles.user}`}> <div className={styles.tableWrap}>
<tbody> <table className={`${styles.table} ${styles.user}`}>
<tr className={styles.tableHeader}> <tbody>
<th className={styles.clm0}>{/** th is empty */}</th> <tr className={styles.tableHeader}>
<th>{t(getTranslationID("userListPage.label.name"))}</th> <th className={styles.clm0}>{/** th is empty */}</th>
<th>{t(getTranslationID("userListPage.label.role"))}</th> <th>
<th> {t(getTranslationID("userListPage.label.name"))}
{t(getTranslationID("userListPage.label.authorID"))} </th>
</th> <th>
<th> {t(getTranslationID("userListPage.label.role"))}
{t(getTranslationID("userListPage.label.encryption"))} </th>
</th> <th>
<th> {t(getTranslationID("userListPage.label.authorID"))}
{t(getTranslationID("userListPage.label.prompt"))} </th>
</th> <th>
<th> {t(getTranslationID("userListPage.label.encryption"))}
{t(getTranslationID("userListPage.label.typistGroup"))} </th>
</th> <th>
<th>{t(getTranslationID("userListPage.label.email"))}</th> {t(getTranslationID("userListPage.label.prompt"))}
<th> </th>
{t(getTranslationID("userListPage.label.status"))} <th>
</th> {t(
<th> getTranslationID("userListPage.label.typistGroup")
{t(getTranslationID("userListPage.label.expiration"))} )}
</th> </th>
<th> <th>
{t(getTranslationID("userListPage.label.remaining"))} {t(getTranslationID("userListPage.label.email"))}
</th> </th>
<th> <th>
{t(getTranslationID("userListPage.label.autoRenew"))} {t(getTranslationID("userListPage.label.status"))}
</th> </th>
<th> <th>
{t(getTranslationID("userListPage.label.notification"))} {t(getTranslationID("userListPage.label.expiration"))}
</th> </th>
<th> <th>
{t( {t(getTranslationID("userListPage.label.remaining"))}
getTranslationID("userListPage.label.emailVerified") </th>
)} <th>
</th> {t(getTranslationID("userListPage.label.autoRenew"))}
</tr> </th>
{!isLoading && <th>
users.map((user) => ( {t(
<tr key={user.email}> getTranslationID("userListPage.label.notification")
<td className={styles.clm0}> )}
<ul className={styles.menuInTable}> </th>
<li> <th>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */} {t(
<a getTranslationID("userListPage.label.emailVerified")
onClick={() => { )}
onUpdateOpen(user.id); </th>
}} </tr>
> {!isLoading &&
{t( users.map((user) => (
getTranslationID( <tr key={user.email}>
"userListPage.label.editUser" <td className={styles.clm0}>
) <ul className={styles.menuInTable}>
)} <li>
</a> {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
</li> <a
{isTier5 && ( onClick={() => {
<> onUpdateOpen(user.id);
<li> }}
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */} >
<a {t(
onClick={() => { getTranslationID(
onAllocateLicensePopupOpen(user); "userListPage.label.editUser"
}} )
> )}
{t( </a>
getTranslationID( </li>
"userListPage.label.licenseAllocation" {isTier5 && (
) <>
)} <li>
</a> {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
</li> <a
<li> onClick={() => {
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */} onAllocateLicensePopupOpen(user);
<a }}
className={ >
user.licenseStatus === {t(
LICENSE_STATUS.NOLICENSE getTranslationID(
? styles.isDisable "userListPage.label.licenseAllocation"
: "" )
} )}
onClick={() => { </a>
onLicenseDeallocation(user.id); </li>
}} <li>
> {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
{t( <a
getTranslationID( className={
"userListPage.label.licenseDeallocation" user.licenseStatus ===
) LICENSE_STATUS.NOLICENSE
)} ? styles.isDisable
</a> : ""
</li> }
</> onClick={() => {
)} onLicenseDeallocation(user.id);
{/* ユーザー削除 CCB後回し分なので今は非表示 }}
>
{t(
getTranslationID(
"userListPage.label.licenseDeallocation"
)
)}
</a>
</li>
</>
)}
{/* ユーザー削除 CCB後回し分なので今は非表示
<li> <li>
<a href=""> <a href="">
{t( {t(
@ -255,57 +266,58 @@ const UserListPage: React.FC = (): JSX.Element => {
</a> </a>
</li> </li>
*/} */}
</ul> </ul>
</td> </td>
<td> {user.name}</td> <td> {user.name}</td>
<td>{user.role}</td> <td>{user.role}</td>
<td>{user.authorId}</td> <td>{user.authorId}</td>
<td>{boolToElement(user.encryption)}</td> <td>{boolToElement(user.encryption)}</td>
<td>{boolToElement(user.prompt)}</td> <td>{boolToElement(user.prompt)}</td>
<td>{arrayToElement(user.typistGroupName)}</td> <td>{arrayToElement(user.typistGroupName)}</td>
<td>{user.email}</td> <td>{user.email}</td>
<td> <td>
<span <span
className={ className={
user.licenseStatus === user.licenseStatus ===
LICENSE_STATUS.NOLICENSE || LICENSE_STATUS.NOLICENSE ||
user.licenseStatus === LICENSE_STATUS.ALERT user.licenseStatus === LICENSE_STATUS.ALERT
? styles.isAlert ? styles.isAlert
: "" : ""
} }
> >
{getLicenseStatus(user.licenseStatus)} {getLicenseStatus(user.licenseStatus)}
</span> </span>
</td> </td>
<td> <td>
<span <span
className={ className={
user.licenseStatus === LICENSE_STATUS.ALERT user.licenseStatus === LICENSE_STATUS.ALERT
? styles.isAlert ? styles.isAlert
: "" : ""
} }
> >
{user.expiration ?? "-"} {user.expiration ?? "-"}
</span> </span>
</td> </td>
<td> <td>
<span <span
className={ className={
user.licenseStatus === LICENSE_STATUS.ALERT user.licenseStatus === LICENSE_STATUS.ALERT
? styles.isAlert ? styles.isAlert
: "" : ""
} }
> >
{user.remaining ?? "-"} {user.remaining ?? "-"}
</span> </span>
</td> </td>
<td>{boolToElement(user.autoRenew)}</td> <td>{boolToElement(user.autoRenew)}</td>
<td>{boolToElement(user.notification)}</td> <td>{boolToElement(user.notification)}</td>
<td>{boolToElement(user.emailVerified)}</td> <td>{boolToElement(user.emailVerified)}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
</div>
{!isLoading && users.length === 0 && ( {!isLoading && users.length === 0 && (
<p <p
style={{ style={{

207
dictation_client/src/pages/WorkTypeIdSettingPage/editOptionItemsPopup.tsx
View File

@ -128,107 +128,132 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
<dl className={`${styles.formList} ${styles.hasbg}`}> <dl className={`${styles.formList} ${styles.hasbg}`}>
<dd className={styles.full}> <dd className={styles.full}>
<div className={styles.tableWrap}> <div className={styles.tableWrap}>
<table className={styles.table}> <table className={`${styles.table} ${styles.optionItem}`}>
<tr className={styles.tableHeader}> <tbody>
<th className={styles.noLine}> <tr className={styles.tableHeader}>
{t(getTranslationID("worktypeIdSetting.label.itemLabel"))} <th className={styles.noLine}>
</th> {t(
<th className={styles.noLine}> getTranslationID("worktypeIdSetting.label.itemLabel")
{t( )}
getTranslationID("worktypeIdSetting.label.defaultValue") </th>
)} <th className={styles.noLine}>
</th> {t(
<th> getTranslationID(
{t( "worktypeIdSetting.label.defaultValue"
getTranslationID("worktypeIdSetting.label.initialValue") )
)} )}
</th> </th>
</tr> <th>
{optionItems?.map((item) => ( {t(
<tr key={`optionItem_${item.id}`}> getTranslationID(
<td> "worktypeIdSetting.label.initialValue"
<input )
type="text" )}
maxLength={16} </th>
name="itemLabel" </tr>
value={item.itemLabel} {optionItems?.map((item) => (
className={styles.formInput} <tr key={`optionItem_${item.id}`}>
onChange={(e) => { <td>
const { value } = e.target;
// optionItemsの更新
const newOptionItem = {
...item,
itemLabel: value,
};
onChangeOptionItem(newOptionItem);
}}
/>
</td>
<td>
<select
name="defaultValueType"
className={styles.formInput}
value={item.defaultValueType}
onChange={(e) => {
const { value } = e.target;
// optionItemsの更新
const newOptionItem = {
...item,
defaultValueType: value,
};
onChangeOptionItem(newOptionItem);
}}
>
<option
value={OPTION_ITEMS_DEFAULT_VALUE_TYPE.DEFAULT}
>
{t(
getTranslationID(
"worktypeIdSetting.label.default"
)
)}
</option>
<option value={OPTION_ITEMS_DEFAULT_VALUE_TYPE.BLANK}>
{t(
getTranslationID("worktypeIdSetting.label.blank")
)}
</option>
<option
value={OPTION_ITEMS_DEFAULT_VALUE_TYPE.LAST_INPUT}
>
{t(
getTranslationID(
"worktypeIdSetting.label.lastInput"
)
)}
</option>
</select>
</td>
<td>
{item.defaultValueType ===
OPTION_ITEMS_DEFAULT_VALUE_TYPE.DEFAULT ? (
<input <input
type="text" type="text"
maxLength={20} maxLength={16}
name="initialValue" name="itemLabel"
value={item.initialValue} value={item.itemLabel}
className={styles.formInput} className={styles.formInput}
onChange={(e) => { onChange={(e) => {
const { value } = e.target; const { value } = e.target;
// optionItemsの更新 // optionItemsの更新
const newOptionItem = { const newOptionItem = {
...item, ...item,
initialValue: value, itemLabel: value,
}; };
onChangeOptionItem(newOptionItem); onChangeOptionItem(newOptionItem);
}} }}
/> />
) : ( </td>
"-" <td>
)} <select
name="defaultValueType"
className={styles.formInput}
value={item.defaultValueType}
onChange={(e) => {
const { value } = e.target;
// optionItemsの更新
const newOptionItem = {
...item,
defaultValueType: value,
};
onChangeOptionItem(newOptionItem);
}}
>
<option
value={OPTION_ITEMS_DEFAULT_VALUE_TYPE.DEFAULT}
>
{t(
getTranslationID(
"worktypeIdSetting.label.default"
)
)}
</option>
<option
value={OPTION_ITEMS_DEFAULT_VALUE_TYPE.BLANK}
>
{t(
getTranslationID(
"worktypeIdSetting.label.blank"
)
)}
</option>
<option
value={OPTION_ITEMS_DEFAULT_VALUE_TYPE.LAST_INPUT}
>
{t(
getTranslationID(
"worktypeIdSetting.label.lastInput"
)
)}
</option>
</select>
</td>
<td>
{item.defaultValueType ===
OPTION_ITEMS_DEFAULT_VALUE_TYPE.DEFAULT ? (
<input
type="text"
maxLength={20}
name="initialValue"
value={item.initialValue}
className={styles.formInput}
onChange={(e) => {
const { value } = e.target;
// optionItemsの更新
const newOptionItem = {
...item,
initialValue: value,
};
onChangeOptionItem(newOptionItem);
}}
/>
) : (
"-"
)}
</td>
</tr>
))}
<tr>
<td colSpan={3}>
<span
className={`${styles.formComment} ${styles.alignCenter}`}
>
{t(
getTranslationID(
"worktypeIdSetting.label.optionItemTerms"
)
)}
</span>
</td> </td>
</tr> </tr>
))} </tbody>
</table> </table>
{isPushSaveButton && hasInvalidOptionItems && ( {isPushSaveButton && hasInvalidOptionItems && (
<span className={`${styles.formError} ${styles.alignCenter}`}> <span className={`${styles.formError} ${styles.alignCenter}`}>
@ -248,14 +273,6 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
)} )}
</span> </span>
)} )}
<span
style={{ display: "block" }}
className={`${styles.formComment} ${styles.alignCenter}`}
>
{t(
getTranslationID("worktypeIdSetting.label.optionItemTerms")
)}
</span>
</div> </div>
</dd> </dd>
<dd className={`${styles.full} ${styles.alignCenter}`}> <dd className={`${styles.full} ${styles.alignCenter}`}>

29
dictation_client/src/styles/app.module.scss
View File

@ -1130,6 +1130,9 @@ h3 + .brCrumb .tlIcon {
.modal .form .table.backup td:first-child { .modal .form .table.backup td:first-child {
padding: 0.6rem 0.2rem; padding: 0.6rem 0.2rem;
} }
.modal .form .table.optionItem select {
width: 123px;
}
.modal .form .pagenation { .modal .form .pagenation {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
padding-right: 2.5%; padding-right: 2.5%;
@ -1597,15 +1600,6 @@ _:-ms-lang(x)::-ms-backdrop,
left: 0; left: 0;
z-index: 2; 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, .account .table.user th::after,
.user .table.user th::after, .user .table.user th::after,
.license .table.user th::after, .license .table.user th::after,
@ -1626,6 +1620,16 @@ _:-ms-lang(x)::-ms-backdrop,
vertical-align: top; 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 { .account .listVertical {
margin-bottom: 3rem; margin-bottom: 3rem;
} }
@ -2488,10 +2492,13 @@ tr.isSelected .menuInTable li a.isDisable {
.formChange ul.chooseMember li input + label, .formChange ul.chooseMember li input + label,
.formChange ul.holdMember li input + label { .formChange ul.holdMember li input + label {
display: block; display: block;
padding: 0.2rem 0 0.2rem 1.5rem; padding: 0.4rem 0 0.4rem 1.5rem;
margin-right: 0; margin-right: 0;
background: url(../assets/images/circle.svg) no-repeat left center; background: url(../assets/images/circle.svg) no-repeat left center;
background-size: 1.3rem; 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.chooseMember li input + label:hover,
.formChange ul.holdMember 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.chooseMember li input:checked + label,
.formChange ul.holdMember 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: url(../assets/images/check_circle_fill.svg) no-repeat right center;
background-size: 1.3rem; background-size: 1.3rem;
} }

1
dictation_client/src/styles/app.module.scss.d.ts vendored
View File

@ -74,6 +74,7 @@ declare const classNames: {
readonly table: "table"; readonly table: "table";
readonly tableHeader: "tableHeader"; readonly tableHeader: "tableHeader";
readonly backup: "backup"; readonly backup: "backup";
readonly optionItem: "optionItem";
readonly pagenation: "pagenation"; readonly pagenation: "pagenation";
readonly encryptionPass: "encryptionPass"; readonly encryptionPass: "encryptionPass";
readonly pageHeader: "pageHeader"; readonly pageHeader: "pageHeader";