Skip to content

Sortable fix + style changes #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bjarnef wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Sortable fix + style changes #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf17fe6
Optimize sorting of rows.
bjarnef May 3, 2016
8427011
Change display mode of cell
bjarnef May 3, 2016
3c3227e
Modify styling
bjarnef May 4, 2016
e8157d0
Highlight textarea (multi-line input) similar to single-line input.
bjarnef May 4, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 38 additions & 3 deletions app/js/controllers/table.editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -111,8 +112,41 @@
axis: 'y',
cursor: "move",
handle: ".handle",
update: function (ev, ui) {
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("<td colspan='5'></td>");

// 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('<td colspan="' + cellCount + '"></td>').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) {

Expand Down Expand Up @@ -156,8 +190,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 () {
Expand Down
46 changes: 30 additions & 16 deletions app/less/table.editor.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,32 @@

.table-editor table {
border-collapse: separate;

/* sortable placeholder */
.sortable-placeholder {
background-color: #f5f5f5;
opacity: 0.5;
}
}

.table-editor td {
text-align: center;
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;
Expand All @@ -47,11 +44,21 @@
margin-right: 15px;
height: 20px;
text-align: center;

.icon {
cursor: pointer;
}
}

.table-editor .row-buttons {
width: 50px;
display: none;

.icon {
cursor: pointer;

&.handle { cursor: move; }
}
}

.table-editor td.row-buttons-td {
Expand Down Expand Up @@ -81,11 +88,16 @@
display: block;
}

.table-editor input[type=text] {
padding: 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;
Expand All @@ -112,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 {
Expand Down
4 changes: 2 additions & 2 deletions app/views/table.editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<i class="icon icon-navigation handle" ng-show="canSort()"></i>
</div>
</td>
<td class="row-style">
<td class="row-style" ng-show="model.config.rowStyles.length > 1">
<select ng-model="model.value.rowStylesSelected[$index]" ng-options="style.value as style.label for style in model.config.rowStyles"></select>
</td>
</tr>
Expand Down Expand Up @@ -58,7 +58,7 @@
Use last row as footer?
</label>
<label>
<input type="button" value="Clear Table" ng-click="clearTable()"/>
<input type="button" class="btn btn-default" value="Clear Table" ng-click="clearTable()"/>
</label>
</div>
</div>