Sort on y-axis in listview config layouts (#8422)
This commit is contained in:
Bjarne Fyrstenborg
committed by
GitHub
GitHub
parent
c89fa6fe69
commit
39da781dac
@@ -1,5 +1,5 @@
|
||||
<label class="checkbox umb-form-check umb-form-check--checkbox {{vm.cssClass}}" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
|
||||
<div class="umb-form-check__symbol">
|
||||
<span class="umb-form-check__symbol">
|
||||
<input ng-if="vm.disableDirtyCheck"
|
||||
type="checkbox"
|
||||
id="{{vm.inputId}}"
|
||||
@@ -13,29 +13,29 @@
|
||||
ng-change="vm.change()"
|
||||
no-dirty-check />
|
||||
|
||||
<input ng-if="!vm.disableDirtyCheck"
|
||||
type="checkbox"
|
||||
id="{{vm.inputId}}"
|
||||
name="{{vm.name}}"
|
||||
value="{{vm.value}}"
|
||||
class="umb-form-check__input"
|
||||
val-server-field="{{vm.serverValidationField}}"
|
||||
ng-model="vm.model"
|
||||
ng-disabled="vm.disabled"
|
||||
ng-required="vm.required"
|
||||
ng-change="vm.change()"/>
|
||||
<input ng-if="!vm.disableDirtyCheck"
|
||||
type="checkbox"
|
||||
id="{{vm.inputId}}"
|
||||
name="{{vm.name}}"
|
||||
value="{{vm.value}}"
|
||||
class="umb-form-check__input"
|
||||
val-server-field="{{vm.serverValidationField}}"
|
||||
ng-model="vm.model"
|
||||
ng-disabled="vm.disabled"
|
||||
ng-required="vm.required"
|
||||
ng-change="vm.change()"/>
|
||||
|
||||
<span class="umb-form-check__state" aria-hidden="true">
|
||||
<span class="umb-form-check__check">
|
||||
<i class="umb-form-check__icon icon-check"></i>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="umb-form-check__info" ng-transclude>
|
||||
</span>
|
||||
<span class="umb-form-check__info" ng-transclude>
|
||||
|
||||
<i ng-if="vm.iconClass.length" class="{{vm.iconClass}}" aria-hidden="true"></i>
|
||||
|
||||
<span ng-if="vm.text.length" class="umb-form-check__text">{{vm.text}}</span>
|
||||
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<label class="radio umb-form-check umb-form-check--radiobutton" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
|
||||
<div class="umb-form-check__symbol">
|
||||
<span class="umb-form-check__symbol">
|
||||
<input type="radio"
|
||||
id="{{vm.inputId}}"
|
||||
name="{{vm.name}}"
|
||||
@@ -13,8 +13,8 @@
|
||||
<span class="umb-form-check__state" aria-hidden="true">
|
||||
<span class="umb-form-check__check"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="umb-form-check__info" ng-transclude>
|
||||
</span>
|
||||
<span class="umb-form-check__info" ng-transclude>
|
||||
<span class="umb-form-check__text">{{vm.text}}</span>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
+4
-2
@@ -27,7 +27,7 @@
|
||||
<tbody ui-sortable="sortableOptions" ng-model="model.value">
|
||||
<tr ng-repeat="val in model.value">
|
||||
<td>
|
||||
<i class="icon icon-navigation handle"></i>
|
||||
<i class="icon icon-navigation handle" aria-hidden="true" aria-label="Sort"></i>
|
||||
</td>
|
||||
<td>
|
||||
<div class="list-view-layout__name flex-column content-start">
|
||||
@@ -53,7 +53,9 @@
|
||||
</ng-form>
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn-icon icon-trash" ng-click="removeField(val)" aria-label="Remove"></button>
|
||||
<button type="button" class="btn-icon" ng-click="removeField(val)" aria-label="Remove">
|
||||
<i class="icon-trash" aria-hidden="true"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
+2
-1
@@ -15,6 +15,8 @@
|
||||
vm.focusLayoutName = false;
|
||||
|
||||
vm.layoutsSortableOptions = {
|
||||
axis: "y",
|
||||
containment: "parent",
|
||||
distance: 10,
|
||||
tolerance: "pointer",
|
||||
opacity: 0.7,
|
||||
@@ -41,7 +43,6 @@
|
||||
};
|
||||
|
||||
$scope.model.value.push(layout);
|
||||
|
||||
}
|
||||
|
||||
function showPrompt(layout) {
|
||||
|
||||
+38
-32
@@ -1,47 +1,53 @@
|
||||
<div ng-controller="Umbraco.PrevalueEditors.ListViewLayoutsPreValsController as vm">
|
||||
|
||||
<div class="list-view-layouts" ui-sortable="vm.layoutsSortableOptions" ng-model="model.value">
|
||||
<div class="list-view-layouts-container">
|
||||
|
||||
<div class="list-view-layout" ng-repeat="layout in model.value">
|
||||
<div class="list-view-layouts" ui-sortable="vm.layoutsSortableOptions" ng-model="model.value">
|
||||
|
||||
<i class="icon-navigation list-view-layout__sort-handle" aria-label="Sort"></i>
|
||||
<div class="list-view-layout" ng-repeat="layout in model.value">
|
||||
|
||||
<div>
|
||||
<i class="icon-navigation list-view-layout__sort-handle" aria-hidden="true" aria-label="Sort"></i>
|
||||
|
||||
<button ng-if="layout.isSystem !== 1" type="button" ng-click="vm.openIconPicker(layout)" class="list-view-layout__icon" umb-auto-focus>
|
||||
<i class="{{ layout.icon }}"></i>
|
||||
</button>
|
||||
<div>
|
||||
|
||||
<div ng-if="layout.isSystem === 1" class="list-view-layout__icon">
|
||||
<i class="{{ layout.icon }}"></i>
|
||||
</div>
|
||||
<button ng-if="layout.isSystem !== 1" type="button" ng-click="vm.openIconPicker(layout)" class="list-view-layout__icon" umb-auto-focus>
|
||||
<i class="{{ layout.icon }}" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<div ng-if="layout.isSystem === 1" class="list-view-layout__icon">
|
||||
<i class="{{ layout.icon }}" aria-hidden="true"></i>
|
||||
</div>
|
||||
|
||||
<div class="list-view-layout__name">
|
||||
<input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.name" placeholder="Name..." class="-full-width-input" focus-when="{{ vm.focusLayoutName }}" />
|
||||
<span ng-if="layout.isSystem === 1" class="list-view-layout__name-text">{{ layout.name }}</span>
|
||||
<span ng-if="layout.isSystem === 1" class="list-view-layout__system">(system layout)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-view-layout__path">
|
||||
<input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.path" placeholder="Layout path..." class="-full-width-input" />
|
||||
</div>
|
||||
<div class="list-view-layout__name">
|
||||
<input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.name" placeholder="Name..." class="-full-width-input" focus-when="{{ vm.focusLayoutName }}" />
|
||||
<span ng-if="layout.isSystem === 1" class="list-view-layout__name-text">{{ layout.name }}</span>
|
||||
<span ng-if="layout.isSystem === 1" class="list-view-layout__system">(system layout)</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<umb-checkbox ng-if="layout.isSystem === 1" model="layout.selected" />
|
||||
<div class="list-view-layout__remove" ng-if="layout.isSystem !== 1">
|
||||
<i class="icon-trash" ng-click="vm.showPrompt(layout)"></i>
|
||||
<umb-confirm-action
|
||||
ng-if="layout.deletePrompt"
|
||||
direction="left"
|
||||
on-confirm="vm.removeLayout($index, layout)"
|
||||
on-cancel="vm.hidePrompt(layout)">
|
||||
</umb-confirm-action>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-view-layout__path">
|
||||
<input ng-if="layout.isSystem !== 1" type="text" ng-model="layout.path" placeholder="Layout path..." class="-full-width-input" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<umb-checkbox ng-if="layout.isSystem === 1" model="layout.selected"></umb-checkbox>
|
||||
|
||||
<div class="list-view-layout__remove" ng-if="layout.isSystem !== 1">
|
||||
<button type="button" class="btn-icon" ng-click="vm.showPrompt(layout)" aria-label="Remove">
|
||||
<i class="icon-trash" aria-hidden="true"></i>
|
||||
</button>
|
||||
<umb-confirm-action ng-if="layout.deletePrompt"
|
||||
direction="left"
|
||||
on-confirm="vm.removeLayout($index, layout)"
|
||||
on-cancel="vm.hidePrompt(layout)">
|
||||
</umb-confirm-action>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button type="button" class="list-view-add-layout" ng-click="vm.addLayout()">Add layout</button>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user