adapt-authoring-ui 0.0.1

package/app/modules/scaffold/less/colourPicker.less

@@ -0,0 +1,141 @@
+@darkBorderColour: #dcdcdc;
+@lightBorderColour: #cccccc;
+@paletteBackgroundColour: #eff7f9;
+
+.scaffold-colour-picker {
+  & + .sp-replacer,
+  & + .sp-replacer.sp-active {
+    background: @white;
+    border-color: @lightBorderColour;
+    &:hover {
+      border-color: darken(@lightBorderColour, 20%);
+    }
+  }
+}
+.scaffold-colour-picker & + .sp-replacer .sp-preview {
+  border-color: @darkBorderColour;
+}
+
+body .sp-container {
+  border-color: @darkBorderColour;
+  .sp-palette {
+    max-width: 90px;
+    .sp-thumb-el {
+      border-radius: 11px;
+      border-color: @paletteBackgroundColour;
+      box-sizing: border-box;
+      overflow: hidden;
+      width: 20px;
+      height: 20px;
+      margin: 4px;
+      &:hover {
+        transform: scale(1.2);
+      }
+      &.sp-thumb-active {
+        border: 2px solid @tertiary-color;
+        transform: scale(1);
+      }
+      .sp-thumb-inner {
+        border: 1px solid @paletteBackgroundColour;
+        border-radius: 50%;
+        background-image: none;
+      }
+    }
+  }
+
+  .sp-clear {
+    display: none;
+  }
+
+  .sp-color {
+    border-color: @lightBorderColour;
+  }
+
+  .sp-initial {
+    border: 1px solid @lightBorderColour;
+  }
+
+  .sp-palette-container {
+    float: right;
+    border-left: 1px solid @darkBorderColour;
+    border-right: none;
+    background-color: @paletteBackgroundColour;
+  }
+  .sp-picker-container {
+    background: @white;
+    padding-top: 20px;
+    padding-left: 20px;
+    padding-right: 12px;
+    border: none;
+  }
+
+  input.sp-input {
+    padding: 5px;
+    width: 95%;
+    font-family: monospace;
+    border-radius: 0;
+    font-size: 120% !important;
+  }
+
+  .sp-alpha-inner,
+  .sp-hue {
+    border-radius: 3px;
+    border-color: @lightBorderColour;
+  }
+
+  .sp-alpha-inner .sp-alpha-handle,
+  .sp-hue .sp-slider {
+    border: 1px solid @lightBorderColour;
+    background: @white;
+    opacity: 1;
+    width: 12px;
+    height: 12px;
+    border-radius: 7px;
+  }
+
+  .sp-alpha {
+    width: 140px;
+    .sp-alpha-inner .sp-alpha-handle {
+      top: -4px;
+    }
+  }
+
+  .sp-hue {
+    margin: 0 9px;
+    .sp-slider {
+      left: -3px;
+    }
+  }
+
+  .sp-dragger {
+    height: 1px;
+    width: 1px;
+    border: none;
+    background: transparent;
+    &:after {
+      display: block;
+      margin-left: -6px;
+      margin-top: -6px;
+      content: '';
+      width: 12px;
+      height: 12px;
+      border-radius: 7px;
+      border: 1px solid @darkBorderColour;
+      box-shadow: 0px 0px 3px black;
+    }
+  }
+
+  .sp-button-container {
+    float: left;
+    button.sp-choose {
+      display: none;
+    }
+    a.sp-cancel {
+      color: inherit !important;
+      font-family: inherit;
+      font-size: inherit;
+      display: inline-block;
+      margin-top: 5px;
+    }
+  }
+}

package/app/modules/scaffold/less/displayTitle.less

@@ -0,0 +1,17 @@
+[data-type="DisplayTitle"] {
+  &:not(.unlocked) .fa-lock,
+  &.unlocked .fa-unlink {
+    display: none;
+  }
+  .field-editor input {
+    width: calc(90% - 80px);
+  }
+}
+
+.scaffold-display-title-lock,
+.scaffold-display-title-clear {
+  padding: 0;
+  .fa {
+    padding: 10px 12px;
+  }
+}

package/app/modules/scaffold/less/forms.less

@@ -0,0 +1,174 @@
+// apply border to only the top level fieldset
+.form-container {
+  .form-container-style;
+  > form > div > fieldset {
+    padding-bottom: 15px;
+  }
+}
+
+fieldset {
+  margin-left: 20px;
+  background-color: @white;
+  form form & {
+    padding-bottom: 0;
+  }
+  label {
+    cursor: auto;
+  }
+}
+
+form .error {
+  top: inherit;
+  left: inherit;
+  font-size: inherit;
+  position: inherit;
+}
+
+.legend {
+  display: block;
+  legend {
+    padding: 25px 0 10px 30px;
+    font-size: 16px;
+    font-weight: @font-weight-bold;
+  }
+  .fieldset-object & {
+    color: #3e4960;
+    text-decoration: underline;
+    legend {
+      padding: 0;
+      margin-bottom: 0;
+    }
+  }
+}
+.description {
+  padding: 10px 30px;
+}
+
+.fieldset-object .field {
+  padding: 10px 0;
+  &-object {
+    padding: 18px 20px;
+  }
+}
+
+.field-object .legend {
+  cursor: pointer;
+}
+
+.field {
+  position: relative;
+  padding: 10px 30px;
+  &-object {
+    padding: 8px 10px;
+    border: 1px solid #aaa;
+    border-radius: 3px;
+    margin-bottom: 20px;
+  }
+  label {
+    display: inline-block;
+    [data-type="Checkbox"]&,
+    [data-type="Boolean"]& {
+      margin-left: 10px;
+    }
+  }
+  i {
+    width: 13px;
+    color: @tertiary-color;
+    text-align: center;
+    transition: color 0.3s;
+    &:hover {
+      color: darken(@tertiary-color, 5%);
+    }
+  }
+  input[type="checkbox"],
+  input[type="radio"] {
+    width: 15px;
+    height: 15px;
+  }
+}
+
+.field-help {
+  display: inline-block;
+  padding: 0 3px;
+  .tooltip {
+    position: absolute;
+    z-index: 2;
+    max-width: 300px;
+    padding: 5px;
+    border-radius: 6px;
+    margin: 10px 0;
+    background-color: @tertiary-color;
+    color: @white;
+    opacity: 0;
+    text-align: center;
+    transition: opacity 0.3s, visibility 0s 0.3s;
+    visibility: hidden;
+  }
+  i:hover + .tooltip {
+    opacity: 0.9;
+    transition-delay: 0s;
+    visibility: inherit;
+  }
+}
+
+.field-default {
+  padding: 0 3px;
+  .is-default-value > &,
+  [data-type=""] > &,
+  [data-type^="Asset"] > &,
+  [data-type="DisplayTitle"]:not(.unlocked) > &,
+  [data-type="Object"] > &,
+  [data-type="Tags"] > &,
+  [data-type="Users"] > & {
+    display: none;
+  }
+}
+
+.field-error {
+  color: red;
+}
+
+.list-item {
+  border: 1px solid #aaa;
+  border-radius: 2px;
+  padding: 15px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  word-wrap: break-word;
+  display: flex;
+  &:hover {
+    border-color: #696969;
+  }
+  span {
+    flex-grow: 1;
+  }
+  button {
+    padding: 0;
+    font-size: 14px;
+    width: 28px;
+    height: 28px;
+  }
+}
+
+.field-editor {
+  [data-type="Checkbox"] &,
+  [data-type="Boolean"] & {
+    float: left;
+  }
+  [data-type="Radio"] & {
+    li {
+      margin-left: 0;
+      list-style-type: none;
+    }
+    label {
+      margin-left: 10px;
+    }
+  }
+  .collapsed {
+    display: none;
+  }
+  .expanded {
+    display: block;
+  }
+}

package/app/modules/scaffold/less/list.less

@@ -0,0 +1,35 @@
+.list-items {
+
+  .ui-sortable {
+    margin-bottom: 20px;
+  }
+
+  .list-item {
+    background: @white;
+
+    .list-item-modal-item {
+      clear: both;
+    }
+    .list-item-description {
+      font-weight: @font-weight-bold;
+      margin-right: 5px;
+      width: auto;
+    }
+    .list-item-modal-object {
+      margin-left: 10px;
+    }
+  }
+
+  .sortable-placeholder {
+    background: lighten(@primary-color,  40%);
+    border: 1px dashed lighten(@primary-color,  15%);
+    border-radius: 3px;
+    margin: 5px 0;
+    padding: 16px;
+  }
+
+  .ui-sortable-helper {
+    opacity: 0.8;
+    transform: scale(0.95) rotate(1deg);
+  }
+}

package/app/modules/scaffold/less/modal.less

@@ -0,0 +1,45 @@
+.scaffold-items-modal {
+  position: fixed;
+  top: 0;
+  right: -500px;
+  z-index: 500;
+  height: 100%;
+  width: 100%;
+  transition: right 0.4s cubic-bezier(0.8, 0.0, 0.2, 1);
+  &.show {
+    right: 0;
+  }
+}
+
+.scaffold-items-modal-sidebar {
+  float: right;
+  background-color: @white;
+  height: 100%;
+  width: 75%;
+  max-width: 700px;
+  border-left: 1px solid #ccc;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  &-inner {
+    padding: 40px;
+    fieldset {
+      margin: 0;
+      margin-bottom: 15px;
+    }
+  }
+  input,
+  textarea {
+    max-width: 440px;
+    width: 75%;
+  }
+}
+
+.scaffold-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 500;
+  background-color: rgba(255, 255, 255, 0.6);
+  width: 100%;
+  height: 100%;
+}

package/app/modules/scaffold/less/scaffoldAsset.less

@@ -0,0 +1,23 @@
+.scaffold-asset-preview {
+  display: block;
+  margin-bottom: 10px;
+  transition: color 0.3s;
+  &:hover {
+    color: #15a4fa;
+  }
+  i {
+    font-size: 60px;
+  }
+}
+
+.scaffold-asset-buttons {
+  transition: color 0.3s;
+  i,
+  i:hover {
+    color: inherit;
+  }
+}
+
+.scaffold-asset-external-input-buttons {
+  margin-top: 10px;
+}

package/app/modules/scaffold/less/scaffoldAssetItem.less

@@ -0,0 +1,50 @@
+.field-editor {
+  .scaffold-asset-item-preview {
+    max-width: none;
+    width: 100%;
+    display: block;
+  }
+
+  .scaffold-asset-item-img-holder {
+    position: relative;
+
+    div {
+      width: 40px;
+      height: 40px;
+      background: fade(@primary-color, 80%);
+      border: solid 1px @white;
+      border-radius: 50%;
+      position: absolute;
+      text-align: center;
+      line-height: 40px;
+      font-size: 150%;
+      color: @white;
+      font-weight: @font-weight-bold;
+      cursor: move;
+      box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.5);
+    }
+  }
+
+  .scaffold-asset-buttons {
+    display: flex;
+    margin-top: 0.5em;
+    margin-bottom: 1.5em;
+
+    .scaffold-asset-external {
+      margin-left: 4px;
+    }
+
+    button.add-item {
+      margin-left: auto;
+      background-color: @button-primary-color;
+      color: @button-primary-text-color;
+      border-color: @button-primary-color;
+
+      &:hover, &:focus {
+        background-color:@button-primary-hover-color;
+        color: @button-primary-hover-text-color;
+        border-color:@button-primary-hover-color;
+      }
+    }
+  }
+}

package/app/modules/scaffold/less/selectize.less

@@ -0,0 +1,29 @@
+.field .field-editor .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/scaffold/less/textArea.less

@@ -0,0 +1,9 @@
+.field-editor {
+  .ck-editor {
+    max-width: 850px;
+
+    .ck-content {
+      min-height: 150px;
+    }
+  }
+}

package/app/modules/scaffold/less/users.less

@@ -0,0 +1,6 @@
+.field[data-type="Users"] .scaffold-users {
+  .option {
+    .name { font-weight: @font-weight-bold; }
+    .email { margin-left: 5px; }
+  }
+}

package/app/modules/scaffold/templates/field.hbs

@@ -0,0 +1,25 @@
+{{!-- <div onkeydown="return event.key != 'Enter'" class="field{{#if title}} field-{{stringToClassName title}}{{else}}{{#if legend}} field-object field-object-{{stringToClassName legend}}{{/if}}{{/if}}{{#if isDefaultValue}} is-default-value{{/if}}" data-editor-id="{{editorId}}" data-type="{{#if inputType.type}}{{inputType.type}}{{else}}{{inputType}}{{/if}}"> --}}
+<div class="field{{#if title}} field-{{stringToClassName title}}{{else}}{{#if legend}} field-object field-object-{{stringToClassName legend}}{{/if}}{{/if}}{{#if isDefaultValue}} is-default-value{{/if}}" data-editor-id="{{editorId}}" data-type="{{#if inputType.type}}{{inputType.type}}{{else}}{{inputType}}{{/if}}">
+  {{#if title}}
+  <label for="{{editorId}}" title="{{key}}">{{title}}</label>
+  {{#if help}}
+  <div class="field-help">
+    <i class="fa fa-info-circle"></i>
+    <div class="tooltip">{{help}}</div>
+  </div>
+  {{/if}}
+  <button type="button" class="field-default" data-action="default" title="{{t 'app.reset'}}">
+    <i class="fa fa-undo"></i>
+  </button>
+  {{else}}
+  {{#if legend}}
+  <div class="legend">
+    <legend>{{legend}}</legend>
+  </div>
+  {{/if}}
+  {{/if}}
+  <div class="field-editor{{#unless title}}{{#if legend}} collapsed{{/if}}{{/unless}}">
+    <div class="field-error" data-error></div>
+    <span data-editor></span>
+  </div>
+</div>

package/app/modules/scaffold/templates/fieldset.hbs

@@ -0,0 +1,10 @@
+<fieldset class="fieldset-{{#if legend}}{{stringToClassName legend}}{{else}}object{{/if}}" data-key="{{key}}" data-fields>
+  {{#if legend}}
+  <div class="legend">
+    <legend>{{legend}}</legend>
+  </div>
+  {{/if}}
+  {{#if description}}
+  <div class="description">{{description}}</div>
+  {{/if}}
+</fieldset>

package/app/modules/scaffold/templates/form.hbs

@@ -0,0 +1,6 @@
+<form>
+  <div data-fieldsets></div>
+  {{#if submitButton}}
+  <button class="btn primary" type="submit">{{submitButton}}</button>
+  {{/if}}
+</form>

package/app/modules/scaffold/templates/list.hbs

@@ -0,0 +1,4 @@
+<div class="list-items">
+  <div data-items></div>
+  <button class="btn primary" type="button" data-action="add">{{t 'app.add'}}</button>
+</div>

package/app/modules/scaffold/templates/listItem.hbs

@@ -0,0 +1,5 @@
+<div class="list-item">
+  <span data-editor></span>
+  <button class="btn secondary fa fa-clone" type="button" data-action="clone"></button>
+  <button class="btn warning fa fa-close" type="button" data-action="remove"></button>
+</div>

package/app/modules/scaffold/templates/scaffoldAsset.hbs

@@ -0,0 +1,65 @@
+{{#if value}}
+  {{! Work out which type it is and display the correct html markup}}
+
+  {{#ifValueEquals type 'image'}}
+    {{#if thumbUrl}}
+      <img class="scaffold-asset-preview" src="{{thumbUrl}}"/>
+    {{else}}
+      <a class="scaffold-asset-preview" title="{{t 'app.nothumbnailforimage'}}" href="{{url}}" target="_blank">
+        <i class="fa fa-file-image-o fa-large"></i>
+      </a>
+    {{/if}}
+  {{/ifValueEquals}}
+
+  {{#ifValueEquals type 'other'}}
+    <a class="scaffold-asset-preview" href="{{#ifAssetIsExternal value}}{{value}}{{else}}{{url}}{{/ifAssetIsExternal}}" target="_blank">
+      <i class="fa fa-file-o fa-large"></i>
+      <div>{{value}}</div>
+    </a>
+  {{/ifValueEquals}}
+
+  {{#ifValueEquals type 'video'}}
+    {{#ifAssetIsExternal value}}
+      <a class="scaffold-asset-preview" href="{{value}}" target="_blank">
+        <i class="fa fa-file-movie-o fa-large"></i>
+        <div>{{value}}</div>
+      </a>
+    {{else}}
+      <img class="scaffold-asset-preview" src="{{thumbUrl}}"/>
+    {{/ifAssetIsExternal}}
+  {{/ifValueEquals}}
+
+  {{#ifValueEquals type 'audio'}}
+    <a class="scaffold-asset-preview" href="{{#ifAssetIsExternal value}}{{value}}{{else}}{{url}}{{/ifAssetIsExternal}}" target="_blank">
+      <i class="fa fa-file-audio-o fa-large"></i>
+      <div>{{value}}</div>
+    </a>
+  {{/ifValueEquals}}
+
+  <div class="scaffold-asset-buttons">
+    <button class="btn scaffold-asset-clear">
+      <i class="fa fa-times-circle"></i>
+      {{#ifAssetIsExternal value}}
+        {{t 'app.removeexternalasset'}}
+      {{else}}
+        {{t 'app.removeasset'}}
+      {{/ifAssetIsExternal}}
+    </button>
+  </div>
+
+{{else}}
+
+  <div class="scaffold-asset-external-input display-none">
+    <input type="text" class="scaffold-asset-external-input-field" />
+    <div class="scaffold-asset-external-input-buttons">
+      <button class="btn primary scaffold-asset-external-input-save">{{t 'app.save'}}</button>
+      <button class="btn primary-hollow scaffold-asset-external-input-cancel">{{t 'app.cancel'}}</button>
+    </div>
+  </div>
+
+  <div class="scaffold-asset-buttons">
+    <button class="btn secondary scaffold-asset-picker">{{t 'app.selectasset'}}</button>
+    <button class="btn secondary-hollow scaffold-asset-external">{{t 'app.selectexternalasset'}}</button>
+  </div>
+
+{{/if}}

package/app/modules/scaffold/templates/scaffoldAssetItem.hbs

@@ -0,0 +1,35 @@
+{{#if value}}
+  {{! Work out which type it is and display the correct html markup}}
+
+  <div class="scaffold-asset-item-img-holder">
+    <img class="scaffold-asset-item-preview" src="{{url}}"/>
+  </div>
+
+  <div class="scaffold-asset-buttons">
+    <button class="btn scaffold-asset-clear">
+      <i class="fa fa-times-circle"></i>
+      {{#ifAssetIsExternal value}}
+        {{t 'app.removeexternalasset'}}
+      {{else}}
+        {{t 'app.removeasset'}}
+      {{/ifAssetIsExternal}}
+    </button>
+    <button class="btn add-item">{{addLabel}}</button>
+  </div>
+
+{{else}}
+
+  <div class="scaffold-asset-external-input display-none">
+    <input type="text" class="scaffold-asset-external-input-field" />
+    <div class="scaffold-asset-external-input-buttons">
+      <button class="btn primary scaffold-asset-external-input-save">{{t 'app.save'}}</button>
+      <button class="btn primary-hollow scaffold-asset-external-input-cancel">{{t 'app.cancel'}}</button>
+    </div>
+  </div>
+
+  <div class="scaffold-asset-buttons">
+    <button class="btn secondary scaffold-asset-picker">{{t 'app.selectasset'}}</button>
+    <button class="btn secondary-hollow scaffold-asset-external">{{t 'app.selectexternalasset'}}</button>
+  </div>
+
+{{/if}}