Ver código fonte

[editor] Use foreachVisible in the DB selection dropdown

Johan Ahlen 9 anos atrás
pai
commit
2ec8f92

+ 25 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -2295,11 +2295,35 @@ body {
   transition: opacity .3s;
 }
 
+.hue-inner-drop-down {
+  margin: 0 !important;
+  padding: 0;
+  list-style: none;
+  font-size: 13px;
+}
+
+.hue-inner-drop-down > li,
 .hue-context-menu > li {
   min-width: 170px;
   color: #e5e5e5;
 }
 
+.hue-inner-drop-down > li > a {
+  display: block;
+  position: relative;
+  clear: both;
+  height: 22px;
+  line-height: 22px;
+  vertical-align: middle;
+  padding: 6px 16px 6px 16px;
+
+  color: #333;
+  text-decoration: none;
+  font-weight: 400;
+  white-space: nowrap;
+  transition: background-color .3s;
+}
+
 .hue-context-menu > li > a {
   display: block;
   position: relative;
@@ -2332,6 +2356,7 @@ body {
   white-space: nowrap;
 }
 
+.hue-inner-drop-down > li > a:hover,
 .hue-context-menu > li > a:not(.disabled):hover {
   background-color: #DBE8F1;
 }

+ 5 - 5
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -479,11 +479,11 @@ ${ require.config() }
     <span class="execution-timer" data-bind="visible: type() != 'text' && status() != 'ready' && status() != 'loading', text: result.executionTime().toHHMMSS()"></span>
     <!-- ko if: availableDatabases().length > 0 -->
     <a class="inactive-action active-database margin-left-10" href="javascript:void(0)" data-toggle="dropdown" data-bind="toggle: dbSelectionVisible, css: { 'blue': dbSelectionVisible }"><span data-bind="visible: isSqlDialect, text: database"></span> <i class="fa fa-caret-down"></i></a>
-    <ul class="dropdown-menu" data-bind="foreach: availableDatabases">
-      <li>
-        <a href="javascript:void(0)" data-bind="text: $data, click: function () { $parent.database($data); }"></a>
-      </li>
-    </ul>
+    <div class="dropdown-menu" style="overflow-y: scroll; height: 200px;">
+      <ul class="hue-inner-drop-down" data-bind="foreachVisible: { data: availableDatabases, minHeight: 34, container: '.dropdown-menu' }">
+        <li><a href="javascript:void(0)" data-bind="text: $data, click: function () { $parent.database($data); }"></a></li>
+      </ul>
+    </div>
     <!-- /ko -->
     <a class="inactive-action margin-left-10" href="javascript:void(0)" data-bind="visible: status() != 'ready' && status() != 'loading' && errors().length == 0, click: function() { hideFixedHeaders(); $data.showLogs(!$data.showLogs());}, css: {'blue': $data.showLogs}" title="${ _('Show Logs') }"><i class="fa fa-file-text-o"></i></a>
     <a class="inactive-action margin-left-10" href="javascript:void(0)" data-bind="click: function(){ settingsVisible(! settingsVisible()) }, visible: hasProperties, css: { 'blue' : settingsVisible }"><i class="fa fa-cog"></i></a>