adapt-authoring-ui 0.0.1

package/app/modules/appHeader/index.js

@@ -0,0 +1,5 @@
+define(['core/origin', './views/appHeaderView'], function(Origin, AppHeaderView) {
+  Origin.once('origin:dataReady', function() {
+    $('#app').before(new AppHeaderView({ model: Origin.sessionModel }).$el);
+  });
+});

package/app/modules/appHeader/less/appHeader.less

@@ -0,0 +1,72 @@
+@import 'colours';
+@import 'fonts';
+@import 'sharedStyles';
+
+.appHeader {
+  position:fixed;
+  top:0px;
+  left:0px;
+  width:100%;
+  height:60px;
+  z-index:500;
+  background-color: #2aa3ce;
+  background-position: right;
+  border-bottom:1px solid rgba(0,0,0,0.15);
+  font-size: 15px;
+  font-family: @font-title;
+}
+
+.appHeader-bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  z-index: -1;
+  background:url("assets/top-bar-1080.jpg");
+  @media (min-width: 1920px) {
+    background:url("assets/top-bar-2560.jpg");
+  }
+}
+
+.appHeader-inner {
+    padding-top: 10px;
+}
+
+.appHeader-item {
+  display:inline-block;
+  height:40px;
+  line-height:40px;
+  text-decoration:none;
+  margin:0px;
+  padding:0px 20px;
+  color:@appHeader-text-color;
+  .appHeader-left & {
+    float:left;
+  }
+}
+
+.appHeader-left {
+	float:left;
+  .appHeader-product-name {
+    .no-select;
+  }
+}
+
+.appHeader-right {
+  padding-right: 20px;
+	float:right;
+	text-align:right;
+
+  .appHeader-user-logout {
+    padding: 0px 25px;
+  }
+
+  a {
+    &:hover {
+    text-decoration: underline;
+      &.appHeader-user-logout {
+        text-decoration: none;
+      }
+    }
+  }
+}

package/app/modules/appHeader/templates/appHeader.hbs

@@ -0,0 +1,17 @@
+<div class="appHeader-bg"></div>
+<div class="appHeader-inner clearfix">
+  <div class="appHeader-left">
+    <div href="#" class="appHeader-item appHeader-product-name">{{t 'app.productname'}}</div>
+  </div>
+  <div class="appHeader-right">
+    <a href="#" class="appHeader-item appHeader-help" data-event="help">
+      <span>{{t 'app.help'}}</span>
+    </a>
+    <a href="#" class="appHeader-item appHeader-profile" data-event="user:profile">
+      {{t 'app.loggedinas'}}: <span>{{user.email}}</span>
+    </a>
+    <a href="#" class="appHeader-item appHeader-user-logout btn white-hollow" data-event="user:logout">
+      <span>{{t 'app.logout'}}</span>
+    </a>
+  </div>
+</div>

package/app/modules/appHeader/views/appHeaderView.js

@@ -0,0 +1,63 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var OriginView = require('core/views/originView');
+  var Origin = require('core/origin');
+
+  var AppHeaderView = OriginView.extend({
+    tagName: 'nav',
+    className: 'appHeader',
+
+    initialize: function() {
+      this.listenTo(Origin, 'login:changed', this.loginChanged);
+      this.listenTo(Origin, 'help', this.onHelpClicked);
+      this.render();
+    },
+
+    events: {
+      'click a.appHeader-item':'onItemClicked'
+    },
+
+    render: function() {
+      if(Origin.sessionModel.get('isAuthenticated')) OriginView.prototype.render.apply(this);
+    },
+
+    loginChanged: function() {
+      this.render();
+    },
+
+    getWikiPage: function() {
+      switch (Origin.location.module) {
+        case 'assetManagement': return 'Asset-Management';
+        case 'pluginManagement': return 'Plugin-Management';
+        case 'projects': return 'The-Dashboard';
+        case 'project': return 'Creating-a-Course#course-details';
+        case 'userManagement': return 'User-Management';
+        case 'editor':
+          let page = 'Creating-a-Course#';
+          switch (Origin.location.route2) {
+            case 'block': return `${page}adding-content-to-the-course`;
+            case 'config': return `${page}course-settings`;
+            case 'edit': return `${page}sectionpage-settings`;
+            case 'extensions': return `${page}course-settings`;
+            case 'menu': return `${page}editing-course-details`;
+            case 'page': return `${page}adding-content-to-the-course`;
+            case 'theme': return `${page}course-settings`;
+          }
+      }
+    },
+
+    onHelpClicked: function() {
+      window.open(Origin.constants.supportLink || `https://github.com/adaptlearning/adapt_authoring/wiki/${this.getWikiPage()}`);
+    },
+
+    onItemClicked: function(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      Origin.trigger($(event.currentTarget).attr('data-event'));
+    }
+  }, {
+    template: 'appHeader'
+  });
+
+  return AppHeaderView;
+});

package/app/modules/assetManagement/collections/assetCollection.js

@@ -0,0 +1,16 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define([
+  'core/collections/apiCollection', 
+  '../models/assetModel'
+], function(ApiCollection, AssetModel) {
+  var AssetCollection = ApiCollection.extend({
+    model: AssetModel,
+    url: 'api/assets',
+
+    dateComparator: function(m) {
+      return -m.get('lastUpdated').getTime();
+    }
+  });
+
+  return AssetCollection;
+});

package/app/modules/assetManagement/index.js

@@ -0,0 +1,65 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var AssetCollection = require('./collections/assetCollection');
+  var AssetManagementEditAssetView = require('./views/assetManagementEditAssetView');
+  var AssetManagementEditAssetSidebarView = require('./views/assetManagementEditAssetSidebarView');
+  var AssetManagementSidebarView = require('./views/assetManagementSidebarView');
+  var AssetManagementView = require('./views/assetManagementView');
+  var AssetModel = require('./models/assetModel');
+  var TagsCollection = require('core/collections/tagsCollection');
+
+  const scopes = ['write:assets'];
+
+  Origin.on('router:initialize', () => Origin.router.restrictRoute('assetManagement', scopes));
+  
+  Origin.on('origin:dataReady', () => {
+    Origin.globalMenu.addItem({
+      "location": "global",
+      "text": Origin.l10n.t('app.assetmanagement'),
+      "icon": "fa-file-image-o",
+      "route": "assetManagement",
+      "sortOrder": 2,
+      "scopes": scopes
+    });
+  });
+  
+
+  Origin.on('router:assetManagement', function(location, subLocation, action) {
+    Origin.assetManagement = {
+      filterData: {}
+    };
+    if(!location) return loadAssetsView();
+    loadEditAssetView(subLocation === 'edit' ? location : undefined);
+  });
+
+  function loadAssetsView() {
+    (new TagsCollection()).fetch({
+      success: function(tagsCollection) {
+        Origin.trigger('contentHeader:hide');
+        Origin.sidebar.addView(new AssetManagementSidebarView({ collection: tagsCollection }).$el);
+        Origin.contentPane.setView(AssetManagementView, { collection: new AssetCollection() });
+        Origin.trigger('assetManagement:loaded');
+      },
+      error: function() {
+        console.log('Error occured getting the tags collection - try refreshing your page');
+      }
+    });
+  }
+
+  async function loadEditAssetView(location) {
+    const isNew = location === undefined;
+    const model = new AssetModel({ _id: location });
+    const title = Origin.l10n.t(isNew ? 'app.newasset' : 'app.editasset');
+    Origin.trigger('contentHeader:updateTitle', { title });
+    if(!isNew) {
+      try {
+        await model.fetch();
+      } catch(e) {
+        Origin.Notify.alert({ type: 'error', text: e.responseJSON.message });
+      }
+    }
+    Origin.sidebar.addView(new AssetManagementEditAssetSidebarView().$el);
+    Origin.contentPane.setView(AssetManagementEditAssetView, { model });
+  }
+});

package/app/modules/assetManagement/less/asset.less

@@ -0,0 +1,229 @@
+@import 'colours';
+
+.asset-picker-filters {
+    padding: 10px;
+    background-color: lightblue;
+}
+
+.asset-picker-sidebar-filter-button {
+    &.selected {
+        background-color: #F2F2F2;
+    }
+}
+
+.asset-management {
+    height: 100%;
+}
+
+.asset-management-inner {
+    display: flex;
+    height: 100%;
+}
+
+.asset-management-sidebar-filter-image-icon {
+    float: left;
+}
+
+.asset-management-assets-container {
+    height: 100%;
+    flex:3;
+    overflow-y: auto;
+    .asset-management-no-assets {
+        text-align:center;
+        position:relative;
+        top:40%;
+    }
+    &-inner {
+        height: 100%;
+    }
+}
+
+.asset-management-collection {
+    height: 100%;
+    .asset-management-collection-inner {
+        padding-top:30px;
+        padding-left:30px;
+        height: 100%;
+        box-sizing: border-box;
+    }
+}
+
+.asset-management-preview-container {
+    flex:1;
+    overflow-x:hidden;
+    text-align:center;
+    background-color: @white;
+
+    &-inner {
+        padding: 30px 15px;
+        color: #9d9d9d;
+        .asset-preview-title {
+          padding-bottom: 10px;
+          color: @primary-color;
+          font-weight: @font-weight;
+        }
+        .asset-preview-description,
+        .asset-size,
+        .asset-tags,
+        .asset-preview-type {
+          margin-bottom: 25px;
+        }
+    }
+
+    .asset-management-no-preview {
+        position:relative;
+        top:40%;
+    }
+}
+
+
+.asset-preview-edit {
+    margin-top:10px;
+}
+
+.asset-management-list-item {
+    position:relative;
+    width:160px;
+    height: 210px;
+    margin-right:30px;
+    margin-bottom:30px;
+    float:left;
+    cursor:pointer;
+    background-color: @white;
+    border: 1px solid #d6f2f9;
+    border-radius:3px;
+    transition: all 0.3s;
+    box-shadow: 0px 0px 3pt 2pt transparent;
+    &:hover {
+        box-shadow: 0 0 5px 2px #CBE1E6;
+    }
+
+    &.selected {
+        background-color: @primary-color;
+        color: @button-primary-text-color;
+    }
+
+    &-icon {
+        &-inner {
+            padding:6px;
+        }
+    }
+
+    &-image {
+        width:160px;
+        height:120px;
+        background-position:center;
+        background-size:cover;
+        background-repeat: no-repeat;
+        background-color: @white;
+        text-align:center;
+        border: 1px solid #d6f2f9;
+        border-left: none;
+        border-right: none;
+        i {
+            color:rgb(214, 242, 249);
+            padding-top:35px;
+            font-size:50px;
+        }
+
+        img {
+            height: 100%;
+        }
+    }
+
+    &-details {
+        word-wrap: break-word;
+        overflow:hidden;
+        width:160px;
+        &-inner {
+            padding:10px;
+        }
+    }
+
+    &-title {
+        height:40px;
+        overflow:hidden;
+        font-weight: @font-weight;
+    }
+
+    .asset-management-list-item-deleted {
+        position:absolute;
+        width:100%;
+        height:100%;
+        top:0;
+        left:0;
+        text-align: center;
+        background-color:rgba(255,255,255,0.8);
+        i {
+            position: relative;
+            top: 50%;
+            margin-top: -36px;
+            color: #ff5567;
+            font-size:72px;
+            line-height:72px;
+        }
+    }
+
+}
+
+
+  ul.tag-container {
+    margin: 4px;
+  }
+
+  li.tag-item {
+    margin: 1px 0px 1px 0px;
+    display: inline-block;
+
+
+    span.tag-value {
+      margin: 5px;
+      color: @white;
+      padding: 3px;
+      background-color:@primary-color;
+    }
+  }
+
+.asset-preview-details-preview {
+    margin-bottom:20px;
+
+    i {
+        font-size:56px;
+    }
+    .fa-file-audio-o {
+        margin-bottom:20px;
+    }
+}
+
+.asset-preview-title {
+    word-wrap: break-word;
+}
+
+.asset-management-modal-filters {
+    float: left;
+    width: 50%;
+    display:inline-block;
+    text-align:left;
+    input {
+        border-radius:0px;
+        width: 200px;
+        border: none;
+        border-radius: 3px;
+        background: #627178;
+        color: @white;
+    }
+    .modal & button {
+        margin-left:-4px;
+        color:#9cabc4;
+        transition:color 0.3s;
+        &:hover {
+            color: @white;
+        }
+    }
+}
+
+.asset-preview-edit {
+    .modal-popup & {
+        display:none;
+    }
+}

package/app/modules/assetManagement/less/assetManagementModalTags.less

@@ -0,0 +1,34 @@
+.asset-management-modal-tags.sidebar-filter {
+  top: 60px;
+  z-index: 5;
+}
+
+.asset-management-modal-new-asset-inner .form-group.tags .selectize-control {
+  @item-padding: 4px 7px;
+
+  .selectize-input {
+    box-sizing: inherit;
+    width: 90%;
+    padding: 11px 10px;
+
+    .item, .item.active,
+    .option, .option.active {
+      background-color: @secondary-color;
+      background-image: none;
+      border: none;
+      border-radius: 0;
+      text-shadow: none;
+      padding: @item-padding;
+    }
+  }
+  .selectize-dropdown {
+    .option {
+      padding: @item-padding;
+      cursor: pointer;
+      &[data-disabled="true"] { cursor: not-allowed; }
+    }
+    .create {
+      .selectize-dropdown .option;
+    }
+  }
+}

package/app/modules/assetManagement/less/assetManagementNew.less

@@ -0,0 +1,60 @@
+@import 'sharedStyles';
+
+.asset-management-edit-asset {
+    .legend {
+        display: none;
+    }
+    fieldset {
+        padding-top: 20px;
+    }
+    .asset-thumb {
+        max-width: 800px;
+        margin: 20px;
+        margin-bottom: 0;
+        
+        img {
+            border: 1px dashed #d6f2f9;
+            background: white;
+        }
+    }
+}
+
+.modal-popup {
+    .asset-management-modal-new-asset {
+        position: fixed;
+        background: rgba(0, 0, 0, 0.4);
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+
+        &-inner {
+            .form-container-style;
+            animation: 0.3s ease-out slideIn;
+            margin-top: 100px;
+            margin-left: 50px;
+            max-width: 500px;
+
+            fieldset {
+                margin: 0;
+                border: none;
+            }
+
+            .buttons {
+                margin-bottom: 20px;
+                margin-left: 30px;
+            }
+        }
+    }
+}
+
+@keyframes slideIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-65px);
+    } 
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

package/app/modules/assetManagement/models/assetModel.js

@@ -0,0 +1,11 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Backbone = require('backbone');
+
+  var AssetModel = Backbone.Model.extend({
+    idAttribute: '_id',
+    urlRoot: 'api/assets'
+  });
+
+  return AssetModel;
+});

package/app/modules/assetManagement/templates/assetManagement.hbs

@@ -0,0 +1,12 @@
+<div class="asset-management-inner clearfix">
+    <div class="asset-management-assets-container">
+        <div class="asset-management-no-assets display-none">{{t 'app.noassetsfound'}}</div>
+        <div class="asset-management-assets-container-inner">
+        </div>
+    </div>
+    <div class="asset-management-preview-container">
+        <div class="asset-management-no-preview">{{t 'app.assetpreviewinstruction'}}</div>
+        <div class="asset-management-preview-container-inner">
+        </div>
+    </div>
+</div>

package/app/modules/assetManagement/templates/assetManagementCollection.hbs

@@ -0,0 +1,2 @@
+<div class="asset-management-collection-inner clearfix">
+</div>

package/app/modules/assetManagement/templates/assetManagementEditAsset.hbs

@@ -0,0 +1,9 @@
+<div class="asset-management-edit-asset-inner">
+    {{#if hasThumb}}
+        <div class="asset-thumb">
+            <img src="/api/assets/serve/{{_id}}?thumb=true&{{timestring updatedAt}}"></img>
+        </div>
+    {{/if}}
+    <div class="form-container">
+    </div>
+</div>

package/app/modules/assetManagement/templates/assetManagementEditAssetSidebar.hbs

@@ -0,0 +1,10 @@
+<div class="sidebar-item-inner">
+    <div class="separator"></div>
+
+    <button type="submit" class="primary-color asset-management-edit-sidebar-save-button action-primary">
+        <span>{{t 'app.save'}}</span>
+    </button>
+    <button type="button" class="asset-management-edit-sidebar-cancel-button action-secondary">
+        <span>{{t 'app.cancel'}}</span>
+    </button>
+</div>

package/app/modules/assetManagement/templates/assetManagementListItem.hbs

@@ -0,0 +1,35 @@
+{{#if _isDeleted}}
+<div class="asset-management-list-item-deleted">
+    <i class="fa fa-ban"></i>
+</div>
+{{/if}}
+
+<div class="asset-management-list-item-inner">
+
+    <div class="asset-management-list-item-icon">
+        <div class="asset-management-list-item-icon-inner">
+            <i class="fa {{iconName}}"></i>
+        </div>
+    </div>
+    
+    <div class="asset-management-list-item-image">
+        {{#ifValueEquals subtype "svg+xml"}}
+            <img src="api/assets/serve/{{_id}}?{{timestring updatedAt}}"/>
+        {{else}}
+            {{#if hasThumb}}
+                <div class="asset-management-list-item-image" style="background-image:url(api/assets/serve/{{_id}}?thumb=true&{{timestring updatedAt}})"></div>
+            {{else}}
+                <i class="fa {{iconName}}"></i>
+            {{/if}}
+        {{/ifValueEquals}}
+    </div>
+    
+    <div class="asset-management-list-item-details">
+        <div class="asset-management-list-item-details-inner">
+            <div class="asset-management-list-item-title">
+                <h4 class="asset-management-list-item-title-inner">{{title}}</h4>
+            </div>
+        </div>
+    </div>
+
+</div>

package/app/modules/assetManagement/templates/assetManagementModalAutofill.hbs

@@ -0,0 +1 @@
+<i class="fa fa-magic"></i>{{t 'app.autofill'}}

package/app/modules/assetManagement/templates/assetManagementModalEditAsset.hbs

@@ -0,0 +1,11 @@
+<div class="asset-management-modal-new-asset-inner">
+    <div class="wrapper"></div>
+    <div class="buttons">
+        <button type="submit" class="asset-management-modal-edit-asset-save action-primary btn">
+            <span>{{t 'app.save'}}</span>
+        </button>
+        <button type="button" class="asset-management-modal-edit-asset-cancel secondary-hollow btn">
+            <span>{{t 'app.cancel'}}</span>
+        </button>
+    </div>
+</div>

package/app/modules/assetManagement/templates/assetManagementModalFilters.hbs

@@ -0,0 +1,16 @@
+<button class="asset-management-modal-add-asset">
+    <span class="asset-management-modal-add-asset-inner">
+        <i class="fa-upload fa"></i>{{t 'app.uploadnewasset'}}
+    </span>
+</button>
+
+<input type="text" class="asset-management-modal-filter-search" placeholder="{{t 'app.search'}}"/>
+<button class="sidebar-inline-input-button asset-management-modal-filter-clear-search">
+    <i class="fa fa-times"></i>
+</button>
+
+<button class="asset-management-modal-add-tag">
+    <span class="asset-management-modal-add-tag-inner">
+        <i class="fa-plus fa"></i>{{t 'app.addtag'}}
+    </span>
+</button>