From 8c56e3fd388005bcb7aced75b73d7018511ceac8 Mon Sep 17 00:00:00 2001 From: crupest Date: Tue, 15 Jun 2021 16:41:03 +0800 Subject: ... --- FrontEnd/src/index.css | 53 ------------------------- FrontEnd/src/palette.ts | 43 ++++++++++---------- FrontEnd/src/views/admin/UserAdmin.tsx | 20 +++++----- FrontEnd/src/views/center/TimelineBoard.tsx | 3 -- FrontEnd/src/views/common/button/FlatButton.tsx | 2 +- FrontEnd/src/views/common/button/TextButton.css | 36 +++++++++++++++++ FrontEnd/src/views/common/button/TextButton.tsx | 36 +++++++++++++++++ 7 files changed, 105 insertions(+), 88 deletions(-) create mode 100644 FrontEnd/src/views/common/button/TextButton.css create mode 100644 FrontEnd/src/views/common/button/TextButton.tsx (limited to 'FrontEnd/src') diff --git a/FrontEnd/src/index.css b/FrontEnd/src/index.css index ca0d4829..ff8c1866 100644 --- a/FrontEnd/src/index.css +++ b/FrontEnd/src/index.css @@ -81,59 +81,6 @@ textarea { color: #ffc107; } -.text-button { - background: transparent; - border: none; -} -.text-button.primary { - color: #0d6efd; -} -.text-button.primary:hover { - color: #599bfe; -} -.text-button.secondary { - color: #6c757d; -} -.text-button.secondary:hover { - color: #939ba2; -} -.text-button.success { - color: #198754; -} -.text-button.success:hover { - color: #25c87c; -} -.text-button.info { - color: #0dcaf0; -} -.text-button.info:hover { - color: #54dbf6; -} -.text-button.warning { - color: #ffc107; -} -.text-button.warning:hover { - color: #ffd454; -} -.text-button.danger { - color: #dc3545; -} -.text-button.danger:hover { - color: #e77681; -} -.text-button.light { - color: #f8f9fa; -} -.text-button.light:hover { - color: white; -} -.text-button.dark { - color: #212529; -} -.text-button.dark:hover { - color: #434b53; -} - .touch-action-none { touch-action: none; } diff --git a/FrontEnd/src/palette.ts b/FrontEnd/src/palette.ts index 11b3de85..6385df66 100644 --- a/FrontEnd/src/palette.ts +++ b/FrontEnd/src/palette.ts @@ -19,18 +19,19 @@ export interface PaletteColor { [key: string]: string; } -export interface Palette { - primary: PaletteColor; - primaryEnhance: PaletteColor; - secondary: PaletteColor; - textPrimary: PaletteColor; - textOnPrimary: PaletteColor; - danger: PaletteColor; - success: PaletteColor; - [key: string]: PaletteColor; -} +const paletteColorList = [ + "primary", + "primary-enhance", + "secondary", + "text-primary", + "text-on-primary", + "danger", + "success", +] as const; + +export type PaletteColorType = typeof paletteColorList[number]; -export type PaletteColorType = keyof Palette; +export type Palette = Record; export function generatePaletteColor(color: string): PaletteColor { const c = Color(color); @@ -60,26 +61,24 @@ export function generatePalette(options: { return { primary: generatePaletteColor(p.toString()), - primaryEnhance: generatePaletteColor(pe.toString()), + "primary-enhance": generatePaletteColor(pe.toString()), secondary: generatePaletteColor(s.toString()), - textPrimary: generatePaletteColor("#111111"), - textOnPrimary: generatePaletteColor(p.lightness() > 60 ? "black" : "white"), + "text-primary": generatePaletteColor("#111111"), + "text-on-primary": generatePaletteColor( + p.lightness() > 60 ? "black" : "white" + ), danger: generatePaletteColor("red"), success: generatePaletteColor("green"), }; } export function generatePaletteCSS(palette: Palette): string { - function toSnakeCase(s: string): string { - return s.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`); - } - const colors: [string, string][] = []; - for (const paletteColorName in palette) { - const paletteColor = palette[paletteColorName]; + for (const colorType of paletteColorList) { + const paletteColor = palette[colorType]; for (const variant in paletteColor) { - let key = `--tl-${toSnakeCase(paletteColorName)}`; - if (variant !== "color") key += `-${toSnakeCase(variant)}`; + let key = `--tl-${colorType}`; + if (variant !== "color") key += `-${variant}`; key += "-color"; colors.push([key, paletteColor[variant]]); } diff --git a/FrontEnd/src/views/admin/UserAdmin.tsx b/FrontEnd/src/views/admin/UserAdmin.tsx index 558d3aee..eb141520 100644 --- a/FrontEnd/src/views/admin/UserAdmin.tsx +++ b/FrontEnd/src/views/admin/UserAdmin.tsx @@ -14,6 +14,7 @@ import { UserPermission, } from "@/http/user"; import { Trans, useTranslation } from "react-i18next"; +import TextButton from "../common/button/TextButton"; interface DialogProps { open: boolean; @@ -230,15 +231,16 @@ const UserItem: React.FC = ({ user, on }) => { className={classnames("edit-mask", !editMaskVisible && "d-none")} onClick={() => setEditMaskVisible(false)} > - - - + + + ); diff --git a/FrontEnd/src/views/center/TimelineBoard.tsx b/FrontEnd/src/views/center/TimelineBoard.tsx index a6a60b3d..e0a2d80e 100644 --- a/FrontEnd/src/views/center/TimelineBoard.tsx +++ b/FrontEnd/src/views/center/TimelineBoard.tsx @@ -1,7 +1,6 @@ import React from "react"; import classnames from "classnames"; import { Link } from "react-router-dom"; -import { useTranslation } from "react-i18next"; import { Spinner } from "react-bootstrap"; import { HttpTimelineInfo } from "@/http/timeline"; @@ -220,8 +219,6 @@ interface TimelineBoardUIProps { const TimelineBoardUI: React.FC = (props) => { const { title, timelines, className, editHandler } = props; - const { t } = useTranslation(); - const editable = editHandler != null; const [editing, setEditing] = React.useState(false); diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx index 0727eb88..24f47785 100644 --- a/FrontEnd/src/views/common/button/FlatButton.tsx +++ b/FrontEnd/src/views/common/button/FlatButton.tsx @@ -1,11 +1,11 @@ import React from "react"; import { useTranslation } from "react-i18next"; +import classNames from "classnames"; import { convertI18nText, I18nText } from "@/common"; import { PaletteColorType } from "@/palette"; import "./FlatButton.css"; -import classNames from "classnames"; function _FlatButton( { diff --git a/FrontEnd/src/views/common/button/TextButton.css b/FrontEnd/src/views/common/button/TextButton.css new file mode 100644 index 00000000..dc5abaaa --- /dev/null +++ b/FrontEnd/src/views/common/button/TextButton.css @@ -0,0 +1,36 @@ +.cru-text-button { + background: transparent; + border: none; +} + +.cru-text-button.primary { + color: var(--tl-primary-color); +} + +.cru-text-button.primary:hover { + color: var(--tl-primary-lighter-color); +} + +.cru-text-button.secondary { + color: var(--tl-secondary-color); +} + +.cru-text-button.secondary:hover { + color: var(--tl-secondary-lighter-color); +} + +.cru-text-button.success { + color: var(--tl-success-color); +} + +.cru-text-button.success:hover { + color: var(--tl-success-lighter-color); +} + +.cru-text-button.danger { + color: var(--tl-danger-color); +} + +.cru-text-button.danger:hover { + color: var(--tl-danger-lighter-color); +} diff --git a/FrontEnd/src/views/common/button/TextButton.tsx b/FrontEnd/src/views/common/button/TextButton.tsx new file mode 100644 index 00000000..2014158a --- /dev/null +++ b/FrontEnd/src/views/common/button/TextButton.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import classNames from "classnames"; + +import { convertI18nText, I18nText } from "@/common"; +import { PaletteColorType } from "@/palette"; + +import "./TextButton.css"; + +function _TextButton( + { + text, + color, + onClick, + }: { + text: I18nText; + color?: PaletteColorType; + onClick?: () => void; + }, + ref: React.ForwardedRef +): React.ReactElement | null { + const { t } = useTranslation(); + + return ( + + ); +} + +const TextButton = React.forwardRef(_TextButton); +export default TextButton; -- cgit v1.2.3