Browse files

Fixed TreeDropdownField loading indicators

  • Loading branch information...
1 parent 42b19cb commit 5ad73a549a98a1d9743d53bf76596de341e7822a @chillu chillu committed Mar 20, 2013
Showing with 10 additions and 4 deletions.
  1. +2 −1 css/TreeDropdownField.css
  2. +8 −3 scss/TreeDropdownField.scss
View
3 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; }
View
11 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;
}
}

0 comments on commit 5ad73a5

Please sign in to comment.