go-shiori/shiori
1
1
Fork 0
mirror of https://github.com/go-shiori/shiori.git synced 2025-02-22 06:53:22 +08:00
Code Issues Projects Releases Packages Wiki Activity

Toggle image in grid

Browse source
This commit is contained in:
Radhi Fadlillah 2018-02-17 16:48:55 +07:00
parent 0f4ab6aa38
commit 258513f4e8
1 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
view/index.html
View file

@ -29,6 +29,9 @@
<a @click="loadData"> <a @click="loadData">
<i class="fas fa-cloud fa-fw"></i> Reload <i class="fas fa-cloud fa-fw"></i> Reload
</a> </a>
<a @click="toggleImage">
<i class="fas fa-fw" :class="showImage ? 'fa-eye-slash' : 'fa-eye'"></i> {{showImage ? 'Hide image' : 'Show image'}}
</a>
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -74,7 +77,7 @@
<a class="checkbox" @click="toggleBookmarkCheck(item.index)"> <a class="checkbox" @click="toggleBookmarkCheck(item.index)">
<i class="fas fa-check"></i> <i class="fas fa-check"></i>
</a> </a>
<a class="bookmark-metadata" target="_blank" :class="{'has-image':item.imageURL !== ''}" :style="bookmarkImage(item)" :href="item.url"> <a class="bookmark-metadata" target="_blank" :class="{'has-image':bookmarkImage(item) !== ''}" :style="bookmarkImage(item)" :href="item.url">
<p class="bookmark-time">{{bookmarkTime(item)}}</p> <p class="bookmark-time">{{bookmarkTime(item)}}</p>
<p class="bookmark-title">{{item.title}}</p> <p class="bookmark-title">{{item.title}}</p>
<p class="bookmark-url">{{getDomainURL(item.url)}}</p> <p class="bookmark-url">{{getDomainURL(item.url)}}</p>
@ -135,6 +138,7 @@
loading: true, loading: true,
bookmarks: [], bookmarks: [],
checkedBookmarks: [], checkedBookmarks: [],
showImage: true,
inputBookmark: { inputBookmark: {
index: -1, index: -1,
id: -1, id: -1,
@ -387,7 +391,13 @@
return finalBookmarkTime; return finalBookmarkTime;
}, },
toggleImage: function () {
this.showImage = !this.showImage;
if (this.showImage) localStorage.setItem('show-image', '');
else localStorage.removeItem('show-image');
},
bookmarkImage: function (book) { bookmarkImage: function (book) {
if (!this.showImage) return "";
if (book.imageURL === "") return ""; if (book.imageURL === "") return "";
return "background-image: url(" + book.imageURL + ")"; return "background-image: url(" + book.imageURL + ")";
}, },
@ -450,7 +460,9 @@
} }
}, },
mounted: function () { mounted: function () {
this.showImage = localStorage.getItem('show-image') !== null;
this.windowWidth = window.innerWidth; this.windowWidth = window.innerWidth;
window.addEventListener('resize', function () { window.addEventListener('resize', function () {
app.windowWidth = window.innerWidth; app.windowWidth = window.innerWidth;
}) })