Toggle description

Tooltips fixed
Buttons moved

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

@@ -323,10 +323,11 @@ var CodeOceanEditor = {
     $('#dropdown-test, #test').on('click', this.testCode.bind(this));
     $('#save').on('click', this.saveCode.bind(this));
     $('#start-over').on('click', this.confirmReset.bind(this));
+    $('#start-over-collapsed').on('click', this.confirmReset.bind(this));
   },
 
   initializeRequestForComments: function () {
-    var button = $('.requestCommentsButton');
+    var button = $('#requestComments');
     button.hide();
     button.on('click', function () {
       $('#comment-modal').modal('show');
@@ -572,9 +573,6 @@ var CodeOceanEditor = {
   },
 
   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');
@@ -590,6 +588,17 @@ var CodeOceanEditor = {
     $('[data-toggle="tooltip"]').tooltip()
   },
 
+  initializeDescriptionToggle: function() {
+    $('#exercise-headline').on('click',this.toggleDescriptionPanel.bind(this))
+  },
+
+  toggleDescriptionPanel: function() {
+    $('#description-panel').toggleClass('description-panel-collapsed');
+    $('#description-panel').toggleClass('description-panel');
+    $('#description-symbol').toggleClass('fa-chevron-down');
+    $('#description-symbol').toggleClass('fa-chevron-right');
+  },
+
   initializeEverything: function() {
     this.initializeRegexes();
     this.initializeCodePilot();
@@ -600,6 +609,7 @@ var CodeOceanEditor = {
     this.initializeFileTree();
     this.initializeSideBarCollapse();
     this.initializeOutputBarToggle();
+    this.initializeDescriptionToggle();
     this.initializeSideBarTooltips();
     this.initializeTooltips();
     this.initPrompt();

app/assets/stylesheets/editor.css.scss

@@ -18,6 +18,7 @@ button i.fa-spin {
 
 .score {
   display: none;
+  vertical-align: bottom;
 }
 
 #alert, #development-environment {
@@ -149,4 +150,22 @@ button i.fa-spin {
 
 .enforce-top-margin {
   margin-top: 5px !important;
+}
+
+.enforce-right-margin {
+  margin-right: 10px !important;
+}
+
+.description-panel-collapsed {
+  -webkit-transition: width 2s;
+  transition: width 2s;
+  height: 0px;
+  visibility: hidden;
+}
+
+.description-panel {
+  height: auto;
+  -webkit-transition: height 2s;
+  transition: height 2s;
+  visibility: visible;
 }

app/views/exercises/_editor.html.slim

@@ -1,5 +1,5 @@
 #editor.row data-exercise-id=exercise.id data-message-depleted=t('exercises.editor.depleted') data-message-timeout=t('exercises.editor.timeout', permitted_execution_time: @exercise.execution_environment.permitted_execution_time) data-errors-url=execution_environment_errors_path(exercise.execution_environment) data-submissions-url=submissions_path data-user-id=@current_user.id
-  div id="sidebar" class=(@exercise.hide_file_tree ? 'hidden sidebar-col' : 'sidebar-col') = render('editor_file_tree', files: @files)
+  div id="sidebar" class=(@exercise.hide_file_tree ? 'hidden sidebar-col' : 'sidebar-col') = render('editor_file_tree', exercisee: @exercise, files: @files)
   div id='output_sidebar' class='output-col-collapsed' = render('exercises/editor_output')
   div id='frames' class=(@exercise.hide_file_tree ? 'editor-col' : 'editor-col')
     - @files.each do |file|
@@ -8,7 +8,6 @@
       = t('exercises.editor.lastsaved')
       span
     #editor-buttons.btn-group
-      = render('editor_button', data: {:'data-message-confirm' => t('exercises.editor.confirm_start_over'), :'data-url' => reload_exercise_path(exercise)}, icon: 'fa fa-history', id: 'start-over', label: t('exercises.editor.start_over'))
       // = render('editor_button', data: {:'data-message-success' => t('submissions.create.success'), :'data-placement' => 'top', :'data-tooltip' => true}, icon: 'fa fa-save', id: 'save', label: t('exercises.editor.save'), title: t('.tooltips.save'))
       button style="display:none" id="autosave"
       .btn-group
@@ -38,5 +37,8 @@
               i.fa.fa-rocket
               = t('exercises.editor.test')
       = render('editor_button', data: {:'data-placement' => 'top', :'data-tooltip' => true}, icon: 'fa fa-trophy', id: 'assess', label: t('exercises.editor.score'), title: t('shared.tooltips.shortcut', shortcut: 'ALT + s'))
+      button.btn.btn-primary.requestCommentsButton type='button' id="requestComments"
+        i.fa.fa-comment
+        = t('exercises.editor.requestComments')
 
 = render('shared/modal', id: 'comment-modal', title: t('exercises.implement.comment.request'), template: 'exercises/_request_comment_dialogcontent')

app/views/exercises/_editor_file_tree.html.slim

@@ -5,6 +5,7 @@ div id='sidebar-collapsed'
     = render('editor_button', classes: 'btn-block btn-primary btn-sm enforce-top-margin', data: {:'data-cause' => 'file', :'data-toggle' => 'tooltip', :'data-placement' => 'right'}, icon: 'fa fa-plus', id: 'create-file-collapsed', label:'', title: t('exercises.editor.create_file'))
 
   = render('editor_button', classes: 'btn-block btn-primary btn-sm enforce-top-margin', data: {:'data-toggle' => 'tooltip', :'data-placement' => 'right'}, icon: 'fa fa-download', id: 'download-collapsed', label:'', title: t('exercises.editor.download'))
+  = render('editor_button', classes: 'btn-block btn-primary btn-sm enforce-top-margin', data: {:'data-message-confirm' => t('exercises.editor.confirm_start_over'), :'data-url' => reload_exercise_path(@exercise), :'data-toggle' => 'tooltip', :'data-placement' => 'right'}, icon: 'fa fa-history', id: 'start-over-collapsed', label:'', title: t('exercises.editor.start_over'))
 
 div id='sidebar-uncollapsed'
   = render('editor_button', classes: 'btn-block btn-primary btn-sm enforce-top-margin', icon: 'fa fa-minus-square', id: 'sidebar-collapse', label: 'Collapse')
@@ -21,3 +22,4 @@ div id='sidebar-uncollapsed'
       = render('shared/modal', id: 'modal-file', template: 'code_ocean/files/_form', title: t('exercises.editor.create_file'))
 
   = render('editor_button', classes: 'btn-block btn-primary btn-sm', icon: 'fa fa-download', id: 'download', label: t('exercises.editor.download'))
+  = render('editor_button', classes: 'btn-block btn-primary btn-sm', data: {:'data-message-confirm' => t('exercises.editor.confirm_start_over'), :'data-url' => reload_exercise_path(@exercise)}, icon: 'fa fa-history', id: 'start-over', label: t('exercises.editor.start_over'))

app/views/exercises/_editor_frame.html.slim

@@ -12,8 +12,4 @@
         = link_to(file.native_file.file.name_with_extension, file.native_file.url)
   - else
     .editor-content.hidden data-file-id=file.ancestor_id = file.content
-    .editor data-file-id=file.ancestor_id data-indent-size=file.file_type.indent_size data-mode=file.file_type.editor_mode data-read-only=file.read_only data-id=file.id
-
-  button.btn.btn-primary.requestCommentsButton type='button' id="requestComments"
-    i.fa.fa-comment
-    = t('exercises.editor.requestComments')
+    .editor data-file-id=file.ancestor_id data-indent-size=file.file_type.indent_size data-mode=file.file_type.editor_mode data-read-only=file.read_only data-id=file.id

app/views/exercises/implement.html.slim

@@ -1,10 +1,14 @@
 .row
   #editor-column.col-md-12
-    h1 = @exercise
+    div
+      span.badge.pull-right.score
 
-    span.badge.pull-right.score
+      h1 id="exercise-headline"
+        i class="fa fa-chevron-down" id="description-symbol"
+        = @exercise
 
-    p.lead = render_markdown(@exercise.description)
+    #description-panel.lead.description-panel
+      = render_markdown(@exercise.description)
 
     #alert.alert.alert-danger role='alert'
       h4 = t('.alert.title')