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

Merge pull request #391 from liyasthomas/app-ui

Browse Source 
App UI
This commit is contained in:
Liyas Thomas
2019-12-02 23:00:45 +05:30
committed by GitHub
parent ae528f6302 bc3c608277
commit 1cfaf0bd57
7 changed files with 108 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
assets/css/styles.scss
View File

@@ -2,7 +2,7 @@
.page-leave-active, .page-leave-active,
.layout-enter-active, .layout-enter-active,
.layout-leave-active { .layout-leave-active {
transition: all 0.2s ease-in-out; transition: all 0.2s;
} }
.page-enter, .page-enter,
@@ -181,7 +181,7 @@ nav.primary-nav {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
padding: 16px; padding: 14px;
border-radius: 50%; border-radius: 50%;
background-color: var(--brd-color); background-color: var(--brd-color);
color: var(--fg-light-color); color: var(--fg-light-color);
@@ -226,7 +226,7 @@ nav.secondary-nav {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0; flex-shrink: 0;
padding: 16px; padding: 14px;
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);
@@ -267,8 +267,9 @@ h3 {
color: white; color: white;
border-radius: 8px; border-radius: 8px;
padding: 8px 16px; padding: 8px 16px;
font-size: 14px; font-size: 12px;
font-weight: 500; font-weight: 500;
box-shadow: 0 4px 24px rgba(black, 0.1);
} }
.tooltip-arrow { .tooltip-arrow {
@@ -613,6 +614,15 @@ ol li {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; 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 { .show-on-small-screen {
@@ -774,13 +784,13 @@ input[type="radio"]:checked + label + .tab {
.inner-left { .inner-left {
display: flex; display: flex;
order: 1; order: 1;
margin-right: 16px;
} }
.inner-right { .inner-right {
display: flex; display: flex;
width: 30%; width: 30%;
order: 2; order: 2;
margin-left: 16px;
} }
.bg-color { .bg-color {
@@ -839,6 +849,9 @@ input[type="radio"]:checked + label + .tab {
.inner-left { .inner-left {
order: 0; order: 0;
margin-right: 0; }
.inner-right {
margin-left: 0;
} }
} }

31
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>
@@ -122,7 +122,7 @@
/> />
</li> </li>
</div> </div>
<transition name="smooth"> <transition name="fade">
<div v-if="showMore" class="show-on-large-screen"> <div v-if="showMore" class="show-on-large-screen">
<li> <li>
<input <input
@@ -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,13 +268,13 @@
} }
} }
.smooth-enter-active, .fade-enter-active,
.smooth-leave-active { .fade-leave-active {
transition: all 0.2s; transition: all 0.2s;
} }
.smooth-enter, .fade-enter,
.smooth-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }

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 />

32
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,8 +317,6 @@
</div> </div>
<footer class="footer"> <footer class="footer">
<div class="flex-wrap"> <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 <a
v-bind:href=" v-bind:href="
@@ -330,14 +328,6 @@
> >
{{ version.name }} {{ version.name }}
</a> </a>
&#x2022;
<a
href="https://liyasthomas.web.app"
target="_blank"
rel="noopener"
>
🦄
</a>
<!-- <span v-if="version.hash"> <!-- <span v-if="version.hash">
- -
<a <a
@@ -348,8 +338,16 @@
</span> --> </span> -->
<!-- <span v-if="version.variant">({{version.variant}})</span> --> <!-- <span v-if="version.variant">({{version.variant}})</span> -->
</span> </span>
</div> <span>
<div class="flex-wrap"> <a
href="https://liyasthomas.web.app"
target="_blank"
rel="noopener"
>
<button class="icon" v-tooltip="'Liyas Thomas'">
🦄
</button>
</a>
<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"

42
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>
@@ -560,6 +560,20 @@
</ul> </ul>
</pw-section> </pw-section>
</div> </div>
<div class="flex-wrap">
<span></span>
<button
class="icon hide-on-small-screen"
@click="activeSidebar = !activeSidebar"
v-tooltip="{
content: activeSidebar ? 'Hide Sidebar' : 'Show Sidebar'
}"
>
<i class="material-icons">
{{ activeSidebar ? "last_page" : "first_page" }}
</i>
</button>
</div>
</section> </section>
<pw-section <pw-section
@@ -604,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"
@@ -655,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>
@@ -668,8 +680,7 @@
</ul> </ul>
</pw-section> </pw-section>
</div> </div>
<aside v-if="activeSidebar" class="sticky-inner inner-right">
<aside class="sticky-inner inner-right">
<section> <section>
<input id="history-tab" type="radio" name="side" checked="checked" /> <input id="history-tab" type="radio" name="side" checked="checked" />
<label for="history-tab">{{ $t("history") }}</label> <label for="history-tab">{{ $t("history") }}</label>
@@ -910,7 +921,8 @@ export default {
urlExcludes: {}, urlExcludes: {},
responseBodyText: "", responseBodyText: "",
responseBodyType: "text", responseBodyType: "text",
responseBodyMaxLines: 16 responseBodyMaxLines: 16,
activeSidebar: true
}; };
}, },
watch: { watch: {

26
pages/realtime.vue
View File

@@ -25,12 +25,11 @@
name="connect" name="connect"
@click="toggleConnection" @click="toggleConnection"
> >
{{ toggleConnectionVerb }} {{ !connectionState ? "Connect" : "Disconnect" }}
<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>
@@ -115,14 +114,11 @@
name="start" name="start"
@click="toggleSSEConnection" @click="toggleSSEConnection"
> >
{{ toggleSSEConnectionVerb }} {{ !connectionSSEState ? "Start" : "Stop" }}
<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>
@@ -209,9 +205,6 @@ export default {
}; };
}, },
computed: { computed: {
toggleConnectionVerb() {
return !this.connectionState ? "Connect" : "Disconnect";
},
urlValid() { urlValid() {
const pattern = new RegExp( const pattern = new RegExp(
"^(wss?:\\/\\/)?" + "^(wss?:\\/\\/)?" +
@@ -224,9 +217,6 @@ export default {
); );
return pattern.test(this.url); return pattern.test(this.url);
}, },
toggleSSEConnectionVerb() {
return !this.connectionSSEState ? "Start" : "Stop";
},
serverValid() { serverValid() {
const pattern = new RegExp( const pattern = new RegExp(
"^(http(s)?:\\/\\/)?" + "^(http(s)?:\\/\\/)?" +