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; color: @ui-action-discreet-type-hover;
cursor: pointer; 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 { .umb-grid .umb-cell-content.-has-editors {
@@ -216,6 +224,13 @@
color: @ui-action-discreet-type-hover; color: @ui-action-discreet-type-hover;
text-decoration: none; text-decoration: none;
} }
&:disabled {
cursor: not-allowed;
&:hover {
color: @ui-action-discreet-type;
}
}
} }
.umb-grid .cell-tools-add.-center { .umb-grid .cell-tools-add.-center {
@@ -324,11 +339,15 @@
top: 0; top: 0;
left: 0; left: 0;
opacity: 0; opacity: 0;
cursor: pointer;
&:hover { &.-clickable {
background-color: @ui-action-type-hover; cursor: pointer;
opacity: 0.1;
transition: opacity 0.1s; &:hover {
background-color: @ui-action-type-hover;
opacity: 0.1;
transition: opacity 0.1s;
}
} }
} }
@@ -525,6 +544,10 @@
cursor: pointer; cursor: pointer;
opacity: .77; 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", tolerance: "pointer",
zIndex: 999999999999999999, zIndex: 999999999999999999,
scrollSensitivity: 100, scrollSensitivity: 100,
disabled: $scope.readonly,
cursorAt: { cursorAt: {
top: 40, top: 40,
left: 60 left: 60
@@ -120,6 +121,7 @@ angular.module("umbraco")
tolerance: "pointer", tolerance: "pointer",
zIndex: 999999999999999999, zIndex: 999999999999999999,
scrollSensitivity: 100, scrollSensitivity: 100,
disabled: $scope.readonly,
cursorAt: { cursorAt: {
top: 45, top: 45,
left: 90 left: 90
@@ -304,6 +306,8 @@ angular.module("umbraco")
}; };
$scope.showReorderButton = function () { $scope.showReorderButton = function () {
if ($scope.readonly) return false;
if ($scope.model.value && $scope.model.value.sections) { if ($scope.model.value && $scope.model.value.sections) {
for (var i = 0; $scope.model.value.sections.length > i; i++) { for (var i = 0; $scope.model.value.sections.length > i; i++) {
var section = $scope.model.value.sections[i]; var section = $scope.model.value.sections[i];
@@ -359,6 +363,7 @@ angular.module("umbraco")
// ********************************************* // *********************************************
$scope.clickRow = function (index, rows, $event) { $scope.clickRow = function (index, rows, $event) {
if ($scope.readonly) return;
$scope.currentRowWithActiveChild = null; $scope.currentRowWithActiveChild = null;
$scope.active = rows[index]; $scope.active = rows[index];
@@ -579,6 +584,7 @@ angular.module("umbraco")
// ********************************************* // *********************************************
$scope.clickCell = function (index, cells, row, $event) { $scope.clickCell = function (index, cells, row, $event) {
if ($scope.readonly) return;
$scope.currentCellWithActiveChild = null; $scope.currentCellWithActiveChild = null;
@@ -601,6 +607,7 @@ angular.module("umbraco")
// Control management functions // Control management functions
// ********************************************* // *********************************************
$scope.clickControl = function (index, controls, cell, $event) { $scope.clickControl = function (index, controls, cell, $event) {
if ($scope.readonly) return;
$scope.active = controls[index]; $scope.active = controls[index];
$scope.currentCellWithActiveChild = cell; $scope.currentCellWithActiveChild = cell;

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

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