From 1203d6bb99e0d5eb5e821c5d318dfd3d5ed70963 Mon Sep 17 00:00:00 2001 From: masaaki Date: Tue, 13 Jun 2023 07:07:06 +0000 Subject: [PATCH] =?UTF-8?q?Merged=20PR=20148:=20=E7=94=BB=E9=9D=A2?= =?UTF-8?q?=E5=AE=9F=E8=A3=85=EF=BC=88=E7=AC=AC5=E9=9A=8E=E5=B1=A4?= =?UTF-8?q?=E7=94=A8=E3=83=A9=E3=82=A4=E3=82=BB=E3=83=B3=E3=82=B9=E6=83=85?= =?UTF-8?q?=E5=A0=B1=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 概要 [Task1842: 画面実装（第5階層用ライセンス情報）](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/1842) - 第5階層用ライセンス情報画面の本実装を行いました - ボタン押下確認のため、遷移後の画面（注文履歴画面、カードライセンス取り込みポップアップ）も仮実装しています - このPull Requestでの対象外 　・api.ts、app.module.scss → openapi.json及びデザイナさんcssを取り込んだもののため 　・cardLicenseImportPopup.tsx、LicenseOrderHistoryPage → 仮実装画面のため 　・licenseOrderフォルダ構成を変更しただけのため ## レビューポイント - License周りの構成について見直しを行っています。 　これまではfeatures/licenseの直下にstateやoperationを配置していましたが、 　LicenseページとURLを同じくする画面が増えるため、サブフォルダを作っています。 　features/license 　　　 　　　　　/licenseOrder // これまで直下にあったもの 　　　　　　　　/licenseSummary // 今回作成したもの 　構成について問題ないか確認をお願いします。 ## 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/Task1842?csf=1&web=1&e=OdR2mR ## 動作確認状況 - ローカルで確認 ## 補足 - 特にありません --- dictation_client/src/AppRouter.tsx | 5 + dictation_client/src/api/api.ts | 102 ++- dictation_client/src/app/store.ts | 4 +- .../license/{ => licenseOrder}/index.ts | 0 .../{ => licenseOrder}/licenseSlice.ts | 0 .../license/{ => licenseOrder}/operations.ts | 6 +- .../license/{ => licenseOrder}/selectors.ts | 0 .../license/{ => licenseOrder}/state.ts | 0 .../features/license/licenseSummary/index.ts | 4 + .../licenseSummary/licenseSummarySlice.ts | 40 ++ .../license/licenseSummary/operations.ts | 60 ++ .../license/licenseSummary/selectors.ts | 5 + .../features/license/licenseSummary/state.ts | 9 + .../pages/LicenseOrderHistoryPage/index.tsx | 34 + .../LicensePage/cardLicenseImportPopup.tsx | 58 ++ .../pages/LicensePage/licenseOrderPopup.tsx | 2 +- .../src/pages/LicensePage/licenseSummary.tsx | 169 ++++- dictation_client/src/styles/app.module.scss | 620 +++++++++++++----- dictation_client/src/translation/de.json | 18 +- dictation_client/src/translation/en.json | 18 +- dictation_client/src/translation/es.json | 18 +- dictation_client/src/translation/fr.json | 18 +- 22 files changed, 964 insertions(+), 226 deletions(-) rename dictation_client/src/features/license/{ => licenseOrder}/index.ts (100%) rename dictation_client/src/features/license/{ => licenseOrder}/licenseSlice.ts (100%) rename dictation_client/src/features/license/{ => licenseOrder}/operations.ts (90%) rename dictation_client/src/features/license/{ => licenseOrder}/selectors.ts (100%) rename dictation_client/src/features/license/{ => licenseOrder}/state.ts (100%) create mode 100644 dictation_client/src/features/license/licenseSummary/index.ts create mode 100644 dictation_client/src/features/license/licenseSummary/licenseSummarySlice.ts create mode 100644 dictation_client/src/features/license/licenseSummary/operations.ts create mode 100644 dictation_client/src/features/license/licenseSummary/selectors.ts create mode 100644 dictation_client/src/features/license/licenseSummary/state.ts create mode 100644 dictation_client/src/pages/LicenseOrderHistoryPage/index.tsx create mode 100644 dictation_client/src/pages/LicensePage/cardLicenseImportPopup.tsx diff --git a/dictation_client/src/AppRouter.tsx b/dictation_client/src/AppRouter.tsx index f9c7d63..a3d4ffd 100644 --- a/dictation_client/src/AppRouter.tsx +++ b/dictation_client/src/AppRouter.tsx @@ -15,6 +15,7 @@ import SignupCompletePage from "pages/SignupCompletePage"; import UserListPage from "pages/UserListPage"; import LicensePage from "pages/LicensePage"; import DictationPage from "pages/DictationPage"; +import LicenseOrderHistoryPage from "pages/LicenseOrderHistoryPage"; const AppRouter: React.FC = () => ( @@ -42,6 +43,10 @@ const AppRouter: React.FC = () => ( path="/license" element={} />} /> + } />} + /> } />} diff --git a/dictation_client/src/api/api.ts b/dictation_client/src/api/api.ts index e88ef14..c445cee 100644 --- a/dictation_client/src/api/api.ts +++ b/dictation_client/src/api/api.ts @@ -36,6 +36,19 @@ export interface AccessTokenResponse { */ 'accessToken': string; } +/** + * + * @export + * @interface Account + */ +export interface Account { + /** + * + * @type {number} + * @memberof Account + */ + 'accountId': number; +} /** * * @export @@ -330,6 +343,19 @@ export interface GetLicenseSummaryResponse { */ 'licenseSummaryInfo': LicenseSummaryInfo; } +/** + * + * @export + * @interface GetMyAccountResponse + */ +export interface GetMyAccountResponse { + /** + * + * @type {Account} + * @memberof GetMyAccountResponse + */ + 'account': Account; +} /** * * @export @@ -398,7 +424,7 @@ export interface GetSortCriteriaResponse { */ 'direction': string; /** - * JOB_NUMBER/STATUS/ENCRYPTION/AUTHOR_ID/FILE_NAME/FILE_LENGTH/FILE_SIZE/RECORDING_STARTED_DATE/RECORDING_FINISHED_DATE/UPLOAD_DATE/TRANSCRIPTION_STARTED_DATE/TRANSCRIPTION_FINISHED_DATE + * JOB_NUMBER/STATUS/ENCRYPTION/AUTHOR_ID/WORK_TYPE/FILE_NAME/FILE_LENGTH/FILE_SIZE/RECORDING_STARTED_DATE/RECORDING_FINISHED_DATE/UPLOAD_DATE/TRANSCRIPTION_STARTED_DATE/TRANSCRIPTION_FINISHED_DATE * @type {string} * @memberof GetSortCriteriaResponse */ @@ -547,7 +573,7 @@ export interface PostSortCriteriaRequest { */ 'direction': string; /** - * JOB_NUMBER/STATUS/ENCRYPTION/AUTHOR_ID/FILE_NAME/FILE_LENGTH/FILE_SIZE/RECORDING_STARTED_DATE/RECORDING_FINISHED_DATE/UPLOAD_DATE/TRANSCRIPTION_STARTED_DATE/TRANSCRIPTION_FINISHED_DATE + * JOB_NUMBER/STATUS/ENCRYPTION/AUTHOR_ID/WORK_TYPE/FILE_NAME/FILE_LENGTH/FILE_SIZE/RECORDING_STARTED_DATE/RECORDING_FINISHED_DATE/UPLOAD_DATE/TRANSCRIPTION_STARTED_DATE/TRANSCRIPTION_FINISHED_DATE * @type {string} * @memberof PostSortCriteriaRequest */ @@ -1031,6 +1057,40 @@ export const AccountsApiAxiosParamCreator = function (configuration?: Configurat localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers}; localVarRequestOptions.data = serializeDataIfNeeded(getLicenseSummaryRequest, localVarRequestOptions, configuration) + return { + url: toPathString(localVarUrlObj), + options: localVarRequestOptions, + }; + }, + /** + * ログインしているユーザーのアカウント情報を取得します + * @summary + * @param {*} [options] Override http request option. + * @throws {RequiredError} + */ + getMyAccount: async (options: AxiosRequestConfig = {}): Promise => { + const localVarPath = `/accounts/me`; + // use dummy base URL string because the URL constructor only accepts absolute URLs. + const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL); + let baseOptions; + if (configuration) { + baseOptions = configuration.baseOptions; + } + + const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options}; + const localVarHeaderParameter = {} as any; + const localVarQueryParameter = {} as any; + + // authentication bearer required + // http bearer authentication required + await setBearerAuthToObject(localVarHeaderParameter, configuration) + + + + setSearchParams(localVarUrlObj, localVarQueryParameter); + let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {}; + localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers}; + return { url: toPathString(localVarUrlObj), options: localVarRequestOptions, @@ -1068,6 +1128,16 @@ export const AccountsApiFp = function(configuration?: Configuration) { const localVarAxiosArgs = await localVarAxiosParamCreator.getLicenseSummary(getLicenseSummaryRequest, options); return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration); }, + /** + * ログインしているユーザーのアカウント情報を取得します + * @summary + * @param {*} [options] Override http request option. + * @throws {RequiredError} + */ + async getMyAccount(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise> { + const localVarAxiosArgs = await localVarAxiosParamCreator.getMyAccount(options); + return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration); + }, } }; @@ -1098,6 +1168,15 @@ export const AccountsApiFactory = function (configuration?: Configuration, baseP getLicenseSummary(getLicenseSummaryRequest: GetLicenseSummaryRequest, options?: any): AxiosPromise { return localVarFp.getLicenseSummary(getLicenseSummaryRequest, options).then((request) => request(axios, basePath)); }, + /** + * ログインしているユーザーのアカウント情報を取得します + * @summary + * @param {*} [options] Override http request option. + * @throws {RequiredError} + */ + getMyAccount(options?: any): AxiosPromise { + return localVarFp.getMyAccount(options).then((request) => request(axios, basePath)); + }, }; }; @@ -1131,6 +1210,17 @@ export class AccountsApi extends BaseAPI { public getLicenseSummary(getLicenseSummaryRequest: GetLicenseSummaryRequest, options?: AxiosRequestConfig) { return AccountsApiFp(this.configuration).getLicenseSummary(getLicenseSummaryRequest, options).then((request) => request(this.axios, this.basePath)); } + + /** + * ログインしているユーザーのアカウント情報を取得します + * @summary + * @param {*} [options] Override http request option. + * @throws {RequiredError} + * @memberof AccountsApi + */ + public getMyAccount(options?: AxiosRequestConfig) { + return AccountsApiFp(this.configuration).getMyAccount(options).then((request) => request(this.axios, this.basePath)); + } } @@ -2174,7 +2264,7 @@ export const TasksApiAxiosParamCreator = function (configuration?: Configuration * @param {number} [offset] オフセット（何件目から取得するか　設定しない場合はデフォルト値） * @param {string} [status] 取得対象とするタスクのステータス。カンマ(,)区切りで複数指定可能。設定されない場合はすべてのステータスを取得対象とする。許容するステータスの値は次の通り: Uploaded / Pending / InProgress / Finished / Backup * @param {string} [direction] ASC/DESC - * @param {string} [paramName] JOB_NUMBER/STATUS/ENCRYPTION/AUTHOR_ID/FILE_NAME/FILE_LENGTH/FILE_SIZE/RECORDING_STARTED_DATE/RECORDING_FINISHED_DATE/UPLOAD_DATE/TRANSCRIPTION_STARTED_DATE/TRANSCRIPTION_FINISHED_DATE + * @param {string} [paramName] JOB_NUMBER/STATUS/ENCRYPTION/AUTHOR_ID/WORK_TYPE/FILE_NAME/FILE_LENGTH/FILE_SIZE/RECORDING_STARTED_DATE/RECORDING_FINISHED_DATE/UPLOAD_DATE/TRANSCRIPTION_STARTED_DATE/TRANSCRIPTION_FINISHED_DATE * @param {*} [options] Override http request option. * @throws {RequiredError} */ @@ -2374,7 +2464,7 @@ export const TasksApiFp = function(configuration?: Configuration) { * @param {number} [offset] オフセット（何件目から取得するか　設定しない場合はデフォルト値） * @param {string} [status] 取得対象とするタスクのステータス。カンマ(,)区切りで複数指定可能。設定されない場合はすべてのステータスを取得対象とする。許容するステータスの値は次の通り: Uploaded / Pending / InProgress / Finished / Backup * @param {string} [direction] ASC/DESC - * @param {string} [paramName] JOB_NUMBER/STATUS/ENCRYPTION/AUTHOR_ID/FILE_NAME/FILE_LENGTH/FILE_SIZE/RECORDING_STARTED_DATE/RECORDING_FINISHED_DATE/UPLOAD_DATE/TRANSCRIPTION_STARTED_DATE/TRANSCRIPTION_FINISHED_DATE + * @param {string} [paramName] JOB_NUMBER/STATUS/ENCRYPTION/AUTHOR_ID/WORK_TYPE/FILE_NAME/FILE_LENGTH/FILE_SIZE/RECORDING_STARTED_DATE/RECORDING_FINISHED_DATE/UPLOAD_DATE/TRANSCRIPTION_STARTED_DATE/TRANSCRIPTION_FINISHED_DATE * @param {*} [options] Override http request option. * @throws {RequiredError} */ @@ -2471,7 +2561,7 @@ export const TasksApiFactory = function (configuration?: Configuration, basePath * @param {number} [offset] オフセット（何件目から取得するか　設定しない場合はデフォルト値） * @param {string} [status] 取得対象とするタスクのステータス。カンマ(,)区切りで複数指定可能。設定されない場合はすべてのステータスを取得対象とする。許容するステータスの値は次の通り: Uploaded / Pending / InProgress / Finished / Backup * @param {string} [direction] ASC/DESC - * @param {string} [paramName] JOB_NUMBER/STATUS/ENCRYPTION/AUTHOR_ID/FILE_NAME/FILE_LENGTH/FILE_SIZE/RECORDING_STARTED_DATE/RECORDING_FINISHED_DATE/UPLOAD_DATE/TRANSCRIPTION_STARTED_DATE/TRANSCRIPTION_FINISHED_DATE + * @param {string} [paramName] JOB_NUMBER/STATUS/ENCRYPTION/AUTHOR_ID/WORK_TYPE/FILE_NAME/FILE_LENGTH/FILE_SIZE/RECORDING_STARTED_DATE/RECORDING_FINISHED_DATE/UPLOAD_DATE/TRANSCRIPTION_STARTED_DATE/TRANSCRIPTION_FINISHED_DATE * @param {*} [options] Override http request option. * @throws {RequiredError} */ @@ -2575,7 +2665,7 @@ export class TasksApi extends BaseAPI { * @param {number} [offset] オフセット（何件目から取得するか　設定しない場合はデフォルト値） * @param {string} [status] 取得対象とするタスクのステータス。カンマ(,)区切りで複数指定可能。設定されない場合はすべてのステータスを取得対象とする。許容するステータスの値は次の通り: Uploaded / Pending / InProgress / Finished / Backup * @param {string} [direction] ASC/DESC - * @param {string} [paramName] JOB_NUMBER/STATUS/ENCRYPTION/AUTHOR_ID/FILE_NAME/FILE_LENGTH/FILE_SIZE/RECORDING_STARTED_DATE/RECORDING_FINISHED_DATE/UPLOAD_DATE/TRANSCRIPTION_STARTED_DATE/TRANSCRIPTION_FINISHED_DATE + * @param {string} [paramName] JOB_NUMBER/STATUS/ENCRYPTION/AUTHOR_ID/WORK_TYPE/FILE_NAME/FILE_LENGTH/FILE_SIZE/RECORDING_STARTED_DATE/RECORDING_FINISHED_DATE/UPLOAD_DATE/TRANSCRIPTION_STARTED_DATE/TRANSCRIPTION_FINISHED_DATE * @param {*} [options] Override http request option. * @throws {RequiredError} * @memberof TasksApi diff --git a/dictation_client/src/app/store.ts b/dictation_client/src/app/store.ts index 7abc151..28da67c 100644 --- a/dictation_client/src/app/store.ts +++ b/dictation_client/src/app/store.ts @@ -5,7 +5,8 @@ import signup from "features/signup/signupSlice"; import verify from "features/verify/verifySlice"; import ui from "features/ui/uiSlice"; import user from "features/user/userSlice"; -import license from "features/license/licenseSlice"; +import license from "features/license/licenseOrder/licenseSlice"; +import licenseSummary from "features/license/licenseSummary/licenseSummarySlice"; import dictation from "features/dictation/dictationSlice"; export const store = configureStore({ @@ -17,6 +18,7 @@ export const store = configureStore({ ui, user, license, + licenseSummary, dictation, }, }); diff --git a/dictation_client/src/features/license/index.ts b/dictation_client/src/features/license/licenseOrder/index.ts similarity index 100% rename from dictation_client/src/features/license/index.ts rename to dictation_client/src/features/license/licenseOrder/index.ts diff --git a/dictation_client/src/features/license/licenseSlice.ts b/dictation_client/src/features/license/licenseOrder/licenseSlice.ts similarity index 100% rename from dictation_client/src/features/license/licenseSlice.ts rename to dictation_client/src/features/license/licenseOrder/licenseSlice.ts diff --git a/dictation_client/src/features/license/operations.ts b/dictation_client/src/features/license/licenseOrder/operations.ts similarity index 90% rename from dictation_client/src/features/license/operations.ts rename to dictation_client/src/features/license/licenseOrder/operations.ts index 75bb187..77d97d9 100644 --- a/dictation_client/src/features/license/operations.ts +++ b/dictation_client/src/features/license/licenseOrder/operations.ts @@ -2,9 +2,9 @@ import { createAsyncThunk } from "@reduxjs/toolkit"; import type { RootState } from "app/store"; import { getTranslationID } from "translation"; import { openSnackbar } from "features/ui/uiSlice"; -import { LicensesApi } from "../../api/api"; -import { Configuration } from "../../api/configuration"; -import { ErrorObject, createErrorObject } from "../../common/errors"; +import { LicensesApi } from "../../../api/api"; +import { Configuration } from "../../../api/configuration"; +import { ErrorObject, createErrorObject } from "../../../common/errors"; export const orderLicenseAsync = createAsyncThunk< { diff --git a/dictation_client/src/features/license/selectors.ts b/dictation_client/src/features/license/licenseOrder/selectors.ts similarity index 100% rename from dictation_client/src/features/license/selectors.ts rename to dictation_client/src/features/license/licenseOrder/selectors.ts diff --git a/dictation_client/src/features/license/state.ts b/dictation_client/src/features/license/licenseOrder/state.ts similarity index 100% rename from dictation_client/src/features/license/state.ts rename to dictation_client/src/features/license/licenseOrder/state.ts diff --git a/dictation_client/src/features/license/licenseSummary/index.ts b/dictation_client/src/features/license/licenseSummary/index.ts new file mode 100644 index 0000000..7394f79 --- /dev/null +++ b/dictation_client/src/features/license/licenseSummary/index.ts @@ -0,0 +1,4 @@ +export * from "./state"; +export * from "./operations"; +export * from "./selectors"; +export * from "./licenseSummarySlice"; diff --git a/dictation_client/src/features/license/licenseSummary/licenseSummarySlice.ts b/dictation_client/src/features/license/licenseSummary/licenseSummarySlice.ts new file mode 100644 index 0000000..33e7511 --- /dev/null +++ b/dictation_client/src/features/license/licenseSummary/licenseSummarySlice.ts @@ -0,0 +1,40 @@ +import { createSlice } from "@reduxjs/toolkit"; +import { LicenseSummaryState } from "./state"; +import { getLicenseSummaryAsync } from "./operations"; + +const initialState: LicenseSummaryState = { + domain: { + licenseSummaryInfo: { + totalLicense: 0, + allocatedLicense: 0, + reusableLicense: 0, + freeLicense: 0, + expiringWithin14daysLicense: 0, + issueRequesting: 0, + numberOfRequesting: 0, + shortage: 0, + storageSize: 0, + usedSize: 0, + isAccountLock: false, + }, + }, +}; + +export const licenseSummarySlice = createSlice({ + name: "licenseSummary", + initialState, + reducers: { + cleanupApps: (state) => { + state.domain = initialState.domain; + }, + }, + extraReducers: (builder) => { + builder.addCase(getLicenseSummaryAsync.fulfilled, (state, action) => { + state.domain.licenseSummaryInfo = action.payload.licenseSummaryInfo; + }); + }, +}); + +export const { cleanupApps } = licenseSummarySlice.actions; + +export default licenseSummarySlice.reducer; diff --git a/dictation_client/src/features/license/licenseSummary/operations.ts b/dictation_client/src/features/license/licenseSummary/operations.ts new file mode 100644 index 0000000..49cf8ad --- /dev/null +++ b/dictation_client/src/features/license/licenseSummary/operations.ts @@ -0,0 +1,60 @@ +import { createAsyncThunk } from "@reduxjs/toolkit"; +import type { RootState } from "app/store"; +import { getTranslationID } from "translation"; +import { openSnackbar } from "features/ui/uiSlice"; +import { AccountsApi, GetLicenseSummaryResponse } from "../../../api/api"; +import { Configuration } from "../../../api/configuration"; +import { ErrorObject, createErrorObject } from "../../../common/errors"; + +export const getLicenseSummaryAsync = createAsyncThunk< + // 正常時の戻り値の型 + GetLicenseSummaryResponse, + // 引数 + void, + { + // rejectした時の返却値の型 + rejectValue: { + error: ErrorObject; + }; + } +>("licenses/getLicenseSummaryAsync", async (args, thunkApi) => { + // apiのConfigurationを取得する + const { getState } = thunkApi; + const state = getState() as RootState; + const { configuration, accessToken } = state.auth; + const config = new Configuration(configuration); + const accountsApi = new AccountsApi(config); + + try { + const getMyAccountResponse = await accountsApi.getMyAccount({ + headers: { authorization: `Bearer ${accessToken}` }, + }); + + // 自分のアカウントID取得、取得したアカウントIDを使用して表示情報を取得する + const { accountId } = getMyAccountResponse.data.account; + + const getLicenseSummaryResponse = await accountsApi.getLicenseSummary( + { accountId }, + { + headers: { authorization: `Bearer ${accessToken}` }, + } + ); + return { + licenseSummaryInfo: getLicenseSummaryResponse.data.licenseSummaryInfo, + }; + } catch (e) { + // e ⇒ errorObjectに変換" + const error = createErrorObject(e); + + const errorMessage = getTranslationID("common.message.internalServerError"); + + thunkApi.dispatch( + openSnackbar({ + level: "error", + message: errorMessage, + }) + ); + + return thunkApi.rejectWithValue({ error }); + } +}); diff --git a/dictation_client/src/features/license/licenseSummary/selectors.ts b/dictation_client/src/features/license/licenseSummary/selectors.ts new file mode 100644 index 0000000..8b3707f --- /dev/null +++ b/dictation_client/src/features/license/licenseSummary/selectors.ts @@ -0,0 +1,5 @@ +import { RootState } from "app/store"; + +// 各値はそのまま画面に表示するので、licenseSummaryInfoとして値を取得する +export const selecLicenseSummaryInfo = (state: RootState) => + state.licenseSummary.domain.licenseSummaryInfo; diff --git a/dictation_client/src/features/license/licenseSummary/state.ts b/dictation_client/src/features/license/licenseSummary/state.ts new file mode 100644 index 0000000..b56743e --- /dev/null +++ b/dictation_client/src/features/license/licenseSummary/state.ts @@ -0,0 +1,9 @@ +import { LicenseSummaryInfo } from "../../../api/api"; + +export interface LicenseSummaryState { + domain: Domain; +} + +export interface Domain { + licenseSummaryInfo: LicenseSummaryInfo; +} diff --git a/dictation_client/src/pages/LicenseOrderHistoryPage/index.tsx b/dictation_client/src/pages/LicenseOrderHistoryPage/index.tsx new file mode 100644 index 0000000..81c8be7 --- /dev/null +++ b/dictation_client/src/pages/LicenseOrderHistoryPage/index.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import Footer from "components/footer"; +import Header from "components/header"; +import styles from "styles/app.module.scss"; +import { UpdateTokenTimer } from "components/auth/updateTokenTimer"; + +const PartnerLicense: React.FC = (): JSX.Element => ( + // 表示確認用の仮画面 +
+
+ +
+
+
+

Order History

+
+
+ +
+
+
+); + +export default PartnerLicense; diff --git a/dictation_client/src/pages/LicensePage/cardLicenseImportPopup.tsx b/dictation_client/src/pages/LicensePage/cardLicenseImportPopup.tsx new file mode 100644 index 0000000..d2f64da --- /dev/null +++ b/dictation_client/src/pages/LicensePage/cardLicenseImportPopup.tsx @@ -0,0 +1,58 @@ +import React, { useCallback } from "react"; +import styles from "styles/app.module.scss"; +import close from "../../assets/images/close.svg"; + +interface CardLicenseImportPopupProps { + onClose: () => void; +} + +export const CardLicenseImportPopup: React.FC = ( + props +) => { + const { onClose } = props; + + // ポップアップを閉じる処理 + const closePopup = useCallback(() => { + onClose(); + }, [onClose]); + + // HTML + return ( +
+
+

+ Import License Key + +

+ +
+
+
+
Key number
+
+ +
+
+ +
+
+
+
+
+ ); +}; diff --git a/dictation_client/src/pages/LicensePage/licenseOrderPopup.tsx b/dictation_client/src/pages/LicensePage/licenseOrderPopup.tsx index ccad0f2..fcb205d 100644 --- a/dictation_client/src/pages/LicensePage/licenseOrderPopup.tsx +++ b/dictation_client/src/pages/LicensePage/licenseOrderPopup.tsx @@ -12,7 +12,7 @@ import { selectInputValidationErrors, orderLicenseAsync, cleanupApps, -} from "features/license"; +} from "features/license/licenseOrder"; import close from "../../assets/images/close.svg"; interface LicenseOrderPopupProps { diff --git a/dictation_client/src/pages/LicensePage/licenseSummary.tsx b/dictation_client/src/pages/LicensePage/licenseSummary.tsx index 8294fa9..5075497 100644 --- a/dictation_client/src/pages/LicensePage/licenseSummary.tsx +++ b/dictation_client/src/pages/LicensePage/licenseSummary.tsx @@ -1,30 +1,48 @@ -import { useMsal } from "@azure/msal-react"; -import React, { useCallback, useState } from "react"; -import { AppDispatch } from "app/store"; +import React, { useCallback, useEffect, useState } from "react"; import { UpdateTokenTimer } from "components/auth/updateTokenTimer"; import Footer from "components/footer"; import Header from "components/header"; -import { clearToken } from "features/auth"; -import { useDispatch } from "react-redux"; import styles from "styles/app.module.scss"; import { getTranslationID } from "translation"; import { useTranslation } from "react-i18next"; +import { AppDispatch } from "app/store"; +import { useDispatch, useSelector } from "react-redux"; +import { + getLicenseSummaryAsync, + selecLicenseSummaryInfo, +} from "features/license/licenseSummary"; import postAdd from "../../assets/images/post_add.svg"; import history from "../../assets/images/history.svg"; import key from "../../assets/images/key.svg"; +import lock from "../../assets/images/lock.svg"; +import lockOpen from "../../assets/images/lock_open.svg"; import { LicenseOrderPopup } from "./licenseOrderPopup"; +import { CardLicenseImportPopup } from "./cardLicenseImportPopup"; const LicenseSummary: React.FC = (): JSX.Element => { - const { instance } = useMsal(); const dispatch: AppDispatch = useDispatch(); const [t] = useTranslation(); + // popup制御関係 const [islicenseOrderPopupOpen, setIslicenseOrderPopupOpen] = useState(false); + const [isCardLicenseImportPopupOpen, setIsCardLicenseImportPopupOpen] = + useState(false); const onlicenseOrderOpen = useCallback(() => { setIslicenseOrderPopupOpen(true); }, [setIslicenseOrderPopupOpen]); + const onCardLicenseImportOpen = useCallback(() => { + setIsCardLicenseImportPopupOpen(true); + }, [setIsCardLicenseImportPopupOpen]); + + // apiからの値取得関係 + const licenseSummaryInfo = useSelector(selecLicenseSummaryInfo); + + useEffect(() => { + dispatch(getLicenseSummaryAsync()); + }, [dispatch]); + return ( <> {/* isPopupOpenがfalseの場合はポップアップのhtmlを生成しないように対応。これによりポップアップは都度生成されて初期化の考慮が減る */} @@ -35,7 +53,13 @@ const LicenseSummary: React.FC = (): JSX.Element => { }} /> )} - {/* TODO 現状（PBI1221）はライセンス注文PUを起動するためのボタンのみ。別途ライセンス注文を実装するPBIで全般的に見直し。 */} + {isCardLicenseImportPopupOpen && ( + { + setIsCardLicenseImportPopupOpen(false); + }} + /> + )}
@@ -44,59 +68,146 @@ const LicenseSummary: React.FC = (): JSX.Element => {

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

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

+
+
+ {t( + getTranslationID("LicenseSummaryPage.label.totalLicense") + )} +
+
{licenseSummaryInfo.totalLicense}
+
+ {t( + getTranslationID( + "LicenseSummaryPage.label.allocatedLicense" + ) + )} +
+
{licenseSummaryInfo.allocatedLicense}
+
+ {t( + getTranslationID( + "LicenseSummaryPage.label.reusableLicense" + ) + )} +
+
{licenseSummaryInfo.reusableLicense}
+
+ {t( + getTranslationID("LicenseSummaryPage.label.freeLicense") + )} +
+
{licenseSummaryInfo.freeLicense}
+
+ {t( + getTranslationID( + "LicenseSummaryPage.label.expiringWithin14daysLicense" + ) + )} +
+
{licenseSummaryInfo.expiringWithin14daysLicense}
+
+ {t( + getTranslationID( + "LicenseSummaryPage.label.issueRequesting" + ) + )} +
+
{licenseSummaryInfo.issueRequesting}
+
+ {t( + getTranslationID( + "LicenseSummaryPage.label.numberOfRequesting" + ) + )} +
+
{licenseSummaryInfo.numberOfRequesting}
+
+ {t(getTranslationID("LicenseSummaryPage.label.shortage"))} +
+
{licenseSummaryInfo.shortage}
+
+ {t( + getTranslationID("LicenseSummaryPage.label.storageSize") + )} +
+
{licenseSummaryInfo.storageSize}GB
+
+ {t(getTranslationID("LicenseSummaryPage.label.usedSize"))} +
+
{licenseSummaryInfo.usedSize}GB
+
+ {t( + getTranslationID("LicenseSummaryPage.label.accountLock") + )} +
+
+ {licenseSummaryInfo.isAccountLock && ( + + )} + {!licenseSummaryInfo.isAccountLock && ( + + )} +
+
- - {/* TODO 画面デザインにはないが、試験時に便利なので配置しておく。ライセンス注文を実装するPBIで正式なサインアウトのレイアウトに直す */} -
- -
diff --git a/dictation_client/src/styles/app.module.scss b/dictation_client/src/styles/app.module.scss index 6b1b2d9..aa0dcf7 100644 --- a/dictation_client/src/styles/app.module.scss +++ b/dictation_client/src/styles/app.module.scss @@ -13,9 +13,10 @@ flex-wrap: wrap; justify-content: space-between; box-shadow: 0 0 3px #282828; - background: linear-gradient(#ffffff, #ffffff 70%, #f0f0f0 100%); + background: linear-gradient(#ffffff, #ffffff 70%, #F0F0F0 100%); z-index: 4; } + .headerLogo { margin: 1.2rem 2rem 1.5rem; font-size: 1.71rem; @@ -23,9 +24,11 @@ letter-spacing: 0.07rem; font-weight: normal; } + .headerLogo img { width: 280px; } + .headerSub { margin: 1.4rem 2rem 1rem; font-size: 1.8rem; @@ -35,24 +38,28 @@ font-weight: 600; text-align: right; } + .headerMenu { width: 100%; } + .headerMenu ul { display: flex; flex-wrap: wrap; padding: 0 2rem; } + .headerMenu ul li { font-size: 1.3rem; line-height: 2rem; letter-spacing: 0.07rem; font-weight: normal; - border-left: 1px #e6e6e6 solid; + border-left: 1px #E6E6E6 solid; } + .headerMenu ul li a { display: block; - padding: 0.2rem 2.5rem 0.2rem; + padding: .2rem 2.5rem .2rem; color: #333333; text-decoration: none; -moz-transition: all 0.3s ease-out; @@ -60,20 +67,23 @@ -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } + .headerMenu ul li a:hover { - background: #f5f5f5; + background: #F5F5F5; text-decoration: underline; } + .headerMenu ul li a.isActive { font-weight: 600; pointer-events: none; position: relative; } + .headerMenu ul li a.isActive::after { - content: ""; - border-right: 0.7rem transparent solid; + content: ''; + border-right: .7rem transparent solid; border-bottom: 0.7rem #282828 solid; - border-left: 0.7rem transparent solid; + border-left: .7rem transparent solid; position: absolute; bottom: -4px; left: 50%; @@ -83,12 +93,13 @@ .accountInfo { position: absolute; right: 2rem; - bottom: 0.3rem; + bottom: .3rem; font-size: 0.9rem; line-height: 1.6rem; letter-spacing: 0.04rem; font-weight: normal; } + .accountIcon { width: 1.4rem; vertical-align: top; @@ -104,6 +115,7 @@ _:-ms-lang(x)::-ms-backdrop, .main { grid-area: main; } + .mainSmall { width: 600px; margin: 0 auto; @@ -122,7 +134,7 @@ _:-ms-lang(x)::-ms-backdrop, .footer { grid-area: footer; - padding: 0.6rem 0; + padding: .6rem 0; text-align: center; font-size: 11px; line-height: 1.45; @@ -140,20 +152,23 @@ h3 .brCrumb { letter-spacing: 0.04rem; font-weight: normal; } + h2 .brCrumb::before, h3 .brCrumb::before { content: "-"; } + h2 .brCrumb .tlIcon, h3 .brCrumb .tlIcon { width: 1.6rem; - margin: 0 0.2rem 0 0.5rem; + margin: 0 .2rem 0 .5rem; vertical-align: text-top; } .brCrumbAcc { margin-bottom: 1rem; } + .brCrumbAcc li { padding-left: 1.1rem; font-size: 1.2rem; @@ -162,8 +177,9 @@ h3 .brCrumb .tlIcon { font-weight: normal; position: relative; } + .brCrumbAcc li::before { - content: ""; + content: ''; border-top: 8px #333333 solid; border-right: 6px transparent solid; border-left: 6px transparent solid; @@ -172,9 +188,11 @@ h3 .brCrumb .tlIcon { left: 0; transform: translateY(-50%); } + .brCrumbAcc li:nth-of-type(2) { margin-left: 1.1rem; } + .brCrumbAcc li:nth-of-type(3) { margin-left: 2.2rem; } @@ -182,12 +200,12 @@ h3 .brCrumb .tlIcon { .buttonNormal { display: inline-block; width: 15rem; - padding: 0.8rem 2rem; + padding: .8rem 2rem; color: #ffffff; background: #004086; border: 1px #004086 solid; text-decoration: none; - border-radius: 0.3rem; + border-radius: .3rem; position: relative; font-size: 14px; line-height: 1.4; @@ -198,29 +216,34 @@ h3 .brCrumb .tlIcon { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } + .buttonNormal:hover { background: rgba(0, 64, 134, 0.7); } + .buttonNormal.small { width: auto; - padding: 0.75rem 2rem; + padding: .75rem 2rem; } + .buttonNormal.red { background: #e60000; border: 1px #e60000 solid; } + .buttonNormal.red:hover { background: rgba(230, 0, 0, 0.7); } + .buttonBase { display: inline-block; width: 15rem; - padding: 0.8rem 2rem; + padding: .8rem 2rem; color: #004086; background: #ffffff; border: 1px #004086 solid; text-decoration: none; - border-radius: 0.3rem; + border-radius: .3rem; position: relative; font-size: 14px; line-height: 1.4; @@ -231,16 +254,19 @@ h3 .brCrumb .tlIcon { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } + .buttonBase:hover { background: rgba(0, 64, 134, 0.04); } + .buttonBase.small { width: auto; - padding: 0.75rem 2rem; + padding: .75rem 2rem; } + .buttonText { display: inline-block; - padding: 0.8rem 0; + padding: .8rem 0; color: #004086; text-decoration: none; font-size: 14px; @@ -252,12 +278,14 @@ h3 .brCrumb .tlIcon { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } + .buttonText:hover { - opacity: 0.7; + opacity: .7; } + .buttonText.small { width: auto; - padding: 0.75rem 0; + padding: .75rem 0; } .formList { @@ -265,6 +293,7 @@ h3 .brCrumb .tlIcon { flex-wrap: wrap; margin-bottom: 3rem; } + .formList dt, .formList dd { font-size: 14px; @@ -272,47 +301,56 @@ h3 .brCrumb .tlIcon { letter-spacing: 0; font-weight: normal; } + .formList dt { width: 22%; - padding: 0.5rem 4% 0; + padding: .5rem 4% 0; text-align: right; } + .formList dt.formTitle { width: 100%; - padding: 0.5rem 4%; + padding: .5rem 4%; text-align: left; font-size: 1.2rem; line-height: 1.7; letter-spacing: 0.07rem; font-weight: normal; } + .formList dt.overLine { padding: 0 4% 0; line-height: 1.4; } + .formList dd { width: 66%; padding-right: 4%; margin-bottom: 1.5rem; } + .formList dd.full { width: 100%; padding-right: 0; background: none; } + .formList.hasbg { border-top: 2px #282828 solid; - background: #fafafa; + background: #FAFAFA; } + .form select option[disabled] { - background: #f5f5f5; + background: #F5F5F5; } + .form select option[value=""] { color: #999999; } + .formInput { width: 350px; - padding: 0.6rem 0.8rem; + padding: .6rem .8rem; border: 1px #999999 solid; background: #ffffff; box-sizing: border-box; @@ -321,22 +359,28 @@ h3 .brCrumb .tlIcon { letter-spacing: 0; font-weight: normal; } + .formInput:focus { outline: 0; } + .formInput[readonly] { - border: 1px #e6e6e6 solid; - background: #e6e6e6; + border: 1px #E6E6E6 solid; + background: #E6E6E6; } + .formInput.isError { background: rgba(229, 0, 0, 0.08); } -.formInput.password[type="password"] + span { + +.formInput.password[type="password"]+span { background: url(../assets/images/visibility_off.svg) no-repeat top right; } -.formInput.password[type="text"] + span { + +.formInput.password[type="text"]+span { background: url(../assets/images/visibility.svg) no-repeat top right; } + .formIconEye { display: inline-block; width: 40px; @@ -346,71 +390,80 @@ h3 .brCrumb .tlIcon { margin-right: 45px; position: relative; } + .formIconEye img { width: 2.5rem; } + .formCheck { width: 1.2rem; height: 1.2rem; - margin-right: 0.5rem; + margin-right: .5rem; accent-color: #282828; vertical-align: bottom; } + .formRadio { width: 1.2rem; height: 1.2rem; - margin-top: -0.2rem; - margin-right: 0.3rem; + margin-top: -.2rem; + margin-right: .3rem; accent-color: #282828; vertical-align: middle; } + .form label { display: inline-block; - padding: 0.6rem 0; + padding: .6rem 0; margin-right: 1rem; cursor: pointer; } + .formComment { display: inline-block; - padding-top: 0.5rem; + padding-top: .5rem; color: #999999; font-size: 13px; line-height: 1.4; letter-spacing: 0; font-weight: normal; } + .formError { display: block; - padding-top: 0.3rem; + padding-top: .3rem; color: #e60000; font-size: 13px; line-height: 1.4; letter-spacing: 0; font-weight: normal; } + .formConfirm { width: 350px; - padding: 0.6rem 0.6rem; - background: #f0f0f0; + padding: .6rem .6rem; + background: #F0F0F0; box-sizing: border-box; } + .formSubmit { min-width: 15rem; - padding: 0.8rem 2rem; + padding: .8rem 2rem; border: 1px #999999 solid; font-size: 14px; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; - opacity: 0.7; + opacity: .7; pointer-events: none; - border-radius: 0.3rem; + border-radius: .3rem; position: relative; -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; } + .formSubmit.isActive { cursor: pointer; opacity: 1; @@ -419,11 +472,13 @@ h3 .brCrumb .tlIcon { border: 1px #004086 solid; pointer-events: auto; } + .formSubmit.isActive:hover { background: rgba(0, 94, 184, 0.7); } + .formButton { - padding: 0.8rem 0.8rem; + padding: .8rem .8rem; border: 1px #999999 solid; background: #ffffff; font-size: 14px; @@ -431,19 +486,21 @@ h3 .brCrumb .tlIcon { letter-spacing: 0.04rem; font-weight: normal; cursor: pointer; - border-radius: 0.3rem; + border-radius: .3rem; position: relative; -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; } + .formButton:hover { - background: #f0f0f0; + background: #F0F0F0; } + .formBack { width: 15rem; - padding: 0.8rem 2rem; + padding: .8rem 2rem; border: 1px #999999 solid; background: #ffffff; font-size: 14px; @@ -456,11 +513,13 @@ h3 .brCrumb .tlIcon { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } + .formBack:hover { - background: #f0f0f0; + background: #F0F0F0; } + .formButtonTx { - padding: 0.2rem 2rem; + padding: .2rem 2rem; border: none; background: none; color: #0084b2; @@ -474,9 +533,11 @@ h3 .brCrumb .tlIcon { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } + .formButtonTx:hover { text-decoration: underline; } + .formDone { width: 100px; } @@ -487,23 +548,27 @@ h3 .brCrumb .tlIcon { flex-wrap: wrap; border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1); } + .listVertical dt, .listVertical dd { - padding: 0.8rem 4%; + padding: .8rem 4%; font-size: 14px; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; } + .listVertical dt:nth-of-type(odd), .listVertical dd:nth-of-type(odd) { - background: #f5f5f5; + background: #F5F5F5; } + .listVertical dt { width: 42%; text-align: left; position: relative; } + .listVertical dd { width: 42%; text-align: right; @@ -513,26 +578,29 @@ h3 .brCrumb .tlIcon { width: 50px; height: 50px; margin: 40px auto; - border: 3px solid #e6e6e6; + border: 3px solid #E6E6E6; border-top: 3px solid transparent; border-radius: 50%; - animation: spin 0.8s linear 0s infinite; + animation: spin .8s linear 0s infinite; } @keyframes spin { from { transform: rotate(0); } + to { transform: rotate(359deg); } } + .modal { -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; } + .modal.isShow { width: 100%; height: 100%; @@ -540,9 +608,11 @@ h3 .brCrumb .tlIcon { position: fixed; z-index: 5; } + .modal.isShow .modalBox { display: block; } + .modalBox { display: none; width: 600px; @@ -552,59 +622,71 @@ h3 .brCrumb .tlIcon { top: 50%; left: 50%; transform: translate(-50%, -50%); - border-radius: 0.3rem; + border-radius: .3rem; overflow: auto; } + .modalTitle { display: flex; justify-content: space-between; - padding: 0.6rem 4% 0.6rem; + padding: .6rem 4% .6rem; background: #ffffff; font-size: 1.4rem; line-height: 2rem; letter-spacing: 0; font-weight: 600; } + .modalTitle img:hover { cursor: pointer; } + .modalTitle img.off { cursor: none; pointer-events: none; - opacity: 0.4; + opacity: .4; } + .modalTitleIcon { width: 1rem; } + .modal .formList { margin-bottom: 0; } + .modal .formList.hasbg { border-top: none; } + .modal .formList dd { - margin-bottom: 0.5rem; + margin-bottom: .5rem; } + .modal .formList dd.last { margin-bottom: 1.5rem; } + .modal .formList .slideSet { width: 100%; display: flex; } + .modal .formInput { - padding: 0.5rem 0.8rem; + padding: .5rem .8rem; } + .modal .form label { - padding: 0.5rem 0 0.2rem; + padding: .5rem 0 .2rem; } .pageHeader { - padding: 0.3rem 2.5rem 0.2rem; + padding: .3rem 2.5rem .2rem; background: #282828; color: #ffffff; margin-bottom: 2rem; } + .pageTitle { display: inline-block; padding-right: 1rem; @@ -613,25 +695,29 @@ h3 .brCrumb .tlIcon { letter-spacing: 0.07rem; font-weight: 500; } + .pageTx { display: inline-block; } .pagenation { margin-bottom: 3rem; - text-align: right; /*&-nav{ a{ display: inline-block; padding: .5rem; margin-right: .5rem; color: $color-blues; + text-align: right; + /*&-nav{ a{ display: inline-block; padding: .5rem; margin-right: .5rem; color: $color-blues; @include font-styling(.9rem, 1.6, 0.04rem); &:last-child{ margin-right: 0; } &:visited{ color: $color-blues; } svg{ margin: 0 .5rem; width: .5rem; vertical-align: middle; fill: $color-blues; &.prev{ } } &:hover{ opacity: .7; } &[href=""]{ color: $color-subtxt; text-decoration: none; pointer-events: none; svg{ fill: $color-subtxt; } } } }*/ } + .pagenationNav { font-size: 0.8rem; line-height: 1.6; letter-spacing: 0.04rem; font-weight: normal; } + .pagenationNav a { display: inline-block; margin: 0 1px; - padding: 0.3rem 0.7rem; + padding: .3rem .7rem; font-size: 13px; line-height: 1.4; letter-spacing: 0.04rem; @@ -639,17 +725,20 @@ h3 .brCrumb .tlIcon { text-decoration: none; color: #333333; border: 1px #a5a5a5 solid; - border-radius: 0.2rem; - opacity: 0.4; + border-radius: .2rem; + opacity: .4; pointer-events: none; } + .pagenationNav a.isActive { opacity: 1; pointer-events: inherit; } + .pagenationNav a.isActive:hover { - background: #f5f5f5; + background: #F5F5F5; } + .pagenationTotal { color: #999999; } @@ -663,14 +752,14 @@ _:-ms-lang(x)::-ms-backdrop, width: 800px; display: flex; justify-content: flex-start; - padding: 0.8rem 1.5rem; + padding: .8rem 1.5rem; color: #ffffff; background: #00b4aa; position: fixed; top: -100%; left: 50%; transform: translateX(-50%); - border-radius: 0.3rem; + border-radius: .3rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); box-sizing: border-box; z-index: 10; @@ -680,9 +769,10 @@ _:-ms-lang(x)::-ms-backdrop, -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } + .snackbar.isShow { opacity: 1; - top: 0.2rem; + top: .2rem; left: 50%; z-index: 11; -moz-transition: all 0.3s ease-out; @@ -690,9 +780,11 @@ _:-ms-lang(x)::-ms-backdrop, -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } + .snackbar.isAlert { background: #ff5a33; } + .snackbarMessage { width: calc(800px - 3rem - 3.3rem); font-size: 14px; @@ -700,14 +792,17 @@ _:-ms-lang(x)::-ms-backdrop, letter-spacing: 0; font-weight: normal; } + .snackbarIcon { width: 1.5rem; margin-right: 1rem; vertical-align: middle; } + .snackbarIconClose { - width: 0.8rem; + width: .8rem; } + .snackbarIconClose:hover { cursor: pointer; } @@ -716,27 +811,33 @@ _:-ms-lang(x)::-ms-backdrop, width: 100%; margin-bottom: 1rem; } + .table tr:nth-child(2n + 3) { - background: #f5f5f5; + background: #F5F5F5; } + .table tr:last-child { border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1); } + .table td { - padding: 0.8rem 0.7rem; + padding: .8rem .7rem; font-size: 13px; line-height: 1.4; letter-spacing: 0; font-weight: normal; } + .table td .isAlert { color: #ff5a33; } + .tableHeader { background: #282828; } + .tableHeader th { - padding: 0.4rem 0.7rem; + padding: .4rem .7rem; vertical-align: middle; color: #ffffff; font-size: 11px; @@ -746,48 +847,56 @@ _:-ms-lang(x)::-ms-backdrop, text-align: left; position: relative; } + .tableHeader th .hasSort { display: block; - width: calc(100% - 0.5rem); - padding-right: 0.5rem; + width: calc(100% - .5rem); + padding-right: .5rem; } + .tableHeader th .hasSort::before { - content: ""; + content: ''; border-top: 0.4rem #ffffff solid; - border-right: 0.35rem transparent solid; - border-left: 0.35rem transparent solid; + border-right: .35rem transparent solid; + border-left: .35rem transparent solid; position: absolute; top: 50%; - right: 0.5rem; + right: .5rem; transform: translateY(-50%); - opacity: 0.4; + opacity: .4; -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; } + .tableHeader th .hasSort:hover { cursor: pointer; } + .tableHeader th .hasSort:hover::before { opacity: 1; } + .tableHeader th:not(:last-child) { border-right: 1px #999999 solid; } + .tableHeader th:not(:last-child)::after { - content: ""; - width: 0.6rem; + content: ''; + width: .6rem; height: 100%; cursor: col-resize; position: absolute; top: 0; - right: -0.3rem; + right: -.3rem; z-index: 3; } + .tableHeader th.noLine { border-right: none; } + .tableHeader th.noLine::after { display: none; } @@ -801,6 +910,7 @@ _:-ms-lang(x)::-ms-backdrop, background: none; box-shadow: none; } + .header.home .headerSub { display: none; } @@ -812,10 +922,12 @@ _:-ms-lang(x)::-ms-backdrop, justify-content: center; } } + .pgHome .ODMSlogo { text-align: center; padding: 2rem 0 0; } + @media only screen and (min-width: 1280px) { .pgHome .ODMSlogo { width: 400px; @@ -824,37 +936,43 @@ _:-ms-lang(x)::-ms-backdrop, text-align: left; } } -.pgHome > div { + +.pgHome>div { width: 400px; margin: 3rem auto 0; padding: 2rem; background: #ffffff; box-shadow: 0 0 5px #aaa; - border-radius: 0.3rem; + border-radius: .3rem; } + @media only screen and (min-width: 1280px) { - .pgHome > div { + .pgHome>div { margin: 15vh 0 0 0; } } + .pgHomeLinks { width: calc(400px - 4rem); margin: 0 auto; text-align: center; } + .pgHomeLinks dt { - padding: 0 0 0.5rem 1rem; + padding: 0 0 .5rem 1rem; font-size: 16px; line-height: 1.6; letter-spacing: 0; font-weight: normal; text-align: left; } + .pgHomeLinks dt:first-of-type { display: inline-block; width: 45%; - padding: 0 0 0.5rem 0; + padding: 0 0 .5rem 0; } + .pgHomeLinks dd a .buttonIcon { width: 16px; height: 16px; @@ -868,30 +986,35 @@ _:-ms-lang(x)::-ms-backdrop, -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } + .pgHomeLinks dd a:hover .buttonIcon { top: 50%; right: 1.7rem; opacity: 1; } + .pgHomeLinks dd:first-of-type { display: inline-block; width: 45%; text-align: left; } + .pgHomeLinks dd .formInput { width: auto; } -.user > div, -.license > div, -.dictation > div { +.user>div, +.license>div, +.dictation>div { padding: 0 2rem; } + .user .table tr:not(.tableHeader), .license .table tr:not(.tableHeader), .dictation .table tr:not(.tableHeader) { position: relative; } + .user .table td, .license .table td, .dictation .table td { @@ -901,31 +1024,37 @@ _:-ms-lang(x)::-ms-backdrop, white-space: nowrap; position: relative; } + .user .table.user tr:not(.tableHeader), .license .table.user tr:not(.tableHeader), .dictation .table.user tr:not(.tableHeader) { cursor: pointer; } + .user .table.user tr:not(.tableHeader):hover, .license .table.user tr:not(.tableHeader):hover, .dictation .table.user tr:not(.tableHeader):hover { color: #0084b2; } + .user .table.user tr:not(.tableHeader).isSelected, .license .table.user tr:not(.tableHeader).isSelected, .dictation .table.user tr:not(.tableHeader).isSelected { color: #ffffff; } + .user .table.user tr:not(.tableHeader).isSelected:hover, .license .table.user tr:not(.tableHeader).isSelected:hover, .dictation .table.user tr:not(.tableHeader).isSelected:hover { color: #ffffff; } + .user .table.user tr:not(.tableHeader).isSelected td, .license .table.user tr:not(.tableHeader).isSelected td, .dictation .table.user tr:not(.tableHeader).isSelected td { background: #0084b2; } + .user .table.user tr:not(.tableHeader).isSelected .menuInTable, .license .table.user tr:not(.tableHeader).isSelected .menuInTable, .dictation .table.user tr:not(.tableHeader).isSelected .menuInTable { @@ -933,32 +1062,37 @@ _:-ms-lang(x)::-ms-backdrop, } .menuAction { - margin-bottom: 0.6rem; + margin-bottom: .6rem; } + .menuAction li { display: inline-block; - margin-right: 0.5rem; + margin-right: .5rem; } + .menuAction.inTable { margin-bottom: 0; } + .menuAction.inTable .menuLink { - padding: 0.3rem 0.5rem 0.3rem 0.5rem; + padding: .3rem .5rem .3rem .5rem; opacity: 0; } + .menuAction.inTable .menuLink.isActive { opacity: 1; } + .menuAction.inTable .colorLink { display: block; - padding: 0.3rem 0.5rem 0.3rem 0.5rem; + padding: .3rem .5rem .3rem .5rem; font-size: 13px; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; text-decoration: none; border: 1px #999999 solid; - border-radius: 0.2rem; + border-radius: .2rem; opacity: 0; pointer-events: none; background: #ffffff; @@ -967,6 +1101,7 @@ _:-ms-lang(x)::-ms-backdrop, -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } + .menuAction.inTable .colorLink.isActive { cursor: pointer; opacity: 1; @@ -975,21 +1110,26 @@ _:-ms-lang(x)::-ms-backdrop, border: 1px #004086 solid; pointer-events: inherit; } + .menuAction.inTable .colorLink.isActive:hover { background: rgba(0, 94, 184, 0.7); } + .menuAction.alignRight { margin-top: -1rem; } + .menuMore { text-align: center; } + .menuMore .menuIcon { height: 1.2rem; } + .menuLink { display: block; - padding: 0.3rem 0.5rem 0.3rem 0.3rem; + padding: .3rem .5rem .3rem .3rem; font-size: 13px; line-height: 1.4; letter-spacing: 0.04rem; @@ -997,8 +1137,8 @@ _:-ms-lang(x)::-ms-backdrop, text-decoration: none; color: #333333; border: 1px #a5a5a5 solid; - border-radius: 0.2rem; - opacity: 0.3; + border-radius: .2rem; + opacity: .3; pointer-events: none; background: #ffffff; -moz-transition: all 0.3s ease-out; @@ -1006,16 +1146,19 @@ _:-ms-lang(x)::-ms-backdrop, -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } + .menuLink.isActive { opacity: 1; pointer-events: inherit; } + .menuLink.isActive:hover { - background: #f5f5f5; + background: #F5F5F5; } + .menuIcon { width: 1.4rem; - margin-right: 0.4rem; + margin-right: .4rem; vertical-align: bottom; } @@ -1027,151 +1170,178 @@ _:-ms-lang(x)::-ms-backdrop, .license .table.history { width: 1000px; } + .license .table.history td:last-child { width: 200px; text-align: right; } + .license .table.cardHistory { width: 750px; } + .license .table.cardHistory td:last-child { width: 50%; } + .license .table.partner tr { position: relative; } + .license .table.partner tr td[title="View child accounts"] { position: relative; cursor: pointer; - background-size: 0.2rem; + background-size: .2rem; } + .license .table.partner tr td[title="View child accounts"]:hover { color: #0084b2; } + .license .table.partner tr td[title="View child accounts"] a { color: inherit; text-decoration: none; } + .license .table.partner tr td[title="Return"] { position: relative; cursor: pointer; } + .license .table.partner tr td[title="Return"]:hover { color: #0084b2; } + .license .table.partner tr.isOpen::after { - content: ""; + content: ''; width: 100%; border-bottom: 3px #0084b2 solid; position: absolute; bottom: 0; left: 0; } + .license .table.partner tr.isOpen td { - padding: 0.3rem 0.7rem; + padding: .3rem .7rem; } + .license .table.partner tr.isOpen td:nth-child(n + 2) { color: #999999; } + .license .table.partner tr.isOpen td:first-child { padding-left: 1.5rem; } + .license .table.partner tr.isOpen td:first-child::before { - content: ""; + content: ''; position: absolute; top: 50%; - left: 0.4rem; + left: .4rem; border-top: 8px #0084b2 solid; border-right: 6px transparent solid; border-left: 6px transparent solid; transform: translateY(-50%); } -.license .table.partner tr.isOpen ~ tr td:first-child { + +.license .table.partner tr.isOpen~tr td:first-child { padding-left: 2.5rem; } -.license .table.partner tr.isOpen ~ tr td:first-child::before { + +.license .table.partner tr.isOpen~tr td:first-child::before { top: 50%; left: 1.4rem; } -.license .table.partner tr.isOpen + .isOpen::after { + +.license .table.partner tr.isOpen+.isOpen::after { width: calc(100% - 1.4rem); left: 1.4rem; } -.license .table.partner tr.isOpen + .isOpen ~ tr td:first-child { + +.license .table.partner tr.isOpen+.isOpen~tr td:first-child { padding-left: 3.5rem; } -.license .table.partner tr.isOpen + .isOpen ~ tr td:first-child::before { + +.license .table.partner tr.isOpen+.isOpen~tr td:first-child::before { top: 50%; left: 2.4rem; } -.license .table.partner tr.isOpen + .isOpen + .isOpen::after { + +.license .table.partner tr.isOpen+.isOpen+.isOpen::after { width: calc(100% - 2.4rem); left: 2.4rem; } + .license .table.partner tr.isOpen.role2, .license .table.partner tr.isOpen.role3, .license .table.partner tr.isOpen.role4 { - background: #fafafa; + background: #FAFAFA; } + .license .table.partner tr.isOpen.role3::after { border-bottom: 3px #00b4aa solid; } + .license .table.partner tr.isOpen.role3 td:first-child::before { border-top: 8px #00b4aa solid; border-right: 6px transparent solid; border-left: 6px transparent solid; } + .license .table.partner tr.isOpen.role4::after { border-bottom: 3px #faa306 solid; } + .license .table.partner tr.isOpen.role4 td:first-child::before { border-top: 8px #faa306 solid; border-right: 6px transparent solid; border-left: 6px transparent solid; } + .license .table.partner td:last-child { width: 120px; text-align: right; } + .license .table.partner.iconver tr td[title="View child accounts"] { padding-left: 1.5rem; position: relative; cursor: pointer; background-size: none; } + .license .table.partner.iconver tr td[title="View child accounts"]:hover { color: #0084b2; } + .license .table.partner.iconver tr td[title="View child accounts"] a { color: inherit; text-decoration: none; } + .license .table.partner.iconver tr td[title="View child accounts"]::before { - content: ""; + content: ''; position: absolute; top: 50%; - left: 0.4rem; + left: .4rem; border-top: 6px transparent solid; border-bottom: 6px transparent solid; border-left: 8px #0084b2 solid; transform: translateY(-50%); } -.license - .table.partner.iconver - tr.role3 - td[title="View child accounts"]::before { + +.license .table.partner.iconver tr.role3 td[title="View child accounts"]::before { border-top: 6px transparent solid; border-bottom: 6px transparent solid; border-left: 8px #00b4aa solid; } -.license - .table.partner.iconver - tr.role4 - td[title="View child accounts"]::before { + +.license .table.partner.iconver tr.role4 td[title="View child accounts"]::before { border-top: 6px transparent solid; border-bottom: 6px transparent solid; border-left: 8px #faa306 solid; } + .license .table.partner.iconver tr.role5 td:first-child::before { display: none; } @@ -1179,106 +1349,127 @@ _:-ms-lang(x)::-ms-backdrop, .dictation .displayOptions { display: none; margin-bottom: 0.6rem; - padding: 0.3rem 1rem; - background: #f0f0f0; + padding: .3rem 1rem; + background: #F0F0F0; position: relative; } + .dictation .displayOptions li { display: inline-block; } + .dictation .displayOptions li label { - padding: 0.3rem 0; + padding: .3rem 0; font-size: 13px; line-height: 1.4; letter-spacing: 0.02rem; font-weight: normal; } + .dictation .displayOptions li label .formCheck { - width: 0.9rem; - height: 0.9rem; - margin-right: 0.3rem; + width: .9rem; + height: .9rem; + margin-right: .3rem; } + .dictation .displayOptions.isShow { display: block; } + .dictation .displayOptions::before { content: ""; - border-right: 0.6rem transparent solid; - border-bottom: 0.6rem #f0f0f0 solid; - border-left: 0.6rem transparent solid; + border-right: .6rem transparent solid; + border-bottom: 0.6rem #F0F0F0 solid; + border-left: .6rem transparent solid; position: absolute; - top: -0.5rem; + top: -.5rem; right: 3rem; } + .dictation .table { margin-bottom: 0; } + .dictation .tableFilter { - padding-top: 0.8rem; - margin-bottom: 0.8rem; + padding-top: .8rem; + margin-bottom: .8rem; } + .dictation .tableFilter li { display: inline-block; - margin-right: 0.3rem; + margin-right: .3rem; font-size: 14px; line-height: 1.4; letter-spacing: 0.02rem; font-weight: normal; } + .dictation .tableFilter li label { cursor: pointer; } + .dictation .tableFilter li label .formCheck { - width: 0.9rem; - height: 0.9rem; - margin-right: 0.3rem; + width: .9rem; + height: .9rem; + margin-right: .3rem; } + .dictation .tableFilter2 { - padding-top: 0.8rem; - margin-bottom: 0.8rem; + padding-top: .8rem; + margin-bottom: .8rem; } + .dictation .tableFilter2 li { display: inline-block; - margin-right: 0.5rem; + margin-right: .5rem; font-size: 14px; line-height: 1.1; letter-spacing: 0.02rem; font-weight: normal; } + .dictation .tableFilter2 li a { display: block; color: #0084b2; text-decoration: none; - padding-right: 0.5rem; + padding-right: .5rem; } + .dictation .tableFilter2 li a:hover { - opacity: 0.7; + opacity: .7; } + .dictation .tableFilter2 li a.isDisable { color: #999999; pointer-events: none; } + .dictation .tableFilter2 li a span { display: inline-block; - padding: 0 0.2rem; + padding: 0 .2rem; color: #333333; } + .dictation .tableFilter2 li:not(:last-child) a { border-right: 1px #999999 solid; } + .dictation .tableWrap { max-width: calc(100vw - 5.1rem); max-height: 90vh; overflow-x: scroll; margin-bottom: 1rem; } + .dictation .table.dictation { position: relative; min-width: 100%; } + .dictation .table.dictation tr { position: relative; } + .dictation .table.dictation tr.tableHeader th { position: -webkit-sticky; position: sticky; @@ -1286,10 +1477,12 @@ _:-ms-lang(x)::-ms-backdrop, background: #282828; z-index: 1; } + .dictation .table.dictation tr.tableHeader th.clm0 { width: 0px; padding: 0 0; } + .dictation .table.dictation tr.tableHeader th:not(:last-child)::before { content: ""; position: absolute; @@ -1297,36 +1490,43 @@ _:-ms-lang(x)::-ms-backdrop, left: 0; width: 100%; height: 100%; - border-right: 0.1rem #e6e6e6 solid; + border-right: 0.1rem #E6E6E6 solid; z-index: -1; } + .dictation .table.dictation tr:hover .menuInTable { opacity: 1; } + .dictation .table.dictation tr.isSelected { background: #0084b2; color: #ffffff; } + .dictation .table.dictation tr.isSelected:hover { color: #ffffff; } + .dictation .table.dictation tr.isSelected img[alt="Uploaded"], .dictation .table.dictation tr.isSelected img[alt="Finished"], .dictation .table.dictation tr.isSelected img[alt="InProgress"], .dictation .table.dictation tr.isSelected img[alt="encrypted"] { - filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) - hue-rotate(110deg) brightness(110%) contrast(101%); + filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(110deg) brightness(110%) contrast(101%); } + .dictation .table.dictation td { padding-bottom: 2rem; vertical-align: top; } + .dictation .table.dictation td:has(img[alt="encrypted"]) { text-align: center; } + .dictation .table.dictation td:has(img[alt="encrypted"]) img { height: 1.1rem; } + .dictation .table.dictation td.clm0 { width: 0px; padding: 0 0; @@ -1335,127 +1535,158 @@ _:-ms-lang(x)::-ms-backdrop, left: 0; z-index: 2; } + .dictation .table.dictation td img { height: 1.3rem; - margin-right: 0.2rem; - margin-left: -0.4rem; + margin-right: .2rem; + margin-left: -.4rem; vertical-align: middle; } + .dictation .table.dictation td.txWsline { white-space: pre; } + .dictation .table.dictation.hidePri th.opPri, .dictation .table.dictation.hidePri td.opPri { display: none; } + .dictation .table.dictation.hideSize th.opSize, .dictation .table.dictation.hideSize td.opSize { display: none; } + .dictation .table.dictation.hideUpd th.opUpd, .dictation .table.dictation.hideUpd td.opUpd { display: none; } + .dictation .table.dictation.hideC1 th.clm1, .dictation .table.dictation.hideC1 td.clm1 { display: none; } + .dictation .table.dictation.hideC2 th.clm2, .dictation .table.dictation.hideC2 td.clm2 { display: none; } + .dictation .table.dictation.hideC3 th.clm3, .dictation .table.dictation.hideC3 td.clm3 { display: none; } + .dictation .table.dictation.hideC4 th.clm4, .dictation .table.dictation.hideC4 td.clm4 { display: none; } + .dictation .table.dictation.hideC5 th.clm5, .dictation .table.dictation.hideC5 td.clm5 { display: none; } + .dictation .table.dictation.hideC6 th.clm6, .dictation .table.dictation.hideC6 td.clm6 { display: none; } + .dictation .table.dictation.hideC7 th.clm7, .dictation .table.dictation.hideC7 td.clm7 { display: none; } + .dictation .table.dictation.hideC8 th.clm8, .dictation .table.dictation.hideC8 td.clm8 { display: none; } + .dictation .table.dictation.hideC9 th.clm9, .dictation .table.dictation.hideC9 td.clm9 { display: none; } + .dictation .table.dictation.hideC10 th.clm10, .dictation .table.dictation.hideC10 td.clm10 { display: none; } + .dictation .table.dictation.hideC11 th.clm11, .dictation .table.dictation.hideC11 td.clm11 { display: none; } + .dictation .table.dictation.hideC12 th.clm12, .dictation .table.dictation.hideC12 td.clm12 { display: none; } + .dictation .table.dictation.hideC13 th.clm13, .dictation .table.dictation.hideC13 td.clm13 { display: none; } + .dictation .table.dictation.hideC14 th.clm14, .dictation .table.dictation.hideC14 td.clm14 { display: none; } + .dictation .table.dictation.hideC15 th.clm15, .dictation .table.dictation.hideC15 td.clm15 { display: none; } + .dictation .table.dictation.hideC16 th.clm16, .dictation .table.dictation.hideC16 td.clm16 { display: none; } + .dictation .table.dictation.hideO1 th.op1, .dictation .table.dictation.hideO1 td.op1 { display: none; } + .dictation .table.dictation.hideO2 th.op2, .dictation .table.dictation.hideO2 td.op2 { display: none; } + .dictation .table.dictation.hideO3 th.op3, .dictation .table.dictation.hideO3 td.op3 { display: none; } + .dictation .table.dictation.hideO4 th.op4, .dictation .table.dictation.hideO4 td.op4 { display: none; } + .dictation .table.dictation.hideO5 th.op5, .dictation .table.dictation.hideO5 td.op5 { display: none; } + .dictation .table.dictation.hideO6 th.op6, .dictation .table.dictation.hideO6 td.op6 { display: none; } + .dictation .table.dictation.hideO7 th.op7, .dictation .table.dictation.hideO7 td.op7 { display: none; } + .dictation .table.dictation.hideO8 th.op8, .dictation .table.dictation.hideO8 td.op8 { display: none; } + .dictation .table.dictation.hideO9 th.op9, .dictation .table.dictation.hideO9 td.op9 { display: none; } + .dictation .table.dictation.hideO10 th.op10, .dictation .table.dictation.hideO10 td.op10 { display: none; @@ -1464,22 +1695,25 @@ _:-ms-lang(x)::-ms-backdrop, .menuInTable { width: auto; position: absolute; - left: 0.7rem; - bottom: 0.5rem; + left: .7rem; + bottom: .5rem; opacity: 0; -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; } + .menuInTable li { display: inline-block; - margin-right: 0.5rem; - padding-right: 0.5rem; + margin-right: .5rem; + padding-right: .5rem; } + .menuInTable li:not(:last-child) { border-right: 1px #999999 solid; } + .menuInTable li a { display: block; font-size: 12px; @@ -1489,13 +1723,16 @@ _:-ms-lang(x)::-ms-backdrop, text-decoration: none; color: #0084b2; } + .menuInTable li a:hover { - opacity: 0.7; + opacity: .7; } + .menuInTable li a.isDisable { color: #999999; pointer-events: none; } + tr.isSelected .menuInTable li a { color: #ffffff; } @@ -1508,72 +1745,81 @@ tr.isSelected .menuInTable li a { width: 92%; padding: 0 4%; } + .formList dd.formChange ul.chooseMember, .formList dd.formChange ul.holdMember { width: calc(40% - 2px); border: 1px #999999 solid; } + .formChange ul.chooseMember, .formChange ul.holdMember { height: 250px; overflow-y: scroll; - padding: 0.5rem; + padding: .5rem; } + .formChange ul.chooseMember li.changeTitle, .formChange ul.holdMember li.changeTitle { font-weight: 600; } + .formChange ul.chooseMember li .formCheck, .formChange ul.holdMember li .formCheck { display: none; } -.formChange ul.chooseMember li input + label, -.formChange ul.holdMember li input + label { + +.formChange ul.chooseMember li input+label, +.formChange ul.holdMember li input+label { display: block; - padding: 0.2rem 0 0.2rem 1.5rem; + padding: .2rem 0 .2rem 1.5rem; margin-right: 0; background: url(../assets/images/circle.svg) no-repeat left center; background-size: 1.3rem; } -.formChange ul.chooseMember li input + label:hover, -.formChange ul.holdMember li input + label:hover { - background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left - center; + +.formChange ul.chooseMember li input+label:hover, +.formChange ul.holdMember li input+label:hover { + background: #E6E6E6 url(../assets/images/arrow_circle_left.svg) no-repeat left center; background-size: 1.3rem; } -.formChange ul.chooseMember li input:checked + label, -.formChange ul.holdMember li input:checked + label { - padding: 0.2rem 1rem 0.2rem 0; + +.formChange ul.chooseMember li input:checked+label, +.formChange ul.holdMember li input:checked+label { + padding: .2rem 1rem .2rem 0; background: url(../assets/images/check_circle_fill.svg) no-repeat right center; background-size: 1.3rem; } -.formChange ul.chooseMember li input:checked + label:hover, -.formChange ul.holdMember li input:checked + label:hover { - background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat - right center; + +.formChange ul.chooseMember li input:checked+label:hover, +.formChange ul.holdMember li input:checked+label:hover { + background: #E6E6E6 url(../assets/images/arrow_circle_right.svg) no-repeat right center; background-size: 1.3rem; } -.formChange > p { + +.formChange>p { width: 6%; height: 20px; - background: #e6e6e6; + background: #E6E6E6; position: relative; } -.formChange > p::before { - content: ""; + +.formChange>p::before { + content: ''; border-top: 20px transparent solid; - border-right: 20px #e6e6e6 solid; + border-right: 20px #E6E6E6 solid; border-bottom: 20px transparent solid; position: absolute; top: 50%; left: -15px; transform: translateY(-50%); } -.formChange > p::after { - content: ""; + +.formChange>p::after { + content: ''; border-top: 20px transparent solid; border-bottom: 20px transparent solid; - border-left: 20px #e6e6e6 solid; + border-left: 20px #E6E6E6 solid; position: absolute; top: 50%; right: -15px; @@ -1583,9 +1829,11 @@ tr.isSelected .menuInTable li a { .alignCenter { text-align: center; } + .alignLeft { text-align: left; } + .alignRight { text-align: right; } @@ -1595,11 +1843,13 @@ tr.isSelected .menuInTable li a { text-decoration: none; cursor: pointer; } + .linkTx img { width: 1rem; margin: 0 4px; vertical-align: middle; } + .linkTx:hover { text-decoration: underline; } @@ -1607,44 +1857,55 @@ tr.isSelected .menuInTable li a { .borderTop { border-top: 0.1rem solid rgba(0, 0, 0, 0.1); } + .borderBottom { border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1); } .marginBtm0 { - margin-bottom: 0.5rem; + margin-bottom: .5rem; } + .marginBtm1 { margin-bottom: 1rem; } + .marginBtm2 { margin-bottom: 2rem; } + .marginBtm3 { margin-bottom: 3rem; } + .marginBtm5 { margin-bottom: 5rem; } + .marginRgt1 { - margin-right: 0.9rem; + margin-right: .9rem; } + .marginRgt2 { margin-right: 1.5rem; } + .marginRgt3 { margin-right: 3rem; } .paddSide0 { - padding: 0 0.5rem; + padding: 0 .5rem; } + .paddSide1 { padding: 0 1rem; } + .paddSide2 { padding: 0 2rem; } + .paddSide3 { padding: 0 3rem; } @@ -1655,14 +1916,17 @@ tr.isSelected .menuInTable li a { letter-spacing: 0; font-weight: normal; } + .txIcon { width: 1.1rem; } + .txWsline { white-space: pre-line; } + .txWswrap { white-space: pre-wrap; } -/*# sourceMappingURL=style.css.map */ +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/dictation_client/src/translation/de.json b/dictation_client/src/translation/de.json index 6531b1f..5a4b844 100644 --- a/dictation_client/src/translation/de.json +++ b/dictation_client/src/translation/de.json @@ -14,6 +14,9 @@ } }, "topPage": { + "message": { + "logout": "(de)ログイン有効期限が切れました。再度ログイン手続きを行ってください。" + }, "label": { "displayLanguage": "(de)Display language", "languageEnglish": "(de)English", @@ -129,13 +132,24 @@ "none": "(de)None" } }, - "LicensePage": { + "LicenseSummaryPage": { "label": { "title": "(de)License", "subTitle": "(de)EFGI Legal", "orderLicense": "(de)Order License", "orderHistory": "(de)Order History", - "importLicenseKey": "(de)Import License Key" + "importLicenseKey": "(de)Import License Key", + "totalLicense": "(de)Total license", + "allocatedLicense": "(de)Allocated license", + "reusableLicense": "(de)Reusable license", + "freeLicense": "(de)Free license", + "expiringWithin14daysLicense": "(de)Expiring within 14days license", + "issueRequesting": "(de)Issue Requesting", + "numberOfRequesting": "(de)Number of Requesting", + "shortage": "(de)Shortage", + "storageSize": "(de)Storage Size", + "usedSize": "(de)Used Size", + "accountLock": "(de)Account Lock" } }, "licenseOrderPage": { diff --git a/dictation_client/src/translation/en.json b/dictation_client/src/translation/en.json index 246f76a..c15aef5 100644 --- a/dictation_client/src/translation/en.json +++ b/dictation_client/src/translation/en.json @@ -14,6 +14,9 @@ } }, "topPage": { + "message": { + "logout": "ログイン有効期限が切れました。再度ログイン手続きを行ってください。" + }, "label": { "displayLanguage": "Display language", "languageEnglish": "English", @@ -129,13 +132,24 @@ "none": "None" } }, - "LicensePage": { + "LicenseSummaryPage": { "label": { "title": "License", "subTitle": "EFGI Legal", "orderLicense": "Order License", "orderHistory": "Order History", - "importLicenseKey": "Import License Key" + "importLicenseKey": "Import License Key", + "totalLicense": "Total license", + "allocatedLicense": "Allocated license", + "reusableLicense": "Reusable license", + "freeLicense": "Free license", + "expiringWithin14daysLicense": "Expiring within 14days license", + "issueRequesting": "Issue Requesting", + "numberOfRequesting": "Number of Requesting", + "shortage": "Shortage", + "storageSize": "Storage Size", + "usedSize": "Used Size", + "accountLock": "Account Lock" } }, "licenseOrderPage": { diff --git a/dictation_client/src/translation/es.json b/dictation_client/src/translation/es.json index deea7f2..3958c14 100644 --- a/dictation_client/src/translation/es.json +++ b/dictation_client/src/translation/es.json @@ -14,6 +14,9 @@ } }, "topPage": { + "message": { + "logout": "(es)ログイン有効期限が切れました。再度ログイン手続きを行ってください。" + }, "label": { "displayLanguage": "(es)Display language", "languageEnglish": "(es)English", @@ -129,13 +132,24 @@ "none": "(es)None" } }, - "LicensePage": { + "LicenseSummaryPage": { "label": { "title": "(es)License", "subTitle": "(es)EFGI Legal", "orderLicense": "(es)Order License", "orderHistory": "(es)Order History", - "importLicenseKey": "(es)Import License Key" + "importLicenseKey": "(es)Import License Key", + "totalLicense": "(es)Total license", + "allocatedLicense": "(es)Allocated license", + "reusableLicense": "(es)Reusable license", + "freeLicense": "(es)Free license", + "expiringWithin14daysLicense": "(es)Expiring within 14days license", + "issueRequesting": "(es)Issue Requesting", + "numberOfRequesting": "(es)Number of Requesting", + "shortage": "(es)Shortage", + "storageSize": "(es)Storage Size", + "usedSize": "(es)Used Size", + "accountLock": "(es)Account Lock" } }, "licenseOrderPage": { diff --git a/dictation_client/src/translation/fr.json b/dictation_client/src/translation/fr.json index e915ab6..ed74436 100644 --- a/dictation_client/src/translation/fr.json +++ b/dictation_client/src/translation/fr.json @@ -14,6 +14,9 @@ } }, "topPage": { + "message": { + "logout": "(fr)ログイン有効期限が切れました。再度ログイン手続きを行ってください。" + }, "label": { "displayLanguage": "(fr)Display language", "languageEnglish": "(fr)English", @@ -129,13 +132,24 @@ "none": "(fr)None" } }, - "LicensePage": { + "LicenseSummaryPage": { "label": { "title": "(fr)License", "subTitle": "(fr)EFGI Legal", "orderLicense": "(fr)Order License", "orderHistory": "(fr)Order History", - "importLicenseKey": "(fr)Import License Key" + "importLicenseKey": "(fr)Import License Key", + "totalLicense": "(fr)Total license", + "allocatedLicense": "(fr)Allocated license", + "reusableLicense": "(fr)Reusable license", + "freeLicense": "(fr)Free license", + "expiringWithin14daysLicense": "(fr)Expiring within 14days license", + "issueRequesting": "(fr)Issue Requesting", + "numberOfRequesting": "(fr)Number of Requesting", + "shortage": "(fr)Shortage", + "storageSize": "(fr)Storage Size", + "usedSize": "(fr)Used Size", + "accountLock": "(fr)Account Lock" } }, "licenseOrderPage": {