From fc1266d0d139f5db0dfc7973cd4a375c586cab93 Mon Sep 17 00:00:00 2001
From: Alexander Kastius <alexander.kastius@student.hpi.de>
Date: Thu, 1 Sep 2016 14:35:08 +0200
Subject: [PATCH] Added tooltips to sidebar buttons.

---
 app/assets/javascripts/editor/editor.js.erb     |  5 +++++
 app/assets/stylesheets/editor.css.scss          |  4 ++++
 app/views/exercises/_editor_file_tree.html.slim | 12 ++++++------
 app/views/exercises/_editor_output.html.slim    |  2 +-
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/editor/editor.js.erb b/app/assets/javascripts/editor/editor.js.erb
index a252041d..65e303e9 100644
--- a/app/assets/javascripts/editor/editor.js.erb
+++ b/app/assets/javascripts/editor/editor.js.erb
@@ -586,6 +586,10 @@ var CodeOceanEditor = {
     $('#output_sidebar').removeClass('output-col').addClass('output-col-collapsed');
   },
 
+  initializeSideBarTooltips: function() {
+    $('[data-toggle="tooltip"]').tooltip()
+  },
+
   initializeEverything: function() {
     this.initializeRegexes();
     this.initializeCodePilot();
@@ -596,6 +600,7 @@ var CodeOceanEditor = {
     this.initializeFileTree();
     this.initializeSideBarCollapse();
     this.initializeOutputBarToggle();
+    this.initializeSideBarTooltips();
     this.initializeTooltips();
     this.initPrompt();
     this.renderScore();
diff --git a/app/assets/stylesheets/editor.css.scss b/app/assets/stylesheets/editor.css.scss
index 9f1b4784..85dd4f05 100644
--- a/app/assets/stylesheets/editor.css.scss
+++ b/app/assets/stylesheets/editor.css.scss
@@ -145,4 +145,8 @@ button i.fa-spin {
   padding-left: 15px;
   padding-right: 15px;
   box-sizing: border-box
+}
+
+.enforce-top-margin {
+  margin-top: 5px !important;
 }
\ No newline at end of file
diff --git a/app/views/exercises/_editor_file_tree.html.slim b/app/views/exercises/_editor_file_tree.html.slim
index 26f14112..7bb3da68 100644
--- a/app/views/exercises/_editor_file_tree.html.slim
+++ b/app/views/exercises/_editor_file_tree.html.slim
@@ -1,13 +1,13 @@
 div id='sidebar-collapsed'
-  = render('editor_button', classes: 'btn-block btn-primary btn-sm', icon: 'fa fa-plus-square', id: 'sidebar-collapse-collapsed', label:'')
-  - if @exercise.allow_file_creation?
-    = render('editor_button', classes: 'btn-block btn-primary btn-sm', data: {:'data-cause' => 'file'}, icon: 'fa fa-plus', id: 'create-file-collapsed', label:'')
-    = render('editor_button', classes: 'btn-block btn-warning btn-sm', data: {:'data-cause' => 'file', :'data-message-confirm' => t('shared.confirm_destroy')}, label:'', icon: 'fa fa-times', id: 'destroy-file-collapsed')
+  = render('editor_button', classes: 'btn-block btn-primary btn-sm', data: {:'data-toggle' => 'tooltip', :'data-placement' => 'right'}, icon: 'fa fa-plus-square', id: 'sidebar-collapse-collapsed', label:'', title:'Expand sidebar')
 
-  = render('editor_button', classes: 'btn-block btn-primary btn-sm', icon: 'fa fa-download', id: 'download-collapsed', label:'')
+  - if @exercise.allow_file_creation?
+    = 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'))
 
 div id='sidebar-uncollapsed'
-  = render('editor_button', classes: 'btn-block btn-primary btn-sm', icon: 'fa fa-minus-square', id: 'sidebar-collapse', label: 'Collapse')
+  = render('editor_button', classes: 'btn-block btn-primary btn-sm enforce-top-margin', icon: 'fa fa-minus-square', id: 'sidebar-collapse', label: 'Collapse')
 
   hr
 
diff --git a/app/views/exercises/_editor_output.html.slim b/app/views/exercises/_editor_output.html.slim
index e96911ac..2f32432f 100644
--- a/app/views/exercises/_editor_output.html.slim
+++ b/app/views/exercises/_editor_output.html.slim
@@ -1,5 +1,5 @@
 div id='output_sidebar_collapsed'
-  = render('editor_button', classes: 'btn-block btn-primary btn-sm', icon: 'fa fa-plus-square', id: 'toggle-sidebar-output-collapsed', label: '')
+  = render('editor_button', classes: 'btn-block btn-primary btn-sm', data: {:'data-toggle' => 'tooltip', :'data-placement' => 'left'}, title: 'Expand sidebar', icon: 'fa fa-plus-square', id: 'toggle-sidebar-output-collapsed', label: '')
 div id='output_sidebar_uncollapsed' class='hidden col-sm-12' data-message-no-output=t('exercises.implement.no_output')
   .row
     = render('editor_button', classes: 'btn-block btn-primary btn-sm', icon: 'fa fa-minus-square', id: 'toggle-sidebar-output', label: 'Collapse')