ENHANCEMENT: UI Changes to FileUpload Area (TRAC-7219)
1. Add arrows to edit dropdowns 2. Adjust lightened fields so they don't look like input boxes, and fix rgba colours 3. Add ability to click file names to edit 4. Add feedback when edit button is hovered 5. Add feedback if a file has been opened for editing and shut again (saved changes, unsaved changes, unchanged) 6. Add ability to open and close all files to edit them all at once 7. Add overall feedback for file uploads, and fix NaN error 8. Fix up area to match design 9. Fix error messages so they fit in the provided space 10. Fix case where a single uploaded file errors
This commit is contained in:
Naomi Guyer
parent
7d5e46cdcf
commit
d642eee28e
|
|
@ -33,6 +33,14 @@ If more variables exist in the future, consider creating a variables file.*/
|
|||
/** ---------------------------------------------------- Hides the overflowing text from a container Note: you must define a width on the element with this overflow. ----------------------------------------------------- */
|
||||
/** ---------------------------------------------------- Clear the properties of sub form fields. Often needed for nested form fields and ----------------------------------------------------- */
|
||||
/** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
|
||||
/**----------------------------------------------------
|
||||
Clearfix mixin clears the float of it's parent element
|
||||
----------------------------------------------------**/
|
||||
/**
|
||||
Mixin creates a transparent button with a dropdown arrow,
|
||||
as is used for files in the files up-load area. The arrows
|
||||
themselves are added in the _style file
|
||||
**/
|
||||
/** ----------------------------- Sprite images ----------------------------- */
|
||||
/** Helper SCSS file for generating sprites for the interface. */
|
||||
.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-arrow-circle-double, .ui-state-default .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-state-default .btn-icon-document--pencil, .ui-state-default .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-grid_print, .ui-state-default .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled { background: url('../images/btn-icon-s6f28ccb4de.png') no-repeat; }
|
||||
|
|
|
|||
|
|
@ -61,6 +61,10 @@
|
|||
box-shadow: $shadow $outerColor;
|
||||
}
|
||||
|
||||
|
||||
/**----------------------------------------------------
|
||||
Clearfix mixin clears the float of it's parent element
|
||||
----------------------------------------------------**/
|
||||
@mixin clearfix{
|
||||
&:after{
|
||||
content: ".";
|
||||
|
|
@ -71,3 +75,50 @@
|
|||
}
|
||||
*:first-child &{ zoom:1;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
Mixin creates a transparent button with a dropdown arrow,
|
||||
as is used for files in the files up-load area. The arrows
|
||||
themselves are added in the _style file
|
||||
**/
|
||||
@mixin ss-uploadfield-editButton{
|
||||
&.ss-uploadfield-item-edit {
|
||||
opacity:0.9;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 0;
|
||||
height:100%;
|
||||
@include border-radius(0);
|
||||
&.ui-state-hover{
|
||||
background:none;
|
||||
opacity:1;
|
||||
span.toggle-details{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
span.toggle-details{
|
||||
opacity:0.9;
|
||||
margin-left:3px;
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
.toggle-details-icon {
|
||||
margin-top:1px;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
vertical-align: middle;
|
||||
&.opened {
|
||||
margin-top:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.ui-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,29 +4,62 @@
|
|||
/** ----------------------------------------------- Typography. ------------------------------------------------ */
|
||||
/** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */
|
||||
/** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */
|
||||
/** This file contains generic mixins which we use throughout the admin panels. Mixins should be stored here rather than individual files so that we can keep. */
|
||||
/** ---------------------------------------------------- Hides the overflowing text from a container Note: you must define a width on the element with this overflow. ----------------------------------------------------- */
|
||||
/** ---------------------------------------------------- Clear the properties of sub form fields. Often needed for nested form fields and ----------------------------------------------------- */
|
||||
/** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
|
||||
/**----------------------------------------------------
|
||||
Clearfix mixin clears the float of it's parent element
|
||||
----------------------------------------------------**/
|
||||
/**
|
||||
Mixin creates a transparent button with a dropdown arrow,
|
||||
as is used for files in the files up-load area. The arrows
|
||||
themselves are added in the _style file
|
||||
**/
|
||||
#AssetUploadField { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
|
||||
|
||||
body.cms.ss-uploadfield-edit-iframe { padding: 16px; overflow: auto; }
|
||||
body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #6a6a6a; }
|
||||
body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #777777; text-shadow: 0px 1px 0px #fff; }
|
||||
|
||||
.ss-uploadfield-edit-iframe { background: #E2E2E2; }
|
||||
|
||||
.ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; }
|
||||
.ss-assetuploadfield .field { border-bottom: 0; box-shadow: none; }
|
||||
.ss-assetuploadfield .fileOverview { clear: both; margin-top: 10px; margin-bottom: 5px; padding-bottom: 5px; height: 50px; position: relative; }
|
||||
.ss-assetuploadfield .fileOverview .ss-ui-button { position: absolute; bottom: 0; background: none; border: 0; right: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; color: #444444; }
|
||||
.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit, .ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
|
||||
.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover, .ss-assetuploadfield .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all { background: none; opacity: 1; }
|
||||
.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover span.toggle-details, .ss-assetuploadfield .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all span.toggle-details { opacity: 1; }
|
||||
.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit span.toggle-details, .ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details { opacity: 0.9; margin-left: 3px; display: inline-block; width: 5px; height: 100%; cursor: pointer; }
|
||||
.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon, .ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon { margin-top: 1px; display: inline-block; width: 8px; height: 8px; vertical-align: middle; }
|
||||
.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon.opened, .ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon.opened { margin-top: 0; }
|
||||
.ss-assetuploadfield .fileOverview .ss-ui-button .ui-icon { display: none; }
|
||||
.ss-assetuploadfield .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all { height: auto; }
|
||||
.ss-assetuploadfield .fileOverview .state { font-size: 16px; font-weight: bold; line-height: 20px; margin-bottom: 5px; }
|
||||
.ss-assetuploadfield .fileOverview .details { color: #6a6a6a; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files { margin: 0; padding: 0; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item { border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding; -o-background-clip: padding-box; -ms-background-clip: padding-box; -khtml-background-clip: padding-box; background-clip: padding-box; margin: 0 0 5px; padding: 0; overflow: hidden; position: relative; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview { position: absolute; height: 30px; width: 40px; overflow: hidden; z-index: 1; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-info { position: relative; height: 30px; overflow: hidden; background-color: #5db4df; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5db4df), color-stop(8%, #5db1dd), color-stop(50%, #439bcb), color-stop(54%, #3f99cd), color-stop(96%, #207db6), color-stop(100%, #1e7cba)); background-image: -webkit-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -moz-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -o-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -ms-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c11f1d), color-stop(4%, #bf1d1b), color-stop(8%, #b71b1c), color-stop(15%, #b61e1d), color-stop(27%, #b11d1d), color-stop(31%, #ab1d1c), color-stop(42%, #a51b1b), color-stop(46%, #9f1b19), color-stop(50%, #9f1b19), color-stop(54%, #991c1a), color-stop(58%, #971a18), color-stop(62%, #911b1b), color-stop(65%, #911b1b), color-stop(88%, #7e1816), color-stop(92%, #771919), color-stop(100%, #731817)); background-image: -webkit-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -moz-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -o-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: -ms-linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); background-image: linear-gradient(top, #c11f1d 0%, #bf1d1b 4%, #b71b1c 8%, #b61e1d 15%, #b11d1d 27%, #ab1d1c 31%, #a51b1b 42%, #9f1b19 46%, #9f1b19 50%, #991c1a 54%, #971a18 58%, #911b1b 62%, #911b1b 65%, #7e1816 88%, #771919 92%, #731817 100%); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 40%; color: #777777; background: #eeeded; border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; display: block; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name b { font-weight: bold; padding: 0 5px 0 0; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name span { font-size: 11px; color: #848484; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-status.ui-state-error-text { color: red; font-weight: bold; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { cursor: default; background: #bcb9b9; background: rgba(201, 198, 198, 0.9); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ui-state-warning .ss-uploadfield-item-info { background-color: #ff9300; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eba547), color-stop(8%, #e89a30), color-stop(50%, #e68f19), color-stop(54%, #e68e19), color-stop(96%, #e17519), color-stop(100%, #dc6718)); background-image: -webkit-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -moz-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -o-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: -ms-linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); background-image: linear-gradient(top, #eba547 0%, #e89a30 8%, #e68f19 50%, #e68e19 54%, #e17519 96%, #dc6718 100%); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name { position: relative; z-index: 1; margin: 3px 0 3px 50px; width: 40%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; display: block; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); display: inline; float: left; max-width: 40%; font-weight: normal; padding: 0 5px 0 0; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status { float: right; padding: 0 0 0 5px; max-width: 30%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); color: #cc0000; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #cc7600; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; color: #f00; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button { background: none; border: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-delete { display: none; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit { padding-top: 0; padding-bottom: 0; line-height: 30px; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all { background: none; opacity: 1; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover span.toggle-details, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all span.toggle-details, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ui-state-hover.ss-uploadfield-item-edit-all span.toggle-details { opacity: 1; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit span.toggle-details, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details { opacity: 0.9; margin-left: 3px; display: inline-block; width: 5px; height: 100%; cursor: pointer; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon { margin-top: 1px; display: inline-block; width: 8px; height: 8px; vertical-align: middle; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit span.toggle-details .toggle-details-icon.opened, .ss-assetuploadfield .ss-uploadfield-files .fileOverview .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon.opened, .ss-assetuploadfield .fileOverview .ss-uploadfield-files .ss-ui-button.ss-uploadfield-item-edit-all span.toggle-details .toggle-details-icon.opened { margin-top: 0; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-ui-button .ui-icon { display: none; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { width: 100%; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; height: 30px; padding: 0; margin: 0; overflow: hidden; width: 100%; }
|
||||
|
|
@ -36,10 +69,12 @@ body.cms.ss-uploadfield-edit-iframe span.readonly { font-style: italic; color: #
|
|||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 19px 0 0; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 34px 0 0; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label { width: 300px; height: 30px; font-size: 14px; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label.ui-state-focus { -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; display: none; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -o-box-shadow: #9a9a9a 0 0 3px 3px inset; box-shadow: #9a9a9a 0 0 3px 3px inset; border: 2px dashed gray; background: rgba(201, 205, 206, 0.8); display: none; height: 66px; width: 300px; float: left; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone.active.hover { -moz-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; -webkit-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; -o-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 3px inset; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { z-index: 1; padding: 15px 0 0; line-height: 22px; font-size: 20px; font-weight: bold; text-align: center; display: block; margin: 0 auto; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { display: block; font-size: 12px; z-index: -1; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; margin-top: 16px; display: none; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { margin-top: 9px; -moz-border-radius: 13px; -webkit-border-radius: 13px; -o-border-radius: 13px; -ms-border-radius: 13px; -khtml-border-radius: 13px; border-radius: 13px; -moz-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; -webkit-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; -o-box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; box-shadow: rgba(128, 128, 128, 0.3) 0 0 3px 2px inset; border: 2px dashed gray; background: #d4dbe0; display: none; height: 82px; width: 408px; float: left; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone.active.hover { -moz-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -webkit-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -o-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { color: #5e5e5e; text-shadow: 0px 1px 0px #fff; background: url("../images/upload.png") 0 25px no-repeat; width: 230px; z-index: 1; padding: 20px 0 0; line-height: 25px; font-size: 25px; font-weight: bold; text-align: center; display: block; margin: 0 auto; }
|
||||
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { display: block; font-size: 14px; z-index: -1; }
|
||||
|
|
|
|||
|
|
@ -349,23 +349,22 @@ class UploadField extends FileField {
|
|||
$allowedExtensions = $this->getValidator()->getAllowedExtensions();
|
||||
$config['acceptFileTypes'] = '(\.|\/)(' . implode('|', $allowedExtensions) . ')$';
|
||||
$config['errorMessages']['acceptFileTypes'] = _t(
|
||||
'File.INVALIDEXTENSION',
|
||||
'Extension is not allowed (valid: {extensions})',
|
||||
array('extensions' => wordwrap(implode(', ', $allowedExtensions)))
|
||||
'File.INVALIDEXTENSIONSHORT',
|
||||
'Extension is not allowed'
|
||||
);
|
||||
}
|
||||
if ($this->getValidator()->getAllowedMaxFileSize()) {
|
||||
$config['maxFileSize'] = $this->getValidator()->getAllowedMaxFileSize();
|
||||
$config['errorMessages']['maxFileSize'] = _t(
|
||||
'File.TOOLARGE',
|
||||
'Filesize is too large, maximum {size} allowed.',
|
||||
'File.TOOLARGESHORT',
|
||||
'Filesize exceeds {size}',
|
||||
array('size' => File::format_size($config['maxFileSize']))
|
||||
);
|
||||
}
|
||||
if ($config['maxNumberOfFiles'] > 1) {
|
||||
$config['errorMessages']['maxNumberOfFiles'] = _t(
|
||||
'UploadField.MAXNUMBEROFFILES',
|
||||
'Max number of {count} file(s) exceeded.',
|
||||
'UploadField.MAXNUMBEROFFILESSHORT',
|
||||
'Can only upload {count} files',
|
||||
array('count' => $config['maxNumberOfFiles'])
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,22 +21,57 @@
|
|||
var firstNewFile = this._files.find('.ss-uploadfield-item').slice(data.files.length*-1).first();
|
||||
var top = '+=' + (firstNewFile.position().top - parseInt(firstNewFile.css('marginTop')) || 0 - parseInt(firstNewFile.css('borderTopWidth')) || 0);
|
||||
firstNewFile.offsetParent().animate({scrollTop: top}, 1000);
|
||||
|
||||
/* Compute total size of files */
|
||||
var fSize = 0;
|
||||
for(var i = 0; i < data.files.length; i++){
|
||||
if(typeof data.files[i].size === 'number'){
|
||||
fSize = fSize + data.files[i].size;
|
||||
}
|
||||
}
|
||||
|
||||
$('.fileOverview .uploadStatus .details .total').text(data.files.length);
|
||||
if(typeof fSize === 'number' && fSize > 0){
|
||||
fSize = this._formatFileSize(fSize);
|
||||
$('.fileOverview .uploadStatus .details .fileSize').text(fSize);
|
||||
}
|
||||
|
||||
//Fixes case where someone uploads a single erroring file
|
||||
if(data.files.length == 1 && data.files[0].error !== null){
|
||||
$('.ss-uploadfield-editandorganize').show();
|
||||
$('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.UploadField.UPLOADFAIL', 'Sorry your upload failed'));
|
||||
}else{
|
||||
$('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.UPLOADINPROGRESS', 'Please wait… upload in progress'));//.show();
|
||||
$('.fileOverview button').hide();
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
},
|
||||
_onAlways: function (jqXHRorResult, textStatus, jqXHRorError, options) {
|
||||
$.blueimpUI.fileupload.prototype._onAlways.call(this, jqXHRorResult, textStatus, jqXHRorError, options);
|
||||
if (this._active === 0) {
|
||||
this._trigger('stop');
|
||||
$('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.FILEUPLOADCOMPLETED', 'File Upload Completed!'));//.hide();
|
||||
$('.fileOverview button').show();
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$.entwine('ss', function($) {
|
||||
|
||||
$('div.ss-upload').entwine({
|
||||
|
||||
Config: null,
|
||||
|
||||
onmatch: function() {
|
||||
|
||||
|
||||
if(this.is('.readonly,.disabled')) return;
|
||||
|
||||
var fileInput = this.find('input');
|
||||
var dropZone = this.find('.ss-uploadfield-dropzone');
|
||||
var config = $.parseJSON(fileInput.data('config').replace(/'/g,'"'));
|
||||
|
||||
var config = $.parseJSON(fileInput.data('config').replace(/'/g,'"'));
|
||||
|
||||
/* Attach classes to dropzone when element can be dropped*/
|
||||
$(document).unbind('dragover');
|
||||
|
|
@ -85,10 +120,10 @@
|
|||
5: ss.i18n._t('UploadField.NOTMPFOLDER'),
|
||||
6: ss.i18n._t('UploadField.WRITEFAILED'),
|
||||
7: ss.i18n._t('UploadField.STOPEDBYEXTENSION'),
|
||||
maxFileSize: ss.i18n._t('UploadField.TOOLARGE'),
|
||||
maxFileSize: ss.i18n._t('UploadField.TOOLARGESHORT'),
|
||||
minFileSize: ss.i18n._t('UploadField.TOOSMALL'),
|
||||
acceptFileTypes: ss.i18n._t('UploadField.INVALIDEXTENSION'),
|
||||
maxNumberOfFiles: ss.i18n._t('UploadField.MAXNUMBEROFFILESSIMPLE'),
|
||||
acceptFileTypes: ss.i18n._t('UploadField.INVALIDEXTENSIONSHORT'),
|
||||
maxNumberOfFiles: ss.i18n._t('UploadField.MAXNUMBEROFFILESSHORT'),
|
||||
uploadedBytes: ss.i18n._t('UploadField.UPLOADEDBYTES'),
|
||||
emptyResult: ss.i18n._t('UploadField.EMPTYRESULT')
|
||||
},
|
||||
|
|
@ -106,7 +141,7 @@
|
|||
if (data.context) {
|
||||
var value = parseInt(data.loaded / data.total * 100, 10) + '%';
|
||||
data.context.find('.ss-uploadfield-item-status').html((data.total == 1)?ss.i18n._t('UploadField.LOADING'):value);
|
||||
data.context.find('.ss-uploadfield-item-progressbarvalue').css('width', value);
|
||||
data.context.find('.ss-uploadfield-item-progressbarvalue').css('width', value);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -123,6 +158,8 @@
|
|||
dropZone.show(); // drag&drop avaliable
|
||||
|
||||
}
|
||||
|
||||
|
||||
this._super();
|
||||
},
|
||||
|
||||
|
|
@ -204,6 +241,8 @@
|
|||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$('div.ss-upload .ss-uploadfield-item-remove:not(.ui-state-disabled), .ss-uploadfield-item-delete:not(.ui-state-disabled)').entwine({
|
||||
onclick: function(e) {
|
||||
var fileupload = this.closest('div.ss-upload').data('fileupload'),
|
||||
|
|
@ -222,18 +261,57 @@
|
|||
return false;
|
||||
}
|
||||
});
|
||||
$('div.ss-upload .ss-uploadfield-item-edit').entwine({
|
||||
|
||||
$('div.ss-upload .fileOverview .ss-uploadfield-item-edit-all').entwine({
|
||||
onclick: function(e) {
|
||||
|
||||
if($(this).hasClass('opened')){
|
||||
$('.ss-uploadfield-item .ss-uploadfield-item-edit .toggle-details-icon.opened').each(function(i){
|
||||
$(this).closest('.ss-uploadfield-item-edit').click();
|
||||
});
|
||||
$(this).removeClass('opened').find('.toggle-details-icon').removeClass('opened');
|
||||
}else{
|
||||
$('.ss-uploadfield-item .ss-uploadfield-item-edit .toggle-details-icon').each(function(i){
|
||||
if(!$(this).hasClass('opened')){
|
||||
$(this).closest('.ss-uploadfield-item-edit').click();
|
||||
}
|
||||
});
|
||||
$(this).addClass('opened').find('.toggle-details-icon').addClass('opened');
|
||||
}
|
||||
|
||||
e.preventDefault(); // Avoid a form submit
|
||||
}
|
||||
});
|
||||
$('div.ss-upload .ss-uploadfield-item-edit, div.ss-upload .ss-uploadfield-item-name').entwine({
|
||||
onclick: function(e) {
|
||||
var editform = this.closest('.ss-uploadfield-item').find('.ss-uploadfield-item-editform');
|
||||
var disabled;
|
||||
var iframe = editform.find('iframe');
|
||||
var inputs = iframe.contents().find('.ss-uploadfield-edit-iframe input');
|
||||
|
||||
for(var i=0;i<inputs.length;i++){
|
||||
$(inputs[i]).change(function(){
|
||||
editform.addClass('edited');
|
||||
});
|
||||
}
|
||||
if (editform.hasClass('loading')) {
|
||||
// TODO Display loading indication, and register an event to toggle edit form
|
||||
} else {
|
||||
this.siblings().toggleClass('ui-state-disabled');
|
||||
if(this.hasClass('ss-uploadfield-item-edit')){
|
||||
disabled=this.siblings();
|
||||
}else{
|
||||
disabled=this.find('ss-uploadfield-item-edit').siblings();
|
||||
}
|
||||
editform.parent('.ss-uploadfield-item').removeClass('ui-state-warning');
|
||||
disabled.toggleClass('ui-state-disabled');
|
||||
editform.toggleEditForm();
|
||||
}
|
||||
e.preventDefault(); // Avoid a form submit
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('div.ss-upload .ss-uploadfield-item-editform').entwine({
|
||||
fitHeight: function() {
|
||||
var iframe = this.find('iframe'), padding = 32;
|
||||
|
|
@ -257,10 +335,36 @@
|
|||
|
||||
},
|
||||
toggleEditForm: function() {
|
||||
var itemInfo = this.prev('.ss-uploadfield-item-info'), status = itemInfo.find('.ss-uploadfield-item-status');
|
||||
var iframe = this.find('iframe').contents(), saved=iframe.find('#Form_EditForm_error');
|
||||
|
||||
if(this.height() === 0) {
|
||||
this.fitHeight();
|
||||
this.fitHeight();
|
||||
itemInfo.find('.toggle-details-icon').addClass('opened');
|
||||
status.removeClass('ui-state-success-text').removeClass('ui-state-warning-text').text("Editing...");
|
||||
iframe.find('#Form_EditForm_action_doEdit').click(function(){
|
||||
itemInfo.find('label .name').text(iframe.find('#Name input').val());
|
||||
});
|
||||
if($('div.ss-upload .ss-uploadfield-files .ss-uploadfield-item-actions .toggle-details-icon:not(.opened)').index() < 0){
|
||||
$('div.ss-upload .fileOverview .ss-uploadfield-item-edit-all').addClass('opened').find('.toggle-details-icon').addClass('opened');
|
||||
}
|
||||
|
||||
} else {
|
||||
this.height(0);
|
||||
itemInfo.find('.toggle-details-icon').removeClass('opened');
|
||||
$('div.ss-upload .fileOverview .ss-uploadfield-item-edit-all').removeClass('opened').find('.toggle-details-icon').removeClass('opened');
|
||||
if(!this.hasClass('edited')){
|
||||
status.addClass('ui-state-success-text').text(ss.i18n._t('UploadField.NOCHANGES', 'No Changes'));
|
||||
}else{
|
||||
if(saved.hasClass('good')){
|
||||
this.removeClass('edited').parent('.ss-uploadfield-item').removeClass('ui-state-warning');
|
||||
status.addClass('ui-state-success-text').text(ss.i18n._t('UploadField.CHANGESSAVED', 'Changes Saved'));
|
||||
}else{
|
||||
this.parent('.ss-uploadfield-item').addClass('ui-state-warning');
|
||||
status.addClass('ui-state-warning-text').text(ss.i18n._t('UploadField.UNSAVEDCHANGES', 'Unsaved Changes'));
|
||||
}
|
||||
}
|
||||
saved.removeClass('good').hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
@import "compass/css3";
|
||||
|
||||
|
||||
// TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
|
||||
@import "../admin/scss/themes/default.scss";
|
||||
|
||||
@import "../admin/scss/_mixins";
|
||||
|
||||
|
||||
#AssetUploadField {
|
||||
|
|
@ -15,7 +16,8 @@ body.cms.ss-uploadfield-edit-iframe {
|
|||
overflow: auto;
|
||||
span.readonly{
|
||||
font-style:italic;
|
||||
color:lighten($color-text, 15%);
|
||||
color:lighten($color-text, 20%);
|
||||
text-shadow: 0px 1px 0px #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -36,6 +38,39 @@ body.cms.ss-uploadfield-edit-iframe {
|
|||
border-bottom: 0;
|
||||
box-shadow:none;
|
||||
}
|
||||
.fileOverview{
|
||||
clear:both;
|
||||
margin-top:10px;
|
||||
margin-bottom:5px;
|
||||
padding-bottom:5px;
|
||||
height:50px;
|
||||
position:relative;
|
||||
.ss-ui-button {
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
background: none;
|
||||
border: 0;
|
||||
right:0;
|
||||
@include box-shadow(none);
|
||||
color: $color-text;
|
||||
@include ss-uploadfield-editButton;
|
||||
&.ss-uploadfield-item-edit-all {
|
||||
@extend .ss-uploadfield-item-edit;
|
||||
height:auto;
|
||||
}
|
||||
}
|
||||
|
||||
.state{
|
||||
font-size: 16px;
|
||||
font-weight:bold;
|
||||
line-height:20px;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
.details{
|
||||
color:lighten($color-text, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ss-uploadfield-files {
|
||||
margin: 0;
|
||||
|
|
@ -67,46 +102,80 @@ body.cms.ss-uploadfield-edit-iframe {
|
|||
.ui-state-error .ss-uploadfield-item-info {
|
||||
background-color: #c11f1d;
|
||||
@include background-image(linear-gradient(top, #c11f1d 0%,#bf1d1b 4%,#b71b1c 8%,#b61e1d 15%,#b11d1d 27%,#ab1d1c 31%,#a51b1b 42%,#9f1b19 46%,#9f1b19 50%,#991c1a 54%,#971a18 58%,#911b1b 62%,#911b1b 65%,#7e1816 88%,#771919 92%,#731817 100%));
|
||||
.ss-uploadfield-item-name{
|
||||
cursor:default;
|
||||
background:darken($color-button-disabled,20%); //for browsers that don't support rgba
|
||||
background: rgba(darken($color-button-disabled, 15%),0.9);
|
||||
.name {
|
||||
text-shadow: 0px 1px 0px rgba(#fff, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ui-state-warning .ss-uploadfield-item-info {
|
||||
background-color: $color-warning;
|
||||
@include background-image(
|
||||
linear-gradient(
|
||||
top,
|
||||
desaturate(lighten($color-warning, 10%), 20%) 0%,
|
||||
desaturate(lighten($color-warning, 5%), 20%) 8%,
|
||||
desaturate($color-warning, 20%) 50%,
|
||||
desaturate(darken(mix($color-warning, $color-button-destructive, 99%),0%), 20%) 54%,
|
||||
desaturate(darken(mix($color-warning, $color-button-destructive, 80%),1%), 20%) 96%,
|
||||
desaturate(darken(mix($color-warning, $color-button-destructive, 70%),2%), 20%) 100%)
|
||||
);
|
||||
}
|
||||
|
||||
.ss-uploadfield-item-name {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 3px 0 3px 50px;
|
||||
width: 40%;
|
||||
color:lighten($color-text, 20%);
|
||||
background: $color-button-disabled;
|
||||
border: 1px solid lighten($color-medium-separator, 20%);
|
||||
@include border-radius(5px);
|
||||
color:lighten($color-text, 10%);
|
||||
background:$color-button-disabled; //for browsers that don't support rgba
|
||||
background: rgba(#fff, 0.8);
|
||||
@include border-radius(3px);
|
||||
display: block;
|
||||
line-height: 24px;
|
||||
height: 22px;
|
||||
padding: 0 5px;
|
||||
text-align: left;
|
||||
|
||||
b {
|
||||
font-weight: bold;
|
||||
cursor:pointer;
|
||||
.name {
|
||||
text-shadow: 0px 1px 0px rgba(#fff, 0.5);
|
||||
display:inline;
|
||||
float:left;
|
||||
max-width:40%;
|
||||
font-weight: normal;
|
||||
padding: 0 5px 0 0;
|
||||
}
|
||||
span {
|
||||
font-size: $font-base-size - 1;
|
||||
color: lighten($color-text, 25%);
|
||||
.ss-uploadfield-item-status {
|
||||
float: right;
|
||||
padding: 0 0 0 5px;
|
||||
max-width:30%;
|
||||
@include hide-text-overflow;
|
||||
text-shadow: 0px 1px 0px rgba(#fff, 0.5);
|
||||
&.ui-state-error-text {
|
||||
text-shadow: 0px 1px 0px rgba(#fff, 0.6);
|
||||
color: darken($color-button-destructive, 10%);
|
||||
}
|
||||
&.ui-state-warning-text {
|
||||
color: darken($color-warning, 10%);
|
||||
}
|
||||
&.ui-state-success-text {
|
||||
color: $color-button-constructive;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-item-status {
|
||||
float: right;
|
||||
padding: 0 0 0 5px;
|
||||
|
||||
&.ui-state-error-text {
|
||||
color: $color-button-destructive;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ss-uploadfield-item-actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
color:#f00;
|
||||
|
||||
|
||||
}
|
||||
.ss-ui-button {
|
||||
background: none;
|
||||
|
|
@ -120,15 +189,7 @@ body.cms.ss-uploadfield-edit-iframe {
|
|||
// TODO tmp hack until we have permissions and can disable delete
|
||||
display: none;
|
||||
}
|
||||
&.ss-uploadfield-item-edit {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.ui-icon {
|
||||
display: none;
|
||||
}
|
||||
@include ss-uploadfield-editButton;
|
||||
}
|
||||
.ss-uploadfield-item-progress {
|
||||
width: 100%;
|
||||
|
|
@ -167,7 +228,6 @@ body.cms.ss-uploadfield-edit-iframe {
|
|||
height: 16px;
|
||||
cursor: pointer;
|
||||
@include single-box-shadow(none);
|
||||
// background: sprite($sprites16, cross-circle) no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -187,7 +247,15 @@ body.cms.ss-uploadfield-edit-iframe {
|
|||
|
||||
.ss-uploadfield-item-info {
|
||||
float: left;
|
||||
margin: 19px 0 0;
|
||||
margin: 34px 0 0;
|
||||
label{
|
||||
width:300px;
|
||||
height:30px;
|
||||
font-size:14px;
|
||||
&.ui-state-focus{
|
||||
@include single-box-shadow(none);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-fromcomputer {
|
||||
position: relative;
|
||||
|
|
@ -201,37 +269,44 @@ body.cms.ss-uploadfield-edit-iframe {
|
|||
font-size: 22px;
|
||||
padding: 0 20px;
|
||||
line-height: 70px;
|
||||
margin-top:16px;
|
||||
display: none;
|
||||
}
|
||||
.ss-uploadfield-dropzone {
|
||||
@include border-radius(10px);
|
||||
@include box-shadow(lighten($color-medium-separator, 10%) 0 0 3px 3px inset);
|
||||
margin-top:9px;
|
||||
@include border-radius(13px);
|
||||
@include box-shadow(rgba($color-medium-separator, 0.3) 0 0 3px 2px inset);
|
||||
border: 2px dashed $color-medium-separator;
|
||||
background: $color-light-separator;
|
||||
background: lighten($color-base,12%);
|
||||
display: none;
|
||||
height: 66px;
|
||||
width: 300px;
|
||||
height: 82px;
|
||||
width: 408px;
|
||||
float: left;
|
||||
&.active{
|
||||
&.hover{
|
||||
@include box-shadow(rgba(#fff,0.6) 0 0 3px 3px inset);
|
||||
@include box-shadow(rgba(#fff,0.6) 0 0 3px 2px inset);
|
||||
}
|
||||
}
|
||||
div {
|
||||
color:lighten($color-text, 10%);
|
||||
text-shadow: 0px 1px 0px #fff;
|
||||
background: url('../images/upload.png') 0 25px no-repeat;
|
||||
width:230px;
|
||||
z-index:1;
|
||||
padding: 15px 0 0;
|
||||
line-height: 22px;
|
||||
font-size: 20px;
|
||||
padding: 20px 0 0;
|
||||
line-height: 25px;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
display:block;
|
||||
margin:0 auto;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
z-index:-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,5 +34,21 @@
|
|||
<span class="title"><% _t('AssetUploadField.EDITANDORGANIZE', 'Edit & organize') %></span>
|
||||
</span>
|
||||
</h3>
|
||||
<div class="fileOverview">
|
||||
<div class="uploadStatus">
|
||||
<div class="state started"><% _t('AssetUploadField.UPLOADINPROGRESS', 'Please wait… upload in progress') %></div>
|
||||
<div class="state completed" style="display:none;"><% _t('AssetUploadField.FILEUPLOADCOMPLETED', 'File Upload Completed!') %></div>
|
||||
|
||||
<div class="details"><% _t('AssetUploadField.TOTAL', 'Total') %>: <span class="total"></span> <% _t('AssetUploadField.FILES', 'Files') %> <span class="fileSize"></span> </div>
|
||||
</div>
|
||||
<div class="ss-uploadfield-item-actions">
|
||||
<button class="ss-uploadfield-item-edit-all ss-ui-button ui-corner-all" title="<% _t('AssetUploadField.EDITINFO', 'Edit files') %>">
|
||||
<% _t('AssetUploadField.EDITALL', 'Edit all') %>
|
||||
<span class="toggle-details">
|
||||
<span class="toggle-details-icon"></span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="ss-uploadfield-files files"></ul>
|
||||
</div>
|
||||
Loading…
Reference in New Issue