Section for editing keyboard shortcuts is reasonably complete.

2019-04-12 21:06:01 +02:00 · 2019-04-12 21:06:01 +02:00 · 108297fe1b
commit 108297fe1b
parent 6435862daa
7 changed files with 140 additions and 36 deletions
--- a/src/common/components/action-alt.vue
+++ b/src/common/components/action-alt.vue
@ -6,7 +6,7 @@

      </div>
      <div class="flex action-name">
-        <span class="icon" @click="deleteAction()">🗙</span>
+        <span class="icon" @click="removeAction()">🗙</span>
        <span class="icon" @click="editAction()">🖉</span> {{action.name}}
      </div>
    </div>
--- a/src/options/App.vue
+++ b/src/options/App.vue
@ -11,6 +11,11 @@
                          @close="closePopups()"
      >
      </AddEditActionPopup>
+      <ConfirmPopup v-if="confirmationDialogText"
+                    :dialogText="confirmationDialogText"
+                    @close="closePopups()"
+                    @confirm="confirm()"
+      />
    </div>

    <!-- ACTUAL PAGE -->
@ -21,7 +26,7 @@
      <div class="header flex flex-column">
        <div class="flex extension-name text-sink-anchor">
          <div class="text-sink title-sink-pad w100 text-center">
-            Ultrawidify Vue
+            Ultrawidify
          </div>
        </div>

@ -39,11 +44,11 @@
              >
              Autodetection
          </div>
-          <div class="menu-item"
+          <div class="menu-item experimental"
              :class="{'selected-tab': selectedTab === 'controls'}"
              @click="setSelectedTab('controls')"
              >
-              Controls
+              Actions
          </div>
          <div class="menu-item"
              :class="{'selected-tab': selectedTab === 'about'}"
@ -80,15 +85,11 @@
          <ControlsSettings v-if="selectedTab === 'controls'"
                            :settings="settings"
                            @edit-event="showEditActionPopup($event)"
+                            @remove-event="showRemoveActionPopup($event)"
          >
          </ControlsSettings>

          <!-- Vice City/beggathon reference: https://youtu.be/Mn3YEJTSYs8?t=770 -->
-          <div style="margin-top: 160px;">
-            TODO  - remove this whne releasing, this is only for debug info.<br/>
-            Selected tab: {{selectedTab}} <small>Title: {{selectedTabTitle}}</small><br/>
-            Any  open popups: {{anyOpenedPopups}}
-          </div>
        </div>
      </div>
    </div>
@ -109,6 +110,7 @@ import Settings from '../ext/lib/Settings.js';
 import GeneralSettings from './general-settings';
 import ControlsSettings from './controls-settings/controls-settings';
 import AddEditActionPopup from './controls-settings/add-edit-action-popup';
+import ConfirmPopup from './common/ConfirmationPopup';

 import AutodetectionSettings  from './autodetection-settings';

@ -124,6 +126,10 @@ export default {
      editActionPopupVisible: false,
      editActionIndex: -1,
      anyOpenedPopups: false,
+      removeConfirmationDialog: '',
+      messages: {
+        removeAction: "Are you sure you want to remove this action?"
+      },
    }
  },
  async created () {
@ -136,6 +142,7 @@ export default {
    ControlsSettings,
    AddEditActionPopup,
    AutodetectionSettings,
+    ConfirmPopup,
  },
  methods: {
    setSelectedTab(newTab) {
@ -162,9 +169,24 @@ export default {
      this.editActionIndex = event;
      this.anyOpenedPopups = true;
    },
+    showRemoveActionPopup(indexToRemove) {
+      this.editActionIndex = indexToRemove;
+      this.anyOpenedPopups = true;
+      this.confirmationDialogText = this.messages.removeAction;
+    },
    closePopups(){
      this.anyOpenedPopups = false;
      this.editActionPopupVisible = false;
+      this.confirmationDialogText = '';
+    },
+    confirm(){
+      if (this.confirmationDialogText === this.messages.removeAction) {
+        this.settings.active.actions.splice(this.editActionIndex, 1);
+        this.settings.save();
+      }
+
+
+      this.closePopups();
    }
  }
 };
@ -182,6 +204,9 @@ export default {
  width: 100%;
  height: 100%;
  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-content: center;
 }

 .blur {
--- a/src/options/common/ConfirmationPopup.vue
+++ b/src/options/common/ConfirmationPopup.vue
@ -0,0 +1,66 @@
+<template>
+  <div class="full-screen"
+       @click="cancel()"
+  >
+    <div class="dialog-box flex flex-column" @click="$event.stopPropagation()">
+      <div>
+        {{dialogText}}
+      </div>
+      <div class="flex flex-row flex-end">
+        <ShortcutButton class="flex b3 button"
+                        label="Ok"
+                        @click.native="confirm()"
+        />
+        <ShortcutButton class="flex b3 button"
+                        label="Cancel"
+                        @click.native="cancel()"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ShortcutButton from '../../common/components/shortcut-button.vue' 
+
+export default {
+  props: {
+    dialogText: String,
+  },
+  components: {
+    ShortcutButton
+  },
+  methods: {
+    cancel() {
+      this.$emit('close')
+    },
+    confirm() {
+      this.$emit('confirm')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.full-screen {
+  background-color: rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.dialog-box {
+  background-color: rgba(0,0,0,0.9);
+  // width: 100%;
+  // height: 100%;
+  max-width: 130rem;
+  max-height: 42rem;
+  padding-top: 2rem;
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+</style>
--- a/src/options/controls-settings/add-edit-action-popup.vue
+++ b/src/options/controls-settings/add-edit-action-popup.vue
@ -1,6 +1,6 @@
 <template>
  <div class="full-screen"
-       @click="$emit('close')"
+       @click="cancel()"
  >
    <div class="dialog-box flex flex-column" @click="$event.stopPropagation()">
      <div class="window-title">
@ -22,13 +22,6 @@
      >
      </CommandAddEdit>

-      <pre style="height: 500px; overflow-y: scroll; overflow-x: hidden">
-        ----- [ raw action data ] -----
-        Action:
-        {{action}}
-        --- [ end raw action data ] ---
-      </pre>
-
      <div class="flex flex-column">
        <div class="flex flex-row">
          <div class="flex label-secondary form-label">
@ -185,13 +178,14 @@ export default {
      this.action.label = newLabel;
    },
    updateScopes(scope, prop, value) {
-      if(!this.action.scopes[scope]) {
+      console.log("updating scope", scope, "for prop", prop, ". New value:", value)
+      if(this.action.scopes[scope] === undefined) {
        this.action.scopes[scope] = {};
      }
      this.action.scopes[scope][prop] = value;

      // TODO: remove for release
-      this.action = JSON.parse(JSON.stringify(this.action))
+      // this.action = JSON.parse(JSON.stringify(this.action))
    },
    addNewCommand() {
      this.currentCmdIndex = -1;
@ -245,7 +239,7 @@ export default {
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
-  justify-items: center;
+  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
--- a/src/options/controls-settings/command-builder/command-add-edit.vue
+++ b/src/options/controls-settings/command-builder/command-add-edit.vue
@ -78,20 +78,6 @@
        Save
      </div>
    </div>
-    <pre>
-    ----- [ COMMAND DATA ] -----
-    
-    :: Action:
-    {{action}}
-
-    :: Selected Action:
-    {{selectedAction}}
-    
-    :: Selected Argumennt:
-    {{selectedArgument}}
-    --- [ END COMMAND DATA ] ---  
-  </pre>
-
  </div>
 </template>

--- a/src/options/controls-settings/controls-settings.vue
+++ b/src/options/controls-settings/controls-settings.vue
@ -1,6 +1,28 @@
 <template>
  <div>
-    <p>Here, you can change keyboard shortcuts or even create your own.</p>
+    <p>Here you can create, edit or remove actions. This includes adding keyboard shortcuts that trigger them, or toggling visibility of each action in the extension popup.</p>
+    <p><b>Note that this section is highly experimental.</b> If there's extension-breaking bugs, please file a bug report on github or e-mail me.
+    However, there's some bugs that I'm aware of, but have little intentions to fix any time soon: <ul>
+      <li><b>Crop actions</b> (and maybe some others) are limited to the <i>page</i> scope (‘Video settings’ in popup) by design.
+      Yes, 'global' and 'site' checkboxes are still there, but they won't do anything. I probably won't remove them any time soon,
+      because I'd honestly rather spend my finite time on other things.</li>
+      <li>UI looks absolutely atrocious, and it's prolly gonna stay that way for a while. I am open to specific design suggestions, though.</li>
+      <li><b>For shortcuts:</b> you can use modifier keys (ctrl/alt/meta/shift), but remember to release modifier keys last. For example,
+      if you want to do use shift-S for anything: press both keys, release S, release shift. If you release shift first, extension
+      will think you were holding only shift key. You're prolly used to doing things that way already. If you're not — bad news,
+      reworking how keyboard shortcuts work isn't going to happen for a while.</li>
+      <li>I don't think reordering (in a user-friendly way at least) is gonna happen any time soon.</li>
+    </ul>
+    </p>
+
+    <p>&nbsp;</p>
+
+    <div class="flex flex-row button-box">
+      <Button label="Add new action"
+              @click.native="addAction()"
+      >
+      </Button>
+    </div>

    <div class="flex flex-column">
      <div class="action-item-category-header">
@ -11,6 +33,7 @@
                   :key="index"
                   :action="action"
                   @edit="changeShortcut(index)"
+                   @remove="removeAction(index)"
        >
        </ActionAlt>
      </template>
@ -24,6 +47,7 @@
                   :key="index"
                   :action="action"
                   @edit="changeShortcut(index)"
+                   @remove="removeAction(index)"
        >
        </ActionAlt>
      </template>
@ -37,6 +61,7 @@
                   :key="index"
                   :action="action"
                   @edit="changeShortcut(index)"
+                   @remove="removeAction(index)"
        >
        </ActionAlt>
      </template>
@ -55,6 +80,7 @@
                   :key="index"
                   :action="action"
                   @edit="changeShortcut(index)"
+                   @remove="removeAction(index)"
        >
        </ActionAlt>
      </template>
@ -76,6 +102,7 @@
                   :key="index"
                   :action="action"
                   @edit="changeShortcut(index)"
+                   @remove="removeAction(index)"
        >
        </ActionAlt>
      </template>
@ -114,6 +141,12 @@ export default {
    }
  },
  methods: {
+    removeAction(index) {
+      this.$emit('remove-event', index)
+    },
+    addAction() {
+      this.$emit('edit-event', -1);
+    },
    changeShortcut(index) {
      this.$emit('edit-event', index);
    }
--- a/src/options/controls-settings/scope-settings-component/scope-settings.vue
+++ b/src/options/controls-settings/scope-settings-component/scope-settings.vue
@ -7,7 +7,7 @@
      <div class="flex flex-input flex-grow">
        <input type="checkbox"
               :checked="scopeOptions.show"
-               @input="$emit('show', $event.target.value)"
+               @input="$emit('show', $event.target.checked)"
        />
      </div>
    </div>