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;
justify-content: space-between;
flex-grow: 1;
flex-direction: row;
* {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
}
.show-on-small-screen {

37
components/history.vue
View File

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

5
components/section.vue
View File

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

66
layouts/default.vue
View File

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

5
pages/graphql.vue
View File

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

34
pages/index.vue
View File

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

16
pages/realtime.vue
View File

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