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

Merge pull request #2129 from umbraco/temp-U4-10248

Browse Source 
U4-10248 Change content and media start node pickers to use new picker layout
This commit is contained in:
Mads Rasmussen
2017-08-16 09:27:20 +02:00
committed by GitHub
parent b02b130793 26e590a260
commit fec85491b6
4 changed files with 98 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediapicker.controller.js
View File

@@ -9,6 +9,10 @@ function mediaPickerController($scope, dialogService, entityResource, $log, icon
$scope.renderModel = [];
$scope.allowRemove = true;
$scope.allowEdit = true;
$scope.sortable = false;
var dialogOptions = {
multiPicker: false,
entityType: "Media",
@@ -49,8 +53,7 @@ function mediaPickerController($scope, dialogService, entityResource, $log, icon
};
}
$scope.remove =function(index, event){
event.preventDefault();
$scope.remove =function(index){
$scope.renderModel.splice(index, 1);
};
@@ -66,8 +69,17 @@ function mediaPickerController($scope, dialogService, entityResource, $log, icon
return dialogOptions.idType === "udi" ? i.udi : i.id;
});
if (currIds.indexOf(itemId) < 0) {
item.icon = iconHelper.convertFromLegacyIcon(item.icon);
$scope.renderModel.push({ name: item.name, id: item.id, icon: item.icon, udi: item.udi });
// store the index of the new item in the renderModel collection so we can find it again
var itemRenderIndex = $scope.renderModel.length - 1;
// get and update the path for the picked node
entityResource.getUrl(item.id, dialogOptions.entityType).then(function(data){
$scope.renderModel[itemRenderIndex].path = data;
});
}
};
@@ -88,13 +100,21 @@ function mediaPickerController($scope, dialogService, entityResource, $log, icon
if (modelIds.length > 0) {
entityResource.getByIds(modelIds, dialogOptions.entityType).then(function (data) {
_.each(data, function (item, i) {
item.icon = iconHelper.convertFromLegacyIcon(item.icon);
$scope.renderModel.push({ name: item.name, id: item.id, icon: item.icon, udi: item.udi });
$scope.renderModel.push({ name: item.name, id: item.id, icon: item.icon, udi: item.udi });
// store the index of the new item in the renderModel collection so we can find it again
var itemRenderIndex = $scope.renderModel.length - 1;
// get and update the path for the picked node
entityResource.getUrl(item.id, dialogOptions.entityType).then(function(data){
$scope.renderModel[itemRenderIndex].path = data;
});
});
});
}
}
angular.module('umbraco').controller("Umbraco.PrevalueEditors.MediaPickerController",mediaPickerController);

51
src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediapicker.html
View File

@@ -1,30 +1,33 @@
<div ng-controller="Umbraco.PrevalueEditors.MediaPickerController" class="umb-editor umb-contentpicker">
<ul class="unstyled list-icons"
ng-model="renderModel">
<li ng-repeat="node in renderModel">
<div ng-model="renderModel">
<umb-node-preview
ng-repeat="node in renderModel"
icon="node.icon"
name="node.name"
published="node.published"
description="node.path"
sortable="sortable"
allow-remove="allowRemove"
allow-edit="allowEdit"
on-remove="remove($index)"
on-edit="openContentPicker()">
</umb-node-preview>
</div>
<a href="" class="hover-show pull-right"><i class="icon icon-delete red" ng-click="remove($index, $event)"></i></a>
<a ng-show="model.config.multiPicker === true || renderModel.length === 0"
class="umb-node-preview-add"
href=""
ng-click="openContentPicker()"
prevent-default>
<localize key="general_add">Add</localize>
</a>
<i class="icon {{node.icon}} hover-hide"></i>
<a href prevent-default ng-click="openContentPicker()" >{{node.name}}</a>
</li>
</ul>
<ul class="unstyled list-icons" ng-show="multipicker || renderModel.length === 0">
<li>
<i class="icon icon-add turquoise"></i>
<a href ng-click="openContentPicker()" prevent-default>
<localize key="general_add">Add</localize>
</a>
</li>
</ul>
<umb-overlay
ng-if="contentPickerOverlay.show"
model="contentPickerOverlay"
position="right"
view="contentPickerOverlay.view">
</umb-overlay>
<umb-overlay
ng-if="contentPickerOverlay.show"
model="contentPickerOverlay"
position="right"
view="contentPickerOverlay.view">
</umb-overlay>
</div>

30
src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.controller.js
View File

@@ -7,6 +7,9 @@ angular.module('umbraco')
$scope.renderModel = [];
$scope.ids = [];
$scope.allowRemove = true;
$scope.allowEdit = true;
$scope.sortable = false;
var config = {
multiPicker: false,
@@ -25,8 +28,17 @@ angular.module('umbraco')
$scope.ids = $scope.model.value.split(',');
entityResource.getByIds($scope.ids, config.entityType).then(function (data) {
_.each(data, function (item, i) {
item.icon = iconHelper.convertFromLegacyIcon(item.icon);
$scope.renderModel.push({ name: item.name, id: item.id, icon: item.icon, udi: item.udi });
$scope.renderModel.push({name: item.name, id: item.id, icon: item.icon, udi: item.udi});
// store the index of the new item in the renderModel collection so we can find it again
var itemRenderIndex = $scope.renderModel.length - 1;
// get and update the path for the picked node
entityResource.getUrl(item.id, config.entityType).then(function(data){
$scope.renderModel[itemRenderIndex].path = data;
});
});
});
}
@@ -55,7 +67,7 @@ angular.module('umbraco')
};
}
$scope.remove =function(index){
$scope.renderModel.splice(index, 1);
$scope.ids.splice(index, 1);
@@ -73,12 +85,20 @@ angular.module('umbraco')
var itemId = config.idType === "udi" ? item.udi : item.id;
if ($scope.ids.indexOf(itemId) < 0){
item.icon = iconHelper.convertFromLegacyIcon(item.icon);
$scope.ids.push(itemId);
$scope.ids.push(itemId);
$scope.renderModel.push({name: item.name, id: item.id, icon: item.icon, udi: item.udi});
$scope.model.value = trim($scope.ids.join(), ",");
}
// store the index of the new item in the renderModel collection so we can find it again
var itemRenderIndex = $scope.renderModel.length - 1;
// get and update the path for the picked node
entityResource.getUrl(item.id, config.entityType).then(function(data){
$scope.renderModel[itemRenderIndex].path = data;
});
}
};

39
src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.html
View File

@@ -1,24 +1,27 @@
<div ng-controller="Umbraco.PrevalueEditors.TreePickerController" class="umb-editor umb-contentpicker">
<ul class="unstyled list-icons"
ng-model="renderModel">
<li ng-repeat="node in renderModel">
<i class="icon icon-delete red hover-show pull-right" style="cursor:pointer;" ng-click="remove($index); $event.stopPropagation();"></i>
<div ng-model="renderModel">
<umb-node-preview
ng-repeat="node in renderModel"
icon="node.icon"
name="node.name"
published="node.published"
description="node.path"
sortable="sortable"
allow-remove="allowRemove"
allow-edit="allowEdit"
on-remove="remove($index)"
on-edit="openContentPicker()">
</umb-node-preview>
</div>
<i class="icon {{node.icon}} hover-hide"></i>
<a href prevent-default ng-click="openContentPicker()" >{{node.name}}</a>
</li>
</ul>
<ul class="unstyled list-icons" ng-show="multipicker || renderModel.length === 0">
<li>
<i class="icon icon-add turquoise"></i>
<a href ng-click="openContentPicker()" prevent-default>
<localize key="general_add">Add</localize>
</a>
</li>
</ul>
<a ng-show="model.config.multiPicker === true || renderModel.length === 0"
class="umb-node-preview-add"
href=""
ng-click="openContentPicker()"
prevent-default>
<localize key="general_add">Add</localize>
</a>
<umb-overlay
ng-if="treePickerOverlay.show"