AverageMarcus/gopherss
1
0
Fork 0
Code Pull Requests Releases Activity

Compare commits

base: AverageMarcus:63123aa9a7e4640cebbf60dea75f4097644311a0
Branches Tags
AverageMarcus:master
...
compare: AverageMarcus:d5d24b0e7e53a11ac0cf13004923237a978be2c4
Branches Tags
AverageMarcus:master

4 Commits
63123aa9a7 ... d5d24b0e7e

Author SHA1 Message Date
Marcus Noble
d5d24b0e7e Added feed icons 2020-11-09 20:55:46 +00:00
Marcus Noble
be481d9c99 Fix selected feed indicator 2020-11-09 20:40:23 +00:00
Marcus Noble
189956e4fd Added unread count to title 2020-11-09 20:38:24 +00:00
Marcus Noble
41f26ed63b Fixed icon colour state 2020-11-09 20:14:35 +00:00
1 changed files with 18 additions and 6 deletions
Show Stats Expand all files Collapse all files

24
views/index.html
View File

@ -38,7 +38,7 @@
<div id="app"> <div id="app">
<div class="menu"> <div class="menu">
<button title="Show Read" v-on:click="toggleShowRead()"> <button title="Show Read" v-on:click="toggleShowRead()">
<svg width="30" height="30" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 9a4 4 0 110 8 4 4 0 010-8zm0-3.5a10 10 0 019.7 7.6.8.8 0 01-1.5.3 8.5 8.5 0 00-16.4 0 .8.8 0 01-1.5-.3A10 10 0 0112 5.5z" fill="#212121" fill-rule="nonzero"/></svg> <svg width="30" height="30" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 9a4 4 0 110 8 4 4 0 010-8zm0-3.5a10 10 0 019.7 7.6.8.8 0 01-1.5.3 8.5 8.5 0 00-16.4 0 .8.8 0 01-1.5-.3A10 10 0 0112 5.5z" :style="{'fill': showRead ? '#ff2e88' : '' }" fill-rule="nonzero"/></svg>
</button> </button>
<button title="Toggle dark mode" v-on:click="toggleDarkMode()"> <button title="Toggle dark mode" v-on:click="toggleDarkMode()">
<svg width="30" height="30" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 22a10 10 0 100-20 10 10 0 000 20zm0-2V4a8 8 0 110 16z" fill="#212121" fill-rule="nonzero"/></svg> <svg width="30" height="30" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M12 22a10 10 0 100-20 10 10 0 000 20zm0-2V4a8 8 0 110 16z" fill="#212121" fill-rule="nonzero"/></svg>
@ -56,8 +56,8 @@
All ({{unread}}) All ({{unread}})
</div> </div>
<div v-for="feed in feeds" :class="{strong: unreadCounts[feed.ID], 'alert': true, 'alert-success': selectedFeed == feed.FeedURL }" :data-feed="feed.FeedURL" v-on:click="loadFeed(feed.ID)"> <div v-for="feed in feeds" :class="{strong: unreadCounts[feed.ID], 'alert': true, 'alert-success': selectedFeed == feed.ID }" :data-feed="feed.FeedURL" v-on:click="loadFeed(feed.ID)">
{{feed.Title}} ({{unreadCounts[feed.ID] || '0'}}) <img :src="feedIcon(feed)" style="height: 16px; width: 16px;" onerror="this.style.visibility = 'hidden'" /> {{feed.Title}} ({{unreadCounts[feed.ID] || '0'}})
</div> </div>
<div :class="{ strong: items.length, alert: true, 'alert-success': selectedFeed == 'SAVED'}" v-on:click="loadFeed('SAVED')"> <div :class="{ strong: items.length, alert: true, 'alert-success': selectedFeed == 'SAVED'}" v-on:click="loadFeed('SAVED')">
@ -98,7 +98,7 @@
<div class="items"> <div class="items">
<div v-for="item in shownItems" :id="item.ID"> <div v-for="item in shownItems" :id="item.ID">
<div :class="{'alert': true, 'alert-info': item.Read == false, 'item-heading': true}" :data-feed="item.FeedHomepageURL" v-on:click="loadItem(item)"> <div :class="{'alert': true, 'alert-info': !item.Read && !item.PendingRead, 'item-heading': true}" :data-feed="item.FeedHomepageURL" v-on:click="loadItem(item)">
<span class="feed-title">{{item.FeedTitle}}</span> <span class="feed-title">{{item.FeedTitle}}</span>
<span class="date" :title="item.Created">{{ dayjs(item.Created).fromNow() }}</span> <span class="date" :title="item.Created">{{ dayjs(item.Created).fromNow() }}</span>
<h3 class="item-title">{{item.Title}} <a :href="item.URL">↗</a></h3> <h3 class="item-title">{{item.Title}} <a :href="item.URL">↗</a></h3>
@ -107,7 +107,7 @@
<div class="card-content"> <div class="card-content">
<div class="menu"> <div class="menu">
<button title="Save" v-on:click="saveItem(item)" :disabled="isBusy"> <button title="Save" v-on:click="saveItem(item)" :disabled="isBusy">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12.8 5.6l-.8.8-.8-.8a5.4 5.4 0 00-7.6 7.6l7.9 7.9c.3.3.7.3 1 0l8-8a5.4 5.4 0 10-7.7-7.5z" :style="{'fill': item.Save ? '#ff2e88' : '#eee' }" fill-rule="nonzero"/></svg> <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12.8 5.6l-.8.8-.8-.8a5.4 5.4 0 00-7.6 7.6l7.9 7.9c.3.3.7.3 1 0l8-8a5.4 5.4 0 10-7.7-7.5z" :style="{'fill': item.Save ? '#ff2e88' : '' }" fill-rule="nonzero"/></svg>
</button> </button>
</div> </div>
@ -166,9 +166,13 @@
} }
}, },
methods: { methods: {
setPageTitle() {
document.title = `Gopherss (${this.unread})`;
},
setBusy(isBusy) { setBusy(isBusy) {
this.isBusy = isBusy; this.isBusy = isBusy;
document.body.style.cursor = isBusy ? "wait" : ""; document.body.style.cursor = isBusy ? "wait" : "";
this.setPageTitle();
}, },
toggleDarkMode() { toggleDarkMode() {
this.isDark = !this.isDark; this.isDark = !this.isDark;
@ -177,6 +181,7 @@
}, },
loadFeed(feed) { loadFeed(feed) {
this.selectedItem = undefined; this.selectedItem = undefined;
this.items.forEach(item => item.Read = item.Read || item.PendingRead);
this.selectedFeed = feed; this.selectedFeed = feed;
}, },
loadItem(item) { loadItem(item) {
@ -185,7 +190,7 @@
} else { } else {
this.selectedItem = item.ID; this.selectedItem = item.ID;
document.getElementById(this.selectedItem).scrollIntoView(); document.getElementById(this.selectedItem).scrollIntoView();
item.Read = true; item.PendingRead = true;
fetch(`/api/read/${item.ID}`, {method: "POST"}) fetch(`/api/read/${item.ID}`, {method: "POST"})
} }
}, },
@ -319,6 +324,13 @@
this.setBusy(false); this.setBusy(false);
}); });
} }
},
feedIcon(feed) {
if (feed.ImageURL) {
return feed.ImageURL;
}
return "https://s2.googleusercontent.com/s2/favicons?domain_url=" + (feed.HomepageURL || feed.FeedURL);
} }
}, },
created() { created() {