From 0fb0ae18267c07cd5a87a4ec355f9bc01ded40a1 Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Sun, 22 Aug 2021 00:39:05 +0530 Subject: [PATCH] refactor(ui): better tabs --- TRANSLATIONS.md | 44 +++------ assets/scss/styles.scss | 41 ++++++--- assets/scss/themes.scss | 18 ++-- components/app/Sidenav.vue | 57 ++++++------ components/collections/ChooseType.vue | 3 +- components/collections/graphql/index.vue | 21 +++-- components/collections/index.vue | 23 ++--- components/environments/index.vue | 2 +- components/graphql/Field.vue | 4 + components/graphql/Request.vue | 9 +- components/graphql/RequestOptions.vue | 4 +- components/graphql/Response.vue | 8 +- components/graphql/Sidebar.vue | 13 +-- components/history/index.vue | 4 +- components/http/Headers.vue | 6 +- components/http/Parameters.vue | 8 +- components/http/Request.vue | 14 +-- components/http/ResponseMeta.vue | 8 +- components/lenses/HeadersRenderer.vue | 44 +++++++++ components/realtime/Log.vue | 2 +- components/realtime/Mqtt.vue | 13 +-- components/realtime/Socketio.vue | 88 +++++++++--------- components/realtime/Sse.vue | 109 ++++++++++++----------- components/realtime/Websocket.vue | 15 ++-- components/smart/Tabs.vue | 69 +++++++------- components/teams/Team.vue | 25 +++--- components/teams/index.vue | 11 +-- helpers/shortcuts.js | 34 +++---- layouts/default.vue | 9 +- pages/documentation.vue | 4 +- pages/graphql.vue | 8 +- pages/index.vue | 4 +- pages/realtime.vue | 2 +- 33 files changed, 394 insertions(+), 330 deletions(-) diff --git a/TRANSLATIONS.md b/TRANSLATIONS.md index ad41df26a..4db828b22 100644 --- a/TRANSLATIONS.md +++ b/TRANSLATIONS.md @@ -1,41 +1,23 @@ # Translations -Thanks for your interest in helping translating the software! +Thanks for showing your interest in helping us to translate the software. -## Starting a translation +## Creating a new 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. +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's not, then today is your day to lead this effort! Here's how to start: +if there is no existing translation, you can create a new one by following these steps: -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`. +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.** - 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.) +_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 index 3fee3b45c..a1257fb71 100644 --- 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; } -.splitpanes--vertical > .splitpanes__splitter { +.no-splitter .splitpanes__splitter { + @apply relative; + @apply bg-primaryLight; +} + +.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 index 73246e918..5d9dd3813 100644 --- 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 index 107ec4d42..b1e49a40d 100644 --- a/components/app/Sidenav.vue +++ b/components/app/Sidenav.vue @@ -17,7 +17,7 @@ {{ navigation.title }} - - + --> + diff --git a/components/realtime/Log.vue b/components/realtime/Log.vue index 892be4cc2..eb475071c 100644 --- a/components/realtime/Log.vue +++ b/components/realtime/Log.vue @@ -59,7 +59,7 @@ export default {