uNesting picker as list instead of grid

This commit is contained in:
2019-09-02 02:11:27 +02:00
parent 848d546888
commit 333eb65c14
5 changed files with 136 additions and 9 deletions
@@ -118,7 +118,7 @@
padding: 4px 0;
}
.umb-modalcolumn-header h1
.umb-modalcolumn-header h1, .umb-overlay__title
{
font-weight: 700;
font-size: 15px;
@@ -172,7 +172,8 @@ input.umb-editor-header__name-input
margin-left: 220px;
}
.form-search .search-input
.form-search .search-input,
input.search-query
{
font-weight: 400;
font-size: 14px;
@@ -183,7 +184,7 @@ input.umb-editor-header__name-input
box-shadow: 0 1px 1px 0 rgba(0,0,0,.10);
}
.form-search .inner-addon [class*=" icon-"], .form-search .inner-addon [class^="icon-"]
.form-search .inner-addon [class*=" icon-"], .form-search .inner-addon [class^="icon-"], .form-search .icon
{
top: 5px;
left: auto;
@@ -357,7 +358,7 @@ input.umb-editor-header__name-input
/* NOTIFICATIONS
/* PAGINATION
/* **********************************************************
/* TODO desc
/* ********************************************************** */
@@ -578,8 +578,45 @@ un-config
}
/* data type overrides */
/* picker overlay */
.unesting-actions.umb-actions-child .icon
{
font-size: 25px;
min-width: 25px;
}
.unesting-actions.umb-actions-child .menu-label
{
margin-left: 8px;
}
.unesting-picker .form-search
{
position: relative;
}
.unesting-picker input.search-query
{
font-weight: 400;
font-size: 14px;
border-color: transparent;
border-radius: 18px;
height: 40px;
padding-top: 6px;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.10);
background: #faf8f8;
}
.unesting-picker .form-search .icon-search
{
top: 10px;
left: auto;
right: 22px;
}
/* data type overrides */
.unesting-item[unesting-alias="headline"] .unesting-text-partial[unesting-index="0"],
.unesting-item[unesting-alias="newsletterHeadline"] .unesting-text-partial[unesting-index="0"]
{
@@ -146,9 +146,10 @@ angular.module("umbraco").controller("brothers.uNesting.PropertyEditorController
$scope.overlayMenu = {
show: false,
style: {},
filter: $scope.scaffolds.length > 12 ? true : false,
filter: true, // $scope.scaffolds.length > 12 ? true : false,
orderBy: "$index",
view: "itempicker",
view: "/App_Plugins/brothers.uNesting/uNesting.picker.html",
position: 'left',
event: $event,
clickPasteItem: function (item)
{
@@ -177,8 +178,10 @@ angular.module("umbraco").controller("brothers.uNesting.PropertyEditorController
_.each($scope.scaffolds, function (scaffold)
{
$scope.overlayMenu.availableItems.push({
scaffold: scaffold,
alias: scaffold.contentTypeAlias,
name: scaffold.contentTypeName,
description: scaffold.documentType.description,
icon: iconHelper.convertFromLegacyIcon(scaffold.icon)
});
});
@@ -188,7 +191,7 @@ angular.module("umbraco").controller("brothers.uNesting.PropertyEditorController
return;
}
$scope.overlayMenu.size = $scope.overlayMenu.availableItems.length > 6 ? "medium" : "small";
$scope.overlayMenu.size = "medium"; // $scope.overlayMenu.availableItems.length > 6 ? "medium" : "small";
$scope.overlayMenu.pasteItems = [];
var availableNodesForPaste = clipboardService.retriveDataOfType("elementType", contentTypeAliases);
@@ -675,4 +678,41 @@ angular.module("umbraco").controller("brothers.uNesting.PropertyEditorController
return item['uNestingHide'] === '1';
};
}
]);
]);
angular.module("umbraco").controller("brothers.uNesting.ItemPickerOverlay", function ($scope, localizationService)
{
function onInit()
{
$scope.model.hideSubmitButton = true;
console.info($scope.model);
if (!$scope.model.title)
{
localizationService.localize("defaultdialogs_selectItem").then(function (value)
{
$scope.model.title = value;
});
}
if (!$scope.model.orderBy)
{
$scope.model.orderBy = "name";
}
}
$scope.selectItem = function (item)
{
$scope.model.selectedItem = item;
$scope.submitForm($scope.model);
};
onInit();
});
@@ -0,0 +1,48 @@
<div ng-controller="brothers.uNesting.ItemPickerOverlay" class="umb-itempicker unesting-picker">
<div class="form-search" ng-hide="model.filter === 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>
<div class="umb-overlay__section-header" ng-if="(model.pasteItems | filter:searchTerm).length > 0">
<h5><localize key="content_createFromClipboard">Paste from clipboard</localize></h5>
<button ng-if="model.clickClearPaste" ng-click="model.clickClearPaste($event)" alt="Clear clipboard for entries accepted in this context.">
<i class="icon-trash"></i>
</button>
</div>
<ul class="umb-card-grid" ng-class="{'-three-in-row': model.availableItems.length < 7, '-four-in-row': model.availableItems.length >= 7}">
<li ng-repeat="pasteItem in model.pasteItems | filter:searchTerm"
ng-click="model.clickPasteItem(pasteItem)">
<a class="umb-card-grid-item" href="" title="{{ pasteItem.name }}">
<span>
<i class="{{ pasteItem.icon }}"></i>
{{ pasteItem.name | truncate:true:36 }}
</span>
</a>
</li>
</ul>
<div class="umb-overlay__section-header" ng-if="model.pasteItems.length > 0 && (model.availableItems | filter:searchTerm).length > 0">
<h5><localize key="content_createEmpty">Create new</localize></h5>
</div>
<ul class="umb-actions umb-actions-child unesting-actions">
<li class="umb-action" ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:model.orderBy | filter:searchTerm">
<button type="button" class="umb-action-link umb-outline btn-reset" ng-click="selectItem(availableItem)">
<i class="large icon {{ availableItem.icon }}"></i>
<span class="menu-label ng-binding">
{{ availableItem.name }}
<small>{{ availableItem.description }}</small>
</span>
</button>
</li>
</ul>
</div>
+1
View File
@@ -402,6 +402,7 @@
<Content Include="App_Plugins\brothers.uNesting\uNesting.docTypePicker.html" />
<Content Include="App_Plugins\brothers.uNesting\uNesting.html" />
<Content Include="App_Plugins\brothers.uNesting\uNesting.js" />
<Content Include="App_Plugins\brothers.uNesting\uNesting.picker.html" />
<Content Include="App_Plugins\brothers.uNesting\_nc.js" />
<Content Include="App_Plugins\Cultiv.Tabify\directives\ct-tabbed-content.html" />
<Content Include="App_Plugins\Cultiv.Tabify\directives\cttabbedcontent.directive.js" />