refactor(ui): better tabs

AmolDerickSoans · Aug 21, 2021 · 0fb0ae1 · 0fb0ae1
1 parent 08fe4ae
commit 0fb0ae1
Show file tree

Hide file tree

Showing 33 changed files with 399 additions and 335 deletions.
diff --git a/TRANSLATIONS.md b/TRANSLATIONS.md
@@ -1,41 +1,23 @@
 # Translations
 
-Thanks for your interest in helping translating the software!
-
-## Starting a translation
-
-Before you start working on a translation, look through the [open pull requests](https://github.com/hoppscotch/hoppscotch/pulls) to see if anyone else is already working on one for your language.
-
-If there's not, then today is your day to lead this effort! Here's how to start:
-
-1. [Fork this repository](https://github.com/hoppscotch/hoppscotch/fork)
-2. Create a new branch for your translation work e.g. `es`.
-3. Copy `lang/en-US.json` to your target language file e.g. `lang/es-ES.json` and translate all the strings.
-4. Add your language entry to `nuxt.config.js`.
-
-   e.g.
-
-   ```
-    i18n: {
-      locales: [
-        {
-          code: "en",
-          name: "English",
-          iso: "en-US",
-          file: "en-US.json",
-        },
-        {
-          code: 'es',
-          name: 'Español',
-          iso: 'es-ES',
-          file: 'es-ES.json'
-        }
-      ]
-    }
-   ```
-
-5. Save & commit changes.
-6. Send a pull request. (You may send a pull request before all steps above are complete: e.g., you may want to ask for help with translations, or getting tests to pass. However your pull request will not be merged until all steps above are complete.)
+Thanks for showing your interest in helping us to translate the software.
+
+## Creating a new translation
+
+Before you start working on a new language, please look through the [open pull requests](https://github.com/hoppscotch/hoppscotch/pulls) to see if anyone is already working on a translation. If you find one, please join the discussion and help us keep the existing translations up to date.
+
+if there is no existing translation, you can create a new one by following these steps:
+
+1. **[Fork the repository](https://github.com/hoppscotch/hoppscotch/fork).**
+2. **Create a new branch for your translation.**
+3. **Create target language file in the [`locales`](https://github.com/hoppscotch/hoppscotch/tree/main/locales) directory.**
+4. **Copy the contents of the source file [`locales/en.json`](https://github.com/hoppscotch/hoppscotch/blob/main/locales/en.json) to the target language file.**
+5. **Translate the strings in the target language file.**
+6. **Add your language entry to [`languages.json`](https://github.com/hoppscotch/hoppscotch/blob/main/languages.json).**
+7. **Save & commit changes.**
+8. **Send a pull request.**
+
+_You may send a pull request before all steps above are complete: e.g., you may want to ask for help with translations, or getting tests to pass. However, your pull request will not be merged until all steps above are complete._
 
 Completing an initial translation of the whole site is a fairly large task. One way to break that task up is to work with other translators through pull requests on your fork. You can also [add collaborators to your fork](https://help.github.com/en/github/setting-up-and-managing-your-github-user-account/inviting-collaborators-to-a-personal-repository) if you'd like to invite other translators to commit directly to your fork and share responsibility for merging pull requests.
 

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
@@ -198,7 +198,7 @@ hr {
   @apply rounded;
   @apply text-secondaryDark;
   @apply border border-divider;
-  @apply focus-visible:border-accent;
+  @apply focus-visible:border-dividerDark;
 }
 
 input,
@@ -242,7 +242,7 @@ button {
 }
 
 .floating-input:focus-within ~ label {
-  @apply text-accent;
+  @apply text-secondaryDark;
 }
 
 pre.ace_editor {
@@ -292,7 +292,7 @@ pre.ace_editor {
     @apply pointer-events-none;
     @apply font-icon;
     @apply text-secondaryLight;
-    @apply left-3;
+    @apply left-4;
 
     content: "\e8b6";
   }
@@ -400,20 +400,35 @@ input[type="checkbox"] {
   }
 }
 
-.splitpanes__splitter {
+.smart-splitter .splitpanes__splitter {
+  @apply relative;
+  @apply bg-primaryLight;
+}
+
+.no-splitter .splitpanes__splitter {
   @apply relative;
   @apply bg-primaryLight;
 }
 
-.splitpanes--vertical > .splitpanes__splitter {
+.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
   @apply w-1;
 }
 
-.splitpanes--horizontal > .splitpanes__splitter {
+.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
   @apply h-1;
 }
 
-.splitpanes__splitter::before {
+.no-splitter.splitpanes--vertical > .splitpanes__splitter {
+  @apply w-0.5;
+  @apply pointer-events-none;
+}
+
+.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
+  @apply h-0.5;
+  @apply pointer-events-none;
+}
+
+.smart-splitter .splitpanes__splitter::before {
   @apply absolute;
   @apply inset-0;
   @apply bg-dividerLight;
@@ -424,7 +439,7 @@ input[type="checkbox"] {
   content: "";
 }
 
-.splitpanes__splitter::after {
+.smart-splitter .splitpanes__splitter::after {
   @apply absolute;
   @apply inset-0;
   @apply z-30;
@@ -436,25 +451,25 @@ input[type="checkbox"] {
   @apply font-icon;
 }
 
-.splitpanes--vertical > .splitpanes__splitter::after {
+.smart-splitter.splitpanes--vertical > .splitpanes__splitter::after {
   content: "\e5d4";
 }
 
-.splitpanes--horizontal > .splitpanes__splitter::after {
+.smart-splitter.splitpanes--horizontal > .splitpanes__splitter::after {
   content: "\e5d3";
 }
 
-.splitpanes__splitter:hover::before {
+.smart-splitter .splitpanes__splitter:hover::before {
   @apply opacity-100;
 }
 
-.splitpanes--vertical > .splitpanes__splitter::before {
+.smart-splitter.splitpanes--vertical > .splitpanes__splitter::before {
   @apply -left-0.5;
   @apply -right-0.5;
   @apply h-full;
 }
 
-.splitpanes--horizontal > .splitpanes__splitter::before {
+.smart-splitter.splitpanes--horizontal > .splitpanes__splitter::before {
   @apply -top-0.5;
   @apply -bottom-0.5;
   @apply w-full;

diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
@@ -37,25 +37,25 @@
   // Background color
   --primary-color: theme("colors.white");
   // Light Background color
-  --primary-light-color: theme("colors.blue-gray.50");
+  --primary-light-color: theme("colors.true-gray.50");
   // Dark Background color
-  --primary-dark-color: theme("colors.blue-gray.100");
+  --primary-dark-color: theme("colors.true-gray.100");
   // Text color
-  --secondary-color: theme("colors.blue-gray.500");
+  --secondary-color: theme("colors.true-gray.500");
   // Light Text color
-  --secondary-light-color: theme("colors.blue-gray.400");
+  --secondary-light-color: theme("colors.true-gray.400");
   // Dark Text color
-  --secondary-dark-color: theme("colors.blue-gray.900");
+  --secondary-dark-color: theme("colors.true-gray.900");
   // Border color
-  --divider-color: theme("colors.blue-gray.200");
+  --divider-color: theme("colors.true-gray.200");
   // Light Border color
-  --divider-light-color: theme("colors.blue-gray.100");
+  --divider-light-color: theme("colors.true-gray.100");
   // Dark Border color
-  --divider-dark-color: theme("colors.blue-gray.300");
+  --divider-dark-color: theme("colors.true-gray.300");
   // Error color
   --error-color: theme("colors.yellow.100");
   // Tooltip color
-  --tooltip-color: theme("colors.blue-gray.800");
+  --tooltip-color: theme("colors.true-gray.800");
   // Popover color
   --popover-color: theme("colors.white");
   // Editor theme

diff --git a/components/app/Sidenav.vue b/components/app/Sidenav.vue
@@ -17,15 +17,15 @@
         <span>{{ navigation.title }}</span>
       </NuxtLink>
     </nav>
-    <nav
+    <!-- <nav
       class="
         flex flex-nowrap
         p-4
         items-center
         justify-center
         md:(flex-col
         space-x-0 space-y-2)
-      "
+        "
     >
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip', placement: 'top' }"
@@ -48,41 +48,41 @@
         class="rounded"
         @click.native="showSupport = true"
       />
-    </nav>
-    <AppSearch :show="showSearch" @hide-modal="showSearch = false" />
+    </nav> -->
+    <!-- <AppSearch :show="showSearch" @hide-modal="showSearch = false" />
     <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
-    <AppShare :show="showShare" @hide-modal="showShare = false" />
+    <AppShare :show="showShare" @hide-modal="showShare = false" /> -->
   </aside>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api"
-import { defineActionHandler } from "~/helpers/actions"
+import { defineComponent } from "@nuxtjs/composition-api"
+// import { defineActionHandler } from "~/helpers/actions"
 
 export default defineComponent({
-  setup() {
-    const showSearch = ref(false)
-    const showSupport = ref(false)
-    const showShare = ref(false)
+  // setup() {
+  // const showSearch = ref(false)
+  // const showSupport = ref(false)
+  // const showShare = ref(false)
 
-    defineActionHandler("modals.search.toggle", () => {
-      showSearch.value = !showSearch.value
-    })
+  // defineActionHandler("modals.search.toggle", () => {
+  //   showSearch.value = !showSearch.value
+  // })
 
-    defineActionHandler("modals.support.toggle", () => {
-      showSupport.value = !showSupport.value
-    })
+  // defineActionHandler("modals.support.toggle", () => {
+  //   showSupport.value = !showSupport.value
+  // })
 
-    defineActionHandler("modals.share.toggle", () => {
-      showShare.value = !showShare.value
-    })
+  // defineActionHandler("modals.share.toggle", () => {
+  //   showShare.value = !showShare.value
+  // })
 
-    return {
-      showSearch,
-      showSupport,
-      showShare,
-    }
-  },
+  //   return {
+  //     showSearch,
+  //     showSupport,
+  //     showShare,
+  //   }
+  // },
   data() {
     return {
       primaryNavigation: [
@@ -159,8 +159,9 @@ export default defineComponent({
   }
 
   &.exact-active-link {
-    @apply text-accent;
-    @apply hover:text-accent;
+    @apply text-secondaryDark;
+    @apply bg-primaryLight;
+    @apply hover:text-secondaryDark;
 
     .material-icons,
     .svg-icons {

diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
@@ -18,8 +18,7 @@
               type="text"
               autofocus
               class="
-                bg-primaryLight
-                border-b border-dividerLight
+                bg-primary
                 cursor-pointer
                 flex
                 w-full

diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
@@ -4,26 +4,25 @@
     :class="{ 'rounded border border-divider': savingMode }"
   >
     <div
-      class="flex flex-col top-sidebarPrimaryStickyFold z-10 sticky"
+      class="
+        divide-y divide-dividerLight
+        border-b border-dividerLight
+        flex flex-col
+        top-sidebarPrimaryStickyFold
+        z-10
+        sticky
+      "
       :class="{ 'bg-primary': !savingMode }"
     >
       <div v-if="showCollActions" class="search-wrapper">
         <input
           v-model="filterText"
           type="search"
           :placeholder="$t('action.search')"
-          class="
-            bg-primaryLight
-            border-b border-dividerLight
-            flex
-            w-full
-            py-2
-            pr-2
-            pl-9
-          "
+          class="bg-primary flex w-full py-2 pr-2 pl-10"
         />
       </div>
-      <div class="border-b border-dividerLight flex flex-1 justify-between">
+      <div class="flex flex-1 justify-between">
         <ButtonSecondary
           icon="add"
           :label="$t('action.new')"

diff --git a/components/collections/index.vue b/components/collections/index.vue
@@ -4,23 +4,24 @@
     :class="{ 'rounded border border-divider': saveRequest }"
   >
     <div
-      class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"
+      class="
+        divide-y divide-dividerLight
+        bg-primary
+        border-b border-dividerLight
+        rounded-t
+        flex flex-col
+        top-0
+        z-10
+        sticky
+      "
       :class="{ '!top-sidebarPrimaryStickyFold': !saveRequest && !doc }"
     >
       <div v-if="!saveRequest" class="search-wrapper">
         <input
           v-model="filterText"
           type="search"
           :placeholder="$t('action.search')"
-          class="
-            bg-primaryLight
-            border-b border-dividerLight
-            flex
-            w-full
-            py-2
-            pr-2
-            pl-9
-          "
+          class="bg-primary flex w-full py-2 pr-2 pl-10"
         />
       </div>
       <CollectionsChooseType
@@ -30,7 +31,7 @@
         @update-collection-type="updateCollectionType"
         @update-selected-team="updateSelectedTeam"
       />
-      <div class="border-b border-dividerLight flex flex-1 justify-between">
+      <div class="flex flex-1 justify-between">
         <ButtonSecondary
           v-if="
             collectionsType.type == 'team-collections' &&

diff --git a/components/environments/index.vue b/components/environments/index.vue
@@ -16,7 +16,7 @@
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('environment.select')"
             class="
-              bg-primaryLight
+              bg-primary
               border-b border-dividerLight
               flex-1
               select-wrapper