From 6e830826238f01a479456644629715f568cbe470 Mon Sep 17 00:00:00 2001 From: fmittag Date: Thu, 8 Oct 2015 18:09:11 +0200 Subject: [PATCH 1/2] made the image edit dialog preview the image, added some size hints --- .../ui/adminconsole/ImageCreateDialog.java | 9 +- .../gwt/ui/adminconsole/ImageDialog.java | 149 +++++++++++++----- .../gwt/ui/adminconsole/ImageEditDialog.java | 28 ++-- .../gwt/ui/shared/media/MediaConstants.java | 18 +++ 4 files changed, 145 insertions(+), 59 deletions(-) diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageCreateDialog.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageCreateDialog.java index 386a6642315..b6d343c111a 100644 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageCreateDialog.java +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageCreateDialog.java @@ -14,17 +14,20 @@ public class ImageCreateDialog extends ImageDialog { super(new Date(), new ImageParameterValidator(stringMessages), stringMessages, callback); createdAtLabel = new Label(creationDate.toString()); titleTextBox = createTextBox(null); - titleTextBox.setVisibleLength(50); + titleTextBox.setVisibleLength(40); subtitleTextBox = createTextBox(null); - subtitleTextBox.setVisibleLength(50); + subtitleTextBox.setVisibleLength(40); copyrightTextBox = createTextBox(null); - copyrightTextBox.setVisibleLength(50); + copyrightTextBox.setVisibleLength(40); widthInPxBox = createIntegerBox(null, 10); + widthInPxBox.setEnabled(false); heightInPxBox = createIntegerBox(null, 10); + heightInPxBox.setEnabled(false); List tags = new ArrayList<>(); if(initialTag != null && !initialTag.isEmpty()) { tags.add(initialTag); } tagsListEditor.setValue(tags); + image = null; } } diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageDialog.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageDialog.java index 308be6cbf77..2e6cf340e76 100644 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageDialog.java +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageDialog.java @@ -5,20 +5,25 @@ import java.util.Collections; import java.util.Date; import java.util.List; -import com.google.gwt.dom.client.Style.Position; -import com.google.gwt.dom.client.Style.Visibility; +import com.google.gwt.dom.client.Style.BorderStyle; +import com.google.gwt.dom.client.Style.Unit; import com.google.gwt.event.dom.client.LoadEvent; import com.google.gwt.event.dom.client.LoadHandler; import com.google.gwt.event.logical.shared.ValueChangeEvent; import com.google.gwt.event.logical.shared.ValueChangeHandler; import com.google.gwt.user.client.ui.Grid; +import com.google.gwt.user.client.ui.HorizontalPanel; import com.google.gwt.user.client.ui.Image; import com.google.gwt.user.client.ui.Label; +import com.google.gwt.user.client.ui.SimplePanel; import com.google.gwt.user.client.ui.TextBox; import com.google.gwt.user.client.ui.VerticalPanel; import com.google.gwt.user.client.ui.Widget; import com.sap.sailing.gwt.ui.client.StringMessages; import com.sap.sailing.gwt.ui.shared.media.MediaConstants; +import com.sap.sse.common.Util; +import com.sap.sse.common.Util.Pair; +import com.sap.sse.common.media.MediaTagConstants; import com.sap.sse.gwt.adminconsole.URLFieldWithFileUpload; import com.sap.sse.gwt.client.IconResources; import com.sap.sse.gwt.client.controls.IntegerBox; @@ -37,9 +42,9 @@ public abstract class ImageDialog extends DataEntryDialog { protected IntegerBox widthInPxBox; protected IntegerBox heightInPxBox; protected StringListInlineEditorComposite tagsListEditor; - - final Image image; - + protected Image image; + protected SimplePanel imageHolder; + protected static class ImageParameterValidator implements Validator { private StringMessages stringMessages; @@ -50,12 +55,39 @@ public abstract class ImageDialog extends DataEntryDialog { @Override public String getErrorMessage(ImageDTO imageToValidate) { String errorMessage = null; + Integer imageWidth = imageToValidate.getWidthInPx(); + Integer imageHeight = imageToValidate.getHeightInPx(); if(imageToValidate.getSourceRef() == null || imageToValidate.getSourceRef().isEmpty()) { errorMessage = stringMessages.pleaseEnterNonEmptyUrl(); + } else if(imageWidth == null || imageHeight == null) { + errorMessage = "The width and height of the image could not retrieved yet."; + } else if(imageToValidate.hasTag(MediaTagConstants.LOGO) && !isValidSize(imageWidth, imageHeight, MediaConstants.MIN_LOGO_IMAGE_WIDTH, + MediaConstants.MAX_LOGO_IMAGE_WIDTH, MediaConstants.MIN_LOGO_IMAGE_HEIGHT, MediaConstants.MAX_LOGO_IMAGE_HEIGHT)) { + errorMessage = getSizeErrorMessage("Logo", MediaConstants.MIN_LOGO_IMAGE_WIDTH, + MediaConstants.MAX_LOGO_IMAGE_WIDTH, MediaConstants.MIN_LOGO_IMAGE_HEIGHT, MediaConstants.MAX_LOGO_IMAGE_HEIGHT); + } else if(imageToValidate.hasTag(MediaTagConstants.TEASER) && !isValidSize(imageWidth, imageHeight, MediaConstants.MIN_EVENTTEASER_IMAGE_WIDTH, + MediaConstants.MAX_EVENTTEASER_IMAGE_WIDTH, MediaConstants.MIN_EVENTTEASER_IMAGE_HEIGHT, MediaConstants.MAX_EVENTTEASER_IMAGE_HEIGHT)) { + errorMessage = getSizeErrorMessage("Event-Teaser", MediaConstants.MIN_EVENTTEASER_IMAGE_WIDTH, + MediaConstants.MAX_EVENTTEASER_IMAGE_WIDTH, MediaConstants.MIN_EVENTTEASER_IMAGE_HEIGHT, MediaConstants.MAX_EVENTTEASER_IMAGE_HEIGHT); + } else if(imageToValidate.hasTag(MediaTagConstants.STAGE) && !isValidSize(imageWidth, imageHeight, MediaConstants.MIN_STAGE_IMAGE_WIDTH, + MediaConstants.MAX_STAGE_IMAGE_WIDTH, MediaConstants.MIN_STAGE_IMAGE_HEIGHT, MediaConstants.MAX_STAGE_IMAGE_HEIGHT)) { + errorMessage = getSizeErrorMessage("Stage", MediaConstants.MIN_STAGE_IMAGE_WIDTH, + MediaConstants.MAX_STAGE_IMAGE_WIDTH, MediaConstants.MIN_STAGE_IMAGE_HEIGHT, MediaConstants.MAX_STAGE_IMAGE_HEIGHT); } return errorMessage; } + + private boolean isValidSize(int width, int height, int minWidth, int maxWidth, int minHeight, int maxHeight) { + return width >= minWidth && width <= maxWidth && height >= minHeight && height <= maxHeight; + } + + private String getSizeErrorMessage(String imageType, int minWidth, int maxWidth, int minHeight, int maxHeight) { + String errorMessage = "The size of the " + imageType + " image does not fit. "; + errorMessage += "The width should be between " + minWidth + " and " + maxWidth + " px "; + errorMessage += " and the height between " + minHeight + " and " + maxHeight + " px."; + return errorMessage; + } } public ImageDialog(Date creationDate, ImageParameterValidator validator, StringMessages stringMessages, DialogCallback callback) { @@ -64,36 +96,25 @@ public abstract class ImageDialog extends DataEntryDialog { this.stringMessages = stringMessages; this.creationDate = creationDate; getDialogBox().getWidget().setWidth("730px"); - - image = new Image(); - image.addLoadHandler(new LoadHandler() { - @Override - public void onLoad(LoadEvent event) { - int width = image.getOffsetWidth(); - int height = image.getOffsetHeight(); - - if(width > 0 && height > 0) { - widthInPxBox.setValue(width); - heightInPxBox.setValue(height); - } - } - }); - image.getElement().getStyle().setPosition(Position.ABSOLUTE); - image.getElement().getStyle().setVisibility(Visibility.HIDDEN); + + imageHolder = new SimplePanel(); imageURLAndUploadComposite = new URLFieldWithFileUpload(stringMessages); imageURLAndUploadComposite.addValueChangeHandler(new ValueChangeHandler() { @Override public void onValueChange(ValueChangeEvent event) { + image = loadImageFromURL(event.getValue()); + imageHolder.setWidget(image); + image.getElement().getStyle().setBorderWidth(1, Unit.PX); + image.getElement().getStyle().setBorderStyle(BorderStyle.SOLID); + image.getElement().getStyle().setBorderColor("#cccccc"); validate(); - image.setUrl(event.getValue()); } }); - tagsListEditor = new StringListInlineEditorComposite(Collections. emptyList(), new StringListInlineEditorComposite.ExpandedUi(stringMessages, IconResources.INSTANCE.removeIcon(), /* suggestValues */ - MediaConstants.imageTagSuggestions, "Enter tags for the image", 50)); + MediaConstants.imageTagSuggestions, "Enter tags for the image", 30)); } @Override @@ -122,27 +143,38 @@ public abstract class ImageDialog extends DataEntryDialog { panel.add(additionalWidget); } - Grid formGrid = new Grid(8, 2); - panel.add(formGrid); + HorizontalPanel hPanel = new HorizontalPanel(); + + Grid grid1 = new Grid(2, 2); + Grid grid2 = new Grid(6, 2); + Grid grid3 = new Grid(1, 2); - formGrid.setWidget(0, 0, new Label("Created at:")); - formGrid.setWidget(0, 1, createdAtLabel); - formGrid.setWidget(1, 0, new Label("Image URL:")); - formGrid.setWidget(1, 1, imageURLAndUploadComposite); - formGrid.setWidget(2, 0, new Label(stringMessages.title() + ":")); - formGrid.setWidget(2, 1, titleTextBox); - formGrid.setWidget(3, 0, new Label("Subtitle:")); - formGrid.setWidget(3, 1, subtitleTextBox); - formGrid.setWidget(4, 0, new Label("Copyright:")); - formGrid.setWidget(4, 1, copyrightTextBox); - formGrid.setWidget(5, 0, new Label("Width in px:")); - formGrid.setWidget(5, 1, widthInPxBox); - formGrid.setWidget(6, 0, new Label("Height in px:")); - formGrid.setWidget(6, 1, heightInPxBox); - formGrid.setWidget(7, 0, new Label("Tags:")); - formGrid.setWidget(7, 1, tagsListEditor); + grid1.setWidget(0, 0, new Label("Created at:")); + grid1.setWidget(0, 1, createdAtLabel); + grid1.setWidget(1, 0, new Label("Image URL:")); + grid1.setWidget(1, 1, imageURLAndUploadComposite); - panel.add(image); + grid2.setWidget(0, 0, new Label(stringMessages.title() + ":")); + grid2.setWidget(0, 1, titleTextBox); + grid2.setWidget(1, 0, new Label("Subtitle:")); + grid2.setWidget(1, 1, subtitleTextBox); + grid2.setWidget(2, 0, new Label("Copyright:")); + grid2.setWidget(2, 1, copyrightTextBox); + grid2.setWidget(3, 0, new Label("Width in px:")); + grid2.setWidget(3, 1, widthInPxBox); + grid2.setWidget(4, 0, new Label("Height in px:")); + grid2.setWidget(4, 1, heightInPxBox); + + grid3.setWidget(0, 0, new Label("Tags:")); + grid3.setWidget(0, 1, tagsListEditor); + + panel.add(grid1); + hPanel.add(grid2); + hPanel.add(imageHolder); + hPanel.setCellWidth(grid1, "50%"); + hPanel.setCellWidth(imageHolder, "50%"); + panel.add(hPanel); + panel.add(grid3); return panel; } @@ -152,4 +184,35 @@ public abstract class ImageDialog extends DataEntryDialog { super.show(); imageURLAndUploadComposite.setFocus(true); } + + protected Image loadImageFromURL(String url) { + final int maxImageHolderWidth = 300; + final int maxImageHolderHeight = 300; + final Image image = new Image(url); + image.addLoadHandler(new LoadHandler() { + @Override + public void onLoad(LoadEvent event) { + int width = image.getOffsetWidth(); + int height = image.getOffsetHeight(); + if(width > 0 && height > 0) { + widthInPxBox.setValue(width); + heightInPxBox.setValue(height); + } + Pair fitToBox = fitSizeToBox(maxImageHolderWidth, maxImageHolderHeight, width, height, true); + image.setWidth(fitToBox.getA() + "px"); + image.setHeight(fitToBox.getB() + "px"); + validate(); + } + }); + return image; + } + + private Util.Pair fitSizeToBox(int boxWidth, int boxHeight, int imageWidth, int imageHeight, boolean neverScaleUp) { + double scale = Math.min((double) boxWidth / (double) imageWidth, (double) boxHeight / (double) imageHeight); + + int h = (int) (!neverScaleUp || scale < 1.0 ? scale * imageHeight : imageHeight); + int w = (int) (!neverScaleUp || scale < 1.0 ? scale * imageWidth : imageWidth); + + return new Util.Pair(w,h); + } } diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageEditDialog.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageEditDialog.java index 0ccd2222467..260e2a3a40f 100644 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageEditDialog.java +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageEditDialog.java @@ -8,20 +8,22 @@ import com.sap.sailing.gwt.ui.client.StringMessages; import com.sap.sse.gwt.client.media.ImageDTO; public class ImageEditDialog extends ImageDialog { - public ImageEditDialog(ImageDTO image, StringMessages stringMessages, DialogCallback callback) { - super(image.getCreatedAtDate(), new ImageParameterValidator(stringMessages), stringMessages, callback); - createdAtLabel = new Label(image.getCreatedAtDate().toString()); - imageURLAndUploadComposite.setURL(image.getSourceRef()); - titleTextBox = createTextBox(image.getTitle()); - titleTextBox.setVisibleLength(50); - subtitleTextBox = createTextBox(image.getSubtitle()); - subtitleTextBox.setVisibleLength(50); - copyrightTextBox = createTextBox(image.getCopyright()); - copyrightTextBox.setVisibleLength(50); - widthInPxBox = createIntegerBox(image.getWidthInPx(), 10); - heightInPxBox = createIntegerBox(image.getHeightInPx(), 10); + public ImageEditDialog(ImageDTO imageDTO, StringMessages stringMessages, DialogCallback callback) { + super(imageDTO.getCreatedAtDate(), new ImageParameterValidator(stringMessages), stringMessages, callback); + createdAtLabel = new Label(imageDTO.getCreatedAtDate().toString()); + imageURLAndUploadComposite.setURL(imageDTO.getSourceRef()); + titleTextBox = createTextBox(imageDTO.getTitle()); + titleTextBox.setVisibleLength(40); + subtitleTextBox = createTextBox(imageDTO.getSubtitle()); + subtitleTextBox.setVisibleLength(40); + copyrightTextBox = createTextBox(imageDTO.getCopyright()); + copyrightTextBox.setVisibleLength(40); + widthInPxBox = createIntegerBox(imageDTO.getWidthInPx(), 10); + heightInPxBox = createIntegerBox(imageDTO.getHeightInPx(), 10); List tags = new ArrayList(); - tags.addAll(image.getTags()); + tags.addAll(imageDTO.getTags()); tagsListEditor.setValue(tags); + image = loadImageFromURL(imageDTO.getSourceRef()); + imageHolder.setWidget(image); } } diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/media/MediaConstants.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/media/MediaConstants.java index 821118d5605..59efe71a29e 100644 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/media/MediaConstants.java +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/shared/media/MediaConstants.java @@ -10,6 +10,24 @@ import com.sap.sse.common.media.MimeType; public final class MediaConstants { + // perfect fit would be 1440 x 580 + public static final int MIN_STAGE_IMAGE_WIDTH = 1440 / 2; + public static final int MAX_STAGE_IMAGE_WIDTH = 1440 * 2; + public static final int MIN_STAGE_IMAGE_HEIGHT = 580 / 2; + public static final int MAX_STAGE_IMAGE_HEIGHT = 580 * 2; + + // perfect fit would be 370 x 240 + public static final int MIN_EVENTTEASER_IMAGE_WIDTH = 370 / 2; + public static final int MAX_EVENTTEASER_IMAGE_WIDTH = 370 * 3; + public static final int MIN_EVENTTEASER_IMAGE_HEIGHT = 240 / 2; + public static final int MAX_EVENTTEASER_IMAGE_HEIGHT = 240 * 3; + + // perfect fit would be 140 x 140 + public static final int MIN_LOGO_IMAGE_WIDTH = 140 / 2; + public static final int MAX_LOGO_IMAGE_WIDTH = 140 * 4; + public static final int MIN_LOGO_IMAGE_HEIGHT = 140 / 2; + public static final int MAX_LOGO_IMAGE_HEIGHT = 140 * 4; + public static final List imageTagSuggestions = Arrays.asList(new String[] { MediaTagConstants.STAGE, MediaTagConstants.TEASER, MediaTagConstants.SPONSOR, MediaTagConstants.LOGO, MediaTagConstants.GALLERY }); public static final List videoTagSuggestions = Arrays.asList(new String[] { MediaTagConstants.LIVESTREAM, MediaTagConstants.HIGHLIGHT, MediaTagConstants.FEATURED, MediaTagConstants.STAGE }); From 45760666e30c9dce615f8ee06276e2c40174fde9 Mon Sep 17 00:00:00 2001 From: fmittag Date: Fri, 9 Oct 2015 15:47:29 +0200 Subject: [PATCH 2/2] image size should never be edited manually --- .../com/sap/sailing/gwt/ui/adminconsole/ImageEditDialog.java | 2 ++ 1 file changed, 2 insertions(+) diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageEditDialog.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageEditDialog.java index 260e2a3a40f..735409c1e1c 100644 --- a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageEditDialog.java +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/adminconsole/ImageEditDialog.java @@ -19,7 +19,9 @@ public class ImageEditDialog extends ImageDialog { copyrightTextBox = createTextBox(imageDTO.getCopyright()); copyrightTextBox.setVisibleLength(40); widthInPxBox = createIntegerBox(imageDTO.getWidthInPx(), 10); + widthInPxBox.setEnabled(false); heightInPxBox = createIntegerBox(imageDTO.getHeightInPx(), 10); + heightInPxBox.setEnabled(false); List tags = new ArrayList(); tags.addAll(imageDTO.getTags()); tagsListEditor.setValue(tags);