loft 0.2.9 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9cbfd6f82a45ab219e1d1e8f34a640d5bb097387
-  data.tar.gz: 52b5b9f14e48113f6c3a20da073b5789e92a8945
+  metadata.gz: bfbd343f5dbe51c685e42a35545b11ba6cfc9a75
+  data.tar.gz: d170f5aae6bf0409f13384c08a5f681fa3b0a271
 SHA512:
-  metadata.gz: 22af5dff677b1b59fc1c5e17fba5fe8a4096b14705ba32f74b25ba69c2f10f9cb314e1489d6c58b7cc4d1bf4d952bc697bf005f8070e61a42a0e1f44da4694e1
-  data.tar.gz: 29c7aef7a66ae2bbccdd765dfae06aa2451917c87f4e2c1127e1d5f732ced3f122d5c37c74ac1006eadb8ff190950c085e309f660914a2f9cefffab7d6388ed0
+  metadata.gz: 97cbd7ec0cf1be3aa5dcfeeed783771992fc0fa9aa6ab1eec0325924be97f4936130fd9ede409c1370195cd2855156359a10246cc6e163877c51399d5e5f409c
+  data.tar.gz: 2ac7ed3b842e923257cb9a3dc5950b825f9f5768f7f73ca6939364477ccf3993099ca9064fcc10a024b9d794a45eca9bbf2063408e97c3c74578b815b268b5ed

data/app/assets/javascripts/loft.coffee

@@ -7,5 +7,8 @@
 ## OPTIONAL
 # require loft/redactor-loft
 
+@Icons.upload = "<i class='fa fa-cloud-upload'></i>"
+@Icons.remove = "<i class='fa fa-close'></i>"
+
 # TODOs:
-# - refactor group remove action: delete a bunch first, then reload the page
+# - refactor group remove action: delete a bunch first, then reload the page

data/app/assets/javascripts/loft/asset-item.coffee

@@ -1,11 +1,6 @@
 # -----------------------------------------------------------------------------
 # Author: Alexander Kravets <alex@slatestudio.com>,
 #         Slate Studio (http://www.slatestudio.com)
-#
-# Coding Guide:
-#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
-# -----------------------------------------------------------------------------
-
 # -----------------------------------------------------------------------------
 # Loft Asset Item
 # -----------------------------------------------------------------------------
@@ -14,8 +9,7 @@ class @LoftAssetItem extends Item
     @$el =$ "<div class='item asset asset-#{ @object.type }' data-id='#{ @object._id }'></div>"
     @render()
 
-
-  # PRIVATE ===============================================
+  # PRIVATE ===================================================================
 
   _bind_name_input: ->
     @$nameInput.on 'blur',  (e) => @_update_name_if_changed()
@@ -23,18 +17,15 @@ class @LoftAssetItem extends Item
       if e.keyCode == 13 then $(e.target).blur()
       if e.keyCode == 27 then @_cancel_name_change()
 
-
   _edit_name: (e) ->
     @$el.addClass('edit-name')
     @$nameInput.focus().select()
 
-
   _cancel_name_change: ->
     @$el.removeClass('edit-name')
     name = @$title.html()
     @$nameInput.val(name)
 
-
   _update_name_if_changed: ->
     @$el.removeClass('edit-name')
     name = @$nameInput.val()
@@ -46,8 +37,7 @@ class @LoftAssetItem extends Item
       onSuccess: (object) =>
       onError:   (errors) => # process errors
 
-
-  # PUBLIC ================================================
+  # PUBLIC ====================================================================
 
   render: ->
     @$el.html('').removeClass('item-folder has-subtitle has-thumbnail')
@@ -72,7 +62,6 @@ class @LoftAssetItem extends Item
     @$checkbox.append(@$checkboxInput)
     @$el.prepend(@$checkbox)
 
-
     # input for assets name
     name = @$title.text()
     @$name      =$ "<div class='asset-name'></div>"
@@ -83,7 +72,3 @@ class @LoftAssetItem extends Item
 
     # handler for asset name change on title click
     @$title.on 'click', (e) => @_edit_name(e)
-
-
-
-

data/app/assets/javascripts/loft/group-actions.coffee

@@ -1,11 +1,6 @@
 # -----------------------------------------------------------------------------
 # Author: Alexander Kravets <alex@slatestudio.com>,
 #         Slate Studio (http://www.slatestudio.com)
-#
-# Coding Guide:
-#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
-# -----------------------------------------------------------------------------
-
 # -----------------------------------------------------------------------------
 # Loft Group Actions
 # -----------------------------------------------------------------------------
@@ -14,8 +9,7 @@ class @LoftGroupActions
     @_render()
     @_bind_checkboxes()
 
-
-  # PRIVATE ===============================================
+  # PRIVATE ===================================================================
 
   _render: ->
     @$el =$ "<div class='assets-group-actions' style='display:none;'></div>"
@@ -36,7 +30,6 @@ class @LoftGroupActions
     @$unselectBtn.on 'click', (e) => e.preventDefault(); @_unselect_list_items()
     @$el.append @$unselectBtn
 
-
   _bind_checkboxes: ->
     @list.$el.on 'click', '.asset .asset-checkbox input', (e) =>
       # when multiple selection disabled select only one asset a time
@@ -49,22 +42,19 @@ class @LoftGroupActions
       else
         @hide()
 
-
   _select_single_item: ($checkbox) ->
     if $checkbox.prop('checked')
       @list.$el.find('.asset .asset-checkbox input:checked').prop('checked' , false)
       $checkbox.prop('checked', true)
 
-
   _selected_list_items: ->
-    $.map @list.$el.find('.asset .asset-checkbox input:checked'), (checkbox) -> $(checkbox).parent().parent()
-
+    $.map @list.$el.find('.asset .asset-checkbox input:checked'), (checkbox) ->
+      $(checkbox).parent().parent()
 
   _unselect_list_items: ->
     @list.$el.find('.asset .asset-checkbox input').prop('checked', false)
     @hide()
 
-
   _delete_selected_list_items: ->
     if confirm("Are you sure?")
       $selectedItems       = @_selected_list_items()
@@ -79,7 +69,6 @@ class @LoftGroupActions
           onError:   => # error notification
       @hide()
 
-
   _accept_selected_items: ->
     $selectedItems  = @_selected_list_items()
 
@@ -96,16 +85,10 @@ class @LoftGroupActions
     else
       @loft.onAcceptCallback(objects, => @loft.closeModal())
 
-
   _show: ->
     @$el.show()
 
-
-  # PUBLIC ================================================
+  # PUBLIC ====================================================================
 
   hide: ->
     @$el.hide()
-
-
-
-

data/app/assets/javascripts/loft/inputs/loft-image.coffee

@@ -1,36 +1,41 @@
 # -----------------------------------------------------------------------------
 # Author: Alexander Kravets <alex@slatestudio.com>,
 #         Slate Studio (http://www.slatestudio.com)
-#
-# Coding Guide:
-#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
-# -----------------------------------------------------------------------------
-
 # -----------------------------------------------------------------------------
 # INPUT LOFT IMAGE
 # -----------------------------------------------------------------------------
 class @InputLoftImage extends InputString
 
-  # PRIVATE ===============================================
+  # PRIVATE ===================================================================
 
   _add_input: ->
-    @config.placeholder ?= 'Image url'
+    @config.placeholder ?= 'Image URL'
+
+    type = "string"
+    if @config.fullsizePreview
+      @$el.addClass "fullsize-preview"
+      type = "hidden"
 
-    @$input =$ "<input type='string' name='#{ @name }' value='#{ @_safe_value() }' id='#{ @name }' />"
+    @$input =$ """<input type='#{type}'
+                         name='#{ @name }'
+                         value='#{ @_safe_value() }'
+                         id='#{ @name }' />"""
     @$el.append @$input
     @$input.on 'change', (e) =>
       @updateValue($(e.target).val())
 
-    @_add_image()
+    if @config.fullsizePreview
+      @_update_preview_background()
+    else
+      @_add_image()
+      @_update_image()
+
     @_add_actions()
     @_update_input_class()
 
-
   _add_image: ->
     @$image =$ "<a href='' target='_blank' class='image'><img src='' /></a>"
     @$el.append @$image
-    @_update_image()
-
 
   _add_actions: ->
     @$actions =$ "<span class='input-actions'></span>"
@@ -39,57 +44,51 @@ class @InputLoftImage extends InputString
     @_add_choose_button()
     @_add_remove_button()
 
-
   _add_choose_button: ->
-    @$chooseBtn =$ "<a href='#' class='choose'></a>"
+    @$chooseBtn =$ "<button class='choose'>#{Icons.upload}</button>"
     @$actions.append @$chooseBtn
 
-    @_update_choose_button_title()
-
     @$chooseBtn.on 'click', (e) =>
-      e.preventDefault()
       chr.modules.loft.showModal 'images', false, (objects) =>
         asset = objects[0]
         @updateValue(asset.file.url)
 
-
   _add_remove_button: ->
-    @$removeBtn =$ "<a href='#' class='remove'>Remove</a>"
+    @$removeBtn =$ "<button class='remove'>#{Icons.remove}</button>"
     @$actions.append @$removeBtn
 
     @$removeBtn.on 'click', (e) =>
-      e.preventDefault()
       if confirm('Are you sure?')
         @updateValue('')
 
+  _update_preview_background: ->
+    url = @value
+    @$el.css { "background-image": "url(#{url})" }
 
   _update_image: ->
     url = @value
-    @$image.attr('href', @value).children().attr('src', @value)
-    if @value == '' then @$image.hide() else @$image.show()
-
-
-  _update_choose_button_title: ->
-    title = if @value == '' then 'Choose or upload an image' else 'Choose other or upload'
-    @$chooseBtn.html(title)
-
+    @$image.attr('href', url).children().attr('src', url)
+    if url == ''
+      @$image.hide()
+    else
+      @$image.show()
 
   _update_input_class: ->
-    if @value == '' then @$el.removeClass('has-value') else @$el.addClass('has-value')
+    if @value == ''
+      @$el.removeClass('has-value')
+    else
+      @$el.addClass('has-value')
 
-
-  # PUBLIC ================================================
+  # PUBLIC ====================================================================
 
   updateValue: (@value) ->
     @$input.val(@value)
 
-    @_update_image()
-    @_update_choose_button_title()
-    @_update_input_class()
+    if @config.fullsizePreview
+      @_update_preview_background()
+    else
+      @_update_image()
 
+    @_update_input_class()
 
 chr.formInputs['loft-image'] = InputLoftImage
-
-
-
-

data/app/assets/javascripts/loft/module.coffee

@@ -1,135 +1,84 @@
 # -----------------------------------------------------------------------------
 # Author: Alexander Kravets <alex@slatestudio.com>,
 #         Slate Studio (http://www.slatestudio.com)
-#
-# Coding Guide:
-#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
-# -----------------------------------------------------------------------------
-
 # -----------------------------------------------------------------------------
 # Loft
 # -----------------------------------------------------------------------------
-#
 # Public methods:
 #   new Loft(title, resource, resourcePath)
 #   showModal(assetType, @selectMultipleAssets, @onAcceptCallback, @closeOnAccept)
 #   closeModal()
-#
 # -----------------------------------------------------------------------------
 class @Loft
-  constructor: (title='Media', resource='asset', resourcePath='/admin/assets') ->
+  constructor: (title="Media", resource="asset", resourcePath="/admin/assets") ->
     @module = {}
     @store  = {}
+    @_uploadsCounter = 0
+
+    @title = title
+    @menuIcon = "cloud-upload"
 
-    @arrayStoreClass  = RailsArrayStore
-    @arrayStoreConfig =
-      resource:    resource
-      path:        resourcePath
-      sortBy:      'created_at'
+    @itemClass = LoftAssetItem
+    @arrayStore = new RailsArrayStore
+      resource: resource
+      path: resourcePath
+      sortBy: "created_at"
       sortReverse: true
       searchable:  true
 
-    @_uploadsCounter = 0
-
-    moduleConfig =
-      title: title
-      menuIcon: 'cloud-upload'
-      showNestedListsAside: true
-      items:
-        loft_all:      @_nested_list_config 'All'
-        loft_images:   @_nested_list_config 'Images',   'image'
-        loft_text:     @_nested_list_config 'Text',     'text'
-        loft_archives: @_nested_list_config 'Archives', 'archive'
-        loft_audio:    @_nested_list_config 'Audio',    'audio'
-        loft_video:    @_nested_list_config 'Video',    'video'
-        loft_other:    @_nested_list_config 'Other',    'other'
+    @listTabs =
+      "All": {}
+      "Images": { images: true }
+      "Documents": { not_images: true }
 
-      onModuleInit: (module) =>
-        @_initialize_module(module)
+    @onListInit = (list) =>
+      @_add_upload_button(list)
+      @_add_group_actions(list)
+      @_add_mode_switch(list)
 
-    return moduleConfig
+    @onListShow = (list) =>
+      @_clear_assets_selection(list)
 
+    @onModuleInit = (module) =>
+      @_initialize_module(module)
 
-  # PRIVATE ===============================================
+  # PRIVATE ===================================================================
 
-  _initialize_module: (module) ->
-    @module = module
-    @store  = @module.nestedLists.loft_all.config.arrayStore
-    @nestedLists = @module.nestedLists
-    moduleName = @module.name
-    firstNestedListPath = _firstNonEmptyValue(@nestedLists).path
+  _initialize_module: (@module) ->
+    @selectMultipleAssets = true
+    @store = @module.rootList.config.arrayStore
 
-    # API method
     @module.showModal = (assetType, selectMultipleAssets, callback, closeOnAccept) =>
       @showModal(assetType, selectMultipleAssets, callback, closeOnAccept)
-    @selectMultipleAssets = true
 
-    # modal close button
+    @_add_close_button()
+    @_enable_grid_mode()
+
+  _add_close_button: ->
     @module.rootList.$modalCloseBtn =$ """<a href='#' class='modal-close'>
                                             <i class='fa fa-times'></i>
                                           </a>"""
     @module.rootList.$header.prepend @module.rootList.$modalCloseBtn
-    @module.rootList.$modalCloseBtn.on 'click', (e) => e.preventDefault() ; @closeModal()
-
-    # modal types navigation
-    @module.rootList.$items.on 'click', 'a', (e) =>
-      if @module.$el.hasClass 'module-modal'
-        e.preventDefault()
-
-        $item    = $(e.currentTarget)
-        listName = $item.attr('href').split('/')[2]
+    @module.rootList.$modalCloseBtn.on "click", (e) =>
+      e.preventDefault()
+      @closeModal()
 
-        @module.activeList.hide()
-        @module.showList(listName)
-        @module.activeList.updateItems()
-
-        $item.parent().children('.active').removeClass('active')
-        $item.addClass('active')
-
-    # enable grid mode as default on desktop/tablet
+  _enable_grid_mode: ->
     if ! chr.isMobile()
-      @module.$el.addClass('grid-mode')
-
-    @module.$el.addClass("module-categories")
-    if chr.isDesktop()
-      chr.$mainMenu
-        .find(".menu-#{moduleName}")
-        .attr("href", firstNestedListPath)
+      @module.$el.addClass "grid-mode"
 
-
-  _nested_list_config: (moduleName, assetType) ->
-    storeConfig = {}
-    $.extend(storeConfig, @arrayStoreConfig)
-
-    if assetType
-      $.extend(storeConfig, { urlParams: { by_type:  assetType } })
-
-    config =
-      title:          moduleName
-      showWithParent: true
-      itemClass:      LoftAssetItem
-      arrayStore:     new @arrayStoreClass(storeConfig)
-      onListInit: (list) => @_inititialize_list(list)
-      onListShow: (list) => @_clear_assets_selection()
-
-    return config
-
-
-  _inititialize_list: (list) ->
-    # file input button for uploading new files
+  _add_upload_button: (list) ->
     list.$uploadInput =$ "<input class='asset-upload' type='file' multiple='multiple' />"
     list.$search.before list.$uploadInput
-
-    # file upload handler
-    list.$uploadInput.on 'change', (e) =>
+    list.$uploadInput.on "change", (e) =>
       files = e.target.files
       if files.length > 0
         @_upload(file, list) for file in files
 
-    # group actions toolbar
+  _add_group_actions: (list) ->
     list.groupActions = new LoftGroupActions(list, this)
 
-    # grid/list checkbox
+  _add_mode_switch: (list) ->
     list.$switchMode =$ """<a class='assets-switch-mode' href='#'>
                              <i class='fa fa-fw fa-th-large'></i>
                              <i class='fa fa-fw fa-th-list'></i>
@@ -137,12 +86,11 @@ class @Loft
     list.$backBtn.after list.$switchMode
     list.$switchMode.on 'click', (e) => e.preventDefault() ; @module.$el.toggleClass('grid-mode')
 
-    # modal back for mobiles
-    list.$header.on 'click', '.back', (e) =>
-      if @module.$el.hasClass 'module-modal'
-        e.preventDefault()
-        @module.showList()
-
+    # # modal back for mobiles
+    # list.$header.on 'click', '.back', (e) =>
+    #   if @module.$el.hasClass 'module-modal'
+    #     e.preventDefault()
+    #     @module.showList()
 
   _upload: (file, list) ->
     obj = {}
@@ -153,49 +101,35 @@ class @Loft
       onSuccess: (object) => @_finish_file_upload(list)
       onError:   (errors) =>
         @_finish_file_upload(list)
-        chr.showError('Can\'t upload file.')
-
+        chr.showError("Can't upload file.")
 
   _start_file_upload: ->
     @_uploadsCounter += 1
-    @module.$el.addClass('assets-uploading')
-
+    @module.$el.addClass("assets-uploading")
 
   _finish_file_upload: (list) ->
     @_uploadsCounter -= 1
     if @_uploadsCounter == 0
-      @module.$el.removeClass('assets-uploading')
+      @module.$el.removeClass("assets-uploading")
 
       # update data in list if it's not loft_all,
       # in loft_all new objects are added automatically
-      if @module.activeList.name != 'loft_all'
-        @module.activeList.updateItems()
+      # if @module.activeList.name != 'loft_all'
+      #   @module.activeList.updateItems()
 
+  _clear_assets_selection: (list) ->
+    list.groupActions.hide()
+    list.$items.find(".asset-checkbox").prop("checked", false)
 
-  _clear_assets_selection: ->
-    for name, list of @module.nestedLists
-      list.groupActions.hide()
-      list.$items.find('.asset-checkbox').prop('checked', false)
-
-
-  # PUBLIC ================================================
+  # PUBLIC ====================================================================
 
   closeModal: ->
     @selectMultipleAssets = true
-    @_clear_assets_selection()
-    @module.$el.removeClass('module-modal')
+    @_clear_assets_selection(@module.activeList)
+    @module.$el.removeClass("module-modal")
     @module.hide()
 
-
-  # chr.modules.assets.showModal()
-  showModal: (assetType='all', @selectMultipleAssets=false, @onAcceptCallback=$.noop, @closeOnAccept=true) ->
-    # modal mode
-    @module.$el.addClass('module-modal')
-    # show module
+  showModal: (assetType="all", @selectMultipleAssets=false, @onAcceptCallback=$.noop, @closeOnAccept=true) ->
+    @module.$el.addClass("module-modal")
     @module.show()
-    # show nested list
-    @module.showList("loft_#{ assetType }")
     @module.activeList.updateItems()
-    # select active item
-    @module.rootList.$items.children().removeClass('active')
-    @module.rootList.$items.children("[href='#/loft/loft_#{ assetType }']").addClass('active')

data/app/assets/stylesheets/inputs/loft-image.scss

@@ -1,8 +1,49 @@
 .input-loft-image {
-  input               { margin-bottom: .25em; }
-  .image img          { max-height: 6em; margin: .25em .75em .25em 0; float: left; }
-  .remove             { display: none; }
 
-  &.has-value         { min-height: 11em; }
+  input { margin-bottom: .25em; }
+  .image img { max-height: 6em; margin: .25em .75em .25em 0; float: left; }
+  .remove { display: none; }
+
+  &.has-value { min-height: 11em; }
   &.has-value .remove { display: inline; }
-}
+}
+
+.input-loft-image.fullsize-preview {
+  @include no-bottom-border;
+  @include position(absolute, 3.3em null null 0.5em);
+  z-index: 1;
+  width: 5em;
+  height: 5em;
+  min-height: 5em;
+  background-color: $border-color;
+  background-size: cover;
+  padding: 0.15em;
+
+  input,
+  .label-title,
+  .error-message { display: none; }
+
+  button {
+    width: 2em;
+    line-height: 2;
+    text-align: center;
+    border: 0;
+    padding: 0;
+    border-radius: 1.75em;
+    margin: 0.15em;
+  }
+}
+
+/* Tablet ------------------------------------------------------------------ */
+@media #{$tablet} {
+  .input-loft-image.fullsize-preview {
+    padding: 0.25em;
+    width: 14em;
+    height: 14em;
+
+    button {
+      width: 2.5em;
+      line-height: 2.5;
+    }
+  }
+}

data/app/assets/stylesheets/loft.scss

@@ -1,10 +1,11 @@
-// -----------------------------------------------------------------------
-// Basic styles for Loft Character CMS plugin, this should be included in
-// admin.scss (default)
-// -----------------------------------------------------------------------
 @import "inputs/loft-image";
 
 // MIXINS
+@mixin loft-icon-base($bgSize, $width, $height) {
+  display: block; background-size: $bgSize; width: $width; height: $height;
+  background-image: image-url("loft/library@3x.png");
+}
+
 @mixin loft-icon-label($title) {
   &:before {
     display: block; margin-top: 2.6em;
@@ -14,51 +15,9 @@
   }
 }
 
-@mixin loft-icon-base($bgSize, $width, $height) {
-  display: block; background-size: $bgSize; width: $width; height: $height;
-  background-image: image-url("loft/library@3x.png");
-}
-
-// ASSET TYPE ICONS
-.loft .list:first-child .items {
-  .item {
-    .item-title { margin-left: 2.05em; }
-    &:before    { @include position(absolute, null null null 1em); content: ''; display: block; }
-  }
-
-  .item {
-    &:before         {    @include loft-icon-base(32px 112px, 16px, 16px); }
-    &.active:before  {    background-position: 16px   0px; }
-  }
-  .item:nth-child(2) {
-    &:before            { background-position:  0px -16px; }
-    &.active { &:before { background-position: 16px -16px; } }
-  }
-  .item:nth-child(3) {
-    &:before            { background-position:  0px -32px; }
-    &.active { &:before { background-position: 16px -32px; } }
-  }
-  .item:nth-child(4) {
-    &:before            { background-position:  0px -48px; }
-    &.active { &:before { background-position: 16px -48px; } }
-  }
-  .item:nth-child(5) {
-    &:before            { background-position:  0px -64px; }
-    &.active { &:before { background-position: 16px -64px; } }
-  }
-  .item:nth-child(6) {
-    &:before            { background-position:  0px -80px; }
-    &.active { &:before { background-position: 16px -80px; } }
-  }
-  .item:nth-child(7) {
-    &:before            { background-position:  0px -96px; }
-    &.active { &:before { background-position: 16px -96px; } }
-  }
-}
-
 // LIST MODE
-.loft .list:not(:first-child) .items .item.asset {
-  padding-left: 6.25em; // 100px;
+.list.loft .items .item.asset {
+  padding-left: 6.25em;
 
   // checkbox
   .asset-checkbox {
@@ -116,7 +75,7 @@
 .module-modal .assets-group-actions .delete { display: none;   }
 
 // UPLOAD BUTTON
-.loft .list-aside .header:before {
+.list.loft .header:before {
   @include position(absolute, 0px 0px null null);
   @include header-icon-base;
   display: block;
@@ -136,38 +95,80 @@
 
 .list header .asset-upload + .search { @include position(absolute, 0 40px null null); }
 .list.list-search header .asset-upload + .search { @include position(absolute, 0 0 null 0); }
-.loft.assets-uploading .list:not(:first-child) header .spinner { display: inline-block; }
+.loft.assets-uploading .list header .spinner { visibility: visible; }
 
 // MODAL MODE
 .loft {
   .modal-close { display: none; }
   &.module-modal {
-    @include position(absolute, 0 .5em 0 .5em); z-index: 1100;
+    @include position(absolute, 0 .5em 0 .5em);
+    z-index: 1100;
 
     &:after { display: none; }
 
-    // dark background
     &:before {
-      @include position(fixed, 0px 0px 0px 0px); z-index: 0;
-      content: ''; display: block; background: rgba(0,0,0,.25);
+      @include position(fixed, 0px 0px 0px 0px);
+      z-index: 0;
+      content: '';
+      display: block;
+      background: rgba(0, 0, 0, 0.25);
     }
 
     .modal-close {
       @include header-icon-base;
-      @include position(absolute, null 0 null null);
+      @include position(absolute, null null null 0);
       display: block;
+      color: $secondary-font-color;
+
+      &:hover {
+        color: $base-font-color;
+      }
     }
-    .header { top: 0; left: .5em; right: .5em; width: auto; }
 
-    .list:first-child .back { display: none; }
+    .header {
+      top: 0;
+      left: 0.5em;
+      right: 0.5em;
+      width: auto;
+    }
+
+    .back {
+      display: none;
+    }
   }
 }
 
-/* Tablet ------------------------------------------------------------------ */
+/* Tablet ----------------------------------------------------------------- */
 @media #{$tablet} {
+  // LAYOUT
+  .list.loft {
+    width: initial;
+    background-color: $bg-color;
+
+    .header {
+      background-color: $bg-color;
+    }
+
+    .item {
+      background-color: $white-color;
+    }
+  }
+
   // ITEMS
-  .loft .list:not(:first-child) .items { font-size: 1em; }
-  .loft .list:not(:first-child) .items .item.asset {
+  .list.loft .items {
+    font-size: 1em;
+    padding-top: 1.5em;
+  }
+
+  .list.loft .item {
+    @include no-bottom-border;
+    background-color: $white-color;
+    box-shadow: 0 0 1px rgba(0,0,0,0.15);
+    margin: 0 auto;
+    max-width: 44em;
+  }
+
+  .list.loft .items .item.asset {
     padding-top: 19px; padding-bottom: 19px;
     .item-title {
       display: inline; cursor: pointer;
@@ -183,62 +184,66 @@
 
   // GRID MODE
   .assets-switch-mode {
-    @include position(absolute, null null null 1em);
-    display: inline; line-height: 2.5; left: 3em;
+    @include position(absolute, null 5.5em null null);
+    display: inline-block;
+    line-height: 2.5;
     i:first-child { color: $border-color; }
-    i:last-child { color: rgba($base-font-color, .4); }
+    i:last-child { color: rgba($base-font-color, 0.4); }
   }
+
   .loft.grid-mode .assets-switch-mode {
-    i:first-child { color: rgba($base-font-color, .4); }
+    i:first-child { color: rgba($base-font-color, 0.4); }
     i:last-child { color: $border-color; }
   }
 
-  .loft.grid-mode {
-    .list:not(:first-child) .items {
-      padding: 1em .25em 5em .75em;
-      .item.asset { margin: 0 .75em 1.5em; float: left; display: inline-block; }
-
-      .item.asset {
-        padding-left: 1em; width: 222px; height: 222px;
-        @include no-bottom-border; border: 1px solid rgba($base-font-color, .2); border-radius: 4px;
+  .loft.grid-mode .list .items {
+    padding: 1em .25em 5em .75em;
 
-        // checkbox: position + decoration
-        .asset-checkbox {
-          top: 10px; left: 10px; width: 24px; height: 24px; background: white;
-          box-shadow: 0 1px 0 rgba(0,0,0,0.05),1px 0 0 rgba(0,0,0,0.05); border-bottom-right-radius: 4px;
-        }
+    .item.asset { margin: 0 .75em 1.5em; float: left; display: inline-block; }
 
-        // thumbnail
-        .asset-icon {
-          @include position(absolute, 10px null null 10px);
-          width: 200px; height: 150px; background: white; border-radius: 0;
-          &:after { @include position(absolute, 0px 0px 0px 0px); box-shadow: 0 0 1px rgba(0,0,0,0.2) inset; content: ''; display: block; }
-        }
+    .item.asset {
+      padding-left: 1em; width: 222px; height: 222px;
+      @include no-bottom-border;
+      box-shadow: 0 0 1px rgba(0,0,0,0.2);
+      border-radius: 4px;
 
-        .asset-thumbnail-small  { display: none;  }
-        .asset-thumbnail-medium { display: block; }
+      // checkbox: position + decoration
+      .asset-checkbox {
+        top: 10px;
+        left: 10px;
+        width: 24px;
+        height: 24px;
+        background: $white-color;
+        box-shadow: 0 1px 0 rgba(0,0,0,0.05),1px 0 0 rgba(0,0,0,0.05);
+        border-bottom-right-radius: 4px;
+      }
 
-        // name & subtitle
-        .item-title { display: block; margin-top: 9.45em; }
-        .item-subtitle { display: block; position: initial; margin-top: .3em; }
-        &.edit-name .asset-name { top: inherit; bottom: 27px; left: 10px; right: 10px; }
+      // thumbnail
+      .asset-icon {
+        @include position(absolute, 10px null null 10px);
+        width: 200px; height: 150px; background: white; border-radius: 0;
+        &:after {
+          @include position(absolute, 0 0 0 0);
+          box-shadow: 0 0 1px rgba(0,0,0,0.2) inset;
+          content: '';
+          display: block;
+        }
       }
 
-      // asset type labels
-      .asset-text    .asset-icon { @include loft-icon-label('Text');    }
-      .asset-archive .asset-icon { @include loft-icon-label('Archive'); }
-      .asset-audio   .asset-icon { @include loft-icon-label('Audio');   }
-      .asset-video   .asset-icon { @include loft-icon-label('Video');   }
-      .asset-other   .asset-icon { @include loft-icon-label('File');    }
-    }
-  }
-}
+      .asset-thumbnail-small { display: none; }
+      .asset-thumbnail-medium { display: block; }
 
-/* Desktop ----------------------------------------------------------------- */
-@media #{$desktop} {
-  // BACK
-  .loft .list:not(:first-child) .back { display: none; }
+      // name & subtitle
+      .item-title { display: block; margin-top: 9.45em; }
+      .item-subtitle { display: block; position: initial; margin-top: .3em; }
+      &.edit-name .asset-name { top: inherit; bottom: 27px; left: 10px; right: 10px; }
+    }
 
-  // GRID MODE
-  .assets-switch-mode { left: 1em; }
+    // asset type labels
+    .asset-text .asset-icon { @include loft-icon-label('Text'); }
+    .asset-archive .asset-icon { @include loft-icon-label('Archive'); }
+    .asset-audio .asset-icon { @include loft-icon-label('Audio'); }
+    .asset-video .asset-icon { @include loft-icon-label('Video'); }
+    .asset-other .asset-icon { @include loft-icon-label('File'); }
+  }
 }

data/app/controllers/admin/assets_controller.rb

@@ -1,5 +1,9 @@
-class Admin::AssetsController < Admin::BaseController
-  mongosteen
+module Admin
+  class AssetsController < Admin::BaseController
+    mongosteen
 
-  has_scope :by_type
+    has_scope :by_type
+    has_scope :images, type: :boolean
+    has_scope :not_images, type: :boolean
+  end
 end

data/app/models/concerns/loft_asset.rb

@@ -1,20 +1,13 @@
-require 'autoinc'
-
 module LoftAsset
   extend ActiveSupport::Concern
-
   included do
-
     include Mongoid::Timestamps
     include Mongoid::Autoinc
     include Mongoid::Search
-
     include Ants::Id
-
     include ActionView::Helpers::DateHelper
     include ActionView::Helpers::NumberHelper
 
-
     ## Attributes
     field :name,           default: ''
     field :filename,       default: ''
@@ -31,43 +24,36 @@ module LoftAsset
     field :_number, type: Integer
     increments :_number
 
-
     ## Uploaders
     mount_uploader :file, AssetFileUploader
 
-
     ## Validations
     validates :file, presence: true
 
-
     ## Search
     search_in :name, :filename
 
-
     ## Scopes
-    default_scope   -> { desc(:created_at) }
+    default_scope -> { desc(:created_at) }
     scope :by_type, -> asset_type { where(type: asset_type) }
-
+    scope :images, -> { where(type: "image") }
+    scope :not_images, -> { where(:type.ne => "image" ) }
 
     ## Indexes
     index({ created_at: -1 })
 
-
     ## Callbacks
     before_save :update_asset_attributes
 
-
     ## Helpers
     def _list_item_title
       name
     end
 
-
     def _list_item_subtitle
       time_ago_in_words(self.created_at) + " ago"
     end
 
-
     def _list_item_thumbnail
       if is_image?
         { medium: file._200x150_2x.url, small: file._40x40_2x.url }
@@ -76,49 +62,41 @@ module LoftAsset
       end
     end
 
-
     def content_type
       @content_type ||= file.content_type
     end
 
-
     def is_image?
       return false unless file?
       content_type.match(/image\//) ? true : false
     end
 
-
     def is_text?
       return false unless file?
       content_type.match(/text\//) ? true : false
     end
 
-
     def is_pdf?
       return false unless file?
       content_type.match(/pdf/) ? true : false
     end
 
-
     def is_archive?
       return false unless file?
       # need to add more archive types: rar, gz, bz2, gzip
       content_type.match(/zip/) ? true : false
     end
 
-
     def is_audio?
       return false unless file?
       content_type.match(/audio\//) ? true : false
     end
 
-
     def is_video?
       return false unless file?
       content_type.match(/video\//) ? true : false
     end
 
-
     def update_asset_attributes
       if file.present? && file_changed?
 
@@ -144,6 +122,5 @@ module LoftAsset
       self.name = self.name.empty? ? self.filename : self.name
     end
     private :update_asset_attributes
-
   end
 end

data/lib/loft.rb

@@ -1,13 +1,15 @@
-require 'chr'
-require 'ants'
-require 'mongosteen'
-require 'mini_magick'
-require 'mongoid_search'
-require 'mongoid-grid_fs'
-require 'carrierwave/mongoid'
+require "chr"
+require "ants"
+require "mongosteen"
+require "mini_magick"
+require "mongoid_search"
+require "mongoid-grid_fs"
+require "carrierwave/mongoid"
+require "autoinc"
 
 module Loft
   class Engine < ::Rails::Engine
-    require 'loft/engine'
+    require "loft/engine"
+    require "loft/routing"
   end
 end

data/lib/loft/routing.rb

@@ -0,0 +1,7 @@
+module ActionDispatch::Routing
+  class Mapper
+    def mount_loft_assets_crud
+      resources :assets, controller: 'assets'
+    end
+  end
+end

data/lib/loft/version.rb

@@ -1,3 +1,3 @@
 module Loft
-  VERSION = "0.2.9"
+  VERSION = "0.3.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: loft
 version: !ruby/object:Gem::Version
-  version: 0.2.9
+  version: 0.3.0
 platform: ruby
 authors:
 - Alexander Kravets
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-11-27 00:00:00.000000000 Z
+date: 2015-12-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: chr
@@ -181,6 +181,7 @@ files:
 - app/uploaders/asset_file_uploader.rb
 - lib/loft.rb
 - lib/loft/engine.rb
+- lib/loft/routing.rb
 - lib/loft/version.rb
 - loft.gemspec
 homepage: http://slatestudio.com