cambium 1.2.3 → 1.3.0

data/app/assets/javascripts/cambium/admin/templates/modal.jst.ejs

@@ -0,0 +1,3 @@
+<div id="modal-container">
+  <%= yield %>
+</div>

data/app/assets/javascripts/cambium/admin/views/editor.js.coffee

@@ -0,0 +1,14 @@
+class App.Views.Editor extends Backbone.View
+
+  initialize: ->
+    for textarea in $('textarea.editor')
+      $(textarea).trumbowyg
+        fullscreenable: false
+        btns: ['viewHTML',
+          '|', 'formatting',
+          '|', 'strong', 'em',
+          '|', 'link',
+          '|', 'insertImage',
+          '|', 'justifyLeft', 'justifyCenter',
+          '|', 'btnGrp-lists',
+          '|', 'horizontalRule']

data/app/assets/javascripts/cambium/admin/views/image_cropper.js.coffee

@@ -0,0 +1,27 @@
+class App.Views.ImageCropper extends Backbone.View
+
+  el: 'body'
+
+  template: JST['cambium/admin/templates/image_cropper']
+
+  events:
+    'click .image-actions a.crop': 'openModal'
+
+  openModal: (e) ->
+    e.preventDefault()
+    data =
+      url: $(e.target).data('url')
+      width: $(e.target).data('width') / 3
+      height: $(e.target).data('height') / 3
+    $('#modal-container').remove()
+    $('body').prepend(@template(image: data))
+    $('#modal-container img').on 'load', () ->
+      $('#modal-container .gravity div')
+        .height($('#modal-container img').height() / 3)
+    $('#modal-container .gravity div').click (event) =>
+      e.preventDefault()
+      $(e.target).parents('.image-actions').find('input')
+        .val($(event.target).attr('data-gravity'))
+      $('#modal-container').remove()
+    $(document).keyup (e) ->
+      $('#modal-container').remove() if e.keyCode == 27

data/app/assets/javascripts/cambium/admin/views/keyboard_shortcuts.js.coffee

@@ -0,0 +1,17 @@
+class App.Views.KeyboardShortcuts extends Backbone.View
+
+  el: 'body'
+
+  events:
+    'keyup': 'shortcut'
+
+  shortcut: (e) ->
+    return if $('input, select, textarea').is(':focus')
+    switch e.keyCode
+      when 27 # Esc
+        $('.search-box input').blur()
+      when 78 # n
+        if $('#title-bar .button.new').length > 0
+          window.location = $('#title-bar .button.new').first().attr('href')
+      when 111, 191 # /
+        $('.search-box input').focus()

data/app/assets/javascripts/cambium/admin/views/media_picker.js.coffee

@@ -0,0 +1,38 @@
+class App.Views.MediaPicker extends Backbone.View
+
+  el: 'body'
+
+  template: JST['cambium/admin/templates/modal']
+
+  events:
+    'click .media-picker .add': 'addMedia'
+    'click .media-picker .remove': 'removeMedia'
+
+  addMedia: (e) ->
+    e.preventDefault()
+    $.get $('#page-content').data('library'), (data) =>
+      $('#modal-container').remove()
+      $('body').prepend(@template(yield: data))
+      $('article.tile').click (e2) =>
+        e2.preventDefault()
+        id = $(e2.target).parents('.tile').first().attr('data-id')
+        filename = $(e2.target).parents('.tile').first().attr('data-filename')
+        url = $(e2.target).parents('.tile').first().attr('data-url')
+        thumb = $(e2.target).parents('.tile').first().attr('data-thumb')
+        image = $(e2.target).parents('.tile').first().attr('data-image')
+        $(e.target).siblings('input').first().val(id)
+        $(e.target).siblings('a.file, img').remove()
+        if image == 'true'
+          $(e.target).parents('.media-picker').append("<img src=\"#{thumb}\">")
+        $(e.target).parents('.media-picker').append """
+          <a href="#{url}" class="file" target="_blank">#{filename}</a>
+            """
+        $(e.target).parents('.media-picker').find('a.remove').addClass('active')
+        $('#modal-container').remove()
+
+  removeMedia: (e) ->
+    e.preventDefault()
+    $(e.target).siblings('input').first().val('')
+    $(e.target).siblings('img, a.file').remove()
+    $(e.target).parents('.media-picker').find('a.remove').removeClass('active')
+    $(e.target).siblings('input').first().val('')

data/app/assets/stylesheets/cambium/admin/application.scss

@@ -3,6 +3,7 @@
 
 @import 'bourbon';
 @import 'cambium/admin/bones/bones';
+@import 'trumbowyg/trumbowyg';
 @import 'pickadate/classic';
 @import 'pickadate/classic.date';
 @import 'pickadate/classic.time';
@@ -20,7 +21,10 @@
 @import 'cambium/admin/partials/activity';
 @import 'cambium/admin/partials/forms';
 @import 'cambium/admin/partials/tables';
+@import 'cambium/admin/partials/tiles';
 @import 'cambium/admin/partials/dashboard';
+@import 'cambium/admin/partials/modal';
+@import 'cambium/admin/partials/pagination';
 
 // ------------------------------------------ Optional Override
 

data/app/assets/stylesheets/cambium/admin/partials/_globals.scss

@@ -19,3 +19,17 @@
     }
   }
 }
+
+@mixin icon {
+  font-family: 'icomoon';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

data/app/assets/stylesheets/cambium/admin/partials/components.scss

@@ -38,7 +38,7 @@ div.status{
 }
 
 a {
-  &.new, &.export, &.file, &.delete {
+  &.add, &.new, &.export, &.file, &.delete, &.crop, &.remove {
     &:before {
       font-family: 'icomoon';
       font-size: inherit;
@@ -46,10 +46,11 @@ a {
       margin: 0 5px 0 0;
     }
   }
-  &.new:before { content: "\e702"; }
+  &.new:before, &.add:before { content: "\e702"; }
   &.export:before { content: "\e65e"; }
-  &.delete:before { content: "\e6a7"; }
-  &.file:before { content: "\e622"; }
+  &.delete:before, &.remove:before { content: "\e6a7"; }
+  &.file:before { content: "\e65e"; }
+  &.crop:before { content: "\e73d"; }
 }
 
 .avatar-container {

data/app/assets/stylesheets/cambium/admin/partials/forms.scss

@@ -1,4 +1,10 @@
 section.form {
+  &.settings {
+    form input[type=submit] {
+      width: 75%;
+      margin: 0 0 25px 25%;
+    }
+  }
   form {
 
     h2 {
@@ -14,18 +20,58 @@ section.form {
       padding: 20px 0;
       &.file {
         padding: 20px 0 0 0;
-        & + a.file {
+        & + img, img {
+          display: block;
+          width: 75%;
+          max-width: 200px;
+          margin: 20px 0 10px 25%;
+        }
+        & + a.file, & + img + a.file, a.file {
           display: block;
+          clear: both;
           width: 100%;
-          padding: 5px 0 20px 0;
+          margin: 5px 0 0 25%;
+          font-size: 14px;
+          line-height: 14px;
+        }
+        & + .image-actions, & + img + .image-actions, .image-actions {
+          display: block;
+          clear: both;
+          width: 100%;
+          margin: 5px 0 20px;
           font-size: 14px;
           line-height: 14px;
           text-align: right;
+          a {
+            display: inline-block;
+            margin-left: 10px;
+          }
         }
         & + div.input {
           padding-top: 40px;
         }
       }
+      &.media-picker .add, &.media-picker .remove {
+        display: inline-block;
+        background: $color-2;
+        padding: 6px 10px;
+        font-size: 15px;
+        font-weight: 400;
+        color: $color-dark;
+        vertical-align: top;
+        &:before {
+          font-size: 10px;
+        }
+      }
+      &.media-picker .remove {
+        background: $color-danger;
+        margin-left: 10px;
+        color: $color-light;
+        display: none;
+        &.active {
+          display: inline-block;
+        }
+      }
       label {
         position: relative;
         display: inline-block;
@@ -118,6 +164,53 @@ section.form {
         color: $color-danger;
         text-transform: uppercase;
       }
+      .trumbowyg-box {
+        display: inline-block;
+        width: 75%;
+        margin: 5px 0;
+        &.trumbowyg-fullscreen {
+          width: 100%;
+        }
+      }
+      .trumbowyg-modal {
+        // position: fixed;
+        .trumbowyg-modal-box {
+          height: 295px;
+          form {
+            input {
+              height: auto;
+              margin: 0 !important;
+              padding: 5px 10px !important;
+              font-size: 14px !important;
+              color: $color-light-darkest !important;
+              line-height: 25px !important;
+              border: 1px solid $color-light-dark !important;
+            }
+            label {
+              display: block;
+              position: relative;
+              height: 42px;
+              margin-bottom: 5px;
+              // margin: 15px 12px;
+              // height: 27px;
+              line-height: 27px;
+              overflow: hidden;
+              width: auto;
+              .trumbowyg-input-infos {
+                float: left;
+                span {
+                  font-size: 14px;
+                  border: none;
+                }
+              }
+            }
+            .trumbowyg-modal-button {
+              height: auto;
+              line-height: 16px;
+            }
+          }
+        }
+      }
     }
 
     input[type=submit] {

data/app/assets/stylesheets/cambium/admin/partials/modal.scss

@@ -0,0 +1,40 @@
+body > #modal-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999999;
+  background: rgba($color-dark, 0.9);
+
+  #title-bar {
+    position: relative;
+    top: 0;
+    padding: 5px 25px;
+  }
+  .tiles {
+    margin: 50px;
+  }
+
+  .image-container {
+    position: relative;
+    max-width: 600px;
+    margin: 25px auto;
+    .gravity {
+      @include position(absolute, 0 null null 0);
+      @include size(100%);
+      font-size: 0;
+      div {
+        display: inline-block;
+        width: 33.3%;
+        &:hover {
+          cursor: pointer;
+          background: rgba($color-1, 0.75);
+        }
+      }
+    }
+    img {
+      width: 100%;
+    }
+  }
+}

data/app/assets/stylesheets/cambium/admin/partials/pagination.scss

@@ -0,0 +1,28 @@
+.pagination {
+  &:first-child {
+    margin: 0 0 15px 0;
+  }
+  &:last-child {
+    margin: 15px 0 0 0;
+  }
+  span {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    font-weight: 400;
+    &.current {
+      padding: 3px;
+      font-weight: 600;
+    }
+    a {
+      margin: 0;
+      padding: 3px;
+      font-size: inherit;
+      font-weight: inherit;
+    }
+  }
+}
+
+table .pagination {
+  text-align: right;
+}

data/app/assets/stylesheets/cambium/admin/partials/tables.scss

@@ -12,6 +12,23 @@ section.data-table {
           font-weight: 400;
           text-transform: uppercase;
           color: $color-1;
+          a {
+            font-weight: inherit;
+            &.active.asc, &.active.desc {
+              &:before {
+                @include icon;
+                display: inline-block;
+                margin-right: 5px;
+                font-size: 0.75em;
+              }
+            }
+            &.active.asc:before {
+              content: "\e72c";
+            }
+            &.active.desc:before {
+              content: "\e728";
+            }
+          }
         }
       }
     }
@@ -51,30 +68,4 @@ section.data-table {
       }
     }
   }
-
-  .pagination {
-    text-align: right;
-    &:first-child {
-      margin: 0 0 15px 0;
-    }
-    &:last-child {
-      margin: 15px 0 0 0;
-    }
-    span {
-      display: inline-block;
-      margin: 0;
-      padding: 0;
-      font-weight: 400;
-      &.current {
-        padding: 3px;
-        font-weight: 600;
-      }
-      a {
-        margin: 0;
-        padding: 3px;
-        font-size: inherit;
-        font-weight: inherit;
-      }
-    }
-  }
-}
+}

data/app/assets/stylesheets/cambium/admin/partials/tiles.scss

@@ -0,0 +1,57 @@
+#page-content.tiles {
+  margin-top: 75px;
+  article {
+    position: relative;
+    display: inline-block;
+    width: 180px;
+    height: 180px;
+    margin: 5px;
+    background: $color-light;
+    &:before {
+      display: block;
+      margin: 75px 0 0 0;
+      font-family: 'icomoon';
+      font-size: inherit;
+      line-height: inherit;
+      content: "\e622";
+      font-size: 72px;
+      color: $color-light-darkest;
+      text-align: center;
+    }
+    &.pdf:before { content: "\e7b2"; }
+    &.doc:before, &.docx:before { content: "\e7b4"; }
+    &.xls:before, &.xlsx:before { content: "\e7b5"; }
+    &.zip:before { content: "\e7b6"; }
+    &.ppt:before, &.pptx:before { content: "\e7b7"; }
+    &.xml:before { content: "\e7b8"; }
+    &.css:before { content: "\e7b9"; }
+    &.html:before { content: "\e7ba"; }
+    a {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      &:hover h3 {
+        background: $color-2;
+      }
+    }
+    img {
+      height: 100%;
+      width: 100%;
+    }
+    h3 {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      margin: 0;
+      padding: 5px 10px;
+      box-sizing: border-box;
+      font-size: 1em;
+      background: $color-1;
+      color: $color-dark;
+      @include transition(all 0.35s linear);
+    }
+  }
+}