瀏覽代碼

HUE-8201 [frontend] Make custom styled scrollbars darker for a better visibility on standard screens and reduce discovery time

Enrico Berti 7 年之前
父節點
當前提交
64c49c9fe2

File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 3 - 2
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -3745,8 +3745,9 @@
 
 
   ko.bindingHandlers.delayedOverflow = {
-    init: function (element) {
+    init: function (element, valueAccessor) {
       var $element = $(element);
+
       $element.css("overflow", "hidden");
 
       var isTouch = false;
@@ -3758,7 +3759,7 @@
       $element.hover(function () {
         scrollTimeout = window.setTimeout(function () {
           $element.css("overflow", "auto");
-        }, 500);
+        }, valueAccessor && valueAccessor() === 'slow' ? 500 : 30);
       }, function () {
         if (!isTouch) {
           clearTimeout(scrollTimeout);

+ 2 - 2
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -55,11 +55,11 @@
   border-radius: 4.5px;
   border: 1px solid @cui-white;
   border-right-width: 2px;
-  background-color: @cui-gray-300;
+  background-color: @cui-gray-400;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: @cui-gray-500;
+  background-color: @cui-gray-600;
 }
 
 body {

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

@@ -628,7 +628,7 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
 
 <script type="text/html" id="snippet-log${ suffix }">
   <div class="snippet-log-container margin-bottom-10" data-bind="visible: showLogs() && status() != 'ready' && status() != 'loading'" style="display: none;">
-    <div data-bind="delayedOverflow, css: resultsKlass" style="margin-top: 5px; position: relative;">
+    <div data-bind="delayedOverflow: 'slow', css: resultsKlass" style="margin-top: 5px; position: relative;">
       <a href="javascript: void(0)" class="inactive-action close-logs-overlay" data-bind="click: function(){ showLogs(false) }">&times;</a>
       <ul data-bind="visible: jobs().length > 0, foreach: jobs" class="unstyled jobs-overlay">
         <li data-bind="attr: {'id': $data.name.substr(4)}">
@@ -677,7 +677,7 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
 
 <script type="text/html" id="query-tabs${ suffix }">
   <div class="query-history-container" data-bind="onComplete: function(){ redrawFixedHeaders(200); }">
-    <div data-bind="delayedOverflow, css: resultsKlass" style="margin-top: 5px; position: relative;">
+    <div data-bind="delayedOverflow: 'slow', css: resultsKlass" style="margin-top: 5px; position: relative;">
       <ul class="nav nav-tabs">
         <li data-bind="click: function(){ currentQueryTab('queryHistory'); }, css: {'active': currentQueryTab() == 'queryHistory'}, onClickOutside: function () { if ($parent.historyFilterVisible() && $parent.historyFilter() === '') { $parent.historyFilterVisible(false) } }">
           <a class="inactive-action" href="#queryHistory" data-toggle="tab">${_('Query History')}
@@ -1144,7 +1144,7 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
         <div class="clearfix margin-bottom-20"></div>
       <!-- /ko -->
 
-      <div class="ace-editor" data-bind="visible: statementType() === 'text' || statementType() !== 'text' && externalStatementLoaded(), css: {'single-snippet-editor ace-editor-resizable' : $root.editorMode(), 'active-editor': inFocus }, attr: { id: id() }, delayedOverflow, aceEditor: {
+      <div class="ace-editor" data-bind="visible: statementType() === 'text' || statementType() !== 'text' && externalStatementLoaded(), css: {'single-snippet-editor ace-editor-resizable' : $root.editorMode(), 'active-editor': inFocus }, attr: { id: id() }, delayedOverflow: 'slow', aceEditor: {
         snippet: $data,
         contextTooltip: '${ _ko("Right-click for details") }',
         expandStar: '${ _ko("Right-click to expand with columns") }',
@@ -1494,7 +1494,7 @@ ${ sqlSyntaxDropdown.sqlSyntaxDropdown() }
             <div class="resize-bar" style="top: 0; right: -10px; cursor: col-resize;"></div>
           </div>
           <div class="grid-side" data-bind="css: {'span9': isResultSettingsVisible, 'span12 nomargin': ! isResultSettingsVisible() }">
-            <div data-bind="visible: showGrid, delayedOverflow, css: resultsKlass" style="display: none;">
+            <div data-bind="visible: showGrid, delayedOverflow: 'slow', css: resultsKlass" style="display: none;">
               <table class="table table-condensed resultTable">
                 <thead>
                 <tr data-bind="foreach: result.meta">

Some files were not shown because too many files changed in this diff