Merge branch 'master' of https://github.com/liyasthomas/postwoman

assets/css/themes.scss

@@ -3,6 +3,7 @@
 
   - dark (default)
   - light
+  - black
  */
 
 // Dark is the default theme variant.
@@ -27,6 +28,27 @@
   --act-color: rgb(37, 38, 40);
 }
 
+:root.black {
+  // Dark Background color
+  --bg-dark-color: rgb(23, 24, 26);
+  // Background color
+  --bg-color: #000;
+  // Auto-complete color
+  --atc-color: rgb(49, 49, 55);
+  // Text color
+  --fg-color: rgb(247, 248, 248);
+  // Light Text color
+  --fg-light-color: rgb(150, 155, 160);
+  // Border color
+  --brd-color: rgb(48, 47, 55);
+  // Error color
+  --err-color: rgb(41, 42, 45);
+  // Acent color
+  --ac-color: #50fa7b;
+  // Active text color
+  --act-color: rgb(37, 38, 40);
+}
+
 :root.light {
   // Dark Background color
   --bg-dark-color: #e8f0fe;

components/autocomplete.vue

@@ -1,19 +1,40 @@
 <template>
   <div class="autocomplete-wrapper">
     <label>
-      <input type="text" :placeholder="placeholder" v-model="value" @input="updateSuggestions" @keyup="updateSuggestions" @click="updateSuggestions" @keydown="handleKeystroke" ref="acInput" :spellcheck="spellcheck" :autocapitalize="spellcheck" :autocorrect="spellcheck">
+      <input
-      <ul class="suggestions" v-if="suggestions.length > 0 && suggestionsVisible" :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }">
+        type="text"
-        <li v-for="(suggestion, index) in suggestions" @click.prevent="forceSuggestion(suggestion)" :class="{ active: currentSuggestionIndex === index }" :key="index">{{ suggestion }}</li>
+        :placeholder="placeholder"
+        v-model="value"
+        @input="updateSuggestions"
+        @keyup="updateSuggestions"
+        @click="updateSuggestions"
+        @keydown="handleKeystroke"
+        ref="acInput"
+        :spellcheck="spellcheck"
+        :autocapitalize="spellcheck"
+        :autocorrect="spellcheck"
+      />
+      <ul
+        class="suggestions"
+        v-if="suggestions.length > 0 && suggestionsVisible"
+        :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"
+      >
+        <li
+          v-for="(suggestion, index) in suggestions"
+          @click.prevent="forceSuggestion(suggestion)"
+          :class="{ active: currentSuggestionIndex === index }"
+          :key="index"
+        >{{ suggestion }}</li>
       </ul>
     </label>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .autocomplete-wrapper {
+.autocomplete-wrapper {
   position: relative;
 
-    input:focus+ul.suggestions,
+  input:focus + ul.suggestions,
   ul.suggestions:hover {
     display: block;
   }
@@ -51,18 +72,17 @@
       }
     }
   }
-  }
+}
-
 </style>
 
 <script>
-  const KEY_TAB = 9;
+const KEY_TAB = 9;
-  const KEY_ESC = 27;
+const KEY_ESC = 27;
 
-  const KEY_ARROW_UP = 38;
+const KEY_ARROW_UP = 38;
-  const KEY_ARROW_DOWN = 40;
+const KEY_ARROW_DOWN = 40;
 
-  export default {
+export default {
   props: {
     spellcheck: {
       type: Boolean,
@@ -72,7 +92,7 @@
 
     placeholder: {
       type: String,
-        default: 'Start typing...',
+      default: "Start typing...",
       required: false
     },
 
@@ -84,7 +104,7 @@
 
   watch: {
     value() {
-        this.$emit('input', this.value);
+      this.$emit("input", this.value);
     }
   },
 
@@ -95,7 +115,7 @@
       suggestionsOffsetLeft: 0,
       currentSuggestionIndex: -1,
       suggestionsVisible: false
-      }
+    };
   },
 
   methods: {
@@ -111,7 +131,7 @@
       // As suggestions is a reactive property, this implicitly
       // causes suggestions to update.
       this.selectionStart = this.$refs.acInput.selectionStart;
-        this.suggestionsOffsetLeft = (12 * this.selectionStart);
+      this.suggestionsOffsetLeft = 12 * this.selectionStart;
       this.suggestionsVisible = true;
     },
 
@@ -125,28 +145,30 @@
     },
 
     handleKeystroke(event) {
-        if (event.which === KEY_ARROW_UP) {
+      switch (event.which) {
+
+        case KEY_ARROW_UP:
           event.preventDefault();
+          this.currentSuggestionIndex =this.currentSuggestionIndex - 1 >= 0 ? this.currentSuggestionIndex - 1 : 0;
+          break;
 
-          this.currentSuggestionIndex = this.currentSuggestionIndex - 1 >= 0 ?
+        case KEY_ARROW_DOWN:
-            this.currentSuggestionIndex - 1 :
-            0;
-        } else if (event.which === KEY_ARROW_DOWN) {
           event.preventDefault();
+          this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1  ? this.currentSuggestionIndex + 1
+              : this.suggestions.length - 1;
+          break;
 
-          this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1 ?
+        case KEY_TAB:
-            this.currentSuggestionIndex + 1 :
-            this.suggestions.length - 1;
-        }
-
-        if (event.which === KEY_TAB) {
           event.preventDefault();
-
           let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
           if (activeSuggestion) {
             let input = this.value.substring(0, this.selectionStart);
             this.value = input + activeSuggestion;
           }
+          break;
+
+        default:
+          break;
       }
     }
   },
@@ -160,14 +182,19 @@
     suggestions() {
       let input = this.value.substring(0, this.selectionStart);
 
-        return this.source.filter((entry) => {
+      return (
-            return entry.toLowerCase().startsWith(input.toLowerCase()) &&
+        this.source
-              input.toLowerCase() !== entry.toLowerCase();
+          .filter(entry => {
+            return (
+              entry.toLowerCase().startsWith(input.toLowerCase()) &&
+              input.toLowerCase() !== entry.toLowerCase()
+            );
           })
           // Cut off the part that's already been typed.
-          .map((entry) => entry.substring(this.selectionStart))
+          .map(entry => entry.substring(this.selectionStart))
           // We only want the top 3 suggestions.
-          .slice(0, 3);
+          .slice(0, 3)
+      );
     }
   },
 
@@ -176,6 +203,5 @@
       target: this.$refs.acInput
     });
   }
-  }
+};
-
 </script>

pages/settings.vue

@@ -88,6 +88,11 @@
             "name": "Light",
             "vibrant": true,
             "class": "light"
+          },
+          {
+            "color": "#000",
+            name: "Black",
+            "class": "black"
           }
         ],
         // You can define a new color here! It will simply store the color value.