From 372fc3655ad1b0877a75a360989156b114663fc5 Mon Sep 17 00:00:00 2001 From: Johnny Date: Sun, 2 Mar 2025 15:34:21 +0800 Subject: [PATCH] refactor: retire less --- web/.prettierrc.js | 2 +- web/package.json | 1 - web/pnpm-lock.yaml | 11 ++++--- .../components/ChangeMemberPasswordDialog.tsx | 10 +++--- .../components/CreateAccessTokenDialog.tsx | 10 +++--- .../CreateIdentityProviderDialog.tsx | 8 ++--- web/src/components/CreateShortcutDialog.tsx | 8 ++--- web/src/components/CreateWebhookDialog.tsx | 8 ++--- web/src/components/Dialog/BaseDialog.tsx | 11 +++++-- web/src/components/PreviewImageDialog.tsx | 15 ++++----- web/src/components/RenameTagDialog.tsx | 8 ++--- web/src/components/UpdateAccountDialog.tsx | 8 ++--- .../UpdateCustomizedProfileDialog.tsx | 8 ++--- web/src/css/highlight.css | 7 +++++ web/src/less/base-dialog.less | 29 ----------------- web/src/less/common-dialog.less | 29 ----------------- web/src/less/highlight.less | 7 ----- web/src/less/preview-image-dialog.less | 31 ------------------- web/src/main.tsx | 2 +- 19 files changed, 65 insertions(+), 148 deletions(-) create mode 100644 web/src/css/highlight.css delete mode 100644 web/src/less/base-dialog.less delete mode 100644 web/src/less/common-dialog.less delete mode 100644 web/src/less/highlight.less delete mode 100644 web/src/less/preview-image-dialog.less diff --git a/web/.prettierrc.js b/web/.prettierrc.js index 09a8189d..1b07b8aa 100644 --- a/web/.prettierrc.js +++ b/web/.prettierrc.js @@ -4,5 +4,5 @@ module.exports = { semi: true, singleQuote: false, plugins: [require.resolve("@trivago/prettier-plugin-sort-imports")], - importOrder: ["", "", "^@/((?!less).+)", "^[./]", "^(.+).less"], + importOrder: ["", "", "^[./]", "^(.+).css"], }; diff --git a/web/package.json b/web/package.json index 472e225a..5daa7c01 100644 --- a/web/package.json +++ b/web/package.json @@ -73,7 +73,6 @@ "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.2.1", "eslint-plugin-react": "^7.37.3", - "less": "^4.2.2", "long": "^5.2.3", "nice-grpc-web": "^3.3.5", "postcss": "^8.4.49", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 5df3a2d3..f2e0ae6f 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -195,9 +195,6 @@ importers: eslint-plugin-react: specifier: ^7.37.3 version: 7.37.3(eslint@8.57.1) - less: - specifier: ^4.2.2 - version: 4.2.2 long: specifier: ^5.2.3 version: 5.2.3 @@ -5074,6 +5071,7 @@ snapshots: copy-anything@2.0.6: dependencies: is-what: 3.14.1 + optional: true copy-to-clipboard@3.3.3: dependencies: @@ -6020,7 +6018,8 @@ snapshots: call-bound: 1.0.3 get-intrinsic: 1.2.6 - is-what@3.14.1: {} + is-what@3.14.1: + optional: true isarray@2.0.5: {} @@ -6130,6 +6129,7 @@ snapshots: mime: 1.6.0 needle: 3.3.1 source-map: 0.6.1 + optional: true levn@0.4.1: dependencies: @@ -6380,7 +6380,8 @@ snapshots: json-parse-even-better-errors: 2.3.1 lines-and-columns: 1.2.4 - parse-node-version@1.0.1: {} + parse-node-version@1.0.1: + optional: true path-data-parser@0.1.0: {} diff --git a/web/src/components/ChangeMemberPasswordDialog.tsx b/web/src/components/ChangeMemberPasswordDialog.tsx index 01652a95..c7317aab 100644 --- a/web/src/components/ChangeMemberPasswordDialog.tsx +++ b/web/src/components/ChangeMemberPasswordDialog.tsx @@ -64,16 +64,16 @@ const ChangeMemberPasswordDialog: React.FC = (props: Props) => { }; return ( - <> -
-

+

+
+

{t("setting.account-section.change-password")} ({user.nickname})

-
+

{t("auth.new-password")}

= (props: Props) => {
- +
); }; diff --git a/web/src/components/CreateAccessTokenDialog.tsx b/web/src/components/CreateAccessTokenDialog.tsx index 50600591..cb3505f4 100644 --- a/web/src/components/CreateAccessTokenDialog.tsx +++ b/web/src/components/CreateAccessTokenDialog.tsx @@ -84,14 +84,14 @@ const CreateAccessTokenDialog: React.FC = (props: Props) => { }; return ( - <> -
-

{t("setting.access-token-section.create-dialog.create-access-token")}

+
+
+

{t("setting.access-token-section.create-dialog.create-access-token")}

-
+
{t("setting.access-token-section.create-dialog.description")} * @@ -127,7 +127,7 @@ const CreateAccessTokenDialog: React.FC = (props: Props) => {
- +
); }; diff --git a/web/src/components/CreateIdentityProviderDialog.tsx b/web/src/components/CreateIdentityProviderDialog.tsx index b835a20e..025ecefb 100644 --- a/web/src/components/CreateIdentityProviderDialog.tsx +++ b/web/src/components/CreateIdentityProviderDialog.tsx @@ -242,14 +242,14 @@ const CreateIdentityProviderDialog: React.FC = (props: Props) => { }; return ( - <> -
+
+

{t(isCreating ? "setting.sso-section.create-sso" : "setting.sso-section.update-sso")}

-
+
{isCreating && ( <> @@ -429,7 +429,7 @@ const CreateIdentityProviderDialog: React.FC = (props: Props) => {
- +
); }; diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx index 5fc485d2..8fc73e2f 100644 --- a/web/src/components/CreateShortcutDialog.tsx +++ b/web/src/components/CreateShortcutDialog.tsx @@ -62,14 +62,14 @@ const CreateShortcutDialog: React.FC = (props: Props) => { }; return ( - <> -
+
+

{`${isCreating ? t("common.create") : t("common.edit")} ${t("common.shortcuts")}`}

-
+
{t("common.title")} @@ -116,7 +116,7 @@ const CreateShortcutDialog: React.FC = (props: Props) => {
- +
); }; diff --git a/web/src/components/CreateWebhookDialog.tsx b/web/src/components/CreateWebhookDialog.tsx index bf9f870d..a70d6328 100644 --- a/web/src/components/CreateWebhookDialog.tsx +++ b/web/src/components/CreateWebhookDialog.tsx @@ -93,8 +93,8 @@ const CreateWebhookDialog: React.FC = (props: Props) => { }; return ( - <> -
+
+

{isCreating ? t("setting.webhook-section.create-dialog.create-webhook") : t("setting.webhook-section.create-dialog.edit-webhook")}

@@ -102,7 +102,7 @@ const CreateWebhookDialog: React.FC = (props: Props) => {
-
+
{t("setting.webhook-section.create-dialog.title")} * @@ -140,7 +140,7 @@ const CreateWebhookDialog: React.FC = (props: Props) => {
- +
); }; diff --git a/web/src/components/Dialog/BaseDialog.tsx b/web/src/components/Dialog/BaseDialog.tsx index 5b9ede17..2ce85f8a 100644 --- a/web/src/components/Dialog/BaseDialog.tsx +++ b/web/src/components/Dialog/BaseDialog.tsx @@ -5,7 +5,6 @@ import { createRoot } from "react-dom/client"; import dialogStore from "@/store/v2/dialog"; import theme from "@/theme"; import { cn } from "@/utils"; -import "@/less/base-dialog.less"; interface DialogConfig { dialogName: string; @@ -53,8 +52,14 @@ const BaseDialog = observer((props: Props) => { }; return ( -
-
e.stopPropagation()}> +
+
e.stopPropagation()}> {children}
diff --git a/web/src/components/PreviewImageDialog.tsx b/web/src/components/PreviewImageDialog.tsx index 768ff19d..f6f3f578 100644 --- a/web/src/components/PreviewImageDialog.tsx +++ b/web/src/components/PreviewImageDialog.tsx @@ -1,7 +1,7 @@ +import { Button } from "@usememos/mui"; import { XIcon } from "lucide-react"; import React, { useEffect, useState } from "react"; import { generateDialog } from "./Dialog"; -import "@/less/preview-image-dialog.less"; const MIN_SCALE = 0.5; const MAX_SCALE = 5; @@ -154,13 +154,14 @@ const PreviewImageDialog: React.FC = ({ destroy, imgUrls, initialIndex }: return ( <> -
- +
+
-
+
e.stopPropagation()} @@ -179,7 +180,7 @@ const PreviewImageDialog: React.FC = ({ destroy, imgUrls, initialIndex }: export default function showPreviewImageDialog(imgUrls: string[] | string, initialIndex?: number): void { generateDialog( { - className: "preview-image-dialog", + className: "preview-image-dialog p-0 z-[1001]", dialogName: "preview-image-dialog", }, PreviewImageDialog, diff --git a/web/src/components/RenameTagDialog.tsx b/web/src/components/RenameTagDialog.tsx index f46b50cc..86d67ee0 100644 --- a/web/src/components/RenameTagDialog.tsx +++ b/web/src/components/RenameTagDialog.tsx @@ -47,14 +47,14 @@ const RenameTagDialog: React.FC = (props: Props) => { }; return ( - <> -
+
+

{"Rename tag"}

-
+
Old Name @@ -79,7 +79,7 @@ const RenameTagDialog: React.FC = (props: Props) => {
- +
); }; diff --git a/web/src/components/UpdateAccountDialog.tsx b/web/src/components/UpdateAccountDialog.tsx index 1eaa2fd1..fbf86254 100644 --- a/web/src/components/UpdateAccountDialog.tsx +++ b/web/src/components/UpdateAccountDialog.tsx @@ -140,14 +140,14 @@ const UpdateAccountDialog = ({ destroy }: Props) => { }; return ( - <> -
+
+

{t("setting.account-section.update-information")}

-
+
{t("common.avatar")}
- +
); }; diff --git a/web/src/components/UpdateCustomizedProfileDialog.tsx b/web/src/components/UpdateCustomizedProfileDialog.tsx index 64989e75..9e0a7663 100644 --- a/web/src/components/UpdateCustomizedProfileDialog.tsx +++ b/web/src/components/UpdateCustomizedProfileDialog.tsx @@ -97,14 +97,14 @@ const UpdateCustomizedProfileDialog = ({ destroy }: Props) => { }; return ( - <> -
+
+

{t("setting.system-section.customize-server.title")}

-
+

{t("setting.system-section.server-name")}

{t("setting.system-section.customize-server.icon-url")}

@@ -131,7 +131,7 @@ const UpdateCustomizedProfileDialog = ({ destroy }: Props) => {
- +
); }; diff --git a/web/src/css/highlight.css b/web/src/css/highlight.css new file mode 100644 index 00000000..235ed3a8 --- /dev/null +++ b/web/src/css/highlight.css @@ -0,0 +1,7 @@ +html.dark { + @import "highlight.js/styles/atom-one-dark.css"; +} + +html:not(.dark) { + @import "highlight.js/styles/github.css"; +} diff --git a/web/src/less/base-dialog.less b/web/src/less/base-dialog.less deleted file mode 100644 index e40e2080..00000000 --- a/web/src/less/base-dialog.less +++ /dev/null @@ -1,29 +0,0 @@ -.dialog-wrapper { - @apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 pb-8 px-4 z-1000 overflow-x-hidden overflow-y-scroll bg-transparent transition-all hide-scrollbar bg-black bg-opacity-60; - - > .dialog-container { - @apply max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg; - - > .dialog-header-container { - @apply flex flex-row justify-between items-center w-full mb-4; - - > .title-text { - > .icon-text { - @apply mr-2 text-base dark:text-gray-300; - } - } - - .btn { - @apply flex flex-col justify-center items-center w-6 h-6 rounded hover:bg-gray-100 dark:hover:bg-zinc-900 hover:shadow; - } - } - - > .dialog-content-container { - @apply flex flex-col justify-start items-start w-full; - } - - > .dialog-footer-container { - @apply flex flex-row justify-end items-center w-full mt-4; - } - } -} diff --git a/web/src/less/common-dialog.less b/web/src/less/common-dialog.less deleted file mode 100644 index 05b296c1..00000000 --- a/web/src/less/common-dialog.less +++ /dev/null @@ -1,29 +0,0 @@ -.common-dialog { - > .dialog-container { - @apply w-80; - - > .dialog-content-container { - @apply flex flex-col justify-start items-start; - - > .btns-container { - @apply flex flex-row justify-end items-center w-full mt-4; - - > .btn { - @apply text-sm py-1 px-3 mr-2 rounded-md hover:opacity-80 cursor-pointer; - - &.confirm-btn { - @apply bg-red-100 border border-solid border-blue-600 text-blue-600; - - &.warning { - @apply border-red-600 text-red-600; - } - } - } - } - - > .content-text{ - @apply whitespace-pre-wrap; - } - } - } -} diff --git a/web/src/less/highlight.less b/web/src/less/highlight.less deleted file mode 100644 index 6d95345b..00000000 --- a/web/src/less/highlight.less +++ /dev/null @@ -1,7 +0,0 @@ -html.dark { - @import (less) "highlight.js/styles/atom-one-dark.css"; -} - -html:not(.dark) { - @import (less) "highlight.js/styles/github.css"; -} diff --git a/web/src/less/preview-image-dialog.less b/web/src/less/preview-image-dialog.less deleted file mode 100644 index f343d229..00000000 --- a/web/src/less/preview-image-dialog.less +++ /dev/null @@ -1,31 +0,0 @@ -.preview-image-dialog { - @apply p-0; - z-index: 1001; - background-color: rgba(0, 0, 0, 0.6); - - > .dialog-container { - @apply flex flex-col justify-center items-center relative w-full h-full p-0; - background-color: unset; - - > .btns-container { - @apply fixed top-8 right-8 flex flex-col justify-start items-center; - - > .btn { - @apply mb-3 last:mb-0 w-8 h-8 p-1 cursor-pointer rounded opacity-90 bg-gray-300 dark:bg-zinc-600 z-10 shadow-md hover:opacity-70; - - > .icon-img { - @apply w-6 h-auto; - } - } - } - - > .img-container { - @apply w-full h-full p-4 sm:p-20 flex flex-col justify-center items-center hide-scrollbar; - background-color: unset; - - > img { - @apply h-auto w-auto max-w-full max-h-full shadow; - } - } - } -} diff --git a/web/src/main.tsx b/web/src/main.tsx index 847c2430..87309eb7 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -6,9 +6,9 @@ import { observer } from "mobx-react-lite"; import { createRoot } from "react-dom/client"; import { Toaster } from "react-hot-toast"; import { RouterProvider } from "react-router-dom"; +import "./css/highlight.css"; import "./css/tailwind.css"; import "./i18n"; -import "./less/highlight.less"; import router from "./router"; import { initialUserStore } from "./store/v2/user"; import { initialWorkspaceStore } from "./store/v2/workspace";