Pārlūkot izejas kodu

HUE-5100 [hbase] Swap Codemirror to Ace

Enrico Berti 9 gadi atpakaļ
vecāks
revīzija
32a8dde

+ 2 - 2
apps/hbase/src/hbase/static/hbase/css/hbase.css

@@ -533,8 +533,8 @@ ul#hbase-breadcrumbs li a {
   min-height: 600px;
 }
 
-#cell_edit_modal .CodeMirror {
-  height: 100%;
+#ace_target {
+  min-height: 400px;
 }
 
 #cell_edit_modal .modal-body {

+ 26 - 27
apps/hbase/src/hbase/static/hbase/js/utils.js

@@ -94,37 +94,37 @@ function launchModal(modal, data) {
   switch (modal) {
     case 'cell_edit_modal':
       if (data.mime().split('/')[0] == 'text') {
-        var target = document.getElementById('codemirror_target');
-        var mime = data.mime;
-        if (mime == "text/json") {
-          mime = {name: "javascript", json: true};
+        var target = document.getElementById('ace_target_hidden');
+        var mime = data.mime();
+        var aceMode = 'ace/mode/text';
+        switch (mime) {
+          case 'text/json':
+            aceMode = 'ace/mode/json';
+            break;
+          case 'text/xml':
+            aceMode = 'ace/mode/xml';
+            break;
         }
-        var cm = CodeMirror.fromTextArea(target, {
-          mode: mime,
-          tabMode: 'indent',
-          lineNumbers: true,
-          readOnly: $(target).is(":disabled")
+        var editor = ace.edit('ace_target');
+        editor.setOptions({
+          readOnly: $('#ace_target').is(':disabled')
         });
-        data.codeMirror = cm;
+        editor.setTheme($.totalStorage('hue.ace.theme') || 'ace/theme/hue');
+        editor.getSession().setMode(aceMode);
+        editor.setValue($(target).val(), -1);
+
+        data.ace = editor;
 
         var updateTimeout = 0;
-        cm.on("change", function(cm) {
+        editor.on("change", function() {
           clearTimeout(updateTimeout);
           updateTimeout = setTimeout(function () {
-            data.value(cm.getValue());
+            data.value(editor.getValue());
           }, 100);
         });
 
         data.showingCurrent.subscribe(function(showingCurrent) {
-          cm.options.readOnly = ! showingCurrent;
-          cm.refresh();
-        });
-
-        setTimeout(function () {
-          cm.refresh()
-        }, 401); //CM invis bug workaround
-        element.find('input[type=submit]').click(function () {
-          cm.save();
+          editor.setOption('readOnly', !showingCurrent)
         });
       }
       app.focusModel(data.content);
@@ -188,10 +188,9 @@ function showFullEditor(cellContent) {
     content: cellContent,
     mime: ko.observable(detectMimeType(currentValue)),
 
-    updateCodeMirror: function() {
-      if (this.codeMirror) {
-        this.codeMirror.setValue(this.value());
-        this.codeMirror.refresh()
+    updateAce: function() {
+      if (this.ace) {
+        this.ace.setValue(this.value(), -1);
       }
     },
 
@@ -201,7 +200,7 @@ function showFullEditor(cellContent) {
       }
       this.value(item.value);
       this.mime(detectMimeType(this.value()));
-      this.updateCodeMirror();
+      this.updateAce();
       this.showingCurrent(false);
       this.timestamp(item.timestamp);
     },
@@ -212,7 +211,7 @@ function showFullEditor(cellContent) {
         this.mime(detectMimeType(this.value()));
         this.showingCurrent(true);
         this.timestamp(this.content.timestamp);
-        this.updateCodeMirror();
+        this.updateAce();
       }
     }
   });

+ 11 - 7
apps/hbase/src/hbase/templates/app.mako

@@ -398,11 +398,11 @@ ${ commonheader(None, "hbase", user, request) | n,unicode }
         <!-- ko if: showingCurrent -->
           <button class="btn" data-dismiss="modal" aria-hidden="true">${_('Cancel')}</button>
           <a id="file-upload-btn" class="btn fileChooserBtn" aria-hidden="true"><i class="fa fa-upload"></i> ${_('Upload')}</a>
-          <input data-bind="visible: mime().split('/')[0].toLowerCase() != 'application' && mime().split('/')[0].toLowerCase() != 'image'" type="submit" class="btn btn-primary" value="${_('Save')}">
+          <input data-bind="visible: mime().split('/')[0].toLowerCase() != 'application' && mime().split('/')[0].toLowerCase() != 'image'" type="submit" class="btn btn-primary disable-enter" value="${_('Save')}">
         <!-- /ko -->
         <!-- ko ifnot: showingCurrent -->
           <button class="btn" data-dismiss="modal" aria-hidden="true">${_('Cancel')}</button>
-          <input type="submit" class="btn btn-primary" value="${_('Revert')}">
+          <input type="submit" class="btn btn-primary disable-enter" value="${_('Revert')}">
         <!-- /ko -->
       </div>
     </script>
@@ -413,7 +413,8 @@ ${ commonheader(None, "hbase", user, request) | n,unicode }
     </script>
 
     <script id="cell_text_template" type="text/html">
-      <textarea id="codemirror_target" data-bind="text: value, disable: !showingCurrent()" data-use-post="true"></textarea>
+      <textarea id="ace_target_hidden" data-bind="text: value, disable: !showingCurrent()" data-use-post="true" style="display:none"></textarea>
+      <div id="ace_target"></div>
     </script>
 
     <script id="cell_application_template" type="text/html">
@@ -486,10 +487,13 @@ canWrite = ${ str(can_write).lower() };
 <script src="${ static('desktop/ext/js/datatables-paging-0.1.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/routie-0.3.0.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/mustache.js') }" type="text/javascript" charset="utf-8"></script>
-<script src="${ static('desktop/ext/js/codemirror-3.11.js') }"></script>
-<script src="${ static('desktop/ext/js/codemirror-xml.js') }"></script>
-<script src="${ static('desktop/ext/js/codemirror-javascript.js') }"></script>
-<link rel="stylesheet" href="${ static('desktop/ext/css/codemirror.css') }">
+
+<script src="${ static('desktop/js/ace/ace.js') }"></script>
+<script src="${ static('desktop/js/ace/mode-impala.js') }"></script>
+<script src="${ static('desktop/js/ace/mode-hive.js') }"></script>
+<script src="${ static('desktop/js/ace/ext-language_tools.js') }"></script>
+<script src="${ static('desktop/js/ace.extended.js') }"></script>
+
 
 <script src="${ static('hbase/js/base.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('hbase/js/utils.js') }" type="text/javascript" charset="utf-8"></script>