Several project view adjustments in CSS

Gemfile

@@ -13,6 +13,7 @@ gem 'devise', '~> 3.5.4'
 gem 'devise-async'
 gem 'dotenv-rails'
 gem 'font_assets', github: "ericallam/font_assets", branch: 'master'
+gem 'material_icons'
 gem 'friendly_id', '~> 5.1.0'
 gem 'foreman'
 gem 'rails-i18n'
@@ -30,6 +31,7 @@ gem 'sass-rails'
 gem 'uglifier', '>= 2.5.3'
 gem 'compass-rails'
 gem 'coffee-rails'
+gem "autoprefixer-rails"
 
 gem 'bootstrap-sass', '~> 3.3.5'
 gem 'ejs'

Gemfile.lock

@@ -156,6 +156,8 @@ GEM
     libv8 (3.16.14.15)
     mail (2.6.4)
       mime-types (>= 1.16, < 4)
+    material_icons (2.2.0)
+      railties (>= 3.2)
     method_source (0.8.2)
     mime-types (2.99.2)
     mini_portile2 (2.1.0)
@@ -334,6 +336,7 @@ PLATFORMS
 
 DEPENDENCIES
   attachinary
+  autoprefixer-rails
   bootstrap-sass (~> 3.3.5)
   cancancan (~> 1.10)
   capybara
@@ -361,6 +364,7 @@ DEPENDENCIES
   jquery-ui-rails
   kgio
   letter_opener
+  material_icons
   newrelic_rpm
   pg
   pg_search

app/assets/javascripts/application.js

@@ -33,9 +33,16 @@
 
 $(function() {
   $('.tag-tooltip').tooltip();
+
+  $(".menu-toggle").click(function(e) {
+      e.preventDefault();
+      $("#sidebar-wrapper").toggle();
+  });
+
   executeAttachinary();
 });
 
 function executeAttachinary() {
   $('.attachinary-input').attachinary({ template: $('#attachinary_template').html() });
 }
+

app/assets/javascripts/collections/user_collection.js

@@ -5,8 +5,12 @@ if (typeof Fulcrum == 'undefined') {
 Fulcrum.UserCollection = Backbone.Collection.extend({
   model: Fulcrum.User,
 
+  comparator: function(user) {
+    return user.get('name');
+  },
+
   forSelect: function() {
-    return this.map(function(user) {
+    return this.sort().map(function(user) {
       return [user.get('name'),user.id];
     });
   }

app/assets/javascripts/project.boot.js

@@ -1,17 +1,21 @@
 $(function() {
+  var columnViews = {};
+
   $('[data-column-view]').each(function() {
     var data = $(this).data();
     var column = new Fulcrum.ColumnView({
       el: $(this),
       id: data.columnView,
       name: I18n.t('projects.show.' + data.columnView),
       sortable: data.connect !== undefined
-    }).render();
+    });
+    columnViews[data.columnView] = column;
+    column.render();
 
     if (data.hideable !== false) {
-      new Fulcrum.ColumnVisibilityButtonView({ columnView: column })
-        .render().$el
-        .appendTo('#column-toggles');
+      $("<li></li>").
+      append(new Fulcrum.ColumnVisibilityButtonView({ columnView: column }).render().$el).
+      appendTo('#column-toggles');
     }
 
     if (data.connect) {
@@ -24,21 +28,22 @@ $(function() {
   });
 
   $('[data-project]').each(function() {
-    var data = $(this).data();
-    var project = new Fulcrum.Project(data.project);
-    var view = new Fulcrum.ProjectView({ model: project });
-    var search = new Fulcrum.ProjectSearchView({ model: project, el: $('#form_search') });
+    var data     = $(this).data();
+    var project  = new Fulcrum.Project(data.project);
+    var view     = new Fulcrum.ProjectView({ model: project });
+    var search   = new Fulcrum.ProjectSearchView({ model: project, el: $('#form_search') });
     var velocity = new Fulcrum.ProjectVelocityView({ model: project, el: $('#velocity') });
 
     project.users.reset(data.users);
     project.current_user = new Fulcrum.User(data.currentUser);
 
+    view.addColumnViews(columnViews);
     view.velocityView = velocity;
-    view.searchView = search;
+    view.searchView   = search;
     view.scaleToViewport();
     $(window).resize(view.scaleToViewport);
 
-    setInterval(function() { project.fetch(); }, 10 * 1000);
+    setInterval(function() { project.fetch(); }, 10 * 1000); // every 10 seconds
 
     window.md = new Markdown.Converter();
     window.projectView = view;

app/assets/javascripts/templates/project_velocity.jst.ejs

@@ -1,4 +1,4 @@
-<%= I18n.t("velocity") %>
 <span id="velocity_value">
+  <i class="mi mi-18">trending_up</i>
   <%= project.velocity() %>
 </span>

app/assets/javascripts/templates/project_velocity_override.jst.ejs

@@ -1,11 +1,17 @@
-<form>
+<form id="override-velocity">
   <ul>
-    <li><%= I18n.t("override velocity") %>:
+    <li><%= I18n.t("override.velocity") %>:
       <input name="override" size=2 value=<%= project.velocity() %> />
     </li>
     <li>
-      <button name="revert" value="revert"><%= I18n.t("revert") %></button>
-      <button name="apply" value="apply"><%= I18n.t("apply") %></button>
+      <div class="btn-group">
+        <button name="revert" value="revert" class="btn btn-default btn-xs"><%= I18n.t("revert") %></button>
+        <button name="apply" value="apply" class="btn btn-primary btn-xs"><%= I18n.t("apply") %></button>
+      </div>
+    </li>
+    <li>
+      <p><%= I18n.t("override.explanation_1") %></p>
+      <p><%= I18n.t("override.explanation_2") %></p>
     </li>
   </ul>
 </form>

app/assets/javascripts/templates/story.jst.ejs

@@ -1,8 +1,10 @@
 <% if (story.estimable()) { %>
-<div class="state-actions">
+<div class="state-actions estimates">
   <form>
     <% _.each(story.point_values(), function(value) { %>
-    <input type="button" class="estimate" value="<%= value %>"/>
+      <% if (value > 0) { %>
+        <span class="estimate estimate-<%= value %> input" data-value="<%= value %>" id="estimate-<%= value %>"></span>
+      <% } %>
     <% }); %>
   </form>
 </div>
@@ -20,16 +22,20 @@
   <a class="icon icons-throbber" title="<%= I18n.t('saving') %>"></a>
   <% } %>
   <span class="popover-activate">
-    <span class="icon icons-<%= story.get('story_type') %> story_type" title="<%= story.story_type %>: <%= story.id %>">
-      <%= story.story_type %>
-    </span>
+    <% if (story.get('story_type') == 'feature') { %>
+      <i class="mi md-star md-20">star</i>
+    <% } %>
     <% if (story.estimated()) { %>
-    <span class="estimate estimate_<%= story.get('estimate') %>">
-      <%= story.get('estimate') %>
-    </span>
+      <span class="estimate estimate-<%= story.get('estimate') %>"></span>
+    <% } %>
+    <% if (story.get('story_type') == 'chore') { %>
+      <i class="mi md-dark md-20">settings</i>
+    <% } %>
+    <% if (story.get('story_type') == 'bug') { %>
+      <i class="mi md-bug md-20">bug_report</i>
     <% } %>
     <% if (story.hasDetails()) { %>
-    <span class="icon icons-details"></span>
+      <i class="mi md-14 md-dark details">question_answer</i>
     <% } %>
   </span>
 </div>

app/assets/javascripts/templates/story_hover.jst.ejs

@@ -1,6 +1,14 @@
 <div class="small">
   <span class="icons">
-    <span class="icon icons-<%= story.get('story_type') %>"></span>
+    <% if (story.get('story_type') == 'feature') { %>
+      <i class="story-hover mi md-20 md md-star">star</i>
+    <% } %>
+    <% if (story.get('story_type') == 'chore') { %>
+      <i class="story-hover mi md-20 md-dark">settings</i>
+    <% } %>
+    <% if (story.get('story_type') == 'bug') { %>
+      <i class="story-hover mi md-20 md-bug">bug_report</i>
+    <% } %>
     <span class="text"><%= story.get('story_type') %></span>
     <% if (story.get('estimated')) { %>
       <span class="estimate estimate_<%= story.get('estimate') %>"><%= story.get('estimate') %></span>

app/assets/javascripts/views/column_visibility_button_view.js

@@ -16,12 +16,30 @@ Fulcrum.ColumnVisibilityButtonView = Backbone.View.extend({
 
   initialize: function() {
     _.bindAll(this, 'setClassName');
-    this.$el.attr('class','hide_'+this.options.columnView.id);
+    this.$el.attr('class','hide_'+this.options.columnView.id );
     this.options.columnView.on('visibilityChanged', this.setClassName);
   },
 
   render: function() {
-    this.$el.html(this.options.columnView.name());
+    var icon = "";
+    switch(this.options.columnView.id) {
+    case 'done' :
+      icon = '<i class="mi md-18">done</i> ';
+      break;
+    case 'in_progress' :
+      icon = '<i class="mi md-18">inbox</i> ';
+      break;
+    case 'backlog' :
+      icon = '<i class="mi md-18">list</i> ';
+      break;
+    case 'chilly_bin' :
+      icon = '<i class="mi md-18">ac_unit</i> ';
+      break;
+    case 'search_results' :
+      icon = '<i class="mi md-18">search</i> ';
+      break;
+    }
+    this.$el.html(icon + this.options.columnView.name());
     this.setClassName();
     return this;
   },

app/assets/javascripts/views/form_view.js

@@ -79,7 +79,7 @@ Fulcrum.FormView = Backbone.View.extend({
 
     options = _.defaults(options, { attrs: { class: [] } });
 
-    options.attrs.class = 'form-control ' +options.attrs.class.join(' ');
+    options.attrs.class = 'form-control input-sm ' +options.attrs.class.join(' ');
 
     var select = this.make('select', _.extend({name: name}, options.attrs));
 

app/assets/javascripts/views/keycut_view.js

@@ -6,19 +6,19 @@ Fulcrum.KeycutView = Backbone.View.extend({
   template: JST['templates/keycut_view'],
   tagName: 'div',
   id: 'keycut-help',
-  
+
   events:  {
     'click a.close' : 'closeWindow'
   },
-  
+
   render: function() {
     $('#main').append($(this.el).html(this.template));
     return this;
   },
-  
+
   closeWindow : function(){
     $('#'+this.id).fadeOut(
       function() {$('#'+this.id).remove();}
     );
   }
-});
+});

app/assets/javascripts/views/note_form.js

@@ -58,7 +58,7 @@ Fulcrum.NoteForm = Fulcrum.FormView.extend({
     $(div).append('<br/>');
     $(div).append(textarea);
 
-    var submit = this.make('input', {id: 'note_submit', type: 'button', value: 'Add note', class: 'add-note'});
+    var submit = this.make('input', {id: 'note_submit', type: 'button', value: 'Add note', class: 'add-note btn btn-default btn-xs'});
     $(div).append(submit);
     this.$el.html(div);
 

app/assets/javascripts/views/project_view.js

@@ -3,11 +3,10 @@ if (typeof Fulcrum == 'undefined') {
 }
 
 Fulcrum.ProjectView = Backbone.View.extend({
+  columns: {},
 
   initialize: function() {
 
-    this.columns = {};
-
     _.bindAll(this, 'addStory', 'addAll', 'render');
 
     this.model.stories.on('add', this.addStory);
@@ -16,7 +15,6 @@ Fulcrum.ProjectView = Backbone.View.extend({
     this.model.on('change:userVelocity', this.addAll);
 
     var that = this;
-
     this.model.stories.fetch({
       success: function() {
         that.addAll();
@@ -26,6 +24,13 @@ Fulcrum.ProjectView = Backbone.View.extend({
 
   // Triggered when the 'Add Story' button is clicked
   newStory: function() {
+    if ($(window).width() <= 992) {
+      _.each(this.columns, function(column, columnId) {
+        if(columnId != 'chilly_bin')
+          if(!column.hidden())
+            column.toggle();
+      });
+    }
     this.model.stories.add([{
       events: [], files: [], editing: true
     }]);
@@ -65,11 +70,9 @@ Fulcrum.ProjectView = Backbone.View.extend({
     $(".loading_screen").show();
     var that = this;
 
-    $('#done').html("");
-    $('#in_progress').html("");
-    $('#backlog').html("");
-    $('#chilly_bin').html("");
-    $('#search_results').html("");
+    _.each(this.columns, function(column, columnId) {
+      column.$el.find('.storycolumn').html("");
+    });
 
     this.model.rebuildIterations();
 
@@ -107,11 +110,22 @@ Fulcrum.ProjectView = Backbone.View.extend({
   scaleToViewport: function() {
     var storyTableTop = $('table.stories tbody').offset().top;
 
-    var extra = 40;
+    var extra = 20;
 
     var height = $(window).height() - (storyTableTop + extra);
 
     $('.storycolumn').css('height', height + 'px');
+
+    if ($(window).width() <= 992) {
+      _.each(this.columns, function(column, columnId) {
+        if(columnId != 'in_progress')
+          if(!column.hidden())
+            column.toggle();
+      });
+      $('#form_search').hide();
+    } else {
+      $('#form_search').show();
+    }
   },
 
   notice: function(message) {
@@ -122,9 +136,33 @@ Fulcrum.ProjectView = Backbone.View.extend({
     this.columns[id] = view;
   },
 
+  addColumnViews: function(columns) {
+    var that = this;
+    _.each(columns, function(column, columnId) {
+      column.on('visibilityChanged', that.checkColumnViewsVisibility);
+      that.addColumnView(columnId, column);
+    });
+  },
+
+  // make sure there is at least one column opened
+  checkColumnViewsVisibility: function() {
+    if (window.projectView === undefined)
+      return;
+
+    var filtered = _.filter(window.projectView.columns, function(column, columnId) {
+      if(!column.hidden())
+        return true;
+    });
+
+    if(filtered.length == 0) {
+      window.projectView.columns['in_progress'].toggle();
+    }
+  },
+
   usernames: function() {
     return this.model.users
       .map(function(user) { return user.get('username'); })
       .sort();
   },
+
 });