Merge pull request #3489 from umbraco/temp7-nested-content-overlay
fixes position of nested content add item overlay
This commit is contained in:
Robert
@@ -209,26 +209,6 @@
|
||||
width: 99%;
|
||||
}
|
||||
|
||||
.usky-grid.umb-nested-content__node-type-picker {
|
||||
.cell-tools-menu {
|
||||
position: relative;
|
||||
transform: translate(-50%, -25%);
|
||||
}
|
||||
|
||||
.elements li {
|
||||
&:hover {
|
||||
i {
|
||||
color: @white !important;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
// make sure the item icons shown are in the correct color according to their doc type icon instead of the grid editor item color
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// this resolves the layout issue introduced in nested content in 7.12 with the addition of the input for link anchors
|
||||
// the attribute selector ensures the change only applies to the linkpicker overlay
|
||||
.form-horizontal .umb-nested-content--narrow [ng-controller*="Umbraco.Overlays.LinkPickerController"] .controls-row {
|
||||
|
||||
@@ -116,12 +116,6 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
|
||||
$scope.showIcons = $scope.model.config.showIcons || true;
|
||||
$scope.wideMode = $scope.model.config.hideLabel == "1";
|
||||
|
||||
$scope.overlayMenu = {
|
||||
show: false,
|
||||
style: {},
|
||||
showFilter: false
|
||||
};
|
||||
|
||||
// helper to force the current form into the dirty state
|
||||
$scope.setDirty = function () {
|
||||
if ($scope.propertyForm) {
|
||||
@@ -136,30 +130,48 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
|
||||
|
||||
$scope.currentNode = newNode;
|
||||
$scope.setDirty();
|
||||
|
||||
$scope.closeNodeTypePicker();
|
||||
};
|
||||
|
||||
$scope.openNodeTypePicker = function (event) {
|
||||
$scope.openNodeTypePicker = function ($event) {
|
||||
if ($scope.nodes.length >= $scope.maxItems) {
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.overlayMenu = {
|
||||
title: localizationService.localize('grid_insertControl'),
|
||||
show: false,
|
||||
style: {},
|
||||
filter: $scope.scaffolds.length > 15 ? true : false,
|
||||
view: "itempicker",
|
||||
event: $event,
|
||||
submit: function(model) {
|
||||
if(model && model.selectedItem) {
|
||||
$scope.addNode(model.selectedItem.alias);
|
||||
}
|
||||
$scope.overlayMenu.show = false;
|
||||
$scope.overlayMenu = null;
|
||||
},
|
||||
close: function() {
|
||||
$scope.overlayMenu.show = false;
|
||||
$scope.overlayMenu = null;
|
||||
}
|
||||
};
|
||||
|
||||
// this could be used for future limiting on node types
|
||||
$scope.overlayMenu.scaffolds = [];
|
||||
$scope.overlayMenu.availableItems = [];
|
||||
_.each($scope.scaffolds, function (scaffold) {
|
||||
$scope.overlayMenu.scaffolds.push({
|
||||
$scope.overlayMenu.availableItems.push({
|
||||
alias: scaffold.contentTypeAlias,
|
||||
name: scaffold.contentTypeName,
|
||||
icon: iconHelper.convertFromLegacyIcon(scaffold.icon)
|
||||
});
|
||||
});
|
||||
|
||||
if ($scope.overlayMenu.scaffolds.length == 0) {
|
||||
if ($scope.overlayMenu.availableItems.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ($scope.overlayMenu.scaffolds.length == 1) {
|
||||
if ($scope.overlayMenu.availableItems.length === 1) {
|
||||
// only one scaffold type - no need to display the picker
|
||||
$scope.addNode($scope.scaffolds[0].contentTypeAlias);
|
||||
return;
|
||||
@@ -168,10 +180,6 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
|
||||
$scope.overlayMenu.show = true;
|
||||
};
|
||||
|
||||
$scope.closeNodeTypePicker = function () {
|
||||
$scope.overlayMenu.show = false;
|
||||
};
|
||||
|
||||
$scope.editNode = function (idx) {
|
||||
if ($scope.currentNode && $scope.currentNode.key == $scope.nodes[idx].key) {
|
||||
$scope.currentNode = undefined;
|
||||
@@ -358,8 +366,6 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
|
||||
$scope.currentNode = $scope.nodes[0];
|
||||
}
|
||||
|
||||
$scope.overlayMenu.showFilter = $scope.scaffolds.length > 15;
|
||||
|
||||
inited = true;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,33 +42,13 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="usky-grid umb-nested-content__node-type-picker" ng-if="overlayMenu.show">
|
||||
<div class="cell-tools-menu" ng-style="overlayMenu.style" style="margin: 0;" delayed-mouseleave="closeNodeTypePicker()" on-delayed-mouseleave="closeNodeTypePicker()">
|
||||
<h5>
|
||||
<localize key="grid_insertControl" />
|
||||
</h5>
|
||||
|
||||
<div class="form-search" ng-hide="overlayMenu.showFilter === false" style="margin-bottom: 15px;">
|
||||
<i class="icon-search"></i>
|
||||
<input type="text"
|
||||
ng-model="searchTerm"
|
||||
class="umb-search-field search-query input-block-level -full-width-input"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_filter"
|
||||
umb-auto-focus
|
||||
no-dirty-check />
|
||||
</div>
|
||||
|
||||
<ul class="elements">
|
||||
<li ng-repeat="scaffold in overlayMenu.scaffolds | filter:searchTerm">
|
||||
<a ng-click="addNode(scaffold.alias)" href>
|
||||
<i class="icon {{scaffold.icon}}"></i>
|
||||
{{scaffold.name}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-form>
|
||||
|
||||
<umb-overlay
|
||||
ng-if="overlayMenu.show"
|
||||
position="target"
|
||||
view="overlayMenu.view"
|
||||
model="overlayMenu">
|
||||
</umb-overlay>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user