issue #1019 photo upload redesign

Based on Samuel's mockup.
This commit is contained in:
Yann Le Boudec
2019-05-21 14:58:52 +02:00
committed by Pierrick Le Gall
parent c9715d255d
commit 9891c79f25
14 changed files with 254 additions and 95 deletions
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 307.2 307.2" style="enable-background:new 0 0 307.2 307.2;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
<g>
<polygon points="307.2,24.136 283.064,0 153.6,129.469 24.136,0 0,24.136 129.464,153.6 0,283.064 24.136,307.2 153.6,177.736 283.064,307.2 307.2,283.064 177.736,153.6 " data-original="#000000" class="active-path" data-old_color="##3C3C3" fill="#3C3C3C"/>
</g>
</g></g> </svg>

After

Width:  |  Height:  |  Size: 574 B

@@ -0,0 +1,6 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 307.2 307.2" style="enable-background:new 0 0 307.2 307.2;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
<g>
<polygon points="307.2,24.136 283.064,0 153.6,129.469 24.136,0 0,24.136 129.464,153.6 0,283.064 24.136,307.2 153.6,177.736 283.064,307.2 307.2,283.064 177.736,153.6 " data-original="#000000" class="active-path" data-old_color="##FFA64" fill="#FFA646"/>
</g>
</g></g> </svg>

After

Width:  |  Height:  |  Size: 574 B

+29 -15
View File
@@ -288,15 +288,16 @@ UL.thumbnails li.rank-of-image {background-color: #ddd;}
#pwgMain {padding-left:0}
.buttonLike:hover {color: #3C3C3C;}
.buttonLike, input[type="submit"], input[type="button"], input[type="reset"] {
background-color:#666;
color:#fff;
background-color:#FFA646;
color:#3C3C3C;
}
.buttonLike:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {
cursor: pointer;
background-color: #ff7700;
color: white;
text-decoration: none;
}
@@ -305,8 +306,8 @@ UL.thumbnails li.rank-of-image {background-color: #ddd;}
}
.buttonLike:disabled, input[type="submit"]:disabled, input[type="button"]:disabled, input[type="reset"]:disabled {
background-color:#999;
color:#eee;
background-color: #ECECEC;
color: #D5D5D5;
cursor:not-allowed;
}
@@ -359,16 +360,8 @@ table.dataTable thead th, table.dataTable.no-footer {
.userPrefs {border-color:#ddd;}
.big-progressbar {
background:#fff;
border:1px solid #aaa;
border-radius:5px;
}
.big-progressbar .progressbar {
background:#FF8A23;
background:#FF8A23 linear-gradient(135deg, rgba(255,255,255,0) 44%,rgba(255,255,255,0.2) 44%,rgba(255,255,255,0.2) 57%,rgba(255,255,255,0) 57%);
background-size:33px 25px;
box-shadow:inset 0px 1px 3px 0px rgba(255,255,255,0.4);
background: #3C3C3C;
border: 1px solid #A5A5A5;
}
.font-checkbox [class*=icon-check]:before { color:#444; }
@@ -405,7 +398,28 @@ FORM#categoryOrdering p.albumActions a:hover {background-color: #FFA844; color:
FORM#categoryOrdering p.albumActions .userSeparator {border: 1px solid #E1E1E1;}
#addAlbumOpen, #autoOrderOpen {border: 1px solid #D6D6D6; color: #5B5B5B;}
#addAlbumOpen:hover, #autoOrderOpen:hover {border: 1px solid #aaa; text-decoration: none;}
.afterUploadActions a {color: #3C3C3C; font-weight: bold; background-color: #FFA646;}
.afterUploadActions a:hover {text-decoration: none; background-color: #ff7700;}
.font-checkbox:hover {color: #FFA844;}
.font-checkbox.selected {color: #ffa646;}
LEGEND {color: #3C3C3C;}
a#showPermissions {color: #5B5B5B; border: 1px solid #D6D6D6; background-color: #FAFAFA;}
a#showPermissions:hover {border-color: #A5A5A5;}
.icon-plus.cboxElement {background-color: #F6F6F6;}
.icon-plus.cboxElement:hover {background-color: #F2F2F2;}
p#uploadWarningsSummary {color:#3C3C3C;}
.selectize-control.single .selectize-input {border: 2px solid #FFA646!important; color: #3C3C3C;}
.selectize-control.single .selectize-input:hover {border-color: #FAC17E!important;}
.plupload_filelist {scrollbar-color: #CBCBCB #F5F5F5!important;}
li.plupload_delete a {background: url("images/cancel.svg")!important; background-size: cover!important;}
li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; background-size: cover!important;}
.addAlbumEmpty {color: #3C3C3C;}
.addAlbumEmpty a {background-color: #FFA646; box-shadow: 0 1px 2px #0D0303;}
.addAlbumEmpty a:hover{background-color: #ff7700; color: #3C3C3C; box-shadow: 0 2px 4px #0D0303;}
#addAlbumForm input[name="category_name"] {border:none!important; margin-top: 5px!important;}
#addAlbumForm input[name="category_name"]:focus {background-color: #DDDDDD;}
.buttonSeparator {color: #3C3C3C;}
/* beta-test ends */
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 307.2 307.2" style="enable-background:new 0 0 307.2 307.2;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
<g>
<polygon points="307.2,24.136 283.064,0 153.6,129.469 24.136,0 0,24.136 129.464,153.6 0,283.064 24.136,307.2 153.6,177.736 283.064,307.2 307.2,283.064 177.736,153.6 " data-original="#000000" class="active-path" data-old_color="##3C3C3" fill="#3C3C3C"/>
</g>
</g></g> </svg>

After

Width:  |  Height:  |  Size: 574 B

@@ -0,0 +1,6 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 307.2 307.2" style="enable-background:new 0 0 307.2 307.2;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
<g>
<polygon points="307.2,24.136 283.064,0 153.6,129.469 24.136,0 0,24.136 129.464,153.6 0,283.064 24.136,307.2 153.6,177.736 283.064,307.2 307.2,283.064 177.736,153.6 " data-original="#000000" class="active-path" data-old_color="##FFA64" fill="#FFA646"/>
</g>
</g></g> </svg>

After

Width:  |  Height:  |  Size: 574 B

+3 -1
View File
@@ -55,10 +55,12 @@ jQuery.fn.pwgAddAlbum = function(options) {
name: name
},
beforeSend: function() {
jQuery('#albumCreationLoading').show();
jQuery('#albumCreationLoading').css('display', 'inline-block');
jQuery('.albumCreationButton').hide();
},
success: function(data) {
jQuery('#albumCreationLoading').hide();
jQuery('.albumCreationButton').show();
$button.colorbox.close();
var newAlbum = {
+2 -2
View File
@@ -128,8 +128,8 @@ jQuery(document).ready(function(){
{foreach from=$categories item=category}
<li class="categoryLi{if $category.IS_VIRTUAL} virtual_cat{/if}" id="cat_{$category.ID}">
<!-- category {$category.ID} -->
<div class="albumflex">
<div class="albumflexblock">
<div class="albumBlock">
<div class="albumLineBlock">
<p class="albumTitle">
<i class="icon-arrow-combo" title="{'Drag to re-order'|translate}"></i>
<strong><a href="{$category.U_CHILDREN}" title="{'manage sub-albums'|@translate}">{$category.NAME}</a></strong>
@@ -3,23 +3,28 @@
{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'}
{combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.{$themeconf.colorscheme}.css"}
{combine_css path="admin/themes/default/fontello/css/animation.css"}
{combine_script id='addAlbum' load=$load_mode path='admin/themes/default/js/addAlbum.js'}
<div style="display:none">
<div id="addAlbumForm">
<form>
{'Parent album'|@translate}<br>
<select name="category_parent"></select>
<br><br>
{'Album name'|@translate}<br>
<input name="category_name" type="text" maxlength="255">
<span id="categoryNameError" style="color:red;">{'The name of an album must not be empty'|translate}</span>
<br><br><br>
<input type="submit" value="{'Create'|@translate}">
<span id="albumCreationLoading" style="display:none"><img src="themes/default/images/ajax-loader-small.gif"></span>
<div class="popinField addAlbumFormParent">
<span class="popinFieldLabel">{'Parent album'|@translate}</span>
<select name="category_parent"></select>
</div>
<div class="popinField">
<span class="popinFieldLabel">{'Album name'|@translate}</span>
<input name="category_name" type="text" maxlength="255">
<span id="categoryNameError" style="color:red;">{'The name of an album must not be empty'|translate}</span>
</div>
<div class="popinButtons">
<input type="submit" value="{'Create'|@translate}" class="albumCreationButton">
<span id="albumCreationLoading"><span class="icon-spin6 animate-spin"></span></span>
</div>
</form>
</div>
</div>
@@ -34,7 +34,9 @@ var categoriesCache = new CategoriesCache({
categoriesCache.selectize(jQuery('[data-selectize=categories]'), {
filter: function(categories, options) {
if (categories.length > 0) {
jQuery("#albumSelection, .selectFiles, .showFieldset").show();
jQuery("#albumSelection, .selectFiles, .showFieldset, .selectAlbum, .selectAlbumBlock, .addAlbumFormParent, #startUpload").show();
jQuery(".addAlbumEmpty, .addAlbumEmptyTitle, .addAlbumEmptyInfos").hide();
jQuery(".addAlbumFormParent").attr( "style", "display: block !important;" );
}
return categories;
@@ -43,7 +45,9 @@ categoriesCache.selectize(jQuery('[data-selectize=categories]'), {
jQuery('[data-add-album]').pwgAddAlbum({
afterSelect: function() {
jQuery("#albumSelection, .selectFiles, .showFieldset").show();
jQuery("#albumSelection, .selectFiles, .showFieldset, .selectAlbum, .selectAlbumBlock, .addAlbumFormParent, #startUpload").show();
jQuery(".addAlbumEmpty, .addAlbumEmptyTitle, .addAlbumEmptyInfos").hide();
jQuery(".addAlbumFormParent").attr( "style", "display: block !important;" );
}
});
@@ -135,8 +139,11 @@ jQuery(document).ready(function(){
//console.log('[BeforeUpload]', file);
// hide buttons
jQuery('#startUpload, #addFiles').hide();
jQuery('#startUpload, .selectFilesButtonBlock, .selectAlbumBlock').hide();
jQuery('#uploadingActions').show();
var categorySelectedId = jQuery("select[name=category] option:selected").val();
var categorySelectedPath = jQuery("select[name=category]")[0].selectize.getItem(categorySelectedId).text();
jQuery('.selectedAlbum').html(categorySelectedPath).show();
// warn user if she wants to leave page while upload is running
jQuery(window).bind('beforeunload', function() {
@@ -170,7 +177,7 @@ jQuery(document).ready(function(){
jQuery("#uploadedPhotos").parent("fieldset").show();
html = '<a href="admin.php?page=photo-'+data.result.image_id+'" target="_blank">';
html += '<img src="'+data.result.src+'" class="thumbnail" title="'+data.result.name+'">';
html += '<img src="'+data.result.square_src+'" class="thumbnail" title="'+data.result.name+'">';
html += '</a> ';
jQuery("#uploadedPhotos").prepend(html);
@@ -249,6 +256,11 @@ jQuery(document).ready(function(){
</ul>
</div>
{else}
<div class="addAlbumEmpty">
<div class="addAlbumEmptyTitle">Bienvenue !</div>
<p class="addAlbumEmptyInfos">Commencez par créer votre premier album.</p>
<a href="#" data-add-album="category" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
</div>
{if count($setup_warnings) > 0}
<div class="warnings">
@@ -262,15 +274,17 @@ jQuery(document).ready(function(){
{/if}
<form id="uploadForm" enctype="multipart/form-data" method="post" action="{$form_action}">
<fieldset class="selectAlbum">
<form id="uploadForm" enctype="multipart/form-data" method="post" action="{$form_action}">
<fieldset class="selectAlbum" style="display:none">
<legend>{'Drop into album'|@translate}</legend>
<span id="albumSelection" style="display:none">
<select data-selectize="categories" data-value="{$selected_category|@json_encode|escape:html}"
data-default="first" name="category" style="width:600px"></select>
<br>{'... or '|@translate}</span>
<a href="#" data-add-album="category" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
<div class="selectedAlbum" style="display: none"><span class="icon-sitemap"></span></div>
<div class="selectAlbumBlock" style="display:none">
<a href="#" data-add-album="category" title="{'create a new album'|@translate}" class="icon-plus"></a>
<span id="albumSelection" style="display:none">
<select data-selectize="categories" data-value="{$selected_category|@json_encode|escape:html}"
data-default="first" name="category" style="width:600px"></select>
</span>
</div>
</fieldset>
<p class="showFieldset" style="display:none"><a id="showPermissions" href="#">{'Manage Permissions'|@translate}</a></p>
@@ -285,22 +299,21 @@ jQuery(document).ready(function(){
<fieldset class="selectFiles" style="display:none">
<legend>{'Select files'|@translate}</legend>
<button id="addFiles" class="buttonLike icon-plus-circled">{'Add Photos'|translate}</button>
{if isset($original_resize_maxheight)}
<p class="uploadInfo">{'The picture dimensions will be reduced to %dx%d pixels.'|@translate:$original_resize_maxwidth:$original_resize_maxheight}</p>
{/if}
<p id="uploadWarningsSummary">{$upload_file_types}. {if isset($max_upload_resolution)}{$max_upload_resolution}Mpx{/if} <a class="icon-info-circled-1 showInfo" title="{'Learn more'|@translate}"></a></p>
<p id="uploadWarnings">
{'Allowed file types: %s.'|@translate:$upload_file_types}
{if isset($max_upload_resolution)}
{'Approximate maximum resolution: %dM pixels (that\'s %dx%d pixels).'|@translate:$max_upload_resolution:$max_upload_width:$max_upload_height}
{/if}
</p>
<div class="selectFilesButtonBlock">
<button id="addFiles" class="buttonLike">{'Add Photos'|translate}<i class="icon-download"></i></button>
<div class="selectFilesinfo">
{if isset($original_resize_maxheight)}
<p class="uploadInfo">{'The picture dimensions will be reduced to %dx%d pixels.'|@translate:$original_resize_maxwidth:$original_resize_maxheight}</p>
{/if}
<p id="uploadWarningsSummary">{$upload_file_types}. {if isset($max_upload_resolution)}{$max_upload_resolution}Mpx{/if} <a class="icon-info-circled-1 showInfo" title="{'Learn more'|@translate}"></a></p>
<p id="uploadWarnings">
{'Allowed file types: %s.'|@translate:$upload_file_types}
{if isset($max_upload_resolution)}
{'Approximate maximum resolution: %dM pixels (that\'s %dx%d pixels).'|@translate:$max_upload_resolution:$max_upload_width:$max_upload_height}
{/if}
</p>
</div>
</div>
<div id="uploader">
<p>Your browser doesn't have HTML5 support.</p>
</div>
@@ -314,15 +327,14 @@ jQuery(document).ready(function(){
<div class="progressbar" style="width:0%"></div>
</div>
</div>
<button id="startUpload" class="buttonLike icon-upload" disabled>{'Start Upload'|translate}</button>
</form>
<button id="startUpload" class="buttonLike icon-upload" disabled style="display:none">{'Start Upload'|translate}</button>
<fieldset style="display:none">
<legend>{'Uploaded Photos'|@translate}</legend>
<div id="uploadedPhotos"></div>
</fieldset>
</form>
<fieldset style="display:none" class="Addedphotos">
<div id="uploadedPhotos"></div>
</fieldset>
{/if} {* $setup_errors *}
+91 -22
View File
@@ -989,7 +989,7 @@ h2:lang(en) { text-transform:capitalize; }
*/
.infos, .errors, .warnings, .messages {
text-align: left;
margin: 15px 10px 15px 15px;
margin: 15px 35px 50px 35px;
padding: 5px;
font-weight:bold;
min-height: 54px;
@@ -999,6 +999,8 @@ h2:lang(en) { text-transform:capitalize; }
margin-top:18px;
}
.infos ul {color: #3C3C3C;}
.eiw-icon {
float: left;
font-size: 40px;
@@ -1008,9 +1010,10 @@ h2:lang(en) { text-transform:capitalize; }
.infos {
color: #0a0;
background-color:#c2f5c2;
border-left:4px solid #0a0;
}
.infos a {color: #3C3C3C;}
.errors {
color: #f22;
background-color: #ffd5dc;
@@ -1228,27 +1231,29 @@ LEGEND {
#addUploadBox {margin-bottom:2em;}
p.uploadInfo {text-align:left;font-size:90%;color:#999;}
p#uploadWarningsSummary {text-align:left;margin-bottom:1em;font-size:90%;color:#999;}
p#uploadWarningsSummary {text-align:left;margin-bottom:1em;font-size:100%;}
p#uploadWarningsSummary .showInfo {margin-left:3px;}
p#uploadWarnings {display:none;text-align:left;margin-bottom:1em;font-size:90%;color:#999;}
p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
#photosAddContent p.showFieldset {text-align:left; display: none!important;}
a#showPermissions {padding: 5px 10px; font-size: 11px; font-weight: bold; margin-left: 35px;}
a#showPermissions:hover {text-decoration: none;}
#uploadForm .plupload_buttons, #uploadForm .plupload_progress { display:none !important; }
#uploadForm #startUpload { margin:5px 0 15px 15px; padding:5px 10px; font-size:1.1em; }
#uploadForm #startUpload:before { margin-right:0.5em; }
#uploadForm #addFiles { margin-right:10px; float:left; }
#uploadForm #startUpload { margin:5px 0 15px 25px; padding:8px 10px; font-size:1.1em; }
#uploadForm #startUpload:before { margin-right:0.5em;}
#uploadForm #addFiles { margin-right:10px; float:left;}
#uploadForm #uploadingActions { margin:10px 10px 10px 15px; }
#uploadForm .big-progressbar { vertical-align:middle; display:inline-block; margin-left:10px; }
.big-progressbar {
width:100%;
max-width:600px;
background:#fff;
max-width:90%;
padding:0;
border-radius:5px;
border-radius:15px;
position:relative;
height:18px;
height:8px;
}
@keyframes animatedBackground {
@@ -1262,13 +1267,11 @@ p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
}
.big-progressbar .progressbar {
height:18px;
min-width:5px;
background:#444;
border-radius:5px 0 0 5px;
background-size:33px 25px;
animation: animatedBackground 1s linear infinite;
-webkit-animation: animatedBackground 1s linear infinite;
height: 8px;
min-width: 5px;
background: #FFBD4D;
border-radius: 5px 0 0 5px;
background-size: 33px 25px;
}
/* Selectize */
@@ -1323,7 +1326,7 @@ p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
max-height:170px;
}
#addAlbumForm input[name="category_name"] {
width:600px;
width: 565px; padding: 8px 8px;
}
#formCreateAlbum input[name="virtual_name"] {
width:300px;
@@ -1366,11 +1369,13 @@ FORM#categoryOrdering p.albumActions a {
FORM#categoryOrdering p.albumActions a:hover {text-decoration: none;}
FORM#categoryOrdering p.albumActions .userSeparator {margin:0 5px;}
.albumflex {display: flex; justify-content: space-between; padding: 10px 10px 0 10px;}
.albumflex .albumflexblock {display: block; padding-left: 7px; max-width: 45%; height: 50px;}
.albumBlock {display: flex; justify-content: space-between; padding: 10px 10px 0 10px;}
.albumBlock .albumLineBlock {display: block; padding-left: 7px; max-width: 45%; height: 50px;}
.showCreateAlbum {text-align:left; margin:0 1em 25px 20px; line-height:22px;}
.showCreateAlbum .userSeparator {margin:0 5px;}
#addAlbumOpen, #autoOrderOpen {padding: 7px 15px; font-weight: bold; font-size: 11px;}
.afterUploadActions {text-align: center; margin-bottom: 30px !important;}
.afterUploadActions a {justify-content: center; margin: 35px; font-weight: bold; font-size: 14px; padding: 10px 20px;}
#addAlbumOpen::before ,#autoOrderOpen::before {margin-right: 10px; font-weight: bold; font-size: 15px;}
#autoOrder p, #createAlbum p {text-align:left; margin:0 0 1em 0;}
#autoOrder p.actionButtons, #createAlbum p.actionButtons {margin-bottom:0;}
@@ -1589,5 +1594,69 @@ fieldset#environment legend i[class*="icon-"] {
transition: all 125ms ease-out;
}
.selectAlbum {border: 0;}
.selectAlbumflex {display: flex; margin-left: 10px; margin-top: 10px;}
#cboxLoadedContent input[type="submit"] {margin-bottom: 30px; float: none;}
.selectAlbum, #permissions, .selectFiles {border: 0;}
#permissions {display: none!important;}
#permissions, .selectFiles {margin-top: 35px; margin-bottom: 20px;}
.selectAlbumBlock {display: flex; margin-left: 10px; margin-top: 10px;}
.icon-plus.cboxElement {
padding: 8px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
font-size: 15px;
margin-bottom: 8px;
transition: all 125ms ease-out;
}
.icon-plus.cboxElement:hover {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);}
#albumSelection {margin-left: 25px;}
.selectize-control.single .selectize-input {border-radius: 0; font-weight: bold;font-size: 12px;}
.buttonLike {padding: 8px 10px; margin-left: 5px;}
.buttonLike i {font-size: 18px;}
.selectFilesButtonBlock {display: flex; margin-top: 10px;}
.selectFilesinfo {margin-top: 10px; margin-left: 15px;}
#uploader {margin-top: 25px; font-weight: bold !important;}
.plupload_filelist_header {display: none;}
.plupload_filelist {scrollbar-width: thin!important;}
.plupload_wrapper, .plupload_file_size {font-weight: bold;}
.plupload_filelist li {background: none!important; font-weight: bold;}
li.plupload_delete a {background: url("images/cancel.svg")!important; background-size: cover !important;}
li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; background-size: cover !important;}
.plupload_file_status {margin-right: 45px;}
.plupload_file_size {margin-right: 25px;}
.plupload_total_file_size {margin-right: -8px;}
.plupload_total_status {color: #707070!important; margin-right: -8px; font-weight: bold;}
#photosAddContent .Addedphotos {border: none; margin-top: 35px;}
.plupload_upload_status {}
.addAlbumEmpty {text-align: center; margin-top: 10%;}
.addAlbumEmptyTitle {font-size: 35px; font-weight: bold;}
.addAlbumEmptyInfos {font-size: 14px; margin-bottom: 25px !important; margin-top: 5px !important;}
.addAlbumEmpty a{display: inline-block; padding: 10px 15px;}
.addAlbumEmpty a:hover{text-decoration: none;}
.addAlbumEmpty a::first-letter {text-transform: capitalize;}
.addAlbumFormParent {display: none;}
#cboxLoadedContent {height: auto !important; padding: 20px 20px 30px 20px !important;}
.buttonSeparator {font-weight: bold;}
.popinButtons {text-align: right; padding-top: 24px;}
.popinButtons input[type="submit"] {margin-right: 0;}
#albumCreationLoading {
background-color: #ffa744;
color: #3c3c3c; font-size: 12px;
border: none;
padding: 12.2px 28.4px;
font-weight: bold;
display: none;
}
.popinField {margin-top: 30px;}
.popinField.addAlbumFormParent {margin-top: 0;}
.popinFieldLabel {display: block; margin-bottom: 5px;}
.selectedAlbum {margin-top: 10px; margin-left: 5px;}
.selectedAlbum span {
padding: 10px 12px;
font-weight: bold;
background-color: #f5f5f5;
text-align: center;
margin-top: 20px;
border-radius: 7px;
}
.selectedAlbum span.icon-sitemap::before {margin-right: 12px;}
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 307.2 307.2" style="enable-background:new 0 0 307.2 307.2;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
<g>
<polygon points="307.2,24.136 283.064,0 153.6,129.469 24.136,0 0,24.136 129.464,153.6 0,283.064 24.136,307.2 153.6,177.736 283.064,307.2 307.2,283.064 177.736,153.6 " data-original="#000000" class="active-path" data-old_color="##7E7E7" fill="#7E7E7E"/>
</g>
</g></g> </svg>

After

Width:  |  Height:  |  Size: 574 B

+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 307.2 307.2" style="enable-background:new 0 0 307.2 307.2;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
<g>
<polygon points="307.2,24.136 283.064,0 153.6,129.469 24.136,0 0,24.136 129.464,153.6 0,283.064 24.136,307.2 153.6,177.736 283.064,307.2 307.2,283.064 177.736,153.6 " data-original="#000000" class="active-path" data-old_color="##FFA64" fill="#FFA646"/>
</g>
</g></g> </svg>

After

Width:  |  Height:  |  Size: 574 B

+29 -9
View File
@@ -196,9 +196,10 @@ INPUT[type="text"].large { width: 317px; }
}
.buttonLike:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled {
color:#666;
color:#555;
border-color:#666;
cursor:not-allowed;
background-color: #666;
}
.bigbutton { background:transparent url(images/quickLocalSync_inactiv.png) no-repeat scroll left top; display: block;
@@ -304,13 +305,8 @@ div.token-input-dropdown ul li {background-color:#eee !important;}
div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-color:#FF7800 !important;}
.big-progressbar {
background:#1a1e22;
box-shadow:inset 0px 1px 1px 0px black, 0px 1px 1px 0px #36393F;
}
.big-progressbar .progressbar {
background:#ff3363;
background:#ff3363 linear-gradient(135deg, rgba(0,0,0,0) 44%,rgba(0,0,0,0.2) 44%,rgba(0,0,0,0.2) 57%,rgba(0,0,0,0) 57%);
background-size:33px 25px;
background: #3c3939;
border: 1px solid #3C3C3C;
}
/* Album Properties */
@@ -332,6 +328,7 @@ label>p.group_select {
.userSeparator {
color:#666;
visibility: hidden;
}
#configContent fieldset:not(.no-border) {
@@ -371,7 +368,7 @@ table.qsearch_help_table td {
.font-checkbox [class*=icon-check]:before { color:#aaa; }
#cboxLoadedContent { background-color:#222 !important; }
#cboxLoadedContent { background-color:#333 !important; }
#watermarkPositionBox {
background-color:#333;
@@ -390,6 +387,8 @@ FORM#categoryOrdering p.albumActions a:hover {background-color: #ffa646; color:
FORM#categoryOrdering p.albumActions .userSeparator {border: 1px solid #d5d5d5;}
#addAlbumOpen, #autoOrderOpen {border: 1px solid #777; color: #c0c0c0;}
#addAlbumOpen:hover, #autoOrderOpen:hover {border: 1px solid #aaa; text-decoration: none;}
.afterUploadActions a {color: #3C3C3C; font-weight: bold; background-color: #FFA646;}
.afterUploadActions a:hover {text-decoration: none; background-color: #ff7700;}
.font-checkbox {color: #898888;}
.font-checkbox:hover {color: #ffa646;}
.with-border legend, .with-border strong {color: #c0c0c0;}
@@ -397,3 +396,24 @@ FORM#categoryOrdering p.albumActions .userSeparator {border: 1px solid #d5d5d5;}
#formCreateAlbum input[name="virtual_name"] {border: 1px solid #7e7e7e; color: #F8F8F8; transition: all 125ms ease-out;}
#formCreateAlbum input[name="virtual_name"]:hover {border-color: #A5A5A5;}
LEGEND {color: #c1c1c1;}
a#showPermissions {color: #D6D6D6; border: 1px solid #D6D6D6; background-color: #414141;}
a#showPermissions:hover {border-color: #A5A5A5;}
.icon-plus.cboxElement {border: 1px solid #777; color: #c0c0c0;}
.icon-plus.cboxElement:hover {border: 1px solid #aaa;}
p#uploadWarningsSummary {color:#999;}
.selectize-control.single .selectize-input {border: 2px solid #FAC17E!important; color: #D5D5D5;}
.selectize-control.single .selectize-input:hover {border-color: #FFA646!important;}
.plupload_filelist {background-color: #414141!important; scrollbar-color: #D6D6D6 #444444!important;}
.plupload_filelist li {border-bottom: 1px solid #707070!important; color: #A5A5A5!important;}
.plupload_filelist_footer {background-color: #3c3939!important; border: 0!important; color: #A5A5A5!important}
li.plupload_delete a {background: url("images/cancel.svg")!important; background-size: cover!important;}
li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; background-size: cover!important;}
.addAlbumEmpty {color: #c1c1c1;}
.addAlbumEmpty a {background-color: #FFA646; color: #3C3C3C;}
.addAlbumEmpty a:hover{background-color: #ff7700; color: #3C3C3C;}
.buttonSeparator {color: #c1c1c1;}
#cboxTitle {color: #7f7f7f !important;}
#addAlbumForm {color: #999;}
.selectedAlbum span {background-color: #555; color: #999;}
+1
View File
@@ -1446,6 +1446,7 @@ SELECT
return array(
'image_id' => $image_id,
'src' => DerivativeImage::thumb_url($image_infos),
'square_src' => DerivativeImage::url(ImageStdParams::get_by_type(IMG_SQUARE), $image_infos),
'name' => $image_infos['name'],
'category' => array(
'id' => $params['category'][0],