From 34bc735d5c11464abd52f7f24bba7fb5ed978eac Mon Sep 17 00:00:00 2001 From: Red Adaya Date: Wed, 23 Oct 2024 10:53:06 +0800 Subject: [PATCH 1/3] bg selector widget --- frontend/app/block/block.tsx | 7 ++ frontend/app/view/background/background.less | 26 ++++++ frontend/app/view/background/background.tsx | 82 +++++++++++++++++++ pkg/wconfig/defaultconfig/defaultwidgets.json | 10 +++ 4 files changed, 125 insertions(+) create mode 100644 frontend/app/view/background/background.less create mode 100644 frontend/app/view/background/background.tsx diff --git a/frontend/app/block/block.tsx b/frontend/app/block/block.tsx index 98120959c..285d7b039 100644 --- a/frontend/app/block/block.tsx +++ b/frontend/app/block/block.tsx @@ -17,6 +17,7 @@ import { import { getWaveObjectAtom, makeORef, useWaveObjectValue } from "@/store/wos"; import { focusedBlockId, getElemAsStr } from "@/util/focusutil"; import { isBlank } from "@/util/util"; +import { Background, BackgroundModel, makeBackgroundModel } from "@/view/background/background"; import { HelpView, HelpViewModel, makeHelpViewModel } from "@/view/helpview/helpview"; import { QuickTipsView, QuickTipsViewModel } from "@/view/quicktipsview/quicktipsview"; import { TermViewModel, TerminalView, makeTerminalModel } from "@/view/term/term"; @@ -54,6 +55,9 @@ function makeViewModel(blockId: string, blockView: string, nodeModel: NodeModel) if (blockView === "help") { return makeHelpViewModel(blockId, nodeModel); } + if (blockView === "background") { + return makeBackgroundModel(blockId, nodeModel); + } return makeDefaultViewModel(blockId, blockView); } @@ -100,6 +104,9 @@ function getViewElem( if (blockView == "tips") { return ; } + if (blockView == "background") { + return ; + } return Invalid View "{blockView}"; } diff --git a/frontend/app/view/background/background.less b/frontend/app/view/background/background.less new file mode 100644 index 000000000..5421cf5d4 --- /dev/null +++ b/frontend/app/view/background/background.less @@ -0,0 +1,26 @@ +@import "../../mixins.less"; + +.background { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + + .background-inner { + max-width: 300px; + + .bg-item { + cursor: pointer; + padding: 8px 12px; + border-radius: 4px; + + &:hover { + background-color: var(--button-grey-hover-bg); + } + + .bg-label { + .ellipsis(); + } + } + } +} diff --git a/frontend/app/view/background/background.tsx b/frontend/app/view/background/background.tsx new file mode 100644 index 000000000..e085c4470 --- /dev/null +++ b/frontend/app/view/background/background.tsx @@ -0,0 +1,82 @@ +// Copyright 2024, Command Line Inc. +// SPDX-License-Identifier: Apache-2.0 + +import { atoms, globalStore } from "@/app/store/global"; +import { WebViewModel } from "@/app/view/webview/webview"; +import { NodeModel } from "@/layout/index"; +import * as services from "@/store/services"; +import * as WOS from "@/store/wos"; +import { atom, useAtomValue } from "jotai"; + +import "./background.less"; + +type BackgroundType = { + label: string; + click: () => void; +}; + +class BackgroundModel extends WebViewModel { + constructor(blockId: string, nodeModel: NodeModel) { + super(blockId, nodeModel); + + this.viewText = atom((get) => { + return []; + }); + this.viewType = "background"; + this.viewIcon = atom("fill-drip"); + this.viewName = atom("Background"); + } +} + +function makeBackgroundModel(blockId: string, nodeModel: NodeModel) { + return new BackgroundModel(blockId, nodeModel); +} + +function Background({ model }: { model: BackgroundModel }) { + const tabId = useAtomValue(atoms.activeTabId); + const backgrounds: BackgroundType[] = []; + const fullConfig = globalStore.get(atoms.fullConfigAtom); + const bgPresets: string[] = []; + for (const key in fullConfig?.presets ?? {}) { + if (key.startsWith("bg@")) { + bgPresets.push(key); + } + } + bgPresets.sort((a, b) => { + const aOrder = fullConfig.presets[a]["display:order"] ?? 0; + const bOrder = fullConfig.presets[b]["display:order"] ?? 0; + return aOrder - bOrder; + }); + if (bgPresets.length > 0) { + const oref = WOS.makeORef("tab", tabId); + for (const presetName of bgPresets) { + const preset = fullConfig.presets[presetName]; + if (preset == null) { + continue; + } + backgrounds.push({ + label: preset["display:name"] ?? presetName, + click: () => { + services.ObjectService.UpdateObjectMeta(oref, preset); + }, + }); + } + } + + return ( +
+
+ {backgrounds.map((bg, index) => { + return ( +
bg.click()}> +
+
{bg.label}
+
+ ); + })} +
+
+ ); +} + +export { Background, BackgroundModel, makeBackgroundModel }; diff --git a/pkg/wconfig/defaultconfig/defaultwidgets.json b/pkg/wconfig/defaultconfig/defaultwidgets.json index b59e5c59a..5e249cab3 100644 --- a/pkg/wconfig/defaultconfig/defaultwidgets.json +++ b/pkg/wconfig/defaultconfig/defaultwidgets.json @@ -50,5 +50,15 @@ "view": "sysinfo" } } + }, + "defwidget@background": { + "display:order": 5, + "icon": "fill-drip", + "label": "bg", + "blockdef": { + "meta": { + "view": "background" + } + } } } From 65158febc47e157ce92233abde750373829ca324 Mon Sep 17 00:00:00 2001 From: Red Adaya Date: Wed, 23 Oct 2024 10:56:31 +0800 Subject: [PATCH 2/3] preview color --- frontend/app/view/background/background.less | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/frontend/app/view/background/background.less b/frontend/app/view/background/background.less index 5421cf5d4..f347e2dce 100644 --- a/frontend/app/view/background/background.less +++ b/frontend/app/view/background/background.less @@ -13,11 +13,22 @@ cursor: pointer; padding: 8px 12px; border-radius: 4px; + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; &:hover { background-color: var(--button-grey-hover-bg); } + .bg-preview { + width: 20px; + height: 20px; + margin-right: 10px; + border-radius: 50%; + } + .bg-label { .ellipsis(); } From 6a84d00b5eee3a85224f3676db9a6021f71a8dc3 Mon Sep 17 00:00:00 2001 From: Red Adaya Date: Wed, 23 Oct 2024 11:37:03 +0800 Subject: [PATCH 3/3] fix color preview --- frontend/app/view/background/background.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/app/view/background/background.tsx b/frontend/app/view/background/background.tsx index e085c4470..b8acea593 100644 --- a/frontend/app/view/background/background.tsx +++ b/frontend/app/view/background/background.tsx @@ -12,6 +12,7 @@ import "./background.less"; type BackgroundType = { label: string; + color: string; click: () => void; }; @@ -56,6 +57,7 @@ function Background({ model }: { model: BackgroundModel }) { } backgrounds.push({ label: preset["display:name"] ?? presetName, + color: preset["bg"] ?? "var(--main-bg-color)", click: () => { services.ObjectService.UpdateObjectMeta(oref, preset); }, @@ -69,7 +71,7 @@ function Background({ model }: { model: BackgroundModel }) { {backgrounds.map((bg, index) => { return (
bg.click()}> -
+
{bg.label}
);