Merge pull request #4 from xcodebuild/feature/hover-template

feat: fast template

Author: xcodebuild

CHANGELOG.md

@@ -0,0 +1,5 @@
+# 1.2.1
+
+- 规则编辑增加悬浮的快速模板按钮 @xcodebuild
+- Quick template button for rule editing @xcodebuild
+

src/renderer/extensions/rule-editor/components/card/index.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import { Icon as LegacyIcon } from '@ant-design/compatible';
-import { Select } from 'antd';
+import { Popover, Select, Button, Dropdown, Menu } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { findDOMNode } from 'react-dom';
+import { MenuOutlined } from '@ant-design/icons';
 
 interface Props {
     onFinish: (val: Option) => void;
@@ -116,36 +117,38 @@ export const Card = (props: Props) => {
     }, []);
 
     return (
-        <Select
-            showSearch
-            // defaultValue="add-cors"
-            onChange={val => {
-                const option = options.find(item => item.value === val) as Option;
-                onFinish(option);
-            }}
-            onBlur={onCancel}
-            ref={selectRef}
-            style={{
-                position: 'fixed',
-                top: y + 'px',
-                left: x + 'px',
-                width: '300px',
-            }}
-            showArrow={false}
-            className="ligthproxy-card"
+        <Dropdown
+            overlay={
+                <Menu>
+                     {options.map(item => {
+                        return (
+                            <Menu.Item key={item.value} onClick={() => {
+                                const option = options.find(findItem => findItem.value === item.value) as Option;
+                                onFinish(option);
+                            }}>
+                                <div className="iproxy-select-item">
+                                    <span className="iproxy-select-icon">
+                                        <LegacyIcon type={item.icon}></LegacyIcon>
+                                    </span>
+                                    <span className="iproxy-select-title">{t(item.title)}</span>
+                                </div>
+                            </Menu.Item>
+                        );
+                    })}
+                </Menu>
+            }
         >
-            {options.map(item => {
-                return (
-                    <Select.Option value={item.value} key={item.value}>
-                        <div className="iproxy-select-item">
-                            <span className="iproxy-select-icon">
-                                <LegacyIcon type={item.icon}></LegacyIcon>
-                            </span>
-                            <span className="iproxy-select-title">{t(item.title)}</span>
-                        </div>
-                    </Select.Option>
-                );
-            })}
-        </Select>
+            <Button
+                style={{
+                    left: x,
+                    top: y,
+                    position: 'absolute',
+                }}
+                size="small"
+                shape="circle"
+                icon={<MenuOutlined />}>
+            </Button>
+        </Dropdown>
+        
     );
 };

src/renderer/extensions/rule-editor/components/editor/index.tsx

@@ -28,6 +28,29 @@ export const Editor = (props: Props) => {
     const onSaveRef = useRef(onSave);
     onSaveRef.current = onSave;
 
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        // display a fast button when hover on line
+        if (containerRef.current) {
+            const onMouseOver = (e: MouseEvent) => {
+                if (!e.target) return;
+                const ele = e.target as HTMLElement;
+                if (ele.className === 'view-line') {
+                    // find line
+                    requestAnimationFrame(() => {
+                        const rect = ele.getBoundingClientRect();
+                        setShowCardsPos({ x: rect.x - 200, y: rect.y });
+                    });
+                }
+            };
+            containerRef.current.addEventListener('mouseover', onMouseOver);
+            return () => {
+                containerRef.current?.removeEventListener('mouseover', onMouseOver);
+            };
+        }
+    }, [containerRef]);
+
     useEffect(() => {
         const resizeEditor = () => {
             editorRef.current?.editor?.layout();
@@ -41,22 +64,6 @@ export const Editor = (props: Props) => {
 
     const handleChange = (val: string) => {
         onChange(val);
-        if (editorRef.current) {
-            const editor = editorRef.current.editor;
-
-            const model = editor?.getModel();
-            const position = editor?.getPosition();
-            if (model && position) {
-                const lineContent = model.getLineContent(position.lineNumber);
-                if (lineContent.replace(/^\s+/, '').replace(/\s+$/, '') === '/') {
-                    // trigger / cards
-
-                    const top = editor?.getTopForPosition(position.lineNumber, position.column) || 0;
-                    const offset = editor?.getScrollTop() || 0;
-                    setShowCardsPos({ x: 205, y: top - offset + 20 });
-                }
-            }
-        }
     };
 
     const handleFinished = (option: Option) => {
@@ -96,12 +103,11 @@ export const Editor = (props: Props) => {
     });
 
     return (
-        <div className="iproxy-rule-editor-container">
+        <div ref={containerRef} className="iproxy-rule-editor-container">
             <div
                 onDoubleClick={() => remote.getCurrentWindow().maximize()}
                 className="iproxy-editor-actionbar drag"
             >
-                <span className="tip">{t('Type / to insert rule')}</span>
             </div>
 
             <div className="iproxy-code-editor-container no-drag">

src/renderer/extensions/whistle/index.less

@@ -1,3 +1,9 @@
 .whistle-status-bar-item > * {
     vertical-align: middle;
 }
+
+.hover-menu {
+    .anticon {
+        margin-right: 5px;
+    }
+}

src/renderer/extensions/whistle/index.tsx

@@ -333,7 +333,7 @@ export class WhistleExntension extends Extension {
             }, []);
 
             const menu = (
-                <Menu>
+                <Menu className="hover-menu">
                     <Menu.Item onClick={this.toggleSystemProxy.bind(this)}>
                         <DesktopOutlined />
                         {onlineState === 'ready' ? t('Disable system proxy') : t('Enable system proxy')}

src/renderer/i18n.ts

@@ -20,7 +20,6 @@ export const i18nResources = {
             'Online but not system proxy': '代理已启动但不是系统代理',
             'Online & system proxy ready': '代理已经启动 & 设置为系统代理',
             'Default rule to keep some daily-software works behind proxy': '初始规则可以让一些日常使用软件在代理下工作',
-            'Type / to insert rule': '输入 / 插入规则',
             'Disable system proxy': '禁用系统代理',
             'Enable system proxy': '启用系统代理',
             search: '搜索',