💄 Introducing tabs, minor UI changes

2019-09-16 13:50:28 +05:30
parent d93c76373c
commit e34662baec
7 changed files with 252 additions and 205 deletions
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -11,11 +11,11 @@ $responsiveWidth: 720px;
 }

 ::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, .5);
+  background-color: rgba(0, 0, 0, 0.5);
 }

 ::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, .6);
+  background-color: rgba(0, 0, 0, 0.6);
 }

 ::placeholder {
@@ -134,8 +134,7 @@ legend {
 }

 fieldset textarea,
-fieldset pre
-code {
+fieldset pre code {
  resize: vertical;
 }

@@ -148,11 +147,11 @@ fieldset.blue legend {
 }

 fieldset.gray {
-  border-color: #BCC2CD;
+  border-color: #bcc2cd;
 }

 fieldset.gray legend {
-  color: #BCC2CD;
+  color: #bcc2cd;
 }

 fieldset.green {
@@ -226,7 +225,6 @@ pre {
  width: calc(100% - 8px);
  background-color: var(--bg-dark-color);
  color: var(--fg-color);
-  font-weight: 700;
  font-size: 18px;
  font-family: monospace;
  transition: all 0.2s ease-in-out;
@@ -278,7 +276,7 @@ input[type="checkbox"] {
      justify-content: center;
      margin: 8px 8px 8px 0;
      color: transparent;
-      transition: .2s;
+      transition: 0.2s;
    }
  }

@@ -368,23 +366,23 @@ ol li {
 }

 .info-response {
-  background-color: #FFEB3B;
+  background-color: #ffeb3b;
 }

 .success-response {
-  background-color: #4BB543;
+  background-color: #4bb543;
 }

 .redir-response {
-  background-color: #FF5722;
+  background-color: #ff5722;
 }

 .cl-error-response {
-  background-color: #A63232;
+  background-color: #a63232;
 }

 .sv-error-response {
-  background-color: #B71C1C;
+  background-color: #b71c1c;
 }

 .missing-data-response {
@@ -403,7 +401,6 @@ fieldset#history {
      position: absolute;
      top: 44px;
      right: 12px;
-      font-weight: 700;
      font-family: monospace, monospace;
    }
  }
@@ -461,3 +458,37 @@ fieldset#history {
    }
  }
 }
+
+section {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+div.tab {
+  width: 100%;
+  order: 1;
+}
+
+input[type="radio"],
+div.tab {
+  display: none;
+}
+
+input[type="radio"] + label {
+  padding: 8px 16px;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: var(--err-color);
+  }
+}
+
+input[type="radio"]:checked + label {
+  border-color: var(--ac-color);
+}
+
+input[type="radio"]:checked + label + div.tab {
+  display: block;
+}
--- a/build.js
+++ b/build.js
@@ -1,14 +1,16 @@
-const axios = require('axios');
-const fs = require('fs');
-const { spawnSync } = require('child_process');
-const runCommand = (command, args) => spawnSync(command, args).stdout.toString().replace(/\n/g, "");
+const axios = require("axios");
+const fs = require("fs");
+const { spawnSync } = require("child_process");
+const runCommand = (command, args) =>
+  spawnSync(command, args)
+    .stdout.toString()
+    .replace(/\n/g, "");

 const FAIL_ON_ERROR = false;
 const PW_BUILD_DATA_DIR = "./.postwoman";
 const IS_DEV_MODE = process.argv.includes("--dev");

 try {
-
  (async () => {
    // Create the build data directory if it does not exist.
    if (!fs.existsSync(PW_BUILD_DATA_DIR)) {
@@ -17,30 +19,36 @@ try {

    let version = {};
    // Get the current version name as the tag from Git.
-		version.name = (process.env.TRAVIS_TAG || runCommand('git', ['tag']));
+    version.name = process.env.TRAVIS_TAG || runCommand("git", ["tag"]);

    // FALLBACK: If version.name was unset, let's grab it from GitHub.
-		if(!version.name){
-			version.name = (
-				await axios.get("https://api.github.com/repos/liyasthomas/postwoman/releases")
+    if (!version.name) {
+      version.name = (await axios
+        .get("https://api.github.com/repos/liyasthomas/postwoman/releases")
        // If we can't get it from GitHub, we'll resort to getting it from package.json
-					.catch(
-						(ex) => ({ data: [{ 'tag_name': require('./package.json').version }] })
-					)
-			).data[0]['tag_name'];
+        .catch(ex => ({
+          data: [{ tag_name: require("./package.json").version }]
+        }))).data[0]["tag_name"];
    }

    // Get the current version hash as the short hash from Git.
-		version.hash = runCommand('git', ['rev-parse', '--short', 'HEAD']);
+    version.hash = runCommand("git", ["rev-parse", "--short", "HEAD"]);
    // Get the 'variant' name as the branch, if it's not master.
-		version.variant = (process.env.TRAVIS_BRANCH || runCommand('git', ['branch']).split("* ")[1].split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : ""));
-		if(version.variant === "" || version.variant === "master") delete version.variant;
+    version.variant =
+      process.env.TRAVIS_BRANCH ||
+      runCommand("git", ["branch"])
+        .split("* ")[1]
+        .split(" ")[0] + (IS_DEV_MODE ? " - DEV MODE" : "");
+    if (version.variant === "" || version.variant === "master")
+      delete version.variant;

    // Write version data into a file
-		fs.writeFileSync(PW_BUILD_DATA_DIR + "/version.json", JSON.stringify(version));
+    fs.writeFileSync(
+      PW_BUILD_DATA_DIR + "/version.json",
+      JSON.stringify(version)
+    );
  })();
-
-}catch(ex){
+} catch (ex) {
  console.error(ex);
  process.exit(FAIL_ON_ERROR ? 1 : 0);
 }
--- a/components/autocomplete.vue
+++ b/components/autocomplete.vue
@@ -1,11 +1,9 @@
 <template>
  <div class="autocomplete-wrapper">
    <label>
-      <slot />
      <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 }">{{ suggestion }}</li>
+        <li v-for="(suggestion, index) in suggestions" @click.prevent="forceSuggestion(suggestion)" :class="{ active: currentSuggestionIndex === index }" :key="index">{{ suggestion }}</li>
      </ul>
    </label>
  </div>
@@ -13,7 +11,6 @@

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

    input:focus+ul.suggestions,
@@ -28,7 +25,6 @@
      top: 90%;
      margin: 0 4px;
      left: 0;
-
      padding: 0;
      border-radius: 0 0 4px 4px;
      z-index: 9999;
@@ -55,7 +51,6 @@
        }
      }
    }
-
  }

 </style>
--- a/components/section.vue
+++ b/components/section.vue
@@ -18,20 +18,19 @@
 </style>

 <script>
-    export default {
-
+export default {
  computed: {
-            noFrameColors () {
+    noFrameColors() {
      return this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false;
    }
  },

  props: {
-            "label": {
+    label: {
      type: String,
      default: "Section"
    },
-            "collapsed": {
+    collapsed: {
      type: Boolean
    }
  },
@@ -39,9 +38,8 @@
  methods: {
    collapse({ target }) {
      const parent = target.parentNode;
-                parent.querySelector(".collapsible").classList.toggle('hidden');
-            },
+      parent.querySelector(".collapsible").classList.toggle("hidden");
    }
-
  }
+};
 </script>
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -35,12 +35,13 @@
      <!-- Bottom section of footer: version/author information -->
      <p class="align-center">
        <span v-if="version.name">
-					<a v-bind:href="'https://github.com/liyasthomas/postwoman/releases/tag/' + version.name" target="_blank">{{version.name }}</a>
+          <a v-bind:href="'https://github.com/liyasthomas/postwoman/releases/tag/' + version.name" target="_blank">{{version.name}}</a>
          <span v-if="version.hash">
-						- <a v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash" target="_blank">{{ version.hash }}</a>
+            - <a v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash" target="_blank">{{version.hash}}</a>
          </span>
-          <span v-if="version.variant"> ({{ version.variant }})</span>
-          &#x2022; </span>by <a href="https://liyasthomas.web.app" target="_blank">Liyas Thomas 🦄</a>
+          <span v-if="version.variant"> ({{version.variant}})</span>
+          &#x2022;
+        </span> by <a href="https://liyasthomas.web.app" target="_blank">Liyas Thomas 🦄</a>
      </p>
    </footer>
  </div>
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -223,7 +223,11 @@
        </li>
      </ul>
    </pw-section>
-    <pw-section class="green" collapsed label="Authentication">
+    <section>
+      <input id="tab-one" type="radio" name="grp" checked="checked">
+      <label for="tab-one">Authentication</label>
+      <div class="tab">
+        <pw-section class="green" label="Authentication">
          <ul>
            <li>
              <label for="auth">Authentication Type</label>
@@ -264,7 +268,11 @@
            </li>
          </ul>
        </pw-section>
-    <pw-section class="orange" collapsed label="Headers">
+      </div>
+      <input id="tab-two" type="radio" name="grp">
+      <label for="tab-two">Headers</label>
+      <div class="tab">
+        <pw-section class="orange" label="Headers">
          <ul v-for="(header, index) in headers" :key="index">
            <li>
              <label :for="'header'+index">Header {{index + 1}}</label>
@@ -297,7 +305,11 @@
            </li>
          </ul>
        </pw-section>
-    <pw-section class="pink" collapsed label="Parameters">
+      </div>
+      <input id="tab-three" type="radio" name="grp">
+      <label for="tab-three">Parameters</label>
+      <div class="tab">
+        <pw-section class="pink" label="Parameters">
          <ul v-for="(param, index) in params" :key="index">
            <li>
              <label :for="'param'+index">Parameter {{index + 1}}</label>
@@ -330,6 +342,8 @@
            </li>
          </ul>
        </pw-section>
+      </div>
+    </section>
    <history @useHistory="handleUseHistory" ref="historyComponent"></history>
  </div>
 </template>
--- a/pages/websocket.vue
+++ b/pages/websocket.vue
@@ -28,7 +28,7 @@
          <label for="log">Log</label>
          <div id="log" name="log" class="log">
            <span v-if="communication.log">
-              <span v-for="logEntry in communication.log" :style="{ color: logEntry.color }">@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
+              <span v-for="(logEntry, index) in communication.log" :style="{ color: logEntry.color }" :key="index">@ {{ logEntry.ts }} {{ getSourcePrefix(logEntry.source) }} {{ logEntry.payload }}</span>
            </span>
            <span v-else>(Waiting for connection...)</span>
          </div>