james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-05-24 00:33:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

item status toggle buttons

Browse Source
This commit is contained in:
Nazar Kanaev 2020-07-05 13:44:20 +01:00
parent 5fc436a36b
commit 7ecdada4ca
3 changed files with 30 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
template/index.html
View File

@ -89,7 +89,18 @@
</div>
<div class="vh-100 d-flex flex-column w-100">
<div class="p-2 d-flex">
<div class="flex-grow-1"></div>
<div class="flex-grow-1">
<div v-if="itemSelected">
<button class="btn btn-link p-0" style="line-height: 1" @click="toggleItemStarred(itemSelectedDetails)">
<img v-if="itemSelectedDetails.status=='starred'" src="./static/images/star-full.svg" alt="" style="width: 20px; height: 20px;">
<img v-else-if="itemSelectedDetails.status!='starred'" src="./static/images/star.svg" alt="" style="width: 20px; height: 20px;">
</button>
<button class="btn btn-link p-0" style="line-height: 1" v-if="itemSelectedDetails.status!='starred'" @click="toggleItemRead(itemSelectedDetails)">
<img v-if="itemSelectedDetails.status=='unread'" src="./static/images/circle-full.svg" alt="" style="width: 20px; height: 20px;">
<img v-if="itemSelectedDetails.status=='read'" src="./static/images/circle.svg" src="./static/images/circle-full.svg" alt="" style="width: 20px; height: 20px;">
</button>
</div>
</div>
<button class="btn btn-link p-0" v-b-modal.settings-modal style="line-height: 1">
<img src="./static/images/settings.svg" alt="" style="width: 20px; height: 20px;">
</button>

1
template/static/images/star-full.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
Side by Side

After

Width:  |  Height:  |  Size: 348 B

17
template/static/javascripts/app.js
View File

@ -55,6 +55,9 @@ var vm = new Vue({
},
'itemSelected': function(newVal, oldVal) {
this.itemSelectedDetails = this.itemsById[newVal]
if (this.itemSelectedDetails.status == 'unread') {
this.itemSelectedDetails.status = 'read'
}
},
},
methods: {
@ -141,5 +144,19 @@ var vm = new Vue({
vm.loading.newfeed = false
})
},
toggleItemStarred: function(item) {
if (item.status == 'starred') {
item.status = 'read'
} else if (item.status != 'starred') {
item.status = 'starred'
}
},
toggleItemRead: function(item) {
if (item.status == 'unread') {
item.status = 'read'
} else if (item.status == 'read') {
item.status = 'unread'
}
},
}
})