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

add readonly mode for grid property editor

Browse Source
This commit is contained in:
Mads Rasmussen
2022-05-04 16:40:58 +02:00
parent 3c6fa43fa8
commit b220c0e2cf
3 changed files with 50 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
View File

@@ -176,6 +176,14 @@
color: @ui-action-discreet-type-hover;
cursor: pointer;
}
&:disabled {
cursor: not-allowed;
&:hover {
border-color: @ui-action-discreet-border;
color: @ui-action-discreet-type;
}
}
}
.umb-grid .umb-cell-content.-has-editors {
@@ -216,6 +224,13 @@
color: @ui-action-discreet-type-hover;
text-decoration: none;
}
&:disabled {
cursor: not-allowed;
&:hover {
color: @ui-action-discreet-type;
}
}
}
.umb-grid .cell-tools-add.-center {
@@ -324,11 +339,15 @@
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
&:hover {
background-color: @ui-action-type-hover;
opacity: 0.1;
transition: opacity 0.1s;
&.-clickable {
cursor: pointer;
&:hover {
background-color: @ui-action-type-hover;
opacity: 0.1;
transition: opacity 0.1s;
}
}
}
@@ -525,6 +544,10 @@
cursor: pointer;
opacity: .77;
}
&:disabled {
cursor: not-allowed;
}
}

7
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
View File

@@ -48,6 +48,7 @@ angular.module("umbraco")
tolerance: "pointer",
zIndex: 999999999999999999,
scrollSensitivity: 100,
disabled: $scope.readonly,
cursorAt: {
top: 40,
left: 60
@@ -120,6 +121,7 @@ angular.module("umbraco")
tolerance: "pointer",
zIndex: 999999999999999999,
scrollSensitivity: 100,
disabled: $scope.readonly,
cursorAt: {
top: 45,
left: 90
@@ -304,6 +306,8 @@ angular.module("umbraco")
};
$scope.showReorderButton = function () {
if ($scope.readonly) return false;
if ($scope.model.value && $scope.model.value.sections) {
for (var i = 0; $scope.model.value.sections.length > i; i++) {
var section = $scope.model.value.sections[i];
@@ -359,6 +363,7 @@ angular.module("umbraco")
// *********************************************
$scope.clickRow = function (index, rows, $event) {
if ($scope.readonly) return;
$scope.currentRowWithActiveChild = null;
$scope.active = rows[index];
@@ -579,6 +584,7 @@ angular.module("umbraco")
// *********************************************
$scope.clickCell = function (index, cells, row, $event) {
if ($scope.readonly) return;
$scope.currentCellWithActiveChild = null;
@@ -601,6 +607,7 @@ angular.module("umbraco")
// Control management functions
// *********************************************
$scope.clickControl = function (index, controls, cell, $event) {
if ($scope.readonly) return;
$scope.active = controls[index];
$scope.currentCellWithActiveChild = cell;

24
src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
View File

@@ -90,7 +90,7 @@
<!-- Row tool -->
<div class="umb-tools row-tools" ng-show="(row === active || row === currentRowWithActiveChild) && !sortMode">
<div class="cell-tools-edit row-tool" ng-if="hasSettings">
<div class="cell-tools-edit row-tool" ng-if="hasSettings && !readonly">
<button type="button" class="btn-icon" ng-click="editGridItemSettings(row, 'row')" localize="title" title="@grid_settings">
<umb-icon icon="icon-settings"></umb-icon>
<span class="sr-only">
@@ -99,7 +99,7 @@
</button>
</div>
<div class="cell-tools-remove row-tool">
<div ng-if="!readonly" class="cell-tools-remove row-tool">
<button class="icon-trash btn-reset" ng-click="togglePrompt(row)" type="button"></button>
<umb-confirm-action
ng-if="row.deletePrompt"
@@ -156,7 +156,7 @@
</p>
</div>
<div class="cell-tools" ng-if="(area === active || area === currentCellWithActiveChild) && !sortMode">
<div class="cell-tools" ng-if="(area === active || area === currentCellWithActiveChild) && !sortMode && !readonly">
<button type="button" aria-haspopup="true" class="btn-icon cell-tool" ng-click="editGridItemSettings(area, 'cell')">
<umb-icon icon="icon-settings"></umb-icon>
<span class="sr-only">Open column settings</span>
@@ -166,7 +166,7 @@
<div class="umb-cell-inner" ui-sortable="sortableOptionsCell" umb-grid-hack-scope ng-model="area.controls">
<!-- Control placeholder -->
<button class="umb-cell-placeholder btn-reset" type="button" ng-if="area.controls.length === 0" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">
<button class="umb-cell-placeholder btn-reset" type="button" ng-if="area.controls.length === 0" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);" ng-disabled="readonly">
<div class="cell-tools-add -center">
<p>
<localize ng-if="!sortMode" key="grid_addElement">Add content</localize>
@@ -202,7 +202,7 @@
<div class="umb-tools" ng-if="control === active">
<div class="umb-control-tool" ng-if="control.editor.config.settings">
<div class="umb-control-tool" ng-if="control.editor.config.settings && !readonly">
<button type="button" class="umb-control-tool-icon btn-icon" ng-click="editGridItemSettings(control, 'control')">
<umb-icon icon="icon-settings"></umb-icon>
<span class="sr-only">
@@ -211,7 +211,7 @@
</button>
</div>
<div class="umb-control-tool">
<div ng-if="!readonly" class="umb-control-tool">
<button class="umb-control-tool-icon icon-trash btn-reset" ng-click="togglePrompt(control)" type="button"></button>
<umb-confirm-action ng-if="control.deletePrompt"
direction="left"
@@ -237,8 +237,14 @@
<!-- Controls repeat end -->
<!-- if area is empty tools -->
<div class="umb-grid-add-more-content" ng-if="area.controls.length > 0 && !sortMode && (area.maxItems == undefined || area.maxItems == '' || area.maxItems == 0 || area.maxItems > area.controls.length)">
<button class="cell-tools-add -bar newbtn btn-reset" type="button" ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);"><localize key="grid_addElement">Add element</localize></button>
<div ng-if="!readonly" class="umb-grid-add-more-content" ng-if="area.controls.length > 0 && !sortMode && (area.maxItems == undefined || area.maxItems == '' || area.maxItems == 0 || area.maxItems > area.controls.length)">
<button
class="cell-tools-add -bar newbtn btn-reset"
type="button"
ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);"
ng-disabled="readonly">
<localize key="grid_addElement">Add element</localize>
</button>
</div>
</div>
@@ -259,7 +265,7 @@
<!-- row sortable end -->
<!-- column tools -->
<div class="umb-add-row" ng-if="!sortMode">
<div class="umb-add-row" ng-if="!sortMode && !readonly">
<button type="button"
class="iconBox btn-reset"