Forráskód Böngészése

[editor] Make the code editor resizable

Johan Ahlen 10 éve
szülő
commit
7afde03af1

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

@@ -835,6 +835,30 @@
     }
   };
 
+  ko.bindingHandlers.aceResizer = {
+    init: function (element, valueAccessor) {
+      var options = ko.unwrap(valueAccessor());
+      var ace = options.ace;
+      var $target = $(options.target);
+      var $resizer = $(element);
+
+      $resizer.draggable({
+        axis: "y",
+        drag: function (event, ui) {
+          var currentHeight = ui.offset.top - 120;
+          $target.css("height", currentHeight + "px");
+          ace().resize();
+          ui.offset.top = 0;
+          ui.position.top = 0;
+        },
+        stop: function (event, ui) {
+          ui.offset.top = 0;
+          ui.position.top = 0;
+        }
+      });
+    }
+  };
+
   ko.bindingHandlers.splitDraggable = {
     init: function (element, valueAccessor) {
       var options = ko.unwrap(valueAccessor());

+ 34 - 5
desktop/libs/notebook/src/notebook/static/notebook/css/notebook.css

@@ -65,7 +65,7 @@ body {
   height: 100%;
   width: 4px;
   padding-left:1px;
-  cursor: ew-resize;
+  cursor: col-resize;
 }
 
 .resize-bar {
@@ -89,6 +89,9 @@ body {
   margin: 10px;
   margin-right: 30px;
   padding-bottom: 10px;
+}
+
+.notebook-snippet {
   border-bottom: 1px solid #e5e5e5;
   border-radius: 0;
 }
@@ -413,6 +416,36 @@ body {
   margin-right: 20px;
 }
 
+.ace-container-resizable {
+  position: relative;
+  min-height: 128px !important;
+}
+
+.ace-editor-resizable {
+  position: absolute;
+  top: 0;
+  left:0;
+  bottom:0;
+  right: 0;
+}
+
+.snippet-code-resizer {
+  border-top: 1px solid #F1F1F1;
+  margin-left: 35px;
+  margin-right: 20px;
+  cursor: row-resize;
+  text-align: center;
+  font-size: 12px;
+  height: 8px;
+  margin-bottom: 5px;
+  color: #E1E1E1;
+}
+.snippet-code-resizer > i {
+  -ms-transform: scale(1.3,1); /* IE 9 */
+  -webkit-transform: scale(1.3,1); /* Safari */
+  transform: scale(1.3,1);
+}
+
 .snippet-log-container {
   margin-left: 35px;
   margin-right: 20px;
@@ -634,10 +667,6 @@ table.airy tr td {
   padding: 4px;
 }
 
-.single-snippet-editor {
-  min-height: 128px;
-}
-
 .ace-filechooser {
   position: absolute;
   display: none;

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

@@ -402,7 +402,6 @@ ${ require.config() }
   </div>
 </script>
 
-
 <script type="text/html" id="notebook-snippet-header">
   <div class="inactive-action hover-actions inline"><span class="inactive-action" data-bind="css: { 'empty-title': name() === '' }, editable: name, editableOptions: { emptytext: '${_ko('My Snippet')}', mode: 'inline', enabled: true, placement: 'right' }" style="border:none;color: #DDD"></span></div>
   <div class="hover-actions inline pull-right" style="font-size: 15px;">
@@ -424,7 +423,7 @@ ${ require.config() }
 
 <script type="text/html" id="snippet">
   <div class="snippet-container row-fluid" data-bind="visibleOnHover: { override: inFocus, selector: '.hover-actions' }">
-    <div class="snippet card card-widget" data-bind="css: {'active-editor': inFocus, 'snippet-text' : type() == 'text', 'editor-mode': $root.editorMode}, attr: {'id': 'snippet_' + id()}, clickForAceFocus: ace">
+    <div class="snippet card card-widget" data-bind="css: {'notebook-snippet' : ! $root.editorMode, 'editor-mode': $root.editorMode, 'active-editor': inFocus, 'snippet-text' : type() == 'text'}, attr: {'id': 'snippet_' + id()}, clickForAceFocus: ace">
       <div style="position: relative;">
         <div class="snippet-row">
           <div class="snippet-left-bar">
@@ -445,6 +444,7 @@ ${ require.config() }
           </div>
         </div>
         <!-- ko template: { if: ['text', 'markdown'].indexOf(type()) == -1, name: 'snippet-execution-status' } --><!-- /ko -->
+        <!-- ko template: { if: $root.editorMode, name: 'snippet-code-resizer' } --><!-- /ko -->
         <!-- ko template: 'snippet-log' --><!-- /ko -->
         <!-- ko template: { if: ['text', 'jar', 'py', 'markdown'].indexOf(type()) == -1, name: 'snippet-results' } --><!-- /ko -->
         <div style="position: absolute; top:0; z-index: 301; width: 100%;">
@@ -523,13 +523,15 @@ ${ require.config() }
 
 <script type="text/html" id="code-editor-snippet-body">
   <div class="row-fluid" style="margin-bottom: 5px">
-    <div class="editor span12" data-bind="clickForAceFocus: ace">
-      <div class="ace-editor" data-bind="css: {'single-snippet-editor' : $root.editorMode, 'active-editor': inFocus }, attr: { id: id() }, delayedOverflow, aceEditor: {
+    <div class="editor span12" data-bind="css: {'single-snippet-editor ace-container-resizable' : $root.editorMode }, clickForAceFocus: ace">
+      <div class="ace-editor" data-bind="css: {'single-snippet-editor ace-editor-resizable' : $root.editorMode, 'active-editor': inFocus }, attr: { id: id() }, delayedOverflow, aceEditor: {
           snippet: $data,
           openIt: '${ _ko("Alt or Ctrl + Click to open it") }',
           aceOptions: {
             showLineNumbers: $root.editorMode,
-            showGutter: $root.editorMode
+            showGutter: $root.editorMode,
+            maxLines: $root.editorMode ? null : 25,
+            minLines: $root.editorMode ? null : 1
           }
         }"></div>
       </div>
@@ -796,6 +798,12 @@ ${ require.config() }
   </div>
 </script>
 
+<script type="text/html" id="snippet-code-resizer">
+  <div class="snippet-code-resizer" data-bind="aceResizer : { ace: ace, target: '.ace-container-resizable' }">
+    <i class="fa fa-ellipsis-h"></i>
+  </div>
+</script>
+
 <script type="text/html" id="notebook-snippet-type-controls">
   <div class="inactive-action dropdown hover-actions">
     <a class="snippet-side-btn" style="padding-right: 0; padding-left: 2px;" data-toggle="dropdown" href="javascript: void(0);">