mirror of
https://github.com/Piwigo/Piwigo.git
synced 2026-07-21 09:03:38 +02:00
issue #1019 photo upload redesign
* Hide album selection after creation * Correctly center the welcome box * Better alignment for select files info * Remove summary for select files info, always display details * Fix dynamic margins in album popin * Simplify show/hide blocks when no album available * Make file selection button secondary when files added to queue
This commit is contained in:
Yann Le Boudec
committed by
Pierrick Le Gall
Pierrick Le Gall
parent
f5f555e1f2
commit
038a42dd46
@@ -150,6 +150,15 @@ SELECT category_id
|
||||
// existing album
|
||||
$template->assign('selected_category', $selected_category);
|
||||
|
||||
// how many existing albums?
|
||||
$query = '
|
||||
SELECT
|
||||
COUNT(*)
|
||||
FROM '.CATEGORIES_TABLE.'
|
||||
;';
|
||||
list($nb_albums) = pwg_db_fetch_row(pwg_query($query));
|
||||
// $nb_albums = 0;
|
||||
$template->assign('NB_ALBUMS', $nb_albums);
|
||||
|
||||
// image level options
|
||||
$selected_level = isset($_POST['level']) ? $_POST['level'] : 0;
|
||||
|
||||
@@ -59,6 +59,7 @@ padding-bottom: 15px; }
|
||||
}
|
||||
html, body {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@@ -361,7 +362,6 @@ table.dataTable thead th, table.dataTable.no-footer {
|
||||
|
||||
.big-progressbar {
|
||||
background: #3C3C3C;
|
||||
border: 1px solid #A5A5A5;
|
||||
}
|
||||
|
||||
.font-checkbox [class*=icon-check]:before { color:#444; }
|
||||
@@ -408,7 +408,6 @@ a#showPermissions {color: #5B5B5B; border: 1px solid #D6D6D6; background-color:
|
||||
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 #ffffff!important; background-color: #ffffff!important;}
|
||||
@@ -423,5 +422,5 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
#addAlbumForm input[name="category_name"]:focus {background-color: #DDDDDD;}
|
||||
.buttonSeparator {color: #3C3C3C;}
|
||||
#uploadForm li.plupload_droptext {background-color: #F5F5F5!important;}
|
||||
|
||||
/* beta-test ends */
|
||||
.addFilesButtonChanged {background-color: #E5E5E5;}
|
||||
.addFilesButtonChanged:hover {background-color: #BBB;}
|
||||
@@ -38,12 +38,13 @@ jQuery.fn.pwgAddAlbum = function(options) {
|
||||
e.preventDefault();
|
||||
|
||||
var parent_id = $albumParent.val(),
|
||||
name = $popup.find('[name=category_name]').val();
|
||||
|
||||
jQuery('#categoryNameError').toggle(!name);
|
||||
name = $popup.find('[name=category_name]').val();
|
||||
|
||||
if (!name) {
|
||||
jQuery('#categoryNameError').css('visibility', 'visible');
|
||||
return;
|
||||
}
|
||||
jQuery('#categoryNameError').css('visibility', 'hidden');
|
||||
|
||||
jQuery.ajax({
|
||||
url: 'ws.php?format=json',
|
||||
@@ -103,13 +104,13 @@ jQuery.fn.pwgAddAlbum = function(options) {
|
||||
this.colorbox({
|
||||
inline: true,
|
||||
href: '#addAlbumForm',
|
||||
width: 650, height: 300,
|
||||
width: 650, height: 'auto',
|
||||
onComplete: function() {
|
||||
if (!$popup.data('init')) {
|
||||
init();
|
||||
}
|
||||
|
||||
jQuery('#categoryNameError').hide();
|
||||
jQuery('#categoryNameError').css('visibility','hidden');
|
||||
$popup.find('[name=category_name]').val('').focus();
|
||||
$albumParent[0].selectize.setValue($target.val() || 0);
|
||||
}
|
||||
|
||||
@@ -23,6 +23,10 @@
|
||||
|
||||
{combine_script id='piecon' load='footer' path='themes/default/js/plugins/piecon.js'}
|
||||
|
||||
{html_style}
|
||||
.addAlbumFormParent { display: none; } /* specific to this page, do not move in theme.css */
|
||||
{/html_style}
|
||||
|
||||
{footer_script}
|
||||
{* <!-- CATEGORIES --> *}
|
||||
var categoriesCache = new CategoriesCache({
|
||||
@@ -34,8 +38,7 @@ var categoriesCache = new CategoriesCache({
|
||||
categoriesCache.selectize(jQuery('[data-selectize=categories]'), {
|
||||
filter: function(categories, options) {
|
||||
if (categories.length > 0) {
|
||||
jQuery("#albumSelection, .selectFiles, .showFieldset, .selectAlbum, .selectAlbumBlock, .addAlbumFormParent, #startUpload").show();
|
||||
jQuery(".addAlbumEmpty, .addAlbumEmptyTitle, .addAlbumEmptyInfos").hide();
|
||||
jQuery(".addAlbumEmptyCenter").css( "height", "auto" );
|
||||
jQuery(".addAlbumFormParent").attr( "style", "display: block !important;" );
|
||||
}
|
||||
|
||||
@@ -45,9 +48,15 @@ categoriesCache.selectize(jQuery('[data-selectize=categories]'), {
|
||||
|
||||
jQuery('[data-add-album]').pwgAddAlbum({
|
||||
afterSelect: function() {
|
||||
jQuery("#albumSelection, .selectFiles, .showFieldset, .selectAlbum, .selectAlbumBlock, .addAlbumFormParent, #startUpload").show();
|
||||
jQuery(".addAlbumEmpty, .addAlbumEmptyTitle, .addAlbumEmptyInfos").hide();
|
||||
jQuery("#uploadForm").show();
|
||||
jQuery(".addAlbumEmptyCenter").hide();
|
||||
jQuery(".addAlbumEmptyCenter").css( "height", "auto" );
|
||||
jQuery(".addAlbumFormParent").attr( "style", "display: block !important;" );
|
||||
|
||||
var categorySelectedId = jQuery("select[name=category] option:selected").val();
|
||||
var categorySelectedPath = jQuery("select[name=category]")[0].selectize.getItem(categorySelectedId).text();
|
||||
jQuery('.selectedAlbum').show().find('span').html(categorySelectedPath);
|
||||
jQuery('.selectAlbumBlock').hide();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -127,14 +136,21 @@ jQuery(document).ready(function(){
|
||||
init : {
|
||||
// update custom button state on queue change
|
||||
QueueChanged : function(up) {
|
||||
jQuery('#addFiles').addClass("addFilesButtonChanged");
|
||||
jQuery('#startUpload').prop('disabled', up.files.length == 0);
|
||||
|
||||
if (up.files.length > 0) {
|
||||
jQuery('.plupload_filelist_footer').show();
|
||||
jQuery('.plupload_filelist').css("overflow-y", "scroll");
|
||||
}
|
||||
|
||||
if (up.files.length == 0) {
|
||||
jQuery('#addFiles').removeClass("addFilesButtonChanged");
|
||||
jQuery('.plupload_filelist_footer').hide();
|
||||
jQuery('.plupload_filelist').css("overflow-y", "hidden");
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
UploadProgress: function(up, file) {
|
||||
jQuery('#uploadingActions .progressbar').width(up.total.percent+'%');
|
||||
Piecon.setProgress(up.total.percent);
|
||||
@@ -148,7 +164,7 @@ jQuery(document).ready(function(){
|
||||
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();
|
||||
jQuery('.selectedAlbum').show().find('span').html(categorySelectedPath);
|
||||
|
||||
// warn user if she wants to leave page while upload is running
|
||||
jQuery(window).bind('beforeunload', function() {
|
||||
@@ -246,10 +262,12 @@ jQuery(document).ready(function(){
|
||||
</div>
|
||||
|
||||
<div id="photosAddContent">
|
||||
<div class="addAlbumEmpty">
|
||||
<div class="addAlbumEmptyTitle">{'Welcome!'|translate}</div>
|
||||
<div class="addAlbumEmptyCenter">
|
||||
<div class="addAlbumEmpty"{if $NB_ALBUMS > 0} style="display:none;"{/if}>
|
||||
<div class="addAlbumEmptyTitle">{'Welcome!'|translate}</div>
|
||||
<p class="addAlbumEmptyInfos">{'Piwigo requires an album to add photos.'|translate}</p>
|
||||
<a href="#" data-add-album="category" title="{'Create a first album'|translate}">{'Create a first album'|translate}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="infos" style="display:none"><i class="eiw-icon icon-ok"></i></div>
|
||||
@@ -266,12 +284,6 @@ 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">
|
||||
<ul>
|
||||
@@ -284,20 +296,20 @@ jQuery(document).ready(function(){
|
||||
{/if}
|
||||
|
||||
|
||||
<form id="uploadForm" enctype="multipart/form-data" method="post" action="{$form_action}">
|
||||
<fieldset class="selectAlbum" style="display:none">
|
||||
<form id="uploadForm" enctype="multipart/form-data" method="post" action="{$form_action}"{if $NB_ALBUMS == 0} style="display:none;"{/if}>
|
||||
<fieldset class="selectAlbum">
|
||||
<legend>{'Drop into album'|@translate}</legend>
|
||||
<div class="selectedAlbum" style="display: none"><span class="icon-sitemap"></span></div>
|
||||
<div class="selectAlbumBlock" style="display:none">
|
||||
<div class="selectAlbumBlock">
|
||||
<a href="#" data-add-album="category" title="{'create a new album'|@translate}" class="icon-plus"></a>
|
||||
<span id="albumSelection" style="display:none">
|
||||
<span id="albumSelection">
|
||||
<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>
|
||||
{*
|
||||
<p class="showFieldset"><a id="showPermissions" href="#">{'Manage Permissions'|@translate}</a></p>
|
||||
|
||||
<fieldset id="permissions" style="display:none">
|
||||
<legend>{'Who can see these photos?'|@translate}</legend>
|
||||
@@ -306,8 +318,8 @@ jQuery(document).ready(function(){
|
||||
{html_options options=$level_options selected=$level_options_selected}
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="selectFiles" style="display:none">
|
||||
*}
|
||||
<fieldset class="selectFiles">
|
||||
<legend>{'Select files'|@translate}</legend>
|
||||
<div class="selectFilesButtonBlock">
|
||||
<button id="addFiles" class="buttonLike">{'Add Photos'|translate}<i class="icon-plus-circled"></i></button>
|
||||
@@ -315,9 +327,8 @@ jQuery(document).ready(function(){
|
||||
{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}
|
||||
<p id="uploadWarningsSummary">{'Allowed file types: %s.'|@translate:$upload_file_types}</p>
|
||||
<p>
|
||||
{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}
|
||||
@@ -338,7 +349,7 @@ jQuery(document).ready(function(){
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="startUpload" class="buttonLike icon-upload" disabled style="display:none">{'Start Upload'|translate}</button>
|
||||
<button id="startUpload" class="buttonLike icon-upload" disabled>{'Start Upload'|translate}</button>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
@@ -661,7 +661,7 @@ img.ui-datepicker-trigger {
|
||||
}
|
||||
|
||||
#photosAddContent P {
|
||||
margin:0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#photosAddContent TH {
|
||||
@@ -677,7 +677,7 @@ img.ui-datepicker-trigger {
|
||||
width:50%;
|
||||
}
|
||||
|
||||
html, body {height:100%; margin:0; padding:0;}
|
||||
html, body {height:100; min-height: 100%; margin:0; padding:0;}
|
||||
#the_page {min-height:100%; position:absolute; width:100%; padding:0;margin:0;}
|
||||
|
||||
#pwgMain {
|
||||
@@ -1230,8 +1230,8 @@ LEGEND {
|
||||
#uploadBoxes {margin-top:20px;}
|
||||
#addUploadBox {margin-bottom:2em;}
|
||||
|
||||
p.uploadInfo {text-align:left;font-size:90%;color:#999;}
|
||||
p#uploadWarningsSummary {text-align:left;margin-bottom:1em;font-size:100%;}
|
||||
p.uploadInfo {text-align:left;}
|
||||
p#uploadWarningsSummary {text-align:left;}
|
||||
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;}
|
||||
@@ -1243,7 +1243,7 @@ a#showPermissions:hover {text-decoration: none;}
|
||||
#uploadForm .plupload_buttons, #uploadForm .plupload_progress { display:none !important; }
|
||||
#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 #addFiles { margin-right:10px; float:left; height: 45.6px;}
|
||||
#uploadForm #uploadingActions { margin:10px 10px 10px 15px; }
|
||||
#uploadForm .big-progressbar { vertical-align:middle; display:inline-block; margin-left:10px; }
|
||||
|
||||
@@ -1594,7 +1594,7 @@ fieldset#environment legend i[class*="icon-"] {
|
||||
transition: all 125ms ease-out;
|
||||
}
|
||||
|
||||
#cboxLoadedContent input[type="submit"] {margin-bottom: 30px; float: none;}
|
||||
#cboxLoadedContent input[type="submit"] {margin-bottom: 20px; float: none;}
|
||||
|
||||
.selectAlbum, #permissions, .selectFiles {border: 0;}
|
||||
#permissions {display: none!important;}
|
||||
@@ -1612,7 +1612,7 @@ fieldset#environment legend i[class*="icon-"] {
|
||||
.selectize-control.single .selectize-input {border-radius: 0; font-weight: bold;font-size: 12px;}
|
||||
.buttonLike {padding: 8px 10px; margin-left: 5px;}
|
||||
.selectFilesButtonBlock {display: flex; margin-top: 10px;}
|
||||
.selectFilesinfo {margin-top: 10px; margin-left: 15px;}
|
||||
.selectFilesinfo {margin-left: 15px; font-size: 90%; color: #999; display: flex; flex-direction: column; justify-content: center;}
|
||||
#uploader {margin-top: 25px; font-weight: bold !important;}
|
||||
.plupload_filelist_header {display: none;}
|
||||
.plupload_filelist {scrollbar-width: thin!important;}
|
||||
@@ -1627,16 +1627,16 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
#photosAddContent .Addedphotos {border: none; margin-top: 35px;}
|
||||
.plupload_upload_status {}
|
||||
|
||||
.addAlbumEmpty {text-align: center; margin-top: 10%;}
|
||||
.addAlbumEmpty {text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
|
||||
.addAlbumEmptyCenter {position: relative; margin: auto; height: calc(100vh - 200px);}
|
||||
.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; font-weight: bold; font-size: 14px;}
|
||||
.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;}
|
||||
#cboxLoadedContent {height: auto !important; padding: 20px 20px 20px 20px !important;}
|
||||
.buttonSeparator {font-weight: bold;}
|
||||
.popinButtons {text-align: right; padding-top: 24px;}
|
||||
.popinButtons {text-align: right; margin-top: 24px;}
|
||||
.popinButtons input[type="submit"] {margin-right: 0;}
|
||||
#albumCreationLoading {
|
||||
background-color: #ffa744;
|
||||
@@ -1646,7 +1646,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
font-weight: bold;
|
||||
display: none;
|
||||
}
|
||||
.popinField {margin-top: 30px;}
|
||||
.popinField {margin-top: 30px; }
|
||||
.popinField.addAlbumFormParent {margin-top: 0;}
|
||||
.popinFieldLabel {display: block; margin-bottom: 5px;}
|
||||
.selectedAlbum {margin-top: 10px; margin-left: 5px;}
|
||||
@@ -1662,4 +1662,4 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
margin-right: 12px;
|
||||
}
|
||||
#addFiles i::before {margin-left: 13px; font-size: 15px;}
|
||||
.plupload_filelist_footer {display: none;}
|
||||
.plupload_filelist_footer {display: none;}
|
||||
|
||||
@@ -21,7 +21,7 @@ h2 { color: #ccc; }
|
||||
right: 0;
|
||||
width: 550px;
|
||||
}
|
||||
html, body { min-height: 100%; }
|
||||
html, body { min-height: 100%; height: 100%;}
|
||||
|
||||
body {
|
||||
background-color:#444;
|
||||
@@ -306,7 +306,6 @@ div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-co
|
||||
|
||||
.big-progressbar {
|
||||
background: #3c3939;
|
||||
border: 1px solid #3C3C3C;
|
||||
}
|
||||
|
||||
/* Album Properties */
|
||||
@@ -401,7 +400,6 @@ a#showPermissions {color: #D6D6D6; border: 1px solid #D6D6D6; background-color:
|
||||
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: #444444 !important; scrollbar-color: #555 #444444!important;}
|
||||
@@ -417,4 +415,6 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
#cboxTitle {color: #7f7f7f !important;}
|
||||
#addAlbumForm {color: #999;}
|
||||
.selectedAlbum span {background-color: #555; color: #999;}
|
||||
#uploadForm li.plupload_droptext {background-color: #343434!important; color: #777 !important;}
|
||||
#uploadForm li.plupload_droptext {background-color: #343434!important; color: #777 !important;}
|
||||
.addFilesButtonChanged {background-color: #888;}
|
||||
.addFilesButtonChanged:hover {background-color: #777;}
|
||||
Reference in New Issue
Block a user