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

resizable columns

Browse Source
This commit is contained in:
Nazar Kanaev 2020-07-27 22:56:48 +01:00
parent dc91b94cfa
commit 0ed5f59f21
3 changed files with 57 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
template/index.html
View File

@ -10,7 +10,8 @@
<body> <body>
<div class="wrapper d-flex vh-100" id="app" v-cloak> <div class="wrapper d-flex vh-100" id="app" v-cloak>
<!-- feed list --> <!-- feed list -->
<div class="vh-100 overflow-auto border-right flex-shrink-0" style="width: 300px"> <div class="vh-100 position-relative overflow-auto border-right flex-shrink-0" :style="{width: feedListWidth+'px'}">
<drag :width="feedListWidth" @resize="resizeFeedList"></drag>
<div class="px-2 toolbar d-flex align-items-center mb-3"> <div class="px-2 toolbar d-flex align-items-center mb-3">
<span class="icon mx-2">{% inline "anchor.svg" %}</span> <span class="icon mx-2">{% inline "anchor.svg" %}</span>
<div class="flex-grow-1">&nbsp;</div> <div class="flex-grow-1">&nbsp;</div>
@ -119,7 +120,8 @@
</div> </div>
</div> </div>
<!-- item list --> <!-- item list -->
<div class="vh-100 d-flex flex-column border-right flex-shrink-0" style="width: 300px"> <div class="vh-100 position-relative d-flex flex-column border-right flex-shrink-0" :style="{width: itemListWidth+'px'}">
<drag :width="itemListWidth" @resize="resizeItemList"></drag>
<div class="px-2 toolbar d-flex align-items-center"> <div class="px-2 toolbar d-flex align-items-center">
<button class="toolbar-item"> <button class="toolbar-item">
<span class="icon">{% inline "search.svg" %}</span> <span class="icon">{% inline "search.svg" %}</span>

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

@ -19,6 +19,31 @@ Vue.directive('scroll', {
}, },
}) })
Vue.component('drag', {
props: ['width'],
template: '<div class="drag"></div>',
mounted: function() {
var vm = this
var startX = undefined
var initW = undefined
var onMouseMove = function(e) {
var offset = e.clientX - startX
var newWidth = initW + offset
vm.$emit('resize', newWidth)
}
var onMouseUp = function(e) {
document.removeEventListener('mousemove', onMouseMove)
document.removeEventListener('mouseup', onMouseUp)
}
this.$el.addEventListener('mousedown', function(e) {
startX = e.clientX
initW = vm.width
document.addEventListener('mousemove', onMouseMove)
document.addEventListener('mouseup', onMouseUp)
})
},
})
function dateRepr(d) { function dateRepr(d) {
var sec = (new Date().getTime() - d.getTime()) / 1000 var sec = (new Date().getTime() - d.getTime()) / 1000
if (sec < 2700) // less than 45 minutes if (sec < 2700) // less than 45 minutes
@ -60,6 +85,8 @@ var vm = new Vue({
vm.feedSelected = data.feed vm.feedSelected = data.feed
vm.filterSelected = data.filter vm.filterSelected = data.filter
vm.itemSortNewestFirst = data.sort_newest_first vm.itemSortNewestFirst = data.sort_newest_first
vm.feedListWidth = data.feed_list_width || 300
vm.itemListWidth = data.item_list_width || 300
vm.refreshItems() vm.refreshItems()
}) })
this.refreshFeeds() this.refreshFeeds()
@ -71,6 +98,7 @@ var vm = new Vue({
'folders': [], 'folders': [],
'feeds': [], 'feeds': [],
'feedSelected': null, 'feedSelected': null,
'feedListWidth': null,
'items': [], 'items': [],
'itemsPage': { 'itemsPage': {
'cur': 1, 'cur': 1,
@ -81,6 +109,7 @@ var vm = new Vue({
'itemSelectedReadability': '', 'itemSelectedReadability': '',
'itemSearch': '', 'itemSearch': '',
'itemSortNewestFirst': null, 'itemSortNewestFirst': null,
'itemListWidth': null,
'settings': 'create', 'settings': 'create',
'loading': { 'loading': {
'newfeed': false, 'newfeed': false,
@ -167,6 +196,14 @@ var vm = new Vue({
if (oldVal === null) return if (oldVal === null) return
api.settings.update({sort_newest_first: newVal}).then(this.refreshItems.bind(this)) api.settings.update({sort_newest_first: newVal}).then(this.refreshItems.bind(this))
}, },
'feedListWidth': debounce(function(newVal, oldVal) {
if (oldVal === null) return
api.settings.update({feed_list_width: newVal})
}, 1000),
'itemListWidth': debounce(function(newVal, oldVal) {
if (oldVal === null) return
api.settings.update({item_list_width: newVal})
}, 1000),
}, },
methods: { methods: {
refreshStats: function() { refreshStats: function() {
@ -368,5 +405,11 @@ var vm = new Vue({
this.settings = settings this.settings = settings
this.$bvModal.show('settings-modal') this.$bvModal.show('settings-modal')
}, },
resizeFeedList: function(width) {
this.feedListWidth = Math.min(Math.max(200, width), 700)
},
resizeItemList: function(width) {
this.itemListWidth = Math.min(Math.max(200, width), 700)
},
} }
}) })

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

@ -290,6 +290,16 @@ select.form-control:not([multiple]):not([size]) {
cursor: default; cursor: default;
} }
.drag {
position: absolute;
top: 0;
right: 0;
width: 6px;
height: 100%;
z-index: 10000;
cursor: col-resize;
}
/* content */ /* content */
.content { .content {