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

Fix issues with tree icons + legacy icons

Browse Source
This commit is contained in:
bjarnef
2016-03-27 19:07:09 +02:00
parent ac2ebc4071
commit 233e3d9387
3 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js
View File

@@ -34,7 +34,7 @@ angular.module("umbraco.directives")
//TODO: Remove more of the binding from this template and move the DOM manipulation to be manually done in the link function,
// this will greatly improve performance since there's potentially a lot of nodes being rendered = a LOT of watches!
template: '<li ng-class="{\'current\': (node == currentNode)}" on-right-click="altSelect(node, $event)">' +
template: '<li ng-class="{\'current\': (node == currentNode), \'has-children\': node.hasChildren}" on-right-click="altSelect(node, $event)">' +
'<div ng-class="getNodeCssClass(node)" ng-swipe-right="options(node, $event)" >' +
//NOTE: This ins element is used to display the search icon if the node is a container/listview and the tree is currently in dialog
//'<ins ng-if="tree.enablelistviewsearch && node.metaData.isContainer" class="umb-tree-node-search icon-search" ng-click="searchNode(node, $event)" alt="searchAltText"></ins>' +
@@ -72,14 +72,13 @@ angular.module("umbraco.directives")
//set the padding
.css("padding-left", (node.level * 20) + "px");
//remove first 'ins' if there is no children
//show/hide last 'ins' depending on children
//toggle visibility of last 'ins' depending on children
//visibility still ensure the space is "reserved", so both nodes with and without children are aligned.
if (!node.hasChildren) {
element.find("ins:first").remove();
element.find("ins").last().hide();
element.find("ins").last().css("visibility", "hidden");
}
else {
element.find("ins").last().show();
element.find("ins").last().css("visibility", "visible");
}
var icon = element.find("i:first");

8
src/Umbraco.Web.UI.Client/src/less/hacks.less
View File

@@ -63,9 +63,13 @@ iframe, .content-column-body {
/*tree legacy icon*/
.legacy-custom-file{
width: 16px; height: 16px; margin-right: 11px; display: inline-block;
.legacy-custom-file {
width: 16px;
height: 16px;
min-width: 20px; /* this ensure the icon takes up same space as font-icon (20px) */
display: inline-block;
background-position: center center;
background-repeat: no-repeat;
}
/*

19
src/Umbraco.Web.UI.Client/src/less/tree.less
View File

@@ -155,6 +155,11 @@
display: flex;
}
.umb-tree li > div:hover a:not(.umb-options) {
overflow: hidden;
margin-right: 6px;
}
.umb-tree .icon {
vertical-align: middle;
margin: 0 13px 0 0;
@@ -477,7 +482,6 @@ div.locked:before{
width:100%;
height:1px;
overflow:hidden;
position: absolute;
left: 0;
bottom: 0;
@@ -495,15 +499,18 @@ div.locked:before{
/*body.touch .umb-tree .icon{font-size: 19px;}*/
body.touch .umb-tree ins{font-size: 14px; visibility: visible; padding: 7px;}
body.touch .umb-tree li div {
body.touch .umb-tree li > div {
padding-top: 8px;
padding-bottom: 8px;
font-size: 110%;
}
body.touch .umb-actions a{
padding: 7px 25px 7px 20px;
font-size: 110%;
// change height of this if touch devices should have a different height of preloader.
body.touch .umb-tree li div.l div {
padding: 0;
}
body.touch a.umb-options i {margin-top: 20px;}
body.touch .umb-actions a {
padding: 7px 25px 7px 20px;
font-size: 110%;
}