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

16
components/collections/addCollection.vue
View File

@@ -24,8 +24,18 @@
</ul>
</div>
<div slot="footer">
<button @click="addNewCollection" v-if='!newCollection.hasOwnProperty("collectionIndex")'>Add</button>
<button @click="saveCollection" v-if='newCollection.hasOwnProperty("collectionIndex")'>Save</button>
<ul>
<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>
</modal>
</div>
@@ -81,4 +91,4 @@ export default {
},
},
};
</script>
</script>

9
components/collections/collection.vue
View File

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

7
components/collections/folder.vue
View File

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

19
components/collections/request.vue
View File

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

2
components/history.vue
View File

@@ -1,5 +1,5 @@
<template>
<pw-section class="gray" label="History">
<pw-section class="gray" icon="history" label="History">
<ul>
<li id="filter-history">
<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>
<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 }">
<slot />
</div>
@@ -11,6 +11,9 @@
fieldset.no-colored-frames legend {
color: var(--fg-color);
}
.icon {
margin-right: 8px;
}
</style>
<script>
@@ -32,6 +35,10 @@ export default {
type: String,
default: "Section"
},
icon: {
type: String,
default: "lens"
},
collapsed: {
type: Boolean
}