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

remove manage modal, edit via dropdown

Browse Source
This commit is contained in:
Nazar Kanaev 2021-04-06 20:12:52 +01:00
parent c825f8864f
commit f65aadb055
3 changed files with 80 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/assets/index.html
View File

@ -49,10 +49,6 @@
<span class="icon mr-1">{% inline "plus.svg" %}</span>
New Feed
</button>
<button class="dropdown-item" @click="showSettings('manage')">
<span class="icon mr-1">{% inline "list.svg" %}</span>
Manage Feeds
</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item" @click="fetchAllFeeds()">
<span class="icon mr-1">{% inline "rotate-cw.svg" %}</span>
@ -146,6 +142,11 @@
<span class="icon mr-2" v-else><img :src="'./api/feeds/'+feed.id+'/icon'" alt="" loading="lazy"></span>
<span class="flex-fill text-left text-truncate">{{ feed.title }}</span>
<span class="counter text-right">{{ filteredFeedStats[feed.id] || '' }}</span>
<span class="icon flex-shrink-0 mx-2 info"
:data-info="feed_errors[feed.id]"
v-if="!filterSelected && feed_errors[feed.id]">
{% inline "alert-circle.svg" %}
</span>
</div>
</label>
</div>
@ -176,6 +177,51 @@
title="Mark All Read">
<span class="icon">{% inline "check.svg" %}</span>
</button>
<dropdown class="settings-dropdown"
toggle-class="btn btn-link toolbar-item px-2 ml-2"
drop="right"
v-if="!filterSelected && current.type == 'feed'">
<template v-slot:button>
<span class="icon">{% inline "more-horizontal.svg" %}</span>
</template>
<header class="dropdown-header">{{ current.feed.title }}</header>
<a class="dropdown-item" :href="current.feed.link" target="_blank" v-if="current.feed.link">Visit Website</a>
<div class="dropdown-divider" v-if="current.feed.link"></div>
<button class="dropdown-item" @click="renameFeed(current.feed)">Rename</button>
<div class="dropdown-divider" v-if="folders.length"></div>
<header class="dropdown-header" v-if="folders.length">Move to...</header>
<button class="dropdown-item"
v-if="folder.id != current.feed.folder_id"
v-for="folder in folders"
@click="moveFeed(current.feed, folder)">
<span class="icon mr-1">{% inline "folder.svg" %}</span>
{{ folder.title }}
</button>
<button class="dropdown-item" @click="moveFeed(current.feed, null)" v-if="current.feed.folder_id">
---
</button>
<button class="dropdown-item" @click="moveFeedToNewFolder(current.feed)">
<span class="text-muted icon mr-1">{% inline "plus.svg" %}</span>
<span class="text-muted">New Folder</span>
</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item text-danger"
@click.prevent="deleteFeed(current.feed)">
Delete
</button>
</dropdown>
<dropdown class="settings-dropdown"
toggle-class="btn btn-link toolbar-item px-2 ml-2"
drop="right"
v-if="!filterSelected && current.type == 'folder'">
<template v-slot:button>
<span class="icon">{% inline "more-horizontal.svg" %}</span>
</template>
<header class="dropdown-header">{{ current.folder.title }}</header>
<button class="dropdown-item" @click="renameFolder(current.folder)">Rename</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item text-danger" @click="deleteFolder(current.folder)">Delete</button>
</dropdown>
</div>
<div id="item-list-scroll" class="p-2 overflow-auto border-top flex-grow-1" v-scroll="loadMoreItems" ref="itemlist">
<label v-for="item in items" :key="item.id"
@ -300,75 +346,6 @@
<button class="btn btn-block btn-default mt-3" :class="{loading: loading.newfeed}" type="submit">Add</button>
</form>
</div>
<div v-else-if="settings=='manage'">
<p class="cursor-default"><b>Manage Feeds</b></p>
<div v-for="folder in foldersWithFeeds" :key="folder.id">
<div class="list-row d-flex align-items-center">
<div class="w-100 text-truncate" v-if="folder.id">
<span class="icon mr-2">{% inline "folder.svg" %}</span>
{{ folder.title }}
</div>
<div class="flex-shrink-0" v-if="folder.id">
<dropdown class="settings-dropdown" toggle-class="btn btn-link text-decoration-none" drop="right">
<template v-slot:button>
<span class="icon">{% inline "more-vertical.svg" %}</span>
</template>
<header class="dropdown-header">{{ folder.title }}</header>
<button class="dropdown-item" @click="renameFolder(folder)">Rename</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item text-danger" @click="deleteFolder(folder)">Delete</button>
</dropdown>
</div>
</div>
<div v-for="feed in folder.feeds"
class="list-row d-flex align-items-center"
:class="{'ml-2': folder.id}"
:key="feed.id">
<div class="w-100 text-truncate">
<span class="icon mr-2" v-if="!feed.has_icon">{% inline "rss.svg" %}</span>
<span class="icon mr-2" v-else><img :src="'./api/feeds/'+feed.id+'/icon'" alt="" loading="lazy"></span>
{{ feed.title }}
</div>
<span class="icon flex-shrink-0 mx-2 info"
:data-info="feed_errors[feed.id]"
v-if="feed_errors[feed.id]">
{% inline "alert-circle.svg" %}
</span>
<div class="flex-shrink-0">
<dropdown class="settings-dropdown" toggle-class="btn btn-link text-decoration-none" drop="right">
<template v-slot:button>
<span class="icon">{% inline "more-vertical.svg" %}</span>
</template>
<header class="dropdown-header">{{ feed.title }}</header>
<a class="dropdown-item" :href="feed.link" target="_blank" v-if="feed.link">Visit Website</a>
<div class="dropdown-divider" v-if="feed.link"></div>
<button class="dropdown-item" @click="renameFeed(feed)">Rename</button>
<div class="dropdown-divider" v-if="folders.length"></div>
<header class="dropdown-header" v-if="folders.length">Move to...</header>
<button class="dropdown-item" @click="moveFeed(feed, null)" v-if="feed.folder_id">
---
</button>
<button class="dropdown-item"
v-if="folder.id != feed.folder_id"
v-for="folder in folders"
@click="moveFeed(feed, folder)">
<span class="icon mr-1">{% inline "folder.svg" %}</span>
{{ folder.title }}
</button>
<button class="dropdown-item" @click="moveFeedToNewFolder(feed)">
<span class="text-muted icon mr-1">{% inline "plus.svg" %}</span>
<span class="text-muted">New Folder</span>
</button>
<div class="dropdown-divider"></div>
<button class="dropdown-item text-danger"
@click.prevent="deleteFeed(feed)">
Delete
</button>
</dropdown>
</div>
</div>
</div>
</div>
<div v-else-if="settings=='shortcuts'">
<p class="cursor-default"><b>Keyboard Shortcuts</b></p>

35
src/assets/javascripts/app.js
View File

@ -181,6 +181,10 @@ var vm = new Vue({
this.refreshStats()
.then(this.refreshFeeds.bind(this))
.then(this.refreshItems.bind(this))
api.feeds.list_errors().then(function(errors) {
vm.feed_errors = errors
})
},
data: function() {
var s = app.settings
@ -244,7 +248,24 @@ var vm = new Vue({
return folders
},
feedsById: function() {
return this.feeds.reduce(function(acc, feed) { acc[feed.id] = feed; return acc }, {})
return this.feeds.reduce(function(acc, f) { acc[f.id] = f; return acc }, {})
},
foldersById: function() {
return this.folders.reduce(function(acc, f) { acc[f.id] = f; return acc }, {})
},
current: function() {
var parts = (this.feedSelected || '').split(':', 2)
var type = parts[0]
var guid = parts[1]
var folder = {}, feed = {}
if (type == 'feed')
feed = this.feedsById[guid] || {}
if (type == 'folder')
folder = this.foldersById[guid] || {}
return {type: type, feed: feed, folder: folder}
},
itemSelectedContent: function() {
if (!this.itemSelected) return ''
@ -346,6 +367,10 @@ var vm = new Vue({
acc[stat.feed_id] = stat
return acc
}, {})
api.feeds.list_errors().then(function(errors) {
vm.feed_errors = errors
})
})
},
getItemsQuery: function() {
@ -464,7 +489,10 @@ var vm = new Vue({
if (newTitle) {
api.folders.update(folder.id, {title: newTitle}).then(function() {
folder.title = newTitle
this.folders.sort(function(a, b) {
return a.title.localeCompare(b.title)
})
}.bind(this))
}
},
deleteFolder: function(folder) {
@ -587,11 +615,6 @@ var vm = new Vue({
vm.feedNewChoice = []
vm.feedNewChoiceSelected = ''
}
if (settings === 'manage') {
api.feeds.list_errors().then(function(errors) {
vm.feed_errors = errors
})
}
},
resizeFeedList: function(width) {
this.feedListWidth = Math.min(Math.max(200, width), 700)

13
src/assets/stylesheets/app.css
View File

@ -198,7 +198,6 @@ select.form-control:not([multiple]):not([size]) {
cursor: pointer;
}
.list-row:hover,
.toolbar-item:hover,
.toolbar-search:hover,
.selectgroup-label:hover,
@ -270,16 +269,6 @@ select.form-control:not([multiple]):not([size]) {
background-color: #f8f9fa;
}
.list-row {
padding-left: .5rem;
padding-right: .5rem;
margin-left: -.5rem;
margin-right: -.5rem;
border-radius: 3px;
user-select: none;
cursor: default;
}
.toolbar {
min-height: 2rem !important;
max-height: 2rem !important;
@ -471,7 +460,6 @@ a,
.theme-sepia .toolbar-item:hover,
.theme-sepia .toolbar-search:hover,
.theme-sepia .dropdown-item:hover,
.theme-sepia .list-row:hover,
.theme-sepia .toolbar-search:focus {
background-color: #e0d6ba;
}
@ -495,7 +483,6 @@ a,
.theme-night .dropdown-divider {
border-color: #1a1a1a !important;
}
.theme-night .list-row:hover,
.theme-night .selectgroup-label:hover,
.theme-night .dropdown-item:hover,
.theme-night .toolbar-item:hover,