🎨 Various UI tweaks

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

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>

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>

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");
}
}

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>

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>

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() {

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>