From bf17fe6d4de5b3f2a51fad64ebcfea795ca29e7d Mon Sep 17 00:00:00 2001 From: bjarnef Date: Wed, 4 May 2016 00:13:29 +0200 Subject: [PATCH 1/4] Optimize sorting of rows. --- app/js/controllers/table.editor.js | 45 ++++++++++++++++++++++++++---- app/less/table.editor.less | 16 +++++++++-- 2 files changed, 53 insertions(+), 8 deletions(-) diff --git a/app/js/controllers/table.editor.js b/app/js/controllers/table.editor.js index 4b53899..b3657e7 100644 --- a/app/js/controllers/table.editor.js +++ b/app/js/controllers/table.editor.js @@ -111,6 +111,38 @@ axis: 'y', cursor: "move", handle: ".handle", + cancel: '.no-drag', + containment: 'parent', + placeholder: 'sortable-placeholder', + forcePlaceholderSize: true, + items: '> tr:not(.unsortable)', + tolerance: 'pointer', + helper: function (e, ui) { + // When sorting table rows, the cells collapse. This helper fixes that: http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/ + ui.children().each(function () { + //$(this).height($(this).height()); + $(this).width($(this).width()); + }); + return ui; + }, + start: function (e, ui) { + //ui.placeholder.html(""); + + // Build a placeholder cell that spans all the cells in the row: http://stackoverflow.com/questions/25845310/jquery-ui-sortable-and-table-cell-size + var cellCount = 0; + $('td, th', ui.helper).each(function () { + // For each td or th try and get it's colspan attribute, and add that or 1 to the total + var colspan = 1; + var colspanAttr = $(this).attr('colspan'); + if (colspanAttr > 1) { + colspan = colspanAttr; + } + cellCount += colspan; + }); + + // Add the placeholder UI - note that this is the item's content, so td rather than tr - and set height of tr + ui.placeholder.html('').height(ui.item.height()); + }, update: function (ev, ui) { }, @@ -156,8 +188,9 @@ var linker = function (scope, element, attrs) { - var $rowControls = jQuery(element).find("td.row-buttons-td div"); - var $rowStyle = jQuery(element).find("td.row-style"); + var $elem = jQuery(element); + var $rowControls = $elem.find("td.row-buttons-td div"); + var $rowStyle = $elem.find("td.row-style"); var selectActive = false; $rowStyle.find("select").focus(function () { @@ -174,15 +207,15 @@ element.addClass("row-highlighted"); - if($rowStyle.find('option').length > 1) { - $rowStyle.css('visibility', 'visible'); - } + /*if($rowStyle.find('option').length > 1) { + $rowStyle.css('display', 'table-cell'); + }*/ }); element.bind('mouseout', function () { if (selectActive == false) { $rowControls.hide(); - $rowStyle.css('visibility', 'hidden'); + $rowStyle.css('display', 'none'); //$rowStyle.find('select').hide(); element.removeClass("row-highlighted"); } diff --git a/app/less/table.editor.less b/app/less/table.editor.less index c1d7b36..ebe6803 100644 --- a/app/less/table.editor.less +++ b/app/less/table.editor.less @@ -4,6 +4,12 @@ .table-editor table { border-collapse: separate; + + /* sortable placeholder */ + .sortable-placeholder { + background-color: #f5f5f5; + opacity: 0.5; + } } .table-editor td { @@ -52,6 +58,12 @@ .table-editor .row-buttons { width: 50px; display: none; + + .icon { + cursor: pointer; + + &.handle { cursor: move; } + } } .table-editor td.row-buttons-td { @@ -62,7 +74,7 @@ .table-editor .row-style { width: 100px; - visibility: hidden; + display: none; } .table-editor .row-style select { @@ -82,7 +94,7 @@ } .table-editor input[type=text] { - padding: 2px; + margin: 2px; width: 90px; } From 8427011a26faa8a8312ffac9eef2e655d0ebb1b7 Mon Sep 17 00:00:00 2001 From: bjarnef Date: Wed, 4 May 2016 01:21:21 +0200 Subject: [PATCH 2/4] Change display mode of cell --- app/js/controllers/table.editor.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/js/controllers/table.editor.js b/app/js/controllers/table.editor.js index b3657e7..9a57e93 100644 --- a/app/js/controllers/table.editor.js +++ b/app/js/controllers/table.editor.js @@ -29,6 +29,7 @@ $scope.model.config.tableStyles = parseStyleConfig($scope.model.config.tableStyles); $scope.model.config.columnStyles = parseStyleConfig($scope.model.config.columnStyles); $scope.model.config.rowStyles = parseStyleConfig($scope.model.config.rowStyles); + $scope.model.config.multiLineInputs = $scope.model.config.multiLineInputs === "1" ? true : false; //console.log($scope.model.value); @@ -207,9 +208,9 @@ element.addClass("row-highlighted"); - /*if($rowStyle.find('option').length > 1) { + if($rowStyle.find('option').length > 1) { $rowStyle.css('display', 'table-cell'); - }*/ + } }); element.bind('mouseout', function () { From 3c3227ec5a170b055b148f8ef6d42ac366a3909d Mon Sep 17 00:00:00 2001 From: bjarnef Date: Wed, 4 May 2016 23:14:23 +0200 Subject: [PATCH 3/4] Modify styling --- app/js/controllers/table.editor.js | 7 ++++--- app/less/table.editor.less | 30 +++++++++++++++--------------- app/views/table.editor.html | 4 ++-- 3 files changed, 21 insertions(+), 20 deletions(-) diff --git a/app/js/controllers/table.editor.js b/app/js/controllers/table.editor.js index 9a57e93..3e13331 100644 --- a/app/js/controllers/table.editor.js +++ b/app/js/controllers/table.editor.js @@ -145,7 +145,8 @@ ui.placeholder.html('').height(ui.item.height()); }, update: function (ev, ui) { - + //highlight the item when the position is changed + $(ui.item).effect("highlight", { color: "#2e8aea" }, 500); }, stop: function (ev, ui) { @@ -209,14 +210,14 @@ element.addClass("row-highlighted"); if($rowStyle.find('option').length > 1) { - $rowStyle.css('display', 'table-cell'); + $rowStyle.css('visibility', 'visible'); } }); element.bind('mouseout', function () { if (selectActive == false) { $rowControls.hide(); - $rowStyle.css('display', 'none'); + $rowStyle.css('visibility', 'hidden'); //$rowStyle.find('select').hide(); element.removeClass("row-highlighted"); } diff --git a/app/less/table.editor.less b/app/less/table.editor.less index ebe6803..3e3d2f9 100644 --- a/app/less/table.editor.less +++ b/app/less/table.editor.less @@ -17,28 +17,19 @@ width: 102px; border: none; line-height: normal; - padding: 0; + padding: 2px; vertical-align: middle; } -.table-editor td textarea { - width: 75px; - height: 50px; -} - -.table-editor td:first-child { - text-align: center; - width: 10px; -} - .table-editor th { width: 102px; border: none; line-height: normal; - padding: 0; + padding: 2px; text-align: center; } +.table-editor td:first-child, .table-editor th:first-child { text-align: center; width: 10px; @@ -53,6 +44,10 @@ margin-right: 15px; height: 20px; text-align: center; + + .icon { + cursor: pointer; + } } .table-editor .row-buttons { @@ -74,7 +69,7 @@ .table-editor .row-style { width: 100px; - display: none; + visibility: hidden; } .table-editor .row-style select { @@ -93,11 +88,16 @@ display: block; } -.table-editor input[type=text] { - margin: 2px; +.table-editor input[type=text], +.table-editor td textarea { + margin: 0; width: 90px; } +.table-editor td textarea { + height: 50px; +} + .table-editor .advanced-options { padding: 10px; background-color: #eee; diff --git a/app/views/table.editor.html b/app/views/table.editor.html index 9a5f39e..e743595 100644 --- a/app/views/table.editor.html +++ b/app/views/table.editor.html @@ -30,7 +30,7 @@ - + @@ -58,7 +58,7 @@ Use last row as footer? \ No newline at end of file From e8157d0a2b4592564793806c8c73ce033e20a79b Mon Sep 17 00:00:00 2001 From: bjarnef Date: Wed, 4 May 2016 23:25:04 +0200 Subject: [PATCH 4/4] Highlight textarea (multi-line input) similar to single-line input. --- app/less/table.editor.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/less/table.editor.less b/app/less/table.editor.less index 3e3d2f9..f255394 100644 --- a/app/less/table.editor.less +++ b/app/less/table.editor.less @@ -124,8 +124,10 @@ text-align: center; } -.table-editor tr.row-highlighted td.col-highlighted input { - border: 1px solid black; +.table-editor tr.row-highlighted td.col-highlighted { + input, textarea { + border: 1px solid black; + } } .table-editor .hide-visibility {