Merge branch 'master' into feat/collections

2019-10-16 18:12:35 +05:30
parent e5b72c7072 d78c4041a3
commit 18a0c391f6
36 changed files with 4542 additions and 764 deletions
--- a/components/autocomplete.vue
+++ b/components/autocomplete.vue
@@ -1,181 +1,204 @@
 <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">
-      <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>
+    <input
+      type="text"
+      :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>
  </div>
 </template>

 <style lang="scss" scoped>
-  .autocomplete-wrapper {
-    position: relative;
+.autocomplete-wrapper {
+  position: relative;

-    input:focus+ul.suggestions,
-    ul.suggestions:hover {
+  input:focus + ul.suggestions,
+  ul.suggestions:hover {
+    display: block;
+  }
+
+  ul.suggestions {
+    display: none;
+    background-color: var(--atc-color);
+    position: absolute;
+    top: calc(100% - 4px);
+    margin: 0 4px;
+    left: 0;
+    padding: 0;
+    border-radius: 0 0 4px 4px;
+    z-index: 9999;
+    transition: transform 200ms ease-out;
+
+    li {
+      width: 100%;
      display: block;
-    }
+      padding: 8px 16px;
+      font-size: 18px;
+      font-family: 'Roboto Mono', monospace;
+      white-space: pre-wrap;

-    ul.suggestions {
-      display: none;
-      background-color: var(--atc-color);
-      position: absolute;
-      top: 90%;
-      margin: 0 4px;
-      left: 0;
-      padding: 0;
-      border-radius: 0 0 4px 4px;
-      z-index: 9999;
-      transition: transform 200ms ease-out;
+      &:last-child {
+        border-radius: 0 0 4px 4px;
+      }

-      li {
-        width: 100%;
-        display: block;
-        padding: 8px 16px;
-        font-weight: 700;
-        font-size: 18px;
-        font-family: monospace;
-        white-space: pre-wrap;
-
-        &:last-child {
-          border-radius: 0 0 4px 4px;
-        }
-
-        &:hover,
-        &.active {
-          background-color: var(--ac-color);
-          color: var(--act-color);
-          cursor: pointer;
-        }
+      &:hover,
+      &.active {
+        background-color: var(--ac-color);
+        color: var(--act-color);
+        cursor: pointer;
      }
    }
  }
-
+}
 </style>

 <script>
-  const KEY_TAB = 9;
-  const KEY_ESC = 27;
+const KEY_TAB = 9;
+const KEY_ESC = 27;

-  const KEY_ARROW_UP = 38;
-  const KEY_ARROW_DOWN = 40;
+const KEY_ARROW_UP = 38;
+const KEY_ARROW_DOWN = 40;

-  export default {
-    props: {
-      spellcheck: {
-        type: Boolean,
-        default: true,
-        required: false
-      },
-
-      placeholder: {
-        type: String,
-        default: 'Start typing...',
-        required: false
-      },
-
-      source: {
-        type: Array,
-        required: true
-      }
+export default {
+  props: {
+    spellcheck: {
+      type: Boolean,
+      default: true,
+      required: false
    },

-    watch: {
-      value() {
-        this.$emit('input', this.value);
-      }
+    placeholder: {
+      type: String,
+      default: "Start typing...",
+      required: false
    },

-    data() {
-      return {
-        value: "application/json",
-        selectionStart: 0,
-        suggestionsOffsetLeft: 0,
-        currentSuggestionIndex: -1,
-        suggestionsVisible: false
-      }
-    },
+    source: {
+      type: Array,
+      required: true
+    }
+  },

-    methods: {
-      updateSuggestions(event) {
-        // Hide suggestions if ESC pressed.
-        if (event.which && event.which === KEY_ESC) {
-          event.preventDefault();
-          this.suggestionsVisible = false;
-          this.currentSuggestionIndex = -1;
-          return;
-        }
+  watch: {
+    value() {
+      this.$emit("input", this.value);
+    }
+  },

-        // As suggestions is a reactive property, this implicitly
-        // causes suggestions to update.
-        this.selectionStart = this.$refs.acInput.selectionStart;
-        this.suggestionsOffsetLeft = (12 * this.selectionStart);
-        this.suggestionsVisible = true;
-      },
+  data() {
+    return {
+      value: "application/json",
+      selectionStart: 0,
+      suggestionsOffsetLeft: 0,
+      currentSuggestionIndex: -1,
+      suggestionsVisible: false
+    };
+  },

-      forceSuggestion(text) {
-        let input = this.value.substring(0, this.selectionStart);
-        this.value = input + text;
-
-        this.selectionStart = this.value.length;
-        this.suggestionsVisible = true;
+  methods: {
+    updateSuggestions(event) {
+      // Hide suggestions if ESC pressed.
+      if (event.which && event.which === KEY_ESC) {
+        event.preventDefault();
+        this.suggestionsVisible = false;
        this.currentSuggestionIndex = -1;
-      },
+        return;
+      }

-      handleKeystroke(event) {
-        if (event.which === KEY_ARROW_UP) {
+      // As suggestions is a reactive property, this implicitly
+      // causes suggestions to update.
+      this.selectionStart = this.$refs.acInput.selectionStart;
+      this.suggestionsOffsetLeft = 12 * this.selectionStart;
+      this.suggestionsVisible = true;
+    },
+
+    forceSuggestion(text) {
+      let input = this.value.substring(0, this.selectionStart);
+      this.value = input + text;
+
+      this.selectionStart = this.value.length;
+      this.suggestionsVisible = true;
+      this.currentSuggestionIndex = -1;
+    },
+
+    handleKeystroke(event) {
+      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 ?
-            this.currentSuggestionIndex - 1 :
-            0;
-        } else if (event.which === KEY_ARROW_DOWN) {
+        case 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 ?
-            this.currentSuggestionIndex + 1 :
-            this.suggestions.length - 1;
-        }
-
-        if (event.which === KEY_TAB) {
+        case 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;
      }
-    },
+    }
+  },

-    computed: {
-      /**
-       * Gets the suggestions list to be displayed under the input box.
-       *
-       * @returns {default.props.source|{type, required}}
-       */
-      suggestions() {
-        let input = this.value.substring(0, this.selectionStart);
+  computed: {
+    /**
+     * Gets the suggestions list to be displayed under the input box.
+     *
+     * @returns {default.props.source|{type, required}}
+     */
+    suggestions() {
+      let input = this.value.substring(0, this.selectionStart);

-        return this.source.filter((entry) => {
-            return entry.toLowerCase().startsWith(input.toLowerCase()) &&
-              input.toLowerCase() !== entry.toLowerCase();
+      return (
+        this.source
+          .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);
-      }
-    },
-
-    mounted() {
-      this.updateSuggestions({
-        target: this.$refs.acInput
-      });
+          .slice(0, 3)
+      );
    }
-  }
+  },

+  mounted() {
+    this.updateSuggestions({
+      target: this.$refs.acInput
+    });
+  }
+};
 </script>
--- a/components/history.vue
+++ b/components/history.vue
@@ -6,11 +6,14 @@
      </li>
    </ul>
    <ul>
+      <li @click="sort_by_label()">
+        <label for="" class="flex-wrap">Label<i class="material-icons">sort</i></label>
+      </li>
      <li @click="sort_by_time()">
        <label for="" class="flex-wrap">Time<i class="material-icons">sort</i></label>
      </li>
      <li @click="sort_by_status_code()">
-        <label for="" class="flex-wrap">Status Code<i class="material-icons">sort</i></label>
+        <label for="" class="flex-wrap">Status<i class="material-icons">sort</i></label>
      </li>
      <li @click="sort_by_url()">
        <label for="" class="flex-wrap">URL<i class="material-icons">sort</i></label>
@@ -21,6 +24,9 @@
    </ul>
    <virtual-list class="virtual-list" :class="{filled: filteredHistory.length}" :size="54" :remain="Math.min(5, filteredHistory.length)">
      <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
+        <li>
+          <input aria-label="Label" type="text" readonly :value="entry.label" placeholder="No label">
+        </li>
        <li>
          <input aria-label="Time" type="text" readonly :value="entry.time" :title="entry.date">
        </li>
@@ -32,7 +38,7 @@
          <input aria-label="URL" type="text" readonly :value="entry.url">
        </li>
        <li>
-          <input aria-label="Path" type="text" readonly :value="entry.path">
+          <input aria-label="Path" type="text" readonly :value="entry.path" placeholder="No path">
        </li>
        <div class="show-on-small-screen">
          <li>
@@ -101,6 +107,7 @@
        filterText: '',
        showFilter: false,
        isClearingHistory: false,
+        reverse_sort_label: false,
        reverse_sort_time: false,
        reverse_sort_status_code: false,
        reverse_sort_url: false,
@@ -198,6 +205,17 @@
        this.history = byUrl;
        this.reverse_sort_url = !this.reverse_sort_url;
      },
+      sort_by_label() {
+        let byLabel = this.history.slice(0);
+        byLabel.sort((a, b)=>{
+          if(this.reverse_sort_label)
+            return a.label == b.label ? 0 : +(a.label < b.label) || -1;
+          else
+            return a.label == b.label ? 0 : +(a.label > b.label) || -1;
+        });
+        this.history = byLabel;
+        this.reverse_sort_label = !this.reverse_sort_label;
+      },
      sort_by_path() {
        let byPath = this.history.slice(0);
        byPath.sort((a, b)=>{
--- a/components/settings/swatch.vue
+++ b/components/settings/swatch.vue
@@ -37,7 +37,7 @@
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
-          color: #fff;
+          color: #ffffff;
      }
    }
  }
--- a/components/toggle.vue
+++ b/components/toggle.vue
@@ -4,21 +4,22 @@
      <span class="handle"></span>
    </label>
    <label class="caption">
-      <slot /></label>
+      <slot/>
+    </label>
  </div>
 </template>

 <style lang="scss" scoped>
-  $useBorder: true;
-  $borderColor: var(--fg-color);
+  $useBorder: false;
+  $borderColor: var(--fg-light-color);
  $activeColor: var(--ac-color);
-  $inactiveColor: var(--fg-color);
+  $inactiveColor: var(--fg-light-color);

-  $inactiveHandleColor: $inactiveColor;
+  $inactiveHandleColor: var(--bg-color);
  $activeHandleColor: var(--act-color);

-  $width: 50px;
-  $height: 20px;
+  $width: 32px;
+  $height: 16px;
  $handleSpacing: 4px;

  $transition: all 0.2s ease-in-out;
@@ -29,7 +30,6 @@
  }

  label.caption {
-    margin-left: 4px;
    vertical-align: middle;
    cursor: pointer;
  }
@@ -43,11 +43,11 @@
    background-color: if($useBorder, transparent, $inactiveColor);
    vertical-align: middle;

-    border-radius: 100px;
+    border-radius: 32px;
    transition: $transition;
    box-sizing: initial;
    padding: 0;
-    margin: 10px 5px;
+    margin: 8px 4px;
    cursor: pointer;

    .handle {