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

💄 UI stylings

Browse Source
This commit is contained in:
Liyas Thomas
2019-10-22 17:32:26 +05:30
parent 705fd9971f
commit 4b3cee7f43
9 changed files with 55 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/collections/addCollection.vue
View File

@@ -24,8 +24,18 @@
</ul> </ul>
</div> </div>
<div slot="footer"> <div slot="footer">
<button @click="addNewCollection" v-if='!newCollection.hasOwnProperty("collectionIndex")'>Add</button> <ul>
<button @click="saveCollection" v-if='newCollection.hasOwnProperty("collectionIndex")'>Save</button> <li>
<button class="icon" @click="addNewCollection" v-if='!newCollection.hasOwnProperty("collectionIndex")'>
<i class="material-icons">add</i>
<span>Create</span>
</button>
<button class="icon" @click="saveCollection" v-if='newCollection.hasOwnProperty("collectionIndex")'>
<i class="material-icons">save</i>
<span>Save</span>
</button>
</li>
</ul>
</div> </div>
</modal> </modal>
</div> </div>

9
components/collections/collection.vue
View File

@@ -23,13 +23,13 @@
</button> </button>
</div> </div>
<div> <div>
<button class="icon" @click="editCollection"> <button class="icon" @click="editCollection" v-tooltip="'Edit collection'">
<i class="material-icons">create</i> <i class="material-icons">create</i>
</button> </button>
<button class="icon" @click="removeCollection"> <button class="icon" @click="removeCollection" v-tooltip="'Delete collection'">
<i class="material-icons">delete</i> <i class="material-icons">delete</i>
</button> </button>
<button class="icon" @click="toggleModal"> <button class="icon" @click="toggleModal" v-tooltip="'New Folder'">
<i class="material-icons">add</i> <i class="material-icons">add</i>
</button> </button>
</div> </div>
@@ -69,7 +69,8 @@
ul li { ul li {
display: flex; display: flex;
padding-left: 1rem; padding-left: 16px;
border-left: 1px solid var(--brd-color);
} }
</style> </style>

7
components/collections/folder.vue
View File

@@ -14,10 +14,10 @@
</button> </button>
</div> </div>
<div> <div>
<button class="icon" @click="editFolder"> <button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
<i class="material-icons">edit</i> <i class="material-icons">edit</i>
</button> </button>
<button class="icon" @click="removeFolder"> <button class="icon" @click="removeFolder" v-tooltip="'Delete folder'">
<i class="material-icons">delete</i> <i class="material-icons">delete</i>
</button> </button>
</div> </div>
@@ -46,7 +46,8 @@
ul li { ul li {
display: flex; display: flex;
padding-left: 1rem; padding-left: 16px;
border-left: 1px solid var(--brd-color);
} }
</style> </style>

19
components/collections/request.vue
View File

@@ -7,10 +7,10 @@
</button> </button>
</div> </div>
<div> <div>
<button class="icon" @click="editRequest"> <button class="icon" @click="editRequest" v-tooltip="'Edit request'">
<i class="material-icons">edit</i> <i class="material-icons">edit</i>
</button> </button>
<button class="icon" @click="removeRequest"> <button class="icon" @click="removeRequest" v-tooltip="'Delete collection'">
<i class="material-icons">delete</i> <i class="material-icons">delete</i>
</button> </button>
</div> </div>
@@ -18,12 +18,15 @@
</template> </template>
<style scoped> <style scoped>
.add-button { ul {
padding: 0; display: flex;
width: 20px; flex-direction: column;
margin: 0; }
height: 20px;
border-radius: 50%; ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
} }
</style> </style>

2
components/history.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<pw-section class="gray" label="History"> <pw-section class="gray" icon="history" label="History">
<ul> <ul>
<li id="filter-history"> <li id="filter-history">
<input aria-label="Search" type="text" placeholder="search history" :readonly="history.length === 0" v-model="filterText"> <input aria-label="Search" type="text" placeholder="search history" :readonly="history.length === 0" v-model="filterText">

9
components/section.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': noFrameColors }"> <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': noFrameColors }">
<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></legend> <legend @click.prevent="collapse"><i class="material-icons icon">{{ icon }}</i><span>{{ label }}</span><i class="material-icons" v-if="isCollapsed">expand_more</i><i class="material-icons" v-if="!isCollapsed">expand_less</i></legend>
<div class="collapsible" :class="{ hidden: collapsed }"> <div class="collapsible" :class="{ hidden: collapsed }">
<slot /> <slot />
</div> </div>
@@ -11,6 +11,9 @@
fieldset.no-colored-frames legend { fieldset.no-colored-frames legend {
color: var(--fg-color); color: var(--fg-color);
} }
.icon {
margin-right: 8px;
}
</style> </style>
<script> <script>
@@ -32,6 +35,10 @@ export default {
type: String, type: String,
default: "Section" default: "Section"
}, },
icon: {
type: String,
default: "lens"
},
collapsed: { collapsed: {
type: Boolean type: Boolean
} }

16
pages/index.vue
View File

@@ -38,7 +38,7 @@
</ul> </ul>
</div> </div>
</pw-modal> </pw-modal>
<pw-section class="blue" label="Request" ref="request"> <pw-section class="blue" icon="cloud_upload" label="Request" ref="request">
<ul> <ul>
<li> <li>
<label for="method">Method</label> <label for="method">Method</label>
@@ -166,7 +166,7 @@
</button> </button>
</div> </div>
</pw-section> </pw-section>
<pw-section class="yellow" label="Code" ref="requestCode" v-if="!isHidden"> <pw-section class="yellow" icon="code" label="Code" ref="requestCode" v-if="!isHidden">
<ul> <ul>
<li> <li>
<label for="requestType">Request Type</label> <label for="requestType">Request Type</label>
@@ -192,7 +192,7 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="purple" id="response" label="Response" ref="response"> <pw-section class="purple" icon="cloud_download" id="response" label="Response" ref="response">
<ul> <ul>
<li> <li>
<label for="status">status</label> <label for="status">status</label>
@@ -234,7 +234,7 @@
<input id="tab-one" type="radio" name="grp" checked="checked"> <input id="tab-one" type="radio" name="grp" checked="checked">
<label for="tab-one">Authentication</label> <label for="tab-one">Authentication</label>
<div class="tab"> <div class="tab">
<pw-section class="cyan" label="Authentication"> <pw-section class="cyan" icon="vpn_key" label="Authentication">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="flex-wrap">
@@ -279,7 +279,7 @@
<input id="tab-two" type="radio" name="grp"> <input id="tab-two" type="radio" name="grp">
<label for="tab-two">Headers</label> <label for="tab-two">Headers</label>
<div class="tab"> <div class="tab">
<pw-section class="orange" label="Headers"> <pw-section class="orange" icon="toc" label="Headers">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="flex-wrap">
@@ -322,7 +322,7 @@
<input id="tab-three" type="radio" name="grp"> <input id="tab-three" type="radio" name="grp">
<label for="tab-three">Parameters</label> <label for="tab-three">Parameters</label>
<div class="tab"> <div class="tab">
<pw-section class="pink" label="Parameters"> <pw-section class="pink" icon="input" label="Parameters">
<ul> <ul>
<li> <li>
<div class="flex-wrap"> <div class="flex-wrap">
@@ -364,7 +364,9 @@
</div> </div>
</section> </section>
<history @useHistory="handleUseHistory" ref="historyComponent"></history> <history @useHistory="handleUseHistory" ref="historyComponent"></history>
<collections></collections> <pw-section class="blue" icon="folder_special" label="Collections" ref="Collections">
<collections></collections>
</pw-section>
</div> </div>
</template> </template>
<script> <script>

4
pages/settings.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="cyan" label="Theme"> <pw-section class="cyan" icon="color_lens" label="Theme">
<ul> <ul>
<li> <li>
<h3 class="title">Background</h3> <h3 class="title">Background</h3>
@@ -32,7 +32,7 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="blue" label="Proxy"> <pw-section class="blue" icon="public" label="Proxy">
<ul> <ul>
<li> <li>
<pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')"> <pw-toggle :on="settings.PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">

4
pages/websocket.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<pw-section class="blue" label="Request" ref="request"> <pw-section class="blue" icon="cloud_upload" label="Request" ref="request">
<ul> <ul>
<li> <li>
<label for="url">URL</label> <label for="url">URL</label>
@@ -18,7 +18,7 @@
</li> </li>
</ul> </ul>
</pw-section> </pw-section>
<pw-section class="purple" label="Communication" id="response" ref="response"> <pw-section class="purple" icon="cloud_download" label="Communication" id="response" ref="response">
<ul> <ul>
<li> <li>
<label for="log">Log</label> <label for="log">Log</label>