mirror of
https://github.com/nkanaev/yarr.git
synced 2025-05-24 00:33:14 +00:00
basic settings modal
This commit is contained in:
Nazar Kanaev
parent
064c5fca6a
commit
cdf8fdf471
@ -13,7 +13,7 @@
|
||||
<div class="mb-5">
|
||||
<label class="nav-select d-block mb-1" v-for="filter in filters">
|
||||
<input type="radio" name="filter" :value="filter.value" v-model="filterSelected">
|
||||
<div class="nav-item d-flex align-items-center w-100">
|
||||
<div class="menu-item d-flex align-items-center w-100">
|
||||
<img :src="'./static/images/' + filter.icon + '.svg'" alt="" class="nav-icon">
|
||||
<span class="flex-fill text-left text-truncate">{{filter.title}}</span>
|
||||
<span class="counter text-right"></span>
|
||||
@ -23,7 +23,7 @@
|
||||
<div>
|
||||
<label class="nav-select d-block mb-1">
|
||||
<input type="radio" name="feed" :value="null" v-model="feedSelected">
|
||||
<div class="nav-item d-flex align-items-center w-100">
|
||||
<div class="menu-item d-flex align-items-center w-100">
|
||||
<img src="./static/images/layers.svg" alt="" class="nav-icon">
|
||||
<span class="flex-fill text-left text-truncate">All Feeds</span>
|
||||
<span class="counter text-right"></span>
|
||||
@ -32,7 +32,7 @@
|
||||
<div v-for="folder in foldersWithFeeds">
|
||||
<label class="nav-select d-block mb-1">
|
||||
<input type="radio" name="feed" :value="'folder:'+folder.id" v-model="feedSelected">
|
||||
<div class="nav-item d-flex align-items-center w-100" v-if="folder.id">
|
||||
<div class="menu-item d-flex align-items-center w-100" v-if="folder.id">
|
||||
<img src="./static/images/chevron-right.svg"
|
||||
class="nav-icon"
|
||||
:class="{expanded: folder.is_expanded}"
|
||||
@ -45,7 +45,7 @@
|
||||
<label class="nav-select d-block mb-1"
|
||||
v-for="feed in folder.feeds">
|
||||
<input type="radio" name="feed" :value="'feed:'+feed.id" v-model="feedSelected">
|
||||
<div class="nav-item d-flex align-items-center w-100">
|
||||
<div class="menu-item d-flex align-items-center w-100">
|
||||
<img src="./static/images/rss.svg" alt="" class="nav-icon">
|
||||
<span class="flex-fill text-left text-truncate">{{ feed.title }}</span>
|
||||
<span class="counter text-right"></span>
|
||||
@ -55,12 +55,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-link" @click="settingsShow = true">
|
||||
<img src="./static/images/settings.svg" alt="">
|
||||
</button>
|
||||
</div>
|
||||
<div class="vh-100 overflow-auto border-right flex-shrink-0" style="width: 300px">
|
||||
<div class="my-2 mx-2">
|
||||
<label class="nav-select mb-1" v-for="item in items" :class="{'text-muted': item.status === 'read'}">
|
||||
<input type="radio" name="item" :value="item.id" v-model="itemSelected">
|
||||
<div class="nav-item p-2">
|
||||
<div class="menu-item p-2">
|
||||
<div class="d-flex flex-column ml-4">
|
||||
<div style="line-height: 1" class="d-flex">
|
||||
<img src="./static/images/circle-full.svg" class="nav-icon ml-n4 mr-2" v-if="item.status === 'unread'">
|
||||
@ -88,6 +91,42 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal" :class="{show: settingsShow, 'd-block': settingsShow}" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="card-header px-0">
|
||||
<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>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" :class="{active: settings=='manage'}" @click.prevent="settings='manage'">Manage Feeds</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./static/javascripts/vue.min.js"></script>
|
||||
<script src="./static/javascripts/app.js"></script>
|
||||
|
||||
1
template/static/images/settings.svg
Normal file
1
template/static/images/settings.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-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1011 B |
@ -7,7 +7,7 @@ var FILTERS = [
|
||||
]
|
||||
|
||||
|
||||
new Vue({
|
||||
var vm = new Vue({
|
||||
el: '#app',
|
||||
data: function() {
|
||||
return {
|
||||
@ -31,6 +31,8 @@ new Vue({
|
||||
{'id': '789', 'title': 'Marques Brownlee: ‘Reflecting on the Color of My Skin’', 'status': 'read', 'feed_id': 2, 'date': 1592250298},
|
||||
],
|
||||
'itemSelected': null,
|
||||
'settingsShow': false,
|
||||
'settings': 'new'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -66,6 +68,18 @@ new Vue({
|
||||
'itemSelected': function(newVal, oldVal) {
|
||||
this.itemSelectedDetails = this.itemsById[newVal]
|
||||
},
|
||||
'settingsShow': function(newVal) {
|
||||
if (newVal === true) {
|
||||
var vm = this
|
||||
var backdrop = document.createElement('div')
|
||||
backdrop.classList.add('modal-backdrop', 'fade', 'show')
|
||||
document.body.classList.add('modal-open')
|
||||
document.body.appendChild(backdrop)
|
||||
} else {
|
||||
document.body.classList.remove('modal-open')
|
||||
document.body.querySelector('.modal-backdrop').remove()
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleFolderExpanded: function(folder) {
|
||||
@ -77,3 +91,4 @@ new Vue({
|
||||
},
|
||||
}
|
||||
})
|
||||
vm.settingsShow = true
|
||||
|
||||
@ -25,11 +25,11 @@
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.menu-item {
|
||||
padding: .375rem .75rem;
|
||||
}
|
||||
|
||||
.nav-item, .feed-item {
|
||||
.menu-item, .feed-item {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@ -44,12 +44,12 @@
|
||||
top: 0; left: 0;
|
||||
}
|
||||
|
||||
.nav-item:hover, .feed-item:hover {
|
||||
.menu-item:hover, .feed-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.feed-item:active, .nav-select input:checked + .nav-item {
|
||||
.feed-item:active, .nav-select input:checked + .menu-item {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user