From cf221fba901553e5b15e62d9ea8187b590b908bf Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Mon, 21 Jan 2019 00:07:11 +0100
Subject: [PATCH] Extension/site settings panel complete (but not functional)

---
 src/popup/App.vue                               | 15 ++++++++++-----
 .../{SitePanel.vue => DefaultSettingsPanel.vue} | 17 ++++++++---------
 2 files changed, 18 insertions(+), 14 deletions(-)
 rename src/popup/panels/{SitePanel.vue => DefaultSettingsPanel.vue} (79%)

diff --git a/src/popup/App.vue b/src/popup/App.vue
index d8f7cf5..634fc31 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -8,8 +8,8 @@
       <!-- TABS/SIDEBAR -->
       <div id="tablist" class="flex flex-column flex-nogrow flex-noshrink">
         <div class="menu-item"
-            :class="{'selected-tab': selectedTab === 'extension'}"
-            @click="selectTab('extension')"
+            :class="{'selected-tab': selectedTab === 'global'}"
+            @click="selectTab('global')"
         >
           <div class="">
             Extension settings
@@ -33,7 +33,6 @@
         >
           <div class="">
             Video settings
-            
           </div>
           <div v-if="selectedTab === 'video' && this.activeFrames.length > 0"
                class=""
@@ -81,8 +80,12 @@
                     :frame="selectedFrame"
                     :zoom="currentZoom"
                     @zoom-change="updateZoom($event)"
-        >
-        </VideoPanel>
+        />
+        <DefaultSettingsPanel v-if="settings && settings.active && (selectedTab === 'site' || selectedTab === 'global')"
+                              class=""
+                              :settings="settings"
+                              :scope="selectedTab"
+        />
       </div>
     </div>
   </div>
@@ -95,6 +98,7 @@ import Comms from '../ext/lib/comms/Comms';
 import VideoPanel from './panels/VideoPanel';
 import Settings from '../ext/lib/Settings';
 import ExecAction from './js/ExecAction.js';
+import DefaultSettingsPanel from './panels/DefaultSettingsPanel'
 
 export default {
   data () {
@@ -131,6 +135,7 @@ export default {
   },
   components: {
     VideoPanel,
+    DefaultSettingsPanel,
   },
   methods: {
     async sleep(t) {
diff --git a/src/popup/panels/SitePanel.vue b/src/popup/panels/DefaultSettingsPanel.vue
similarity index 79%
rename from src/popup/panels/SitePanel.vue
rename to src/popup/panels/DefaultSettingsPanel.vue
index cc9a293..f8794cb 100644
--- a/src/popup/panels/SitePanel.vue
+++ b/src/popup/panels/DefaultSettingsPanel.vue
@@ -11,7 +11,7 @@
           <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-extension-mode'"
                           class="flex button"
                           :class="{'setting-selected': getDefault('set-extension-mode') === action.cmd[0].arg}"
-                          :label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label"
+                          :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
           >
@@ -31,7 +31,7 @@
           <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-autoar-mode'"
                           class="flex button"
                           :class="{'setting-selected': getDefault('set-autoar-mode') === action.cmd[0].arg}"
-                          :label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label"
+                          :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
           >
@@ -48,7 +48,7 @@
           <ShortcutButton v-if="action.cmd.length === 1 && action.cmd[0].action === 'set-stretch'"
                           class="flex b3 button"
                           :class="{'setting-selected': getDefault('set-stretch') === action.cmd[0].arg}"
-                          :label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label"
+                          :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
           >
@@ -61,10 +61,10 @@
       <div class="label">Video alignment:</div>
       <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
-          <ShortcutButton v-if="action.scopes[this.scope] && action.scopes[this.scope].show && action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'"
+          <ShortcutButton v-if="action.scopes[scope] && action.scopes[scope].show && action.cmd.length === 1 && action.cmd[0].action === 'set-alignment'"
                           class="flex b3 button"
                           :class="{'setting-selected': getDefault('set-alignment') === action.cmd[0].arg}"
-                          :label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label"
+                          :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
                           >
@@ -77,9 +77,9 @@
       <div class="label">Multi-command actions:</div>
       <div class="flex flex-row flex-wrap">
         <template v-for="action of settings.active.actions">
-          <ShortcutButton v-if="action.scopes[this.scope] && action.scopes[this.scope].show && action.cmd.length > 1"
+          <ShortcutButton v-if="action.scopes[scope] && action.scopes[scope].show && action.cmd.length > 1"
                           class="flex b3 button"
-                          :label="(action.scopes[this.scope] && action.scopes[this.scope].label) ? action.scopes[this.scope].label : action.label"
+                          :label="(action.scopes[scope] && action.scopes[scope].label) ? action.scopes[scope].label : action.label"
                           :shortcut="parseShortcut(action)"
                           @click.native="execAction(action)"
                           >
@@ -102,7 +102,6 @@ export default {
   },
   props: [
     'settings',
-    'frame',
     'scope',
   ],
   created() {
@@ -118,7 +117,7 @@ export default {
   },
   methods: {
     execAction(action) {
-      this.exec.exec(action, this.scope, this.frame);
+      this.exec.exec(action, this.scope);
     },
     getDefault(action) {