Skip to content

Commit

Permalink
making the grid work in splitview
Browse files Browse the repository at this point in the history
  • Loading branch information
@nielslyngsoe
nielslyngsoe committed Feb 13, 2019
1 parent 0a4502a commit 988be21
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 64 deletions.
37 changes: 21 additions & 16 deletions src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,9 +128,10 @@
position: relative;
margin-bottom: 40px;
padding-top: 10px;
border: 1px solid @grayLighter;

&:hover {
background-color: @grayLighter;
border-color: @grayLight;
}

&[ng-click],
Expand Down Expand Up @@ -161,15 +162,16 @@
}

.umb-grid .umb-row .umb-cell-placeholder {
min-height: 130px;
background-color: @gray-10;
border-width: 2px;
min-height: 88px;
border-width: 1px;
border-style: dashed;
border-color: @gray-8;
border-color: @ui-action-disgrete-border;
color: @ui-action-disgrete-type;
transition: border-color 100ms linear;

&:hover {
border-color: @blueMid;
border-color: @ui-action-disgrete-border-hover;
color: @ui-action-disgrete-type-hover;
cursor: pointer;
}
}
Expand Down Expand Up @@ -207,9 +209,9 @@
}

.umb-grid .cell-tools-add {
color: @ui-action-type;
color: @ui-action-disgrete-type;
&:focus, &:hover {
color: @ui-action-type-hover;
color: @ui-action-disgrete-type-hover;
text-decoration: none;
}
}
Expand All @@ -219,16 +221,18 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: @ui-action-type;
color: @ui-action-disgrete-type;
}

.umb-grid .cell-tools-add.-bar {
display: block;
background: @gray-10;
text-align: center;
padding: 5px;
border: 1px dashed @gray-7;
border: 1px dashed @ui-action-disgrete-border;
margin: 10px;
&:focus, &:hover {
border-color: @ui-action-disgrete-border-hover;
}
}


Expand All @@ -249,7 +253,6 @@

.umb-grid .cell-tools-edit {
display: inline-block;
color: @white;
}

.umb-grid .drop-overlay {
Expand Down Expand Up @@ -412,12 +415,12 @@

// Row states
.umb-grid .umb-row.-active {
background-color: @ui-action-type;
border-color: @ui-action-type;

.umb-row-title-bar {
cursor: move;
}

/*
.row-tool,
.umb-row-title {
color: @white;
Expand All @@ -436,20 +439,21 @@
.umb-cell .umb-cell-content {
border-color: transparent;
}
*/
}


.umb-grid .umb-row.-active-child {
background-color: @gray-10;

.umb-row-title-bar {
cursor: inherit;
}

.umb-row-title {
color: @gray-3;
}

/*
.row-tool {
color: fade(@black, 23);
}
Expand All @@ -465,6 +469,7 @@
border-color: fade(@gray, 44);
}
}
*/
}


Expand Down
68 changes: 40 additions & 28 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,16 @@ angular.module("umbraco")
// Grid status variables
var placeHolder = "";
var currentForm = angularHelper.getCurrentForm($scope);


$scope.currentRowWithActiveChild = null;
$scope.currentCellWithActiveChild = null;
$scope.active = null;

$scope.currentRow = null;
$scope.currentCell = null;
$scope.currentToolsControl = null;
$scope.currentControl = null;

$scope.openRTEToolbarId = null;
$scope.hasSettings = false;
$scope.showRowConfigurations = true;
Expand Down Expand Up @@ -235,10 +240,16 @@ angular.module("umbraco")
}, 500, false);

$scope.$apply(function () {


console.log("$apply function called...")

var cell = $(e.target).scope().area;
cell.hasActiveChild = hasActiveChild(cell, cell.controls);
cell.active = false;

if(hasActiveChild(cell, cell.controls)) {
$scope.currentCellWithActiveChild = cell;
}
$scope.active = cell;

});
}

Expand Down Expand Up @@ -307,12 +318,13 @@ angular.module("umbraco")
// Row management function
// *********************************************

$scope.clickRow = function(index, rows) {
rows[index].active = true;
};

$scope.clickOutsideRow = function(index, rows) {
rows[index].active = false;
$scope.clickRow = function(index, rows, $event) {
console.log("clickRow")
//rows[index].active = true;
$scope.currentRowWithActiveChild = null;
$scope.active = rows[index];

$event.stopPropagation();
};

function getAllowedLayouts(section) {
Expand Down Expand Up @@ -359,6 +371,7 @@ angular.module("umbraco")
if (section.rows.length > 0) {
section.rows.splice($index, 1);
$scope.currentRow = null;
$scope.currentRowWithActiveChild = null;
$scope.openRTEToolbarId = null;
currentForm.$setDirty();
}
Expand Down Expand Up @@ -513,14 +526,13 @@ angular.module("umbraco")
// Area management functions
// *********************************************

$scope.clickCell = function(index, cells, row) {
cells[index].active = true;
row.hasActiveChild = true;
};

$scope.clickOutsideCell = function(index, cells, row) {
cells[index].active = false;
row.hasActiveChild = hasActiveChild(row, cells);
$scope.clickCell = function(index, cells, row, $event) {

$scope.currentCellWithActiveChild = null;

$scope.active = cells[index];
$scope.currentRowWithActiveChild = row;
$event.stopPropagation();
};

$scope.cellPreview = function (cell) {
Expand All @@ -536,14 +548,14 @@ angular.module("umbraco")
// *********************************************
// Control management functions
// *********************************************
$scope.clickControl = function (index, controls, cell) {
controls[index].active = true;
cell.hasActiveChild = true;
};

$scope.clickOutsideControl = function (index, controls, cell) {
controls[index].active = false;
cell.hasActiveChild = hasActiveChild(cell, controls);
$scope.clickControl = function (index, controls, cell, $event) {

console.log("clickControl");
$scope.active = controls[index];
$scope.currentCellWithActiveChild = cell;

$event.stopPropagation();
};

function hasActiveChild(item, children) {
Expand Down Expand Up @@ -594,8 +606,8 @@ angular.module("umbraco")
if (index === undefined) {
index = cell.controls.length;
}

newControl.active = true;
$scope.active = newControl;

//populate control
$scope.initControl(newControl, index + 1);
Expand Down
40 changes: 20 additions & 20 deletions src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,13 @@
<!-- ng-mouseleave="disableCurrentRow()" -->
<div class="umb-row"
ng-repeat="row in section.rows"
ng-click="clickRow($index, section.rows)"
ng-click="clickRow($index, section.rows, $event)"
ng-class="{
'-has-config': row.hasConfig,
'-active': row.active,
'-active-child': row.hasActiveChild}"
on-outside-click="clickOutsideRow($index, section.rows)"
bind-click-on="{{row.active}}"
'-active': row === active,
'-active-child': row === currentRowWithActiveChild}"

bind-click-on="{{row === active || row === currentRowWithActiveChild}}"
data-rowid="{{row.$uniqueId}}">

<div class="umb-row-title-bar">
Expand All @@ -89,7 +89,7 @@
</div>

<!-- Row tool -->
<div class="umb-tools row-tools" ng-show="row.active && !sortMode">
<div class="umb-tools row-tools" ng-show="(row === active || row === currentRowWithActiveChild) && !sortMode">

<div class="cell-tools-edit row-tool" ng-if="hasSettings">
<i class="icon icon-settings" title="@grid_settings" localize="title" ng-click="editGridItemSettings(row, 'row')"></i>
Expand Down Expand Up @@ -123,17 +123,17 @@
ng-style="{width: area.$percentage + '%'}"
ng-class="{
'-has-config': area.hasConfig,
'-active': area.active,
'-active-child': area.hasActiveChild}"
'-active': area === active,
'-active-child': area === currentCellWithActiveChild}"
ng-model="area.controls"
ng-click="clickCell($index, row.areas, row)"
on-outside-click="clickOutsideCell($index, row.areas, row)"
bind-click-on="{{area.active}}">
ng-click="clickCell($index, row.areas, row, $event)"

bind-click-on="{{area === active}}">

<!-- Cell -->
<div class="umb-cell-content"
ng-class="
{'-active': area.active,
{'-active': area === active,
'-has-editors': area.controls.length > 0,
'-collapsed': sortMode}">

Expand All @@ -153,7 +153,7 @@
<localize key="grid_settingsApplied" />
</div>

<div class="cell-tools" ng-if="area.active && !sortMode">
<div class="cell-tools" ng-if="(area === active || area === currentCellWithActiveChild) && !sortMode">
<div class="cell-tool" ng-click="editGridItemSettings(area, 'cell')">
<i class="icon-settings"></i>
</div>
Expand All @@ -172,14 +172,14 @@
<!-- for each control in areas -->
<div class="umb-control"
ng-repeat="control in area.controls"
ng-click="clickControl($index, area.controls, area)"
ng-class="{'-active': control.active}"
on-outside-click="clickOutsideControl($index, area.controls, area)"
bind-click-on="{{control.active}}"
ng-click="clickControl($index, area.controls, area, $event)"
ng-class="{'-active': control === active}"

bind-click-on="{{control === active}}"
umb-set-dirty-on-change="{{control.value}}"
data-itemid="{{control.$uniqueId}}">

<div class="umb-control-click-overlay" ng-show="!control.active && !sortMode"></div>
<div class="umb-control-click-overlay" ng-show="control !== active && !sortMode"></div>

<div class="umb-control-collapsed umb-control-handle" ng-show="sortMode">
{{control.editor.name}}
Expand All @@ -189,11 +189,11 @@

<div class="umb-control-bar umb-control-handle">

<div class="umb-control-title" ng-if="control.active">
<div class="umb-control-title" ng-if="control === active">
{{control.editor.name}}
</div>

<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">
<i class="umb-control-tool-icon icon-settings" ng-click="editGridItemSettings(control, 'control')"></i>
Expand Down

0 comments on commit 988be21

Please sign in to comment.