From 661a90037fa294a44c8c998d7db1476f2142d012 Mon Sep 17 00:00:00 2001 From: Michal Hantl Date: Fri, 22 Aug 2014 22:38:27 +0200 Subject: [PATCH 1/6] add font awesome --- Gemfile | 1 + Gemfile.lock | 3 +++ app/assets/stylesheets/application.css.scss | 1 + 3 files changed, 5 insertions(+) diff --git a/Gemfile b/Gemfile index de0c86989..19b060a35 100644 --- a/Gemfile +++ b/Gemfile @@ -16,6 +16,7 @@ gem 'rails-i18n' gem 'configuration' gem 'rails-observers', '~> 0.1.2' gem 'jquery-ui-rails' +gem 'font-awesome-rails' gem 'pg' group :production do diff --git a/Gemfile.lock b/Gemfile.lock index 85206f261..4e0813cee 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -73,6 +73,8 @@ GEM factory_girl (~> 4.4.0) railties (>= 3.0.0) ffi (1.9.3) + font-awesome-rails (4.1.0.0) + railties (>= 3.2, < 5.0) fssm (0.2.10) hike (1.2.3) i18n (0.6.11) @@ -222,6 +224,7 @@ DEPENDENCIES devise (~> 3.2.4) ejs factory_girl_rails + font-awesome-rails jasmine (~> 1.3.2) jbuilder (~> 1.2) jquery-rails diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 8a77db901..4db9e066d 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -1,4 +1,5 @@ @import 'jquery_gritter'; @import 'jquery_tagit'; +@import "font-awesome"; @import 'popover'; @import 'screen'; From 1426f49e71b956b9364f69bd76948cbe7035649b Mon Sep 17 00:00:00 2001 From: Michal Hantl Date: Fri, 22 Aug 2014 22:40:07 +0200 Subject: [PATCH 2/6] use bar style points --- .../javascripts/templates/story.jst.ejs | 57 ++++++++++++++++--- app/assets/javascripts/views/story_view.js | 8 ++- app/assets/stylesheets/screen.css.scss | 39 +++++++++++++ 3 files changed, 93 insertions(+), 11 deletions(-) diff --git a/app/assets/javascripts/templates/story.jst.ejs b/app/assets/javascripts/templates/story.jst.ejs index bfb8754c3..6533665eb 100644 --- a/app/assets/javascripts/templates/story.jst.ejs +++ b/app/assets/javascripts/templates/story.jst.ejs @@ -1,8 +1,12 @@ <% if (story.estimable()) { %> -
+
<% _.each(story.point_values(), function(value) { %> - + + <% if (value == 0) { %>[]<% } else { %> + <% _.times(value, function() { %>|<% }) %> + <% } %> + <% }); %>
@@ -20,16 +24,53 @@ <% } %> - + + + <% if (story.get('story_type') == 'feature') { %> + + + + + <% } %> + <% if (story.get('story_type') == 'chore') { %> + + <% } %> + <% if (story.get('story_type') == 'bug') { %> + + <% } %> + + + <% if (story.estimated()) { %> - - <%= story.get('estimate') %> - + + <% if (story.get("estimate") == 1) { %> | <% } %> + <% if (story.get("estimate") == 2) { %> || <% } %> + <% if (story.get("estimate") == 3) { %> ||| <% } %> + <% if (story.get("estimate") == 4) { %> |||| <% } %> + <% if (story.get("estimate") == 5) { %> ||||| <% } %> + <% if (story.get("estimate") == 6) { %> |||||| <% } %> + <% if (story.get("estimate") == 7) { %> ||||||| <% } %> + <% if (story.get("estimate") == 8) { %> |||||||| <% } %> + <% if (story.get("estimate") == 9) { %> ||||||||| <% } %> + <% if (story.get("estimate") == 10) { %> |||||||||| <% } %> + <% if (story.get("estimate") == 11) { %> ||||||||||| <% } %> + <% if (story.get("estimate") == 12) { %> |||||||||||| <% } %> + <% } %> + <% if (story.hasDetails()) { %> - + + + + <% } %>
diff --git a/app/assets/javascripts/views/story_view.js b/app/assets/javascripts/views/story_view.js index d12412bfa..2d74b8b15 100644 --- a/app/assets/javascripts/views/story_view.js +++ b/app/assets/javascripts/views/story_view.js @@ -55,7 +55,7 @@ Fulcrum.StoryView = Fulcrum.FormView.extend({ "click #submit": "saveEdit", "click #cancel": "cancelEdit", "click .transition": "transition", - "click input.estimate": "estimate", + "click .estimate": "estimate", "click #destroy": "clear", "click #edit-description": "editDescription", "sortupdate": "sortUpdate" @@ -148,7 +148,7 @@ Fulcrum.StoryView = Fulcrum.FormView.extend({ estimate: function(ev) { this.saveInProgress = true; this.render(); - this.model.set({estimate: ev.target.value}); + this.model.set({estimate: ev.target.attributes['data-value'].value}); var that = this; this.model.save(null, { @@ -188,7 +188,9 @@ Fulcrum.StoryView = Fulcrum.FormView.extend({ return false; } // Should expand if the click wasn't on one of the buttons. - return !$(e.target).is('input'); + if ($(e.target).is('input')) return false + if ($(e.target).is('.input')) return false + return true; }, cancelEdit: function() { diff --git a/app/assets/stylesheets/screen.css.scss b/app/assets/stylesheets/screen.css.scss index e99965cb6..72c35650c 100644 --- a/app/assets/stylesheets/screen.css.scss +++ b/app/assets/stylesheets/screen.css.scss @@ -306,6 +306,44 @@ div.story-title abbr.initials { cursor: inherit; } +.estimate { + border: none; + padding: 0; + margin: 0; + font-size: 10px; + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + display: inline-block; + letter-spacing: -1px; + width: 20px; + margin-left: -2px; + margin-right: -6px; + text-align: right; + top: -7px; + position: relative; + color: #3556AA; + height: 17px; + -webkit-font-smoothing: none; +} +.estimates { + padding-left: 10px; + padding-right: 2px; +} +.estimates .estimate { + font-weight: normal; + border-radius: none; + margin-left: -3px; + border-right: 1px solid #858484; + padding-right: 2px; + top: -3px; + background: transparent; + line-height: 15px; +} + +/* span.estimate { border: 1px solid #777; padding: 0 0.2em; @@ -357,6 +395,7 @@ span.estimate_8 { $orange 100%, white 100%)); } +*/ .story.release { background-color: #333; From e21045258078a7c6351cc1daa05413bbb7ddc024 Mon Sep 17 00:00:00 2001 From: Michal Hantl Date: Fri, 22 Aug 2014 22:40:38 +0200 Subject: [PATCH 3/6] use font awesome for icons --- app/assets/stylesheets/screen.css.scss | 32 ++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/app/assets/stylesheets/screen.css.scss b/app/assets/stylesheets/screen.css.scss index 72c35650c..975ac6312 100644 --- a/app/assets/stylesheets/screen.css.scss +++ b/app/assets/stylesheets/screen.css.scss @@ -297,6 +297,38 @@ div.story-title abbr.initials { border: none; } +.fa-star { + color: #FFE000; +} +.fa-star-o { + color: #726904; +} +.fa-icon-overlay { + position: relative; +} +.fa-icon-overlay .fa { + position: absolute; + top: 0; + left: 0; +} +.fa-icon-overlay .fa:first-child { + position: initial; +} +.fa-comment { + color: white; +} +.fa-comment-o { + color: gray; +} +.fa-bug { + color: #C20B0B; +} +.fa-cog { + color: #5E5C5C; +} + + + #in_progress div.story, #backlog div.story, #chilly_bin div.story { From 3d922384ea5818327c124c388f099651611fc171 Mon Sep 17 00:00:00 2001 From: Michal Hantl Date: Fri, 22 Aug 2014 22:41:02 +0200 Subject: [PATCH 4/6] various style changes to achieve less busy screen --- app/assets/stylesheets/screen.css.scss | 69 ++++++++++++++------------ 1 file changed, 38 insertions(+), 31 deletions(-) diff --git a/app/assets/stylesheets/screen.css.scss b/app/assets/stylesheets/screen.css.scss index 975ac6312..d52e3c5c6 100644 --- a/app/assets/stylesheets/screen.css.scss +++ b/app/assets/stylesheets/screen.css.scss @@ -179,7 +179,7 @@ ul#primary-nav li.secondary ul li { } #main { - margin: 1em; + margin: 12px 5px; position: relative; } @@ -227,12 +227,11 @@ div.storycolumn { /* Story columns headers */ .column_header { text-align: left; - background: $darkgrey; - @include background(linear-gradient(top, $darkgrey, $darkgrey*0.75)); + background: #444; color: #eee; - padding: 0.2em 0.2em 0.2em 1em; - text-transform:capitalize; - @include border-radius(5px 5px 0 0); + padding: 0.4em 0.2em 0.3em 0.7em; + text-transform: uppercase; + @include border-radius(2px 2px 0 0); a.toggle-column{ color: #eee; text-decoration: none; @@ -279,7 +278,6 @@ div.story textarea { div.story-icons { float: left; - font-size: 0; } div.story-controls { padding: 10px 0; @@ -430,7 +428,7 @@ span.estimate_8 { */ .story.release { - background-color: #333; + background-color: #444; color: white; } .story.release:hover { @@ -449,10 +447,10 @@ span.estimate_8 { /* Iteration markers */ .iteration { - @include icons-sprite(iteration, false, 2px, 3px); - background-color: #000; - color: #ddd; - padding: 0.2em 0.2em 0.2em 20px + background-color: #707C8B; + color: #f5f5f5; + padding: 0.2em 0.7em 0.2em 20px; + font-size: 12px; } .iteration .points { float: right; @@ -460,46 +458,55 @@ span.estimate_8 { .state-actions input { margin: 0; - padding: .2em .5em; - @include border-radius(3px); - border: 1px solid #333; + padding: .3em .8em; + @include border-radius(2px); + text-transform: capitalize; cursor: pointer; font-size: x-small; color: white; - @include background(linear-gradient(top, $aluminium-3, $aluminium-3*0.75)); - border-color: $aluminium-5; - text-shadow: $aluminium-5 0 1px 0; - @include box-shadow(0 1px 2px #aaaaaa); + background: #999; + border: 1px solid #777; + position: relative; + top: -1px; + /* + border: 1px solid #333; + @include background(linear-gradient(top, $aluminium-3, $aluminium-3*0.75)); + border-color: $aluminium-5; + text-shadow: $aluminium-5 0 1px 0; + @include box-shadow(0 1px 2px #aaaaaa); + */ } .story.release .state-actions input { @include box-shadow(0 1px 2px #000); } +.story.release .tags { + color: #C1D4F1; +} .state-actions input:active { @include box-shadow(none); } .state-actions input.finish { - @include background(linear-gradient(top, $sky-blue-1, $sky-blue-1*0.75)); - border-color: $sky-blue-3; + background: $sky-blue-2; + border: 1px solid #1B3B64; } .state-actions input.deliver { @include background(linear-gradient(top, $butter-1, $butter-1*0.75)); - border-color: $butter-3; + background: #E4BB07; + border: 1px solid #A2960C; + text-shadow: 0px 0px 1px #550; } .state-actions input.accept { - @include background(linear-gradient(top, $chameleon-2, $chameleon-2*0.75)); - border-color: $chameleon-3; + background: $chameleon-3; + border: 1px solid #19790B; } .state-actions input.reject { - @include background(linear-gradient(top, $scarlet-red-1, $scarlet-red-1*0.75)); - border-color: $scarlet-red-3; + background: $scarlet-red-2; + border: 1px solid #8F210D; } .state-actions input.restart { - @include background(sprite($icons-sprites,redo), - linear-gradient(top, $scarlet-red-1, $scarlet-red-1*0.75)); - background-repeat: no-repeat; - border-color: $scarlet-red-3; - padding-left: 16px; + background: $scarlet-red-2; + border: 1px solid #8F210D; } table#import tr.valid, .notice { From a6cf61e86e1ec8e278e140348f62b34d91b95aae Mon Sep 17 00:00:00 2001 From: Michal Hantl Date: Sat, 23 Aug 2014 15:13:23 +0200 Subject: [PATCH 5/6] refactor header a bit --- .../views/column_visibility_button_view.js | 2 +- app/assets/stylesheets/screen.css.scss | 129 +++++------------- app/views/layouts/application.html.erb | 10 +- app/views/projects/_nav.html.erb | 6 - app/views/projects/show.html.erb | 14 +- 5 files changed, 51 insertions(+), 110 deletions(-) diff --git a/app/assets/javascripts/views/column_visibility_button_view.js b/app/assets/javascripts/views/column_visibility_button_view.js index 8e728bc1e..897ee3689 100644 --- a/app/assets/javascripts/views/column_visibility_button_view.js +++ b/app/assets/javascripts/views/column_visibility_button_view.js @@ -16,7 +16,7 @@ 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+" btn btn-default"); this.options.columnView.bind('visibilityChanged', this.setClassName); }, diff --git a/app/assets/stylesheets/screen.css.scss b/app/assets/stylesheets/screen.css.scss index d52e3c5c6..936bbfa59 100644 --- a/app/assets/stylesheets/screen.css.scss +++ b/app/assets/stylesheets/screen.css.scss @@ -48,11 +48,7 @@ a img { } #header { - background: $darkgrey; - @include background(linear-gradient(top, $darkgrey, $darkgrey*0.75)); - border-bottom: 1px solid $darkgrey*0.7; - @include box-shadow(0 1px 2px #aaaaaa); - text-shadow: black 0 1px 0; + background: #3E6A9E; position: relative; z-index: 900; } @@ -107,11 +103,8 @@ ul#primary-nav li.secondary ul li { } #title_bar { - background: #efefef; - @include background(linear-gradient(top, #efefef, #dfe1e2)); - @include box-shadow(0 1px 2px #aaaaaa); - text-shadow: white 0 1px 0; - border-bottom: 1px solid #ededed; + background: #E9E9E9; + border-bottom: 1px solid #d5d5d5; padding: 5px 10px 3px 10px; font-size: 1.0em; line-height: 140%; @@ -122,7 +115,7 @@ ul#primary-nav li.secondary ul li { padding: 10px 1em; div.velocity { - font-size: 1.6em; + font-size: 1.2em; float: right; position: relative; @@ -157,20 +150,31 @@ ul#primary-nav li.secondary ul li { font-style: italic; } - #add_story { - @include background(sprite($icons-sprites, feature, 2, 2), - linear-gradient(top, $aluminium-3, $aluminium-3*0.75)); - background-repeat: no-repeat; - margin: 0; - padding: 0.2em 0.4em 0.2em 18px; - @include border-radius(3px); - border: 1px solid $aluminium-5; - cursor: pointer; - font-size: small; - color: white; - text-shadow: $aluminium-5 0 1px 0; - text-decoration: none; + h1 { + display: inline; + } + .project_nav { + display: inline; } + .column-toggles-wrap { + float: right; + margin-right: 10px; + } + +} + +.btn.btn-default { + background: #999; + margin: 0; + padding: 0.2em 0.4em; + @include border-radius(2px); + border: 1px solid #777; + cursor: pointer; + font-size: small; + color: white; + text-shadow: none; + text-decoration: none; + margin: 0 2px; } #title_bar h1 { @@ -179,7 +183,7 @@ ul#primary-nav li.secondary ul li { } #main { - margin: 12px 5px; + margin: 10px 5px; position: relative; } @@ -191,19 +195,9 @@ html.stories, html.stories body, html.stories div#main { float: right; } -#column-toggles a { - margin: 0 0.2em; - padding: 3px; - color: white; - background-color: $darkgrey; - @include border-radius(3px); - text-decoration: none; - text-shadow: none; -} - #column-toggles a.pressed { - color: $darkgrey; - background-color: #cecece; + color: #636363; + background-color: #E2E2E2; } /* stories table */ @@ -373,60 +367,6 @@ div.story-title abbr.initials { line-height: 15px; } -/* -span.estimate { - border: 1px solid #777; - padding: 0 0.2em; - margin: 0 2px 0 0; - @include border-radius(3px); - vertical-align: top; - font-size: x-small; - font-weight: bold; - font-style: italic; -} - -span.estimate_1 { - @include background(linear-gradient(bottom, - $orange 12.5%, - white 12.5%)); -} -span.estimate_2 { - @include background(linear-gradient(bottom, - $orange 25%, - white 25%)); -} -span.estimate_3 { - @include background(linear-gradient(bottom, - $orange 37.5%, - white 37.5%)); -} -span.estimate_4 { - @include background(linear-gradient(bottom, - $orange 50%, - white 50%)); -} -span.estimate_5 { - @include background(linear-gradient(bottom, - $orange 62.5%, - white 62.5%)); -} -span.estimate_6 { - @include background(linear-gradient(bottom, - $orange 75%, - white 75%)); -} -span.estimate_7 { - @include background(linear-gradient(bottom, - $orange 87.5%, - white 87.5%)); -} -span.estimate_8 { - @include background(linear-gradient(bottom, - $orange 100%, - white 100%)); -} -*/ - .story.release { background-color: #444; color: white; @@ -468,13 +408,6 @@ span.estimate_8 { border: 1px solid #777; position: relative; top: -1px; - /* - border: 1px solid #333; - @include background(linear-gradient(top, $aluminium-3, $aluminium-3*0.75)); - border-color: $aluminium-5; - text-shadow: $aluminium-5 0 1px 0; - @include box-shadow(0 1px 2px #aaaaaa); - */ } .story.release .state-actions input { @include box-shadow(0 1px 2px #000); diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 742919b97..d1b2b0512 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -15,7 +15,13 @@