🎨 Minor UI update on collections

This commit is contained in:
Liyas Thomas
2019-10-22 21:27:48 +05:30
parent 4b3cee7f43
commit 3208cec882
6 changed files with 36 additions and 24 deletions

View File

@@ -19,7 +19,7 @@
<div slot="body">
<ul>
<li>
<input type="text" v-model="newCollection.name" placeholder="My New Collection" />
<input type="text" v-model="newCollection.name" placeholder="My New Collection" />
</li>
</ul>
</div>

View File

@@ -23,8 +23,18 @@
</ul>
</div>
<div slot="footer">
<button @click="addNewFolder" v-if='!newFolder.hasOwnProperty("folderIndex")'>Add</button>
<button @click="saveFolder" v-if='newFolder.hasOwnProperty("folderIndex")'>Save</button>
<ul>
<li>
<button class="icon" @click="addNewFolder" v-if='!newFolder.hasOwnProperty("folderIndex")'>
<i class="material-icons">add</i>
<span>Create</span>
</button>
<button class="icon" @click="saveFolder" v-if='newFolder.hasOwnProperty("folderIndex")'>
<i class="material-icons">save</i>
<span>Save</span>
</button>
</li>
</ul>
</div>
</modal>
</template>
@@ -76,4 +86,4 @@ export default {
},
},
};
</script>
</script>

View File

@@ -11,13 +11,9 @@
<div class="flex-wrap">
<div>
<button class="icon" @click="toggleShowChildren" v-show='!showChildren'>
<i class="material-icons">arrow_right</i>
</button>
<button class="icon" @click="toggleShowChildren" v-show='showChildren'>
<i class="material-icons">arrow_drop_down</i>
</button>
<button class="icon" @click="toggleShowChildren">
<i class="material-icons" v-show='!showChildren'>arrow_right</i>
<i class="material-icons" v-show='showChildren'>arrow_drop_down</i>
<i class="material-icons">folder</i>
<span>{{collection.name}}</span>
</button>

View File

@@ -16,8 +16,8 @@
</ul>
</div>
<div slot="body">
<textarea v-model='collectionJson'>
</textarea>
<textarea v-model='collectionJson' rows="8">
</textarea>
</div>
<div slot="footer">
</div>
@@ -46,4 +46,4 @@ export default {
},
},
};
</script>
</script>

View File

@@ -2,13 +2,9 @@
<div>
<div class="flex-wrap">
<div>
<button class="icon" @click="toggleShowChildren" v-show='!showChildren'>
<i class="material-icons">arrow_right</i>
</button>
<button class="icon" @click="toggleShowChildren" v-show='showChildren'>
<i class="material-icons">arrow_drop_down</i>
</button>
<button class="icon" @click="toggleShowChildren">
<i class="material-icons" v-show='!showChildren'>arrow_right</i>
<i class="material-icons" v-show='showChildren'>arrow_drop_down</i>
<i class="material-icons">folder_open</i>
<span>{{folder.name}}</span>
</button>

View File

@@ -21,7 +21,7 @@
<li>
<input type="text" v-model="request.name" placeholder="My New Request" />
<select type="text" v-model="request.collection" >
<option
<option
v-for="collection in collections"
:key="collection.collectionIndex"
:value="collection.collectionIndex">
@@ -29,7 +29,7 @@
</option>
</select>
<select type="text" v-model="request.folder" >
<option
<option
v-for="folder in folders"
:key="folder.folderIndex"
:value="folder.folderIndex">
@@ -40,8 +40,18 @@
</ul>
</div>
<div slot="footer">
<button @click="addRequest" v-if='!request.hasOwnProperty("requestIndex")'>Add</button>
<button @click="saveRequest" v-if='request.hasOwnProperty("requestIndex")'>Save</button>
<ul>
<li>
<button class="icon" @click="addRequest" v-if='!request.hasOwnProperty("requestIndex")'>
<i class="material-icons">add</i>
<span>Create</span>
</button>
<button class="icon" @click="saveRequest" v-if='request.hasOwnProperty("requestIndex")'>
<i class="material-icons">save</i>
<span>Save</span>
</button>
</li>
</ul>
</div>
</modal>
</div>
@@ -145,4 +155,4 @@ export default {
},
},
};
</script>
</script>