✨ feat: config icon when creating new group

frostime · Oct 3, 2024 · 7861952 · 7861952
1 parent 98204c3
commit 7861952
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 30 deletions.
diff --git a/public/i18n/en_US.yaml b/public/i18n/en_US.yaml
@@ -103,6 +103,9 @@ newgroup:
     omit: No Process
     fb2p: First child of container
     b2doc: Display as document block
+  icontitle: Group Icon
+  # icondesc: 可以手动选择分组的图标；如果不设置，插件会根据分组类型分配默认的图标。
+  icondesc: Select the icon for the group; if not set, the plugin will assign a default icon based on the group type.
 
 bookmarktype:
   normal: 'Normal Bookmark'

diff --git a/public/i18n/zh_CN.yaml b/public/i18n/zh_CN.yaml
@@ -103,6 +103,8 @@ newgroup:
     omit: 无处理
     fb2p: 容器首个子块
     b2doc: 显示为文档块
+  icontitle: 分组图标
+  icondesc: 可以手动选择分组的图标；如果不设置，插件会根据分组类型分配默认的图标。
 bookmarktype:
   normal: '普通书签'
   dynamic: '动态书签'

diff --git a/src/components/bookmark.tsx b/src/components/bookmark.tsx
@@ -20,27 +20,30 @@ const createNewGroup = (confirmCb: (data: any) => void) => {
     let container = document.createElement("div") as HTMLDivElement;
     container.style.display = 'contents';
 
-    const [group, setGroup] = createSignal({name: "", type: "normal"});
-    const [rule, setRule] = createSignal({type: "", input: ""});
+    const [group, setGroup] = createSignal({ name: "", type: "normal" });
+    const [rule, setRule] = createSignal({ type: "", input: "" });
+    const [icon, setIcon] = createSignal<IBookmarkGroup['icon'] | null>(null);
 
     render(() => NewGroup({
         setGroup: (args) => {
             let current = group();
-            let newval = {...current, ...args};
+            let newval = { ...current, ...args };
             setGroup(newval);
         },
         setRule: (args) => {
             let current = rule();
-            let newval = {...current, ...args};
+            let newval = { ...current, ...args };
             setRule(newval);
-        }
+        },
+        icon,
+        setIcon
     }), container);
     confirmDialog({
         title: i18n.bookmark.new,
         content: container,
-        width: '600px',
+        width: '800px',
         confirm: () => {
-            confirmCb({group: group(), rule: rule()});
+            confirmCb({ group: group(), rule: rule(), icon: icon() });
         }
     });
 }
@@ -60,14 +63,14 @@ const BookmarkComponent: Component<Props> = (props) => {
     });
 
     const groupAdd = () => {
-        createNewGroup((result: {group: any, rule: any}) => {
+        createNewGroup((result: { group: any, rule: any, icon?: IBookmarkGroup['icon'] }) => {
             console.log(result);
-            let { group, rule } = result;
+            let { group, rule, icon } = result;
             if (group.name === "") {
                 showMessage(i18n.msg.groupNameEmpty, 3000, 'error');
                 return;
             }
-            props.model.newGroup(group.name, group.type, rule);
+            props.model.newGroup(group.name, group.type, rule, icon);
         });
     };
 

diff --git a/src/components/group.tsx b/src/components/group.tsx
@@ -14,33 +14,23 @@ import { groups, setGroups, configs, itemInfo } from "../model";
 import { BookmarkContext, itemMoving, setItemMoving, groupDrop, setGroupDrop } from "./context";
 import { getActiveDoc } from "@/utils";
 import Icon from "./icon";
-import { parseEmoji} from "./icon";
+import { parseEmoji } from "./icon";
 
-import SelectIcons from "./select-icon";
-import { solidDialog } from "@/libs/dialog";
+import { selectGroupIcon } from "./select-icon";
 
 const useGroupIcon = (props: Parameters<typeof Group>[0]) => {
     const { model } = useContext(BookmarkContext);
 
     const changeGroupIcon = () => {
-        const chooseIcon = (args: {
-            type: 'symbol' | 'emoji' | ''; value: string;
-        }) => {
-            close();
-            if (args.type === '' && args.value === '') {
+        selectGroupIcon({
+            onReset: () => {
                 model.setGroups(props.group.id, 'icon', null);
                 showMessage('Reset!');
-            } else {
-                model.setGroups(props.group.id, 'icon', args);
-                showMessage((args.type === 'symbol' ? args.value : parseEmoji(args.value)));
+            },
+            onUpdate: (icon) => {
+                model.setGroups(props.group.id, 'icon', icon);
+                showMessage((icon.type === 'symbol' ? icon.value : parseEmoji(icon.value)));
             }
-        }
-
-        const { close } = solidDialog({
-            title: i18n.selecticon.title,
-            loader: () => <SelectIcons choose={chooseIcon} />,
-            width: '800px',
-            height: '600px'
         });
     }
 

diff --git a/src/components/new-group.tsx b/src/components/new-group.tsx
@@ -13,6 +13,7 @@ import { RuleTemplate } from "@/utils/const";
 import { createContext, useContext } from "solid-js";
 
 import { Caret } from "@/utils/const";
+import { selectGroupIcon } from "./select-icon";
 
 const NewGroupContext = createContext<{
     groupType: Accessor<TBookmarkGroupType>;
@@ -234,6 +235,8 @@ const RuleEditor = () => {
 interface IPrpos {
     setGroup: (arg: { name?: string, type?: TBookmarkGroupType }) => void;
     setRule: (arg: { type?: string, input?: string }) => void;
+    icon: Accessor<IBookmarkGroup['icon']>;
+    setIcon: (args: IBookmarkGroup['icon']) => void;
 }
 
 const NewGroup = (props: IPrpos) => {
@@ -249,6 +252,17 @@ const NewGroup = (props: IPrpos) => {
 
     const transitionDuration = 100;
 
+    const changeGroupIcon = () => {
+        selectGroupIcon({
+            onReset: () => {
+                props.setIcon(null);
+            },
+            onUpdate: (icon) => {
+                props.setIcon(icon);
+            }
+        });
+    }
+
     return (
         <div class="fn__flex fn__flex-1 fn__flex-column"
             onkeydown={(e) => {
@@ -293,6 +307,22 @@ const NewGroup = (props: IPrpos) => {
                         }}
                     />
                 </Form.Wrap>
+                <Form.Wrap
+                    title={i18n_.icontitle}
+                    description={i18n_.icondesc}
+                >
+                    <div style={{ display: 'flex', "align-items": 'center' }} onClick={changeGroupIcon}>
+                        {(() => {
+                            if (!props.icon()) {
+                                return  <Icon symbol={groupType() === 'normal' ? 'iconFolder' : 'iconSearch'} />
+                            } else if (props.icon()?.type === 'symbol') {
+                                return <Icon symbol={props.icon()?.value} />
+                            } else {
+                                return <Icon emojiCode={props.icon()?.value} />
+                            }
+                        })()}
+                    </div>
+                </Form.Wrap>
             </div>
             <Transition
                 onExit={(el, done) => {

diff --git a/src/components/select-icon.tsx b/src/components/select-icon.tsx
@@ -1,6 +1,9 @@
 import { createSignal, For, Show } from "solid-js";
 import Icon from "./icon";
 import { inject } from "@/libs/inject";
+import { solidDialog } from "@/libs/dialog";
+
+import { i18n } from "@/utils/i18n";
 
 type ImojiGroup = {
     id: string;
@@ -75,4 +78,27 @@ const SelectIcons = (props: IProps) => {
     );
 }
 
+export const selectGroupIcon = (param: {
+    onReset: () => void;
+    onUpdate: (icon: { type: 'symbol' | 'emoji' | ''; value: string }) => void;
+}) => {
+    const chooseIcon = (icon: {
+        type: 'symbol' | 'emoji' | ''; value: string;
+    }) => {
+        close();
+        if (icon.type === '' && icon.value === '') {
+            param.onReset();
+        } else {
+            param.onUpdate(icon);
+        }
+    }
+
+    const { close } = solidDialog({
+        title: i18n.selecticon.title,
+        loader: () => <SelectIcons choose={chooseIcon} />,
+        width: '800px',
+        height: '600px'
+    });
+}
+
 export default SelectIcons;
diff --git a/src/model/index.ts b/src/model/index.ts
@@ -331,7 +331,7 @@ export class BookmarkDataModel {
         }
     }
 
-    newGroup(name: string, type?: TBookmarkGroupType, rule?: IDynamicRule) {
+    newGroup(name: string, type?: TBookmarkGroupType, rule?: IDynamicRule, icon?: IBookmarkGroup['icon']) {
         //6位 36进制
         let id: TBookmarkGroupId;
         while (id === undefined || groupMap().has(id)) {
@@ -343,7 +343,7 @@ export class BookmarkDataModel {
             items: [],
             type,
             rule,
-            icon: null
+            icon: icon ?? null
         };
 
         setGroups((gs) => [...gs, group]);

diff --git a/src/types/i18n.d.ts b/src/types/i18n.d.ts
@@ -113,6 +113,8 @@ interface I18n {
             fb2p: string;
             b2doc: string;
         };
+        icontitle: string;
+        icondesc: string;
     };
     bookmarktype: {
         normal: string;