mirror of
https://github.com/nkanaev/yarr.git
synced 2025-05-24 00:33:14 +00:00
ui tweaks
This commit is contained in:
Nazar Kanaev
parent
02ad42a52d
commit
312b4a54c1
@ -2,7 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title></title>
|
<title>yarr</title>
|
||||||
<link rel="stylesheet" href="./static/stylesheets/bootstrap.min.css">
|
<link rel="stylesheet" href="./static/stylesheets/bootstrap.min.css">
|
||||||
<link rel="stylesheet" href="./static/stylesheets/app.css">
|
<link rel="stylesheet" href="./static/stylesheets/app.css">
|
||||||
</head>
|
</head>
|
||||||
@ -128,28 +128,22 @@
|
|||||||
<div><strong>{{ folder.title || "Uncategorized" }}</strong></div>
|
<div><strong>{{ folder.title || "Uncategorized" }}</strong></div>
|
||||||
<div v-for="feed in folder.feeds" class="d-flex align-items-center">
|
<div v-for="feed in folder.feeds" class="d-flex align-items-center">
|
||||||
<div class="w-100">
|
<div class="w-100">
|
||||||
<div class="input-group input-group-sm" v-if="settingsManageEdit=='feed:'+feed.id">
|
{{ feed.title }}
|
||||||
<input type="text" class="form-control" :value="feed.title">
|
|
||||||
<div class="input-group-append">
|
|
||||||
<button class="btn btn-outline-secondary">Rename</button>
|
|
||||||
<button class="btn btn-outline-secondary" @click="settingsManageEdit=null">×</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<span v-else>
|
|
||||||
{{ feed.title }}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-shrink-0">
|
<div class="flex-shrink-0">
|
||||||
<div class="dropdown d-inline-block">
|
<div class="dropdown d-inline-block">
|
||||||
<button class="btn btn-link p-1" @click="settingsManageEdit='feed:'+feed.id">
|
|
||||||
<img src="./static/images/edit.svg">
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-link p-1" @click="settingsManageDropdown='feed:'+feed.id">
|
<button class="btn btn-link p-1" @click="settingsManageDropdown='feed:'+feed.id">
|
||||||
<img src="./static/images/folder.svg">
|
<img src="./static/images/more-vertical.svg">
|
||||||
</button>
|
</button>
|
||||||
<div class="dropdown-menu show py-0 overflow-hidden"
|
<div class="dropdown-menu menu-settings show overflow-hidden"
|
||||||
style="top: 0; left: 0; position: absolute; transform: translate3d(0, 38px, 0px);"
|
style="width: 200px; top: 0; left: 0; position: absolute; transform: translate3d(-160px, 38px, 0px);"
|
||||||
v-if="settingsManageDropdown=='feed:'+feed.id">
|
v-if="settingsManageDropdown=='feed:'+feed.id"
|
||||||
|
v-click-outside="hideSettingsMenu">
|
||||||
|
<a href="#" class="dropdown-item px-3" @click="renameFeed(feed)">
|
||||||
|
Rename
|
||||||
|
</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<h6 class="dropdown-header px-3">Move to...</h6>
|
||||||
<a href="#" class="dropdown-item px-3"
|
<a href="#" class="dropdown-item px-3"
|
||||||
@click.prevent="moveFeed(feed, null)" v-if="feed.folder_id">Uncategorized</a>
|
@click.prevent="moveFeed(feed, null)" v-if="feed.folder_id">Uncategorized</a>
|
||||||
<a href="#" class="dropdown-item px-3"
|
<a href="#" class="dropdown-item px-3"
|
||||||
@ -158,11 +152,13 @@
|
|||||||
@click.prevent="moveFeed(feed, folder)">
|
@click.prevent="moveFeed(feed, folder)">
|
||||||
{{ folder.title }}
|
{{ folder.title }}
|
||||||
</a>
|
</a>
|
||||||
|
<div class="dropdown-divider"></div>
|
||||||
|
<a href="#" class="dropdown-item px-3 text-danger"
|
||||||
|
@click="deleteFeed(feed)">
|
||||||
|
Delete
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-link p-1">
|
|
||||||
<img src="./static/images/trash-2.svg">
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -184,6 +180,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="./static/javascripts/vue.min.js"></script>
|
<script src="./static/javascripts/vue.min.js"></script>
|
||||||
|
<script src="./static/javascripts/v-click-outside.umd.js"></script>
|
||||||
<script src="./static/javascripts/app.js"></script>
|
<script src="./static/javascripts/app.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
1
template/static/images/more-vertical.svg
Normal file
1
template/static/images/more-vertical.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-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
|
||||||
|
After Width: | Height: | Size: 341 B |
@ -6,6 +6,7 @@ var FILTERS = [
|
|||||||
{'title': 'Starred', 'value': 'starred', 'icon': 'star'},
|
{'title': 'Starred', 'value': 'starred', 'icon': 'star'},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
Vue.use(window['v-click-outside'])
|
||||||
|
|
||||||
var vm = new Vue({
|
var vm = new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
@ -103,6 +104,22 @@ var vm = new Vue({
|
|||||||
is_expanded: true,
|
is_expanded: true,
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
renameFeed: function(feed) {
|
||||||
|
var newTitle = prompt('Enter new title', feed.title)
|
||||||
|
feed.title = newTitle
|
||||||
|
this.settingsManageDropdown = null
|
||||||
|
},
|
||||||
|
deleteFeed: function(feed) {
|
||||||
|
if (confirm('Are you sure you want to delete ' + feed.title + '?')) {
|
||||||
|
this.feeds = this.feeds.filter(function(f) { f.id != feed.id })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hideSettingsMenu: function() {
|
||||||
|
this.settingsManageDropdown = null
|
||||||
|
},
|
||||||
|
hideSettingsModal: function() {
|
||||||
|
this.settingsShow = false
|
||||||
|
},
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
vm.settingsShow = true
|
vm.settingsShow = true
|
||||||
|
|||||||
2
template/static/javascripts/v-click-outside.umd.js
Normal file
2
template/static/javascripts/v-click-outside.umd.js
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e["v-click-outside"]=n()}(this,function(){var e="__v-click-outside",n="undefined"!=typeof window,t="undefined"!=typeof navigator,i=n&&("ontouchstart"in window||t&&navigator.msMaxTouchPoints>0)?["touchstart"]:["click"];function o(n,t){var o=function(e){var n="function"==typeof e;if(!n&&"object"!=typeof e)throw new Error("v-click-outside: Binding value must be a function or an object");return{handler:n?e:e.handler,middleware:e.middleware||function(e){return e},events:e.events||i,isActive:!(!1===e.isActive)}}(t.value),r=o.handler,d=o.middleware;o.isActive&&(n[e]=o.events.map(function(e){return{event:e,handler:function(e){return function(e){var n=e.el,t=e.event,i=e.handler,o=e.middleware,r=t.path||t.composedPath&&t.composedPath(),d=r?r.indexOf(n)<0:!n.contains(t.target);t.target!==n&&d&&o(t)&&i(t)}({event:e,el:n,handler:r,middleware:d})}}}),n[e].forEach(function(t){var i=t.event,o=t.handler;return setTimeout(function(){n[e]&&document.documentElement.addEventListener(i,o,!1)},0)}))}function r(n){(n[e]||[]).forEach(function(e){return document.documentElement.removeEventListener(e.event,e.handler,!1)}),delete n[e]}var d=n?{bind:o,update:function(e,n){var t=n.value,i=n.oldValue;JSON.stringify(t)!==JSON.stringify(i)&&(r(e),o(e,{value:t}))},unbind:r}:{};return{install:function(e){e.directive("click-outside",d)},directive:d}});
|
||||||
|
//# sourceMappingURL=v-click-outside.umd.js.map
|
||||||
@ -74,3 +74,7 @@ body {
|
|||||||
.expanded {
|
.expanded {
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown-header {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user