Improve toggle compact/horizontal scrolling view

4 files changed, 69 insertions, 54 deletions

diff --git a/assets/css/app.css b/assets/css/app.css
index 5de5b2a1..f0446f30 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -757,16 +757,29 @@ nav .active a {
 
 /* board table */
 #board-container {
-    overflow-x: scroll;
     padding-bottom: 180px; /* Space to avoid dropdown menu truncated */
 }
 
-#board td,
-#board th {
+/* Board container classes for wide/compact view */
+.board-container-wide {
+    overflow-x: scroll;
+}
+
+.board-container-compact {
+    overflow-x: hidden;
+}
+
+/* Board table column for wide/compact view */
+.board-column-wide {
     min-width: 240px;
     max-width: 240px;
 }
 
+.board-column-compact {
+    min-width: 0px;
+    max-width: 0px;
+}
+
 #board th a {
     text-decoration: none;
     color: #3366CC;
diff --git a/assets/css/src/board.css b/assets/css/src/board.css
index 21b53f57..f4aefa95 100644
--- a/assets/css/src/board.css
+++ b/assets/css/src/board.css
@@ -20,25 +20,18 @@
 
 /* board table */
 #board-container {
-	/* Will set the style from JS depending upon wide/compact view */
+    padding-bottom: 180px; /* Space to avoid dropdown menu truncated */
 }
 
 /* Board container classes for wide/compact view */
 .board-container-wide {
     overflow-x: scroll;
-    padding-bottom: 180px; /* Space to avoid dropdown menu truncated */
 }
 
 .board-container-compact {
     overflow-x: hidden;
-    padding-bottom: 180px; /* Space to avoid dropdown menu truncated */
 }
 
-#board td,
-#board th {
-    /* Will set the style from JS depending upon wide/compact view */
-	}
-
 /* Board table column for wide/compact view */
 .board-column-wide {
     min-width: 240px;
diff --git a/assets/js/app.js b/assets/js/app.js
index 5cf0fa9a..0dd38eeb 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -143,16 +143,18 @@ c.parent().addClass("form-tab-selected");e.find(".markdown").html(a);e.css("heig
 $("body").data("login-url")}}})},Init:function(){$("#board-selector").chosen({width:180});$("#board-selector").change(function(){window.location=$(this).attr("data-board-url").replace(/PROJECT_ID/g,$(this).val())});window.setInterval(Kanboard.CheckSession,6E4);Mousetrap.bindGlobal("mod+enter",function(){$("form").submit()});Mousetrap.bind("b",function(a){a.preventDefault();$("#board-selector").trigger("chosen:open")});$(".column-tooltip").tooltip({content:function(){return'<div class="markdown">'+
 $(this).attr("title")+"</div>"},position:{my:"left-20 top",at:"center bottom+9",using:function(a,c){$(this).css(a);var b=c.target.left+c.target.width/2-c.element.left-20;$("<div>").addClass("tooltip-arrow").addClass(c.vertical).addClass(0==b?"align-left":"align-right").appendTo(this)}}});$.datepicker.setDefaults($.datepicker.regional[$("body").data("js-lang")]);Kanboard.InitAfterAjax()},InitAfterAjax:function(){$(document).on("click",".popover",Kanboard.Popover);$(".form-date").datepicker({showOtherMonths:!0,
 selectOtherMonths:!0,dateFormat:"yy-mm-dd",constrainInput:!1});$("#markdown-preview").click(Kanboard.MarkdownPreview);$("#markdown-write").click(Kanboard.MarkdownWriter);$(".auto-select").focus(function(){$(this).select()});$(".dropit-submenu").hide();$(".dropdown").not(".dropit").dropit({triggerParentEl:"span"})}}}();
-Kanboard.Board=function(){function a(a){a.preventDefault();a.stopPropagation();Kanboard.Popover(a,Kanboard.InitAfterAjax)}function c(){Mousetrap.bind("n",function(){Kanboard.OpenPopover($("#board").data("task-creation-url"),Kanboard.InitAfterAjax)});Mousetrap.bind("s",function(){"expanded"===(Kanboard.GetStorageItem(d())||"expanded")?(e(),Kanboard.SetStorageItem(d(),"collapsed")):(f(),Kanboard.SetStorageItem(d(),"expanded"))})}function b(){$(".filter-expand-link").click(function(a){a.preventDefault();
+Kanboard.Board=function(){function a(a){a.preventDefault();a.stopPropagation();Kanboard.Popover(a,Kanboard.InitAfterAjax)}function c(){Mousetrap.bind("n",function(){Kanboard.OpenPopover($("#board").data("task-creation-url"),Kanboard.InitAfterAjax)});Mousetrap.bind("s",function(){"expanded"===(Kanboard.GetStorageItem(d())||"expanded")?(e(),Kanboard.SetStorageItem(d(),"collapsed")):(f(),Kanboard.SetStorageItem(d(),"expanded"))});Mousetrap.bind("c",function(){p()})}function b(){$(".filter-expand-link").click(function(a){a.preventDefault();
 f();Kanboard.SetStorageItem(d(),"expanded")});$(".filter-collapse-link").click(function(a){a.preventDefault();e();Kanboard.SetStorageItem(d(),"collapsed")});g()}function d(){return"board_stacking_"+$("#board").data("project-id")}function e(){$(".filter-collapse").hide();$(".task-board-collapsed").show();$(".filter-expand").show();$(".task-board-expanded").hide()}function f(){$(".filter-collapse").show();$(".task-board-collapsed").hide();$(".filter-expand").hide();$(".task-board-expanded").show()}
-function g(){"expanded"===(Kanboard.GetStorageItem(d())||"expanded")?f():e()}function k(){$(".column").sortable({delay:300,distance:5,connectWith:".column",placeholder:"draggable-placeholder",stop:function(a,b){n(b.item.attr("data-task-id"),b.item.parent().attr("data-column-id"),b.item.index()+1,b.item.parent().attr("data-swimlane-id"))}});$("#board").on("click",".task-board-popover",a);$("#board").on("click",".task-board",function(){window.location=$(this).data("task-url")});$(".task-board-tooltip").tooltip({track:!1,
-position:{my:"left-20 top",at:"center bottom+9",using:function(a,b){$(this).css(a);var c=b.target.left+b.target.width/2-b.element.left-20;$("<div>").addClass("tooltip-arrow").addClass(b.vertical).addClass(0==c?"align-left":"align-right").appendTo(this)}},content:function(a){if(a=$(this).attr("data-href")){var b=this;$.get(a,function p(a){$(".ui-tooltip-content:visible").html(a);a=$(".ui-tooltip:visible");a.css({top:"",left:""});a.children(".tooltip-arrow").remove();var c=$(b).tooltip("option","position");
-c.of=$(b);a.position(c);$("#tooltip-subtasks a").not(".popover").click(function(a){a.preventDefault();a.stopPropagation();$(this).hasClass("popover-subtask-restriction")?(Kanboard.OpenPopover($(this).attr("href")),$(b).tooltip("close")):$.get($(this).attr("href"),p)})});return'<i class="fa fa-refresh fa-spin fa-2x"></i>'}}}).on("mouseenter",function(){var a=this;$(this).tooltip("open");$(".ui-tooltip").on("mouseleave",function(){$(a).tooltip("close")})}).on("mouseleave focusout",function(a){a.stopImmediatePropagation();
-var b=this;setTimeout(function(){$(".ui-tooltip:hover").length||$(b).tooltip("close")},100)});var b=parseInt($("#board").attr("data-check-interval"));0<b&&(l=window.setInterval(m,1E3*b))}function n(a,b,c,d){clearInterval(l);$.ajax({cache:!1,url:$("#board").attr("data-save-url"),contentType:"application/json",type:"POST",processData:!1,data:JSON.stringify({task_id:a,column_id:b,swimlane_id:d,position:c}),success:function(a){$("#board-container").remove();$("#main").append(a);Kanboard.InitAfterAjax();
-k();h();g()}})}function m(){Kanboard.IsVisible()&&$.ajax({cache:!1,url:$("#board").attr("data-check-url"),statusCode:{200:function(a){$("#board-container").remove();$("#main").append(a);Kanboard.InitAfterAjax();clearInterval(l);k();h();g()}}})}function h(){var a=$("#form-user_id").val(),b=$("#form-category_id").val(),c=$("#more-filters option[value=filter-due-date]").is(":selected"),d=$("#more-filters option[value=filter-recent]").is(":selected"),e=$("#board").data("project-id");$("[data-task-id]").each(function(e,
-g){var k=g.getAttribute("data-owner-id"),f=g.getAttribute("data-due-date"),m=g.getAttribute("data-category-id"),h=$(g).hasClass("task-board-recent");g.style.display=k!=a&&-1!=a?"none":"block";!c||""!=f&&"0"!=f||(g.style.display="none");m!=b&&-1!=b&&(g.style.display="none");d&&!h&&(g.style.display="none")});Kanboard.SetStorageItem("board_filter_"+e+"_form-user_id",a);Kanboard.SetStorageItem("board_filter_"+e+"_form-category_id",b);Kanboard.SetStorageItem("board_filter_"+e+"_filter-due-date",~~c);Kanboard.SetStorageItem("board_filter_"+
-e+"_filter-recent",~~d)}function q(){var a=$("#board").data("project-id");$("#form-user_id").chosen({width:"180px"});$("#form-category_id").chosen({width:"200px"});$("#more-filters").chosen({width:"30%"});$(".apply-filters").change(function(a){h()});$("#form-user_id").val(Kanboard.GetStorageItem("board_filter_"+a+"_form-user_id")||-1);$("#form-user_id").trigger("chosen:updated");$("#form-category_id").val(Kanboard.GetStorageItem("board_filter_"+a+"_form-category_id")||-1);$("#form-category_id").trigger("chosen:updated");
-+Kanboard.GetStorageItem("board_filter_"+a+"_filter-due-date")&&$("#more-filters option[value=filter-due-date]").attr("selected",!0);+Kanboard.GetStorageItem("board_filter_"+a+"_filter-recent")&&$("#more-filters option[value=filter-recent]").attr("selected",!0);$("#more-filters").trigger("chosen:updated");h()}var l=null;jQuery(document).ready(function(){Kanboard.Exists("board")&&(k(),q(),b(),c())})}();
+function g(){"expanded"===(Kanboard.GetStorageItem(d())||"expanded")?f():e()}function k(){$(".column").sortable({delay:300,distance:5,connectWith:".column",placeholder:"draggable-placeholder",stop:function(a,b){q(b.item.attr("data-task-id"),b.item.parent().attr("data-column-id"),b.item.index()+1,b.item.parent().attr("data-swimlane-id"))}});$("#board").on("click",".task-board-popover",a);$("#board").on("click",".task-board",function(){window.location=$(this).data("task-url")});$(".task-board-tooltip").tooltip({track:!1,
+position:{my:"left-20 top",at:"center bottom+9",using:function(a,b){$(this).css(a);var c=b.target.left+b.target.width/2-b.element.left-20;$("<div>").addClass("tooltip-arrow").addClass(b.vertical).addClass(0==c?"align-left":"align-right").appendTo(this)}},content:function(a){if(a=$(this).attr("data-href")){var b=this;$.get(a,function r(a){$(".ui-tooltip-content:visible").html(a);a=$(".ui-tooltip:visible");a.css({top:"",left:""});a.children(".tooltip-arrow").remove();var c=$(b).tooltip("option","position");
+c.of=$(b);a.position(c);$("#tooltip-subtasks a").not(".popover").click(function(a){a.preventDefault();a.stopPropagation();$(this).hasClass("popover-subtask-restriction")?(Kanboard.OpenPopover($(this).attr("href")),$(b).tooltip("close")):$.get($(this).attr("href"),r)})});return'<i class="fa fa-refresh fa-spin fa-2x"></i>'}}}).on("mouseenter",function(){var a=this;$(this).tooltip("open");$(".ui-tooltip").on("mouseleave",function(){$(a).tooltip("close")})}).on("mouseleave focusout",function(a){a.stopImmediatePropagation();
+var b=this;setTimeout(function(){$(".ui-tooltip:hover").length||$(b).tooltip("close")},100)});var b=parseInt($("#board").attr("data-check-interval"));0<b&&(m=window.setInterval(n,1E3*b))}function q(a,b,c,d){clearInterval(m);$.ajax({cache:!1,url:$("#board").attr("data-save-url"),contentType:"application/json",type:"POST",processData:!1,data:JSON.stringify({task_id:a,column_id:b,swimlane_id:d,position:c}),success:function(a){$("#board-container").remove();$("#main").append(a);Kanboard.InitAfterAjax();
+k();h();g();l()}})}function n(){Kanboard.IsVisible()&&$.ajax({cache:!1,url:$("#board").attr("data-check-url"),statusCode:{200:function(a){$("#board-container").remove();$("#main").append(a);Kanboard.InitAfterAjax();clearInterval(m);k();h();g();l()}}})}function h(){var a=$("#form-user_id").val(),b=$("#form-category_id").val(),c=$("#more-filters option[value=filter-due-date]").is(":selected"),d=$("#more-filters option[value=filter-recent]").is(":selected"),e=$("#board").data("project-id");$("[data-task-id]").each(function(e,
+g){var k=g.getAttribute("data-owner-id"),f=g.getAttribute("data-due-date"),n=g.getAttribute("data-category-id"),h=$(g).hasClass("task-board-recent");g.style.display=k!=a&&-1!=a?"none":"block";!c||""!=f&&"0"!=f||(g.style.display="none");n!=b&&-1!=b&&(g.style.display="none");d&&!h&&(g.style.display="none")});Kanboard.SetStorageItem("board_filter_"+e+"_form-user_id",a);Kanboard.SetStorageItem("board_filter_"+e+"_form-category_id",b);Kanboard.SetStorageItem("board_filter_"+e+"_filter-due-date",~~c);Kanboard.SetStorageItem("board_filter_"+
+e+"_filter-recent",~~d)}function t(){var a=$("#board").data("project-id");$("#form-user_id").chosen({width:"180px"});$("#form-category_id").chosen({width:"200px"});$("#more-filters").chosen({width:"30%"});$(".apply-filters").change(function(a){h()});$("#form-user_id").val(Kanboard.GetStorageItem("board_filter_"+a+"_form-user_id")||-1);$("#form-user_id").trigger("chosen:updated");$("#form-category_id").val(Kanboard.GetStorageItem("board_filter_"+a+"_form-category_id")||-1);$("#form-category_id").trigger("chosen:updated");
++Kanboard.GetStorageItem("board_filter_"+a+"_filter-due-date")&&$("#more-filters option[value=filter-due-date]").attr("selected",!0);+Kanboard.GetStorageItem("board_filter_"+a+"_filter-recent")&&$("#more-filters option[value=filter-recent]").attr("selected",!0);$("#more-filters").trigger("chosen:updated");h()}function u(){jQuery(document).on("click",".filter-toggle-scrolling",function(a){a.preventDefault();p()});l()}function p(){var a=Kanboard.GetStorageItem("horizontal_scroll")||1;Kanboard.SetStorageItem("horizontal_scroll",
+0==a?1:0);l()}function l(){0==Kanboard.GetStorageItem("horizontal_scroll")?($(".filter-wide").show(),$(".filter-compact").hide(),$("#board-container").removeClass("board-container-wide").addClass("board-container-compact"),$("#board th,#board td").removeClass("board-column-wide").addClass("board-column-compact")):($(".filter-wide").hide(),$(".filter-compact").show(),$("#board-container").removeClass("board-container-compact").addClass("board-container-wide"),$("#board th,#board td").removeClass("board-column-compact").addClass("board-column-wide"))}
+var m=null;jQuery(document).ready(function(){Kanboard.Exists("board")&&(k(),t(),b(),u(),c())})}();
 Kanboard.Calendar=function(){function a(a){var b=$("#calendar").data("save-url")||$("#user-calendar").data("save-url");$.ajax({cache:!1,url:b,contentType:"application/json",type:"POST",processData:!1,data:JSON.stringify({task_id:a.id,date_due:a.start.format()})})}function c(){var a=$("#user-calendar"),b=a.data("check-url"),c={start:a.fullCalendar("getView").start.format(),end:a.fullCalendar("getView").end.format(),user_id:a.data("user-id")},d;for(d in c)b+="&"+d+"="+c[d];$.getJSON(b,function(b){a.fullCalendar("removeEvents");
 a.fullCalendar("addEventSource",b);a.fullCalendar("rerenderEvents")})}function b(a){var b=$("#calendar"),c=b.data("check-url"),d={start:b.fullCalendar("getView").start.format(),end:b.fullCalendar("getView").end.format()};jQuery.extend(d,a);for(var e in d)c+="&"+e+"="+d[e];$.getJSON(c,function(a){b.fullCalendar("removeEvents");b.fullCalendar("addEventSource",a);b.fullCalendar("rerenderEvents")})}function d(){var a=Kanboard.GetStorageItem(f);if(""!==a){var a=JSON.parse(a),c;for(c in a)$("select[name="+
 c+"]").val(a[c])}b(a||{});$(".calendar-filter").change(e)}function e(){var a={};$(".calendar-filter").each(function(){a[$(this).attr("name")]=$(this).val()});Kanboard.SetStorageItem(f,JSON.stringify(a));b(a)}var f="";jQuery(document).ready(function(){Kanboard.Exists("calendar")?(f="calendar_filters_"+$("#calendar").data("project-id"),$("#calendar").fullCalendar({lang:$("body").data("js-lang"),editable:!0,eventLimit:!0,defaultView:"month",header:{left:"prev,next today",center:"title",right:"month,agendaWeek,agendaDay"},
diff --git a/assets/js/src/board.js b/assets/js/src/board.js
index ff1054cd..7f856ce7 100644
--- a/assets/js/src/board.js
+++ b/assets/js/src/board.js
@@ -23,7 +23,7 @@ Kanboard.Board = (function() {
         Mousetrap.bind("s", function() {
             stack_toggle();
         });
-        
+
         Mousetrap.bind("c", function() {
             compactview_toggle();
         });
@@ -245,11 +245,12 @@ Kanboard.Board = (function() {
                 board_load_events();
                 filter_apply();
                 stack_show();
+                compactview_reload();
             }
         });
     }
 
-    // Check if a board have been changed by someone else
+    // Check if the board have been changed by someone else
     function board_check()
     {
         if (Kanboard.IsVisible()) {
@@ -265,6 +266,7 @@ Kanboard.Board = (function() {
                         board_load_events();
                         filter_apply();
                         stack_show();
+                        compactview_reload();
                     }
                 }
             });
@@ -278,7 +280,7 @@ Kanboard.Board = (function() {
         var selectedCategoryId = $("#form-category_id").val();
         var filterDueDate = $("#more-filters option[value=filter-due-date]").is(":selected")
         var filterRecent = $("#more-filters option[value=filter-recent]").is(":selected")
-	    var projectId = $('#board').data('project-id');
+        var projectId = $('#board').data('project-id');
 
         $("[data-task-id]").each(function(index, item) {
 
@@ -317,7 +319,7 @@ Kanboard.Board = (function() {
     // Load filter events
     function filter_load_events()
     {
-	    var projectId = $('#board').data('project-id');
+        var projectId = $('#board').data('project-id');
 
         $("#form-user_id").chosen({
             width: "180px"
@@ -352,50 +354,55 @@ Kanboard.Board = (function() {
 
         $("#more-filters").trigger("chosen:updated");
 
-    	filter_apply();
+        filter_apply();
     }
 
-    // Toggle compact view. It will try to stuff all columns in the window
-    jQuery(document).on('click', ".compactview-toggle", function(e) {
-        e.preventDefault();
-        compactview_toggle();
-    });
-    
-    function compactview_toggle() {
-	var compactview = Kanboard.GetStorageItem("compactview");
-        if (compactview == '1') {
-            Kanboard.SetStorageItem("compactview",'0');
-        } else {
-	    Kanboard.SetStorageItem("compactview",'1');
-	}
-        compactview_reload ();
+    function compactview_load_events()
+    {
+        jQuery(document).on('click', ".filter-toggle-scrolling", function(e) {
+            e.preventDefault();
+            compactview_toggle();
+        });
+
+        compactview_reload();
     }
-    
+
+    function compactview_toggle()
+    {
+        var scrolling = Kanboard.GetStorageItem("horizontal_scroll") || 1;
+        Kanboard.SetStorageItem("horizontal_scroll", scrolling == 0 ? 1 : 0);
+        compactview_reload();
+    }
+
     function compactview_reload()
     {
-	if (Kanboard.GetStorageItem("compactview") == '1') {
-	    $("#board-container").removeClass ("board-container-wide").addClass ("board-container-compact");
-	    $("#board th,#board td").removeClass ("board-column-wide").addClass ("board-column-compact");
-	} else {
-	    $("#board-container").removeClass ("board-container-compact").addClass ("board-container-wide");
-	    $("#board th,#board td").removeClass ("board-column-compact").addClass ("board-column-wide");
-	}
+        if (Kanboard.GetStorageItem("horizontal_scroll") == 0) {
+
+            $(".filter-wide").show();
+            $(".filter-compact").hide();
+
+            $("#board-container").removeClass("board-container-wide").addClass("board-container-compact");
+            $("#board th,#board td").removeClass("board-column-wide").addClass("board-column-compact");
+        }
+        else {
+
+            $(".filter-wide").hide();
+            $(".filter-compact").show();
+
+            $("#board-container").removeClass("board-container-compact").addClass("board-container-wide");
+            $("#board th,#board td").removeClass("board-column-compact").addClass("board-column-wide");
+        }
     }
-    
+
     jQuery(document).ready(function() {
 
         if (Kanboard.Exists("board")) {
             board_load_events();
             filter_load_events();
             stack_load_events();
+            compactview_load_events();
             keyboard_shortcuts();
-            compactview_reload();
         }
     });
-    
-    // Reload the compactview states (shown/hidden) after an ajax call
-    jQuery(document).ajaxComplete(function() {
-	compactview_reload();
-    });
 
 })();