Merge pull request #657 from liyasthomas/refactor/ui

Added icon slot to tabs

assets/css/styles.scss

@@ -22,10 +22,12 @@ $responsiveWidth: 768px;
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;
+  border-radius: 4px;
   background-color: var(--bg-dark-color);
 }
 
 ::-webkit-scrollbar-thumb {
+  border-radius: 4px;
   background-color: var(--fg-light-color);
 
   &:hover {

components/collections/importExportCollections.vue

@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">Import / Export Collections</h3>
+            <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>

components/environments/importExportEnvironment.vue

@@ -4,7 +4,7 @@
       <ul>
         <li>
           <div class="flex-wrap">
-            <h3 class="title">Import / Export Environment</h3>
+            <h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
                 <i class="material-icons">close</i>

components/environments/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <pw-section class="green" icon="history" :label="$t('environment')" ref="environment">
+  <pw-section class="green" icon="history" :label="$t('environments')" ref="environments">
     <addEnvironment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <editEnvironment
       :show="showModalEdit"

components/ui/tab.vue

@@ -9,9 +9,9 @@
 <script>
 export default {
   props: {
-    name: {
+    label: { type: String },
-      required: true,
+    icon: { type: String },
-    },
+    id: { required: true },
     selected: {
       default: false,
     },

components/ui/tabs.vue

@@ -3,7 +3,12 @@
     <div class="tabs">
       <ul>
         <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
-          <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
+          <a :href="tab.href" @click="selectTab(tab)">
+            <i v-if="tab.icon" class="material-icons">
+              {{ tab.icon }}
+            </i>
+            <span v-if="tab.label">{{ tab.label }}</span>
+          </a>
         </li>
       </ul>
     </div>
@@ -35,11 +40,17 @@
 
       a {
         display: flex;
+        align-items: center;
+        justify-content: center;
         padding: 8px 16px;
         color: var(--fg-light-color);
         border-radius: 4px;
         cursor: pointer;
 
+        .material-icons {
+          margin-right: 8px;
+        }
+
         &:hover {
           color: var(--fg-color);
         }
@@ -74,9 +85,9 @@ export default {
   },
 
   methods: {
-    selectTab({ name }) {
+    selectTab({ id }) {
       this.tabs.forEach(tab => {
-        tab.isActive = tab.name == name
+        tab.isActive = tab.id == id
       })
     },
   },

lang/en-US.js

@@ -44,7 +44,7 @@ export default {
   preview_html: "Preview HTML",
   history: "History",
   collections: "Collections",
-  environment: "Environment",
+  environments: "Environments",
   new_environment: "New Environment",
   my_new_environment: "My New Environment",
   edit_environment: "Edit Environment",
@@ -269,9 +269,6 @@ export default {
   account: "Account",
   scrollInto_use_toggle: "Auto scroll",
   sync: "Sync",
-  syncHistory: "History",
-  syncCollections: "Collections",
-  syncEnvironments: "Environments",
   turn_on: "Turn on",
   login_first: "Login first",
   paste_a_note: "Paste a note",

lang/ko-KR.js

@@ -78,8 +78,7 @@ export default {
   enabled: "허용",
   disabled: "허용안함",
   proxy: "Proxy",
-  postwoman_official_proxy_hosting:
+  postwoman_official_proxy_hosting: "Postwoman의 공식적인 Proxy는 ApolloTV가 호스트 합니다.",
-    "Postwoman의 공식적인 Proxy는 ApolloTV가 호스트 합니다.",
   read_the: "Read the",
   apollotv_privacy_policy: "ApolloTV 개인정보 처리방침",
   contact_us: "문의 하기",
@@ -154,8 +153,7 @@ export default {
   disconnected_from: "Disconnected from {name}",
   something_went_wrong: "Something went wrong!",
   error_occurred: "An error has occurred.",
-  browser_support_sse:
+  browser_support_sse: "This browser doesn't seems to have Server Sent Events support.",
-    "This browser doesn't seems to have Server Sent Events support.",
   log: "Log",
   no_url: "No URL",
   run_query: "Run Query",
@@ -208,8 +206,7 @@ export default {
   value_count: "value {count}",
   send_request_first: "Send a request first",
   generate_docs: "Generate Documentation",
-  generate_docs_message:
+  generate_docs_message: "Import any Postwoman Collection to Generate Documentation on-the-go.",
-    "Import any Postwoman Collection to Generate Documentation on-the-go.",
   generate_docs_first: "Generate documentation first",
   docs_generated: "Documentation generated",
   import_collections: "Import collections",
@@ -235,8 +232,7 @@ export default {
   token_request_saved: "Token request saved",
   donate_info1:
     "If you have enjoyed the productivity of using Postwoman, consider donating as a sign of appreciation.",
-  donate_info2:
+  donate_info2: "You can support Postwoman development via the following methods:",
-    "You can support Postwoman development via the following methods:",
   one_time_recurring: "One-time or recurring",
   one_time: "One-time",
   recurring: "Recurring",
@@ -255,10 +251,8 @@ export default {
   logout: "로그아웃",
   account: "계정",
   sync: "동기화",
-  syncHistory: "History",
-  syncCollections: "Collections",
   turn_on: "Turn on",
   login_first: "Login first",
   paste_a_collection: "Paste a Collection",
-  import_from_sync: "Import from Sync"
+  import_from_sync: "Import from Sync",
-};
+}

pages/graphql.vue

@@ -263,25 +263,34 @@
           <section>
             <tabs ref="gqlTabs">
               <div class="gqlTabs">
-                <tab v-if="queryFields.length > 0" :name="$t('queries')" :selected="true">
+                <tab
+                  v-if="queryFields.length > 0"
+                  :id="'queries'"
+                  :label="$t('queries')"
+                  :selected="true"
+                >
                   <div v-for="field in queryFields" :key="field.name">
                     <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
                 </tab>
 
-                <tab v-if="mutationFields.length > 0" :name="$t('mutations')">
+                <tab v-if="mutationFields.length > 0" :id="'mutations'" :label="$t('mutations')">
                   <div v-for="field in mutationFields" :key="field.name">
                     <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
                 </tab>
 
-                <tab v-if="subscriptionFields.length > 0" :name="$t('subscriptions')">
+                <tab
+                  v-if="subscriptionFields.length > 0"
+                  :id="'subscriptions'"
+                  :label="$t('subscriptions')"
+                >
                   <div v-for="field in subscriptionFields" :key="field.name">
                     <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
                 </tab>
 
-                <tab v-if="gqlTypes.length > 0" :name="$t('types')" ref="typesTab">
+                <tab v-if="gqlTypes.length > 0" :id="'types'" :label="$t('types')" ref="typesTab">
                   <div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
                     <gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
                   </div>

pages/index.vue

@@ -512,7 +512,7 @@
 
         <section id="options">
           <tabs>
-            <tab :name="$t('authentication')" :selected="true">
+            <tab :id="'authentication'" :label="$t('authentication')" :selected="true">
               <pw-section class="cyan" :label="$t('authentication')" ref="authentication">
                 <ul>
                   <li>
@@ -716,7 +716,7 @@
               </pw-section>
             </tab>
 
-            <tab :name="$t('headers')">
+            <tab :id="'headers'" :label="$t('headers')">
               <pw-section class="orange" label="Headers" ref="headers">
                 <ul>
                   <li>
@@ -797,7 +797,7 @@
               </pw-section>
             </tab>
 
-            <tab :name="$t('parameters')">
+            <tab :id="'params'" :label="$t('parameters')">
               <pw-section class="pink" label="Parameters" ref="parameters">
                 <ul>
                   <li>
@@ -990,19 +990,19 @@
       <aside v-if="activeSidebar" class="sticky-inner inner-right">
         <section>
           <tabs>
-            <tab :name="$t('history')" :selected="true">
+            <tab :id="'history'" :icon="'watch_later'" :label="$t('history')" :selected="true">
               <history @useHistory="handleUseHistory" ref="historyComponent" />
             </tab>
 
-            <tab :name="$t('collections')">
+            <tab :id="'collections'" :icon="'folder_special'" :label="$t('collections')">
               <collections />
             </tab>
 
-            <tab :name="$t('environment')">
+            <tab :id="'env'" :icon="'style'" :label="$t('environments')">
               <environments @use-environment="useSelectedEnvironment($event)" />
             </tab>
 
-            <tab :name="$t('notes')">
+            <tab :id="'notes'" :icon="'note'" :label="$t('notes')">
               <pw-section class="pink" :label="$t('notes')" ref="sync">
                 <div v-if="fb.currentUser">
                   <inputform />

pages/realtime.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <section id="options">
       <tabs>
-        <tab :name="$t('websocket')" :selected="true">
+        <tab :id="'websocket'" :label="$t('websocket')" :selected="true">
           <pw-section class="blue" :label="$t('request')" ref="request">
             <ul>
               <li>
@@ -70,7 +70,7 @@
           </pw-section>
         </tab>
 
-        <tab :name="$t('sse')">
+        <tab :id="'sse'" :label="$t('sse')">
           <pw-section class="blue" :label="$t('request')" ref="request">
             <ul>
               <li>
@@ -114,7 +114,7 @@
           </pw-section>
         </tab>
 
-        <tab :name="$t('socketio')">
+        <tab :id="'socketio'" :label="$t('socketio')">
           <socketio />
         </tab>
       </tabs>