Merge branch 'master' of gitlab.com:gitlab-org/gitlab-ce

14 files changed, 462 insertions, 122 deletions

diff --git a/app/assets/images/mailers/gitlab_header_logo.png b/app/assets/images/mailers/gitlab_header_logo.png
new file mode 100644
index 00000000000..35ca1860887
--- /dev/null
+++ b/app/assets/images/mailers/gitlab_header_logo.png
diff --git a/app/assets/images/mailers/gitlab_tanuki_2x.png b/app/assets/images/mailers/gitlab_tanuki_2x.png
new file mode 100644
index 00000000000..551dd6ce2ce
--- /dev/null
+++ b/app/assets/images/mailers/gitlab_tanuki_2x.png
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index bffce5a0c0f..ff69e27bbcf 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -19,7 +19,6 @@
 #= require jquery.scrollTo
 #= require jquery.turbolinks
 #= require d3
-#= require cal-heatmap
 #= require turbolinks
 #= require autosave
 #= require bootstrap/affix
diff --git a/app/assets/javascripts/calendar.js.coffee b/app/assets/javascripts/calendar.js.coffee
index d80e0e716ce..f9c7bffdadb 100644
--- a/app/assets/javascripts/calendar.js.coffee
+++ b/app/assets/javascripts/calendar.js.coffee
@@ -1,34 +1,198 @@
 class @Calendar
-  constructor: (timestamps, starting_year, starting_month, calendar_activities_path) ->
-    cal = new CalHeatMap()
-    cal.init
-      itemName: ["contribution"]
-      data: timestamps
-      start: new Date(starting_year, starting_month)
-      domainLabelFormat: "%b"
-      id: "cal-heatmap"
-      domain: "month"
-      subDomain: "day"
-      range: 12
-      tooltip: true
-      label:
-        position: "top"
-      legend: [
-        0
-        10
-        20
-        30
-      ]
-      legendCellPadding: 3
-      cellSize: $('.user-calendar').width() / 73
-      onClick: (date, count) ->
-        formated_date = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate()
-        $.ajax
-          url: calendar_activities_path
-          data:
-            date: formated_date
-          cache: false
-          dataType: "html"
-          success: (data) ->
-            $(".user-calendar-activities").html data
+  constructor: (timestamps, @calendar_activities_path) ->
+    @currentSelectedDate = ''
+    @daySpace = 1
+    @daySize = 15
+    @daySizeWithSpace = @daySize + (@daySpace * 2)
+    @monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+    @months = []
+    @highestValue = 0
 
+    # Get the highest value from the timestampes
+    _.each timestamps, (count) =>
+      if count > @highestValue
+        @highestValue = count
+
+    # Loop through the timestamps to create a group of objects
+    # The group of objects will be grouped based on the day of the week they are
+    @timestampsTmp = []
+    i = 0
+    group = 0
+    _.each timestamps, (count, date) =>
+      newDate = new Date parseInt(date) * 1000
+      day = newDate.getDay()
+
+      # Create a new group array if this is the first day of the week
+      # or if is first object
+      if (day is 0 and i isnt 0) or i is 0
+        @timestampsTmp.push []
+        group++
+
+      innerArray = @timestampsTmp[group-1]
+
+      # Push to the inner array the values that will be used to render map
+      innerArray.push
+        count: count
+        date: newDate
+        day: day
+
+      i++
+
+    # Init color functions
+    @color = @initColor()
+    @colorKey = @initColorKey()
+
+    # Init the svg element
+    @renderSvg(group)
+    @renderDays()
+    @renderMonths()
+    @renderDayTitles()
+    @renderKey()
+
+    @initTooltips()
+
+  renderSvg: (group) ->
+    @svg = d3.select '.js-contrib-calendar'
+      .append 'svg'
+      .attr 'width', (group + 1) * @daySizeWithSpace
+      .attr 'height', 167
+      .attr 'class', 'contrib-calendar'
+
+  renderDays: ->
+    @svg.selectAll 'g'
+      .data @timestampsTmp
+      .enter()
+      .append 'g'
+      .attr 'transform', (group, i) =>
+        _.each group, (stamp, a) =>
+          if a is 0 and stamp.day is 0
+            month = stamp.date.getMonth()
+            x = (@daySizeWithSpace * i + 1) + @daySizeWithSpace
+            lastMonth = _.last(@months)
+            if lastMonth?
+              lastMonthX = lastMonth.x
+
+            if !lastMonth?
+              @months.push
+                month: month
+                x: x
+            else if month isnt lastMonth.month and x - @daySizeWithSpace isnt lastMonthX
+              @months.push
+                month: month
+                x: x
+
+        "translate(#{(@daySizeWithSpace * i + 1) + @daySizeWithSpace}, 18)"
+      .selectAll 'rect'
+      .data (stamp) ->
+        stamp
+      .enter()
+      .append 'rect'
+      .attr 'x', '0'
+      .attr 'y', (stamp, i) =>
+        (@daySizeWithSpace * stamp.day)
+      .attr 'width', @daySize
+      .attr 'height', @daySize
+      .attr 'title', (stamp) =>
+        contribText = 'No contributions'
+
+        if stamp.count > 0
+          contribText = "#{stamp.count} contribution#{if stamp.count > 1 then 's' else ''}"
+
+        date = dateFormat(stamp.date, 'mmm d, yyyy')
+
+        "#{contribText}<br />#{date}"
+      .attr 'class', 'user-contrib-cell js-tooltip'
+      .attr 'fill', (stamp) =>
+        if stamp.count isnt 0
+          @color(stamp.count)
+        else
+          '#ededed'
+      .attr 'data-container', 'body'
+      .on 'click', @clickDay
+
+  renderDayTitles: ->
+    days = [{
+      text: 'M'
+      y: 29 + (@daySizeWithSpace * 1)
+    }, {
+      text: 'W'
+      y: 29 + (@daySizeWithSpace * 3)
+    }, {
+      text: 'F'
+      y: 29 + (@daySizeWithSpace * 5)
+    }]
+    @svg.append 'g'
+      .selectAll 'text'
+      .data days
+      .enter()
+      .append 'text'
+      .attr 'text-anchor', 'middle'
+      .attr 'x', 8
+      .attr 'y', (day) ->
+        day.y
+      .text (day) ->
+        day.text
+      .attr 'class', 'user-contrib-text'
+
+  renderMonths: ->
+    @svg.append 'g'
+      .selectAll 'text'
+      .data @months
+      .enter()
+      .append 'text'
+      .attr 'x', (date) ->
+        date.x
+      .attr 'y', 10
+      .attr 'class', 'user-contrib-text'
+      .text (date) =>
+        @monthNames[date.month]
+
+  renderKey: ->
+    keyColors = ['#ededed', @colorKey(0), @colorKey(1), @colorKey(2), @colorKey(3)]
+    @svg.append 'g'
+      .attr 'transform', "translate(18, #{@daySizeWithSpace * 8 + 16})"
+      .selectAll 'rect'
+      .data keyColors
+      .enter()
+      .append 'rect'
+      .attr 'width', @daySize
+      .attr 'height', @daySize
+      .attr 'x', (color, i) =>
+        @daySizeWithSpace * i
+      .attr 'y', 0
+      .attr 'fill', (color) ->
+        color
+
+  initColor: ->
+    d3.scale
+      .linear()
+      .range(['#acd5f2', '#254e77'])
+      .domain([0, @highestValue])
+
+  initColorKey: ->
+    d3.scale
+      .linear()
+      .range(['#acd5f2', '#254e77'])
+      .domain([0, 3])
+
+  clickDay: (stamp) ->
+    if @currentSelectedDate isnt stamp.date
+      @currentSelectedDate = stamp.date
+      formatted_date = @currentSelectedDate.getFullYear() + "-" + (@currentSelectedDate.getMonth()+1) + "-" + @currentSelectedDate.getDate()
+
+      $.ajax
+        url: @calendar_activities_path
+        data:
+          date: formatted_date
+        cache: false
+        dataType: 'html'
+        beforeSend: ->
+          $('.user-calendar-activities').html '<div class="text-center"><i class="fa fa-spinner fa-spin user-calendar-activities-loading"></i></div>'
+        success: (data) ->
+          $('.user-calendar-activities').html data
+    else
+      $('.user-calendar-activities').html ''
+
+  initTooltips: ->
+    $('.js-contrib-calendar .js-tooltip').tooltip
+      html: true
diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee
new file mode 100644
index 00000000000..6adac6dac97
--- /dev/null
+++ b/app/assets/javascripts/layout_nav.js.coffee
@@ -0,0 +1,14 @@
+class @LayoutNav
+  $ ->
+    $('.fade-left').addClass('end-scroll')
+    $('.scrolling-tabs').on 'scroll', (event) ->
+      $this = $(this)
+      $el = $(event.target)
+      currentPosition = $this.scrollLeft()
+      size = bp.getBreakpointSize()
+      controlBtnWidth = $('.controls').width()
+      maxPosition = $this.get(0).scrollWidth - $this.parent().width()
+      maxPosition += controlBtnWidth if size isnt 'xs' and $('.nav-control').length
+
+      $el.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
+      $el.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index e2d590f4df4..8b93665d085 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -8,7 +8,6 @@
  *= require select2
  *= require_self
  *= require dropzone/basic
- *= require cal-heatmap
  *= require cropper.css
 */
 
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index 11f39d583bd..8642b7530e2 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -1,70 +1,44 @@
 .calender-block {
+  padding-left: 0;
+  padding-right: 0;
+
   @media (min-width: $screen-sm-min) and (max-width: $screen-lg-min) {
     overflow-x: scroll;
   }
 }
 
 .user-calendar-activities {
-  .calendar_onclick_hr {
-    padding: 0;
-    margin: 10px 0;
-  }
-
   .str-truncated {
     max-width: 70%;
   }
 
-  .text-expander {
-    background: #eee;
-    color: #555;
-    padding: 0 5px;
-    cursor: pointer;
-    margin-left: 4px;
-    &:hover {
-      background-color: #ddd;
-    }
+  .user-calendar-activities-loading {
+    font-size: 24px;
   }
 }
 
-/**
-* This overwrites the default values of the cal-heatmap gem
-*/
-.calendar {
-  .qi {
-    fill: #fff;
-  }
-
-  .q1 {
-    fill: #ededed !important;
-  }
+.user-calendar {
+  text-align: center;
 
-  .q2 {
-    fill: #acd5f2 !important;
-  }
-
-  .q3 {
-    fill: #7fa8d1 !important;
-  }
-
-  .q4 {
-    fill: #49729b !important;
-  }
-
-  .q5 {
-    fill: #254e77 !important;
+  .calendar {
+    display: inline-block;
   }
+}
 
-  .future {
-    visibility: hidden;
+.user-contrib-cell {
+  &:hover {
+    cursor: pointer;
+    stroke: #000;
   }
+}
 
-  .domain-background {
-    fill: none;
-    shape-rendering: crispedges;
-  }
+.user-contrib-text {
+  font-size: 12px;
+  fill: #959494;
+}
 
-  .ch-tooltip {
-    padding: 3px;
-    font-weight: 550;
-  }
+.calendar-hint {
+  margin-top: -23px;
+  float: right;
+  font-size: 12px;
 }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 2ae6c61d524..adfe5540704 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -1,3 +1,34 @@
+@mixin fade($gradient-direction, $rgba, $gradient-color) {
+  visibility: visible;
+  opacity: 1;
+  position: absolute;
+  bottom: 12px;
+  width: 43px;
+  height: 30px;
+  transition-duration: .3s;
+  -webkit-transform: translateZ(0);
+  background: -webkit-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
+  background: -o-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
+  background: -moz-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
+  background: linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
+
+  &.end-scroll {
+    visibility: hidden;
+    opacity: 0;
+    transition-duration: .3s;
+  }
+}
+
+@mixin scrolling-links() {
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 .nav-links {
   padding: 0;
   margin: 0;
@@ -209,13 +240,8 @@
     float: right;
     padding: 7px 0 0;
 
-    @media (max-width: $screen-xs-min) {
-      float: none;
-      padding: 0 9px;
-
-      .dropdown-new {
-        width: 100%;
-      }
+    @media (max-width: $screen-xs-max) {
+      display: none;
     }
 
     i {
@@ -246,14 +272,18 @@
   }
 
   .nav-links {
+    @include scrolling-links();
     border-bottom: none;
     height: 51px;
-    white-space: nowrap;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    &::-webkit-scrollbar {
-      display: none;
+
+    .fade-right {
+      @include fade(left, rgba(250, 250, 250, 0.4), $background-color);
+      right: 0;
+    }
+
+    .fade-left {
+      @include fade(right, rgba(250, 250, 250, 0.4), $background-color);
+      left: 0;
     }
 
     li {
@@ -278,16 +308,39 @@
     }
   }
 
+  .nav-control {
+    .fade-right {
+
+      @media (min-width: $screen-xs-max) {
+        right: 67px;
+      }
+      @media (max-width: $screen-xs-min) {
+        right: 0;
+      }
+    }
+  }
 }
 
-.page-with-layout-nav {
-  margin-top: 50px;
+.nav-block {
+  position: relative;
 
-  &.controls-dropdown-visible {
-    @media (max-width: $screen-xs-min) {
-      margin-top: 96px;
+  .nav-links {
+    @include scrolling-links();
+
+    .fade-right {
+      @include fade(left, rgba(255, 255, 255, 0.4), $white-light);
+      right: 0;
+    }
+
+    .fade-left {
+      @include fade(right, rgba(255, 255, 255, 0.4), $white-light);
+      left: 0;
     }
   }
+}
+
+.page-with-layout-nav {
+  margin-top: $header-height + 2;
 
   .right-sidebar {
     top: ($header-height * 2) + 2;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index f90d7a806d3..67f491b6d9c 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -324,7 +324,7 @@
 
   .layout-nav {
     @media (max-width: $screen-xs-min) {
-      padding-right: 0;;
+      padding-right: 0;
     }
 
     @media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
diff --git a/app/assets/stylesheets/mailers/devise.scss b/app/assets/stylesheets/mailers/devise.scss
new file mode 100644
index 00000000000..28611a5ec81
--- /dev/null
+++ b/app/assets/stylesheets/mailers/devise.scss
@@ -0,0 +1,134 @@
+// NOTE: This stylesheet is for the exclusive use of the `devise_mailer` layout
+// used for Devise email templates, and _should not_ be included in any
+// application stylesheets.
+//
+// Styles defined here are embedded directly into the resulting email HTML via
+// the `premailer` gem.
+
+$body-background-color:    #363636;
+$message-background-color: #fafafa;
+
+$header-color:             #6b4fbb;
+$body-color:               #444;
+$cta-color:                #e14329;
+$footer-link-color:        #7e7e7e;
+
+$font-family: Helvetica, Arial, sans-serif;
+
+body {
+  background-color: $body-background-color;
+  font-family: $font-family;
+  margin: 0;
+  padding: 0;
+}
+
+table {
+  -premailer-cellpadding: 0;
+  -premailer-cellspacing: 0;
+
+  border: 0;
+  border-collapse: separate;
+
+  &#wrapper {
+    background-color: $body-background-color;
+    width: 100%;
+  }
+
+  &#header {
+    margin: 0 auto;
+    text-align: left;
+    width: 600px;
+  }
+
+  &#body {
+    background-color: $message-background-color;
+    border: 1px solid #000;
+    border-radius: 4px;
+    margin: 0 auto;
+    width: 600px;
+  }
+
+  &#footer {
+    color: $footer-link-color;
+    font-size: 14px;
+    text-align: center;
+    width: 100%;
+  }
+
+  td {
+    &#body-container {
+      padding: 20px 40px;
+    }
+  }
+}
+
+.center {
+  text-align: center;
+}
+
+#logo {
+  border: none;
+  outline: none;
+  min-height: 88px;
+  width: 134px;
+}
+
+#content {
+  h2 {
+    color: $header-color;
+    font-size: 30px;
+    font-weight: 400;
+    line-height: 34px;
+    margin-top: 0;
+  }
+
+  p {
+    color: $body-color;
+    font-size: 17px;
+    line-height: 24px;
+    margin-bottom: 0;
+  }
+}
+
+#cta {
+  border: 1px solid $cta-color;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 20px 0;
+  padding: 12px 24px;
+
+  a {
+    background-color: $message-background-color;
+    color: $cta-color;
+    display: inline-block;
+    text-decoration: none;
+  }
+}
+
+#tanuki {
+  padding: 40px 0 0;
+
+  img {
+    border: none;
+    outline: none;
+    width: 37px;
+    min-height: 36px;
+  }
+}
+
+#tagline {
+  font-size: 22px;
+  font-weight: 100;
+  padding: 4px 0 40px;
+}
+
+#social {
+  padding: 0 10px 20px;
+  width: 600px;
+  word-spacing: 20px;
+
+  a {
+    color: $footer-link-color;
+    text-decoration: none;
+  }
+}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 59f72cd8b69..4e35ca329e4 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -91,8 +91,3 @@ form.edit-issue {
 .issue-form .select2-container {
   width: 250px !important;
 }
-
-.issue-closed-by-widget {
-  color: $gl-text-color;
-  margin-left: 52px;
-}
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index c4005ba1e69..4f8a8748d3f 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -280,11 +280,5 @@
       background-color: $white-light;
       color: $gl-placeholder-color;
     }
-
-    th,
-    td {
-      padding: 16px;
-    }
   }
 }
-
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 546176b65e4..6128868b670 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -1,4 +1,24 @@
-.pipeline-stage {
-  overflow: hidden;
-  text-overflow: ellipsis;
+.pipelines {
+  .stage {
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .duration, .finished_at {
+    margin: 4px 0;
+  }
+
+  .commit-title {
+    margin: 0;
+  }
+
+  .controls {
+    white-space: nowrap;
+  }
+
+  .btn {
+    margin: 4px;
+  }
 }
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 8040dd0a1d8..167ab40d881 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -66,12 +66,6 @@
   }
 }
 
-.calendar-hint {
-  margin-top: -12px;
-  float: right;
-  font-size: 12px;
-}
-
 .profile-link-holder {
   display: inline;