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

🎨 Various UI tweaks

Browse Source
This commit is contained in:
Liyas Thomas
2019-12-18 00:43:15 +05:30
parent ae237f1ad3
commit bc6ea34f14
19 changed files with 150 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/collections/addCollection.vue
View File

@@ -22,14 +22,17 @@
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="addNewCollection">
<i class="material-icons">add</i>
<span>Create</span>
<div class="flex-wrap">
<span></span>
<span>
<button class="icon" @click="hideModal">
Cancel
</button>
</li>
</ul>
<button class="icon primary" @click="addNewCollection">
Save
</button>
</span>
</div>
</div>
</modal>
</template>

17
components/collections/addFolder.vue
View File

@@ -22,14 +22,17 @@
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="addNewFolder">
<i class="material-icons">add</i>
<span>Create</span>
<div class="flex-wrap">
<span></span>
<span>
<button class="icon" @click="hideModal">
Cancel
</button>
</li>
</ul>
<button class="icon primary" @click="addNewFolder">
Save
</button>
</span>
</div>
</div>
</modal>
</template>

23
components/collections/editCollection.vue
View File

@@ -1,12 +1,12 @@
<template>
<modal v-if="show" @close="hideModel">
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Edit Collection</h3>
<div>
<button class="icon" @click="hideModel">
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
@@ -27,14 +27,17 @@
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="saveCollection">
<i class="material-icons">save</i>
<span>Save</span>
<div class="flex-wrap">
<span></span>
<span>
<button class="icon" @click="hideModal">
Cancel
</button>
</li>
</ul>
<button class="icon primary" @click="saveCollection">
Save
</button>
</span>
</div>
</div>
</modal>
</template>
@@ -66,7 +69,7 @@ export default {
});
this.$emit("hide-modal");
},
hideModel() {
hideModal() {
this.$emit("hide-modal");
}
}

17
components/collections/editFolder.vue
View File

@@ -27,14 +27,17 @@
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="editFolder">
<i class="material-icons">add</i>
<span>Save</span>
<div class="flex-wrap">
<span></span>
<span>
<button class="icon" @click="hideModal">
Cancel
</button>
</li>
</ul>
<button class="icon primary" @click="editFolder">
Save
</button>
</span>
</div>
</div>
</modal>
</template>

17
components/collections/editRequest.vue
View File

@@ -71,14 +71,17 @@
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="saveRequest">
<i class="material-icons">save</i>
<span>Save</span>
<div class="flex-wrap">
<span></span>
<span>
<button class="icon" @click="hideModal">
Cancel
</button>
</li>
</ul>
<button class="icon primary" @click="saveRequest">
Save
</button>
</span>
</div>
</div>
</modal>
</template>

36
components/collections/importExportCollections.vue
View File

@@ -1,12 +1,12 @@
<template>
<modal v-if="show" @close="hideModel">
<modal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Import / Export Collections</h3>
<div>
<button class="icon" @click="hideModel">
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
@@ -18,8 +18,8 @@
<textarea v-model="collectionJson" rows="8"></textarea>
</div>
<div slot="footer">
<ul>
<li>
<div class="flex-wrap">
<span>
<button
class="icon"
@click="openDialogChooseFileToReplaceWith"
@@ -34,8 +34,6 @@
ref="inputChooseFileToReplaceWith"
/>
</button>
</li>
<li>
<button
class="icon"
@click="openDialogChooseFileToImportFrom"
@@ -50,14 +48,24 @@
ref="inputChooseFileToImportFrom"
/>
</button>
</li>
<li>
<button class="icon" @click="exportJSON" v-tooltip="'Download file'">
<i class="material-icons">get_app</i>
<span>Export to JSON</span>
</span>
<span></span>
</div>
<div class="flex-wrap">
<span></span>
<span>
<button class="icon" @click="hideModal">
Cancel
</button>
</li>
</ul>
<button
class="icon primary"
@click="exportJSON"
v-tooltip="'Download file'"
>
Export
</button>
</span>
</div>
</div>
</modal>
</template>
@@ -76,7 +84,7 @@ export default {
}
},
methods: {
hideModel() {
hideModal() {
this.$emit("hide-modal");
},
openDialogChooseFileToReplaceWith() {

17
components/collections/saveRequestAs.vue
View File

@@ -88,14 +88,17 @@
</ul>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="saveRequestAs">
<i class="material-icons">save</i>
<span>Save</span>
<div class="flex-wrap">
<span></span>
<span>
<button class="icon" @click="hideModal">
Cancel
</button>
</li>
</ul>
<button class="icon primary" @click="saveRequestAs">
Save
</button>
</span>
</div>
</div>
</modal>
</template>

2
components/graphql/field.vue
View File

@@ -15,7 +15,7 @@
.field-box {
padding: 16px;
margin: 4px;
border-bottom: 1px solid var(--brd-color);
border-bottom: 1px dashed var(--brd-color);
}
.field-deprecated {

2
components/history.vue
View File

@@ -308,7 +308,7 @@ ol li {
.entry {
border-bottom: 1px dashed var(--brd-color);
padding: 16px 0;
padding: 0 0 8px;
}
.bg-color {

4
components/logo.vue
View File

@@ -24,9 +24,9 @@
<path
:fill="color"
id="path3816"
data-old_color="#121212"
data-old_color="#202124"
class="active-path"
data-original="#121212"
data-original="#202124"
d="M 64.601,236.822 C 64.601,394.256 192.786,612 306.001,612 412.582,612 547.4,394.256 547.4,236.822 547.4,79.388 439.322,0 306,0 172.678,0 64.601,79.388 64.601,236.822 Z m 304.12,116.415 c 29.475,-29.475 70.598,-40.195 108.552,-32.173 8.021,37.954 -2.698,79.077 -32.173,108.552 -29.475,29.475 -70.598,40.195 -108.552,32.173 -8.022,-37.955 2.698,-79.078 32.173,-108.552 z M 134.727,321.063 c 37.954,-8.021 79.077,2.698 108.552,32.173 29.475,29.475 40.195,70.598 32.173,108.552 -37.954,8.021 -79.077,-2.698 -108.552,-32.173 -29.475,-29.476 -40.194,-70.598 -32.173,-108.552 z"
/>
</g>

2
components/modal.vue
View File

@@ -25,7 +25,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.87);
display: flex;
align-items: center;
justify-content: center;