Rework left sidebar

* Move Buttons from left sidebar to JSTree
* Use light style for collapse sidebar buttons

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

@@ -198,7 +198,7 @@ var CodeOceanEditor = {
     },
 
     hideSpinner: function () {
-        $('button i.fa').show();
+        $('button i.fa, button i.far, button i.fas').show();
         $('button i.fa-spin').hide();
     },
 
@@ -212,7 +212,7 @@ var CodeOceanEditor = {
 
     resizeParentOfAceEditor: function (element) {
         // calculate needed size: window height - position of top of ACE editor - height of autosave label below editor - 5 for bar margins
-        var windowHeight = window.innerHeight - $(element).offset().top - $('#autosave-label').height() - 5;
+        var windowHeight = window.innerHeight - $(element).offset().top - $('#statusbar').height() - 5;
         $(element).parent().height(windowHeight);
     },
 
@@ -245,7 +245,7 @@ var CodeOceanEditor = {
             document.insertLines(0, content.text().split(/\n/));
             // remove last (empty) that is there by default line
             document.removeLines(document.getLength() - 1, document.getLength() - 1);
-            editor.setReadOnly($(element).data('read-only') !== undefined);
+            editor.setReadOnly($(element).parent().data('read-only') !== undefined);
             if (editor.getReadOnly()) {
                 editor.setHighlightActiveLine(false);
                 editor.setHighlightGutterLine(false);
@@ -341,11 +341,9 @@ var CodeOceanEditor = {
 
     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));
     },
 
@@ -580,7 +578,7 @@ var CodeOceanEditor = {
 
     toggleButtonStates: function () {
         $('#destroy-file').prop('disabled', this.active_frame.data('role') !== 'user_defined_file');
-        $('#start-over-active-file').prop('disabled', this.active_frame.data('role') === 'user_defined_file');
+        $('#start-over-active-file').prop('disabled', this.active_frame.data('role') === 'user_defined_file' || this.active_frame.data('read-only') !== undefined);
         $('#dummy').toggle(!this.fileActionsAvailable());
         $('#render').toggle(this.isActiveFileRenderable());
         $('#run').toggle(this.isActiveFileRunnable() && !this.running);
@@ -654,7 +652,7 @@ var CodeOceanEditor = {
     },
 
     showSpinner: function (initiator) {
-        $(initiator).find('i.fa').hide();
+        $(initiator).find('i.fa, i.far, i.fas').hide();
         $(initiator).find('i.fa-spin').show();
     },
 

app/assets/javascripts/editor/submissions.js

@@ -3,7 +3,7 @@ CodeOceanEditorSubmissions = {
 
   AUTOSAVE_INTERVAL: 15 * 1000,
   autosaveTimer: null,
-  autosaveLabel: "#autosave-label span",
+  autosaveLabel: "#statusbar span",
 
   /**
    * Submission-Creation

app/assets/stylesheets/base.css.scss

@@ -12,7 +12,7 @@ h1, h2, h3, h4, h5, h6 {
   color: rgba(70, 70, 70, 1);
 }
 
-i.fa {
+i.fa, i.far, i.fas {
   margin-right: 0.5em;
 }
 

app/assets/stylesheets/editor.css.scss

@@ -85,10 +85,10 @@ button i.fa-spin {
   display: none;
 }
 
-#autosave-label{
+#statusbar{
   visibility: hidden;
+  margin-top: .2em;
   height: 1.6em;
-  text-align:  right;
   color: #777;
   font-size: 0.8em;
 }