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>