adapt-authoring-ui 0.0.1

package/app/modules/assetManagement/views/assetManagementView.js

@@ -0,0 +1,43 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var Origin = require('core/origin');
+  var OriginView = require('core/views/originView');
+  var AssetManagementCollectionView = require('./assetManagementCollectionView');
+  var AssetManagementPreviewView = require('./assetManagementPreviewView');
+
+  var AssetManagementView = OriginView.extend({
+    tagName: 'div',
+    className: 'asset-management',
+
+    preRender: function() {
+      this.listenTo(Origin, {
+        'assetManagement:assetItemView:preview': this.onAssetClicked,
+        'assetManagement:assetPreviewView:delete': this.onAssetDeleted
+      });
+    },
+
+    postRender: function() {
+      var view = new AssetManagementCollectionView({ collection: this.collection });
+      this.$('.asset-management-assets-container-inner').append(view.$el);
+      // defer setting ready status until images are ready
+      _.defer(function() {
+        view.$el.imageready(this.setViewToReady);
+      });
+    },
+
+    onAssetClicked: function(model) {
+      this.$('.asset-management-no-preview').hide();
+
+      var view = new AssetManagementPreviewView({ model: model });
+      this.$('.asset-management-preview-container-inner').html(view.$el);
+    },
+
+    onAssetDeleted: function() {
+      this.$('.asset-management-no-preview').show();
+    }
+  }, {
+    template: 'assetManagement'
+  });
+
+  return AssetManagementView;
+});

package/app/modules/colorLabel/index.js

@@ -0,0 +1,48 @@
+define([
+    'core/origin',
+    './models/colors',
+    './views/colorLabelPopupView'
+], function(Origin, ColorsModel, ColorLabelPopupView) {
+    
+    'use strict';
+    
+    var parentView;
+    var eventName;
+
+    Origin.on('contextMenu:open', function(view, event) {
+        var type = view.model.get('_type');
+
+        if (parentView) {
+            removeEvent();
+        }
+
+        parentView = view;
+        eventName = 'contextMenu:'+type+':colorLabel';
+        
+        setupEvent();
+    });
+
+    Origin.on('contextMenu:closed', function() {
+        removeEvent();
+    });
+
+    function setupEvent() {
+        parentView.on(eventName, showPopup);
+    }
+
+    function removeEvent() {
+        if (!parentView) return;
+
+        parentView.off(eventName, showPopup);
+        parentView = null;
+        eventName = '';
+    }
+
+    function showPopup() {
+        (new ColorLabelPopupView({
+            model: new ColorsModel(),
+            parentView: parentView
+        })).$el.appendTo(document.body);
+    }
+
+});

package/app/modules/colorLabel/less/colorLabels.less

@@ -0,0 +1,102 @@
+.colorlabel {
+    @popup-border-color: silver;
+
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    max-width: 640px;
+
+    background: @white;
+    border: solid 1px @popup-border-color;
+    box-shadow: 0 0 4px @popup-border-color;
+
+    .colorlabel-inner {
+        padding: 20px;
+
+        .colorlabel-header {
+            .title {
+                font-size: 17px;
+                font-weight: @font-weight-bold;
+                line-height: 20px;
+                padding: 0 4px;
+            }
+            .intro {
+                padding: 20px 4px;
+            }
+        }
+
+    }
+
+    .colors {
+        .colors-inner {
+            padding-bottom: 20px;
+            display: flex;
+            justify-content: space-between;
+
+            .color-item {
+                font-size: 0;
+                border: solid 4px @white;
+                width: 30px;
+                height: 30px;
+                border-radius: 4px;
+
+                &[data-colorlabel="colorlabel-1"] {
+                    background-color: @colorlabel-1;
+                }
+                &[data-colorlabel="colorlabel-2"] {
+                    background-color: @colorlabel-2;
+                }
+                &[data-colorlabel="colorlabel-3"] {
+                    background-color: @colorlabel-3;
+                }
+                &[data-colorlabel="colorlabel-4"] {
+                    background-color: @colorlabel-4;
+                }
+                &[data-colorlabel="colorlabel-5"] {
+                    background-color: @colorlabel-5;
+                }
+                &[data-colorlabel="colorlabel-6"] {
+                    background-color: @colorlabel-6;
+                }
+                &[data-colorlabel="colorlabel-7"] {
+                    background-color: @colorlabel-7;
+                }
+                &[data-colorlabel="colorlabel-8"] {
+                    background-color: @colorlabel-8;
+                }
+                &[data-colorlabel="colorlabel-9"] {
+                    background-color: @colorlabel-9;
+                }
+                &[data-colorlabel="colorlabel-10"] {
+                    background-color: @colorlabel-10;
+                }
+                &[data-colorlabel="colorlabel-11"] {
+                    background-color: @colorlabel-11;
+                }
+                &[data-colorlabel="colorlabel-12"] {
+                    background-color: @colorlabel-12;
+                }
+                &[data-colorlabel="colorlabel-13"] {
+                    background-color: @colorlabel-13;
+                }
+                &[data-colorlabel="colorlabel-14"] {
+                    background-color: @colorlabel-14;
+                }
+
+                &.selected {
+                    border-color: darken(@white, 50%);
+                    border-radius: 8px;
+                }
+            }
+        }
+    }
+
+    .footer {
+        text-align: center;
+
+        .warning {
+            margin-right: 40px;
+        }
+    }
+}

package/app/modules/colorLabel/models/colors.js

@@ -0,0 +1,31 @@
+define([
+    'core/origin'
+], function(Origin) {
+    
+    'use strict';
+
+    var DefaultColors = Backbone.Model.extend({
+        defaults: {
+            // colors from https://material.io/guidelines/style/color.html#color-color-palette
+            colors: [
+                "colorlabel-1",
+                "colorlabel-2",
+                "colorlabel-3",
+                "colorlabel-4",
+                "colorlabel-5",
+                "colorlabel-6",
+                "colorlabel-7",
+                "colorlabel-8",
+                "colorlabel-9",
+                "colorlabel-10",
+                "colorlabel-11",
+                "colorlabel-12",
+                "colorlabel-13",
+                "colorlabel-14"
+            ]
+        }
+    });
+
+    return DefaultColors;
+
+});

package/app/modules/colorLabel/templates/colorLabelPopUpView.hbs

@@ -0,0 +1,21 @@
+<div class="colorlabel-inner">
+    <div class="colorlabel-header">
+        <div class="title">{{t 'app.colourLabelTitle'}}</div>
+        <div class="intro">{{{t 'app.colourLabelIntro'}}}</div>
+    </div>
+    <div class="colors">
+        <div class="colors-inner clearfix">
+            {{#each colors}}
+                <div class="color-item" data-colorlabel={{this}}>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+    <div class="footer">
+        <div class="footer-inner">
+            <button class="btn warning reset">{{t 'app.reset'}}</button>
+            <button class="btn primary apply">{{t 'app.apply'}}</button>
+            <button class="btn secondary cancel">{{t 'app.cancel'}}</button>
+        </div>
+    </div>
+</div>

package/app/modules/colorLabel/views/colorLabelPopupView.js

@@ -0,0 +1,75 @@
+define(['core/views/originView'], function(OriginView) {
+  var ColorLabelPopUpView = OriginView.extend({
+    className: 'colorlabel',
+    events: {
+      'click .reset': 'onReset',
+      'click .apply': 'onApply',
+      'click .cancel': 'remove',
+      'click .color-item': 'onItemClick'
+    },
+
+    initialize: function(options) {
+      this.parentView = options.parentView;
+      this.selected = null;
+      OriginView.prototype.initialize.apply(this, arguments);
+    },
+
+    onItemClick: function(event) {
+      this.selected = $(event.currentTarget).data('colorlabel');
+      this.updateClasses();
+    },
+
+    updateClasses: function() {
+      this.$('.color-item').removeClass('selected');
+      this.$(`[data-colorlabel="${this.selected}"]`).addClass('selected');
+    },
+
+    onReset: function() {
+      var model = this.parentView.model;
+      this.selected = null;
+
+      model.save('_colorLabel', '', {
+        patch: true,
+        success: () => this.onSuccess(),
+        error: (model, response) => this.onError(response)
+      });
+    },
+    onApply: function(event) {
+      if(this.selected) this.addItem();
+    },
+
+    postRender: function() {
+      var color = this.parentView.model.get('_colorLabel');
+      if (!color) return;
+      this.selected = color;
+      this.updateClasses();
+    },
+
+    applyOnParent: function() {
+      this.parentView.$el.attr('data-colorlabel', this.selected);
+    },
+
+    addItem: function() {
+      var model = this.parentView.model;
+
+      model.save('_colorLabel', this.selected, {
+        patch: false,
+        success: () => this.onSuccess(),
+        error: (model, response) => this.onError(response)
+      });
+    },
+
+    onSuccess: function() {
+      this.applyOnParent()
+      this.remove();
+    },
+
+    onError: function(response) {
+      this.remove();
+      alert(response);
+    }
+}, {
+  template: 'colorLabelPopUpView'
+});
+  return ColorLabelPopUpView;
+});

package/app/modules/contentHeader/index.js

@@ -0,0 +1,6 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  const Origin = require('core/origin');
+  const ContentHeaderView = require('./views/contentHeaderView');
+  Origin.contentHeader = new ContentHeaderView();
+});

package/app/modules/contentHeader/less/contentHeader.less

@@ -0,0 +1,152 @@
+@import 'colours';
+@import 'fonts';
+
+.contentHeader {
+  position: relative;
+  z-index: 5;
+  min-height: 80px;
+  font-family: @font-title;
+  font-size: 14px;
+  background-color: @contentHeader-background-color;
+  border-bottom: 1px solid fade(@primary-color, 20%);
+
+  &-inner {
+    color: @contentHeader-title;
+    padding: 15px;
+
+    .breadcrumbs {
+      font-weight: @font-weight;
+      margin-bottom: 7px;
+      .item {
+        display: inline-block;
+        max-width: 250px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        a {
+          text-decoration: none;
+          color: @secondary-color;
+          &:hover {
+            color: darken(@secondary-color,15%);
+          }
+        }
+      }
+      .separator {
+        display: inline-block;
+        margin: 0 5px;
+        opacity: 0.35;
+        overflow: hidden;
+      }
+    }
+    .titles {
+      .course, .title { .truncate; }
+      .title {
+        font-size: 18px;
+        font-weight: @font-weight-bold;
+      }
+    }
+
+    > .buttons {
+      position: relative;
+      float: right;
+      top: -5px;
+
+      > div {
+        display: inline-block;
+      }
+
+      button.toggle {
+        padding: 0 15px;
+        color: @primary-color;
+        cursor: pointer;
+        i {
+          font-size: 18px;
+        }
+      }
+      .buttons-container {
+        &.show { 
+          animation-name: slidein;
+          animation-duration: 0.3s;
+          animation-fill-mode: forwards;
+        }
+        @keyframes slidein {
+          from { height: 0; opacity: 0; margin-top: 0; }
+          1% { height: inherit;  }
+          to { height: inherit; margin-top: 20px; opacity: 1; }
+        }
+        height: 0;
+        position: absolute;
+        overflow: hidden;
+        margin-left: -6px;
+        min-width: 200px;
+        background: @tertiary-color;
+        border-radius: @button-radius;
+        
+        .title {
+          padding: 20px;
+          font-weight: bold;
+          color: white;
+        }
+        .items {
+          padding: 10px;
+          .item {
+            display: block;
+            padding: 15px;
+            color: white;
+            text-align: left;
+            &:last-child {
+              margin-bottom: 0;
+            }
+            .label {
+              margin-bottom: 8px;
+            }
+            i,
+            input[type='checkbox'] {
+              margin-right: 8px;
+              color: @secondary-color;
+              accent-color: @secondary-color;
+            }
+            input[type='radio'] {
+              display: none;
+            }
+            input[type='text'] {
+              color: white;
+              width: auto;
+              border-color: lighten(@tertiary-color, 15%);
+              background-color: lighten(@tertiary-color, 5%);
+              &::placeholder {
+                border-color: lighten(@tertiary-color, 15%);
+              }
+            }
+            .tags {
+              padding: 10px 0;
+              .tag {
+                padding: 5px;
+                background: lighten(@tertiary-color, 15%);
+                font-weight: bold;
+                cursor: pointer;
+                &.selected {
+                  color: @secondary-color;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .actions {
+        margin: 10px 20px;
+        margin-right: 0;
+      }
+      
+      .sorts .items > .item {
+        .direction i { 
+          color: rgba(255, 255, 255, 0.2); 
+        }
+        &.selected {
+          .direction i { color: @secondary-color; }
+        }
+      }
+    }
+  }
+}

package/app/modules/contentHeader/less/options.less

@@ -0,0 +1,51 @@
+@import 'colours';
+
+.options {
+  &-inner {
+    display: flex;
+  }
+
+  &-group {
+    i {
+      font-size: 18px;
+    }
+  }
+
+  button {
+    text-decoration: none;
+    text-align: center;
+    color: @option-color;
+
+    &:hover {
+      transition: color 0.3s;
+      color: @option-hover-color;
+    }
+    &.selected {
+      transition: color 0.3s;
+      color: @option-selected-color;
+    }
+
+    i {
+      margin: 4px;
+    }
+  }
+}
+
+.options-group {
+  display: flex;
+  height: 70px;
+  align-items: center;
+
+  .option-value-item {
+    padding-left: 15px;
+    padding-right: 15px;
+  
+    > button {
+      padding: 0px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

package/app/modules/contentHeader/templates/actionsButton.hbs

@@ -0,0 +1,3 @@
+<button class="btn {{buttonClass}}">
+  {{> part_headerButtonContent}}
+</button>

package/app/modules/contentHeader/templates/contentHeader.hbs

@@ -0,0 +1,38 @@
+<div class="contentHeader">
+  <div class="contentHeader-inner">
+    <div class="buttons">
+      <div class="options"></div>
+      <div class="sorts"></div>
+      <div class="filters"></div>
+      <div class="actions"></div>
+    </div>
+    {{#if breadcrumbs}}
+      <div class="breadcrumbs">
+        {{#each breadcrumbs}}
+          <div class="item">
+            {{#if @last}}
+              {{{title}}}
+            {{else}}
+              {{#if url}}
+                <a href="{{url}}">{{{title}}}</a>
+              {{else}}
+                {{title}}
+              {{/if}}
+            {{/if}}
+          </div>
+          {{#unless @last}}
+            <div class="separator unselectable">&gt;</div>
+          {{/unless}}
+        {{/each}}
+      </div>
+    {{/if}}
+    {{#if title}}
+      <div class="titles">
+        {{#if course}}
+          <div class="course">{{{course.title}}}</div>
+        {{/if}}
+        <div class="title">{{{title}}}</div>
+      </div>
+    {{/if}}
+  </div>
+</div>

package/app/modules/contentHeader/templates/contentHeaderToggleButton.hbs

@@ -0,0 +1,11 @@
+<button class="toggle">
+  <i class="fa {{buttonIcon}}"></i>
+  <div class="label">{{buttonText}}</div>
+</button>
+<div class="buttons-container">
+  <div class="items">
+    {{#each items}}
+      <div class="item" data-key="{{@index}}" data-event="{{eventName}}">{{{itemHtml}}}</div>
+    {{/each}}
+  </div>
+</div>

package/app/modules/contentHeader/templates/filterItem.hbs

@@ -0,0 +1,23 @@
+{{!-- toggle --}}
+{{#ifValueEquals type 'toggle'}}
+  <input type="checkbox" id="{{eventName}}" {{#if checked}}checked{{/if}} />
+  <label for="{{eventName}}">{{> part_headerButtonContent}}</label>
+{{/ifValueEquals}}
+{{!-- search --}}
+{{#ifValueEquals type 'search'}}
+  <div class="label">{{buttonText}}</div>
+  <input type="text" placeholder="{{placeholder}}">
+{{/ifValueEquals}}
+{{!-- tags --}}
+{{#ifValueEquals type 'tags'}}
+  <div class="label">{{buttonText}}</div>
+  <div class="tags">
+    {{#if ../tags.length}}
+      {{#each ../tags}}
+        <span class="tag" data-value="{{_id}}">{{title}}</span>
+      {{/each}}
+    {{else}}
+      {{t 'app.notags'}}
+    {{/if}}
+  </div>
+{{/ifValueEquals}}

package/app/modules/contentHeader/templates/options.hbs

@@ -0,0 +1,14 @@
+<div class="options-inner">
+  {{#each groups}}
+    <div class="options-group options-group-{{group}}" data-group="{{group}}">
+      {{#each items}}
+        <div class="option-value-item">
+          <button data-callback="{{callbackEvent}}" data-group="{{group}}" title="{{title}}">
+            {{#if icon}}<i class="fa fa-{{icon}}"></i>{{/if}}
+            <div class="option-value-title">{{{title}}}</div>
+          </button>
+        </div
+      {{/each}}
+    </div>
+  {{/each}}
+</div>

package/app/modules/contentHeader/templates/partials/part_headerButtonContent.hbs

@@ -0,0 +1,2 @@
+{{#if buttonIcon}}<i class="icon fa {{buttonIcon}}"></i>{{/if}}
+{{buttonText}}

package/app/modules/contentHeader/templates/sortItem.hbs

@@ -0,0 +1,9 @@
+<input type="radio" id="{{index}}" name="sort" value="{{index}}">
+<label for="{{index}}">
+  <span class="direction">
+    <i class="default fa fa-minus"></i>
+    <i class="asc fa fa-sort-asc"></i>
+    <i class="desc fa fa-sort-desc"></i>
+  </span>
+  {{> part_headerButtonContent}}
+</label>

package/app/modules/contentHeader/views/actionsButtonView.js

@@ -0,0 +1,14 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var ContentHeaderButtonView = require('./contentHeaderButtonView');
+
+  var ActionsButtonView = ContentHeaderButtonView.extend({
+    async preRender() {
+      if(!this.data.buttonClass) this.data.buttonClass = 'action-primary';
+    }
+  }, {
+    template: 'actionsButton'
+  });
+
+  return ActionsButtonView;
+});