Browse Source

HUE-7679 [dashboard] Add clearable to the simple ace editor

Johan Ahlen 8 years ago
parent
commit
1ecc547

File diff suppressed because it is too large
+ 0 - 0
apps/hbase/src/hbase/static/hbase/css/hbase.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


+ 33 - 1
desktop/core/src/desktop/static/desktop/less/components/hue-simple-ace.less

@@ -27,8 +27,40 @@
   .ace-editor {
     position: absolute;
     top: 4px;
-    right: 3px;
+    right: 15px;
     bottom: 4px;
     left: 3px;
   }
+
+  .ace-clearable {
+    position: absolute;
+    right: 5px;
+    z-index: 1;
+    top: 0;
+    bottom: 0;
+    width: 12px;
+    opacity: 0;
+    color: @cui-gray-700;
+    .hue-ease-transition(~"opacity, color");
+
+    &:hover {
+      color: @hue-primary-color-dark;
+    }
+
+    .fa {
+      position:absolute;
+      top: 0;
+      bottom: 0;
+      height: 13px;
+      font-size: 13px;
+      display: block;
+      margin: auto;
+      vertical-align: middle;
+    }
+
+    &.visible {
+      opacity: 1;
+      cursor: pointer;
+    }
+  }
 }

+ 12 - 8
desktop/core/src/desktop/static/desktop/less/hue-mixins.less

@@ -59,17 +59,21 @@
 }
 
 .hue-linear-transition(@attributes) {
-  -webkit-transition: @attributes 0.2s linear;
-  -moz-transition: @attributes 0.2s linear;
-  -ms-transition: @attributes 0.2s linear;
-  transition: @attributes 0.2s linear;
+  @value: ~`"@{attributes}".replace(/,/g, ' .2s linear,')`;
+
+  -webkit-transition: @value .2s linear;
+  -moz-transition: @value .2s linear;
+  -ms-transition: @value .2s linear;
+  transition: @value .2s linear;
 }
 
 .hue-ease-transition(@attributes) {
-  -webkit-transition: @attributes 0.2s ease;
-  -moz-transition: @attributes 0.2s ease;
-  -ms-transition: @attributes 0.2s ease;
-  transition: @attributes 0.2s ease;
+  @value: ~`"@{attributes}".replace(/,/g, ' .2s ease,')`;
+
+  -webkit-transition: @value .2s ease;
+  -moz-transition: @value .2s ease;
+  -ms-transition: @value .2s ease;
+  transition: @value .2s ease;
 }
 
 .hue-box-shadow-top {

+ 10 - 0
desktop/core/src/desktop/templates/ko_components/ko_simple_ace_editor.mako

@@ -27,6 +27,7 @@ from desktop.views import _ko
   <script type="text/html" id="hue-simple-ace-editor-template">
     <!-- ko if: singleLine -->
     <div class="simple-ace-single-line">
+      <div class="ace-clearable" data-bind="css: { 'visible': value() !== '' }, click: clear"><i class="fa fa-times-circle"></i></div>
       <div class="ace-editor"></div>
     </div>
     <!-- /ko -->
@@ -961,6 +962,15 @@ from desktop.views import _ko
         });
       };
 
+      SimpleAceEditor.prototype.clear = function () {
+        var self = this;
+        if (self.ace()) {
+          self.ace().setValue('');
+        } else {
+          self.value('');
+        }
+      };
+
       SimpleAceEditor.prototype.dispose = function () {
         var self = this;
         self.disposeFunctions.forEach(function (dispose) {

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