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

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

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"

42
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>
@@ -560,6 +560,20 @@
</ul>
</pw-section>
</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>
<pw-section
@@ -604,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"
@@ -655,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>
@@ -668,8 +680,7 @@
</ul>
</pw-section>
</div>
<aside class="sticky-inner inner-right">
<aside v-if="activeSidebar" class="sticky-inner inner-right">
<section>
<input id="history-tab" type="radio" name="side" checked="checked" />
<label for="history-tab">{{ $t("history") }}</label>
@@ -910,7 +921,8 @@ export default {
urlExcludes: {},
responseBodyText: "",
responseBodyType: "text",
responseBodyMaxLines: 16
responseBodyMaxLines: 16,
activeSidebar: true
};
},
watch: {

26
pages/realtime.vue
View File

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