btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Better iconography

Browse Source
This commit is contained in:
Liyas Thomas
2020-06-19 13:25:41 +05:30
parent 1587a44cd7
commit 62dfb582f4
8 changed files with 34 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
assets/css/styles.scss
View File

@@ -166,7 +166,6 @@ nav.primary-nav {
color: var(--fg-light-color); color: var(--fg-light-color);
fill: var(--fg-light-color); fill: var(--fg-light-color);
margin: 8px 0; margin: 8px 0;
height: 52px;
&:hover { &:hover {
color: var(--fg-color); color: var(--fg-color);
@@ -192,7 +191,9 @@ nav.primary-nav {
nav.secondary-nav { nav.secondary-nav {
display: flex; display: flex;
flex-flow: column nowrap;
border-top: 2px dashed var(--brd-color); border-top: 2px dashed var(--brd-color);
margin-top: 4px;
ul { ul {
display: flex; display: flex;
@@ -210,10 +211,12 @@ nav.secondary-nav {
border-radius: 50%; border-radius: 50%;
background-color: var(--bg-dark-color); background-color: var(--bg-dark-color);
color: var(--fg-light-color); color: var(--fg-light-color);
fill: var(--fg-light-color);
margin: 8px 0; margin: 8px 0;
&:hover { &:hover {
color: var(--fg-color); color: var(--fg-color);
fill: var(--fg-color);
} }
&.current { &.current {
@@ -350,6 +353,10 @@ p {
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
} }
button {
justify-content: start;
}
} }
.popover-arrow { .popover-arrow {
@@ -386,7 +393,7 @@ h3.title {
button { button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
// justify-content: center; justify-content: center;
margin: 4px; margin: 4px;
padding: 6px 16px; padding: 6px 16px;
border-radius: 8px; border-radius: 8px;

4
components/collections/index.vue
View File

@@ -56,7 +56,7 @@ TODO:
rel="noopener" rel="noopener"
> >
<button class="icon" v-tooltip="'Wiki'"> <button class="icon" v-tooltip="'Wiki'">
<i class="material-icons">help</i> <i class="material-icons">help_outline</i>
</button> </button>
</a> --> </a> -->
</div> </div>
@@ -83,7 +83,7 @@ TODO:
</div> </div>
<nuxt-link :to="localePath('doc')" :aria-label="$t('documentation')"> <nuxt-link :to="localePath('doc')" :aria-label="$t('documentation')">
<button class="icon"> <button class="icon">
<i class="material-icons">books</i> <i class="material-icons">topic</i>
<span>{{ $t("generate_docs") }}</span> <span>{{ $t("generate_docs") }}</span>
</button> </button>
</nuxt-link> </nuxt-link>

4
components/layout/header.vue
View File

@@ -37,7 +37,7 @@
</button> </button>
<v-popover v-if="fb.currentUser === null"> <v-popover v-if="fb.currentUser === null">
<button class="icon" v-tooltip="$t('login_with')"> <button class="icon" v-tooltip="$t('login_with')">
<i class="material-icons">vpn_key</i> <i class="material-icons">login</i>
</button> </button>
<template slot="popover"> <template slot="popover">
<login /> <login />
@@ -79,7 +79,7 @@
</v-popover> </v-popover>
<v-popover> <v-popover>
<button class="icon" v-tooltip="$t('more')"> <button class="icon" v-tooltip="$t('more')">
<i class="material-icons">more_vert</i> <i class="material-icons">drag_indicator</i>
</button> </button>
<template slot="popover"> <template slot="popover">
<div> <div>

4
components/layout/sidenav.vue
View File

@@ -18,7 +18,7 @@
:class="linkActive('/realtime')" :class="linkActive('/realtime')"
v-tooltip.right="$t('realtime')" v-tooltip.right="$t('realtime')"
> >
<i class="material-icons">settings_input_hdmi</i> <i class="material-icons">language</i>
</nuxt-link> </nuxt-link>
<nuxt-link <nuxt-link
:to="localePath('graphql')" :to="localePath('graphql')"
@@ -141,7 +141,7 @@
v-tooltip.right="$t('documentation')" v-tooltip.right="$t('documentation')"
:aria-label="$t('documentation')" :aria-label="$t('documentation')"
> >
<i class="material-icons">books</i> <i class="material-icons">topic</i>
</nuxt-link> </nuxt-link>
<nuxt-link <nuxt-link
:to="localePath('settings')" :to="localePath('settings')"

2
pages/doc.vue
View File

@@ -44,7 +44,7 @@
<ul> <ul>
<li> <li>
<button class="icon" @click="getDoc"> <button class="icon" @click="getDoc">
<i class="material-icons">book</i> <i class="material-icons">topic</i>
<span>{{ $t("generate_docs") }}</span> <span>{{ $t("generate_docs") }}</span>
</button> </button>
</li> </li>

14
pages/graphql.vue
View File

@@ -122,7 +122,7 @@
ref="downloadSchema" ref="downloadSchema"
v-tooltip="$t('download_file')" v-tooltip="$t('download_file')"
> >
<i class="material-icons">get_app</i> <i class="material-icons">save_alt</i>
</button> </button>
<button <button
class="icon" class="icon"
@@ -130,7 +130,7 @@
@click="copySchema" @click="copySchema"
v-tooltip="$t('copy_schema')" v-tooltip="$t('copy_schema')"
> >
<i class="material-icons">file_copy</i> <i class="material-icons">content_copy</i>
</button> </button>
</div> </div>
</div> </div>
@@ -176,7 +176,7 @@
ref="copyQueryButton" ref="copyQueryButton"
v-tooltip="$t('copy_query')" v-tooltip="$t('copy_query')"
> >
<i class="material-icons">file_copy</i> <i class="material-icons">content_copy</i>
</button> </button>
<button <button
class="icon" class="icon"
@@ -228,7 +228,7 @@
v-if="response" v-if="response"
v-tooltip="$t('download_file')" v-tooltip="$t('download_file')"
> >
<i class="material-icons">get_app</i> <i class="material-icons">save_alt</i>
</button> </button>
<button <button
class="icon" class="icon"
@@ -237,7 +237,7 @@
v-if="response" v-if="response"
v-tooltip="$t('copy_response')" v-tooltip="$t('copy_response')"
> >
<i class="material-icons">file_copy</i> <i class="material-icons">content_copy</i>
</button> </button>
</div> </div>
</div> </div>
@@ -367,8 +367,8 @@ export default {
mutationFields: [], mutationFields: [],
subscriptionFields: [], subscriptionFields: [],
gqlTypes: [], gqlTypes: [],
copyButton: '<i class="material-icons">file_copy</i>', copyButton: '<i class="material-icons">content_copy</i>',
downloadButton: '<i class="material-icons">get_app</i>', downloadButton: '<i class="material-icons">save_alt</i>',
doneButton: '<i class="material-icons">done</i>', doneButton: '<i class="material-icons">done</i>',
expandResponse: false, expandResponse: false,
responseBodyMaxLines: 16, responseBodyMaxLines: 16,

20
pages/index.vue
View File

@@ -14,7 +14,7 @@
rel="noopener" rel="noopener"
> >
<button class="icon" v-tooltip="$t('wiki')"> <button class="icon" v-tooltip="$t('wiki')">
<i class="material-icons">help</i> <i class="material-icons">help_outline</i>
</button> </button>
</a> </a>
</div> </div>
@@ -287,7 +287,7 @@
v-tooltip="$t('prettify_body')" v-tooltip="$t('prettify_body')"
v-if="rawInput && this.contentType.endsWith('json')" v-if="rawInput && this.contentType.endsWith('json')"
> >
<i class="material-icons">assistant</i> <i class="material-icons">notes</i>
</button> </button>
</div> </div>
</div> </div>
@@ -446,7 +446,7 @@
v-tooltip.bottom="$t('copy_request_link')" v-tooltip.bottom="$t('copy_request_link')"
> >
<i v-if="navigatorShare" class="material-icons">share</i> <i v-if="navigatorShare" class="material-icons">share</i>
<i v-else class="material-icons">file_copy</i> <i v-else class="material-icons">content_copy</i>
</button> </button>
<button <button
class="icon" class="icon"
@@ -456,7 +456,7 @@
:disabled="!isValidURL" :disabled="!isValidURL"
v-tooltip.bottom="$t('save_to_collections')" v-tooltip.bottom="$t('save_to_collections')"
> >
<i class="material-icons">save</i> <i class="material-icons">create_new_folder</i>
</button> </button>
<button <button
class="icon" class="icon"
@@ -482,7 +482,7 @@
rel="noopener" rel="noopener"
> >
<button class="icon" v-tooltip="$t('wiki')"> <button class="icon" v-tooltip="$t('wiki')">
<i class="material-icons">help</i> <i class="material-icons">help_outline</i>
</button> </button>
</a> </a>
</div> </div>
@@ -976,7 +976,7 @@
v-if="response.body && canDownloadResponse" v-if="response.body && canDownloadResponse"
v-tooltip="$t('download_file')" v-tooltip="$t('download_file')"
> >
<i class="material-icons">get_app</i> <i class="material-icons">save_alt</i>
</button> </button>
<button <button
class="icon" class="icon"
@@ -985,7 +985,7 @@
v-if="response.body" v-if="response.body"
v-tooltip="$t('copy_response')" v-tooltip="$t('copy_response')"
> >
<i class="material-icons">file_copy</i> <i class="material-icons">content_copy</i>
</button> </button>
</div> </div>
</div> </div>
@@ -1156,7 +1156,7 @@
ref="copyRequestCode" ref="copyRequestCode"
v-tooltip="$t('copy_code')" v-tooltip="$t('copy_code')"
> >
<i class="material-icons">file_copy</i> <i class="material-icons">content_copy</i>
</button> </button>
</div> </div>
</div> </div>
@@ -1438,8 +1438,8 @@ export default {
testScript: "// pw.expect('variable').toBe('value');", testScript: "// pw.expect('variable').toBe('value');",
preRequestScript: "// pw.env.set('variable', 'value');", preRequestScript: "// pw.env.set('variable', 'value');",
testReports: null, testReports: null,
copyButton: '<i class="material-icons">file_copy</i>', copyButton: '<i class="material-icons">content_copy</i>',
downloadButton: '<i class="material-icons">get_app</i>', downloadButton: '<i class="material-icons">save_alt</i>',
doneButton: '<i class="material-icons">done</i>', doneButton: '<i class="material-icons">done</i>',
isHidden: true, isHidden: true,
response: { response: {

2
pages/settings.vue
View File

@@ -147,7 +147,7 @@
rel="noopener" rel="noopener"
> >
<button class="icon" v-tooltip="$t('wiki')"> <button class="icon" v-tooltip="$t('wiki')">
<i class="material-icons">help</i> <i class="material-icons">help_outline</i>
</button> </button>
</a> </a>
</div> </div>