mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
BUG: File Uploading Notifications (fixes #7883)
Put "File upload complete" and "back to folder" together. Turned 'File upload' into a message, and updated the message styles. Moved allowed file types into the area where users are uploading files. This is a temporary fix until js tooltips are implemented, at which point, these details will be shown when clicking a question mark beside "Choose files". Added small animation effect to files when opening iframe to edit. Now slides down, rather than just appearing open Linked to silverstripe/silverstripe-cms#223
This commit is contained in:
Naomi Guyer
parent
43cd54bb25
commit
2dabaebad8
@ -340,12 +340,12 @@ body.cms { overflow: hidden; }
|
||||
.cms-content-actions { margin: 0; padding: 12px 16px; z-index: 0; border-top: 1px solid rgba(201, 205, 206, 0.8); border-top: 1px solid #FAFAFA; -webkit-box-shadow: #cccccc 0 -1px 1px; -moz-box-shadow: #cccccc 0 -1px 1px; box-shadow: #cccccc 0 -1px 1px; }
|
||||
|
||||
/** -------------------------------------------- Messages -------------------------------------------- */
|
||||
.message { display: block; clear: both; margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px black solid; }
|
||||
.message.notice { background-color: #ffbe66; border-color: #ff9300; }
|
||||
.message { display: block; clear: both; margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px #ccc solid; background: #fff; background: rgba(255, 255, 255, 0.5); -webkit-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -ms-border-radius: 3px 3px 3px 3px; -o-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; }
|
||||
.message.notice { background: #d9edf7; border-color: #bce8f1; }
|
||||
.message.notice a, .message.notice .cms .jstree .jstree-wholerow a:hover, .cms .jstree .jstree-wholerow .message.notice a:hover, .message.notice .cms .jstree .jstree-wholerow #vakata-contextmenu li.vakata-hover > a, .cms .jstree .jstree-wholerow #vakata-contextmenu .message.notice li.vakata-hover > a, .message.notice .cms #vakata-contextmenu .jstree .jstree-wholerow li.vakata-hover > a, .cms #vakata-contextmenu .jstree .jstree-wholerow .message.notice li.vakata-hover > a, .message.notice .cms .jstree .jstree-wholerow .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li.vakata-hover > a, .cms .jstree .jstree-wholerow .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .message.notice li.vakata-hover > a, .message.notice .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .cms .jstree .jstree-wholerow li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .cms .jstree .jstree-wholerow .message.notice li.vakata-hover > a, .message.notice .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow a:hover, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .message.notice a:hover, .message.notice .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .cms #vakata-contextmenu li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .cms #vakata-contextmenu .message.notice li.vakata-hover > a, .message.notice .cms #vakata-contextmenu .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow li.vakata-hover > a, .cms #vakata-contextmenu .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .message.notice li.vakata-hover > a, .message.notice .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow #vakata-contextmenu li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow #vakata-contextmenu .message.notice li.vakata-hover > a, .message.notice .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .jstree .jstree-wholerow li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .jstree .jstree-wholerow .message.notice li.vakata-hover > a { color: #999; }
|
||||
.message.warning { background-color: #ffbe66; border-color: #ff9300; }
|
||||
.message.error, .message.bad, .message.required, .message.validation { background-color: #ffbe66; border-color: #ff9300; }
|
||||
.message.good { background-color: #65a839; background-color: rgba(101, 168, 57, 0.7); border-color: #65a839; color: #fff; text-shadow: 1px -1px 0 #1f9433; -webkit-border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -ms-border-radius: 3px 3px 3px 3px; -o-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; }
|
||||
.message.error, .message.bad, .message.required, .message.validation { background: #f6e7e7; background: rgba(241, 220, 220, 0.5); border-color: #efd4d8; color: #b94a48; }
|
||||
.message.good { background: #65a839; background: rgba(101, 168, 57, 0.7); border-color: #65a839; color: #fff; text-shadow: 1px -1px 0 #1f9433; }
|
||||
.message.good a, .message.good .cms .jstree .jstree-wholerow a:hover, .cms .jstree .jstree-wholerow .message.good a:hover, .message.good .cms .jstree .jstree-wholerow #vakata-contextmenu li.vakata-hover > a, .cms .jstree .jstree-wholerow #vakata-contextmenu .message.good li.vakata-hover > a, .message.good .cms #vakata-contextmenu .jstree .jstree-wholerow li.vakata-hover > a, .cms #vakata-contextmenu .jstree .jstree-wholerow .message.good li.vakata-hover > a, .message.good .cms .jstree .jstree-wholerow .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li.vakata-hover > a, .cms .jstree .jstree-wholerow .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .message.good li.vakata-hover > a, .message.good .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .cms .jstree .jstree-wholerow li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .cms .jstree .jstree-wholerow .message.good li.vakata-hover > a, .message.good .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow a:hover, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .message.good a:hover, .message.good .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .cms #vakata-contextmenu li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .cms #vakata-contextmenu .message.good li.vakata-hover > a, .message.good .cms #vakata-contextmenu .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow li.vakata-hover > a, .cms #vakata-contextmenu .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow .message.good li.vakata-hover > a, .message.good .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow #vakata-contextmenu li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel .jstree .jstree-wholerow #vakata-contextmenu .message.good li.vakata-hover > a, .message.good .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .jstree .jstree-wholerow li.vakata-hover > a, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .jstree .jstree-wholerow .message.good li.vakata-hover > a { text-shadow: none; }
|
||||
.message p { margin: 0; }
|
||||
|
||||
@ -644,9 +644,9 @@ form.import-form label.left { width: 250px; }
|
||||
.ss-uploadfield-item-edit-all .ui-button-text { padding-right: 0; }
|
||||
|
||||
.toggle-details-icon { background: url('../images/sprites-32x32-sb47394f892.png') 0 -217px no-repeat; }
|
||||
.fileOverview .toggle-details-icon { background: url('../images/sprites-32x32-sb47394f892.png') 0 -159px no-repeat; display: inline-block; width: 8px; height: 8px; padding-left: 5px; }
|
||||
.ss-uploadfield-item-edit-all .toggle-details-icon { background: url('../images/sprites-32x32-sb47394f892.png') 0 -159px no-repeat; display: inline-block; width: 8px; height: 8px; padding-left: 5px; }
|
||||
.toggle-details-icon.opened { background: url('../images/sprites-32x32-sb47394f892.png') 0 -905px no-repeat; }
|
||||
.fileOverview .toggle-details-icon.opened { background: url('../images/sprites-32x32-sb47394f892.png') 0 -143px no-repeat; }
|
||||
.ss-uploadfield-item-edit-all .toggle-details-icon.opened { background: url('../images/sprites-32x32-sb47394f892.png') 0 -143px no-repeat; }
|
||||
|
||||
/** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file). The styles are usually added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree. */
|
||||
.cms .jstree > ul > li, .TreeDropdownField .treedropdownfield-panel .jstree > ul > li { margin-left: 0px; }
|
||||
|
||||
@ -436,35 +436,34 @@ body.cms {
|
||||
clear: both;
|
||||
margin: 0 0 $grid-y 0;
|
||||
padding: $grid-y - 1 $grid-x - 1;
|
||||
font-weight: bold;
|
||||
|
||||
border: 1px black solid;
|
||||
|
||||
font-weight: bold;
|
||||
border: 1px #ccc solid;
|
||||
background:#fff; //for browsers that don't understand rgba
|
||||
background:rgba(#fff,0.5);
|
||||
@include border-radius(3px 3px 3px 3px);
|
||||
&.notice {
|
||||
background-color: lighten($color-notice, 20%);
|
||||
border-color: $color-notice;
|
||||
|
||||
background: $color-notice;
|
||||
border-color: darken(adjust-hue($color-notice, -10), 7%);
|
||||
a {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&.warning {
|
||||
background-color: lighten($color-warning, 20%);
|
||||
border-color: $color-warning;
|
||||
}
|
||||
&.error, &.bad, &.required, &.validation {
|
||||
background-color: lighten($color-error, 20%);
|
||||
border-color: $color-error;
|
||||
}
|
||||
|
||||
background: lighten($color-error, 43%);//for browsers that don't understand rgba
|
||||
background: rgba(lighten($color-error, 40%), 0.5);
|
||||
border-color: lighten(adjust-hue($color-error, -10), 38%);
|
||||
color:$color-error;
|
||||
}
|
||||
&.good {
|
||||
background-color: $color-good;//for browsers that don't understand rgba
|
||||
background-color: rgba($color-good,0.7);
|
||||
background: $color-good;//for browsers that don't understand rgba
|
||||
background: rgba($color-good,0.7);
|
||||
border-color: $color-good;
|
||||
color:#fff;
|
||||
@include text-shadow(1px -1px 0 $color-button-constructive);
|
||||
@include border-radius(3px 3px 3px 3px);
|
||||
color:#fff;
|
||||
@include text-shadow(1px -1px 0 $color-button-constructive);
|
||||
a {
|
||||
text-shadow:none;
|
||||
}
|
||||
@ -521,7 +520,7 @@ body.cms {
|
||||
padding-top:5px; //aligns label with point of arrow
|
||||
font-weight:bold; //to match pagetype label
|
||||
@include text-shadow(1px 1px 0 $color-text-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
ul.SelectionGroup {
|
||||
padding-left:28px;
|
||||
@ -1709,10 +1708,10 @@ body.cms-dialog {
|
||||
.title {
|
||||
height: 26px - 2*4px; // minus padding
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/** --------------------------------------------
|
||||
* Item Edit Form
|
||||
* -------------------------------------------- */
|
||||
@ -1881,12 +1880,10 @@ form.import-form {
|
||||
.ss-uploadfield-item-edit-all .ui-button-text{
|
||||
padding-right:0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.toggle-details-icon {
|
||||
background: sprite($sprites32, menu-arrow-down) no-repeat;
|
||||
.fileOverview &{
|
||||
.ss-uploadfield-item-edit-all &{
|
||||
background: sprite($sprites32, menu-arrow-deselected-down) no-repeat;
|
||||
display:inline-block;
|
||||
width:8px;
|
||||
@ -1896,7 +1893,7 @@ form.import-form {
|
||||
|
||||
&.opened {
|
||||
background: sprite($sprites32, menu-arrow-up) no-repeat;
|
||||
.fileOverview &{
|
||||
.ss-uploadfield-item-edit-all &{
|
||||
background: sprite($sprites32, menu-arrow-deselected-up) no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,8 +55,8 @@ $color-button-destructive: #f00 !default;
|
||||
$color-button-disabled: #eeeded !default;
|
||||
|
||||
$color-warning: #FF9300 !default;
|
||||
$color-error: #FF9300 !default;
|
||||
$color-notice: #FF9300 !default;
|
||||
$color-error: #b94a48 !default;
|
||||
$color-notice: #d9edf7 !default;
|
||||
$color-good: #65A839 !default;
|
||||
|
||||
$color-cms-batchactions-menu-background: #f5f5f5 !default;
|
||||
|
||||
@ -4,29 +4,34 @@
|
||||
/** ----------------------------------------------- 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 ------------------------------------------------ */
|
||||
.ss-uploadfield-view-allowed-extensions { padding-top: 20px; clear: both; max-width: 750px; display: block; }
|
||||
|
||||
#AssetUploadField { border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
|
||||
|
||||
body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fieldset { padding: 16px; overflow: auto; background: #E2E2E2; }
|
||||
body.cms.ss-uploadfield-edit-iframe span.readonly, .composite.ss-assetuploadfield .details fieldset span.readonly { font-style: italic; color: #777777; text-shadow: 0px 1px 0px #fff; }
|
||||
body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-assetuploadfield .details fieldset .fieldholder-small label { margin-left: 0; }
|
||||
|
||||
.ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-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 h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -moz-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; position: relative; }
|
||||
.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; padding: 0; background: none; border: 0; right: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #444444; }
|
||||
.ss-assetuploadfield .fileOverview .ss-ui-button:hover { color: #1e7cba; }
|
||||
.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 .fileOverview { clear: both; margin-top: 10px; position: relative; }
|
||||
.ss-assetuploadfield .fileOverview .uploadStatus:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
|
||||
*:first-child .ss-assetuploadfield .fileOverview .uploadStatus { zoom: 1; }
|
||||
.ss-assetuploadfield .fileOverview .uploadStatus .state { float: left; font-size: 16px; font-weight: bold; line-height: 1.1em; }
|
||||
.ss-assetuploadfield .fileOverview .uploadStatus .details { opacity: 0.9; float: right; }
|
||||
.ss-assetuploadfield .ss-uploadfield-item-actions.edit-all { clear: both; position: relative; z-index: 9; }
|
||||
.ss-assetuploadfield .ss-uploadfield-item-actions.edit-all .ss-uploadfield-item-edit-all { z-index: 8; position: absolute; top: -33px; padding: 0; background: none; border: 0; right: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: #444444; }
|
||||
.ss-assetuploadfield .ss-uploadfield-item-actions.edit-all .ss-uploadfield-item-edit-all:hover { color: #1e7cba; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files { margin: 0; padding: 0; clear: both; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item { border: 1px solid #b3b3b3; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-background-clip: padding; -moz-background-clip: padding; background-clip: padding-box; margin: 0 0 5px; padding: 0; overflow: hidden; position: relative; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item .info { position: relative; padding: 7px; overflow: hidden; background-color: #FFBE66; border: 1px solid #FF9300; }
|
||||
.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-preview .no-preview { display: block; height: 100%; width: 100%; background: url("../images/icons/document.png") 2px 0px no-repeat; }
|
||||
.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 .ss-uploadfield-item .info { position: relative; padding: 7px; overflow: hidden; background-color: #FFBE66; border: 1px solid #FF9300; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; padding-right: 130px; 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-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: 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; padding-right: 130px; 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: 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 .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { width: 100%; 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 .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: 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: 50%; color: #5e5e5e; background: #eeeded; background: rgba(255, 255, 255, 0.8); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; line-height: 24px; height: 22px; padding: 0 5px; text-align: left; cursor: pointer; display: table; table-layout: fixed; }
|
||||
.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: 50%; font-weight: normal; padding: 0 5px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status { position: relative; 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); }
|
||||
@ -48,7 +53,7 @@ body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-asse
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .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 { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; height: 30px; padding: 0; margin: 0; overflow: hidden; width: 100%; }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbar { background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -ms-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbar { background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
|
||||
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbarvalue { width: 0; background: #60b3dd url(../images/progressbar_blue.gif) repeat left center; }
|
||||
.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%; }
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
.ss-uploadfield .clear { clear: both; }
|
||||
.ss-insert-media .ss-uploadfield { margin-top: 20px; }
|
||||
.ss-insert-media .ss-uploadfield h4 { float: left; }
|
||||
.ss-uploadfield .middleColumn { width: 526px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
|
||||
.ss-uploadfield .middleColumn { width: 526px; padding: 0; background: #fff; border: 1px solid #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
|
||||
.ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; }
|
||||
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview { height: 60px; line-height: 60px; width: 80px; text-align: center; font-weight: bold; float: left; overflow: hidden; }
|
||||
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview.ss-uploadfield-dropzone { -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -moz-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; }
|
||||
@ -27,7 +27,7 @@
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { height: 28px; margin: 6px 0 0; position: relative; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress { position: absolute; left: 0; right: 42px; width: auto; margin: 11px 0 0; height: 15px; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progress div { -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; height: 13px; padding: 0; margin: 0; overflow: hidden; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbar { border: 1px solid gray; background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -ms-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbar { border: 1px solid gray; background-color: #92a6b3; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a6b3), color-stop(11%, #90aab8), color-stop(22%, #96b1bf), color-stop(33%, #9eb4c1), color-stop(44%, #a7bac7), color-stop(100%, #c1d5dc)); background-image: -webkit-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -moz-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: -o-linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); background-image: linear-gradient(top, #92a6b3 0%, #90aab8 11%, #96b1bf 22%, #9eb4c1 33%, #a7bac7 44%, #c1d5dc 100%); }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-progressbarvalue { border: 0; width: 0%; background: #60b3dd url(../images/progressbar_blue.gif) repeat-x left center; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { position: absolute; top: 10px; right: 0; }
|
||||
.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: none; position: relative; }
|
||||
|
||||
@ -39,9 +39,11 @@
|
||||
//Fixes case where someone uploads a single erroring file
|
||||
if(data.files.length == 1 && data.files[0].error !== null){
|
||||
$('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.UploadField.UPLOADFAIL', 'Sorry your upload failed'));
|
||||
$('.fileOverview .uploadStatus').addClass("bad").removeClass("good").removeClass("notice");
|
||||
}else{
|
||||
$('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.UPLOADINPROGRESS', 'Please wait… upload in progress'));//.show();
|
||||
$('.fileOverview button').hide();
|
||||
$('.ss-uploadfield-item-edit-all').hide();
|
||||
$('.fileOverview .uploadStatus').addClass("notice").removeClass("good").removeClass("bad");
|
||||
}
|
||||
|
||||
return result;
|
||||
@ -49,8 +51,9 @@
|
||||
_onAlways: function (jqXHRorResult, textStatus, jqXHRorError, options) {
|
||||
$.blueimpUI.fileupload.prototype._onAlways.call(this, jqXHRorResult, textStatus, jqXHRorError, options);
|
||||
if (this._active === 0) {
|
||||
$('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.FILEUPLOADCOMPLETED', 'File Upload Completed!'));//.hide();
|
||||
$('.fileOverview button').show();
|
||||
$('.fileOverview .uploadStatus .state').text(ss.i18n._t('AssetUploadField.FILEUPLOADCOMPLETED', 'File upload completed!'));//.hide();
|
||||
$('.ss-uploadfield-item-edit-all').show();
|
||||
$('.fileOverview .uploadStatus').addClass("good").removeClass("notice").removeClass("bad");
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -265,7 +268,7 @@
|
||||
}
|
||||
});
|
||||
|
||||
$('div.ss-upload .fileOverview .ss-uploadfield-item-edit-all').entwine({
|
||||
$('div.ss-upload .ss-uploadfield-item-edit-all').entwine({
|
||||
onclick: function(e) {
|
||||
|
||||
if($(this).hasClass('opened')){
|
||||
@ -340,7 +343,7 @@
|
||||
iframe.height(h);
|
||||
|
||||
// set container to match the same height
|
||||
iframe.parent().height(h+parentPadding);
|
||||
iframe.parent().animate({height: h+parentPadding}, 500);
|
||||
iframe.contents().find('body form').css({'width':'98%'});
|
||||
|
||||
},
|
||||
@ -358,13 +361,13 @@
|
||||
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');
|
||||
$('div.ss-upload .ss-uploadfield-item-edit-all').addClass('opened').find('.toggle-details-icon').addClass('opened');
|
||||
}
|
||||
|
||||
} else {
|
||||
this.height(0);
|
||||
this.animate({height: 0}, 500);
|
||||
itemInfo.find('.toggle-details-icon').removeClass('opened');
|
||||
$('div.ss-upload .fileOverview .ss-uploadfield-item-edit-all').removeClass('opened').find('.toggle-details-icon').removeClass('opened');
|
||||
$('div.ss-upload .ss-uploadfield-item-edit-all').removeClass('opened').find('.toggle-details-icon').removeClass('opened');
|
||||
if(!this.hasClass('edited')){
|
||||
text = ss.i18n._t('UploadField.NOCHANGES', 'No Changes');
|
||||
status.addClass('ui-state-success-text');
|
||||
|
||||
@ -6,6 +6,13 @@
|
||||
@import "../admin/scss/_mixins";
|
||||
@import "_elementMixins";
|
||||
|
||||
// Temporary. To be hidden and replaced with javascript tooltip
|
||||
.ss-uploadfield-view-allowed-extensions{
|
||||
padding-top:20px;
|
||||
clear:both;
|
||||
max-width:750px;
|
||||
display:block;
|
||||
}
|
||||
|
||||
#AssetUploadField {
|
||||
border-bottom: 0;
|
||||
@ -30,7 +37,6 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ss-assetuploadfield {
|
||||
h3 {
|
||||
border-bottom: 1px solid $color-shadow-light;
|
||||
@ -38,6 +44,7 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
|
||||
margin: 0 0 8px;
|
||||
padding: 0 0 7px;
|
||||
clear: both;
|
||||
position:relative;
|
||||
}
|
||||
.field {
|
||||
border-bottom: 0;
|
||||
@ -46,14 +53,30 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
|
||||
.fileOverview{
|
||||
clear:both;
|
||||
margin-top:10px;
|
||||
margin-bottom:5px;
|
||||
padding-bottom:5px;
|
||||
height:50px;
|
||||
position:relative;
|
||||
|
||||
.ss-ui-button {
|
||||
.uploadStatus{
|
||||
@include clearfix;
|
||||
.state{
|
||||
float:left;
|
||||
font-size: 16px;
|
||||
font-weight:bold;
|
||||
line-height:1.1em;
|
||||
}
|
||||
.details{
|
||||
opacity:0.9;
|
||||
float:right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ss-uploadfield-item-actions.edit-all{
|
||||
clear:both;
|
||||
position:relative;
|
||||
z-index:9;
|
||||
.ss-uploadfield-item-edit-all {
|
||||
z-index:8;
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
top:-33px;
|
||||
padding:0;
|
||||
background: none;
|
||||
border: 0;
|
||||
@ -64,21 +87,13 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
|
||||
color: #1e7cba;
|
||||
}
|
||||
}
|
||||
.state{
|
||||
font-size: 16px;
|
||||
font-weight:bold;
|
||||
line-height:20px;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
.details{
|
||||
color:lighten($color-text, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ss-uploadfield-files {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
clear:both;
|
||||
|
||||
.ss-uploadfield-item {
|
||||
border: 1px solid lighten($color-medium-separator, 20%);
|
||||
@ -325,7 +340,7 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
.ss-uploadfield-item {
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
|
||||
.ss-uploadfield-item-preview {
|
||||
height: 60px;
|
||||
|
||||
@ -7,6 +7,8 @@
|
||||
</span>
|
||||
</h3>
|
||||
|
||||
|
||||
|
||||
<div class="ss-uploadfield-item-info">
|
||||
<label class="ss-uploadfield-fromcomputer ss-ui-button ss-ui-action-constructive" title="<% _t('AssetUploadField.FROMCOMPUTERINFO', 'Upload from your computer') %>" data-icon="drive-upload">
|
||||
<% _t('AssetUploadField.TOUPLOAD', 'Choose files to upload...') %>
|
||||
@ -24,6 +26,13 @@
|
||||
<span><% _t('AssetUploadField.DRAGFILESHERE', 'Drag files here') %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="ss-uploadfield-view-allowed-extensions">
|
||||
|
||||
<em><% _t('AssetAdmin.ALLOWEDEXTS', 'Allowed extensions') %></em>
|
||||
$Extensions
|
||||
</span>
|
||||
|
||||
<div class="clear"><!-- --></div>
|
||||
</div>
|
||||
|
||||
@ -33,21 +42,23 @@
|
||||
<span class="flyout">2</span><span class="arrow"></span>
|
||||
<span class="title"><% _t('AssetUploadField.EDITANDORGANIZE', 'Edit & organize') %></span>
|
||||
</span>
|
||||
</h3>
|
||||
</h3>
|
||||
|
||||
<div class="ss-uploadfield-item-actions edit-all">
|
||||
<button class="ss-uploadfield-item-edit-all ss-ui-button ui-corner-all" title="<% _t('AssetUploadField.EDITINFO', 'Edit files') %>" style="display:none;">
|
||||
<% _t('AssetUploadField.EDITALL', 'Edit all') %>
|
||||
<span class="toggle-details-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul class="ss-uploadfield-files files"></ul>
|
||||
<div class="fileOverview">
|
||||
<div class="uploadStatus">
|
||||
<div class="uploadStatus message notice">
|
||||
<div class="state"><% _t('AssetUploadField.UPLOADINPROGRESS', 'Please wait… upload in progress') %></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') %>" style="display:none;">
|
||||
<% _t('AssetUploadField.EDITALL', 'Edit all') %>
|
||||
<span class="toggle-details-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="ss-uploadfield-files files"></ul>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user