From edb2aa29d75d3b1ed972472c66274933ce1e86bd Mon Sep 17 00:00:00 2001 From: Milan Date: Sat, 5 Oct 2019 14:21:33 +0200 Subject: [PATCH] redesign image editor - remove zoom - separate setting public/private from edit form - prevent assigning image without it has been published - prevent publishing image without licence - show buttons depending on license state - reload view on state change - gray out not-selected images --- .../css/{image_manager.css => image.css} | 8 +- website/agenda/planung/image.cgi | 7 ++ website/agenda/planung/js/image.js | 78 +++++++------------ website/agenda/planung/pot/de/image.po | 56 ++++++++++--- website/agenda/planung/pot/en/image.po | 52 ++++++++++--- .../agenda/planung/templates/edit_image.html | 42 ++++++---- .../planung/templates/image-upload.html | 28 +++---- website/agenda/planung/templates/image.html | 66 +++++++--------- 8 files changed, 204 insertions(+), 133 deletions(-) rename website/agenda/planung/css/{image_manager.css => image.css} (93%) diff --git a/website/agenda/planung/css/image_manager.css b/website/agenda/planung/css/image.css similarity index 93% rename from website/agenda/planung/css/image_manager.css rename to website/agenda/planung/css/image.css index 42b7079..7ddbb31 100644 --- a/website/agenda/planung/css/image_manager.css +++ b/website/agenda/planung/css/image.css @@ -53,6 +53,10 @@ input.field{ box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15); } +#content div.image.inactive{ + opacity:0.5; +} + #imageEditor{ min-height:800px; height:100%; @@ -67,7 +71,7 @@ input.field{ } #content label{ - margin-top:1rem; + margin-top: 1rem; text-transform: uppercase; - color:#333; + color:#999; } diff --git a/website/agenda/planung/image.cgi b/website/agenda/planung/image.cgi index aa51a88..14a7f3e 100755 --- a/website/agenda/planung/image.cgi +++ b/website/agenda/planung/image.cgi @@ -229,6 +229,13 @@ sub show_image { # print STDERR $template_params->{loc} = localization::get( $config, { user => $params->{presets}->{user}, file => 'image' } ); + + my $label_key = 'label_assign_to_'.$params->{target}; + $template_params->{label_assign_to_by_label} = $template_params->{loc}->{$label_key}; + + $label_key = 'label_warn_not_public_'.$params->{target}; + $template_params->{label_warn_not_public_by_label} = $template_params->{loc}->{$label_key}; + $template_params = uac::set_template_permissions( $permissions, $template_params ); $template_params->{no_results} = 1 if scalar @$results == 0; diff --git a/website/agenda/planung/js/image.js b/website/agenda/planung/js/image.js index d99d191..8e4bcac 100644 --- a/website/agenda/planung/js/image.js +++ b/website/agenda/planung/js/image.js @@ -1,7 +1,4 @@ -var windowOffsetX=0; -var windowOffsetY=0; - // get current selected tab by tabs-id function getSelectedTab(id){ var selector = '#'+id+" li.ui-tabs-active a"; @@ -10,13 +7,15 @@ function getSelectedTab(id){ } function setActiveImage(elem){ + if ( !elem ) elem = $('div.images div.image').first(); $('div.image').removeClass("active"); + $('div.image').addClass("inactive"); + elem.addClass("active"); + elem.removeClass("inactive"); +} - if (elem){ - $(elem).addClass("active"); - }else{ - $('div.images div.image').first().addClass("active"); - } +function updateActiveImage(){ + $('div.images div.image.active').click(); } // open dialog to show or edit image properties @@ -63,13 +62,23 @@ function searchImage(target, project_id, studio_id, series_id, event_id, pid){ load(url); } +// disable public, save and update form on success +function depublishImage(id, filename){ + $('#save_img_'+id+' input[name="public"]').val("0"); + saveImage(id, filename); +} +// enable public and save and update form on success +function publishImage(id, filename){ + $('#save_img_'+id+' input[name="public"]').val("1"); + saveImage(id, filename); +} // save image function saveImage(id, filename) { $('#imageEditor #status').html(''); - console.log("save image "+id); + console.log("save image "+id+" "); var url='image.cgi?save_image='+filename+'&project_id='+project_id+'&studio_id='+studio_id; $.post( @@ -77,22 +86,21 @@ function saveImage(id, filename) { $("#save_img_"+id).serialize(), function(data){ var errorFound=0; - - var lines=data.split(/\n/); - for (index in lines){ - var line=lines[index]; - if(contains(line,'ERROR:')){ - //add error field - if( $('#imageEditor #status .error').length==0 ){ - $('#imageEditor #status').append('
'); + data.split(/\n/).forEach( + function(line){ + if(contains(line, 'ERROR:')){ + //add error field + if( $('#imageEditor #status .error').length==0 ){ + $('#imageEditor #status').append('
'); + } + $('#imageEditor #status div.error').append(line); + errorFound++; } - $('#imageEditor #status div.error').append(line); - errorFound++; - } - }; - //console.log(data); + } + ); if (errorFound==0){ $('#imageEditor #status').append('
saved
'); + updateActiveImage(); } hideImageDetails('img_'+id, filename); } @@ -128,30 +136,6 @@ function hideImageDetails(id, filename){ return false; } -// zoom all images in -function increaseImageSize(){ - var value=$('#content div.image').css('width'); - value=value.replace(/[^0-9]/g,''); - if(value>200)return; - value=parseInt(value*1.3); - $('#content div.image').css('width', value+'px'); - $('#content div.image div').css('width', (value-12)+'px'); - $('#content div.image').css('height', value+'px'); - $('#content div.image').css('background-size', value+'px'); -} - -// zoom all images out -function decreaseImageSize(){ - var value=$('#content div.image').css('width'); - value=value.replace(/[^0-9]/g,''); - if(value<50)return; - value=parseInt(value/1.3); - $('#content div.image').css('width', value+'px'); - $('#content div.image div').css('width', (value-12)+'px'); - $('#content div.image').css('height', value+'px'); - $('#content div.image').css('background-size', value+'px'); -} - function selectImage( searchValue, imageUrl, target, project_id, studio_id, series_id, event_id, pid){ searchValue = searchValue.replace(/[^a-zA-Z0-9]/g,'%'); @@ -205,10 +189,8 @@ $(document).ready( $('div.images').on( 'click', 'div.image', function(){ var elem = $(this); - console.log(elem) var filename = elem.attr("filename"); elem = elem.parent(); - console.log(elem) var target = elem.attr("target"); var projectId = elem.attr("projectId"); var studioId = elem.attr("studioId"); diff --git a/website/agenda/planung/pot/de/image.po b/website/agenda/planung/pot/de/image.po index af12714..42bc966 100644 --- a/website/agenda/planung/pot/de/image.po +++ b/website/agenda/planung/pot/de/image.po @@ -8,7 +8,7 @@ msgid "tab_edit" msgstr "Bearbeiten" msgid "tab_upload" -msgstr "Hochladen" +msgstr "Neues Bild" msgid "button_upload" msgstr "Hochladen" @@ -16,18 +16,24 @@ msgstr "Hochladen" msgid "button_search" msgstr "Suchen" -msgid "button_zoom_in" -msgstr "Vergrößern" - -msgid "button_zoom_out" -msgstr "Verkleinern" - msgid "button_save" msgstr "Speichern" msgid "button_delete" msgstr "Löschen" +msgid "button_properties" +msgstr "Eigenschaften" + +msgid "button_publish" +msgstr "Veröffentlichen" + +msgid "button_depublish" +msgstr "Depublizieren" + +msgid "label_warn_unknown_licence" +msgstr "Kann nicht veröffentlicht werden, da keine Lizenz angegeben wurde" + msgid "label_name" msgstr "Name" @@ -64,9 +70,37 @@ msgstr "veröffentlicht" msgid "label_file" msgstr "Datei" -msgid "label_licence_missing" -msgstr "bitte eintragen" +msgid "label_name_required" +msgstr "Bitte Feld eintragen" + +msgid "label_licence_required" +msgstr "Bild kann ohne Lizenzangabe nicht veröffentlicht werden" + +msgid "label_mandatory_field" +msgstr "bitte füllen Sie dieses Feld aus" + +msgid "label_assign_to_event" +msgstr "Dieses Bild für Sendung nutzen" + +msgid "label_assign_to_series" +msgstr "Dieses Bild für Sendereihe nutzen" + +msgid "label_assign_to_studio" +msgstr "Dieses Bild für Studio nutzen" + +msgid "label_assign_to_project" +msgstr "Dieses Bild für Projekt nutzen" + +msgid "label_warn_not_public_event" +msgstr "Kann Sendung nicht zugewiesen werden, da nicht veröffentlicht" + +msgid "label_warn_not_public_series" +msgstr "Kann Sendereihe nicht zugewiesen werden, da nicht veröffentlicht" + +msgid "label_warn_not_public_studio" +msgstr "Kann Studio nicht zugewiesen werden, da nicht veröffentlicht" + +msgid "label_warn_not_public_project" +msgstr "Kann Projekt nicht zugewiesen werden, da nicht veröffentlicht" -msgid "select_image" -msgstr "Dieses Bild zuweisen" diff --git a/website/agenda/planung/pot/en/image.po b/website/agenda/planung/pot/en/image.po index bd89390..e17c9fb 100644 --- a/website/agenda/planung/pot/en/image.po +++ b/website/agenda/planung/pot/en/image.po @@ -1,3 +1,4 @@ + msgid "region" msgstr "en" @@ -16,18 +17,24 @@ msgstr "upload" msgid "button_search" msgstr "search" -msgid "button_zoom_in" -msgstr "zoom in" - -msgid "button_zoom_out" -msgstr "zoom out" - msgid "button_save" msgstr "save" msgid "button_delete" msgstr "delete" +msgid "button_properties" +msgstr "properties" + +msgid "button_publish" +msgstr "publish" + +msgid "button_depublish" +msgstr "hold back" + +msgid "label_warn_unknown_licence" +msgstr "Cannot be pusblished without setting a licence" + msgid "label_name" msgstr "name" @@ -64,9 +71,36 @@ msgstr "published" msgid "label_file" msgstr "file" -msgid "label_licence_missing" +msgid "label_name_required" msgstr "please fill in" -msgid "select_image" -msgstr "select this image" +msgid "label_licence_required" +msgstr "image cannot be published without license" + +msgid "label_mandatory_field" +msgstr "please fill in" + +msgid "label_assign_to_event" +msgstr "use image for event" + +msgid "label_assign_to_series" +msgstr "use image for series" + +msgid "label_assign_to_studio" +msgstr "use image for studio" + +msgid "label_assign_to_project" +msgstr "use image for project" + +msgid "label_warn_not_public_event" +msgstr "Cannot be assigned to event without have been published" + +msgid "label_warn_not_public_series" +msgstr "Cannot be assigned to series without have been published" + +msgid "label_warn_not_public_studio" +msgstr "Cannot be assigned to studio without have been published" + +msgid "label_warn_not_public_project" +msgstr "Cannot be assigned to project without have been published" diff --git a/website/agenda/planung/templates/edit_image.html b/website/agenda/planung/templates/edit_image.html index aeb8591..01f0fd2 100644 --- a/website/agenda/planung/templates/edit_image.html +++ b/website/agenda/planung/templates/edit_image.html @@ -9,9 +9,25 @@ found no image
- + + + + + + + +
+ +
+ + + +
+
- + checked="checked" value="1"value="0" />
+
-
- -
-
+

-
+
- - checked="checked" value="1"value="0" />
+
+
@@ -43,10 +57,12 @@ found no image -
-
-
- : {{|}}
+ + diff --git a/website/agenda/planung/templates/image-upload.html b/website/agenda/planung/templates/image-upload.html index a5b9c9d..94146df 100644 --- a/website/agenda/planung/templates/image-upload.html +++ b/website/agenda/planung/templates/image-upload.html @@ -37,29 +37,29 @@ - Name: - - - - Beschreibung: - + + + - - - - - checked="checked" value="1"value="0" /> + + - Datei - + + + + + + + + - + diff --git a/website/agenda/planung/templates/image.html b/website/agenda/planung/templates/image.html index 930d2fb..1f43209 100644 --- a/website/agenda/planung/templates/image.html +++ b/website/agenda/planung/templates/image.html @@ -1,5 +1,5 @@ - + @@ -72,49 +72,43 @@
-
- - -
-
- - - -
-
- -
- -
- -
-
-
- +
+
+
+ + + +
+
+
+ +
+
+
+ +
-
- - +