瀏覽代碼

[metastore] Added toggleOverflow component to database params

Enrico Berti 10 年之前
父節點
當前提交
0e400684ac

+ 9 - 7
apps/metastore/src/metastore/templates/metastore.mako

@@ -325,16 +325,15 @@ ${ assist.assistPanel() }
             <div><a data-bind="attr: {'href': stats().hdfs_link, 'rel': stats().location }"><i class="fa fa-fw fa-hdd-o"></i> ${_('Location')}</a></div>
           </div>
         </div>
+        <!-- ko if: stats().parameters -->
         <div class="row-fluid">
           <div class="span12">
-            <div title="${ _('Parameters') }"><i class="fa fa-fw fa-cog muted"></i>
+            <div title="${ _('Parameters') }">
               <!-- ko template: { if: stats().parameters, name: 'metastore-databases-parameters', data: hueUtils.parseHivePseudoJson(stats().parameters) }--><!-- /ko -->
-              <!-- ko ifnot: stats().parameters -->
-              <i>${_('No parameters.')}</i>
-              <!-- /ko -->
             </div>
           </div>
         </div>
+        <!-- /ko -->
       </div>
     </div>
     <!-- /ko -->
@@ -404,9 +403,12 @@ ${ assist.assistPanel() }
 </script>
 
 <script type="text/html" id="metastore-databases-parameters">
-  <!-- ko foreach: Object.keys($data) -->
-    <div class="inline margin-right-20"><strong data-bind="text: $data"></strong>: <span data-bind="text: $parent[$data]"></span></div>
-  <!-- /ko -->
+  <div data-bind="toggleOverflow: {height: 24}">
+    <div class="inline margin-right-20"><i class="fa fa-fw fa-cog muted"></i></div>
+    <!-- ko foreach: Object.keys($data) -->
+      <div class="inline margin-right-20"><strong data-bind="text: $data"></strong>: <span data-bind="text: $parent[$data]"></span></div>
+    <!-- /ko -->
+  </div>
 </script>
 
 <script type="text/html" id="metastore-databases-actions">

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

@@ -2219,6 +2219,26 @@ div.navigator .pull-right .nav {
   color: #d1d1d1;
 }
 
+.toggle-overflow {
+  display: inline-block;
+  overflow: hidden;
+}
+
+.toggle-overflow-gradient {
+  position: relative;
+  z-index: 2;
+  top: -10px;
+  height: 10px;
+  line-height: 10px;
+  background-color: #F6F6F6;
+  cursor: s-resize;
+  text-align: center;
+}
+
+.toggle-overflow-gradient:hover {
+  background-color: #EEE;
+}
+
 /*
 Transition to Hue 4
 */

+ 8 - 0
desktop/core/src/desktop/static/desktop/js/hue.utils.js

@@ -168,6 +168,14 @@ Array.prototype.diff = function (a) {
     return parsedParams;
   }
 
+  hueUtils.isOverflowing = function (element) {
+    if (element instanceof jQuery) {
+      element = element[0];
+    }
+    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+  }
+
+
 }(hueUtils = window.hueUtils || {}));
 
 if (!Object.keys) {

+ 30 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -22,6 +22,36 @@
   }
 }(function (ko) {
 
+  ko.bindingHandlers.toggleOverflow = {
+    render: function ($element) {
+      if (hueUtils.isOverflowing($element.find('.toggle-overflow'))) {
+        $('<div>').addClass('toggle-overflow-gradient').html('<i class="fa fa-caret-down muted"></i>').appendTo($element);
+        $element.on('click', function () {
+          $element.find('.toggle-overflow-gradient').hide();
+          $element.find('.toggle-overflow').css('height', '');
+          $element.css('cursor', 'default');
+        });
+      }
+    },
+    init: function (element, valueAccessor) {
+      var $element = $(element);
+      var options = $.extend(valueAccessor(), {});
+      $element.wrapInner('<div class="toggle-overflow"></div>');
+      if (options.height) {
+        $element.find('.toggle-overflow').height(options.height);
+      }
+      if (options.width) {
+        $element.find('.toggle-overflow').width(options.width);
+      }
+    },
+    update: function (element, valueAccessor) {
+      var $element = $(element);
+      window.setTimeout(function () {
+        ko.bindingHandlers.toggleOverflow.render($element);
+      }, 100);
+    }
+  };
+
   ko.bindingHandlers.draggableText = {
     init: function (element, valueAccessor) {
       var $element = $(element);