浏览代码

HUE-5831 [assist] Improve styling of document icons in the assist panel

Johan Ahlen 8 年之前
父节点
当前提交
66ddb43

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 31 - 20
desktop/core/src/desktop/static/desktop/less/hue-assist.less

@@ -115,7 +115,7 @@
   top: 2px;
   margin: 0;
   z-index: 1000;
-  color: #D1D1D1;
+  color: @cui-gray-400;
   font-size: 14px;
   -webkit-transition: margin 0.2s linear, color 0.5s ease;
   -moz-transition: margin 0.2s linear, color 0.5s ease;
@@ -164,13 +164,13 @@
 
 .assist-spinner {
   font-size: 20px;
-  color: #BBB;
+  color: @cui-gray-400;
 }
 
 .assist-header {
   .flex(1);
   color: @hue-primary-color-dark;
-  background-color: #f9f9f9;
+  background-color: @cui-gray-050;
   border-top: 1px solid @cui-default-border-color;
   border-bottom: 1px solid @cui-default-border-color;
   font-weight: bold;
@@ -194,7 +194,7 @@
 
 .assist-inner-header {
   width: 100%;
-  color: #737373;
+  color: @cui-gray-700;
   margin-left:3px;
   margin-bottom:2px;
   font-weight: bold;
@@ -287,7 +287,7 @@
 }
 
 .assist-tables > li.selected {
-  background-color: #EEE;
+  background-color: @cui-gray-200;
 }
 
 .assist-breadcrumb {
@@ -296,13 +296,13 @@
 }
 
 .assist-breadcrumb span {
-  color: #737373;
+  color: @cui-gray-800;
 }
 
 .assist-breadcrumb a:not(.inactive-action) {
   cursor: pointer;
   text-decoration: none;
-  color: #737373;
+  color: @cui-gray-800;
   .hue-ease-transition(color);
 }
 
@@ -317,6 +317,15 @@
   margin-right:8px;
 }
 
+.assist-document-breadcrumb,
+.assist-document-link {
+  font-size: 14px;
+}
+
+.assist-document-link .hi {
+  font-size: 18px;
+}
+
 .assist-table-link {
   font-size: 13px;
 }
@@ -325,15 +334,17 @@
   font-size: 12px;
 }
 
+.assist-document-link,
+.assist-document-link:focus,
 .assist-table-link,
 .assist-table-link:focus {
-  color: #444;
+  color: @cui-gray-800;
 }
 
 .assist-field-link,
 .assist-field-link:focus {
   white-space: nowrap;
-  color: #737373;
+  color: @cui-gray-700;
 }
 
 .assist-db-header-actions {
@@ -342,7 +353,7 @@
   right: 0;
   padding-left:4px;
   padding-right: 13px;
-  background-color: #FFF;
+  background-color: @cui-white;
 }
 
 .assist-db-header-actions > * {
@@ -353,8 +364,8 @@
   position:absolute;
   top: 0;
   right: 0;
-  padding-left:4px;
-  background-color: #FFF;
+  padding-left: 4px;
+  background-color: @cui-white;
 }
 
 .assist-file-actions  {
@@ -363,7 +374,7 @@
   right: 0;
   padding-right: 2px;
   padding-left:4px;
-  background-color: #FFF;
+  background-color: @cui-white;
 }
 
 .table-actions {
@@ -371,7 +382,7 @@
 }
 
 .assist-tables > li.selected .assist-actions {
-  background-color: #EEE;
+  background-color: @cui-gray-200;
 }
 
 .assist-details-wrap {
@@ -498,7 +509,7 @@
   line-height: 10px;
   font-size: 11px;
   padding: 3px 6px;
-  color: #FFF;
+  color: @cui-white;
   background-color: @hue-primary-color-dark;
   border-radius: 6px;
 }
@@ -525,13 +536,13 @@
 }
 
 .function-dialect-dropdown a span {
-  color: #444;
+  color: @cui-gray-800;
   font-size: 14px;
   font-weight: 600;
 }
 
 .function-dialect-dropdown a i {
-  color: #444;
+  color: @cui-gray-800;
   font-size: 14px;
 }
 
@@ -649,7 +660,7 @@
   .nav-autocomplete-empty {
     font-size: 12px;
     margin: 6px 8px;
-    color: #737373;
+    color: @cui-gray-700;
     font-style: italic;
   }
 
@@ -740,7 +751,7 @@
   .flex(0 0 35px);
   border-top: 1px solid @cui-default-border-color;
   z-index: 100;
-  background-color: #FFF;
+  background-color: @cui-white;
 }
 
 .sql-context-link-row {
@@ -764,7 +775,7 @@
   letter-spacing: 0.035em;
   margin-top: 50px;
   font-size: 14px;
-  color: #737373;
+  color: @cui-gray-700;
   text-align: center;
 }
 

+ 3 - 3
desktop/core/src/desktop/templates/assist.mako

@@ -481,7 +481,7 @@ from notebook.conf import get_ordered_interpreters
 
   <script type="text/html" id="assist-documents-inner-panel">
     <!-- ko with: activeEntry -->
-    <div class="assist-flex-header assist-breadcrumb">
+    <div class="assist-flex-header assist-document-breadcrumb assist-breadcrumb">
       <!-- ko ifnot: isRoot -->
       <a href="javascript: void(0);" data-bind="click: function () { parent.makeActive(); }">
         <i class="fa fa-fw fa-chevron-left"></i>
@@ -506,8 +506,8 @@ from notebook.conf import get_ordered_interpreters
                  <i class='fa fa-info' title="${ _('Details') }"></i>
                </a>
              </div>
-               <!-- ko template: 'document-icon-template' --><!-- /ko -->
-             <a href="javascript:void(0)" class="assist-entry assist-table-link" data-bind="click: open, attr: {'title': name }">
+             <a href="javascript:void(0)" class="assist-entry assist-document-link" data-bind="click: open, attr: {'title': name }">
+               <!-- ko template: { name: 'document-icon-template', data: { document: $data, showShareAddon: false } } --><!-- /ko -->
                <span data-bind="draggableText: { text: definition().name, meta: {'type': 'document', 'definition': definition()} }, text: definition().name"></span>
              </a>
            </li>

+ 1 - 1
desktop/core/src/desktop/templates/document_browser.mako

@@ -779,7 +779,7 @@ from desktop.views import _ko
                 <!-- /ko -->
               </ul>
               <div class="doc-browser-primary-col">
-                <!-- ko template: 'document-icon-template' --><!-- /ko -->
+                <!-- ko template: { name: 'document-icon-template', data: { document: $data, showShareAddon: true } } --><!-- /ko -->
                 <a href="javascript: void(0);" data-bind="text: definition().name, click: open, attr: { 'title': definition().name, 'href': definition().type === 'directory' ? '#' : definition().absoluteUrl }" class="margin-left-5"></a>
               </div>
               <div class="doc-browser-attr-group">

+ 3 - 3
desktop/core/src/desktop/templates/hue_icons.mako

@@ -142,7 +142,7 @@
   </svg>
 
   <script type="text/html" id="document-icon-template">
-    <svg class="hi">
+    <svg class="hi" data-bind="with: document">
     <!-- ko if: isDirectory -->
     <use xlink:href="#hi-folder"></use>
     <!-- /ko -->
@@ -160,10 +160,10 @@
     <!-- ko case: $default --><use xlink:href="#hi-file"></use><!-- /ko -->
     <!-- /ko -->
     <!-- /ko -->
-    <!-- ko if: (isShared() || isSharedWithMe()) && selected() -->
+    <!-- ko if: $parent.showShareAddon && (isShared() || isSharedWithMe()) && selected() -->
     <use xlink:href="#hi-share-addon-selected"></use>
     <!-- /ko -->
-    <!-- ko if: (isShared() || isSharedWithMe()) && !selected() -->
+    <!-- ko if: $parent.showShareAddon && (isShared() || isSharedWithMe()) && !selected() -->
     <use xlink:href="#hi-share-addon"></use>
     <!-- /ko -->
     </svg>

部分文件因为文件数量过多而无法显示