houston-roadmaps 0.1.0

data/app/assets/javascripts/houston/roadmaps/views/roadmap_view.coffee

@@ -0,0 +1,12 @@
+class Roadmaps.RoadmapView extends Backbone.View
+
+  initialize: ->
+    @setMilestones @options.milestones
+
+  setMilestones: (@milestones)->
+    @roadmap = new Roadmaps.GanttChart(@milestones, @options)
+    @
+
+  render: ->
+    @roadmap.render()
+    @

data/app/assets/javascripts/houston/roadmaps/views/roadmaps_view.coffee

@@ -0,0 +1,29 @@
+class Roadmaps.RoadmapsView extends Backbone.View
+
+  initialize: ->
+    @roadmaps = @options.roadmaps
+    @template = HandlebarsTemplates['houston/roadmaps/roadmaps/index']
+    @renderRoadmap = HandlebarsTemplates['houston/roadmaps/roadmaps/show']
+    super
+
+  render: ->
+    @$el.html @template()
+    $ol = @$el.find("#roadmaps")
+    @roadmaps.each (roadmap) =>
+      $li = $(@renderRoadmap(roadmap.toJSON()))
+      $ol.append $li
+
+      $preview = $li.find(".roadmap-preview")
+      milestones = roadmap.milestones()
+      if milestones.length > 0
+        roadmapView = new Roadmaps.GanttChart milestones,
+          el: $preview[0]
+          viewport: roadmap.viewport()
+          showThumbnail: false
+          linkMilestones: false
+          bandHeight: 8
+          bandMargin: 2
+        roadmapView.render()
+      else
+        $preview.html '<span class="roadmap-empty">Click to add milestones to this roadmap</span>'
+    @

data/app/assets/stylesheets/houston/roadmaps/application.css

@@ -0,0 +1,13 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require_tree .
+ */

data/app/assets/stylesheets/houston/roadmaps/colors.scss.erb

@@ -0,0 +1,41 @@
+// Add percentage of white to a color
+@function tint($color, $percent){
+  @return mix(white, $color, $percent);
+}
+ 
+// Add percentage of black to a color
+@function shade($color, $percent){
+  @return mix(black, $color, $percent);
+}
+
+<% Houston.config.project_colors.each do |name, value| %>
+  $<%= name %>: <%= value.rgb %>;
+<% end %>
+
+.roadmap-milestone, .roadmap-milestone-placeholder {
+  <% Houston.config.project_colors.each do |name, value| %>
+    &.<%= name %> {
+      &::before { background: <%= value.rgb %>; }
+    }
+  <% end %>
+}
+
+body.dashboard .roadmap-milestone {
+  <% Houston.config.project_colors.each do |name, value| %>
+    &.<%= name %> {
+      border-color: <%= value.rgb %>;
+      & > span { color: hsl(hue($<%= name %>), saturation($<%= name %>), 80); }
+      .roadmap-milestone-progress { background: shade($<%= name %>, 25%); }
+
+      &.completed {
+        .roadmap-milestone-progress { background: $<%= name %>; }
+        & > span { color: black; }
+      }
+
+      &.upcoming {
+        border-color: shade(<%= value.rgb %>, 50%);
+        & > span { color: shade(hsl(hue($<%= name %>), saturation($<%= name %>), 80), 50%); }
+      }
+    }
+  <% end %>
+}

data/app/assets/stylesheets/houston/roadmaps/goals.scss

@@ -0,0 +1,20 @@
+.goal {
+  &.neat-interactive:hover td {
+    background-color: rgba(128, 212, 255, 0.1);
+    cursor: pointer;
+  }
+
+  td {
+    padding: 4px 8px;
+    border-bottom: 0;
+  }
+
+  .goal-name {
+    input {
+      margin: 0;
+      width: 100%;
+      box-sizing: border-box;
+      height: 30px;
+    }
+  }
+}

data/app/assets/stylesheets/houston/roadmaps/milestone.scss

@@ -0,0 +1,58 @@
+#find_or_create_ticket {
+  width: 100%;
+  box-sizing: border-box;
+  height: 34px;
+  margin-bottom: 0;
+  padding: 0.5em 1em;
+}
+
+#milestone_view {
+  #show_completed_tickets { margin-bottom: 12px; }
+  &.hide-completed .ticket-closed { display: none; }
+}
+
+.ui-sortable tr.ticket {
+  &:hover td { background-color: rgba(128, 212, 255, 0.1); }
+}
+.table .ui-sortable-helper td { border-bottom: none; background: white; }
+
+.editable td.ticket-handle {
+  background-image: image-url("drag-grip.png");
+  background-repeat: no-repeat;
+  background-position: 9px 50%;
+  cursor: pointer;
+  width: 6px;
+}
+
+.readonly .remove-ticket-button { display: none; }
+
+td.ticket-status { white-space: nowrap; }
+
+td, th {
+  &.ticket-number, &.ticket-effort, &.ticket-progress { text-align: right; }
+}
+
+.milestone-progress {
+  float: right;
+  margin-top: 30.1px !important;
+}
+
+.milestone-goal, .milestone-feedback {
+  &.inline-editable {
+    input, textarea, button { display: none; }
+
+    .inline-editable-link:hover { color: #005580; }
+
+    .blank { font-style: italic; }
+
+    &.in-edit {
+      input, button { display: inline-block; vertical-align: top; }
+      textarea {
+        display: block;
+        width: 100%;
+        height: 8em;
+      }
+      .inline-editable-link { display: none; }
+    }
+  }
+}

data/app/assets/stylesheets/houston/roadmaps/roadmap.scss

@@ -0,0 +1,276 @@
+$roadmap-padding: 1.33em;
+
+.callout.roadmap {
+  padding-left: 0;
+  padding-right: 0;
+  border-top: 0;
+  padding-top: 0;
+  padding-bottom: $roadmap-padding;
+}
+
+
+#roadmap {
+  position: relative;
+  overflow: hidden; // so the roadmap can't be scrolled left and right
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &.drag-create {
+    cursor: ew-resize;
+    cursor: col-resize;
+  }
+
+  .roadmap-axis {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}
+
+.roadmap-band {
+  position: relative;
+
+  &.sort-active {
+    &::before {
+      content: '.';
+      color: transparent;
+      position: absolute;
+      top: -6px;
+      left: -6px;
+      right: -6px;
+      bottom: -6px;
+      background: #f8f8f8;
+      box-shadow: inset 0 0 3px #ccc;
+    }
+  }
+}
+
+body.dashboard {
+  .roadmap-band {
+    margin: 4px 0;
+    height: 34px;
+  }
+
+  .roadmap-milestone {
+    background: black;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1.25em;
+    padding: 0;
+
+    & > span {
+      -webkit-font-smoothing: antialiased;
+      white-space: normal;
+
+      display: block;
+      overflow: hidden;
+      height: 100%;
+    }
+
+    &::before { display: none; }
+  }
+
+  .roadmap-marker, .roadmap-today {
+    background: rgba(255, 255, 255, 0.15);
+    width: 3px;
+  }
+}
+
+@-webkit-keyframes progress
+{
+to {background-position: 30px 0;}
+}
+@-moz-keyframes progress
+{
+to {background-position: 30px 0;}
+}
+
+@keyframes progress
+{
+to {background-position: 30px 0;}
+}
+
+.roadmap-milestone, .roadmap-milestone-placeholder {
+  position: absolute;
+  border: 1px solid #ccc;
+  background: #ddd;
+  border-radius: 2px;
+  text-align: center;
+  cursor: default;
+  padding: 4px 2px 4px 8px;
+  box-sizing: border-box;
+  z-index: 2;
+
+  &.unlocked {
+    border: 2px dashed #ccc;
+    background: #e4e4e4;
+    border-radius: 4px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+
+    &::before {
+      border-top-left-radius: 2px;
+      border-bottom-left-radius: 2px;
+    }
+  }
+
+  &::before {
+    content: '.';
+    color: transparent;
+    display: block;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    bottom: 1px;
+    width: 5px;
+  }
+}
+
+rect.roadmap-thumbnail-milestone.completed { opacity: 0.5; }
+
+.roadmap-milestone > span {
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+a.roadmap-milestone {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+body:not(.dashboard) {
+  .roadmap-milestone {
+    &.clickable:hover {
+      background: #DAE7EA;
+      color: #254a53;
+      border-color: #BACFD4;
+
+      &::before {
+        background: #89A6AD !important;
+      }
+    }
+  }
+}
+
+.roadmap-milestone:focus {
+  outline: 0;
+}
+
+.roadmap-milestone.dropdown-open {
+  background: #d3e4e8;
+  color: #254a53;
+  border-color: #5b7a82;
+}
+
+.roadmap-milestone-placeholder {
+  cursor: col-resize;
+
+  &.creating {
+    background: #d8d8d8;
+    -webkit-animation: progress 1s linear infinite;
+    animation: progress 1s linear infinite;
+    background-size: 30px 30px;
+    background-repeat: repeat-x;
+    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.20) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.20) 50%, rgba(255, 255, 255, 0.20) 75%, transparent 75%, transparent);
+    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.20) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.20) 50%, rgba(255, 255, 255, 0.20) 75%, transparent 75%, transparent);
+  }
+}
+
+.roadmap-milestone {
+  .ui-resizable-e {
+    cursor: ew-resize;
+    cursor: col-resize;
+    width: 14px;
+  }
+
+  .ui-resizable-s {
+    cursor: ns-resize;
+    cursor: row-resize;
+  }
+
+  .ui-resizable-se {
+    right: -2px;
+    bottom: -2px;
+    height: 16px;
+    width: 16px;
+    background: none;
+  }
+
+  &.locked .ui-resizable-handle { display: none; }
+
+  &.ui-resizable-resizing {
+    z-index: 10;
+  }
+}
+
+.roadmap-milestone-progress {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.roadmap-thumbnail {
+  margin-bottom: $roadmap-padding;
+
+  svg { width: 100%; }
+  .axis text { font-size: 11px; }
+  .roadmap-thumbnail-band { fill: rgba(0,0,0,0.1); }
+}
+
+.roadmap-thumbnail-viewer {
+  position: absolute;
+  background: rgba(0, 0, 40, 0.1);
+  border: 1px solid black;
+}
+
+.roadmap-bands {
+  position: relative;
+  padding: 1px 0 24px;
+}
+
+.roadmap-marker, .roadmap-today {
+  position: absolute;
+  top: 0;
+  bottom: 24px;
+  width: 2px;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 101;
+}
+
+.roadmap-weekend {
+  background: rgba(255, 255, 255, 0.4);
+  position: absolute;
+  top: 1px;
+  bottom: 24px;
+}
+
+#goals_view {
+  position: fixed;
+  border-top: 2px solid;
+  bottom: 46px;
+  left: 0;
+  right: 0;
+  padding: 0 20px;
+  overflow-y: scroll;
+
+  .goal-project {
+    width: 9em;
+  }
+}