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>
@@ -153,29 +155,25 @@
 						</button>
 					</div>
 					<ul class="nav navbar-nav navbar-right">
-            			<li class="dropdown" dropdown>
+						<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>
-              				<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>
+							<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>
+								<li>
+									<a href="@routes.Application.logout()" title="Log out">
+										<i class="fa fa-sign-out"></i>
+										Logout
+									</a>
+								</li>
+							</ul>
 						</li>
 					</ul>
 				} else {

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%;
 }
@@ -301,14 +299,14 @@ table tr td {
 }
 
 #mainSplitter {
-  width: 100.8% !important;
+    width: 100.8% !important;
 }
 
 #contentSplitter{
-  overflow-y: auto;
+    overflow-y: auto;
-  overflow-x: hidden;
+    overflow-x: hidden;
-  padding-left: 5px;
+    padding-left: 5px;
-  padding-right: 5px;
+    padding-right: 5px;
 }
 
 .datasetDetailsLinks {
@@ -340,65 +338,65 @@ table tr td {
 }
 
 .datasetDetailsLinks li > div {
-  display: inline-block;
+    display: inline-block;
-  white-space: nowrap;
+    white-space: nowrap;
 }
 
 .datasetTableLinks {
-  color: #000;
+    color: #000;
-  widtH: 100%;
+    widtH: 100%;
 }
 
 .datasetTableLinks li {
-  list-style-taype: none;
+    list-style-taype: none;
-  display: table-cell;
+    display: table-cell;
-  line-height: 2em;
+    line-height: 2em;
-  height: 40xp;
+    height: 40xp;
-  width: 80px;
+    width: 80px;
 }
 
 .datasetTableLinks li:first-child {
-  width: 120px;
+    width: 120px;
 }
 
 .datasetTableLinks li > a {
-  text-decoration: none;
+    text-decoration: none;
-  color: #000;:q
+    color: #000;:q
 
 }
 
 .datasetTableLinks li:hover, .datasetTableLinks li > a:hover {
-  color: #337ab7;
+    color: #337ab7;
 }
 
 .datasetTableLinks li > a > i, .datasetTableLinks li > i, .datasetTableLinks li > span > i {
-  font-size: 1.4em;
+    font-size: 1.4em;
 }
 
 .datasetTableLinks li > a > i.active, .datasetTableLinks li > i.active, .datasetTableLinks li > span > i.active {
-  color: #337ab7;
+    color: #337ab7;
 }
 
 .datasetTableLinks li.no-link:hover, .datasetTableLinks li > a.no-link:hover {
-  color: #00 !important;
+    color: #00 !important;
 }
 
 .source {
-  width: 100px;
+    width: 100px;
 }
 
 .modal-body textarea.form-control {
-  min-height: 250px;
+    min-height: 250px;
-  resize: vertical;
+    resize: vertical;
-  width: 100%;
+    width: 100%;
 }
 
 .commentsHeader > .commentsPagination {
-  margin-top: -20px;
+    margin-top: -20px;
 }
 
 .commentsHeader b {
-  margin-top: 5px;
+    margin-top: 5px;
 }
 
 .editor-wrapper {
@@ -434,7 +432,6 @@ table tr td {
     min-width:  600px;
     min-height: 300px;
     height: 800px;
-    border: 1px solid #aaa;
 }
 .vsplitbar {
     width: 5px;
@@ -482,7 +479,7 @@ table tr td {
 .ui-widget button {
 }
 .ui-widget-content {
-  background: white;
+    background: white;
 }
 
 .ui-tabs {

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/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;
+}