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

🎨 Basic stylings

Browse Source
This commit is contained in:
Liyas Thomas
2019-10-22 14:43:54 +05:30
parent 7ad6cd83db
commit ee58075d3f
5 changed files with 83 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
components/collections/collection.vue
View File

@@ -9,21 +9,36 @@
> >
</addFolder> </addFolder>
<div class="header"> <div class="flex-wrap">
<i @click="toggleShowChildren" v-show='!showChildren' class="material-icons">arrow_right</i> <div>
<i @click="toggleShowChildren" v-show='showChildren' class="material-icons">arrow_drop_down</i> <button class="icon" @click="toggleShowChildren" v-show='!showChildren'>
<label @click="toggleShowChildren"> <i class="material-icons">arrow_right</i>
{{collection.name}} </button>
</label> <button class="icon" @click="toggleShowChildren" v-show='showChildren'>
<button class="add-button" @click="editCollection">e</button> <i class="material-icons">arrow_drop_down</i>
<button class="add-button" @click="removeCollection">x</button> </button>
<button class="add-button" @click="toggleModal">+</button> <button class="icon" @click="toggleShowChildren">
<i class="material-icons">folder</i>
<span>{{collection.name}}</span>
</button>
</div>
<div>
<button class="icon" @click="editCollection">
<i class="material-icons">create</i>
</button>
<button class="icon" @click="removeCollection">
<i class="material-icons">delete</i>
</button>
<button class="icon" @click="toggleModal">
<i class="material-icons">add</i>
</button>
</div>
</div> </div>
<div v-show="showChildren"> <div v-show="showChildren">
<ul> <ul>
<li v-for="(folder, index) in collection.folders" :key="folder.name"> <li v-for="(folder, index) in collection.folders" :key="folder.name">
<folder <folder
:folder="folder" :folder="folder"
:folderIndex="index" :folderIndex="index"
:collection-index="collectionIndex" :collection-index="collectionIndex"
@@ -34,7 +49,7 @@
<ul> <ul>
<li v-for="(request, index) in collection.requests" :key="index"> <li v-for="(request, index) in collection.requests" :key="index">
<request <request
:request="request" :request="request"
:collection-index="collectionIndex" :collection-index="collectionIndex"
:folder-index="-1" :folder-index="-1"
@@ -53,25 +68,8 @@
} }
ul li { ul li {
padding-left: 1rem;
}
.header {
display: flex; display: flex;
align-items: center; padding-left: 1rem;
}
label {
padding-left: .5rem;
}
.add-button {
padding: 0;
width: 20px;
margin: 0;
margin-right: .2rem;
height: 20px;
border-radius: 50%;
} }
</style> </style>
@@ -135,4 +133,4 @@ export default {
}, },
} }
}; };
</script> </script>

46
components/collections/folder.vue
View File

@@ -1,17 +1,32 @@
<template> <template>
<div> <div>
<div class="header"> <div class="flex-wrap">
<i @click="toggleShowChildren" v-show='!showChildren' class="material-icons">arrow_right</i> <div>
<i @click="toggleShowChildren" v-show='showChildren' class="material-icons">arrow_drop_down</i> <button class="icon" @click="toggleShowChildren" v-show='!showChildren'>
<div @click="toggleShowChildren">{{folder.name}}</div> <i class="material-icons">arrow_right</i>
<button class="add-button" @click="editFolder">e</button> </button>
<button class="add-button" @click="removeFolder">x</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">folder_open</i>
<span>{{folder.name}}</span>
</button>
</div>
<div>
<button class="icon" @click="editFolder">
<i class="material-icons">edit</i>
</button>
<button class="icon" @click="removeFolder">
<i class="material-icons">delete</i>
</button>
</div>
</div> </div>
<div v-show="showChildren"> <div v-show="showChildren">
<ul> <ul>
<li v-for="(request, index) in folder.requests" :key="index"> <li v-for="(request, index) in folder.requests" :key="index">
<request <request
:request="request" :request="request"
:collection-index="collectionIndex" :collection-index="collectionIndex"
:folder-index="folderIndex" :folder-index="folderIndex"
@@ -30,21 +45,8 @@
} }
ul li { ul li {
padding-left: 1rem;
}
.header {
display: flex; display: flex;
align-items: center; padding-left: 1rem;
}
.add-button {
padding: 0;
width: 20px;
margin: 0;
margin-right: .2rem;
height: 20px;
border-radius: 50%;
} }
</style> </style>
@@ -88,4 +90,4 @@ export default {
}, },
} }
}; };
</script> </script>

37
components/collections/index.vue
View File

@@ -11,13 +11,20 @@
<exportCollection :show="showExportModal" v-on:hide-model='toggleExport'></exportCollection> <exportCollection :show="showExportModal" v-on:hide-model='toggleExport'></exportCollection>
<div class='header'> <div class='flex-wrap'>
<Label>Collections</label> <h3 class="title">Collections</h3>
<button class="collection-button" @click="toggleModal">+</button> <div>
<button class="export-button" @click="toggleExport">Export</button> <button class="icon" @click="toggleModal">
<i class="material-icons">add</i>
<span>New</span>
</button>
<button class="icon" @click="toggleExport">
<i class="material-icons">import_export</i>
<span>Export</span>
</button>
</div>
</div> </div>
<ul> <ul>
<li v-for="(collection, index) in collections" :key="collection.name"> <li v-for="(collection, index) in collections" :key="collection.name">
<collection <collection
@@ -35,24 +42,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.header {
display: flex;
align-items: center;
}
.collection-button {
padding: 0;
width: 20px;
margin: 0;
height: 20px;
border-radius: 50%;
}
.export-button {
padding: 10px 8px;
height: 15px;
}
</style> </style>
<script> <script>

21
components/collections/request.vue
View File

@@ -1,8 +1,19 @@
<template> <template>
<div @click='selectRequest()'> <div class="flex-wrap">
{{request.name}} <div>
<button class="add-button" @click="editRequest">e</button> <button class="icon" @click="selectRequest()">
<button class="add-button" @click="removeRequest">x</button> <i class="material-icons">star</i>
<span>{{request.name}}</span>
</button>
</div>
<div>
<button class="icon" @click="editRequest">
<i class="material-icons">edit</i>
</button>
<button class="icon" @click="removeRequest">
<i class="material-icons">delete</i>
</button>
</div>
</div> </div>
</template> </template>
@@ -42,4 +53,4 @@ export default {
}, },
}, },
}; };
</script> </script>

2
pages/index.vue
View File

@@ -1148,7 +1148,7 @@
contentType: this.contentType, contentType: this.contentType,
requestType: this.requestType, requestType: this.requestType,
}; };
if (this.selectedRequest.url) { if (this.selectedRequest.url) {
this.editRequest = Object.assign({}, this.selectedRequest, this.editRequest); this.editRequest = Object.assign({}, this.selectedRequest, this.editRequest);
} }