Show selected columns in gantt chart (#27672).

Patch by Mizuki ISHIKAWA.


git-svn-id: http://svn.redmine.org/redmine/trunk@18171 e93f8b46-1217-0410-a6f0-8f06a7374b81

3 files changed, 103 insertions, 9 deletions

diff --git a/public/javascripts/gantt.js b/public/javascripts/gantt.js
index 0241e6f3e..00a522c83 100644
--- a/public/javascripts/gantt.js
+++ b/public/javascripts/gantt.js
@@ -163,6 +163,37 @@ function drawGanttProgressLines() {
   }
 }
 
+function drawSelectedColumns(){
+  if ($("#draw_selected_columns").prop('checked')) {
+    if(isMobile()) {
+      $('td.gantt_selected_column').each(function(i) {
+        $(this).hide();
+      });
+    }else{
+      $('.gantt_subjects_container').addClass('draw_selected_columns');
+      $('td.gantt_selected_column').each(function() {
+        $(this).show();
+        var column_name = $(this).attr('id');
+        $(this).resizable({
+          alsoResize: '.gantt_' + column_name + '_container, .gantt_' + column_name + '_container > .gantt_hdr',
+          minWidth: 20,
+          handles: "e",
+          create: function() {
+            $(".ui-resizable-e").css("cursor","ew-resize");
+          }
+        }).on('resize', function (e) {
+            e.stopPropagation();
+        });
+      });
+    }
+  }else{
+    $('td.gantt_selected_column').each(function (i) {
+      $(this).hide();
+      $('.gantt_subjects_container').removeClass('draw_selected_columns');
+    });
+  }
+}
+
 function drawGanttHandler() {
   var folder = document.getElementById('gantt_draw_area');
   if(draw_gantt != null)
@@ -170,10 +201,12 @@ function drawGanttHandler() {
   else
     draw_gantt = Raphael(folder);
   setDrawArea();
+  drawSelectedColumns();
   if ($("#draw_progress_line").prop('checked'))
     try{drawGanttProgressLines();}catch(e){}
   if ($("#draw_relations").prop('checked'))
     drawRelations();
+  $('#content').addClass('gantt_content');
 }
 
 function resizableSubjectColumn(){
@@ -184,7 +217,6 @@ function resizableSubjectColumn(){
     alsoResize: '.gantt_subjects_container, .gantt_subjects_container>.gantt_hdr, .project-name, .issue-subject, .version-name',
     minWidth: 100,
     handles: 'e',
-    containment: '#content',
     create: function( event, ui ) {
       $('.ui-resizable-e').css('cursor','ew-resize');
     }
@@ -224,8 +256,8 @@ ganttEntryClick = function(e){
 
       var new_top_val = parseInt(el.css('top')) + total_height * (target_shown ? -1 : 1);
       el.css('top', new_top_val);
-      $('#gantt_area form > div[data-collapse-expand="' + json.obj_id + '"]').each(function(_, task){
-        $(task).css('top', new_top_val);
+      $('#gantt_area form > div[data-collapse-expand="' + json.obj_id + '"], td.gantt_selected_column div[data-collapse-expand="' + json.obj_id + '"]').each(function(_, el){
+        $(el).css('top', new_top_val);
       });
       return true;
     }
@@ -237,13 +269,20 @@ ganttEntryClick = function(e){
       total_height = 0;
     }
     if(is_shown == target_shown){
-      $('#gantt_area form > div[data-collapse-expand="' + json.obj_id + '"]').each(function(_, task){
+      $('#gantt_area form > div[data-collapse-expand="' + json.obj_id + '"]').each(function(_, task) {
         var el_task = $(task);
         if(!is_shown)
           el_task.css('top', target_top + total_height);
         if(!el_task.hasClass('tooltip'))
           el_task.toggle(!is_shown);
       });
+      $('td.gantt_selected_column div[data-collapse-expand="' + json.obj_id + '"]'
+          ).each(function (_, attr) {
+        var el_attr = $(attr);
+        if (!is_shown)
+          el_attr.css('top', target_top + total_height);
+          el_attr.toggle(!is_shown);
+      });
       if(!is_shown)
         el.css('top', target_top + total_height);
       iconChange(el);
@@ -253,3 +292,9 @@ ganttEntryClick = function(e){
   });
   drawGanttHandler();
 };
+
+function disable_unavailable_columns(unavailable_columns) {
+  $.each(unavailable_columns, function (index, value) {
+    $('#available_c, #selected_c').children("[value='" + value + "']").prop('disabled', true);
+  });
+}
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 7e5c4c738..3f17d28c9 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -1260,16 +1260,38 @@ div.wiki img {vertical-align:middle; max-width:100%;}
 
 #my-page .list th.checkbox, #my-page .list td.checkbox {display:none;}
 /***** Gantt chart *****/
+div.gantt_content {
+  overflow: scroll;
+}
+table.gantt-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+table.gantt-table td {
+  padding: 0px;
+}
 .gantt_hdr {
   position:absolute;
   top:0;
   height:16px;
   border-top: 1px solid #c0c0c0;
   border-bottom: 1px solid #c0c0c0;
-  border-right: 1px solid #c0c0c0;
+  border-left: 1px solid #c0c0c0;
   text-align: center;
   overflow: hidden;
 }
+#gantt_area .gantt_hdr {
+  border-left: 0px;
+  border-right: 1px solid #c0c0c0;
+}
+.gantt_subjects_container:not(.draw_selected_columns) .gantt_hdr,
+.last_gantt_selected_column .gantt_hdr {
+  z-index: 10;
+  border-right: 1px solid #c0c0c0;
+}
+.gantt_subjects_container .gantt_subjects * {
+  z-index: 10;
+}
 
 .gantt_subjects_column + td {
   padding: 0;
@@ -1277,13 +1299,41 @@ div.wiki img {vertical-align:middle; max-width:100%;}
 
 .gantt_hdr.nwday {background-color:#f1f1f1; color:#999;}
 
-.gantt_subjects { font-size: 0.8em; position: relative; z-index: 1; }
-.gantt_subjects div { line-height:16px;height:16px;overflow:hidden;white-space:nowrap;text-overflow: ellipsis; }
+.gantt_subjects,
+.gantt_selected_column_content.gantt_hdr {
+  font-size: 0.8em;
+  position: relative;
+  z-index: 1;
+}
+.gantt_subjects div,
+.gantt_selected_column_content div {
+  line-height: 16px;
+  height: 16px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+}
 .gantt_subjects div.issue-subject:hover { background-color:#ffffdd; }
-
+.gantt_selected_column_content { padding-left: 3px; padding-right: 3px;}
 .gantt_subjects .issue-subject img.icon-gravatar {
   margin: 2px 5px 0px 2px;
 }
+.gantt_hdr_selected_column_name {
+  position: absolute;
+  top: 50%;
+  width:100%;
+  transform: translateY(-50%);
+  -webkit- transform: translateY(-50%);
+  font-size: 0.8em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+}
+td.gantt_selected_column, td.gantt_selected_column .gantt_hdr,.gantt_selected_column_container {
+  width: 50px;
+}
 
 .task {
   position: absolute;
diff --git a/public/stylesheets/responsive.css b/public/stylesheets/responsive.css
index a2193864c..6bec53560 100644
--- a/public/stylesheets/responsive.css
+++ b/public/stylesheets/responsive.css
@@ -711,7 +711,6 @@
 
   .gantt_subjects_column .gantt_hdr {
     width: 100% !important;
-    border-right: 1px solid #c0c0c0; /* [2] */
     right: 0 !important; /* [2] */
   }