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

Adjust child selector sorting (#7582)

Browse Source 
* Only add move cursor to sortable child elements

* Don't sort add button

* Add missing docs for onSort

* Change add button to use button element

* Use button element for remove button and add aria-hidden to icons

* Reset styling of button element

* Ensure add button is full width

* Remove unnecessary cursor styles since these now inherit from button element
This commit is contained in:
Bjarne Fyrstenborg
2020-02-11 20:36:42 +01:00
committed by GitHub
parent b2141b6657
commit 53ca5eec88
3 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/Umbraco.Web.UI.Client/src/common/directives/components/umbchildselector.directive.js
View File

@@ -99,13 +99,18 @@ Use this directive to render a ui component for selecting child items to a paren
@param {string} parentName (<code>binding</code>): The parent name.
@param {string} parentIcon (<code>binding</code>): The parent icon.
@param {number} parentId (<code>binding</code>): The parent id.
@param {callback} onRemove (<code>binding</code>): Callback when the remove button is clicked on an item.
@param {callback} onRemove (<code>binding</code>): Callback when removing an item.
<h3>The callback returns:</h3>
<ul>
<li><code>child</code>: The selected item.</li>
<li><code>$index</code>: The selected item index.</li>
</ul>
@param {callback} onAdd (<code>binding</code>): Callback when the add button is clicked.
@param {callback} onAdd (<code>binding</code>): Callback when adding an item.
<h3>The callback returns:</h3>
<ul>
<li><code>$event</code>: The select event.</li>
</ul>
@param {callback} onSort (<code>binding</code>): Callback when sorting an item.
<h3>The callback returns:</h3>
<ul>
<li><code>$event</code>: The select event.</li>
@@ -174,16 +179,15 @@ Use this directive to render a ui component for selecting child items to a paren
eventBindings.push(scope.$watch('parentName', function(newValue, oldValue){
if (newValue === oldValue) { return; }
if ( oldValue === undefined || newValue === undefined) { return; }
if (oldValue === undefined || newValue === undefined) { return; }
syncParentName();
}));
eventBindings.push(scope.$watch('parentIcon', function(newValue, oldValue){
if (newValue === oldValue) { return; }
if ( oldValue === undefined || newValue === undefined) { return; }
if (oldValue === undefined || newValue === undefined) { return; }
syncParentIcon();
}));
@@ -191,6 +195,7 @@ Use this directive to render a ui component for selecting child items to a paren
// sortable options for allowed child content types
scope.sortableOptions = {
axis: "y",
cancel: ".unsortable",
containment: "parent",
distance: 10,
opacity: 0.7,
@@ -199,7 +204,7 @@ Use this directive to render a ui component for selecting child items to a paren
zIndex: 6000,
update: function (e, ui) {
if(scope.onSort) {
scope.onSort();
scope.onSort();
}
}
};

24
src/Umbraco.Web.UI.Client/src/less/components/umb-child-selector.less
View File

@@ -16,23 +16,24 @@
.umb-child-selector__child.-placeholder {
border: 1px dashed @gray-8;
background: none;
cursor: pointer;
text-align: center;
justify-content: center;
color:@ui-action-type;
width: 100%;
color: @ui-action-type;
&:hover {
color:@ui-action-type-hover;
border-color:@ui-action-type-hover;
text-decoration:none;
color: @ui-action-type-hover;
border-color: @ui-action-type-hover;
text-decoration: none;
}
}
.umb-child-selector__children-container {
margin-left: 30px;
.umb-child-selector__child {
cursor: move;
}
margin-left: 30px;
.umb-child-selector__child.ui-sortable-handle {
cursor: move;
}
}
.umb-child-selector__child-description {
@@ -65,5 +66,6 @@
}
.umb-child-selector__child-remove {
cursor: pointer;
background: none;
border: none;
}

12
src/Umbraco.Web.UI.Client/src/views/components/umb-child-selector.html
View File

@@ -19,18 +19,20 @@
<div class="umb-child-selector__child" ng-repeat="selectedChild in selectedChildren">
<div class="umb-child-selector__child-description">
<div class="umb-child-selector__child-icon-holder">
<i class="umb-child-selector__child-icon {{ selectedChild.icon }}"></i>
<i class="umb-child-selector__child-icon {{selectedChild.icon}}" aria-hidden="true"></i>
</div>
<span class="umb-child-selector__child-name"> {{ selectedChild.name }}</span>
<span class="umb-child-selector__child-name">{{selectedChild.name}}</span>
</div>
<div class="umb-child-selector__child-actions">
<i class="umb-child-selector__child-remove icon-trash" ng-click="removeChild(selectedChild, $index)"></i>
<button type="button" class="umb-child-selector__child-remove" ng-click="removeChild(selectedChild, $index)">
<i class="icon-trash" aria-hidden="true"></i>
</button>
</div>
</div>
<a href="" class="umb-child-selector__child -placeholder" ng-click="addChild($event)" hotkey="alt+shift+c">
<button type="button" class="umb-child-selector__child -placeholder unsortable" ng-click="addChild($event)" hotkey="alt+shift+c">
<div class="umb-child-selector__child-name -blue"><strong><localize key="shortcuts_addChild">Add Child</localize></strong></div>
</a>
</button>
</div>