Better iconography

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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