Related links prop editor: first attempt at UI

This commit is contained in:
Tim Geyssens
2013-10-03 14:20:13 +02:00
parent 4ace6e10db
commit cbe566302c
2 changed files with 66 additions and 1 deletions

View File

@@ -2,4 +2,32 @@
.controller("Umbraco.Editors.RelatedLinksController",
function ($rootScope, $scope, $routeParams, contentResource, contentTypeResource, editorContextService, notificationsService) {
$scope.newCaption = '';
$scope.newLink = 'http://';
$scope.newNewWindow = false;
$scope.relatedLinks = [
{ caption: 'Google', link: "http://google.com", newWindow: false },
{ caption: 'Umbraco', link: "http://umbraco.com", newWindow: false },
{ caption: 'Nibble', link: "http://nibble.be", newWindow: false }
];
$scope.delete = function (idx) {
$scope.relatedLinks.splice($scope.relatedLinks[idx], 1);
};
$scope.add = function() {
var newLink = new function() {
this.caption = $scope.newCaption;
this.link = $scope.newLink;
this.newWindow = $scope.newNewWindow;
};
$scope.newCaption = '';
$scope.newLink = '';
$scope.newNewWindow = false;
$scope.relatedLinks.push(newLink);
};
});

View File

@@ -1,3 +1,40 @@
<div class="umb-editor umb-relatedlinks" ng-controller="Umbraco.Editors.RelatedLinksController">
<div class="row-fluid">
<table class="table table-striped">
<thead>
<tr>
<td>Caption</td>
<td>Link</td>
<td>Open in new window</td>
<td></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="link in relatedLinks">
<td>{{link.caption}}</td>
<td><a href="{{link.link}}" target="_blank">{{link.link}}</a></td>
<td>{{link.newWindow}} {{$index}}</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default" ng-click="delete($index)">Delete</button>
</div>
</td>
</tr>
<tr>
<form ng-submit="add()">
<td><input type="text" ng-model="newCaption" placeholder="Enter a new caption" required/></td>
<td><input type="text" ng-model="newLink" placeholder="Enter the link" required/></td>
<td><input type="checkbox" ng-model="newNewWindow"/> </td>
<td>
<div class="btn-group">
<input type="submit" class="btn btn-default" value="Add"/>
</div>
</td>
</form>
</tr>
</tbody>
</table>
</div>
</div>