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

Merge pull request #2855 from umbraco/temp7-156

Browse Source 
fixes: 156: Update nested content css/markup so it doesn't collide with the old package
This commit is contained in:
Warren Buckley
2018-08-15 14:03:47 +01:00
committed by GitHub
parent 6c0d14e0f4 8ce93055ef
commit 1dbf509020
5 changed files with 86 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/Umbraco.Web.UI.Client/src/less/components/umb-nested-content.less
View File

@@ -1,16 +1,13 @@
.nested-content
{
.umb-nested-content {
text-align: center;
}
.nested-content--not-supported
{
.umb-nested-content--not-supported {
opacity: 0.3;
pointer-events: none;
}
.nested-content-overlay
{
.umb-nested-content-overlay {
position: absolute;
top: 0;
left: 0;
@@ -19,47 +16,39 @@
z-index: 1000;
}
.nested-content__item
{
.umb-nested-content__item {
position: relative;
text-align: left;
border-top: solid 1px transparent;
background: white;
background: @white;
}
.nested-content__item--active:not(.nested-content__item--single)
{
background: #f8f8f8;
.umb-nested-content__item--active:not(.umb-nested-content__item--single) {
background: @gray-10;
}
.nested-content__item.ui-sortable-placeholder
{
background: #f8f8f8;
border: 1px dashed #d9d9d9;
.umb-nested-content__item.ui-sortable-placeholder {
background: @gray-10;
border: 1px dashed @gray-8;
visibility: visible !important;
height: 55px;
margin-top: -1px;
}
.nested-content__item--single > .nested-content__content
{
.umb-nested-content__item--single > .umb-nested-content__content {
border: 0;
}
.nested-content__item--single > .nested-content__content > .umb-pane
{
.umb-nested-content__item--single > .umb-nested-content__content > .umb-pane {
margin: 0;
}
.nested-content__header-bar
{
.umb-nested-content__header-bar {
padding: 15px 20px;
border-bottom: 1px dashed #e0e0e0;
border-bottom: 1px dashed @gray-8;
text-align: right;
cursor: pointer;
background-color: white;
background-color: @white;
-moz-user-select: none;
-khtml-user-select: none;
@@ -67,24 +56,21 @@
-o-user-select: none;
}
.nested-content__heading {
.umb-nested-content__heading {
line-height: 20px;
position: relative;
&.-with-icon
{
&.-with-icon {
padding-left: 20px;
}
i
{
color: #999; /* same icon color as the icons in the item type picker */
i {
color: @gray-2;
position: absolute;
left: 0;
}
.nested-content__item-name
{
.umb-nested-content__item-name {
max-height: 20px;
text-align: left;
white-space: nowrap;
@@ -94,22 +80,16 @@
}
}
.nested-content__icons
{
.umb-nested-content__icons {
opacity: 0;
transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-webkit-transition: opacity .15s ease-in-out;
position: absolute;
right: 0px;
top: 2px;
background-color: white;
background-color: @white;
padding: 5px;
&:before
{
&:before {
content: ' ';
position: absolute;
display: block;
@@ -117,126 +97,118 @@
left: -30px;
top: 0;
bottom: 0;
background: -webkit-linear-gradient(90deg, rgba(255,255,255,0), white);
background: -moz-linear-gradient(90deg, rgba(255,255,255,0), white);
background: linear-gradient(90deg, rgba(255,255,255,0), white);
}
}
.nested-content__header-bar:hover .nested-content__icons,
.nested-content__item--active > .nested-content__header-bar .nested-content__icons
{
.umb-nested-content__header-bar:hover .umb-nested-content__icons,
.umb-nested-content__item--active > .umb-nested-content__header-bar .umb-nested-content__icons {
opacity: 1;
}
.nested-content__icon,
.nested-content__icon.nested-content__icon--disabled:hover
{
.umb-nested-content__icon,
.umb-nested-content__icon.umb-nested-content__icon--disabled:hover {
display: inline-block;
padding: 4px 6px;
margin: 2px;
cursor: pointer;
background: #fff;
border: 1px solid #b6b6b6;
background: @white;
border: 1px solid @gray-7;
border-radius: 200px;
text-decoration: none !important;
}
.nested-content__icon:hover,
.nested-content__icon--active
.umb-nested-content__icon:hover,
.umb-nested-content__icon--active
{
color: white;
background: #2e8aea;
border-color: #2e8aea;
color: @white;
background: @turquoise-d1;
border-color: @turquoise-d1;
text-decoration: none;
}
.nested-content__icon .icon,
.nested-content__icon.nested-content__icon--disabled:hover .icon
{
.umb-nested-content__icon .icon,
.umb-nested-content__icon.umb-nested-content__icon--disabled:hover .icon {
display: block;
font-size: 16px !important;
color: #5f5f5f;
color: @gray-3;
}
.nested-content__icon:hover .icon,
.nested-content__icon--active .icon
{
color: white;
.umb-nested-content__icon:hover .icon,
.umb-nested-content__icon--active .icon {
color: @white;
}
.nested-content__icon--disabled
{
.umb-nested-content__icon--disabled {
opacity: 0.3;
}
.nested-content__footer-bar
{
.umb-nested-content__footer-bar {
text-align: center;
padding-top: 20px;
}
.nested-content__content
{
border-bottom: 1px dashed #e0e0e0;
.umb-nested-content__content {
border-bottom: 1px dashed @gray-8;
}
.nested-content__content .umb-control-group {
.umb-nested-content__content .umb-control-group {
padding-bottom: 0;
}
.nested-content__item.ui-sortable-helper .nested-content__content
{
.umb-nested-content__item.ui-sortable-helper .umb-nested-content__content {
display: none !important;
}
.nested-content__help-text
{
.umb-nested-content__help-text {
display: inline-block;
padding: 10px 20px 10px 20px;
clear: both;
font-size: 14px;
color: #555;
background: #f8f8f8;
color: @gray-3;
background: @gray-10;
border-radius: 15px;
}
.nested-content__doctypepicker table input, .nested-content__doctypepicker table select {
.umb-nested-content__doctypepicker table input,
.umb-nested-content__doctypepicker table select {
width: 100%;
padding-right: 0;
}
.nested-content__doctypepicker table td.icon-navigation, .nested-content__doctypepicker i.nested-content__help-icon {
.umb-nested-content__doctypepicker table td.icon-navigation,
.umb-nested-content__doctypepicker i.umb-nested-content__help-icon {
vertical-align: middle;
color: #CCC;
color: @gray-7;
}
.nested-content__doctypepicker table td.icon-navigation:hover, .nested-content__doctypepicker i.nested-content__help-icon:hover {
color: #343434;
.umb-nested-content__doctypepicker table td.icon-navigation:hover,
.umb-nested-content__doctypepicker i.umb-nested-content__help-icon:hover {
color: @gray-2;
}
.nested-content__doctypepicker i.nested-content__help-icon {
.umb-nested-content__doctypepicker i.umb-nested-content__help-icon {
margin-left: 10px;
}
.form-horizontal .nested-content--narrow .controls-row
.form-horizontal .umb-nested-content--narrow .controls-row
{
margin-left: 40% !important;
}
.form-horizontal .nested-content--narrow .controls-row .umb-textstring,
.form-horizontal .nested-content--narrow .controls-row .umb-textarea
.form-horizontal .umb-nested-content--narrow .controls-row .umb-textstring,
.form-horizontal .umb-nested-content--narrow .controls-row .umb-textarea
{
width: 95%;
}
.form-horizontal .nested-content--narrow .controls-row .umb-dropdown {
.form-horizontal .umb-nested-content--narrow .controls-row .umb-dropdown {
width: 99%;
}
.usky-grid.nested-content__node-type-picker .cell-tools-menu {
.usky-grid.umb-nested-content__node-type-picker .cell-tools-menu {
position: relative;
transform: translate(-50%, -25%);
}

6
src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js
View File

@@ -229,10 +229,10 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
$scope.sortableOptions = {
axis: 'y',
cursor: "move",
handle: ".nested-content__icon--move",
handle: ".umb-nested-content__icon--move",
start: function (ev, ui) {
// Yea, yea, we shouldn't modify the dom, sue me
$("#nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
$("#umb-nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
tinymce.execCommand('mceRemoveEditor', false, $(this).attr('id'));
$(this).css("visibility", "hidden");
});
@@ -244,7 +244,7 @@ angular.module("umbraco").controller("Umbraco.PropertyEditors.NestedContent.Prop
$scope.setDirty();
},
stop: function (ev, ui) {
$("#nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
$("#umb-nested-content--" + $scope.model.id + " .umb-rte textarea").each(function () {
tinymce.execCommand('mceAddEditor', true, $(this).attr('id'));
$(this).css("visibility", "visible");
});

6
src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.doctypepicker.html
View File

@@ -1,4 +1,4 @@
<div id="{{model.alias}}" class="nested-content__doctypepicker" ng-controller="Umbraco.PropertyEditors.NestedContent.DocTypePickerController">
<div id="{{model.alias}}" class="umb-nested-content__doctypepicker" ng-controller="Umbraco.PropertyEditors.NestedContent.DocTypePickerController">
<div>
<table class="table table-striped">
<thead>
@@ -45,11 +45,11 @@
<a class="btn" ng-click="add()">
<localize key="general_add">Add</localize>
</a>
<i class="icon icon-help-alt medium nested-content__help-icon" ng-click="showHelpText = !showHelpText"></i>
<i class="icon icon-help-alt medium umb-nested-content__help-icon" ng-click="showHelpText = !showHelpText"></i>
</div>
</div>
<br/>
<div class="nested-content__help-text" ng-show="showHelpText">
<div class="umb-nested-content__help-text" ng-show="showHelpText">
<p>
<b><localize key="editcontenttype_tab">Tab</localize>:</b><br/>
Select the tab who's properties should be displayed. If left blank, the first tab on the doc type will be used.

4
src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.editor.html
View File

@@ -1,11 +1,11 @@
<div class="umb-pane">
<div ng-repeat="property in tab.properties" style="position: relative;">
<umb-property property="property" ng-class="{'nested-content--not-supported': property.notSupported}">
<umb-property property="property" ng-class="{'umb-nested-content--not-supported': property.notSupported}">
<umb-editor model="property"></umb-editor>
</umb-property>
<div ng-if="property.notSupported" class="nested-content-overlay"></div>
<div ng-if="property.notSupported" class="umb-nested-content-overlay"></div>
<p ng-if="property.notSupported">{{property.notSupportedMessage}}</p>

30
src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.html
View File

@@ -1,48 +1,48 @@
<div id="nested-content--{{model.id}}" class="nested-content"
<div id="umb-nested-content--{{model.id}}" class="umb-nested-content"
ng-controller="Umbraco.PropertyEditors.NestedContent.PropertyEditorController"
ng-class="{'nested-content--narrow':!wideMode, 'nested-content--wide':wideMode}">
ng-class="{'umb-nested-content--narrow':!wideMode, 'umb-nested-content--wide':wideMode}">
<ng-form>
<div class="nested-content__items" ng-hide="nodes.length == 0" ui-sortable="sortableOptions" ng-model="nodes">
<div class="umb-nested-content__items" ng-hide="nodes.length == 0" ui-sortable="sortableOptions" ng-model="nodes">
<div class="nested-content__item" ng-repeat="node in nodes" ng-class="{ 'nested-content__item--active' : $parent.realCurrentNode.key == node.key, 'nested-content__item--single' : $parent.singleMode }">
<div class="umb-nested-content__item" ng-repeat="node in nodes" ng-class="{ 'umb-nested-content__item--active' : $parent.realCurrentNode.key == node.key, 'umb-nested-content__item--single' : $parent.singleMode }">
<div class="nested-content__header-bar" ng-click="$parent.editNode($index)" ng-hide="$parent.singleMode">
<div class="umb-nested-content__header-bar" ng-click="$parent.editNode($index)" ng-hide="$parent.singleMode">
<div class="nested-content__heading" ng-class="{'-with-icon': showIcons}"><i ng-if="showIcons" class="icon" ng-class="$parent.getIcon($index)"></i><span class="nested-content__item-name" ng-bind="$parent.getName($index)"></span></div>
<div class="umb-nested-content__heading" ng-class="{'-with-icon': showIcons}"><i ng-if="showIcons" class="icon" ng-class="$parent.getIcon($index)"></i><span class="umb-nested-content__item-name" ng-bind="$parent.getName($index)"></span></div>
<div class="nested-content__icons">
<a class="nested-content__icon nested-content__icon--edit" title="{{editIconTitle}}" ng-class="{ 'nested-content__icon--active' : $parent.realCurrentNode.id == node.id }" ng-click="$parent.editNode($index); $event.stopPropagation();" ng-show="$parent.maxItems > 1" prevent-default>
<div class="umb-nested-content__icons">
<a class="umb-nested-content__icon umb-nested-content__icon--edit" title="{{editIconTitle}}" ng-class="{ 'umb-nested-content__icon--active' : $parent.realCurrentNode.id == node.id }" ng-click="$parent.editNode($index); $event.stopPropagation();" ng-show="$parent.maxItems > 1" prevent-default>
<i class="icon icon-edit"></i>
</a>
<a class="nested-content__icon nested-content__icon--move" title="{{moveIconTitle}}" ng-click="$event.stopPropagation();" ng-show="$parent.nodes.length > 1" prevent-default>
<a class="umb-nested-content__icon umb-nested-content__icon--move" title="{{moveIconTitle}}" ng-click="$event.stopPropagation();" ng-show="$parent.nodes.length > 1" prevent-default>
<i class="icon icon-navigation"></i>
</a>
<a class="nested-content__icon nested-content__icon--delete" title="{{deleteIconTitle}}" ng-class="{ 'nested-content__icon--disabled': $parent.nodes.length <= $parent.minItems }" ng-click="$parent.deleteNode($index); $event.stopPropagation();" prevent-default>
<a class="umb-nested-content__icon umb-nested-content__icon--delete" title="{{deleteIconTitle}}" ng-class="{ 'umb-nested-content__icon--disabled': $parent.nodes.length <= $parent.minItems }" ng-click="$parent.deleteNode($index); $event.stopPropagation();" prevent-default>
<i class="icon icon-trash"></i>
</a>
</div>
</div>
<div class="nested-content__content" ng-if="$parent.realCurrentNode.key == node.key && !$parent.sorting">
<div class="umb-nested-content__content" ng-if="$parent.realCurrentNode.key == node.key && !$parent.sorting">
<umb-nested-content-editor ng-model="node" tab-alias="ncTabAlias" />
</div>
</div>
</div>
<div class="nested-content__help-text" ng-show="nodes.length == 0">
<div class="umb-nested-content__help-text" ng-show="nodes.length == 0">
<localize key="grid_addElement"></localize>
</div>
<div class="nested-content__footer-bar" ng-hide="nodes.length >= maxItems">
<a class="nested-content__icon" ng-click="openNodeTypePicker($event)" prevent-default>
<div class="umb-nested-content__footer-bar" ng-hide="nodes.length >= maxItems">
<a class="umb-nested-content__icon" ng-click="openNodeTypePicker($event)" prevent-default>
<i class="icon icon-add"></i>
</a>
</div>
<div class="usky-grid nested-content__node-type-picker" ng-if="overlayMenu.show">
<div class="usky-grid umb-nested-content__node-type-picker" ng-if="overlayMenu.show">
<div class="cell-tools-menu" ng-style="overlayMenu.style" style="margin: 0;" delayed-mouseleave="closeNodeTypePicker()" on-delayed-mouseleave="closeNodeTypePicker()">
<h5>
<localize key="grid_insertControl" />