You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@sling.apache.org by je...@apache.org on 2018/09/04 16:41:39 UTC
[sling-org-apache-sling-app-cms] branch SLING-7858 updated: file
upload styling
This is an automated email from the ASF dual-hosted git repository.
jeb pushed a commit to branch SLING-7858
in repository https://gitbox.apache.org/repos/asf/sling-org-apache-sling-app-cms.git
The following commit(s) were added to refs/heads/SLING-7858 by this push:
new f96ea78 file upload styling
f96ea78 is described below
commit f96ea7897e3ab8bcc5da80f5e9d3cb6897e8d0c9
Author: JE Bailey <je...@apache.org>
AuthorDate: Tue Sep 4 12:27:33 2018 -0400
file upload styling
---
ui/src/main/frontend/src/js/cms.js | 9 ++++
.../components/editor/fields/file/field.jsp | 48 ++++++++++++++++------
2 files changed, 45 insertions(+), 12 deletions(-)
diff --git a/ui/src/main/frontend/src/js/cms.js b/ui/src/main/frontend/src/js/cms.js
index d544bc5..0688808 100644
--- a/ui/src/main/frontend/src/js/cms.js
+++ b/ui/src/main/frontend/src/js/cms.js
@@ -490,6 +490,15 @@ Sling.CMS = {
})
}
};
+
+ Sling.CMS.ext['file-upload'] = {
+ decorate: function($ctx) {
+ $ctx.find('.file').on('change', "input", function(){
+ var node = $(this);
+ node.parent().find('.file-name').text(this.files[0].name);
+ });
+ }
+ };
$(document).ready(function() {
Sling.CMS.init();
diff --git a/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/fields/file/field.jsp b/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/fields/file/field.jsp
index 2da4a5b..a6f8e2f 100644
--- a/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/fields/file/field.jsp
+++ b/ui/src/main/resources/jcr_root/libs/sling-cms/components/editor/fields/file/field.jsp
@@ -28,23 +28,47 @@
<div class="repeating">
<div disabled="disabled" class="repeating__template is-hidden">
<div class="repeating__item Grid">
- <div class="Cell Mobile-80">
- <input type="file" name="${properties.name}" ${required} accept="${accepts}" />
- </div>
- <div class="Cell Mobile-20">
- <button class="repeating__remove">-</button>
- </div>
+ <div class="file has-name is-fullwidth">
+ <label class="file-label">
+ <input type="file" class="file-input" name="${properties.name}" ${required} accept="${accepts}" />
+ <span class="file-cta">
+ <span class="file-icon">
+ <i class="jam jam-upload"></i>
+ </span>
+ <span class="file-label">
+ Browse
+ </span>
+ </span>
+ <span class="file-name">
+ No File Selected
+ </span>
+ <span class='control'>
+ <span class="button repeating__remove button">-</span>
+ </span>
+ </label>
+ </div>
</div>
</div>
<div class="repeating__container">
<div class="repeating__item Grid">
- <div class="Cell Mobile-80">
- <input type="file" name="${properties.name}" ${required} accept="${accepts}" />
+ <div class="file has-name is-fullwidth">
+ <label class="file-label">
+ <input type="file" class="file-input" name="${properties.name}" ${required} accept="${accepts}" />
+ <span class="file-cta">
+ <span class="file-icon">
+ <i class="jam jam-upload"></i>
+ </span>
+ <span class="file-label">
+ Browse
+ </span>
+ </span>
+ <span class="file-name">
+ No File Selected
+ </span>
+ <span class="button repeating__remove button">-</span>
+ </label>
</div>
- <div class="Cell Mobile-20">
- <button class="repeating__remove">-</button>
- </div>
</div>
</div>
- <button class="repeating__add">+</button>
+ <button class="repeating__add button">+</button>
</div>
\ No newline at end of file