Merged PR 747: デザイン反映
## 概要 [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
parent
73ef74770e
commit
25b7936bf4
@ -171,8 +171,11 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
|
||||
<div>
|
||||
<div className={styles.pageHeader}>
|
||||
<h1 className={styles.pageTitle}>
|
||||
{t(getTranslationID("orderHistoriesPage.label.title"))}
|
||||
{t(getTranslationID("LicenseSummaryPage.label.title"))}
|
||||
</h1>
|
||||
<p className={styles.pageTx}>
|
||||
{t(getTranslationID("orderHistoriesPage.label.orderHistory"))}
|
||||
</p>
|
||||
</div>
|
||||
<section className={styles.license}>
|
||||
<div>
|
||||
|
||||
@ -147,12 +147,17 @@ const UserListPage: React.FC = (): JSX.Element => {
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className={styles.tableWrap}>
|
||||
<table className={`${styles.table} ${styles.user}`}>
|
||||
<tbody>
|
||||
<tr className={styles.tableHeader}>
|
||||
<th className={styles.clm0}>{/** th is empty */}</th>
|
||||
<th>{t(getTranslationID("userListPage.label.name"))}</th>
|
||||
<th>{t(getTranslationID("userListPage.label.role"))}</th>
|
||||
<th>
|
||||
{t(getTranslationID("userListPage.label.name"))}
|
||||
</th>
|
||||
<th>
|
||||
{t(getTranslationID("userListPage.label.role"))}
|
||||
</th>
|
||||
<th>
|
||||
{t(getTranslationID("userListPage.label.authorID"))}
|
||||
</th>
|
||||
@ -163,9 +168,13 @@ const UserListPage: React.FC = (): JSX.Element => {
|
||||
{t(getTranslationID("userListPage.label.prompt"))}
|
||||
</th>
|
||||
<th>
|
||||
{t(getTranslationID("userListPage.label.typistGroup"))}
|
||||
{t(
|
||||
getTranslationID("userListPage.label.typistGroup")
|
||||
)}
|
||||
</th>
|
||||
<th>
|
||||
{t(getTranslationID("userListPage.label.email"))}
|
||||
</th>
|
||||
<th>{t(getTranslationID("userListPage.label.email"))}</th>
|
||||
<th>
|
||||
{t(getTranslationID("userListPage.label.status"))}
|
||||
</th>
|
||||
@ -179,7 +188,9 @@ const UserListPage: React.FC = (): JSX.Element => {
|
||||
{t(getTranslationID("userListPage.label.autoRenew"))}
|
||||
</th>
|
||||
<th>
|
||||
{t(getTranslationID("userListPage.label.notification"))}
|
||||
{t(
|
||||
getTranslationID("userListPage.label.notification")
|
||||
)}
|
||||
</th>
|
||||
<th>
|
||||
{t(
|
||||
@ -306,6 +317,7 @@ const UserListPage: React.FC = (): JSX.Element => {
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{!isLoading && users.length === 0 && (
|
||||
<p
|
||||
style={{
|
||||
|
||||
@ -128,19 +128,26 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
|
||||
<dl className={`${styles.formList} ${styles.hasbg}`}>
|
||||
<dd className={styles.full}>
|
||||
<div className={styles.tableWrap}>
|
||||
<table className={styles.table}>
|
||||
<table className={`${styles.table} ${styles.optionItem}`}>
|
||||
<tbody>
|
||||
<tr className={styles.tableHeader}>
|
||||
<th className={styles.noLine}>
|
||||
{t(getTranslationID("worktypeIdSetting.label.itemLabel"))}
|
||||
{t(
|
||||
getTranslationID("worktypeIdSetting.label.itemLabel")
|
||||
)}
|
||||
</th>
|
||||
<th className={styles.noLine}>
|
||||
{t(
|
||||
getTranslationID("worktypeIdSetting.label.defaultValue")
|
||||
getTranslationID(
|
||||
"worktypeIdSetting.label.defaultValue"
|
||||
)
|
||||
)}
|
||||
</th>
|
||||
<th>
|
||||
{t(
|
||||
getTranslationID("worktypeIdSetting.label.initialValue")
|
||||
getTranslationID(
|
||||
"worktypeIdSetting.label.initialValue"
|
||||
)
|
||||
)}
|
||||
</th>
|
||||
</tr>
|
||||
@ -188,9 +195,13 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
|
||||
)
|
||||
)}
|
||||
</option>
|
||||
<option value={OPTION_ITEMS_DEFAULT_VALUE_TYPE.BLANK}>
|
||||
<option
|
||||
value={OPTION_ITEMS_DEFAULT_VALUE_TYPE.BLANK}
|
||||
>
|
||||
{t(
|
||||
getTranslationID("worktypeIdSetting.label.blank")
|
||||
getTranslationID(
|
||||
"worktypeIdSetting.label.blank"
|
||||
)
|
||||
)}
|
||||
</option>
|
||||
<option
|
||||
@ -229,6 +240,20 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr>
|
||||
<td colSpan={3}>
|
||||
<span
|
||||
className={`${styles.formComment} ${styles.alignCenter}`}
|
||||
>
|
||||
{t(
|
||||
getTranslationID(
|
||||
"worktypeIdSetting.label.optionItemTerms"
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{isPushSaveButton && hasInvalidOptionItems && (
|
||||
<span className={`${styles.formError} ${styles.alignCenter}`}>
|
||||
@ -248,14 +273,6 @@ export const EditOptionItemsPopup: React.FC<EditOptionItemsPopupProps> = (
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
style={{ display: "block" }}
|
||||
className={`${styles.formComment} ${styles.alignCenter}`}
|
||||
>
|
||||
{t(
|
||||
getTranslationID("worktypeIdSetting.label.optionItemTerms")
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</dd>
|
||||
<dd className={`${styles.full} ${styles.alignCenter}`}>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user