mirror of
https://github.com/nkanaev/yarr.git
synced 2025-05-24 00:33:14 +00:00
basic feed management ui
This commit is contained in:
Nazar Kanaev
parent
cdf8fdf471
commit
95b830ee1a
@ -95,34 +95,74 @@
|
||||
<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">×</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'">
|
||||
<label for="feed-url">URL</label>
|
||||
<input id="feed-url" type="text" class="form-control">
|
||||
<label for="feed-folder" class="mt-3">Folder</label>
|
||||
<select class="form-control" id="feed-folder">
|
||||
<option value=""></option>
|
||||
<option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option>
|
||||
</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">×</span>
|
||||
</button>
|
||||
<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>
|
||||
<select class="form-control" id="feed-folder">
|
||||
<option value=""></option>
|
||||
<option :value="folder.id" v-for="folder in folders">{{ folder.title }}</option>
|
||||
</select>
|
||||
<button class="btn btn-block btn-outline-secondary mt-3" type="button">Add</button>
|
||||
</div>
|
||||
<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
1
template/static/images/folder.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 311 B |
1
template/static/images/trash-2.svg
Normal file
1
template/static/images/trash-2.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 448 B |
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user