From c79a7e14d2a18fb70315ecee070872b70191ae53 Mon Sep 17 00:00:00 2001 From: Zacharie Guet Date: Thu, 2 Jun 2022 13:39:21 +0200 Subject: [PATCH] issue #389 Adding an optional parameter to the format upload page * When using the url parameter formats={photo id}, we can upload format for this picture only Exemple admin.php?page=photos_add&formats=2 * Adding a new css compnent : info-framed * Small design and bug fixes --- admin/photos_add_direct.php | 62 ++++++- .../themes/default/css/components/general.css | 55 ++++++ .../default/template/photos_add_direct.tpl | 157 +++++++++++------- .../default/template/picture_modify.tpl | 18 +- admin/themes/default/theme.css | 49 +----- admin/themes/roma/theme.css | 13 +- 6 files changed, 236 insertions(+), 118 deletions(-) diff --git a/admin/photos_add_direct.php b/admin/photos_add_direct.php index ed2f1cd19..ea812b0e4 100644 --- a/admin/photos_add_direct.php +++ b/admin/photos_add_direct.php @@ -42,6 +42,62 @@ DELETE FROM '.CADDIE_TABLE.' redirect(get_root_url().'admin.php?page=batch_manager&filter=prefilter-caddie'); } +// +-----------------------------------------------------------------------+ +// | Formats Mode | +// +-----------------------------------------------------------------------+ + +$display_formats = $conf['enable_formats'] && isset($_GET['formats']); + +$have_formats_original = false; +$formats_original_info = array(); + +// If URL parameter isn't empty +if ($display_formats && $_GET['formats']) +{ + check_input_parameter('formats', $_GET, false, PATTERN_ID, false); + + $formats_original_info = get_image_infos($_GET['formats']); + if ($formats_original_info) + { + $src_image = new SrcImage($formats_original_info); + + $formats_original_info['src'] = DerivativeImage::url(IMG_SQUARE, $src_image); + + // Fetch actual formats + $query = ' +SELECT * + FROM '.IMAGE_FORMAT_TABLE.' + WHERE image_id = '.$formats_original_info['id'].' +;'; + $formats = query2array($query); + + if (!empty($formats)) + { + $format_strings = array(); + + foreach ($formats as $format) + { + $format_strings[] = sprintf('%s (%.2fMB)', $format['ext'], $format['filesize']/1024); + } + + $formats_original_info['formats'] = l10n('Formats: %s', implode(', ', $format_strings)); + } + + $extTab = explode('.',$formats_original_info['file']); + + $formats_original_info['ext'] = l10n('%s file type',strtoupper(end($extTab))); + + $formats_original_info['u_edit'] = get_root_url().'admin.php?page=photo-'.$formats_original_info['id']; + + $have_formats_original = true; + } + else + { + $page['errors'][] = l10n('The original picture selected dosen\'t exists.'); + } + +} + // +-----------------------------------------------------------------------+ // | prepare form | // +-----------------------------------------------------------------------+ @@ -51,15 +107,17 @@ include_once(PHPWG_ROOT_PATH.'admin/include/photos_add_direct_prepare.inc.php'); // +-----------------------------------------------------------------------+ // | sending html code | // +-----------------------------------------------------------------------+ -trigger_notify('loc_end_photo_add_direct'); -$display_formats = $conf['enable_formats'] && isset($_GET['formats']); +trigger_notify('loc_end_photo_add_direct'); $template->assign(array( 'ENABLE_FORMATS' => $conf['enable_formats'], 'DISPLAY_FORMATS' => $display_formats, + 'HAVE_FORMATS_ORIGINAL' => $have_formats_original, + 'FORMATS_ORIGINAL_INFO' => $formats_original_info, 'SWITCH_MODE_URL' => get_root_url().'admin.php?page=photos_add'.($display_formats ? '':'&formats'), 'format_ext' => implode(',', $conf['format_ext']), + 'str_format_ext' => implode(', ', $conf['format_ext']), )); $template->assign_var_from_handle('ADMIN_CONTENT', 'photos_add'); diff --git a/admin/themes/default/css/components/general.css b/admin/themes/default/css/components/general.css index b489b6e96..f8f01c938 100644 --- a/admin/themes/default/css/components/general.css +++ b/admin/themes/default/css/components/general.css @@ -191,4 +191,59 @@ or (generated by selectize.js) .advanced-filter-item-container .selectize-control .selectize-input .item { padding-right: 0 !important; +} + +/* ------------- +Info Framed +------------- + +.info-framed + .info-framed-icon + i or img + .info-framed-container + .info-framed-title + div + div + ... + +*/ + +.info-framed { + display: flex; + border: #EEE solid 2px; + padding: 20px; + border-radius: 5px; + margin: 0px 10px; + align-items: center; +} + +a.info-framed:hover { + color: inherit; + text-decoration: none; +} + +.info-framed-icon { + font-size: 34px; + margin-right: 20px; + display: flex; + color: #3c3c3c; +} + +.info-framed-icon i { + margin: auto; +} + +.info-framed-container { + margin: 0; + display: inline-table; +} + +.info-framed-container > * { + margin: 0; + word-wrap: anywhere; +} + +.info-framed-title { + color: #3c3c3c; + font-weight: bold; } \ No newline at end of file diff --git a/admin/themes/default/template/photos_add_direct.tpl b/admin/themes/default/template/photos_add_direct.tpl index 4cee52b95..dfb205965 100644 --- a/admin/themes/default/template/photos_add_direct.tpl +++ b/admin/themes/default/template/photos_add_direct.tpl @@ -30,6 +30,8 @@ {footer_script} const formatMode = {if $DISPLAY_FORMATS}true{else}false{/if}; +const haveFormatsOriginal = {if $HAVE_FORMATS_ORIGINAL}true{else}false{/if}; +const originalImageId = haveFormatsOriginal? '{$FORMATS_ORIGINAL_INFO['id']}' : -1; {* *} if (!formatMode) { @@ -74,6 +76,7 @@ if (!formatMode) { var pwg_token = '{$pwg_token}'; var photosUploaded_label = "{'%d photos uploaded'|translate}"; +var formatsUploaded_label = "{'%d formats uploaded for %d photos'|translate}"; var batch_Label = "{'Manage this set of %d photos'|translate}"; var albumSummary_label = "{'Album "%s" now contains %d photos'|translate|escape}"; var str_format_warning = "{'Error when trying to detect formats'|translate}"; @@ -123,7 +126,7 @@ jQuery(document).ready(function(){ }, // Rename files by clicking on their titles - // rename: true, + rename: formatMode, // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that) dragdrop: true, @@ -165,7 +168,7 @@ jQuery(document).ready(function(){ } }, - FilesAdded: function(up, files) { + FilesAdded: async function(up, files) { // Création de la liste avec plupload_id : image_name fileNames = {}; files.forEach((file) => { @@ -173,64 +176,70 @@ jQuery(document).ready(function(){ }); if (formatMode) { - //ajax qui renvois les id des images dans la gallerie. - jQuery.ajax({ - url: "ws.php?format=json&method=pwg.images.formats.searchImage", - type: "POST", - data: { - category_id: jQuery("select[name=category] option:selected").val(), - filename_list: JSON.stringify(fileNames), - }, - success: function(res) { + // If no original image is specified + if (!haveFormatsOriginal) { + const images_search = await new Promise((res, rej) => { + //ajax qui renvois les id des images dans la gallerie. + jQuery.ajax({ + url: "ws.php?format=json&method=pwg.images.formats.searchImage", + type: "POST", + data: { + category_id: jQuery("select[name=category] option:selected").val(), + filename_list: JSON.stringify(fileNames), + }, + success: function(result) { + let data = JSON.parse(result); + res(data.result) + } + }) + }) - const notFound = []; - const multiple = [] + const notFound = []; + const multiple = []; - //les data qui sont renvoyées avec plupload_id : piwigo_id - let data = JSON.parse(res); + files.forEach((f) => { + const search = images_search[f.id]; + if (search.status == "found") + f.format_of = search.image_id; + else { + if (search.status == "multiple") + multiple.push(f.name); + else + notFound.push(f.name); + up.removeFile(f.id); + } + }) - const images_search = data.result; - // data = {o_1g369r2011io3v2k1hmn1fc11m7a : 42, o_1g36a8kgutjjajjpb9agvb16a : 69}; + files.filter(f => images_search[f.id].status === "found"); - files.forEach((f) => { - const search = images_search[f.id]; - if (search.status == "found") - f.format_of = search.image_id; - else { - if (search.status == "multiple") - multiple.push(f.name); - else - notFound.push(f.name); - up.removeFile(f.id); - } + // If a file is not found or found more than one time + if (notFound.length || multiple.length) { + const [multStr, notFoundStr] = [multiple, notFound].map((tab) => { + //Get names + tab = tab.map(f => f.slice(0,f.indexOf('.'))) + // Remove duplicates + tab = tab.filter((f,i) => i === tab.indexOf(f)) + + // Add "and X more" if necessary + if (tab.length > 5) { + tab[5] = str_and_X_others.replace('%d', tab.length - 5); + tab = tab.splice(0,6); + } + return tab; }) - files.filter(f => images_search[f.id].status === "found"); - - if (notFound.length || multiple.length) { - const [multStr, notFoundStr] = [multiple, notFound].map((tab) => { - //Get names - tab = tab.map(f => f.slice(0,f.indexOf('.'))) - // Remove duplicates - tab = tab.filter((f,i) => i === tab.indexOf(f)) - - // Add "and X more" if necessary - if (tab.length > 5) { - tab[5] = str_and_X_others.replace('%d', tab.length - 5); - tab = tab.splice(0,6); - } - return tab; - }) - - $.alert({ - title: str_format_warning, - content : (notFound.length ? `

${str_format_warning_notFound.replace('%s', notFoundStr.join(', '))}

` : "") - +(multiple.length ? `

${str_format_warning_multiple.replace('%s', multStr.join(', '))}

` : ""), - ...jConfirm_warning_options - }) - } + $.alert({ + title: str_format_warning, + content : (notFound.length ? `

${str_format_warning_notFound.replace('%s', notFoundStr.join(', '))}

` : "") + +(multiple.length ? `

${str_format_warning_multiple.replace('%s', multStr.join(', '))}

` : ""), + ...jConfirm_warning_options + }) } - }); + } else { //If an original image is specified + files.forEach((f) => { + f.format_of = originalImageId; + }) + } } }, @@ -323,17 +332,24 @@ jQuery(document).ready(function(){ } }); - jQuery(".selectAlbum, .selectFiles, #permissions, .showFieldset").hide(); + jQuery("#uploadForm, #permissions, .showFieldset").hide(); - jQuery(".infos").append(''); + const infoText = formatMode? + sprintf(formatsUploaded_label, uploadedPhotos.length, [...new Set(files.map(f => f.format_of))].length) + : sprintf(photosUploaded_label, uploadedPhotos.length) - html = sprintf( - albumSummary_label, - ''+uploadCategory.label+'', - parseInt(uploadCategory.nb_photos) - ); + jQuery(".infos").append(''); - jQuery(".infos ul").append('
  • '+html+'
    • '); + + if (!formatMode) { + html = sprintf( + albumSummary_label, + ''+uploadCategory.label+'', + parseInt(uploadCategory.nb_photos) + ); + + jQuery(".infos ul").append('
  • '+html+'
    • '); + } jQuery(".infos").show(); @@ -418,6 +434,20 @@ jQuery(document).ready(function(){ {'create a new album'|@translate} + {elseif $HAVE_FORMATS_ORIGINAL} +
    + {'Picture to associate formats with'|@translate} + +
    + +
    +
    +
    {$FORMATS_ORIGINAL_INFO['name']}
    + {if isset($FORMATS_ORIGINAL_INFO['formats'])}
    {$FORMATS_ORIGINAL_INFO['formats']}
    {/if} +
    {$FORMATS_ORIGINAL_INFO.ext}
    +
    +     +
    {/if} {*

    {'Manage Permissions'|@translate}

    @@ -442,10 +472,11 @@ jQuery(document).ready(function(){ {if not $DISPLAY_FORMATS} {'Allowed file types: %s.'|@translate:$upload_file_types} {else} - {'Allowed file types: %s.'|@translate:$format_ext} + {'Allowed file types: %s.'|@translate:$str_format_ext} + {if !$HAVE_FORMATS_ORIGINAL}

    {'The original picture will be detected with the filename (without extension).'|@translate}

    {/if} {/if}

    -

    +

    {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} diff --git a/admin/themes/default/template/picture_modify.tpl b/admin/themes/default/template/picture_modify.tpl index a2d6dd7c3..1245890fd 100644 --- a/admin/themes/default/template/picture_modify.tpl +++ b/admin/themes/default/template/picture_modify.tpl @@ -115,24 +115,24 @@ $('#action-delete-picture').on('click', function() {
    -
    -
    - +
    +
    +
    -
    -
    {$INTRO.file}
    +
    +
    {$INTRO.file}
    {$INTRO.size}
    {if isset($INTRO.formats)}{$INTRO.formats} {/if}
    {$INTRO.ext}
    -
    -
    +
    +
    -
    -
    {$INTRO.date}
    +
    +
    {$INTRO.date}
    {$INTRO.age}
    {$INTRO.added_by}
    {$INTRO.stats}
    diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index e827ca809..c56527476 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -4023,41 +4023,6 @@ a#showPermissions:hover {text-decoration: none;} grid-template-columns: 50% 50%; } -.picture-infos-category { - display: flex; - border: #EEE solid 2px; - padding: 20px; - border-radius: 5px; - margin: 0px 10px; - align-items: center; -} - -.picture-infos-icon { - font-size: 34px; - margin-right: 20px; - display: flex; - color: #3c3c3c; -} - -.picture-infos-icon span { - margin: auto; -} - -.picture-infos-container { - margin: 0; - display: inline-table; -} - -.picture-infos-container div { - margin: 0; - word-wrap: anywhere; -} - -.picture-infos-title { - color: #3c3c3c; - font-weight: bold; -} - /* Album Manager */ #addAlbumForm { text-align:left; @@ -5712,10 +5677,14 @@ fieldset#environment legend i[class*="icon-"] { #cboxLoadedContent input[type="submit"] {margin-bottom: 20px; float: none;} -.selectAlbum, #permissions, .selectFiles {border: 0;} +#permissions, #uploadForm fieldset {border: 0;} #permissions {display: none!important;} -#permissions, .selectFiles {margin-top: 35px; margin-bottom: 20px;} -.format-mode .selectFiles {margin: auto;} +#permissions {margin-top: 35px; margin-bottom: 20px;} +#uploadForm fieldset:not(:last-child) {margin-bottom: 35px;} +#uploadForm fieldset:last-child {margin-bottom: 20px;} + +.originalPicture .info-framed {max-width: 400px;} + .selectAlbumBlock {display: flex; margin-left: 10px; margin-top: 10px;} /* .selectAlbumBlock span { margin-top: 15px; @@ -5770,7 +5739,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; display: flex; } #photosAddContent .Addedphotos a { - margin-right: 35px; + margin-right: 5px; display: flex; } #photosAddContent .Addedphotos .format-ext-name { @@ -5786,7 +5755,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; } #photosAddContent .Addedphotos .format-ext-name span { color: white; - font-size: 20px; + font-size: 16px; font-weight: bold; text-transform: uppercase; padding: 5px; diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css index 0f74f943f..62490e14a 100644 --- a/admin/themes/roma/theme.css +++ b/admin/themes/roma/theme.css @@ -371,12 +371,12 @@ div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-co color: #c1c1c1; } -.picture-infos-title, .picture-infos-icon { - color: #c1c1c1; +.info-framed-title, .info-framed-icon { + color: #c1c1c1 !important; } -.picture-infos-category { - border-color: #333; +.info-framed { + border-color: #333 !important; } /* Album edit */ @@ -1099,6 +1099,11 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; background-color:#0a0 !important; } +.jconfirmWarning .jconfirm-icon-c i { + color: #ffa744 !important; + background-color: #ffe9cf !important; +} + .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default { color: #777 !important; background-color: #222 !important;