yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update styles + adjust sort of table row

Browse Source
This commit is contained in:
bjarnef
2016-02-03 02:29:21 +01:00
parent 741057b7d6
commit b8c7b09d25
3 changed files with 48 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/Umbraco.Web.UI.Client/src/less/property-editors.less
View File

@@ -622,13 +622,24 @@ ul.color-picker li a {
//
// Related links
// --------------------------------------------------
.umb-relatedlinks table > tr > td { word-wrap:break-word; word-break: break-all; }
.umb-relatedlinks table > tr > td { word-wrap:break-word; word-break: break-all; border-bottom: 1px solid transparent; }
.umb-relatedlinks .handle { cursor:move; }
.umb-relatedlinks table > tbody > tr.unsortable .handle { cursor:default; }
.umb-relatedlinks table td.col-sort { width: 20px; }
.umb-relatedlinks table td.col-caption { min-width: 200px; }
.umb-relatedlinks table td.col-link { min-width: 200px; }
.umb-relatedlinks table td.col-actions { min-width: 120px; }
.umb-relatedlinks table td.col-caption .control-wrapper,
.umb-relatedlinks table td.col-link .control-wrapper { display: flex; }
.umb-relatedlinks table td.col-caption .control-wrapper input[type="text"],
.umb-relatedlinks table td.col-link .control-wrapper input[type="text"] { width: auto; flex: 1; }
/* sortable placeholder */
.umb-relatedlinks .sortable-placeholder {
background-color: #efefef;
background-color: @tableBackgroundAccent;
display: table-row;
}
.umb-relatedlinks .sortable-placeholder > td {
@@ -636,8 +647,13 @@ ul.color-picker li a {
padding: 8px;
}
.umb-relatedlinks .ui-sortable-helper {
background-color: #fff;
opacity: 0.5;
display: table-row;
background-color: @white;
opacity: 0.7;
}
.umb-relatedlinks .ui-sortable-helper > td {
display: table-cell;
border-bottom: 1px solid @tableBorder;
}

8
src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js
View File

@@ -74,10 +74,6 @@
}
$scope.model.value[idx].edit = true;
};
$scope.cancelEdit = function (idx) {
$scope.model.value[idx].edit = false;
};
$scope.saveEdit = function (idx) {
$scope.model.value[idx].title = $scope.model.value[idx].caption;
@@ -199,8 +195,8 @@
cellCount += colspan;
});
// Add the placeholder UI - note that this is the item's content, so td rather than tr
ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>');
// 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());
}
};

43
src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
View File

@@ -12,21 +12,25 @@
</thead>
<tbody ui-sortable="sortableOptions">
<tr ng-repeat="link in model.value" data-link="{{link.link}}" ng-class="{ 'unsortable': model.value.length <= 1 }">
<td style="width: 20px"><i class="icon icon-navigation handle" ng-show="canSort()"></i></td>
<td>
<td class="col-sort"><i class="icon icon-navigation handle" ng-show="canSort()"></i></td>
<td class="col-caption">
<span ng-show="!link.edit">{{link.caption}}</span>
<input type="text" ng-model="link.caption" ng-show="link.edit" />
<div class="control-wrapper">
<input type="text" ng-model="link.caption" ng-show="link.edit" />
</div>
</td>
<td>
<td class="col-link">
<div ng-show="!link.edit">
<a href="{{link.link}}" target="_blank" ng-show="!link.isInternal">{{link.link}}</a>
<a href="#/content/content/edit/{{link.internal}}" target="_blank" ng-show="link.isInternal" ng-bind="link.internalName"></a>
</div>
<div ng-show="link.edit">
<div ng-show="!link.isInternal">
<input type="text" ng-model="link.link" /><br />
<localize key="or">or</localize> <a href="#" ng-click="switchLinkType($event,link)"><localize key="relatedlinks_chooseInternal">choose internal page</localize></a>
</div>
<div class="control-wrapper">
<input type="text" ng-model="link.link" />
</div>
<localize key="or">or</localize> <a href="#" ng-click="switchLinkType($event,link)"><localize key="relatedlinks_chooseInternal">choose internal page</localize></a>
</div>
<div ng-show="link.isInternal">
<span ng-bind="link.internalName"></span> <a href="#" ng-click="selectInternal($event,link)"><localize key="choose">Choose</localize></a><br />
@@ -34,30 +38,35 @@
</div>
</div>
</td>
<td>
<td class="col-newwindow">
<span ng-show="!link.edit">{{link.newWindow}}</span>
<input type="checkbox" ng-model="link.newWindow" ng-show="link.edit" />
</td>
<td>
<td class="col-actions">
<div class="btn-group" ng-show="!link.edit">
<button type="button" class="btn btn-default" ng-click="edit($index)"><localize key="edit">Edit</localize></button>
<button type="button" class="btn btn-default" ng-click="delete($index)"><localize key="delete">Delete</localize></button>
</div>
<div class="btn-group" ng-show="link.edit" style="margin-left: 0;">
<button type="button" class="btn btn-default" ng-click="saveEdit($index)"><localize key="buttons_save">Save</localize></button>
<button type="button" class="btn btn-default" ng-click="cancelEdit($index)"><localize key="general_cancel">Cancel</localize></button>
</div>
</td>
</tr>
</tbody>
<tfoot ng-show="canAdd()">
<tr>
<td></td>
<td><input type="text" ng-model="newCaption" localize="placeholder" placeholder="@relatedlinks_captionPlaceholder" val-highlight="hasError" /></td>
<td>
<td class="col-sort"></td>
<td class="col-caption">
<div class="control-wrapper">
<input type="text" ng-model="newCaption" localize="placeholder" placeholder="@relatedlinks_captionPlaceholder" val-highlight="hasError" />
</div>
</td>
<td class="col-link">
<div ng-show="addExternal">
<input type="text" ng-model="newLink" localize="placeholder" placeholder="@relatedlinks_externalLinkPlaceholder" />
<br /> <localize key="or">or</localize>
<div class="control-wrapper">
<input type="text" ng-model="newLink" localize="placeholder" placeholder="@relatedlinks_externalLinkPlaceholder" />
</div>
<localize key="or">or</localize>
<a href="#" ng-click="switch($event)"><localize key="relatedlinks_chooseInternal">choose internal page</localize></a>
</div>
@@ -66,8 +75,8 @@
<localize key="or">or</localize> <a href="#" ng-click="switch($event)"><localize key="relatedlinks_enterExternal">enter external link</localize></a>
</div>
</td>
<td><input type="checkbox" ng-model="newNewWindow" /></td>
<td>
<td class="col-newwindow"><input type="checkbox" ng-model="newNewWindow" /></td>
<td class="col-actions">
<div class="btn-group">
<button class="btn btn-default" ng-click="add($event)" ng-disabled="newCaption == '' || !canAdd()" ng-show="canAdd()"><localize key="general_add">Add</localize></button>
</div>