james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-10-30 22:43:29 +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
Download Patch File Download Diff File Expand all files Collapse all files

60
template/index.html
View File

@@ -95,16 +95,25 @@
<div class="modal-dialog">
<div class="modal-content">
<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">
<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 class="nav-item">
<a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">Manage Feeds</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" :class="{active: settings=='import'}" @click.prevent="settings='import'">Import/Export</a>
</li>
</ul>
</div>
<div class="modal-body" v-if="settings=='new'">
<div class="modal-body">
<div v-if="settings=='create'">
<label for="feed-url">URL</label>
<input id="feed-url" type="text" class="form-control">
<label for="feed-folder" class="mt-3">Folder</label>
@@ -114,15 +123,46 @@
</select>
<button class="btn btn-block btn-outline-secondary mt-3" type="button">Add</button>
</div>
<div class="modal-body" v-if="settings=='manage'">
manage ui
</div>
<div class="modal-footer">
<button type="button"
class="close mr--3"
@click="settingsShow = false">
<span aria-hidden="true">&times;</span>
<div v-else-if="settings=='manage'">
<div v-for="folder in foldersWithFeeds">
<p><strong>{{ folder.title || "Uncategorized" }}</strong></p>
<div v-for="feed in folder.feeds">
{{ feed.title }}
<div class="dropdown d-inline-block">
<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>

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,
'settingsShow': false,
'settings': 'new'
'settings': 'manage',
'settingsManageDropdown': null,
'newFolderTitle': null,
}
},
computed: {
@@ -89,6 +91,17 @@ var vm = new Vue({
var d = new Date(timestamp_s * 1000)
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