浏览代码

HUE-5414 [assist] Improve filter styling and positioning

Johan Ahlen 9 年之前
父节点
当前提交
9b85463
共有 1 个文件被更改,包括 18 次插入3 次删除
  1. 18 3
      desktop/core/src/desktop/templates/assist.mako

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

@@ -427,6 +427,21 @@ from notebook.conf import ENABLE_QUERY_BUILDER
       color: #444;
       color: #444;
       font-size: 14px;
       font-size: 14px;
     }
     }
+
+    .assist-filter {
+      margin-right: 8px;
+    }
+
+    .assist-filter input {
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+      width: 100%;
+
+      border-radius: 4px;
+      border: 1px solid #DDD;
+      box-shadow: none;
+    }
   </style>
   </style>
 
 
   <script type="text/html" id="assist-no-database-entries">
   <script type="text/html" id="assist-no-database-entries">
@@ -883,7 +898,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER
           <div>
           <div>
             <label class="checkbox inline-block margin-left-5"><input type="checkbox" data-bind="checked: $parent.showCores" />${_('Show cores')}</label>
             <label class="checkbox inline-block margin-left-5"><input type="checkbox" data-bind="checked: $parent.showCores" />${_('Show cores')}</label>
           </div>
           </div>
-          <div><input id="searchInput" class="clearable" type="text" placeholder="${ _('Collection name...') }" style="width:90%;" data-bind="hasFocus: $parent.editingSearch, clearable: $parent.filter, value: $parent.filter, valueUpdate: 'afterkeydown'"/></div>
+          <div class="assist-filter"><input id="searchInput" class="clearable" type="text" placeholder="${ _('Collection name...') }" data-bind="hasFocus: $parent.editingSearch, clearable: $parent.filter, value: $parent.filter, valueUpdate: 'afterkeydown'"/></div>
         </div>
         </div>
         <div class="assist-flex-fill assist-collections-scrollable">
         <div class="assist-flex-fill assist-collections-scrollable">
           <div data-bind="visible: ! loading() && ! hasErrors()" style="position: relative;">
           <div data-bind="visible: ! loading() && ! hasErrors()" style="position: relative;">
@@ -1043,7 +1058,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER
       </div>
       </div>
     </div>
     </div>
     <div class="assist-flex-search" data-bind="visible: hasEntries() && isSearchVisible() && ! hasErrors()">
     <div class="assist-flex-search" data-bind="visible: hasEntries() && isSearchVisible() && ! hasErrors()">
-      <div><input id="searchInput" class="clearable" type="text" placeholder="${ _('Database name...') }" style="margin-top:3px;width:90%;" data-bind="hasFocus: editingSearch, clearable: filter.query, value: filter.query, valueUpdate: 'afterkeydown'"/></div>
+      <div class="assist-filter"><input id="searchInput" class="clearable" type="text" placeholder="${ _('Database name...') }" style="margin-top:3px;" data-bind="hasFocus: editingSearch, clearable: filter.query, value: filter.query, valueUpdate: 'afterkeydown'"/></div>
     </div>
     </div>
     <div class="assist-flex-fill assist-db-scrollable" data-bind="visible: ! hasErrors() && ! loading() && hasEntries()">
     <div class="assist-flex-fill assist-db-scrollable" data-bind="visible: ! hasErrors() && ! loading() && hasEntries()">
       <!-- ko if: ! loading() && filteredEntries().length == 0 -->
       <!-- ko if: ! loading() && filteredEntries().length == 0 -->
@@ -1082,7 +1097,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER
         <label class="checkbox inline-block margin-left-10"><input type="checkbox" data-bind="checked: filter.showViews" />${_('Views')}</label>
         <label class="checkbox inline-block margin-left-10"><input type="checkbox" data-bind="checked: filter.showViews" />${_('Views')}</label>
         <!-- ko if: filter.enableActiveFilter --><label class="checkbox inline-block margin-left-10"><input type="checkbox" data-bind="checked: filter.showActive" />${_('Active')}</label><!-- /ko -->
         <!-- ko if: filter.enableActiveFilter --><label class="checkbox inline-block margin-left-10"><input type="checkbox" data-bind="checked: filter.showActive" />${_('Active')}</label><!-- /ko -->
       </div>
       </div>
-      <div><input id="searchInput" class="clearable" type="text" placeholder="${ _('Table name...') }" style="width:90%;" data-bind="hasFocus: editingSearch, clearable: filter.query, value: filter.query, valueUpdate: 'afterkeydown'"/></div>
+      <div class="assist-filter"><input id="searchInput" class="clearable" type="text" placeholder="${ _('Table name...') }" data-bind="hasFocus: editingSearch, clearable: filter.query, value: filter.query, valueUpdate: 'afterkeydown'"/></div>
     </div>
     </div>
     <div class="assist-flex-fill assist-db-scrollable" data-bind="visible: ! hasErrors() && ! loading()">
     <div class="assist-flex-fill assist-db-scrollable" data-bind="visible: ! hasErrors() && ! loading()">
       <!-- ko template: 'assist-db-entries' --><!-- /ko -->
       <!-- ko template: 'assist-db-entries' --><!-- /ko -->