Merge pull request #154 from newsummit/master

New img file for new UI overhaul

web/app/views/main.scala.html

@@ -11,6 +11,7 @@
 		<link rel="stylesheet" media="screen" href="@routes.Assets.at("vendors/bootstrap/dist/css/bootstrap.min.css")">
 		<link rel="stylesheet" media="screen" href="@routes.Assets.at("vendors/bootstrap3-editable/css/bootstrap-editable.css")">
 		<link rel="stylesheet" media="screen" href="@routes.Assets.at("vendors/fancytree/src/skin-win8/ui.fancytree.css")">
+		<link rel="stylesheet" media="screen" href="@routes.Assets.at("vendors/fancytree/src/skin-wherehows/ui.wherehows.css")">
 		<link rel="stylesheet" media="screen" href="@routes.Assets.at("vendors/json.human.js-master/css/json.human.css")">
 		<link rel="stylesheet" media="screen" href="@routes.Assets.at("vendors/jquery.treegrid/css/jquery.treegrid.css")">
 		<link rel="stylesheet" media="screen" href="@routes.Assets.at("vendors/toastr/toastr.css")">
@@ -18,6 +19,7 @@
 		<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
 		<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/comments.css")">
 		<link rel="stylesheet" media="screen" href="@routes.Assets.at("vendors/font-awesome-4.5.0/css/font-awesome.min.css")">
+		<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/wherehows.css")">
 		<script src="@routes.Assets.at("vendors/jquery-2.1.4/jquery-2.1.4.min.js")" type="text/javascript"></script>
 		<script src="@routes.Assets.at("vendors/jquery-ui-1.11.0/jquery-ui.js")" type="text/javascript"></script>
 		<script src="@routes.Assets.at("vendors/bootstrap/dist/js/bootstrap.min.js")" type="text/javascript"></script>
@@ -76,7 +78,7 @@
 							aria-expand="false"
 							dropdown-toggle>
 								Tools
-								<i class="fa fa-caret-down"></i>
+								<i class="fa fa-angle-down"></i>
 							</a>
 							<ul class="dropdown-menu" role="menu">
 								<li>
@@ -154,30 +156,26 @@
 					</div>
 					<ul class="nav navbar-nav navbar-right">
 						<li class="dropdown" dropdown>
-              				<a class="dropdown-toggle" data-toggle="dropdown" role="button"
+							<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expand="false" dropdown-toggle>
-                				style="color : #808080" aria-expand="false" dropdown-toggle>
+								<i class="fa fa-angle-down"></i>
-                				<i class="fa fa-user"></i>
-                				<span id="username">@user</span>
-                				<i class="fa fa-caret-down"></i>
 							</a>
+							<div class="usericon"></div>
 							<ul class="dropdown-menu" role="menu">
 								<li>
 									<a id="settingsbtn" role="button">
 										<i class="fa fa-gear"></i>
 										Settings
 									</a>
-                				</li>
-              				</ul>
 								</li>
 								<li>
 									<a href="@routes.Application.logout()" title="Log out">
 										<i class="fa fa-sign-out"></i>
-								<span class="visible-xs-inline">
 										Logout
-								</span>
 									</a>
 								</li>
 							</ul>
+						</li>
+					</ul>
 				} else {
 					<form class="navbar-form navbar-right" method="POST"
 						action="@routes.Application.authenticate()?csrfToken=@csrfToken">

web/public/stylesheets/main.css

@@ -27,8 +27,6 @@ a.navbar-brand {
 }
 
 .navbar-nav > li.active > a {
-    background: #333 !important;
-    border: 1px solid #2b2b2b !important;
     padding: 20px 9px 19px;
     height: 60px;
 }
@@ -198,7 +196,7 @@ table tr td {
 }
 
 .ace_editor {
-    min-height: 400px;
+    min-height: 200px;
     min-width: 600px;
     width: 100%;
 }
@@ -434,7 +432,6 @@ table tr td {
     min-width:  600px;
     min-height: 300px;
     height: 800px;
-    border: 1px solid #aaa;
 }
 .vsplitbar {
     width: 5px;

web/public/stylesheets/wherehows.css

@@ -0,0 +1,243 @@
+/* WhereHows Top Navbar _____________________________________ */
+
+.navbar-inverse {
+    background-color: #008cc9;
+    border: none;
+    color: rgba(255,255,255,.7);
+}
+
+/* Top Nav :: all links */
+.navbar-inverse a:hover {
+    color: white;
+}
+
+/* Top Nav :: logo */
+.navbar-inverse .navbar-brand {
+    color: white;
+    font-size: 16px;
+}
+
+a.navbar-brand {
+    letter-spacing: 0.2em;
+    text-shadow: none;
+    margin-left: 63px;
+    margin-top: 4px;
+    font-size: 1.2em;
+}
+
+/* Top Nav :: main nav links in navbar */
+ul.navbar-nav {
+    margin-left: 16px;
+}
+
+ul.navbar-right {
+    margin: 9px 15px 0 16px;
+}
+
+.navbar-right a.dropdown-toggle {
+    float: left;
+}
+
+ul.navbar-right i.fa-angle-down {
+    font-size: 25px;
+    margin-top: -3px;
+}
+
+#mainnavbar a {
+    color: inherit;
+    font-size: 16px;
+    font-family: Candara,Calibri,Segoe,"Segoe UI",Optima,Arial,sans-serif;
+}
+
+.active {
+    background: none;
+}
+
+.nav li {
+    background: none;
+}
+
+#mainnavbar .category-header a:hover {
+    color: white;
+    cursor: pointer;
+    background-color: #008cc9;
+}
+
+/* Top Nav :: Tools Links */
+a.dropdown-toggle {
+    color: inherit !important;
+}
+
+a.dropdown-toggle:hover {
+    cursor: pointer;
+    color: white !important;
+}
+
+.navbar-inverse .navbar-nav .open a {
+    background: none !important;
+}
+
+/* Top Nav :: Dropdown Menus */
+#mainnavbar .category-header .open a:hover,
+#mainnavbar .navbar-right .open a:hover,
+#mainnavbar .navbar-left .open a:hover {
+    border: none !important;
+    cursor: pointer;
+    color: white;
+    background-color: #008cc9;
+}
+
+.navbar-inverse .navbar-nav>li>a,
+.navbar-inverse .btn-link {
+    color: inherit;
+}
+
+.navbar-header:before {
+    content: url(/assets/images/icons/logo-white.png);
+    position: absolute;
+    margin-top: 13px;
+    margin-left: 20px;
+}
+
+.navbar-inverse .navbar-nav li {
+    margin-right: 10px;
+}
+
+.navbar-inverse .navbar-nav .active a {
+    background: none !important;
+    color: white !important;
+    border-bottom: 9px solid white;
+    height: 61px;
+}
+
+.navbar-inverse .navbar-nav .active a:hover {
+    background: none;
+    border-color: white;
+}
+
+.navbar-inverse .navbar-nav a:hover {
+    color: white;
+    border-bottom: 9px solid rgba(255,255,255,.4);
+}
+
+/* Search Bar */
+.btn-group button {
+    background-color: #edf6fb;
+    border: none;
+    color: #808081;
+    height: 32px !important;
+    width: 45px;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+
+.navbar-right .usericon {
+    width: 41px;
+    height: 41px;
+    float: left;
+    background: url(/assets/images/user_empty.png);
+    background-size: 100%;
+    border-radius: 50%;
+    background-repeat: no-repeat;
+}
+
+.caret,
+#categoryIcon:before {
+    color: #008cc9;
+}
+
+.open .dropdown-menu {
+    background-color: #edf6fb;
+    border-top: none;
+}
+
+.open .dropdown-menu li {
+    margin-right: 0;
+}
+
+.open a.dropdown-toggle {
+    background-color: none;
+}
+
+ul.dropdown-menu {
+    padding: 0;
+    box-shadow: none;
+    border-color: #008cc9;
+}
+
+ul.dropdown-menu li {
+    color: #037cb1;
+}
+
+ul.dropdown-menu li:hover {
+    color: #037cb1;
+    background-color: #008cc9;
+}
+
+ul.dropdown-menu li.active {
+    color: #edf6fb;
+}
+
+.navbar-nav.navbar-right .dropdown-menu {
+    margin-top: -9px;
+}
+
+.btn-group ul.dropdown-menu {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    margin-top: 13px;
+}
+
+.navbar-nav .btn-group.open .dropdown-menu .active a,
+.dropdown-menu>.active>a {
+    background-color: #008cc9;
+}
+
+.input-group input {
+    background-color: #edf6fb;
+    border: none;
+    margin-left: 5px;
+    border-radius: 0;
+    height: 32px;
+    font-size: 14px;
+    color: #545454;
+}
+
+.keyword-search {
+    min-width: 400px;
+}
+
+button#searchBtn {
+    height: 32px;
+    margin-left: 5px;
+    border: 1px solid #edf6fb;
+    background-color: none;
+    background: none;
+    width: 50px;
+    color: #edf6fb;
+}
+
+button#searchBtn:hover {
+    background: #8cb337;
+}
+
+button.btn.btn-link.btn-sm {
+    background: #008cc9;
+    font-size: 13px;
+    letter-spacing: 0.04em;
+    line-height: 22px;
+    margin-left: 8px;
+}
+
+ul.ui-autocomplete {
+    background-color: #edf6fb;
+}
+
+ul.ui-autocomplete b {
+    color: #008cc9 !important;
+}
+
+div.btn-group {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}

web/public/vendors/fancytree/src/jquery.fancytree.js

@@ -17,33 +17,33 @@
 
 // Start of local namespace
 ;(function($, window, document, undefined) {
-"use strict";
+    "use strict";
 
 // prevent duplicate loading
-if ( $.ui.fancytree && $.ui.fancytree.version ) {
+    if ( $.ui.fancytree && $.ui.fancytree.version ) {
         $.ui.fancytree.warn("Fancytree: ignored duplicate include");
         return;
-}
+    }
 
 
-/* *****************************************************************************
+    /* *****************************************************************************
      * Private functions and variables
      */
 
-function _raiseNotImplemented(msg){
+    function _raiseNotImplemented(msg){
         msg = msg || "";
         $.error("Not implemented: " + msg);
-}
+    }
 
-function _assert(cond, msg){
+    function _assert(cond, msg){
         // TODO: see qunit.js extractStacktrace()
         if(!cond){
             msg = msg ? ": " + msg : "";
             $.error("Assertion failed" + msg);
         }
-}
+    }
 
-function consoleApply(method, args){
+    function consoleApply(method, args){
         var i, s,
             fn = window.console ? window.console[method] : null;
 
@@ -59,18 +59,18 @@ function consoleApply(method, args){
                 fn(s);
             }
         }
-}
+    }
 
-/*Return true if x is a FancytreeNode.*/
+    /*Return true if x is a FancytreeNode.*/
-function _isNode(x){
+    function _isNode(x){
         return !!(x.tree && x.statusNodeType !== undefined);
-}
+    }
 
-/** Return true if dotted version string is equal or higher than requested version.
+    /** Return true if dotted version string is equal or higher than requested version.
      *
      * See http://jsfiddle.net/mar10/FjSAN/
      */
-function isVersionAtLeast(dottedVersion, major, minor, patch){
+    function isVersionAtLeast(dottedVersion, major, minor, patch){
         var i, v, t,
             verParts = $.map($.trim(dottedVersion).split("."), function(e){ return parseInt(e, 10); }),
             testParts = $.map(Array.prototype.slice.call(arguments, 1), function(e){ return parseInt(e, 10); });
@@ -83,14 +83,14 @@ function isVersionAtLeast(dottedVersion, major, minor, patch){
             }
         }
         return true;
-}
+    }
 
-/** Return a wrapper that calls sub.methodName() and exposes
+    /** Return a wrapper that calls sub.methodName() and exposes
      *  this        : tree
      *  this._local : tree.ext.EXTNAME
      *  this._super : base.methodName()
      */
-function _makeVirtualFunction(methodName, tree, base, extension, extName){
+    function _makeVirtualFunction(methodName, tree, base, extension, extName){
         // $.ui.fancytree.debug("_makeVirtualFunction", methodName, tree, base, extension, extName);
         // if(rexTestSuper && !rexTestSuper.test(func)){
         //     // extension.methodName() doesn't call _super(), so no wrapper required
@@ -120,12 +120,12 @@ function _makeVirtualFunction(methodName, tree, base, extension, extName){
             };
         })(); // end of Immediate Function
         return proxy;
-}
+    }
 
-/**
+    /**
      * Subclass `base` by creating proxy functions
      */
-function _subclassObject(tree, base, extension, extName){
+    function _subclassObject(tree, base, extension, extName){
         // $.ui.fancytree.debug("_subclassObject", tree, base, extension, extName);
         for(var attrName in extension){
             if(typeof extension[attrName] === "function"){
@@ -145,35 +145,35 @@ function _subclassObject(tree, base, extension, extName){
                 }
             }
         }
-}
+    }
 
 
-function _getResolvedPromise(context, argArray){
+    function _getResolvedPromise(context, argArray){
         if(context === undefined){
             return $.Deferred(function(){this.resolve();}).promise();
         }else{
             return $.Deferred(function(){this.resolveWith(context, argArray);}).promise();
         }
-}
+    }
 
 
-function _getRejectedPromise(context, argArray){
+    function _getRejectedPromise(context, argArray){
         if(context === undefined){
             return $.Deferred(function(){this.reject();}).promise();
         }else{
             return $.Deferred(function(){this.rejectWith(context, argArray);}).promise();
         }
-}
+    }
 
 
-function _makeResolveFunc(deferred, context){
+    function _makeResolveFunc(deferred, context){
         return function(){
             deferred.resolveWith(context);
         };
-}
+    }
 
 
-function _getElementDataAsDict($el){
+    function _getElementDataAsDict($el){
         // Evaluate 'data-NAME' attributes with special treatment for 'data-json'.
         var d = $.extend({}, $el.data()),
             json = d.json;
@@ -184,18 +184,18 @@ function _getElementDataAsDict($el){
             d = $.extend(d, json);
         }
         return d;
-}
+    }
 
 
 // TODO: use currying
-function _makeNodeTitleMatcher(s){
+    function _makeNodeTitleMatcher(s){
         s = s.toLowerCase();
         return function(node){
             return node.title.toLowerCase().indexOf(s) >= 0;
         };
-}
+    }
 
-var i,
+    var i,
         FT = null, // initialized below
         ENTITY_MAP = {"&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#39;", "/": "&#x2F;"},
     //boolean attributes that can be set with equivalent class names in the LI tags
@@ -207,16 +207,16 @@ var i,
     // Attribute names that should NOT be added to node.data
         NONE_NODE_DATA_MAP = {"active": true, "children": true, "data": true, "focus": true};
 
-for(i=0; i<CLASS_ATTRS.length; i++){ CLASS_ATTR_MAP[CLASS_ATTRS[i]] = true; }
+    for(i=0; i<CLASS_ATTRS.length; i++){ CLASS_ATTR_MAP[CLASS_ATTRS[i]] = true; }
-for(i=0; i<NODE_ATTRS.length; i++){ NODE_ATTR_MAP[NODE_ATTRS[i]] = true; }
+    for(i=0; i<NODE_ATTRS.length; i++){ NODE_ATTR_MAP[NODE_ATTRS[i]] = true; }
 
 
-/* *****************************************************************************
+    /* *****************************************************************************
      * FancytreeNode
      */
 
 
-/**
+    /**
      * Creates a new FancytreeNode
      *
      * @class FancytreeNode
@@ -242,7 +242,7 @@ for(i=0; i<NODE_ATTRS.length; i++){ NODE_ATTR_MAP[NODE_ATTRS[i]] = true; }
      * @property {boolean} selected Use isSelected(), setSelected() to access this property.
      * @property {string} tooltip Alternative description used as hover banner
      */
-function FancytreeNode(parent, obj){
+    function FancytreeNode(parent, obj){
         var i, l, name, cl;
 
         this.parent = parent;
@@ -305,10 +305,10 @@ function FancytreeNode(parent, obj){
 //	if( parent ) {
         this.tree._callHook("treeRegisterNode", this.tree, true, this);
 //	}
-}
+    }
 
 
-FancytreeNode.prototype = /** @lends FancytreeNode# */{
+    FancytreeNode.prototype = /** @lends FancytreeNode# */{
         /* Return the direct child FancytreeNode with a given key, index. */
         _findDirectChild: function(ptr){
             var i, l,
@@ -692,7 +692,7 @@ FancytreeNode.prototype = /** @lends FancytreeNode# */{
                 this.addChildren(dict.children);
             }
             this.renderTitle();
-/*
+            /*
              var children = dict.children;
              if(children === undefined){
              this.data = $.extend(this.data, dict);
@@ -704,7 +704,7 @@ FancytreeNode.prototype = /** @lends FancytreeNode# */{
              this.data = $.extend(this.data, dict);
              this.removeChildren();
              this.addChild(children);
-*/
+             */
         },
         /** Return the list of child nodes (undefined for unexpanded lazy nodes).
          * @returns {FancytreeNode[] | undefined}
@@ -1159,23 +1159,23 @@ FancytreeNode.prototype = /** @lends FancytreeNode# */{
             // TODO: fix selection state
             // TODO: fix active state
 
-/*
+            /*
              var tree = this.tree;
              var opts = tree.options;
              var pers = tree.persistence;
 
 
              // Always expand, if it's below minExpandLevel
-//		tree.logDebug ("%s._addChildNode(%o), l=%o", this, ftnode, ftnode.getLevel());
+             //		tree.logDebug ("%s._addChildNode(%o), l=%o", this, ftnode, ftnode.getLevel());
              if ( opts.minExpandLevel >= ftnode.getLevel() ) {
-//			tree.logDebug ("Force expand for %o", ftnode);
+             //			tree.logDebug ("Force expand for %o", ftnode);
              this.bExpanded = true;
              }
 
              // In multi-hier mode, update the parents selection state
              // DT issue #82: only if not initializing, because the children may not exist yet
-//		if( !ftnode.data.isStatusNode() && opts.selectMode==3 && !isInitializing )
+             //		if( !ftnode.data.isStatusNode() && opts.selectMode==3 && !isInitializing )
-//			ftnode._fixSelectionState();
+             //			ftnode._fixSelectionState();
 
              // In multi-hier mode, update the parents selection state
              if( ftnode.bSelected && opts.selectMode==3 ) {
@@ -1192,7 +1192,7 @@ FancytreeNode.prototype = /** @lends FancytreeNode# */{
 
              return ftnode;
 
-*/
+             */
         },
         /** Set focus relative to this node and optionally activate.
          *
@@ -1645,13 +1645,13 @@ FancytreeNode.prototype = /** @lends FancytreeNode# */{
             Array.prototype.unshift.call(arguments, this.toString());
             consoleApply("warn", arguments);
         }
-};
+    };
 
 
-/* *****************************************************************************
+    /* *****************************************************************************
      * Fancytree
      */
-/**
+    /**
      * Construct a new tree object.
      *
      * @class Fancytree
@@ -1676,7 +1676,7 @@ FancytreeNode.prototype = /** @lends FancytreeNode# */{
      * @property {string} $container
      * @property {FancytreeNode} lastSelectedNode
      */
-function Fancytree(widget) {
+    function Fancytree(widget) {
         this.widget = widget;
         this.$div = widget.element;
         this.options = widget.options;
@@ -1738,10 +1738,10 @@ function Fancytree(widget) {
                 .attr("role", "tree")
                 .attr("aria-multiselectable", true);
         }
-}
+    }
 
 
-Fancytree.prototype = /** @lends Fancytree# */{
+    Fancytree.prototype = /** @lends Fancytree# */{
         /* Return a context object that can be re-used for _callHook().
          * @param {Fancytree | FancytreeNode | EventData} obj
          * @param {Event} originalEvent
@@ -2031,7 +2031,7 @@ Fancytree.prototype = /** @lends Fancytree# */{
                 consoleApply("info", arguments);
             }
         },
-/*
+        /*
          TODO: isInitializing: function() {
          return ( this.phase=="init" || this.phase=="postInit" );
          },
@@ -2041,7 +2041,7 @@ Fancytree.prototype = /** @lends Fancytree# */{
          TODO: isUserEvent: function() {
          return ( this.phase=="userEvent" );
          },
-*/
+         */
 
         /**
          * Make sure that a node with a given ID is loaded, by traversing - and
@@ -2223,15 +2223,15 @@ Fancytree.prototype = /** @lends Fancytree# */{
             Array.prototype.unshift.call(arguments, this.toString());
             consoleApply("warn", arguments);
         }
-};
+    };
 
-/**
+    /**
      * These additional methods of the {@link Fancytree} class are 'hook functions'
      * that can be used and overloaded by extensions.
      * (See <a href="https://github.com/mar10/fancytree/wiki/TutorialExtensions">writing extensions</a>.)
      * @mixin Fancytree_Hooks
      */
-$.extend(Fancytree.prototype,
+    $.extend(Fancytree.prototype,
         /** @lends Fancytree_Hooks# */
         {
             /** Default handling for mouse click events.
@@ -2834,6 +2834,7 @@ $.extend(Fancytree.prototype,
                     tree = ctx.tree,
                     opts = ctx.options,
                     aria = opts.aria,
+                    glyph = opts._classNames.glyph,
                     level = node.getLevel(),
                     ares = [],
                     icon = node.data.icon;
@@ -2864,7 +2865,7 @@ $.extend(Fancytree.prototype,
                     if(aria){
                         ares.push("<span role='button' class='fancytree-expander'></span>");
                     }else{
-				ares.push("<span class='fancytree-expander'></span>");
+                        ares.push("<span class='fancytree-expander " + glyph + "'></span>");
                     }
                 }
                 // Checkbox mode
@@ -2915,6 +2916,7 @@ $.extend(Fancytree.prototype,
             nodeRenderStatus: function(ctx) {
                 // Set classes for current status
                 var node = ctx.node,
+                    level = node.getLevel(),
                     tree = ctx.tree,
                     opts = ctx.options,
 //			nodeContainer = node[tree.nodeContainerAttrName],
@@ -3015,7 +3017,7 @@ $.extend(Fancytree.prototype,
                     (node.expanded ? "e" : "c") +
                     (node.folder ? "f" : "")
                 );
-//        node.span.className = cnList.join(" ");
+                cnList.push('level' + level);
                 statusElem.className = cnList.join(" ");
 
                 // TODO: we should not set this in the <span> tag also, if we set it here:
@@ -3208,7 +3210,7 @@ $.extend(Fancytree.prototype,
                     }).fail(function(errMsg){
                         _afterLoad(function () { dfd.rejectWith(node, ["load failed (" + errMsg + ")"]); });
                     });
-/*
+                    /*
                      var source = tree._triggerNodeEvent("lazyLoad", node, ctx.originalEvent);
                      _assert(typeof source !== "boolean", "lazyLoad event must return source in data.result");
                      node.debug("nodeSetExpanded: load start...");
@@ -3221,7 +3223,7 @@ $.extend(Fancytree.prototype,
                      }).fail(function(errMsg){
                      dfd.rejectWith(node, ["load failed (" + errMsg + ")"]);
                      });
-*/
+                     */
                 }else{
                     _afterLoad(function () { dfd.resolveWith(node); });
                 }
@@ -3517,14 +3519,14 @@ $.extend(Fancytree.prototype,
                     this._triggerTreeEvent(flag ? "focusTree" : "blurTree");
                 }
             }
-});
+        });
 
 
-/* ******************************************************************************
+    /* ******************************************************************************
      * jQuery UI widget boilerplate
      */
 
-/**
+    /**
      * The plugin (derrived from <a href=" http://api.jqueryui.com/jQuery.widget/">jQuery.Widget</a>).<br>
      * This constructor is not called directly. Use `$(selector).fancytree({})`
      * to initialize the plugin instead.<br>
@@ -3536,7 +3538,7 @@ $.extend(Fancytree.prototype,
      * @mixin Fancytree_Widget
      */
 
-$.widget("ui.fancytree",
+    $.widget("ui.fancytree",
         /** @lends Fancytree_Widget# */
         {
             /**These options will be used as defaults
@@ -3565,7 +3567,7 @@ $.widget("ui.fancytree",
                 extensions: [],
                 fx: { height: "toggle", duration: 200 },
                 generateIds: false,
-		icons: true,
+                icons: false,
                 idPrefix: "ft_",
                 keyboard: true,
                 keyPathSeparator: "/",
@@ -3593,7 +3595,8 @@ $.widget("ui.fancytree",
                     partsel: "fancytree-partsel",
                     lastsib: "fancytree-lastsib",
                     loading: "fancytree-loading",
-			error: "fancytree-error"
+                    error: "fancytree-error",
+                    glyph: "glyphicon glyphicon-plus-sign"
                 },
                 // events
                 lazyLoad: null,
@@ -3813,12 +3816,12 @@ $.widget("ui.fancytree",
             getTree: function() {
                 return this.tree;
             }
-});
+        });
 
 // $.ui.fancytree was created by the widget factory. Create a local shortcut:
-FT = $.ui.fancytree;
+    FT = $.ui.fancytree;
 
-/**
+    /**
      * Static members in the `$.ui.fancytree` namespace.<br>
      * <br>
      * <pre class="sh_javascript sunlight-highlight-javascript">// Access static members:
@@ -3828,7 +3831,7 @@ FT = $.ui.fancytree;
      *
      * @mixin Fancytree_Static
      */
-$.extend($.ui.fancytree,
+    $.extend($.ui.fancytree,
         /** @lends Fancytree_Static# */
         {
             /** @type {string} */
@@ -4106,6 +4109,6 @@ $.extend($.ui.fancytree,
             warn: function(msg){
                 consoleApply("warn", arguments);
             }
-});
+        });
 
 }(jQuery, window, document));

web/public/vendors/fancytree/src/skin-wherehows/ui.wherehows.css

@@ -0,0 +1,108 @@
+/*******************************************************************************
+ * Common Styles for Custom Fancytree 'skin-wherehows' Skin.
+ ******************************************************************************/
+/*------------------------------------------------------------------------------
+ * Helpers
+ *----------------------------------------------------------------------------*/
+.ui-helper-hidden {
+  display: none;
+}
+/*------------------------------------------------------------------------------
+ * Container and UL / LI
+ *----------------------------------------------------------------------------*/
+ul.fancytree-container {
+
+}
+ul.fancytree-container ul {
+  padding: 0;
+}
+ul.fancytree-container li.fancytree-lastsib {
+  border: none;
+}
+
+/*------------------------------------------------------------------------------
+ * Node titles and highlighting
+ *----------------------------------------------------------------------------*/
+span.fancytree-node {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-top: 1px #efefef solid;
+}
+
+span.fancytree-title {
+  color: #939597;
+  color: #b0b1b1;
+  font-size: 13px;
+  letter-spacing: .02em;
+  font-weight: normal;
+}
+
+span.fancytree-node.fancytree-active {
+  border: none !important;
+  background-color: #e7f6fd !important;
+}
+
+span.fancytree-active .fancytree-title {
+  color: #57869c;
+  color: rgba(0,140,201,.8);
+  font-weight: bold;
+}
+
+span.fancytree-node:hover {
+  background-color: #e7f6fd;
+  border-color: #e7f6fd;
+  cursor: pointer;
+  color: color: rgba(0,140,201,.8);
+}
+
+span.fancytree-node.level1 {
+  padding-left: 8px;
+}
+
+span.level2 {
+  padding-left: 20px;
+}
+
+span.level3 {
+  padding-left: 35px;
+}
+
+span.level4 {
+  padding-left: 45px;
+}
+
+span.level5 {
+  padding-left: 55px;
+}
+
+/*------------------------------------------------------------------------------
+ * Expander icon : hide for nodes with no children
+ *----------------------------------------------------------------------------*/
+span.fancytree-has-children .fancytree-expander {
+  font-size: 15px;
+  color: #a7a6a6;
+  background: none;
+  margin-top: 1px;
+  margin-left: 1px;
+}
+
+span.fancytree-has-children.fancytree-active .fancytree-expander {
+  color: rgba(0,140,201,.6);
+}
+
+span.fancytree-has-children.fancytree-active .fancytree-expander:hover {
+  color: rgba(0,140,201,1);
+}
+
+span.fancytree-has-children .fancytree-expander:hover {
+  color: #34b3e4;
+}
+
+span.fancytree-expanded span.glyphicon-plus-sign:before {
+  content: "\e082";
+}
+
+span.fancytree-exp-n span.glyphicon-plus-sign:before,
+span.fancytree-exp-nl span.glyphicon-plus-sign:before {
+  display: none;
+}