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

basic feed management ui

Browse Source
This commit is contained in:
Nazar Kanaev 2020-06-26 12:25:59 +01:00
parent cdf8fdf471
commit 95b830ee1a
4 changed files with 76 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
template/index.html
View File

@ -95,34 +95,74 @@
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="card-header px-0"> <div class="card-header px-0">
<button type="button"
class="close mr-3"
@click="settingsShow = false">
<span aria-hidden="true">&times;</span>
</button>
<ul class="nav nav-tabs card-header-tabs mx-0 px-3"> <ul class="nav nav-tabs card-header-tabs mx-0 px-3">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#" :class="{active: settings=='new'}" @click.prevent="settings='new'">New Feed</a> <a class="nav-link" href="#" :class="{active: settings=='create'}" @click.prevent="settings='create'">New Feed</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">Manage Feeds</a> <a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">Manage Feeds</a>
</li> </li>
<li class="nav-item">
<a class="nav-link" href="#" :class="{active: settings=='import'}" @click.prevent="settings='import'">Import/Export</a>
</li>
</ul> </ul>
</div> </div>
<div class="modal-body" v-if="settings=='new'"> <div class="modal-body">
<label for="feed-url">URL</label> <div v-if="settings=='create'">
<input id="feed-url" type="text" class="form-control"> <label for="feed-url">URL</label>
<label for="feed-folder" class="mt-3">Folder</label> <input id="feed-url" type="text" class="form-control">
<select class="form-control" id="feed-folder"> <label for="feed-folder" class="mt-3">Folder</label>
<option value=""></option> <select class="form-control" id="feed-folder">
<option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option> <option value=""></option>
</select> <option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option>
<button class="btn btn-block btn-outline-secondary mt-3" type="button">Add</button> </select>
</div> <button class="btn btn-block btn-outline-secondary mt-3" type="button">Add</button>
<div class="modal-body" v-if="settings=='manage'"> </div>
manage ui <div v-else-if="settings=='manage'">
</div> <div v-for="folder in foldersWithFeeds">
<div class="modal-footer"> <p><strong>{{ folder.title || "Uncategorized" }}</strong></p>
<button type="button" <div v-for="feed in folder.feeds">
class="close mr--3" {{ feed.title }}
@click="settingsShow = false">
<span aria-hidden="true">&times;</span> <div class="dropdown d-inline-block">
</button> <button class="btn btn-link dropdown-toggle" @click="settingsManageDropdown='feed:'+feed.id">
<img src="./static/images/folder.svg">
</button>
<div class="dropdown-menu show py-0 overflow-hidden"
style="top: 0; left: 0; position: absolute; transform: translate3d(0px, 38px, 0px);"
v-if="settingsManageDropdown=='feed:'+feed.id">
<a href="#" class="dropdown-item px-3"
@click.prevent="moveFeed(feed, null)" v-if="feed.folder_id">---</a>
<a href="#" class="dropdown-item px-3"
v-if="folder.id != feed.folder_id"
v-for="folder in folders"
@click.prevent="moveFeed(feed, folder)">
{{ folder.title }}
</a>
</div>
</div>
<button class="btn btn-link">
<img src="./static/images/trash-2.svg">
</button>
</div>
</div>
<div class="mt-4">
<label for="">New Folder</label>
<div class="input-group mb-3">
<input type="text" class="form-control" v-model="newFolderTitle">
<div class="input-group-append">
<button class="btn btn-outline-secondary" @click="newFolderCreate()">Add</button>
</div>
</div>
</div>
</div>
<div v-else-if="settings=='import'">
</div>
</div> </div>
</div> </div>
</div> </div>

1
template/static/images/folder.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="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 311 B

1
template/static/images/trash-2.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="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 448 B

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

@ -32,7 +32,9 @@ var vm = new Vue({
], ],
'itemSelected': null, 'itemSelected': null,
'settingsShow': false, 'settingsShow': false,
'settings': 'new' 'settings': 'manage',
'settingsManageDropdown': null,
'newFolderTitle': null,
} }
}, },
computed: { computed: {
@ -89,6 +91,17 @@ var vm = new Vue({
var d = new Date(timestamp_s * 1000) var d = new Date(timestamp_s * 1000)
return d.getDate() + '/' + d.getMonth() + '/' + d.getFullYear() return d.getDate() + '/' + d.getMonth() + '/' + d.getFullYear()
}, },
moveFeed: function(feed, folder) {
feed.folder_id = folder ? folder.id : null
this.settingsManageDropdown = null
},
newFolderCreate: function() {
this.folders.push({
id: Math.random() * 10000,
title: this.newFolderTitle,
is_expanded: true,
})
},
} }
}) })
vm.settingsShow = true vm.settingsShow = true