Merged PR 191: タスク一覧画面のデザインを修正する（ソートの▽表示とチェックボックスのカーソルなど）
## 概要 [Task2045: [Sp12-1着手]タスク一覧画面のデザインを修正する（ソートの▽表示とチェックボックスのカーソルなど）](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2045) - aタグを使ったリンク・ボタン等でカーソルが指差しアイコンになるよう修正 - ソートの▽が選択とソート順によって変わるように修正 - チェックボックスのカーソルが常に指差しアイコンになる - `.eslintignore`の修正がdevelopから漏れていたので反映 ## レビューポイント - 各修正内容は適切か - ほかに必要なデザイン修正はないか - `.eslintignore`は岩田の以下の修正内容がdevelopで上書きされてしまっていたので反映しています。 - https://dev.azure.com/ODMSCloud/ODMS%20Cloud/_git/ODMS%20Cloud/pullrequest/192 ## UIの変更 - [Task2045](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/Task2045?csf=1&web=1&e=KoDGxK) ## 動作確認状況 - ローカルで確認
This commit is contained in:
makabe.t
parent
dadbc550c6
commit
d6db89bc2c
@ -5,3 +5,5 @@ jest.config.js
|
||||
vite.config.ts
|
||||
.env.local
|
||||
|
||||
# デザイナのcssから生成するため除外
|
||||
src/styles/app.module.scss.d.ts
|
||||
@ -28,6 +28,7 @@ import {
|
||||
changeAssignee,
|
||||
listTypistsAsync,
|
||||
listTypistGroupsAsync,
|
||||
DirectionType,
|
||||
selectIsLoading,
|
||||
} from "features/dictation";
|
||||
import { getTranslationID } from "translation";
|
||||
@ -358,6 +359,20 @@ const DictationPage: React.FC = (): JSX.Element => {
|
||||
]
|
||||
);
|
||||
|
||||
const sortIconClass = (
|
||||
currentParam: SortableColumnType,
|
||||
currentDirection: DirectionType,
|
||||
column: SortableColumnType
|
||||
) => {
|
||||
if (currentParam !== column) {
|
||||
return "";
|
||||
}
|
||||
if (currentDirection === DIRECTION.DESC) {
|
||||
return styles.isActiveZa;
|
||||
}
|
||||
return styles.isActiveAz;
|
||||
};
|
||||
|
||||
// 初回読み込み処理
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
@ -542,7 +557,11 @@ const DictationPage: React.FC = (): JSX.Element => {
|
||||
<th className={styles.clm1}>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||
<a
|
||||
className={styles.hasSort}
|
||||
className={`${styles.hasSort} ${sortIconClass(
|
||||
sortableParamName,
|
||||
sortDirection,
|
||||
SORTABLE_COLUMN.JobNumber
|
||||
)}`}
|
||||
onClick={() =>
|
||||
updateSortColumn(SORTABLE_COLUMN.JobNumber)
|
||||
}
|
||||
@ -560,7 +579,11 @@ const DictationPage: React.FC = (): JSX.Element => {
|
||||
<th className={styles.clm2}>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||
<a
|
||||
className={styles.hasSort}
|
||||
className={`${styles.hasSort} ${sortIconClass(
|
||||
sortableParamName,
|
||||
sortDirection,
|
||||
SORTABLE_COLUMN.Status
|
||||
)}`}
|
||||
onClick={() =>
|
||||
updateSortColumn(SORTABLE_COLUMN.Status)
|
||||
}
|
||||
@ -579,7 +602,11 @@ const DictationPage: React.FC = (): JSX.Element => {
|
||||
<th className={styles.clm4}>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||
<a
|
||||
className={styles.hasSort}
|
||||
className={`${styles.hasSort} ${sortIconClass(
|
||||
sortableParamName,
|
||||
sortDirection,
|
||||
SORTABLE_COLUMN.Encryption
|
||||
)}`}
|
||||
onClick={() =>
|
||||
updateSortColumn(SORTABLE_COLUMN.Encryption)
|
||||
}
|
||||
@ -597,7 +624,11 @@ const DictationPage: React.FC = (): JSX.Element => {
|
||||
<th className={styles.clm5}>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||
<a
|
||||
className={styles.hasSort}
|
||||
className={`${styles.hasSort} ${sortIconClass(
|
||||
sortableParamName,
|
||||
sortDirection,
|
||||
SORTABLE_COLUMN.AuthorId
|
||||
)}`}
|
||||
onClick={() =>
|
||||
updateSortColumn(SORTABLE_COLUMN.AuthorId)
|
||||
}
|
||||
@ -615,7 +646,11 @@ const DictationPage: React.FC = (): JSX.Element => {
|
||||
<th className={styles.clm6}>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||
<a
|
||||
className={styles.hasSort}
|
||||
className={`${styles.hasSort} ${sortIconClass(
|
||||
sortableParamName,
|
||||
sortDirection,
|
||||
SORTABLE_COLUMN.WorkType
|
||||
)}`}
|
||||
onClick={() =>
|
||||
updateSortColumn(SORTABLE_COLUMN.WorkType)
|
||||
}
|
||||
@ -633,7 +668,11 @@ const DictationPage: React.FC = (): JSX.Element => {
|
||||
<th className={styles.clm7}>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||
<a
|
||||
className={styles.hasSort}
|
||||
className={`${styles.hasSort} ${sortIconClass(
|
||||
sortableParamName,
|
||||
sortDirection,
|
||||
SORTABLE_COLUMN.FileName
|
||||
)}`}
|
||||
onClick={() =>
|
||||
updateSortColumn(SORTABLE_COLUMN.FileName)
|
||||
}
|
||||
@ -651,7 +690,11 @@ const DictationPage: React.FC = (): JSX.Element => {
|
||||
<th className={styles.clm8}>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||
<a
|
||||
className={styles.hasSort}
|
||||
className={`${styles.hasSort} ${sortIconClass(
|
||||
sortableParamName,
|
||||
sortDirection,
|
||||
SORTABLE_COLUMN.FileLength
|
||||
)}`}
|
||||
onClick={() =>
|
||||
updateSortColumn(SORTABLE_COLUMN.FileLength)
|
||||
}
|
||||
@ -669,7 +712,11 @@ const DictationPage: React.FC = (): JSX.Element => {
|
||||
<th className={styles.clm9}>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||
<a
|
||||
className={styles.hasSort}
|
||||
className={`${styles.hasSort} ${sortIconClass(
|
||||
sortableParamName,
|
||||
sortDirection,
|
||||
SORTABLE_COLUMN.FileSize
|
||||
)}`}
|
||||
onClick={() =>
|
||||
updateSortColumn(SORTABLE_COLUMN.FileSize)
|
||||
}
|
||||
@ -687,7 +734,11 @@ const DictationPage: React.FC = (): JSX.Element => {
|
||||
<th className={styles.clm10}>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||
<a
|
||||
className={styles.hasSort}
|
||||
className={`${styles.hasSort} ${sortIconClass(
|
||||
sortableParamName,
|
||||
sortDirection,
|
||||
SORTABLE_COLUMN.RecordingStartedDate
|
||||
)}`}
|
||||
onClick={() =>
|
||||
updateSortColumn(
|
||||
SORTABLE_COLUMN.RecordingStartedDate
|
||||
@ -709,7 +760,11 @@ const DictationPage: React.FC = (): JSX.Element => {
|
||||
<th className={styles.clm11}>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||
<a
|
||||
className={styles.hasSort}
|
||||
className={`${styles.hasSort} ${sortIconClass(
|
||||
sortableParamName,
|
||||
sortDirection,
|
||||
SORTABLE_COLUMN.RecordingFinishedDate
|
||||
)}`}
|
||||
onClick={() =>
|
||||
updateSortColumn(
|
||||
SORTABLE_COLUMN.RecordingFinishedDate
|
||||
@ -731,7 +786,11 @@ const DictationPage: React.FC = (): JSX.Element => {
|
||||
<th className={styles.clm12}>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||
<a
|
||||
className={styles.hasSort}
|
||||
className={`${styles.hasSort} ${sortIconClass(
|
||||
sortableParamName,
|
||||
sortDirection,
|
||||
SORTABLE_COLUMN.UploadDate
|
||||
)}`}
|
||||
onClick={() =>
|
||||
updateSortColumn(SORTABLE_COLUMN.UploadDate)
|
||||
}
|
||||
@ -749,7 +808,11 @@ const DictationPage: React.FC = (): JSX.Element => {
|
||||
<th className={styles.clm13}>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||
<a
|
||||
className={styles.hasSort}
|
||||
className={`${styles.hasSort} ${sortIconClass(
|
||||
sortableParamName,
|
||||
sortDirection,
|
||||
SORTABLE_COLUMN.TranscriptionStartedDate
|
||||
)}`}
|
||||
onClick={() =>
|
||||
updateSortColumn(
|
||||
SORTABLE_COLUMN.TranscriptionStartedDate
|
||||
@ -771,7 +834,11 @@ const DictationPage: React.FC = (): JSX.Element => {
|
||||
<th className={styles.clm14}>
|
||||
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
|
||||
<a
|
||||
className={styles.hasSort}
|
||||
className={`${styles.hasSort} ${sortIconClass(
|
||||
sortableParamName,
|
||||
sortDirection,
|
||||
SORTABLE_COLUMN.TranscriptionFinishedDate
|
||||
)}`}
|
||||
onClick={() =>
|
||||
updateSortColumn(
|
||||
SORTABLE_COLUMN.TranscriptionFinishedDate
|
||||
|
||||
@ -113,6 +113,10 @@ body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
@ -87,7 +87,7 @@ declare const classNames: {
|
||||
readonly isDisable: "isDisable";
|
||||
readonly icCheckCircle: "icCheckCircle";
|
||||
readonly icInTable: "icInTable";
|
||||
readonly svg: "svg";
|
||||
readonly 'svg"': 'svg"';
|
||||
readonly history: "history";
|
||||
readonly cardHistory: "cardHistory";
|
||||
readonly partner: "partner";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user