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

⚡ Improved icon toggle

Browse Source
This commit is contained in:
Liyas Thomas
2019-12-02 20:50:20 +05:30
parent 0bfc0256a6
commit 72acdeaab9
7 changed files with 91 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
assets/css/styles.scss
View File

@@ -615,6 +615,14 @@ ol li {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-grow: 1; flex-grow: 1;
flex-direction: row;
* {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
} }
.show-on-small-screen { .show-on-small-screen {

37
components/history.vue
View File

@@ -24,8 +24,9 @@
@click="toggleStar(index)" @click="toggleStar(index)"
v-tooltip="{ content: !entry.star ? 'Add star' : 'Remove star' }" v-tooltip="{ content: !entry.star ? 'Add star' : 'Remove star' }"
> >
<i class="material-icons" v-if="entry.star">star</i> <i class="material-icons">
<i class="material-icons" v-else>star_border</i> {{ entry.star ? "star" : "star_border" }}
</i>
</button> </button>
<li> <li>
<input <input
@@ -37,8 +38,7 @@
class="bg-color" class="bg-color"
/> />
</li> </li>
<!-- <!-- <li>
<li>
<button <button
class="icon" class="icon"
v-tooltip="{ v-tooltip="{
@@ -47,11 +47,11 @@
: 'Used pre-request script' : 'Used pre-request script'
}" }"
> >
<i class="material-icons" v-if="!entry.usesScripts">http</i> <i class="material-icons">
<i class="material-icons" v-else>code</i> {{ !entry.usesScripts ? "http" : "code" }}
</i>
</button> </button>
</li> </li> -->
-->
<v-popover> <v-popover>
<button class="tooltip-target icon" v-tooltip="'Options'"> <button class="tooltip-target icon" v-tooltip="'Options'">
<i class="material-icons">more_vert</i> <i class="material-icons">more_vert</i>
@@ -225,8 +225,9 @@
</div> </div>
<div> <div>
<button class="icon" @click="toggleCollapse()"> <button class="icon" @click="toggleCollapse()">
<i class="material-icons" v-if="!showMore">first_page</i> <i class="material-icons">{{
<i class="material-icons" v-else>last_page</i> !showMore ? "first_page" : "last_page"
}}</i>
<span>{{ !showMore ? "Show more" : "Hide more" }}</span> <span>{{ !showMore ? "Show more" : "Hide more" }}</span>
</button> </button>
</div> </div>
@@ -267,14 +268,14 @@
} }
} }
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: all 0.2s; transition: all 0.2s;
} }
.fade-enter, .fade-enter,
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }
.stared { .stared {
color: #f8e81c !important; color: #f8e81c !important;

5
components/section.vue
View File

@@ -5,8 +5,9 @@
> >
<legend @click.prevent="collapse"> <legend @click.prevent="collapse">
<span>{{ label }}</span> <span>{{ label }}</span>
<i class="material-icons" v-if="isCollapsed">expand_more</i> <i class="material-icons">
<i class="material-icons" v-if="!isCollapsed">expand_less</i> {{ isCollapsed ? "expand_more" : "expand_less" }}
</i>
</legend> </legend>
<div class="collapsible" :class="{ hidden: collapsed }"> <div class="collapsible" :class="{ hidden: collapsed }">
<slot /> <slot />

66
layouts/default.vue
View File

@@ -2,12 +2,12 @@
<div class="wrapper"> <div class="wrapper">
<header class="header"> <header class="header">
<div class="flex-wrap"> <div class="flex-wrap">
<div class="slide-in"> <span class="slide-in">
<nuxt-link :to="localePath('index')"> <nuxt-link :to="localePath('index')">
<h1 class="logo">Postwoman</h1> <h1 class="logo">Postwoman</h1>
</nuxt-link> </nuxt-link>
</div> </span>
<div class="flex-wrap"> <span>
<a <a
href="https://github.com/liyasthomas/postwoman" href="https://github.com/liyasthomas/postwoman"
target="_blank" target="_blank"
@@ -81,7 +81,7 @@
</div> </div>
</template> </template>
</v-popover> </v-popover>
</div> </span>
</div> </div>
</header> </header>
<div class="content"> <div class="content">
@@ -317,39 +317,37 @@
</div> </div>
<footer class="footer"> <footer class="footer">
<div class="flex-wrap"> <div class="flex-wrap">
<!-- Bottom section of footer: version/author information --> <span v-if="version.name" class="mono">
<div> <a
<span v-if="version.name" class="mono"> v-bind:href="
'https://github.com/liyasthomas/postwoman/releases/tag/' +
version.name
"
target="_blank"
rel="noopener"
>
{{ version.name }}
</a>
<!-- <span v-if="version.hash">
-
<a <a
v-bind:href=" v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
'https://github.com/liyasthomas/postwoman/releases/tag/' +
version.name
"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
> >{{version.hash}}</a>
{{ version.name }} </span> -->
</a> <!-- <span v-if="version.variant">({{version.variant}})</span> -->
&#x2022; </span>
<a <span>
href="https://liyasthomas.web.app" <a
target="_blank" href="https://liyasthomas.web.app"
rel="noopener" target="_blank"
> rel="noopener"
>
<button class="icon" v-tooltip="'Liyas Thomas'">
🦄 🦄
</a> </button>
<!-- <span v-if="version.hash"> </a>
-
<a
v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
target="_blank"
rel="noopener"
>{{version.hash}}</a>
</span> -->
<!-- <span v-if="version.variant">({{version.variant}})</span> -->
</span>
</div>
<div class="flex-wrap">
<a <a
href="https://postwoman.launchaco.com" href="https://postwoman.launchaco.com"
target="_blank" target="_blank"
@@ -373,7 +371,7 @@
</div> </div>
</template> </template>
</v-popover> </v-popover>
</div> </span>
</div> </div>
</footer> </footer>
<modal v-if="showShortcuts" @close="showShortcuts = false"> <modal v-if="showShortcuts" @close="showShortcuts = false">

5
pages/graphql.vue
View File

@@ -115,8 +115,9 @@
: 'Collapse response' : 'Collapse response'
}" }"
> >
<i class="material-icons" v-if="!expandResponse">unfold_more</i> <i class="material-icons">
<i class="material-icons" v-else>unfold_less</i> {{ !expandResponse ? "unfold_more" : "unfold_less" }}
</i>
</button> </button>
<button <button
class="icon" class="icon"

34
pages/index.vue
View File

@@ -240,7 +240,7 @@
</div> </div>
</div> </div>
<div class="flex-wrap"> <div class="flex-wrap">
<div style="text-align: center;"> <span>
<button <button
class="icon" class="icon"
id="show-modal" id="show-modal"
@@ -280,8 +280,8 @@
>close</i >close</i
> >
</button> </button>
</div> </span>
<div style="text-align: center;"> <span>
<button <button
class="icon" class="icon"
@click="copyRequest" @click="copyRequest"
@@ -311,7 +311,7 @@
> >
<i class="material-icons">clear_all</i> <i class="material-icons">clear_all</i>
</button> </button>
</div> </span>
</div> </div>
</pw-section> </pw-section>
@@ -562,8 +562,16 @@
</div> </div>
<div class="flex-wrap"> <div class="flex-wrap">
<span></span> <span></span>
<button class="icon" @click="activeSidebar = !activeSidebar" v-tooltip="{ content: activeSidebar ? 'Hide Sidebar' : 'Show Sidebar' }"> <button
<i class="material-icons">{{activeSidebar ? 'chevron_right' : 'chevron_left'}}</i> class="icon"
@click="activeSidebar = !activeSidebar"
v-tooltip="{
content: activeSidebar ? 'Hide Sidebar' : 'Show Sidebar'
}"
>
<i class="material-icons">
{{ activeSidebar ? "last_page" : "first_page" }}
</i>
</button> </button>
</div> </div>
</section> </section>
@@ -610,10 +618,9 @@
: $t('collapse_response') : $t('collapse_response')
}" }"
> >
<i class="material-icons" v-if="!expandResponse" <i class="material-icons">
>unfold_more</i {{ !expandResponse ? "unfold_more" : "unfold_less" }}
> </i>
<i class="material-icons" v-else>unfold_less</i>
</button> </button>
<button <button
class="icon" class="icon"
@@ -661,10 +668,9 @@
v-if="response.body && responseType === 'text/html'" v-if="response.body && responseType === 'text/html'"
> >
<button class="icon" @click.prevent="togglePreview"> <button class="icon" @click.prevent="togglePreview">
<i class="material-icons" v-if="!previewEnabled" <i class="material-icons">
>visibility</i {{ !previewEnabled ? "visibility" : "visibility_off" }}
> </i>
<i class="material-icons" v-else>visibility_off</i>
<span>{{ <span>{{
previewEnabled ? $t("hide_preview") : $t("preview_html") previewEnabled ? $t("hide_preview") : $t("preview_html")
}}</span> }}</span>

16
pages/realtime.vue
View File

@@ -27,10 +27,9 @@
> >
{{ toggleConnectionVerb }} {{ toggleConnectionVerb }}
<span> <span>
<i class="material-icons" v-if="!connectionState">sync</i> <i class="material-icons">
<i class="material-icons" v-if="connectionState" {{ connectionState ? "sync" : "sync_disabled" }}
>sync_disabled</i </i>
>
</span> </span>
</button> </button>
</li> </li>
@@ -117,12 +116,9 @@
> >
{{ toggleSSEConnectionVerb }} {{ toggleSSEConnectionVerb }}
<span> <span>
<i class="material-icons" v-if="!connectionSSEState" <i class="material-icons">
>sync</i {{ !connectionSSEState ? "sync" : "sync_disabled" }}
> </i>
<i class="material-icons" v-if="connectionSSEState"
>sync_disabled</i
>
</span> </span>
</button> </button>
</li> </li>