Refactored frontend.

Moved output to editor tab.
Added collapse function to sidebar.

app/assets/javascripts/editor/editor.js.erb

@@ -100,7 +100,8 @@ var CodeOceanEditor = {
 
   showOutput: function(event) {
     event.preventDefault();
-    this.showTab(1);
+    this.showTab(0);
+    this.showOutputBar();
     $('#output').scrollTo($(this).attr('href'));
   },
 
@@ -144,10 +145,8 @@ var CodeOceanEditor = {
   handleKeyPress: function (event) {
     if (event.which === this.ALT_1_KEY_CODE) {
       this.showWorkspaceTab(event);
-    } else if (event.which === this.ALT_2_KEY_CODE) {
-      this.showTab(1);
     } else if (event.which === this.ALT_3_KEY_CODE) {
-      this.showTab(2);
+      this.showTab(1);
     } else if (event.which === this.ALT_R_KEY_CODE) {
       $('#run').trigger('click');
     } else if (event.which === this.ALT_S_KEY_CODE) {
@@ -270,16 +269,37 @@ var CodeOceanEditor = {
       var frame = $('[data-file-id="' + active_file.id + '"]').parent();
       this.showFrame(frame);
       this.toggleButtonStates();
-    });
+    }.bind(this));
   },
 
   initializeFileTreeButtons: function () {
     $('#create-file').on('click', this.showFileDialog.bind(this));
+    $('#create-file-collapsed').on('click', this.showFileDialog.bind(this));
     $('#destroy-file').on('click', this.confirmDestroy.bind(this));
+    $('#destroy-file-collapsed').on('click', this.confirmDestroy.bind(this));
     $('#download').on('click', this.downloadCode.bind(this));
+    $('#download-collapsed').on('click', this.downloadCode.bind(this));
     $('#request-for-comments').on('click', this.requestComments.bind(this));
   },
 
+  initializeSideBarCollapse: function() {
+    $('#sidebar-collapsed').addClass('hidden');
+    $('#sidebar-collapse-collapsed').on('click',this.handleSideBarToggle.bind(this));
+    $('#sidebar-collapse').on('click',this.handleSideBarToggle.bind(this))
+  },
+
+  handleSideBarToggle: function() {
+    $('#sidebar').toggleClass('sidebar-col').toggleClass('sidebar-col-collapsed');/**
+    $('#frames').toggleClass('editor-col')
+    if (main_area.hasClass('col-sm-10')) {
+      main_area.removeClass('col-sm-10').addClass('col-sm-11');
+    } else if (main_area.hasClass('col-sm-11')) {
+      main_area.removeClass('col-sm-11').addClass('col-sm-10');
+    }*/
+    $('#sidebar-collapsed').toggleClass('hidden');
+    $('#sidebar-uncollapsed').toggleClass('hidden');
+  },
+
   initializeRegexes: function () {
     this.regex_for_language.set("ace/mode/python", /File "(.+?)", line (\d+)/g);
     this.regex_for_language.set("ace/mode/java", /(.*\.java):(\d+):/g);
@@ -454,7 +474,8 @@ var CodeOceanEditor = {
     this.clearOutput();
     $('#hint').fadeOut();
     $('#flowrHint').fadeOut();
-    this.showTab(1);
+    this.showTab(0);
+    this.showOutputBar();
   },
 
   isActiveFileBinary: function () {
@@ -544,6 +565,26 @@ var CodeOceanEditor = {
     });
   },
 
+  initializeOutputBarToggle: function() {
+    $('#toggle-sidebar-output').on('click',this.hideOutputBar.bind(this));
+    $('#toggle-sidebar-output-collapsed').on('click',this.showOutputBar.bind(this));
+  },
+
+  showOutputBar: function() {
+    if ($('#sidebar').hasClass('sidebar-col')) {
+      this.handleSideBarToggle();
+    }
+    $('#output_sidebar_collapsed').addClass('hidden');
+    $('#output_sidebar_uncollapsed').removeClass('hidden');
+    $('#output_sidebar').removeClass('output-col-collapsed').addClass('output-col');
+  },
+
+  hideOutputBar: function() {
+    $('#output_sidebar_collapsed').removeClass('hidden');
+    $('#output_sidebar_uncollapsed').addClass('hidden');
+    $('#output_sidebar').removeClass('output-col').addClass('output-col-collapsed');
+  },
+
   initializeEverything: function() {
     this.initializeRegexes();
     this.initializeCodePilot();
@@ -552,6 +593,8 @@ var CodeOceanEditor = {
     this.initializeEditors();
     this.initializeEventHandlers();
     this.initializeFileTree();
+    this.initializeSideBarCollapse();
+    this.initializeOutputBarToggle();
     this.initializeTooltips();
     this.initPrompt();
     this.renderScore();

app/assets/javascripts/editor/evaluation.js.erb

@@ -8,7 +8,7 @@ CodeOceanEditorEvaluation = {
     }, 0).toFixed(2);
     $('#score').data('score', score);
     this.renderScore();
-    this.showTab(2);
+    this.showTab(1);
   },
 
   handleTestResponse: function (result) {
@@ -18,7 +18,8 @@ CodeOceanEditorEvaluation = {
       this.qa_api.executeCommand('syncOutput', [result]);
     }
     this.showStatus(result);
-    this.showTab(1);
+    this.showTab(0);
+    this.showOutputBar();
   },
 
   printOutput: function (output, colorize, index) {
@@ -132,7 +133,7 @@ CodeOceanEditorEvaluation = {
       this.hideSpinner();
       this.running = false;
       this.toggleButtonStates();
-    });
+    }.bind(this));
     jqxhr.fail(ajaxError);
   },
 

app/assets/javascripts/editor/submissions.js.erb

@@ -115,7 +115,8 @@ CodeOceanEditorSubmissions = {
               stderr: message
             }, true, 0);
             this.sendError(message, response.id);
-            this.showTab(1);
+            this.showTab(0);
+            this.showOutputBar();
           };
         }
       });