From 97ef03eead44ddcbf4f5a6cd23bb834689e10080 Mon Sep 17 00:00:00 2001 From: Zacharie Date: Tue, 9 Jun 2020 16:25:17 +0200 Subject: [PATCH] Issue #1044 : Picture edition redesign * Add a larger and responsive image preview * Use Jconfirm popin for deletion confirmation * Change general actions to icons on the image preview --- admin/picture_modify.php | 4 +- .../default/template/picture_modify.tpl | 134 +++++++++++------- admin/themes/default/theme.css | 117 +++++++++++++-- admin/themes/roma/theme.css | 13 ++ 4 files changed, 206 insertions(+), 62 deletions(-) diff --git a/admin/picture_modify.php b/admin/picture_modify.php index 27663b7d0..4b146e9c4 100644 --- a/admin/picture_modify.php +++ b/admin/picture_modify.php @@ -235,7 +235,7 @@ $template->assign( 'PATH'=>$row['path'], - 'TN_SRC' => DerivativeImage::url(IMG_THUMB, $src_image), + 'TN_SRC' => DerivativeImage::url(IMG_MEDIUM, $src_image), 'FILE_SRC' => DerivativeImage::url(IMG_LARGE, $src_image), 'NAME' => @@ -246,6 +246,8 @@ $template->assign( 'DIMENSIONS' => @$row['width'].' * '.@$row['height'], + 'FORMAT' => ($row['width'] >= $row['height'])? 1:0,//0:horizontal, 1:vertical + 'FILESIZE' => @$row['filesize'].' KB', 'REGISTRATION_DATE' => format_date($row['date_available']), diff --git a/admin/themes/default/template/picture_modify.tpl b/admin/themes/default/template/picture_modify.tpl index 7aab2831a..4a6899610 100644 --- a/admin/themes/default/template/picture_modify.tpl +++ b/admin/themes/default/template/picture_modify.tpl @@ -7,6 +7,9 @@ {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_script id='jquery.confirm' load='footer' require='jquery' path='themes/default/js/plugins/jquery-confirm.min.js'} +{combine_css path="themes/default/js/plugins/jquery-confirm.min.css"} + {footer_script} (function(){ {* *} @@ -41,53 +44,86 @@ jQuery(function(){ {* *} jQuery("a.preview-box").colorbox({ photo: true }); + +str_are_you_sure = '{'Are you sure?'|translate}'; +str_yes = '{'Yes, delete'|translate}'; +str_no = '{'No, I have changed my mind'|translate}'; +url_delete = '{$U_DELETE}'; + +{literal} +$('#action-delete-picture').on('click', function() { + $.confirm({ + title: str_are_you_sure, + draggable: false, + titleClass: "groupDeleteConfirm", + theme: "modern", + content: "", + animation: "zoom", + boxWidth: '30%', + useBootstrap: false, + type: 'red', + animateFromElement: false, + backgroundDismiss: true, + typeAnimated: false, + buttons: { + confirm: { + text: str_yes, + btnClass: 'btn-red', + action: function () { + window.location.href = url_delete.replaceAll('amp;', ''); + } + }, + cancel: { + text: str_no + } + } + }); +}) +{/literal} + }()); {/footer_script}

{$TITLE} › {'Edit photo'|@translate} {$TABSHEET_TITLE}

-
+ +
+
+ + + + +
+ + {'Thumbnail'|translate} + +
+
+
+
+
+ +
+
+
{$INTRO.file}
+
{$INTRO.size}
+
{$INTRO.formats}
+
{$INTRO.id}
+
+
-
- {'Informations'|@translate} +
+
+ +
+
+
{$INTRO.add_date}
+
{$INTRO.added_by}
+
{$INTRO.stats}
+
+
+
- - - - - - - -
- {'Thumbnail'|translate} - - -
- - - -
- {'Properties'|@translate}

{'Title'|@translate} @@ -105,7 +141,7 @@ jQuery("a.preview-box").colorbox({ {'Creation date'|@translate}
-

@@ -125,7 +161,7 @@ jQuery("a.preview-box").colorbox({
+ name="represent[]" multiple style="width:100%;">

@@ -133,7 +169,7 @@ jQuery("a.preview-box").colorbox({
+ data-create="true" name="tags[]" multiple style="width:100%;">

@@ -150,10 +186,10 @@ jQuery("a.preview-box").colorbox({

-

- - -

-
+

+ + +

+
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index 50d27d508..9bacd7775 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -1760,26 +1760,118 @@ a#showPermissions:hover {text-decoration: none;} border:2px solid #ddd; } -#albumLinks { - vertical-align:top; - border-left:2px solid #ddd; - padding-left:10px; +#pictureModify { + display: flex; + margin: 0; + justify-content: space-evenly; } -#albumLinks ul, .photoLinks ul { - padding-left:0; +#picture-preview { + width: 35vw; + position: relative; + background-color: #3c3c3c; + height: 35vw; + flex-shrink: 0; + overflow: hidden; } -#albumLinks li, .photoLinks li { - list-style:none; +#picture-preview .preview-box{ + margin: 0; + position: absolute; + top: 50%; + -ms-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); + left: 50%; } -.photoLinks { - vertical-align:top; + +.picture-preview-actions { + position: absolute; + padding: 10px; + right: 0; + top: 0; + font-size: 18px; + z-index: 100; } -.photoLinks ul { - margin:0; +.picture-preview-actions a { + color: #ffffff; + padding: 5px; +} + +#picture-content { + width: 50%; +} + +#picture-content * { + text-align: left; +} + +#picture-content input[type=text], #picture-content textarea { + width: 100%; + background-color: #f8f8f8; + padding: 8px; + border-radius: 4px; + border-color: #DDD; + transition: ease 0.2s; +} + +#picture-content .date-input { + position: relative; +} + +#picture-content .date-input input{ + padding-left: 35px; + width: calc(100% - 28px); +} + +#picture-content .date-input i{ + position: absolute; + font-size: 20px; + top: 50%; + transform: translate(6px, -50%); + opacity: 0.6; +} + +#picture-content input:focus { + border-color: #888; +} + +#picture-infos { + display: flex; + justify-content: space-around; +} + +.picture-infos-category { + display: flex; + border: #EEE solid 2px; + padding: 20px; + border-radius: 5px; + margin: 5px; +} + +.picture-infos-icon { + font-size: 34px; + margin-right: 20px; + display: flex; + color: #3c3c3c; +} + +.picture-infos-icon span { + margin: auto; +} + +.picture-infos-container { + margin: 0; +} + +.picture-infos-container div { + margin: 0; +} + +.picture-infos-title { + color: #3c3c3c; + font-weight: bold; } /* Album Manager */ @@ -2914,6 +3006,7 @@ a.group_users { display:block; position:relative; } + .preview-box.icon-zoom-in:before { opacity:0; position:absolute; diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css index d00463283..e74680716 100644 --- a/admin/themes/roma/theme.css +++ b/admin/themes/roma/theme.css @@ -331,6 +331,19 @@ div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-co border-color:#333; } +#picture-content input[type=text], #picture-content textarea { + background-color: #444444; + border: 1px solid #666; +} + +.picture-infos-title, .picture-infos-icon { + color: #c1c1c1; +} + +.picture-infos-category { + border-color: #333; +} + .selectedComment {background-color:#555; color:#fff;} .groups .Group-name>p {