From 0ed5f59f215a1f40ae119b75fc26b565e7630856 Mon Sep 17 00:00:00 2001
From: Nazar Kanaev <nkanaev@live.com>
Date: Mon, 27 Jul 2020 22:56:48 +0100
Subject: [PATCH] resizable columns

---
 template/index.html                 |  6 ++--
 template/static/javascripts/app.js  | 43 +++++++++++++++++++++++++++++
 template/static/stylesheets/app.css | 10 +++++++
 3 files changed, 57 insertions(+), 2 deletions(-)
diff --git a/template/index.html b/template/index.html
index b5932f8..0110765 100644
--- a/template/index.html
+++ b/template/index.html
@@ -10,7 +10,8 @@
 <body>
     <div class="wrapper d-flex vh-100" id="app" v-cloak>
         <!-- 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">
                 <span class="icon mx-2">{% inline "anchor.svg" %}</span>
                 <div class="flex-grow-1">&nbsp;</div>
@@ -119,7 +120,8 @@
             </div>
         </div>
         <!-- 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">
                 <button class="toolbar-item">
                     <span class="icon">{% inline "search.svg" %}</span>
diff --git a/template/static/javascripts/app.js b/template/static/javascripts/app.js
index d8f493d..07fcc0f 100644
--- a/template/static/javascripts/app.js
+++ b/template/static/javascripts/app.js
@@ -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) {
   var sec = (new Date().getTime() - d.getTime()) / 1000
   if (sec < 2700)  // less than 45 minutes
@@ -60,6 +85,8 @@ var vm = new Vue({
       vm.feedSelected = data.feed
       vm.filterSelected = data.filter
       vm.itemSortNewestFirst = data.sort_newest_first
+      vm.feedListWidth = data.feed_list_width || 300
+      vm.itemListWidth = data.item_list_width || 300
       vm.refreshItems()
     })
     this.refreshFeeds()
@@ -71,6 +98,7 @@ var vm = new Vue({
       'folders': [],
       'feeds': [],
       'feedSelected': null,
+      'feedListWidth': null,
       'items': [],
       'itemsPage': {
         'cur': 1,
@@ -81,6 +109,7 @@ var vm = new Vue({
       'itemSelectedReadability': '',
       'itemSearch': '',
       'itemSortNewestFirst': null,
+      'itemListWidth': null,
       'settings': 'create',
       'loading': {
         'newfeed': false,
@@ -167,6 +196,14 @@ var vm = new Vue({
       if (oldVal === null) return
       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: {
     refreshStats: function() {
@@ -368,5 +405,11 @@ var vm = new Vue({
       this.settings = settings
       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)
+    },
   }
 })
diff --git a/template/static/stylesheets/app.css b/template/static/stylesheets/app.css
index be486d2..f115616 100644
--- a/template/static/stylesheets/app.css
+++ b/template/static/stylesheets/app.css
@@ -290,6 +290,16 @@ select.form-control:not([multiple]):not([size]) {
   cursor: default;
 }
 
+.drag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 6px;
+  height: 100%;
+  z-index: 10000;
+  cursor: col-resize;
+}
+
 /* content */
 
 .content {
