feat: minor ui tweaks

2021-06-14 09:55:27 +05:30
parent ced2f1b911
commit 111a947413
28 changed files with 48 additions and 95 deletions
--- a/components/app/Section.vue
+++ b/components/app/Section.vue
@@ -26,7 +26,7 @@ export default Vue.extend({
    },
    noLegend: {
      type: Boolean,
-      default: false,
+      default: true,
    },
  },
  computed: {
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -232,6 +232,7 @@ export default {
      this.hideModal()
    },
    hideModal() {
+      this.picked = null
      this.$emit("hide-modal")
    },
  },
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -36,7 +36,7 @@
        >
          <i class="material-icons">topic</i>
        </button>
-        <v-popover v-if="!savingMode">
+        <v-popover>
          <button v-tooltip.left="$t('more')" class="tooltip-target icon">
            <i class="material-icons">more_vert</i>
          </button>
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -28,7 +28,7 @@
          <span>{{ folder.name }}</span>
        </button>
      </div>
-      <v-popover v-if="!savingMode">
+      <v-popover>
        <button v-tooltip.left="$t('more')" class="tooltip-target icon">
          <i class="material-icons">more_vert</i>
        </button>
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -25,7 +25,7 @@
          <span>{{ request.name }}</span>
        </button>
      </div>
-      <v-popover v-if="!savingMode">
+      <v-popover>
        <button v-tooltip="$t('more')" class="tooltip-target icon">
          <i class="material-icons">more_vert</i>
        </button>
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -1,12 +1,8 @@
 <template>
-  <AppSection
-    ref="collections"
-    class="yellow"
-    :label="$t('collections')"
-    no-legend
-  >
+  <AppSection ref="collections" :label="$t('collections')">
    <div class="show-on-large-screen">
      <input
+        v-if="showCollActions"
        v-model="filterText"
        aria-label="Search"
        type="search"
@@ -50,11 +46,7 @@
      @hide-modal="displayModalImportExport(false)"
    />
    <div class="border-b row-wrapper border-divider">
-      <button
-        v-if="showCollActions"
-        class="icon"
-        @click="displayModalAdd(true)"
-      >
+      <button class="icon" @click="displayModalAdd(true)">
        <i class="material-icons">add</i>
        <span>{{ $t("new") }}</span>
      </button>
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="collections" :label="$t('collections')" no-legend>
+  <AppSection ref="collections" :label="$t('collections')">
    <div class="show-on-large-screen">
      <input
        v-if="!saveRequest"
@@ -57,8 +57,7 @@
        v-if="
          collectionsType.type == 'team-collections' &&
          (collectionsType.selectedTeam == undefined ||
-            collectionsType.selectedTeam.myRole == 'VIEWER') &&
-          !saveRequest
+            collectionsType.selectedTeam.myRole == 'VIEWER')
        "
        class="icon"
        disabled
@@ -69,11 +68,7 @@
          <span>{{ $t("new") }}</span>
        </div>
      </button>
-      <button
-        v-else-if="!saveRequest"
-        class="icon"
-        @click="displayModalAdd(true)"
-      >
+      <button v-else class="icon" @click="displayModalAdd(true)">
        <i class="material-icons">add</i>
        <span>{{ $t("new") }}</span>
      </button>
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -44,7 +44,7 @@
        >
          <i class="material-icons">check_box</i>
        </button>
-        <v-popover v-if="!saveRequest">
+        <v-popover>
          <button v-tooltip.left="$t('more')" class="tooltip-target icon">
            <i class="material-icons">more_vert</i>
          </button>
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -27,7 +27,7 @@
          <span>{{ folder.name ? folder.name : folder.title }}</span>
        </button>
      </div>
-      <v-popover v-if="!saveRequest">
+      <v-popover>
        <button v-tooltip.left="$t('more')" class="tooltip-target icon">
          <i class="material-icons">more_vert</i>
        </button>
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -27,7 +27,7 @@
          <span>{{ request.name }}</span>
        </button>
      </div>
-      <v-popover v-if="!saveRequest">
+      <v-popover>
        <button v-tooltip="$t('more')" class="tooltip-target icon">
          <i class="material-icons">more_vert</i>
        </button>
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -33,7 +33,7 @@
        >
          <i class="material-icons">check_box</i>
        </button>
-        <v-popover v-if="!saveRequest">
+        <v-popover>
          <button
            v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
            v-tooltip.left="$t('more')"
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -18,7 +18,7 @@
          <span>{{ folder.name ? folder.name : folder.title }}</span>
        </button>
      </div>
-      <v-popover v-if="!saveRequest">
+      <v-popover>
        <button
          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
          v-tooltip.left="$t('more')"
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -17,7 +17,7 @@
          <span>{{ request.name }}</span>
        </button>
      </div>
-      <v-popover v-if="!saveRequest">
+      <v-popover>
        <button
          v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
          v-tooltip="$t('more')"
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -1,10 +1,5 @@
 <template>
-  <AppSection
-    ref="environments"
-    icon="history"
-    :label="$t('environments')"
-    no-legend
-  >
+  <AppSection ref="environments" :label="$t('environments')">
    <div class="show-on-large-screen">
      <span class="select-wrapper">
        <select
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="history" icon="history" :label="$t('history')" no-legend>
+  <AppSection ref="history" :label="$t('history')">
    <div class="show-on-large-screen">
      <input
        v-model="filterText"
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="headers" label="Headers" no-legend>
+  <AppSection ref="headers" label="Headers">
    <ul v-if="headers.length !== 0">
      <li>
        <div class="row-wrapper">
--- a/components/http/Notes.vue
+++ b/components/http/Notes.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="sync" :label="$t('notes')" no-legend>
+  <AppSection ref="sync" :label="$t('notes')">
    <div v-if="fb.currentUser">
      <FirebaseInputform />
      <FirebaseFeeds />
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="parameters" label="Parameters" no-legend>
+  <AppSection ref="parameters" label="Parameters">
    <ul v-if="params.length !== 0">
      <li>
        <div class="row-wrapper">
--- a/components/http/Response.vue
+++ b/components/http/Response.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection id="response" ref="response" :label="$t('response')" no-legend>
+  <AppSection id="response" ref="response" :label="$t('response')">
    <HttpResponseMeta :response="response" :active="active" />
    <div v-if="response.body && response.body !== $t('loading')">
      <LensesResponseBodyRenderer :response="response" />
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <AppSection :label="$t('request')" no-legend>
+    <AppSection :label="$t('request')">
      <ul>
        <li>
          <label for="mqtt-url">{{ $t("url") }}</label>
@@ -34,7 +34,7 @@
      </ul>
    </AppSection>

-    <AppSection :label="$t('communication')" no-legend>
+    <AppSection :label="$t('communication')">
      <ul>
        <li>
          <RealtimeLog :title="$t('log')" :log="log" />
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <AppSection ref="request" :label="$t('request')" no-legend>
+    <AppSection ref="request" :label="$t('request')">
      <ul>
        <li>
          <label for="socketio-url">{{ $t("url") }}</label>
@@ -43,12 +43,7 @@
      </ul>
    </AppSection>

-    <AppSection
-      id="response"
-      ref="response"
-      :label="$t('communication')"
-      no-legend
-    >
+    <AppSection id="response" ref="response" :label="$t('communication')">
      <ul>
        <li>
          <RealtimeLog :title="$t('log')" :log="communication.log" />
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <AppSection ref="request" :label="$t('request')" no-legend>
+    <AppSection ref="request" :label="$t('request')">
      <ul>
        <li>
          <label for="server">{{ $t("server") }}</label>
@@ -36,12 +36,7 @@
      </ul>
    </AppSection>

-    <AppSection
-      id="response"
-      ref="response"
-      :label="$t('communication')"
-      no-legend
-    >
+    <AppSection id="response" ref="response" :label="$t('communication')">
      <ul>
        <li>
          <RealtimeLog :title="$t('events')" :log="events.log" />
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <AppSection ref="request" :label="$t('request')" no-legend>
+    <AppSection ref="request" :label="$t('request')">
      <ul>
        <li>
          <label for="websocket-url">{{ $t("url") }}</label>
@@ -37,12 +37,7 @@
      </ul>
    </AppSection>

-    <AppSection
-      id="response"
-      ref="response"
-      :label="$t('communication')"
-      no-legend
-    >
+    <AppSection id="response" ref="response" :label="$t('communication')">
      <ul>
        <li>
          <RealtimeLog :title="$t('log')" :log="communication.log" />
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -1,11 +1,5 @@
 <template>
-  <AppSection
-    ref="teams"
-    class="green"
-    icon="history"
-    :label="$t('teams')"
-    no-legend
-  >
+  <AppSection ref="teams" :label="$t('teams')">
    <div class="flex flex-col">
      <label>{{ $t("teams") }}</label>
      <div v-if="fb.currentUser"></div>
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -2,7 +2,7 @@
  <div class="page">
    <div class="content">
      <div class="page-columns inner-left">
-        <AppSection ref="import" :label="$t('import')" no-legend>
+        <AppSection ref="import" :label="$t('import')">
          <div class="flex flex-col">
            <label>{{ $t("collection") }}</label>
            <p class="info">
@@ -55,7 +55,7 @@
          </div>
        </AppSection>

-        <AppSection ref="documentation" :label="$t('documentation')" no-legend>
+        <AppSection ref="documentation" :label="$t('documentation')">
          <div class="flex flex-col">
            <label>{{ $t("documentation") }}</label>
            <p v-if="items.length === 0" class="info">
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -2,7 +2,7 @@
  <div class="page">
    <div class="content">
      <div class="page-columns inner-left">
-        <AppSection ref="endpoint" :label="$t('endpoint')" no-legend>
+        <AppSection ref="endpoint" :label="$t('endpoint')">
          <ul>
            <li>
              <label for="url">{{ $t("url") }}</label>
@@ -37,7 +37,7 @@
          </ul>
        </AppSection>

-        <AppSection ref="headers" :label="$t('headers')" no-legend>
+        <AppSection ref="headers" :label="$t('headers')">
          <div class="flex flex-col">
            <label>{{ $t("headers") }}</label>
            <ul v-if="headers.length !== 0">
@@ -150,7 +150,7 @@
          </div>
        </AppSection>

-        <AppSection ref="schema" :label="$t('schema')" no-legend>
+        <AppSection ref="schema" :label="$t('schema')">
          <div class="row-wrapper">
            <label>{{ $t("schema") }}</label>
            <div v-if="schema">
@@ -212,7 +212,7 @@
          />
        </AppSection>

-        <AppSection ref="query" :label="$t('query')" no-legend>
+        <AppSection ref="query" :label="$t('query')">
          <div class="row-wrapper gqlRunQuery">
            <label for="gqlQuery">{{ $t("query") }}</label>
            <div>
@@ -266,7 +266,7 @@
          />
        </AppSection>

-        <AppSection ref="variables" :label="$t('variables')" no-legend>
+        <AppSection ref="variables" :label="$t('variables')">
          <div class="flex flex-col">
            <label>{{ $t("variables") }}</label>
            <SmartAceEditor
@@ -285,7 +285,7 @@
          </div>
        </AppSection>

-        <AppSection ref="response" :label="$t('response')" no-legend>
+        <AppSection ref="response" :label="$t('response')">
          <div class="flex flex-col">
            <label>{{ $t("response") }}</label>
            <div class="row-wrapper">
@@ -347,7 +347,7 @@
        >
          <SmartTabs>
            <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
-              <AppSection ref="docs" :label="$t('docs')" no-legend>
+              <AppSection ref="docs" :label="$t('docs')">
                <section class="flex-col">
                  <input
                    v-model="graphqlFieldsFilterText"
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@
  <div class="page">
    <div class="content">
      <div class="page-columns inner-left">
-        <AppSection :label="$t('request')" ref="request" no-legend>
+        <AppSection :label="$t('request')" ref="request">
          <ul>
            <li class="shrink">
              <label for="method">{{ $t("method") }}</label>
@@ -253,11 +253,7 @@
            </SmartTab>

            <SmartTab :id="'authentication'" :label="$t('authentication')">
-              <AppSection
-                :label="$t('authentication')"
-                ref="authentication"
-                no-legend
-              >
+              <AppSection :label="$t('authentication')" ref="authentication">
                <ul>
                  <li>
                    <div class="row-wrapper">
@@ -358,7 +354,6 @@

              <AppSection
                v-if="showTokenRequest"
-                class="red"
                label="Access Token Request"
                ref="accessTokenRequest"
              >
@@ -485,10 +480,8 @@
            >
              <AppSection
                v-if="showPreRequestScript"
-                class="orange"
                :label="$t('pre_request_script')"
                ref="preRequest"
-                no-legend
              >
                <ul>
                  <li>
@@ -527,10 +520,8 @@
            <SmartTab :id="'tests'" :label="$t('tests')">
              <AppSection
                v-if="testsEnabled"
-                class="orange"
                :label="$t('tests')"
                ref="postRequestTests"
-                no-legend
              >
                <ul>
                  <li>
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -4,7 +4,7 @@
      <Teams />
    </div>

-    <AppSection ref="account" :label="$t('account')" no-legend>
+    <AppSection ref="account" :label="$t('account')">
      <div class="flex flex-col">
        <label>{{ $t("account") }}</label>
        <div v-if="fb.currentUser">
@@ -74,7 +74,7 @@
      </div>
    </AppSection>

-    <AppSection ref="theme" :label="$t('theme')" no-legend>
+    <AppSection ref="theme" :label="$t('theme')">
      <div class="flex flex-col">
        <label>{{ $t("theme") }}</label>
        <SmartColorModePicker />
@@ -91,7 +91,7 @@
      </div>
    </AppSection>

-    <AppSection ref="extensions" :label="$t('extensions')" no-legend>
+    <AppSection ref="extensions" :label="$t('extensions')">
      <div class="flex flex-col">
        <label>{{ $t("extensions") }}</label>
        <div class="row-wrapper">
@@ -113,7 +113,7 @@
      </div>
    </AppSection>

-    <AppSection ref="proxy" :label="$t('proxy')" no-legend>
+    <AppSection ref="proxy" :label="$t('proxy')">
      <div class="flex flex-col">
        <label>{{ $t("proxy") }}</label>
        <div class="row-wrapper">
@@ -184,7 +184,7 @@
      -->
    </AppSection>

-    <AppSection ref="experiments" :label="$t('experiments')" no-legend>
+    <AppSection ref="experiments" :label="$t('experiments')">
      <div class="flex flex-col">
        <label>{{ $t("experiments") }}</label>
        <p class="info">