Эх сурвалжийг харах

HUE-6077 [frontend] Improve hbase styling

Johan Ahlen 8 жил өмнө
parent
commit
9fea7e7

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
apps/hbase/src/hbase/static/hbase/css/hbase.css


+ 52 - 66
apps/hbase/src/hbase/static/hbase/less/hbase.less

@@ -16,6 +16,10 @@
  limitations under the License.
 */
 
+@import (reference) "cui/colors.less";
+@import (reference) "cui/extra-variables.less";
+@import (reference) "hue-attributes.less";
+
 #hbaseComponents {
 
   .hbase-page {
@@ -292,74 +296,65 @@
     cursor: pointer;
   }
 
-  #searchbar-main {
-    display: inline;
-    background: #fff;
-    line-height: 1em;
-    margin-right: 10px;
-    -webkit-appearance: none;
+  .searchbar-main {
+    display: inline-block;
+    background-color: @cui-white;
+
+    height: 32px;
+    margin: 0;
+    padding: 4px 6px;
+
+    line-height: 22px;
+
+    color: #555;
+    cursor: auto;
+
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 18px;
+
+    box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px 0 inset;
     -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px 0 inset;
+
+    -webkit-appearance: none;
     -webkit-rtl-ordering: logical;
-    -webkit-transition-delay: 0s, 0s;
-    -webkit-transition-duration: 0.2s, 0.2s;
-    -webkit-transition-property: border, box-shadow;
-    -webkit-transition-timing-function: linear, linear;
     -webkit-user-select: text;
     -webkit-writing-mode: horizontal-tb;
-    background-color: rgb(255, 255, 255);
-    border-bottom-color: rgb(204, 204, 204);
-    border-bottom-left-radius: 3px;
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
+
+    .hue-ease-transition(~"border, box-shadow");
+
+    border-left: 1px solid #CCC;
+    border-top: 1px solid #CCC;
+    border-bottom: 1px solid #CCC;
+    border-radius: 3px 0 0 3px;
+
     border-image-outset: 0;
     border-image-repeat: stretch;
     border-image-slice: 100%;
     border-image-source: none;
     border-image-width: 1;
-    border-left-color: rgb(204, 204, 204);
-    border-left-style: solid;
-    border-left-width: 1px;
-    border-right-color: rgb(204, 204, 204);
-    border-right-style: solid;
-    border-right-width: 1px;
-    border-top-color: rgb(204, 204, 204);
-    border-top-left-radius: 3px;
-    border-top-style: solid;
-    border-top-width: 1px;
-    box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px 0 inset;
-    color: rgb(85, 85, 85);
-    cursor: auto;
-    display: inline-block;
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    font-size: 14px;
-    font-weight: normal;
-    height: 20px;
-    letter-spacing: normal;
-    line-height: 25px;
-    margin-bottom: 0;
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 0;
-    padding-bottom: 4px;
-    padding-left: 6px;
-    padding-right: 6px;
-    padding-top: 4px;
+
     text-align: start;
     text-indent: 0;
     text-shadow: rgba(0, 0, 0, 0) 0 0 1px;
     text-transform: none;
-    transition-delay: 0s, 0s;
-    transition-duration: 0.2s, 0.2s;
-    transition-property: border, box-shadow;
-    transition-timing-function: linear, linear;
     vertical-align: middle;
-    height: 36px;
-    font-size: 18px;
     white-space: nowrap;
     position: relative;
     overflow: hidden;
   }
 
+
+  .add-on {
+    border: 1px solid @hue-primary-color-dark;
+    border-radius: 0 4px 4px 0;
+    display: inline-block;
+    padding: 5px 10px;
+  }
+
+  .add-on i {
+    font-size: 16px;
+  }
+
   #search-tags {
     display: block;
     margin: 0;
@@ -465,7 +460,7 @@
     font-weight: bold;
   }
 
-  #searchbar-main input[type=text].tag-searchbar {
+  .searchbar-main input[type=text].tag-searchbar {
     border: 0;
     background: transparent;
     box-shadow: none;
@@ -478,18 +473,18 @@
     width: 100%;
   }
 
-  #searchbar-main input[type=text].tag-searchbar.active {
+  .searchbar-main input[type=text].tag-searchbar.active {
     color: #fff;
     width: 1px;
     background: #fff;
     opacity: .1;
   }
 
-  #searchbar-main small {
+  .searchbar-main small {
     color: #bbb;
   }
 
-  #searchbar-main i.tagIndicator {
+  .searchbar-main i.tagIndicator {
     color: #000;
     padding: 0 !important;
     border: 0;
@@ -566,19 +561,6 @@
     margin: 0;
   }
 
-  .add-on {
-    border-radius: 1.5em;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-    height: auto;
-    display: inline-block;
-    padding: 8px 12px 9px 8px;
-  }
-
-  .add-on i {
-    font-size: 17px;
-  }
-
   .search-remove {
     text-decoration: none;
     cursor: pointer;
@@ -629,4 +611,8 @@
     min-height: 400px;
     background-color: #FFFFFF;
   }
+
+  .hbase-subnav {
+    padding: 2px 10px 0 10px;
+  }
 }

+ 4 - 4
apps/hbase/src/hbase/templates/app.mako

@@ -138,7 +138,7 @@ ${ commonheader(None, "hbase", user, request) | n,unicode }
       <span class="dropdown">
         <a class="dropdown-toggle btn" id="dLabel" data-toggle="dropdown">
           ${_('Switch Cluster')}
-          <b class="caret" style="margin-top: 0"></b>
+          <b class="caret"></b>
         </a>
         <ul id="cluster-menu" class="dropdown-menu" role="menu" aria-labelledby="dLabel" data-bind="foreach: hbaseApp.clusters()">
           <li><a data-bind="text: $data.name, click: function(){ routie($data.name); }"></a></li>
@@ -238,9 +238,9 @@ ${ commonheader(None, "hbase", user, request) | n,unicode }
   <!-- Table View Page -->
   <div id="hbase-page-dataview" class="hbase-page">
     <div class="subnav sticky">
-      <div class="container-fluid">
+      <div class="hbase-subnav">
         <div class="row-fluid">
-          <div id="searchbar-main" class="span5" data-bind="click: search.clickTagBar">
+          <div class="searchbar-main span5" data-bind="click: search.clickTagBar">
             <a class="search-remove" data-bind="visible: search.cur_input() != '', click: function(){ hbaseApp.search.cur_input(''); hbaseApp.search.focused(true) }"><i class="fa fa-times-circle"></i></a>
             <div id="search-tags" contenteditable="true" data-bind="editableText: search.cur_input, hasfocus: search.focused, css: { 'active': search.cur_input() != '' }, event: { 'keydown': search.onKeyDown, click: search.updateMenu.bind(null) }" data-placeholder="${_('row_key, row_prefix* +scan_len [col1, family:col2, fam3:, col_prefix* +3, fam: col2 to col3] {Filter1() AND Filter2()}')}">
             </div>
@@ -285,7 +285,7 @@ ${ commonheader(None, "hbase", user, request) | n,unicode }
 
     <br/><br/><br/><br/>
     <div class="subnav navbar-fixed-bottom well-small">
-        <div class="container-fluid">
+        <div class="hbase-subnav">
           <div class="footer-slider">
             <span data-bind="visible: !hbaseApp.views.tabledata.isLoading()">
               ${_('Fetched')}

Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно