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

✨ Favorite (star) History entries

Browse Source
This commit is contained in:
Liyas Thomas
2019-11-10 12:08:10 +05:30
parent ee8f133ebb
commit 10b699a6f7
3 changed files with 31 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/css/styles.scss
View File

@@ -671,9 +671,12 @@ fieldset#history {
span { span {
position: absolute; position: absolute;
top: 12px; top: 8px;
right: 12px; right: 8px;
font-family: 'Roboto Mono', monospace; font-family: 'Roboto Mono', monospace;
background-color: var(--bg-color);
padding: 4px 8px;
border-radius: 8px;
} }
} }
} }

31
components/history.vue
View File

@@ -9,7 +9,12 @@
<div class="show-on-small-screen"> <div class="show-on-small-screen">
<li> <li>
<button class="icon"> <button class="icon">
<i class="material-icons">history</i> <i class="material-icons">details</i>
</button>
</li>
<li>
<button class="icon">
<i class="material-icons">change_history</i>
</button> </button>
</li> </li>
</div> </div>
@@ -72,11 +77,15 @@
<ul v-for="(entry, index) in filteredHistory" :key="index" class="entry"> <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
<div class="show-on-small-screen"> <div class="show-on-small-screen">
<li> <li>
<button v-if="entry.usesScripts" class="icon" v-tooltip="'This entry used pre-request scripts'"> <button class="icon" :class="{ stared: entry.star }" @click="toggleStar(index)" v-tooltip="{ content: !entry.star ? 'Add star' : 'Remove star'}">
<i class="material-icons">code</i> <i class="material-icons" v-if="entry.star">star</i>
<i class="material-icons" v-else>star_border</i>
</button> </button>
<button v-else class="icon" v-tooltip="'No pre-request scripts'"> </li>
<i class="material-icons">http</i> <li>
<button class="icon" v-tooltip="{ content: !entry.usesScripts ? 'No pre-request script' : 'Used pre-request script'}">
<i class="material-icons" v-if="!entry.usesScripts">http</i>
<i class="material-icons" v-else>code</i>
</button> </button>
</li> </li>
</div> </div>
@@ -177,9 +186,13 @@
opacity: 0; opacity: 0;
} }
.stared {
color: #F8E81C !important;
}
@media (max-width: 720px) { @media (max-width: 720px) {
.virtual-list.filled { .virtual-list.filled {
min-height: 200px; min-height: 320px;
} }
} }
@@ -348,8 +361,12 @@
this.history = byDuration; this.history = byDuration;
this.reverse_sort_duration = !this.reverse_sort_duration; this.reverse_sort_duration = !this.reverse_sort_duration;
}, },
toggleCollapse: function() { toggleCollapse() {
this.show = !this.show this.show = !this.show
},
toggleStar(index) {
this.history[index]["star"] = !this.history[index]["star"];
updateOnLocalStorage("history", this.history);
} }
} }
}; };

3
pages/index.vue
View File

@@ -1352,7 +1352,8 @@ export default {
path: this.path, path: this.path,
usesScripts: Boolean(this.preRequestScript), usesScripts: Boolean(this.preRequestScript),
preRequestScript: this.preRequestScript, preRequestScript: this.preRequestScript,
duration duration,
star: false
}; };
this.$refs.historyComponent.addEntry(entry); this.$refs.historyComponent.addEntry(entry);
})(); })();