Ver Fonte

HUE-5709 [core] Move the metastore styles to less

Johan Ahlen há 8 anos atrás
pai
commit
8010552443

+ 2 - 1
Gruntfile.js

@@ -16,7 +16,8 @@ module.exports = function(grunt) {
         },
         },
         files: {
         files: {
           'desktop/core/src/desktop/static/desktop/css/hue.css': 'desktop/core/src/desktop/static/desktop/less/hue.less',
           'desktop/core/src/desktop/static/desktop/css/hue.css': 'desktop/core/src/desktop/static/desktop/less/hue.less',
-          'desktop/core/src/desktop/static/desktop/css/hue3-extra.css': 'desktop/core/src/desktop/static/desktop/less/hue3-extra.less'
+          'desktop/core/src/desktop/static/desktop/css/hue3-extra.css': 'desktop/core/src/desktop/static/desktop/less/hue3-extra.less',
+          'apps/metastore/src/metastore/static/metastore/css/metastore.css': 'apps/metastore/src/metastore/static/metastore/less/metastore.less'
         }
         }
       }
       }
     },
     },

+ 64 - 34
apps/metastore/src/metastore/static/metastore/css/metastore.css

@@ -15,50 +15,40 @@
  See the License for the specific language governing permissions and
  See the License for the specific language governing permissions and
  limitations under the License.
  limitations under the License.
 */
 */
-
-.hueBreadcrumb {
-}
-
 .hueBreadcrumbBar {
 .hueBreadcrumbBar {
   padding: 0;
   padding: 0;
 }
 }
-
 .hueBreadcrumbBar li {
 .hueBreadcrumbBar li {
   padding: 12px;
   padding: 12px;
 }
 }
-
 .hueBreadcrumbBar li:first-child {
 .hueBreadcrumbBar li:first-child {
   padding-left: 0;
   padding-left: 0;
 }
 }
-
 .hueBreadcrumbBar a {
 .hueBreadcrumbBar a {
   color: #338BB8 !important;
   color: #338BB8 !important;
   display: inline !important;
   display: inline !important;
 }
 }
-
 .divider {
 .divider {
   color: #CCC;
   color: #CCC;
 }
 }
-
 .sidebar-nav {
 .sidebar-nav {
   padding: 0;
   padding: 0;
 }
 }
-
 .card-heading {
 .card-heading {
   padding-left: 6px !important;
   padding-left: 6px !important;
   border-bottom: none !important;
   border-bottom: none !important;
 }
 }
-
-.sampleTable td, .sampleTable th, .table-nowrap td, .table-nowrap th {
+.sampleTable td,
+.sampleTable th,
+.table-nowrap td,
+.table-nowrap th {
   white-space: nowrap;
   white-space: nowrap;
 }
 }
-
 h2.card-heading {
 h2.card-heading {
   border-bottom: 1px solid #e5e5e5!important;
   border-bottom: 1px solid #e5e5e5!important;
   font-size: 12px!important;
   font-size: 12px!important;
   font-weight: bold!important;
   font-weight: bold!important;
 }
 }
-
 .filter-box {
 .filter-box {
   float: left;
   float: left;
   margin-right: 10px;
   margin-right: 10px;
@@ -66,40 +56,33 @@ h2.card-heading {
   padding: 4px;
   padding: 4px;
   background-color: #F5F5F5;
   background-color: #F5F5F5;
 }
 }
-
 .filter-box a.pull-right {
 .filter-box a.pull-right {
   margin: 4px;
   margin: 4px;
 }
 }
-
-.filter-box select, .filter-box input {
+.filter-box select,
+.filter-box input {
   margin-bottom: 0;
   margin-bottom: 0;
 }
 }
-
 .add-filter {
 .add-filter {
   margin: 5px;
   margin: 5px;
   float: left;
   float: left;
 }
 }
-
 .checkbox.inline.pulled {
 .checkbox.inline.pulled {
   margin-right: 10px;
   margin-right: 10px;
   padding-top: 1px;
   padding-top: 1px;
 }
 }
-
 .checkbox.inline.pulled input {
 .checkbox.inline.pulled input {
   margin-left: 0;
   margin-left: 0;
   margin-right: 4px;
   margin-right: 4px;
 }
 }
-
 .metastore-main {
 .metastore-main {
   padding: 20px;
   padding: 20px;
   padding-top: 10px;
   padding-top: 10px;
 }
 }
-
 .metastore-main h3 {
 .metastore-main h3 {
   margin: 0;
   margin: 0;
   margin-bottom: 10px;
   margin-bottom: 10px;
 }
 }
-
 .empty-header-col,
 .empty-header-col,
 .metastore-main h4 {
 .metastore-main h4 {
   font-weight: bold;
   font-weight: bold;
@@ -110,40 +93,31 @@ h2.card-heading {
   border-bottom: 1px solid #DDD;
   border-bottom: 1px solid #DDD;
   padding-bottom: 3px;
   padding-bottom: 3px;
 }
 }
-
 .tile {
 .tile {
   margin-bottom: 20px;
   margin-bottom: 20px;
   min-height: 124px;
   min-height: 124px;
 }
 }
-
 .properties-table {
 .properties-table {
   width: 100%;
   width: 100%;
 }
 }
-
 .properties-table td {
 .properties-table td {
   padding-top: 5px;
   padding-top: 5px;
 }
 }
-
 .property-name {
 .property-name {
   padding-left: 10px;
   padding-left: 10px;
 }
 }
-
 .empty-message {
 .empty-message {
   padding: 10px;
   padding: 10px;
 }
 }
-
 .editable-breadcrumbs {
 .editable-breadcrumbs {
   cursor: text;
   cursor: text;
 }
 }
-
 .editable-breadcrumbs:hover {
 .editable-breadcrumbs:hover {
   background-color: #F0F0F0;
   background-color: #F0F0F0;
 }
 }
-
 .editable-breadcrumb-input {
 .editable-breadcrumb-input {
   padding: 0!important;
   padding: 0!important;
 }
 }
-
 .editable-breadcrumb-input input {
 .editable-breadcrumb-input input {
   font-size: 22.75px;
   font-size: 22.75px;
   height: 36px;
   height: 36px;
@@ -157,8 +131,64 @@ h2.card-heading {
   box-shadow: none;
   box-shadow: none;
   font-weight: 300;
   font-weight: 300;
 }
 }
-
 .fileChooserBtn {
 .fileChooserBtn {
   height: 29px!important;
   height: 29px!important;
 }
 }
-
+.acl-panel {
+  border-left: 1px solid #e5e5e5;
+  padding-top: 6px;
+  padding-left: 12px;
+}
+.acl-panel .nav-tabs {
+  margin-bottom: 0;
+}
+.acl-panel h4:not(:first-child) {
+  margin-top: 20px;
+}
+.acl-panel-content {
+  padding: 6px;
+  overflow-y: scroll;
+}
+.acl-block-title {
+  background-color: #eeeeee;
+  font-weight: bold;
+  padding: 3px;
+  margin-top: 14px;
+  margin-bottom: 4px;
+}
+.acl-block {
+  background-color: #f6f6f6;
+  padding: 3px;
+  margin-bottom: 4px;
+}
+.acl-block .checkbox,
+.acl-block .radio {
+  margin-left: 6px;
+}
+.acl-block-airy {
+  padding: 6px;
+}
+.acl-block-airy input {
+  margin-bottom: 0;
+}
+.acl-block-section {
+  margin-top: 10px;
+}
+.acl-block-section input {
+  margin-left: 14px;
+}
+.span6 .acl-block input[type='text'] {
+  width: 25%;
+}
+.span6 .acl-block input[type='text'] {
+  width: 21%;
+}
+.acl-actions {
+  padding: 5px;
+  text-align: center;
+  color: #CCC;
+  font-size: 20px;
+}
+.acl-actions span:hover {
+  color: #999;
+}

+ 235 - 0
apps/metastore/src/metastore/static/metastore/less/metastore.less

@@ -0,0 +1,235 @@
+/*
+ Licensed to Cloudera, Inc. under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  Cloudera, Inc. licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+@import (reference) "cui/colors.less";
+@import (reference) "hue-attributes.less";
+
+.hueBreadcrumbBar {
+  padding: 0;
+}
+
+.hueBreadcrumbBar li {
+  padding: 12px;
+}
+
+.hueBreadcrumbBar li:first-child {
+  padding-left: 0;
+}
+
+.hueBreadcrumbBar a {
+  color: @hue-primary-color-dark !important;
+  display: inline !important;
+}
+
+.divider {
+  color: #CCC;
+}
+
+.sidebar-nav {
+  padding: 0;
+}
+
+.card-heading {
+  padding-left: 6px !important;
+  border-bottom: none !important;
+}
+
+.sampleTable td, .sampleTable th, .table-nowrap td, .table-nowrap th {
+  white-space: nowrap;
+}
+
+h2.card-heading {
+  border-bottom: 1px solid #e5e5e5!important;
+  font-size: 12px!important;
+  font-weight: bold!important;
+}
+
+.filter-box {
+  float: left;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  padding: 4px;
+  background-color: #F5F5F5;
+}
+
+.filter-box a.pull-right {
+  margin: 4px;
+}
+
+.filter-box select, .filter-box input {
+  margin-bottom: 0;
+}
+
+.add-filter {
+  margin: 5px;
+  float: left;
+}
+
+.checkbox.inline.pulled {
+  margin-right: 10px;
+  padding-top: 1px;
+}
+
+.checkbox.inline.pulled input {
+  margin-left: 0;
+  margin-right: 4px;
+}
+
+.metastore-main {
+  padding: 20px;
+  padding-top: 10px;
+}
+
+.metastore-main h3 {
+  margin: 0;
+  margin-bottom: 10px;
+}
+
+.empty-header-col,
+.metastore-main h4 {
+  font-weight: bold;
+  color: #999;
+  font-size: 14px;
+  text-transform: uppercase;
+  padding-left: 4px;
+  border-bottom: 1px solid #DDD;
+  padding-bottom: 3px;
+}
+
+.tile {
+  margin-bottom: 20px;
+  min-height: 124px;
+}
+
+.properties-table {
+  width: 100%;
+}
+
+.properties-table td {
+  padding-top: 5px;
+}
+
+.property-name {
+  padding-left: 10px;
+}
+
+.empty-message {
+  padding: 10px;
+}
+
+.editable-breadcrumbs {
+  cursor: text;
+}
+
+.editable-breadcrumbs:hover {
+  background-color: #F0F0F0;
+}
+
+.editable-breadcrumb-input {
+  padding: 0!important;
+}
+
+.editable-breadcrumb-input input {
+  font-size: 22.75px;
+  height: 36px;
+  margin: 0;
+  margin-top: 3px;
+  padding-left: 11px;
+  border-radius: 2px;
+  border: 1px solid #EEE;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  font-weight: 300;
+}
+
+.fileChooserBtn {
+  height: 29px!important;
+}
+
+.acl-panel {
+  border-left: 1px solid #e5e5e5;
+  padding-top: 6px;
+  padding-left: 12px;
+}
+
+.acl-panel .nav-tabs {
+  margin-bottom: 0;
+}
+
+.acl-panel h4:not(:first-child) {
+  margin-top: 20px;
+}
+
+.acl-panel-content {
+  padding: 6px;
+  overflow-y: scroll;
+}
+
+.acl-block-title {
+  background-color: #eeeeee;
+  font-weight: bold;
+  padding: 3px;
+  margin-top: 14px;
+  margin-bottom: 4px;
+}
+
+.acl-block {
+  background-color: #f6f6f6;
+  padding: 3px;
+  margin-bottom: 4px;
+}
+
+.acl-block .checkbox, .acl-block .radio {
+  margin-left: 6px;
+}
+
+.acl-block-airy {
+  padding: 6px;
+}
+
+.acl-block-airy input {
+  margin-bottom: 0;
+}
+
+.acl-block-section {
+  margin-top: 10px;
+}
+
+.acl-block-section input {
+  margin-left: 14px;
+}
+
+.span6 .acl-block input[type='text'] {
+  width: 25%;
+}
+
+.span6 .acl-block input[type='text'] {
+  width: 21%;
+}
+
+.acl-actions {
+  padding: 5px;
+  text-align: center;
+  color: #CCC;
+  font-size: 20px;
+}
+
+.acl-actions span:hover {
+  color: #999;
+}

+ 69 - 146
apps/metastore/src/metastore/templates/metastore.mako

@@ -838,17 +838,17 @@ ${ components.menubar() }
         </div>
         </div>
         <h4 style="margin-top: 4px;">Privileges &nbsp;</h4>
         <h4 style="margin-top: 4px;">Privileges &nbsp;</h4>
 
 
-      <div class="acl-block-title">
-        <i class="fa fa-cube muted"></i> <a class="pointer"><span>customerFraud</span></a>
-      </div>
-      <div>
-      <div class="acl-block acl-block-airy">
-          <span class="muted" title="3 months ago">TABLE</span>
-          <span>
-            <a class="muted" target="_blank" style="margin-left: 4px" title="Open in Sentry" href="/security/hive"><i class="fa fa-external-link"></i></a>
-          </span>
-          <br>
-          server=<span>server1</span>
+        <div class="acl-block-title">
+          <i class="fa fa-cube muted"></i> <a class="pointer"><span>customerFraud</span></a>
+        </div>
+        <div>
+          <div class="acl-block acl-block-airy">
+            <span class="muted" title="3 months ago">TABLE</span>
+            <span>
+              <a class="muted" target="_blank" style="margin-left: 4px" title="Open in Sentry" href="/security/hive"><i class="fa fa-external-link"></i></a>
+            </span>
+            <br>
+            server=<span>server1</span>
             <span>
             <span>
               <i class="fa fa-long-arrow-right"></i> db=<a class="pointer" title="Browse db privileges"><span data-bind="text: $root.database().name"></span></a>
               <i class="fa fa-long-arrow-right"></i> db=<a class="pointer" title="Browse db privileges"><span data-bind="text: $root.database().name"></span></a>
             </span>
             </span>
@@ -858,148 +858,71 @@ ${ components.menubar() }
             <span style="display: none;">
             <span style="display: none;">
               <i class="fa fa-long-arrow-right"></i> column=<a class="pointer" title="Browse column privileges"><span></span></a>
               <i class="fa fa-long-arrow-right"></i> column=<a class="pointer" title="Browse column privileges"><span></span></a>
             </span>
             </span>
+            <i class="fa fa-long-arrow-right"></i> action=INSERT
+          </div>
 
 
-          <i class="fa fa-long-arrow-right"></i> action=INSERT
-      </div>
+          <div class="acl-block acl-block-airy">
+            <span class="muted" title="3 months ago">TABLE</span>
+            <span>
+              <a class="muted" target="_blank" style="margin-left: 4px" title="Open in Sentry" href="/security/hive"><i class="fa fa-external-link"></i></a>
+            </span>
+            <br>
+            server=server1
+            <span>
+              <i class="fa fa-long-arrow-right"></i> db=<a class="pointer" title="Browse db privileges"><span data-bind="text: $root.database().name"></span></a>
+            </span>
+            <span>
+              <i class="fa fa-long-arrow-right"></i> table=<a class="pointer" title="Browse table privileges"><span data-bind="text: name"></span></a>
+            </span>
+            <span style="display: none;">
+              <i class="fa fa-long-arrow-right"></i> column=<a class="pointer" title="Browse column privileges"><span></span></a>
+            </span>
 
 
-      <div class="acl-block acl-block-airy">
-        <span class="muted" title="3 months ago">TABLE</span>
+            <i class="fa fa-long-arrow-right"></i> action=<span>SELECT</span>
+          </div>
+        </div>
 
 
-        <span>
-          <a class="muted" target="_blank" style="margin-left: 4px" title="Open in Sentry" href="/security/hive"><i class="fa fa-external-link"></i></a>
-        </span>
-        <br>
+        <div class="acl-block acl-actions">
+          <span class="pointer" title="Show 50 more..." style="display: none;"><i class="fa fa-ellipsis-h"></i></span>
+          <span class="pointer" title="Add privilege"><i class="fa fa-plus"></i></span>
+          <span class="pointer" title="Undo" style="display: none;"> &nbsp; <i class="fa fa-undo"></i></span>
+          <span class="pointer" title="Save" style="display: none;"> &nbsp; <i class="fa fa-save"></i></span>
+        </div>
 
 
-        server=server1
+        <div class="acl-block-title">
+          <i class="fa fa-cube muted"></i> <a class="pointer"><span>customerAccess</span></a>
+        </div>
+        <div>
+          <div class="acl-block acl-block-airy">
+            <span class="muted" title="3 months ago">TABLE</span>
 
 
-          <span>
-            <i class="fa fa-long-arrow-right"></i> db=<a class="pointer" title="Browse db privileges"><span data-bind="text: $root.database().name"></span></a>
-          </span>
-          <span>
-            <i class="fa fa-long-arrow-right"></i> table=<a class="pointer" title="Browse table privileges"><span data-bind="text: name"></span></a>
-          </span>
-          <span style="display: none;">
-            <i class="fa fa-long-arrow-right"></i> column=<a class="pointer" title="Browse column privileges"><span></span></a>
-          </span>
+            <span>
+              <a class="muted" target="_blank" style="margin-left: 4px" title="Open in Sentry" href="/security/hive"><i class="fa fa-external-link"></i></a>
+            </span>
+            <br>
 
 
-          <i class="fa fa-long-arrow-right"></i> action=<span>SELECT</span>
-      </div>
-    </div>
-    <div class="acl-block acl-actions">
-      <span class="pointer" title="Show 50 more..." style="display: none;"><i class="fa fa-ellipsis-h"></i></span>
-      <span class="pointer" title="Add privilege"><i class="fa fa-plus"></i></span>
-      <span class="pointer" title="Undo" style="display: none;"> &nbsp; <i class="fa fa-undo"></i></span>
-      <span class="pointer" title="Save" style="display: none;"> &nbsp; <i class="fa fa-save"></i></span>
-    </div>
+            server=server1
 
 
-    <div class="acl-block-title">
-      <i class="fa fa-cube muted"></i> <a class="pointer"><span>customerAccess</span></a>
-    </div>
-    <div>
-      <div class="acl-block acl-block-airy">
-        <span class="muted" title="3 months ago">TABLE</span>
-
-        <span>
-          <a class="muted" target="_blank" style="margin-left: 4px" title="Open in Sentry" href="/security/hive"><i class="fa fa-external-link"></i></a>
-        </span>
-        <br>
-
-        server=server1
-
-          <span>
-            <i class="fa fa-long-arrow-right"></i> db=<a class="pointer" title="Browse db privileges"><span data-bind="text: $root.database().name"></span></a>
-          </span>
-          <span>
-            <i class="fa fa-long-arrow-right"></i> table=<a class="pointer" title="Browse table privileges"><span data-bind="text: name"></span></a>
-          </span>
-          <span style="display: none;">
-            <i class="fa fa-long-arrow-right"></i> column=<a class="pointer" title="Browse column privileges"><span></span></a>
-          </span>
-
-        <i class="fa fa-long-arrow-right"></i> action=<span>ALL</span>
-      </div>
-      <div class="acl-block acl-actions">
-        <span class="pointer" title="Show 50 more..." style="display: none;"><i class="fa fa-ellipsis-h"></i></span>
-        <span class="pointer" title="Add privilege"><i class="fa fa-plus"></i></span>
-        <span class="pointer" title="Undo" style="display: none;"> &nbsp; <i class="fa fa-undo"></i></span>
-        <span class="pointer" title="Save" style="display: none;"> &nbsp; <i class="fa fa-save"></i></span>
-      </div>
-    </div>
-  </div>
+              <span>
+                <i class="fa fa-long-arrow-right"></i> db=<a class="pointer" title="Browse db privileges"><span data-bind="text: $root.database().name"></span></a>
+              </span>
+              <span>
+                <i class="fa fa-long-arrow-right"></i> table=<a class="pointer" title="Browse table privileges"><span data-bind="text: name"></span></a>
+              </span>
+              <span style="display: none;">
+                <i class="fa fa-long-arrow-right"></i> column=<a class="pointer" title="Browse column privileges"><span></span></a>
+              </span>
 
 
-    <style>
-    .acl-panel {
-      border-left: 1px solid #e5e5e5;
-      padding-top: 6px;
-      padding-left: 12px;
-    }
-
-    .acl-panel .nav-tabs {
-      margin-bottom: 0;
-    }
-
-    .acl-panel h4:not(:first-child) {
-      margin-top: 20px;
-    }
-
-    .acl-panel-content {
-      padding: 6px;
-      overflow-y: scroll;
-    }
-
-    .acl-block-title {
-      background-color: #eeeeee;
-      font-weight: bold;
-      padding: 3px;
-      margin-top: 14px;
-      margin-bottom: 4px;
-    }
-
-    .acl-block {
-      background-color: #f6f6f6;
-      padding: 3px;
-      margin-bottom: 4px;
-    }
-
-    .acl-block .checkbox, .acl-block .radio {
-      margin-left: 6px;
-    }
-
-    .acl-block-airy {
-      padding: 6px;
-    }
-
-    .acl-block-airy input {
-      margin-bottom: 0;
-    }
-
-    .acl-block-section {
-      margin-top: 10px;
-    }
-
-    .acl-block-section input {
-      margin-left: 14px;
-    }
-
-    .span6 .acl-block input[type='text'] {
-      width: 25%;
-    }
-
-    .span6 .acl-block input[type='text'] {
-      width: 21%;
-    }
-
-    .acl-actions {
-      padding: 5px;
-      text-align: center;
-      color: #CCC;
-      font-size: 20px;
-    }
-
-    .acl-actions span:hover {
-      color: #999;
-    }
-    </style>
+            <i class="fa fa-long-arrow-right"></i> action=<span>ALL</span>
+          </div>
+          <div class="acl-block acl-actions">
+            <span class="pointer" title="Show 50 more..." style="display: none;"><i class="fa fa-ellipsis-h"></i></span>
+            <span class="pointer" title="Add privilege"><i class="fa fa-plus"></i></span>
+            <span class="pointer" title="Undo" style="display: none;"> &nbsp; <i class="fa fa-undo"></i></span>
+            <span class="pointer" title="Save" style="display: none;"> &nbsp; <i class="fa fa-save"></i></span>
+          </div>
+        </div>
+      </div>
     </div>
     </div>
 
 
     <div class="tab-pane" id="queries">
     <div class="tab-pane" id="queries">
@@ -1027,7 +950,7 @@ ${ components.menubar() }
             <td style="height: 10px; width: 70px; margin-top:5px;" data-bind="attr: {'title': joinpercent()}">
             <td style="height: 10px; width: 70px; margin-top:5px;" data-bind="attr: {'title': joinpercent()}">
               <div class="progress bar" style="background-color: #338bb8" data-bind="style: { 'width' : joinpercent() + '%' }"></div>
               <div class="progress bar" style="background-color: #338bb8" data-bind="style: { 'width' : joinpercent() + '%' }"></div>
             </td>
             </td>
-            <td><a data-bind="text: tableName, attr: { href: '/metastore/table/' + $root.database().name + '/' + tableName() }"</a></td>
+            <td><a data-bind="text: tableName, attr: { href: '/metastore/table/' + $root.database().name + '/' + tableName() }"></a></td>
             <td class="pointer"><code data-bind="text: joinColumns, click: scrollToColumn"></code></td>
             <td class="pointer"><code data-bind="text: joinColumns, click: scrollToColumn"></code></td>
             <td data-bind="text: numJoins"></td>
             <td data-bind="text: numJoins"></td>
           </tr>
           </tr>