diff --git a/app/assets/javascripts/editor/editor.js.erb b/app/assets/javascripts/editor/editor.js.erb index 65e303e9..430bff15 100644 --- a/app/assets/javascripts/editor/editor.js.erb +++ b/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(); diff --git a/app/assets/stylesheets/editor.css.scss b/app/assets/stylesheets/editor.css.scss index 85dd4f05..be607e29 100644 --- a/app/assets/stylesheets/editor.css.scss +++ b/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; } \ No newline at end of file diff --git a/app/views/exercises/_editor.html.slim b/app/views/exercises/_editor.html.slim index 9c04b7ef..3781b035 100644 --- a/app/views/exercises/_editor.html.slim +++ b/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') diff --git a/app/views/exercises/_editor_file_tree.html.slim b/app/views/exercises/_editor_file_tree.html.slim index 7bb3da68..77ffa024 100644 --- a/app/views/exercises/_editor_file_tree.html.slim +++ b/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')) diff --git a/app/views/exercises/_editor_frame.html.slim b/app/views/exercises/_editor_frame.html.slim index 01640fa8..94b43ab0 100644 --- a/app/views/exercises/_editor_frame.html.slim +++ b/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') \ No newline at end of file + .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 \ No newline at end of file diff --git a/app/views/exercises/implement.html.slim b/app/views/exercises/implement.html.slim index 19924a1a..75cdbec0 100644 --- a/app/views/exercises/implement.html.slim +++ b/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')