feat(setting): update ui adjust and setting related, make a big chang…

…e on global.ts
Aoi-hosizora · Feb 25, 2022 · fe1a6eb · fe1a6eb
1 parent aaec758
commit fe1a6eb
Show file tree

Hide file tree

Showing 17 changed files with 491 additions and 266 deletions.
diff --git a/assets/how-to-install.jpg b/assets/how-to-install.jpg
diff --git a/assets/screenshot-setting.jpg b/assets/screenshot-setting.jpg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,12 +1,13 @@
 {
-    "name": "githubeventsext_userscript",
-    "title": "GitHub events extension",
+    "name": "github-events-ext-userscript",
+    "title": "Github events",
     "version": "1.0.8",
     "description": "A Userscript extension that let browser show GitHub activity events.",
     "main": "index.js",
     "scripts": {
         "watch": "rm dist -rf && webpack -w",
-        "build": "rm dist -rf && webpack"
+        "build": "rm dist -rf && webpack",
+        "serve": "sh serve_local.sh"
     },
     "repository": {
         "type": "git",

diff --git a/serve_local.sh b/serve_local.sh
@@ -0,0 +1,8 @@
+if [ -f "dist/github-events.user.js" ]; then
+    echo "🚀 You can visit http://localhost:5000/dist/github-events.user.js to install the extension!"
+    echo ""
+    python -m http.server 5000
+else
+    echo "🛑 Error! Could not found 'dist/github-events.user.js'. Please use 'npm run build' or 'npm run watch' to build first."
+    exit 1
+fi
diff --git a/src/content_script.ts b/src/content_script.ts
@@ -1,13 +1,12 @@
-import '@src/ts/extension';
+import '@src/ts/extensions';
 import $ from 'jquery';
 import { Global, readStorageToGlobal } from '@src/ts/global';
-import { adjustGithubUI, injectSidebar } from '@src/ts/main';
-import { checkURL } from '@src/ts/util';
+import { adjustGitHubUI, injectSidebar } from '@src/ts/main';
+import { checkURL } from '@src/ts/utils';
 
 // python -m http.server 5000
 // http://localhost:5000/dist/github-events.user.js
 
-
 $(() => {
     onLoaded();
 });
@@ -26,9 +25,9 @@ async function onLoaded() {
     // 2. load settings from storage
     await readStorageToGlobal();
 
-    // 3. adjust github ui
-    adjustGithubUI();
+    // 3. adjust GitHub UI
+    adjustGitHubUI();
 
-    // 4. add sidebar to github 
+    // 4. inject sidebar to GitHub
     injectSidebar();
 }
diff --git a/src/html/template.html b/src/html/template.html
@@ -9,13 +9,14 @@
 
 <nav class="ah-shadow ah-animated ah-nav-open" id="ahid-nav">
 
+    <!-- ////// Header panel start ////// -->
     <header id="ahid-header">
         <!-- Header Title -->
         <div id="ahid-title">
             ${if isAuthor}
             <!-- ////// author start ////// -->
             <span>
-                <svg width=16 height=12 viewBox="0 0 16 12">
+                <svg width=16 height=16 viewBox="0 0 16 12">
                     <path fill="#fff"
                         d="M12 14.002a.998.998 0 0 1-.998.998H1.001A1 1 0 0 1 0 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z">
                     </path>
@@ -28,7 +29,7 @@
             ${if isRepo}
             <!-- ////// repo start ////// -->
             <span>
-                <svg width=16 height=12 viewBox="0 0 16 12">
+                <svg width=16 height=16 viewBox="0 0 16 12">
                     <path fill="#fff"
                         d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z">
                     </path>
@@ -47,7 +48,7 @@
                     </path>
                 </svg>
             </span>
-            <a href="${apiUrl}" target="_blank" title="Open event API page"><span>${urlType} events</span></a>
+            <a href="${apiUrl}" target="_blank" title="Click here to open the event API page"><span>${urlType} events</span></a>
         </div>
         <!-- Header Commands -->
         <div id="ahid-commands">
@@ -58,31 +59,68 @@
                     </path>
                 </svg>
             </a>
-            <a id="ahid-feedback" href="javascript:void(0)" title="Feedback">
-                <svg width=14 height=14 viewBox="0 0 24 24">
-                    <path
-                        d="M20,2L4,2c-1.1,0 -1.99,0.9 -1.99,2L2,22l4,-4h14c1.1,0 2,-0.9 2,-2L22,4c0,-1.1 -0.9,-2 -2,-2zM13,14h-2v-2h2v2zM13,10h-2L11,6h2v4z">
-                    </path>
-                </svg>
-            </a>
             <a id="ahid-refresh" href="javascript:void(0)" title="Refresh">
-                <svg width=14 height=14 viewBox="0 0 24 24">
+                <svg width=16 height=16 viewBox="0 0 24 24">
                     <path
                         d="M17.65,6.35C16.2,4.9 14.21,4 12,4c-4.42,0 -7.99,3.58 -7.99,8s3.57,8 7.99,8c3.73,0 6.84,-2.55 7.73,-6h-2.08c-0.82,2.33 -3.04,4 -5.65,4 -3.31,0 -6,-2.69 -6,-6s2.69,-6 6,-6c1.66,0 3.14,0.69 4.22,1.78L13,11h7V4l-2.35,2.35z">
                     </path>
                 </svg>
             </a>
-            <a id="ahid-setting" href="javascript:void(0)" title="Setup token">
-                <svg width=12 height=12 viewBox="0 0 512 512">
-                    <path
-                        d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z">
-                    </path>
-                </svg>
-            </a>
+            <!-- Setting Dropdown Menu -->
+            <details id="ahid-setting" class="details-overlay">
+                <summary role="button">
+                    <span title="Setting">
+                        <svg width=12 height=12 viewBox="0 0 512 512">
+                            <path
+                            d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z">
+                            </path>
+                        </svg>
+                    </span>
+                </summary>
+                <details-menu class="dropdown-menu dropdown-menu-sw" role="menu">
+                    <label id="ahid-setup-token" class="dropdown-item pl-5" role="menuitem">
+                        Setup access token
+                    </label>
+                    <div class="dropdown-divider" />
+                    <label id="ahid-setup-follow-menu" class="dropdown-item pl-5 ah-checkable ah-enabled" role="menuitem">
+                        <svg width=16 height=16 viewBox="0 0 16 16" class="octicon ml-n4">${checkedPath}</svg>
+                        Add "Your followers" / "Your following" to avatar dropdown menu
+                    </label>
+                    <label id="ahid-setup-center-follow" class="dropdown-item pl-5 ah-checkable ah-enabled" role="menuitem">
+                        <svg width=16 height=16 viewBox="0 0 16 16" class="octicon ml-n4">${checkedPath}</svg>
+                        Center "followers" / "following" text in user profile page
+                    </label>
+                    <label id="ahid-setup-joined-time" class="dropdown-item pl-5 ah-checkable ah-enabled" role="menuitem">
+                        <svg width=16 height=16 viewBox="0 0 16 16" class="octicon ml-n4">${checkedPath}</svg>
+                        Show user joined time in user profile page
+                    </label>
+                    <label id="ahid-setup-user-counter" class="dropdown-item pl-5 ah-checkable ah-enabled" role="menuitem">
+                        <svg width=16 height=16 viewBox="0 0 16 16" class="octicon ml-n4">${checkedPath}</svg>
+                        Show private repositories and gists counts in user profile page
+                    </label>
+                    <label id="ahid-setup-repo-counter" class="dropdown-item pl-5 ah-checkable ah-enabled" role="menuitem">
+                        <svg width=16 height=16 viewBox="0 0 16 16" class="octicon ml-n4">${checkedPath}</svg>
+                        Show repository action counters in repository page
+                    </label>
+                    <button class="dropdown-item btn-link pl-5" role="menuitem" disabled>
+                        Attention: You are required to refresh this page if settings change.
+                    </button>
+                    <div class="dropdown-divider" />
+                    <a class="dropdown-item btn-link pl-5" role="menuitem" href="${feedbackUrl}" target="_blank">
+                        <svg width=16 height=16 viewBox="0 0 24 24" class="octicon ml-n4">
+                            <path
+                                d="M20,2L4,2c-1.1,0 -1.99,0.9 -1.99,2L2,22l4,-4h14c1.1,0 2,-0.9 2,-2L22,4c0,-1.1 -0.9,-2 -2,-2zM13,14h-2v-2h2v2zM13,10h-2L11,6h2v4z">
+                            </path>
+                        </svg>
+                        Bugs or features feedback
+                    </a>
+                </details-menu>
+            </details>
         </div>
     </header>
+    <!-- ////// Header panel start ////// -->
 
-    <!-- Body -->
+    <!-- ////// Main body start ////// -->
     <main id="ahid-body">
         <div id="ahid-message" class="ah-body-hide"></div>
 
@@ -98,5 +136,6 @@
             <a id="ahid-retry" class="ah-body-hide" href="javascript:void(0)">Retry...</a>
         </footer>
     </main>
+    <!-- ////// Main body end ////// -->
 
 </nav>
diff --git a/src/scss/core.scss b/src/scss/core.scss
@@ -57,9 +57,9 @@
     }
 }
 
-// ===========================
-// display for toggle and nav
-// ===========================
+// =======================
+// display for toggle, nav
+// =======================
 
 #ahid-nav {
     background: #fafbfc;

diff --git a/src/scss/header.scss b/src/scss/header.scss
@@ -35,14 +35,14 @@
     }
 
     svg {
-        margin-top: -3px;
+        margin-top: -5px;
         margin-right: -3px;
         color: white;
     }
 }
 
 #ahid-subtitle {
-    margin-top: 6px;
+    margin-top: 7px;
     font-size: 8px;
 
     a:-webkit-any-link {
@@ -62,10 +62,12 @@
 
 #ahid-commands {
     position: absolute;
-    top: 40px;
+    top: 39px;
     left: 12px;
 
-    a {
+    a,
+    details {
+        display: inline;
         position: relative;
         text-decoration: none;
     }
@@ -79,6 +81,49 @@
     }
 }
 
+$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+
+#ahid-commands details {
+    summary {
+        list-style: none;
+    }
+
+    details-menu {
+        top: 24px;
+        right: -11.8px;
+        z-index: 99;
+        width: 450px;
+
+        label,
+        a,
+        button {
+            display: block;
+            font-family: $body-font-family;
+            font-weight: 400 !important;
+
+            svg {
+                margin-right: 5px;
+                fill: currentColor;
+            }
+        }
+
+        .ah-checkable {
+            svg {
+                display: none;
+            }
+
+            &.ah-enabled svg {
+                display: inline-block;
+            }
+        }
+
+        .dropdown-divider {
+            margin: 4px 0;
+        }
+    }
+}
+
 #ahid-pin {
     left: 0;
 
@@ -93,16 +138,20 @@
     }
 }
 
-#ahid-feedback {
-    left: 3px;
-}
-
 #ahid-refresh {
     left: 1px;
-    top: -1px;
 }
 
 #ahid-setting {
     left: 1px;
     top: -2px;
 }
+
+.ah-hover-underline {
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline !important;
+        color: #79b7ff;
+    }
+}
diff --git a/src/ts/background.ts b/src/ts/background.ts
diff --git a/src/ts/extension.ts → src/ts/extensions.ts b/src/ts/extension.ts → src/ts/extensions.ts