workarea-admin 3.4.45 → 3.5.0.beta.1

data/app/assets/javascripts/workarea/admin/modules/toggle_elements.js

@@ -0,0 +1,27 @@
+/**
+ * @namespace WORKAREA.toggleElement
+ */
+WORKAREA.registerModule('toggleElement', (function () {
+    'use strict';
+
+    /**
+     * @method
+     * @name init
+     * @memberof WORKAREA.toggleElement
+     */
+    var toggle = function (event) {
+            var $target = $(event.target).data('toggle');
+
+            event.preventDefault();
+
+            $target.toggleClass('hidden');
+        },
+
+        init = function ($scope) {
+            $('[data-toggle-element]', $scope).on('click', toggle);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/admin/modules/tribute_areas.js

@@ -0,0 +1,91 @@
+/**
+ * @namespace WORKAREA.tributeAreas
+ */
+ WORKAREA.registerModule('tributeAreas', (function () {
+    'use strict';
+
+    var hiddenInput = JST['workarea/core/templates/hidden_input'],
+
+        getValidMentions = function ($form) {
+            var $element = $form.find('[data-tribute-area]'),
+                words = $element.val().split(/\s+/),
+                storedMentions = $element.data('tributeMentions') || [],
+                typedMentions = _.filter(words, function (word) {
+                    return word.startsWith(
+                        WORKAREA.config.tributeAreas.trigger
+                    );
+                });
+
+            return _.filter(storedMentions, function (stored) {
+                var value = stored.original.fillAttr;
+                return _.some(typedMentions, _.method('includes', value));
+            });
+        },
+
+        updateForm = function (event) {
+            var $form = $(event.target);
+
+            _.forEach(getValidMentions($form), function (mention) {
+                $form.append(function () {
+                    return hiddenInput({
+                        name: 'subscribed_user_ids[]',
+                        value: mention.original.id
+                    });
+                });
+            });
+        },
+
+        requestData = function (element, text, resolve) {
+            var baseUrl = $(element).data('tributeArea'),
+                endpoint = WORKAREA.url.addToQuery(baseUrl, 'q=' + text);
+
+            $.get(endpoint)
+            .done(function (response) {
+                resolve(response.mentions);
+            })
+            .fail(function () {
+                resolve([]);
+            });
+        },
+
+        storeMention = function (event) {
+            var mentions = $(event.target).data('tributeMentions') || [];
+            mentions.push(event.detail.item);
+            $(event.target).data('tributeMentions', mentions);
+        },
+
+        setup = function (index, element) {
+            var tribute = new Tribute({
+                collection: [
+                    {
+                        trigger: WORKAREA.config.tributeAreas.trigger,
+                        values: function (text, callback) {
+                            requestData(element, text, function (mentions) {
+                                return callback(mentions);
+                            });
+                        },
+                        lookup: 'lookup',
+                        fillAttr: 'fillAttr'
+                    }
+                ]
+            });
+
+            tribute.attach(element);
+
+            $(element).on('tribute-replaced', storeMention);
+            $(element).closest('form').on('submit', updateForm);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.tributeAreas
+         */
+        init = function (scope) {
+            $('[data-tribute-area]', scope).each(setup);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/admin/templates/chart_legend.jst.ejs

@@ -1,9 +1,17 @@
-<!-- TODO remove in v4, not used >= 3.4 -->
-<ul class="chart-legend">
-    <% _.forEach(datasets, function (dataset) { %>
-        <li class="chart-legend__item">
-            <span class="chart-legend__color-dot" style="background: <%= dataset.legendColor %>"></span>
-            <span class="chart-legend__label"><%= dataset.label %></span>
-        </li>
-    <% }); %>
-</ul>
+<div class="chart-legend">
+    <ul class="chart-legend__list">
+        <% _.forEach(datasets, function (dataset, index) { %>
+            <li class="chart-legend__list-item" style="color: <%= dataset.backgroundColor %>">
+                <span class="checkbox">
+                    <% checked = !!enabled[dataset.label] %>
+                    <input type="checkbox" value="<%= index %>" class="checkbox__input" id="chart_dataset_<%= index %>"<% if (checked) { %> checked="checked"<% } %>>
+                    <label for="chart_dataset_<%= index %>" class="checkbox__label">
+                        <strong>
+                            <%= dataset.label %>
+                        </strong>
+                    </label>
+                </span>
+            </li>
+        <% }); %>
+    </ul>
+</div>

data/app/assets/javascripts/workarea/admin/templates/jump_to_menu.jst.ejs

@@ -0,0 +1,13 @@
+<div class='jump-to-menu' data-turbolinks='false'>
+    <nav class='jump-to-menu__container'>
+        <ul class='jump-to-menu__list'>
+            <% _.forEach(items, function (item) { %>
+                <li class='jump-to-menu__list-item'>
+                    <a href='#<%= item.anchor %>' class='jump-to-menu__link jump-to-menu__link--<%= item.level %>'>
+                        <%= item.name %>
+                    </a>
+                </li>
+            <% }); %>
+        </ul>
+    </nav>
+</div>

data/app/assets/stylesheets/workarea/admin/application.scss.erb

@@ -64,6 +64,7 @@
 @import 'jquery_ui/admin/ui_sortable';
 @import 'turbolinks/admin/progress_bar';
 @import 'spectrum';
+@import 'tribute/index';
 <%= append_stylesheets('admin.dependencies') %>
 
 @import 'workarea/admin/components/asset_picker_field';
@@ -138,6 +139,8 @@
 @import 'workarea/admin/components/insight';
 @import 'workarea/admin/components/secondary_nav';
 @import 'workarea/admin/components/dashboard_graphs';
+@import 'workarea/admin/components/jump_to_menu';
+@import 'workarea/admin/components/chart_legend';
 <%= append_stylesheets('admin.components') %>
 
 @import 'workarea/admin/trumps/break_word';

data/app/assets/stylesheets/workarea/admin/base/_forms.scss

@@ -4,8 +4,8 @@
 
 $forms-color:              $off-black !default;
 $forms-bg-color:           $white !default;
-$forms-disabled-color:     $dark-gray !default;
-$forms-disabled-bg-color:  $gray !default;
+$forms-disabled-color:     $gray !default;
+$forms-disabled-bg-color:  $light-gray !default;
 $forms-placeholder-color:  $dark-gray !default;
 
 

data/app/assets/stylesheets/workarea/admin/components/_activity.scss

@@ -7,19 +7,28 @@ $activity-message-color: $dark-gray !default;
 $activity-time-color:    $dark-gray !default;
 $activity-bg-color:      $white !default;
 $activity-border-color:  $border-color !default;
+$activity-box-shadow: 0 2px 8px rgba($off-black, 0.5) !default;
+$activity-border-radius: $global-border-radius !default;
+$activity-message-border: 1px solid $off-white !default;
+$activity-in-card-border: 1px solid $light-gray !default;
 
 $activity-avatar-size:  32px !default;
 
 
 .activity {
     @extend %clearfix;
-    padding: $spacing-unit;
-    width: 100%;
+    position: relative;
+    padding: ($spacing-unit * 2) $spacing-unit ($spacing-unit * 2) ($activity-avatar-size / 2);
     color: $activity-color;
     background: $activity-bg-color;
+    box-shadow: $activity-box-shadow;
+    margin-bottom: $spacing-unit * 2;
+    margin-left: $activity-avatar-size / 2;
+    border-radius: $activity-border-radius;
 
-    & + & {
-        border-top: 1px solid $activity-border-color;
+    .card & {
+        box-shadow: none;
+        border: $activity-in-card-border;
     }
 }
 
@@ -28,7 +37,9 @@ $activity-avatar-size:  32px !default;
     }
 
         .activity__avatar {
-            float: left;
+            position: absolute;
+            transform: translateX(-100%);
+            width: $activity-avatar-size;
             height: $activity-avatar-size;
         }
 
@@ -36,28 +47,25 @@ $activity-avatar-size:  32px !default;
             @extend %heading;
             @extend %heading--3;
             @extend %heading--no-margin;
-            float: left;
-            width: calc(100% - #{$activity-avatar-size});
-            padding-top: $spacing-unit / 2;
             padding-left: $spacing-unit;
-            line-height: normal;
         }
 
         .activity__time {
-            clear: both;
-            display: block;
             color: $activity-time-color;
-            font-size: 0.8rem;
-            margin-left: $activity-avatar-size + $spacing-unit;
-            margin-bottom: $spacing-unit;
+            padding-left: $spacing-unit;
+            margin-bottom: 0;
         }
 
         .activity__actions {
-            float: right;
+            position: absolute;
+            top: $spacing-unit;
+            right: $spacing-unit;
         }
 
         .activity__message {
-            margin-left: $activity-avatar-size + $spacing-unit;
             color: $activity-message-color;
+            padding: $spacing-unit $spacing-unit 0;
+            margin-top: $spacing-unit;
+            border-top: $activity-message-border;
         }
 

data/app/assets/stylesheets/workarea/admin/components/_activity_group.scss

@@ -2,26 +2,10 @@
     #ACTIVITY-GROUP
 \*------------------------------------*/
 
-$activity-group-border: 1px solid $border-color !default;
-
-$activity-group-header-color:      $off-black !default;
-$activity-group-header-bg-color:   $light-gray !default;
-$activity-group-header-border:     1px solid $border-color !default;
-
 .activity-group {
-    padding: $spacing-unit 0;
-}
-
-.activity-group--bordered {
-    border-bottom: $activity-group-border;
-}
-
-    .activity-group__header {
-        padding: $spacing-unit * 2;
-        color: $activity-group-header-color;
-        font-size: $font-size + 6px;
-        background: $activity-group-header-bg-color;
-        border-bottom: $activity-group-header-border;
+    & + & {
+        margin-top: $spacing-unit * 4;
     }
+}
 
     .activity-group__activities {}

data/app/assets/stylesheets/workarea/admin/components/_box.scss

@@ -4,8 +4,9 @@
 
 $box-bg-color:       $white !default;
 $box-border-color:   $border-color !default;
-$box-head-bg-color:  $light-gray !default;
+$box-head-bg-color:  $off-white !default;
 $box-body-color:     $dark-gray !default;
+$box-body-padding:   $spacing-unit * 2 !default;
 
 $box-padding:            16px !default;
 $box-heading-font-size:  14px !default;
@@ -15,7 +16,6 @@ $box-rounded-border-radius:  $global-border-radius !default;
 
 .box {
     margin-bottom: $vertical-margin;
-    padding: $box-padding;
     background: $box-bg-color;
     border: 1px solid $box-border-color;
 }
@@ -24,8 +24,8 @@ $box-rounded-border-radius:  $global-border-radius !default;
     border-radius: $box-rounded-border-radius;
 }
 
-.box--no-padding {
-    padding: 0;
+.box--padded {
+    padding: $spacing-unit;
 }
 
 
@@ -39,14 +39,30 @@ $box-rounded-border-radius:  $global-border-radius !default;
             margin: 0;
             font-size: $box-heading-font-size;
             font-weight: bold;
-            text-transform: uppercase;
         }
 
 
     .box__body {
         color: $box-body-color;
+        padding: $box-padding;
+
+        .box--no-padding & {
+            padding: 0;
+        }
+    }
+
+    .box__body--pad-top {
+        padding-top: $box-body-padding;
     }
 
         .box__actions {
             text-align: right;
         }
+
+        .box__section {
+            & + & {
+                margin-top: $spacing-unit * 2;
+                padding-top: $spacing-unit * 2;
+                border-top: 1px dashed $box-border-color;
+            }
+        }

data/app/assets/stylesheets/workarea/admin/components/_calendar.scss

@@ -2,44 +2,39 @@
     #CALENDAR
 \*------------------------------------*/
 
-$calendar-bg-color:                      $white !default;
-$calendar-control-icon-color:            $blue !default;
-$calendar-control-icon-hover-color:      $white !default;
-$calendar-control-bg-color:              $white !default;
-$calendar-control-hover-bg-color:        $blue !default;
-$calendar-control-border-color:          $blue !default;
-$calendar-header-color:                  $gray !default;
-$calendar-weekday-bg-color:              $transparent !default;
-$calendar-day-bg-color:                  $off-white !default;
-$calendar-day-odd-bg-color:              $white !default;
-$calendar-day-odd-border-color:          $light-gray !default;
-$calendar-day-number-color:              $off-black !default;
-$calendar-day-number-odd-color:          $gray !default;
-$calendar-day-number-today-color:        $white !default;
-$calendar-day-number-today-bg-color:     $gray !default;
-$calendar-release-color:                 $white !default;
-$calendar-release-bg-color:              $blue !default;
-$calendar-release-content-color:         $gray !default;
-$calendar-release-content-bg-color:      $white !default;
-$calendar-release-content-border-color:  $border-color !default;
-$calendar-new-release-icon-color:        $green !default;
-$calendar-release-border-color:          $border-color !default;
-
-$calendar-min-width:              744px !default;
-$calendar-control-size:           32px !default;
-$calendar-day-width:              112px !default;
-$calendar-day-height:             104px !default;
-$calendar-day-gutter:             8px !default;
-$calendar-day-padding:            4px !default;
-$calendar-day-number-dimensions:  24px !default;
-$calendar-day-number-margin:      0 0 4px !default;
-$calendar-release-padding:        3px 6px !default;
-$calendar-release-border-radius:  16px !default;
-$calendar-new-release-icon-size:  16px !default;
-
-$calendar-release-margin:   0 (($calendar-day-gutter + $calendar-day-padding) * -1) 4px !default;
-$calendar-max-width:        ($calendar-day-width + $calendar-day-gutter * 2) * 10 !default;
-$calendar-weekday-padding:  0 0 (24px - $calendar-day-gutter);
+$calendar-bg-color: $white !default;
+$calendar-control-icon-color: $blue !default;
+$calendar-control-icon-hover-color: $white !default;
+$calendar-control-bg-color: $white !default;
+$calendar-control-hover-bg-color: $blue !default;
+$calendar-control-border-color: $blue !default;
+$calendar-header-color: $gray !default;
+$calendar-weekday-bg-color: $transparent !default;
+$calendar-day-bg-color: $off-white !default;
+$calendar-day-odd-bg-color: $white !default;
+$calendar-day-odd-border-color: $light-gray !default;
+$calendar-day-number-color: $off-black !default;
+$calendar-day-number-odd-color: $gray !default;
+$calendar-day-number-today-color: $white !default;
+$calendar-day-number-today-bg-color: $red !default;
+$calendar-release-color: $white !default;
+$calendar-release-bg-color: $blue !default;
+$calendar-new-release-color: $green !default;
+
+$calendar-day-header-border-color: $white !default;
+$calendar-day-header-odd-month-border-color: $light-gray !default;
+
+$calendar-min-width: 744px !default;
+$calendar-control-size: 32px !default;
+$calendar-day-width: 112px !default;
+$calendar-day-height: 104px !default;
+$calendar-day-gutter: 8px !default;
+$calendar-day-padding: 4px !default;
+$calendar-day-number-dimensions: 24px !default;
+$calendar-new-release-icon-size: 16px !default;
+
+$calendar-max-width: ($calendar-day-width + $calendar-day-gutter * 2) * 10 !default;
+$calendar-weekday-padding: 0 0 (24px - $calendar-day-gutter);
 
 
 /**
@@ -163,15 +158,19 @@ $calendar-weekday-padding:  0 0 (24px - $calendar-day-gutter);
          * Calendar Days
          *
          * 1. class added via ReleaseCalendarViewModel
-         * 2. provides positioning context for `.calendar__new-release`
          */
         .calendar__day { /* [1] */
-            position: relative; /* [2] */
-            padding: $calendar-day-padding $calendar-day-padding ($calendar-day-padding + 16px);
+            padding: $calendar-day-padding;
             height: $calendar-day-height;
             background: $calendar-day-bg-color;
             border: 1px solid $transparent;
             vertical-align: top;
+
+            .tooltip-content & {
+                width: 200px;
+                height: auto;
+                padding-bottom: $calendar-day-padding;
+            }
         }
 
         .calendar__day--odd-month { /* [2] */
@@ -183,63 +182,78 @@ $calendar-weekday-padding:  0 0 (24px - $calendar-day-gutter);
         .calendar__day--start-of-week {} /* [2] */
         .calendar__day--end-of-week {} /* [2] */
 
-            .calendar__day-header {}
-
-                .calendar__day-number {
-                    display: inline-block;
-                    margin:  $calendar-day-number-margin;
-                    width:  $calendar-day-number-dimensions;
-                    height: $calendar-day-number-dimensions;
-                    color: $calendar-day-number-color;
-                    font-size: $font-size;
-                    line-height: $calendar-day-number-dimensions;
-                    text-align: center;
-                    background: $transparent;
-                    border-radius: 50%;
-
-                    .calendar__day--odd-month & {
-                        color: $calendar-day-number-odd-color;
-                    }
+            .calendar__day-header {
+                display: table;
+                width: 100%;
+                border-spacing: 0;
+                margin-bottom: $spacing-unit / 2;
+                padding-bottom: $spacing-unit / 2;
+                border-bottom: 1px solid $calendar-day-header-border-color;
 
-                    .calendar__day--today & {
-                        color: $calendar-day-number-today-color;
-                        background: $calendar-day-number-today-bg-color;
-                    }
+                .calendar__day--odd-month & {
+                    border-color: $calendar-day-header-odd-month-border-color;
                 }
+            }
 
 
-                .calendar__new-release {
-                    display: block;
-                    position: absolute;
-                    right: $calendar-day-padding;
-                    bottom: $calendar-day-padding;
-                    left: $calendar-day-padding;
-                    line-height: 1;
-                    text-align: right;
-
-                    &:hover {
-                        text-decoration: none;
-                    }
+                .calendar__day-header-cell {
+                    display: table-cell;
+                    vertical-align: middle;
+
+                    & + & { text-align: right }
                 }
 
-                    .calendar__new-release-text {
-                        color: $green;
-                        font-size: $font-size - 4px;
-                        font-weight: bold;
-                        opacity: 0;
 
-                        .calendar__new-release:hover & {
-                            opacity: 1;
+                    .calendar__day-number {
+                        display: inline-block;
+                        margin: 0;
+                        width: $calendar-day-number-dimensions;
+                        height: $calendar-day-number-dimensions;
+                        color: $calendar-day-number-color;
+                        font-size: $font-size;
+                        line-height: $calendar-day-number-dimensions;
+                        text-align: center;
+                        background: $transparent;
+                        border-radius: 50%;
+
+                        .calendar__day--odd-month & {
+                            color: $calendar-day-number-odd-color;
+                        }
+
+                        .calendar__day--today & {
+                            color: $calendar-day-number-today-color;
+                            background: $calendar-day-number-today-bg-color;
                         }
                     }
 
-                    .calendar__new-release-icon {
-                        width: $calendar-new-release-icon-size;
-                        height: $calendar-new-release-icon-size;
-                        vertical-align: middle;
-                        fill: $calendar-new-release-icon-color;
+
+                    .calendar__new-release {
+                        display: inline-block;
+
+                        &:hover {
+                            text-decoration: none;
+                        }
                     }
 
+                        .calendar__new-release-text {
+                            color: $calendar-new-release-color;
+                            font-size: $font-size - 4px;
+                            font-weight: bold;
+                            opacity: 0;
+                            vertical-align: middle;
+
+                            .calendar__new-release:hover & {
+                                opacity: 1;
+                            }
+                        }
+
+                        .calendar__new-release-icon {
+                            width: $calendar-new-release-icon-size;
+                            height: $calendar-new-release-icon-size;
+                            vertical-align: middle;
+                            fill: $calendar-new-release-color;
+                        }
+
 
             /**
              * Releases
@@ -248,41 +262,10 @@ $calendar-weekday-padding:  0 0 (24px - $calendar-day-gutter);
              * element itself.
              *
              * 1. class added via ReleaseCalendarViewModel
-             * 2. set a border around the entire release, but not the left edge,
-             *    then reset that left edge for the start of the release.
              */
             .calendar__release { /* [1] */
                 display: block;
-                margin:  $calendar-release-margin;
-                padding: $calendar-release-padding;
-                line-height: 1.1;
-                border: 1px solid $calendar-release-border-color; /* [2] */
-                border-left: 0; /* [2] */
-
-                &:hover {
-                    text-decoration: none;
-                }
-
-                .calendar__day--start-of-week & { margin-left:  $calendar-day-padding * -1; }
-                .calendar__day--end-of-week &   { margin-right: $calendar-day-padding * -1; }
-            }
-
-            .calendar__release--start { /* [1] */
-                margin-left: 0;
-                border-left: 1px solid $calendar-release-border-color; /* [2] */
-                border-bottom-left-radius: $calendar-release-border-radius;
-                border-top-left-radius:    $calendar-release-border-radius;
-            }
-
-            .calendar__release--end { /* [1] */
-                margin-right: 0;
-                border-top-right-radius:    $calendar-release-border-radius;
-                border-bottom-right-radius: $calendar-release-border-radius;
-            }
-
-            .calendar__release--content { /* [1] */
-                background: $calendar-release-content-bg-color;
-                border-color: $calendar-release-content-border-color;
+                padding: 0 ($spacing-unit / 2);
             }
 
                 /**
@@ -294,32 +277,11 @@ $calendar-weekday-padding:  0 0 (24px - $calendar-day-gutter);
                     display: block;
                     color: inherit; /* [1] */
                     font-size: $font-size - 4px;
-                    line-height: 1;
                     vertical-align: middle;
-
-                    .calendar__release--content & {
-                        color: $calendar-release-content-color;
-                    }
                 }
 
-                    /**
-                     * 1. hide name output for release elements that aren't
-                     *    first
-                     */
-                    .calendar__release-name {
-                        visibility: hidden; /* [1] */
-
-                        .calendar__day--start-of-week &,
-                        .calendar__release--start & { /* [1] */
-                            visibility: visible;
-                        }
-                    }
+                    .calendar__release-name {}
 
                     .calendar__release-time {
-                        display: none; /* [1] */
                         font-weight: bold;
-
-                        .calendar__release--start & { /* [1] */
-                            display: inline; /* [1] */
-                        }
                     }