feat: add usage tips

ineo6 · Jan 5, 2021 · 5c69189 · 5c69189
1 parent a651813
commit 5c69189
Show file tree

Hide file tree

Showing 12 changed files with 187 additions and 90 deletions.
diff --git a/README.md b/README.md
@@ -27,6 +27,23 @@ English | [简体中文](./README.zh-CN.md)
 - Code Snippet
 - Browse the history of files (GitHub && GitLab)
 
+## Usage
+
+By default, the extension only loads on domains below. You can manually enable the extension for your custom domain by clicking the extension icon and choosing Enable xxx.
+
+- github.com
+- gitlab.com
+- git.oschina.net、gitee.com
+- try.gitea.io
+
+### Pin first
+
+![guide-pin-en.png](https://i.loli.net/2021/01/05/1o7BywXICP3zb5k.png)
+
+### Mark site
+
+![guide-mark-en.png](https://i.loli.net/2021/01/05/DeX82mFdBtnVHiG.png)
+
 ## Settings
 
 ### Access Token

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -16,7 +16,7 @@
 
 - [Chrome Web Store](https://chrome.google.com/webstore/detail/git-master/klmeolbcejnhefkapdchfhlhhjgobhmo)
 - [Edge Web Store](https://microsoftedge.microsoft.com/addons/detail/pcpkfgepcjdmdfelbabogmgoadgmiocg)
-- [Firefox Addon](https://addons.mozilla.org/zh-CN/firefox/addon/git-master/)
+- [~~Firefox Addon~~](https://addons.mozilla.org/zh-CN/firefox/addon/git-master/)
 
 ## 特性
 
@@ -29,6 +29,25 @@
 - ⬇️ `GitHub`支持文件、目录下载
 - 📦 展示`GitHub`仓库和文件大小
 
+## 使用
+
+访问以下网站时会自动启用扩展：
+
+- github.com
+- gitlab.com
+- git.oschina.net、gitee.com
+- try.gitea.io
+
+如果你访问的网站是私有部署，需要你手动标记网站类型，具体操作过程如下：
+
+### 设置扩展长显
+
+![guide-pin-zh.png](https://i.loli.net/2021/01/05/JCAVEv1uqr4InPo.png)
+
+### 标记域名
+
+![guide-mark-zh.png](https://i.loli.net/2021/01/05/Lk2EdQGBSaKWCAN.png)
+
 ## 设置
 
 ### Access Token

diff --git a/materiel/guide-en.gif b/materiel/guide-en.gif
diff --git a/materiel/guide-mark-en.png b/materiel/guide-mark-en.png
diff --git a/materiel/guide-mark-zh.png b/materiel/guide-mark-zh.png
diff --git a/materiel/guide-pin-en.png b/materiel/guide-pin-en.png
diff --git a/materiel/guide-pin-zh.png b/materiel/guide-pin-zh.png
diff --git a/materiel/guide-zh.gif b/materiel/guide-zh.gif
diff --git a/src/Options/Options.tsx b/src/Options/Options.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
-import {browser} from 'webextension-polyfill-ts';
+import { browser } from 'webextension-polyfill-ts';
 import Switch from 'rc-switch';
+import { Modal, Row, Col } from 'antd';
+
 import optionsStorage from '@/Background/options-storage';
-import {requestPermission} from '@/Background/lib/permissions-service';
+import localStore from '@/Background/lib/local-store';
+import { requestPermission } from '@/Background/lib/permissions-service';
 import Message from './Message';
 import Section from './Section';
 import SectionOption from './SectionOption';
@@ -19,6 +22,7 @@ interface OptionsState {
   reuseTabs: boolean;
   updateCountOnNavigation: boolean;
   useJsDelivr: boolean;
+  visible: boolean;
 }
 
 class Options extends React.Component<any, OptionsState> {
@@ -34,6 +38,7 @@ class Options extends React.Component<any, OptionsState> {
       reuseTabs: false,
       updateCountOnNavigation: false,
       useJsDelivr: false,
+      visible: false,
     };
   }
 
@@ -43,10 +48,17 @@ class Options extends React.Component<any, OptionsState> {
     const optionData = await optionsStorage.getAll();
 
     this.setState(optionData);
+
+    const isGuideRead = await localStore.get('isGuideRead');
+
+    if (!isGuideRead) {
+      this.showGuide();
+      await localStore.set('isGuideRead', true);
+    }
   }
 
   saveField = (fieldName: string, fieldValue: any) => {
-    const updateData = {[fieldName]: fieldValue};
+    const updateData = { [fieldName]: fieldValue };
 
     // @ts-ignore
     this.setState(updateData);
@@ -97,98 +109,136 @@ class Options extends React.Component<any, OptionsState> {
     this.saveField('rootUrl', e.target.value);
   };
 
+  showGuide = () => {
+    this.setState({ visible: true });
+  };
+
+  handleCancel = () => {
+    this.setState({ visible: false });
+
+    localStore.set('isGuideRead', true);
+  };
+
+  handleGuideClick = () => {
+    this.setState({ visible: true });
+  };
+
   render() {
-    const {rootUrl, token, onlyParticipating, showDesktopNotif, playNotifSound, reuseTabs, updateCountOnNavigation, useJsDelivr} = this.state;
+    const {
+      rootUrl,
+      token,
+      onlyParticipating,
+      showDesktopNotif,
+      playNotifSound,
+      reuseTabs,
+      updateCountOnNavigation,
+      useJsDelivr,
+      visible,
+    } = this.state;
 
     return (
-      <form
-        id="options-form"
-        ref={ins => {
-          this.form = ins;
-        }}
-      >
-        <div className="header">
-          <h1>Git Master</h1>
-        </div>
-        <Section title={<Message i18n="github_notifications" />}>
-          <SectionOption
-            title="Root URL"
-            description={
-              <div className="small">
-                <Message i18n="notify_github_host_tip" />
-              </div>
-            }
-          >
-            <label>
-              <input
-                className="master-input github-url"
-                value={rootUrl}
-                onChange={this.handleUrlChange}
-                type="url"
-                name="rootUrl"
-                placeholder="e.g. https://github.yourco.com/"
-              />
-            </label>
-          </SectionOption>
-
-          <SectionOption
-            title="Token"
-            description={
-              <>
-                <div className="small">
-                  <Message i18n="notify_github_token_tip" />
+      <div>
+        <form
+          id="options-form"
+          ref={ins => {
+            this.form = ins;
+          }}
+        >
+          <div className="header">
+            <Row>
+              <Col span={5}>
+                <h1>Git Master</h1>
+              </Col>
+              <Col span={4}>
+                <div className="guide" onClick={this.handleGuideClick}>
+                  guide
                 </div>
+              </Col>
+            </Row>
+          </div>
+          <Section title={<Message i18n="github_notifications" />}>
+            <SectionOption
+              title="Root URL"
+              description={
                 <div className="small">
-                  <Message i18n="notify_github_token_private_tip" />
+                  <Message i18n="notify_github_host_tip" />
                 </div>
-              </>
-            }
-          >
-            <label>
-              <input
-                value={token}
-                onChange={this.handleTokenChange}
-                type="text"
-                name="token"
-                className="master-input github-token"
-                placeholder="a1b2c3d4e5f6g7h8i9j0a1b2c3d4e5f6g7h8i9j0"
-                pattern="[a-z\d]{40}"
-                spellCheck="false"
-              />
-            </label>
-          </SectionOption>
-
-          <SectionOption title={<Message i18n="notify_github_issue" />} layout="horizontal">
-            <Switch checked={onlyParticipating} onClick={this.handleParticipatingChange} />
-          </SectionOption>
-
-          <SectionOption title={<Message i18n="notify_github_desktop" />} layout="horizontal">
-            <Switch checked={showDesktopNotif} onClick={this.handleNotifyInputChange} />
-          </SectionOption>
-
-          <SectionOption title={<Message i18n="notify_github_sound" />} layout="horizontal">
-            <Switch checked={playNotifSound} onClick={this.handleSoundChange} />
-          </SectionOption>
-
-          <SectionOption title={<Message i18n="notify_github_reuse_tab" />} layout="horizontal">
-            <Switch checked={reuseTabs} onClick={this.handleReuseTabsChange} />
-          </SectionOption>
-
-          <SectionOption title={<Message i18n="notify_github_update_count" />} layout="horizontal">
-            <Switch checked={updateCountOnNavigation} onClick={this.handleTabUpdateChange} />
-          </SectionOption>
-        </Section>
-
-        <Section title="其他">
-          <SectionOption
-            title={<Message i18n="download_url_use_mirror" />}
-            layout="horizontal"
-            description={<Message i18n="download_url_use_mirror_desc" />}
-          >
-            <Switch checked={useJsDelivr} onClick={this.handleUseJsDelivrChange} />
-          </SectionOption>
-        </Section>
-      </form>
+              }
+            >
+              <label>
+                <input
+                  className="master-input github-url"
+                  value={rootUrl}
+                  onChange={this.handleUrlChange}
+                  type="url"
+                  name="rootUrl"
+                  placeholder="e.g. https://github.yourco.com/"
+                />
+              </label>
+            </SectionOption>
+
+            <SectionOption
+              title="Token"
+              description={
+                <>
+                  <div className="small">
+                    <Message i18n="notify_github_token_tip" />
+                  </div>
+                  <div className="small">
+                    <Message i18n="notify_github_token_private_tip" />
+                  </div>
+                </>
+              }
+            >
+              <label>
+                <input
+                  value={token}
+                  onChange={this.handleTokenChange}
+                  type="text"
+                  name="token"
+                  className="master-input github-token"
+                  placeholder="a1b2c3d4e5f6g7h8i9j0a1b2c3d4e5f6g7h8i9j0"
+                  pattern="[a-z\d]{40}"
+                  spellCheck="false"
+                />
+              </label>
+            </SectionOption>
+
+            <SectionOption title={<Message i18n="notify_github_issue" />} layout="horizontal">
+              <Switch checked={onlyParticipating} onClick={this.handleParticipatingChange} />
+            </SectionOption>
+
+            <SectionOption title={<Message i18n="notify_github_desktop" />} layout="horizontal">
+              <Switch checked={showDesktopNotif} onClick={this.handleNotifyInputChange} />
+            </SectionOption>
+
+            <SectionOption title={<Message i18n="notify_github_sound" />} layout="horizontal">
+              <Switch checked={playNotifSound} onClick={this.handleSoundChange} />
+            </SectionOption>
+
+            <SectionOption title={<Message i18n="notify_github_reuse_tab" />} layout="horizontal">
+              <Switch checked={reuseTabs} onClick={this.handleReuseTabsChange} />
+            </SectionOption>
+
+            <SectionOption title={<Message i18n="notify_github_update_count" />} layout="horizontal">
+              <Switch checked={updateCountOnNavigation} onClick={this.handleTabUpdateChange} />
+            </SectionOption>
+          </Section>
+
+          <Section title="其他">
+            <SectionOption
+              title={<Message i18n="download_url_use_mirror" />}
+              layout="horizontal"
+              description={<Message i18n="download_url_use_mirror_desc" />}
+            >
+              <Switch checked={useJsDelivr} onClick={this.handleUseJsDelivrChange} />
+            </SectionOption>
+          </Section>
+        </form>
+        <Modal width={900} centered visible={visible} onOk={this.showGuide} onCancel={this.handleCancel} footer={null}>
+          <img width="100%" src={browser.i18n.getMessage('guide_gif_url')} alt="" />
+        </Modal>
+      </div>
     );
   }
 }

diff --git a/src/Options/styles.less b/src/Options/styles.less
@@ -115,3 +115,8 @@ input {
     color: #fff;
   }
 }
+
+.guide {
+  color: #1890ff;
+  cursor: pointer;
+}
diff --git a/views/_locales/en/messages.json b/views/_locales/en/messages.json
@@ -112,5 +112,8 @@
   },
   "config_build_in_dark_tip": {
     "message": "When this option is off, extension's dark mode will be controlled by website self."
+  },
+  "guide_gif_url": {
+    "message": "https://i.loli.net/2021/01/05/bS7Os6deuRQW4zx.gif"
   }
 }
diff --git a/views/_locales/zh_CN/messages.json b/views/_locales/zh_CN/messages.json
@@ -112,5 +112,8 @@
   },
   "config_build_in_dark_tip": {
     "message": "取消内置模式后，将禁用扩展黑暗模式，并跟随网站主题设置"
+  },
+  "guide_gif_url": {
+    "message": "https://i.loli.net/2021/01/05/gxViNhUMk3zTEdu.gif"
   }
 }