From 5ad73a549a98a1d9743d53bf76596de341e7822a Mon Sep 17 00:00:00 2001 From: Ingo Schommer Date: Wed, 20 Mar 2013 14:45:23 +0100 Subject: [PATCH] Fixed TreeDropdownField loading indicators --- css/TreeDropdownField.css | 3 ++- scss/TreeDropdownField.scss | 11 ++++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/css/TreeDropdownField.css b/css/TreeDropdownField.css index 77d99841d..a402e2259 100644 --- a/css/TreeDropdownField.css +++ b/css/TreeDropdownField.css @@ -2,9 +2,10 @@ div.TreeDropdownField { width: 400px; background: #fff; border: 1px solid #aaa; div.TreeDropdownField input { border: none; background: none; padding: 0; margin: 0; } div.TreeDropdownField .treedropdownfield-title { float: left; padding: 7px; width: 90%; line-height: 16px; overflow: hidden; outline: none; } div.TreeDropdownField .treedropdownfield-panel { clear: left; position: absolute; overflow: auto; display: none; cursor: default; border: 1px solid #aaa; border-top: none; margin: 1px 0 0 -1px; /* account for border on container div */ max-height: 200px; background-color: #fff; z-index: 50; -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); -o-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); } +div.TreeDropdownField .treedropdownfield-panel.loading { min-height: 30px; background: white url("../images/network-save.gif") 7px 7px no-repeat; } div.TreeDropdownField .treedropdownfield-panel ul.tree { margin: 0; } div.TreeDropdownField .treedropdownfield-panel ul.tree a { font-size: 12px; } div.TreeDropdownField .treedropdownfield-toggle-panel-link { border: none; margin: 0; z-index: 0; padding: 7px 3px; overflow: hidden; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background: #ccc; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cccccc), color-stop(0.6, #eeeeee)); background-image: -webkit-linear-gradient(center bottom, #cccccc 0%, #eeeeee 60%); background-image: -moz-linear-gradient(center bottom, #cccccc 0%, #eeeeee 60%); background-image: -o-linear-gradient(bottom, #cccccc 0%, #eeeeee 60%); background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 ); background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%); border-left: 1px solid #aaa; } div.TreeDropdownField .treedropdownfield-toggle-panel-link.treedropdownfield-open-tree { background: transparent; border: none; } div.TreeDropdownField .treedropdownfield-toggle-panel-link a { text-decoration: none; display: block; border: 0; margin: 0; opacity: 0.5; } -div.TreeDropdownField .loading, div.TreeDropdownField .jstree-themeroller a.jstree-loading .jstree-icon { background: white url("../images/network-save.gif") center center no-repeat !important; } +div.TreeDropdownField a.jstree-loading .jstree-pageicon { background: white url("../images/network-save.gif") center center no-repeat; } diff --git a/scss/TreeDropdownField.scss b/scss/TreeDropdownField.scss index 2ee0396e4..7d3b11e0b 100755 --- a/scss/TreeDropdownField.scss +++ b/scss/TreeDropdownField.scss @@ -38,6 +38,11 @@ div.TreeDropdownField { -o-box-shadow : 0 4px 5px rgba(0,0,0,.15); box-shadow : 0 4px 5px rgba(0,0,0,.15); + &.loading { + min-height: 16px /* icon */ + 14px /* padding */; // Ensure there's room for loading indicator + background: #fff url("../images/network-save.gif") 7px 7px no-repeat; + } + ul.tree { margin: 0; @@ -84,8 +89,8 @@ div.TreeDropdownField { } } - .loading, - .jstree-themeroller a.jstree-loading .jstree-icon { - background: #fff url("../images/network-save.gif") center center no-repeat !important; + a.jstree-loading .jstree-pageicon { + // Apply to .jstree-pageicon since .jstree-icon is hidden + background: #fff url("../images/network-save.gif") center center no-repeat; } } \ No newline at end of file