james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-09-13 18:00:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

basic settings modal

Browse Source
This commit is contained in:
Nazar Kanaev
2020-06-26 00:59:19 +01:00
parent 064c5fca6a
commit cdf8fdf471
4 changed files with 65 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
template/static/images/settings.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-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>
Side by Side

After

Width:  |  Height:  |  Size: 1011 B

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

@@ -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

8
template/static/stylesheets/app.css
View File

@@ -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;
}