lalala 4.1.0.dev.322 → 4.1.0.dev.324

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ec7fac739486a98458afa0231c3d4cae6b1cdce2
-  data.tar.gz: 9827f80097cf0d9c94e3e8ebf533d4ec769e7ce3
+  metadata.gz: 0fd9c3d041be7883f1e339e76504fe7da24a6f5c
+  data.tar.gz: 77df2687bd1950d45d43e579b27b16371abcd917
 SHA512:
-  metadata.gz: c4c889f6b37ca982eb6921baf44f409ef2b2ca028a82afa78a25ad5fb8e2483f3b07dc7e8fe3e28dc200ce3ee28f6048e5751e5eb711fb313c27b28541812aab
-  data.tar.gz: bdbc26d54a8d7323bc8d01de1dd512a9e7d1e928cfc8bb54c5c5cca30be89023ae5be059a498a09af5ba5f19fa311c95dba5ada5c8b7cd911cef09632a090043
+  metadata.gz: 30745adbc31c0ef5bc0ba9a96994376866d3eebe827791ca6590f1553bcfdc6fa4bac0ebc97c3fd1ddf5ba86c4bc9e4a60bd762b64649642871c27549f298404
+  data.tar.gz: dcebce27e01f21076000b67f7be1175fa66c59558f2f9cf2c34ebfe305a95cd510c08384a38f433962e915406a762eceee27657e9b5cfce6da74c51d55717156

data/app/assets/javascripts/lalala/modules/multiple-files-uploader.module.js

@@ -210,6 +210,9 @@ MultipleFilesUploader.prototype.file_done_handler = function(e) {
   this.$el.removeClass("processing");
   this.$el.addClass("uploaded");
 
+  // title
+  this.$el.find(".title").html(this.metadata.file_name);
+
   // attr
   var id = this.$el.find("input[name$=\"[id]\"]").val();
   if (id) this.$el.attr("data-src-original", "//c.assets.sh/" + id + "/thumb");

data/app/assets/javascripts/lalala/modules/single-file-uploader.module.js

@@ -109,6 +109,7 @@ SingleFileUploader.prototype.file_done_handler = function(e) {
 
   this.$el.removeClass("processing");
   this.$el.addClass("uploaded");
+  this.$el.find(".content > .title > .name").html(this.metadata.file_name);
 };
 
 

data/app/assets/stylesheets/lalala/modules/_multiple-file-uploader.css.scss

@@ -45,8 +45,8 @@ x-files[multiple-files] {
     border-right: 1px solid #E2E2E2;
     float: left;
     width: 40%;
-    width: -webkit-calc(40% - 1px);
-    width: calc(40% - 1px);
+
+    @include calc(width, "40% - 1px");
 
     .name {
       padding-left: 4px;
@@ -167,7 +167,10 @@ x-files[multiple-files] {
   //  X-file -- Menu
   //
   x-file .menu {
+    bottom: 6px;
+    left: 8px;
     display: none;
+    position: absolute;
 
     a {
       background-position: center;
@@ -216,6 +219,7 @@ x-files[multiple-files] {
     > div {
       left: 0;
       top: 0;
+      width: 0;
     }
   }
 

data/app/assets/stylesheets/lalala/modules/_single-file-uploader.css.scss

@@ -8,6 +8,7 @@ x-files[single-file] {
   color: #6F6F71;
   display: block;
   font-size: 12px;
+  font-weight: bold;
   height: 38px;
   line-height: 38px;
   margin: 31px 0 45px;
@@ -30,7 +31,6 @@ x-files[single-file] {
   .association {
     display: inline-block;
     font-size: 14px;
-    font-weight: bold;
     line-height: 16px;
     margin-left: 2px;
     position: relative;
@@ -63,7 +63,6 @@ x-files[single-file] {
     color: #CDCDCD;
     cursor: pointer;
     display: inline-block;
-    font-weight: bold;
     line-height: 24px;
     padding-left: 22px;
     padding-top: 2px;
@@ -80,14 +79,16 @@ x-files[single-file] {
   //
   .content {
     @include calc(width, "80% - 101px - 26px");
+    height: 38px;
     position: absolute;
     right: 0;
     top: 0;
   }
 
+  // image
   .image {
     float: left;
-    height: 38px;
+    height: 100%;
     width: 58px;
   }
 
@@ -117,14 +118,116 @@ x-files[single-file] {
     );
   }
 
+  // title
+  .title {
+    color: #a3a3a3;
+    float: left;
+    margin: 0 19px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 120px;
+
+    .name {
+      display: none;
+    }
+  }
+
+  // status
+  .status {
+    display: none;
+    float: right;
+    height: 100%;
+    position: relative;
+
+    @include calc(width, "100% - 58px - 120px - (2 * 19px)");
+
+    .status-bar {
+      background-color: #e2e2e2;
+      height: 1px;
+      left: 0;
+      margin-top: -1px;
+      position: absolute;
+      right: 0;
+      top: 50%;
+    }
+
+    .status-bar > div {
+      height: 1px;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 0;
+    }
+
+    .status-bar .upload-bar {
+      background-color: #FFC914;
+      box-shadow: 0 0 9px rgba(#FFC914, .75);
+      z-index: 1;
+    }
+
+    .status-bar .process-bar {
+      background-color: #36F269;
+      box-shadow: 0 0 9px rgba(#36F269, .75);
+      z-index: 2;
+    }
+  }
+
+  // actions
+  .actions {
+    border-left: 1px solid #E2E2E2;
+    display: none;
+    float: left;
+    padding-left: 19px;
+  }
+
 
   //
   //  Statusses
   //
+  &.waiting .title:after {
+    content: "Waiting...";
+  }
+
+  &.uploading .title:after {
+    content: "Uploading...";
+  }
+
+  &.processing .title:after {
+    content: "Processing...";
+  }
+
+  &.waiting,
+  &.uploading,
+  &.processing { .status {
+    display: block;
+  }}
+
+  // uploaded
   &.uploaded .image canvas,
   &.uploaded .image img {
     opacity: 1;
   }
 
+  &.uploaded .title {
+    @include calc(width, "100% - 260px");
+
+    .name {
+      display: block;
+    }
+  }
+
+  // error
+  &.error {
+    .status .status-bar {
+      background-color: $red;
+    }
+
+    .status .upload-bar,
+    .status .process-bar {
+      display: none;
+    }
+  }
+
 
 }

data/lib/formtastic/inputs/multiple_files_input.rb

@@ -141,6 +141,10 @@ class Formtastic::Inputs::MultipleFilesInput
       #{ template.hidden_field_tag(param_key + "[][id]", asset.id) }
       #{ template.hidden_field_tag(param_key + "[][_destroy]", "") }
 
+      <div class="title">
+        #{ asset.file_name }
+      </div>
+
       <div class="attributes">
         #{ input.asset_attributes_form(template, param_key, asset) }
       </div>

data/lib/formtastic/inputs/single_file_input.rb

@@ -11,10 +11,11 @@ class Formtastic::Inputs::SingleFileInput
     accepts = defn.profile.try(:accepted_file_types)
     accepts = accepts.join(", ") if accepts
     versions = compile_versions_array(defn.profile)
+    css_class = asset ? "uploaded" : ""
 
     <<-HTML
 
-    <x-files single-file profile="#{defn.profile.name}" accept="#{accepts}" name="#{param_key}">
+    <x-files single-file profile="#{defn.profile.name}" accept="#{accepts}" name="#{param_key}" class="#{css_class}">
       <div class="association">#{ title }</div>
 
       <div class="buttons">
@@ -23,14 +24,21 @@ class Formtastic::Inputs::SingleFileInput
 
       <div class="content">
         <div class="image">#{ asset ? image_html(asset, versions) : "" }</div>
+        <div class="title">
+          <span class="name">
+            #{ asset ? asset.file_name : "" }
+          </span>
+        </div>
         <div class="status">
-          <div class="status-title"></div>
           <div class="status-bar">
             <div class="upload-bar"></div>
             <div class="process-bar"></div>
           </div>
         </div>
-        <div class="name"></div>
+        <div class="actions">
+          <a data-action="delete"></a>
+          <a data-action="meta"></a>
+        </div>
       </div>
     </x-files>
 

data/lib/lalala/version.rb

@@ -1,6 +1,6 @@
 module Lalala
   VERSION = "4.1.0"
-  BUILD   = "322"
+  BUILD   = "324"
 
   if BUILD != ("{{BUILD_NUMBER" + "}}") # prevent sed replacement (see script/ci)
     BUILD_VERSION = "#{VERSION}.dev.#{BUILD}"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lalala
 version: !ruby/object:Gem::Version
-  version: 4.1.0.dev.322
+  version: 4.1.0.dev.324
 platform: ruby
 authors:
 - Simon Menke