bug5510: added first version of subscription card design.

- fixed getString method of SubscriptionStringConstraints not to break if key cannot be find. Instead it return the key with surrounding ??? - partials need to be moved to general shared package instead of desktop package - highlight selection is not completed - button switch to cancel subscription and general mail button is missing - there is currently no meaning-full action behind the button - header text is not final - ...
2026-09-24 14:38:45 +00:00 · 2021-09-13 20:57:18 +02:00
parent b11f5180c3
commit 6085cf66b7
8 changed files with 234 additions and 13 deletions
@@ -0,0 +1,51 @@
+.feature {
+  background-image: resourceUrl("greenCheck");
+  background-repeat: no-repeat;
+  background-size: contain;
+  padding-left: 30px;
+}
+.highlight {
+  border: solid 1px green;
+}
+.subscription {
+  border: solid;
+  border-width: 1px;
+  border-color: #ddd;
+  border-radius: .333333333333333em;
+  text-align: center;
+  max-width: 390px;
+}
+.title {
+  background-color: #f2f2f2;
+  margin: 0;
+  padding: 20px;
+  border-bottom-color: #ddd;
+}
+.description {
+  margin: 20px;
+}
+.price {
+  margin: 20px;
+}
+.features {
+  margin: 30px;
+  text-align: left;
+}
+.subscribe {
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 30px;
+  display: block;
+}
+.container {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 10px;
+}
+/* Small screens */
+@media (max-width: 500px) {
+  .container {
+    /* On small screens, we are no longer using row direction but column */
+    flex-direction: column;
+  }
+}
@@ -0,0 +1,83 @@
+package com.sap.sailing.gwt.home.desktop.partials.subscription;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.HeadingElement;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.i18n.client.NumberFormat;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.Window;
+import com.google.gwt.user.client.ui.Button;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.FlowPanel;
+import com.google.gwt.user.client.ui.Label;
+import com.google.gwt.user.client.ui.Widget;
+import com.sap.sailing.gwt.common.client.SharedResources;
+import com.sap.sailing.gwt.ui.client.StringMessages;
+import com.sap.sse.security.shared.StringMessagesKey;
+import com.sap.sse.security.ui.client.i18n.subscription.SubscriptionStringConstants;
+import com.sap.sse.security.ui.shared.subscription.SubscriptionPlanDTO;
+
+public class Subscription extends Composite {
+
+    private static SubscriptionUiBinder uiBinder = GWT.create(SubscriptionUiBinder.class);
+    private static final String FEATURE_STYLE = SubscriptionResources.INSTANCE.css().feature();
+    private static final String HIGHLIGHT_STYLE = SubscriptionResources.INSTANCE.css().highlight();
+
+    interface SubscriptionUiBinder extends UiBinder<Widget, Subscription> {
+    }
+
+    public Subscription() {
+        initWidget(uiBinder.createAndBindUi(this));
+    }
+
+    @UiField
+    Button subscribeButton;
+    @UiField
+    HeadingElement title;
+    @UiField
+    HeadingElement description;
+    @UiField
+    HeadingElement price;
+    @UiField
+    FlowPanel features;
+    
+    @UiField
+    StringMessages i18n;
+
+    public Subscription(SubscriptionPlanDTO subscriptionPlanDTO, boolean highlight) {
+        SubscriptionResources.INSTANCE.css().ensureInjected();
+        SharedResources.INSTANCE.mediaCss().ensureInjected();
+        initWidget(uiBinder.createAndBindUi(this));
+        
+        if (highlight) {
+            addStyleName(HIGHLIGHT_STYLE);
+        }
+        title.setInnerText(SubscriptionStringConstants.INSTANCE.getString(subscriptionPlanDTO.getNameMessageKey()));
+        description.setInnerText(SubscriptionStringConstants.INSTANCE.getString(subscriptionPlanDTO.getDescMessageKey()));
+        NumberFormat nf = NumberFormat.getCurrencyFormat("USD"); 
+        String priceText = i18n.price() + ": " + nf.format(subscriptionPlanDTO.getPrice());
+        price.setInnerText(priceText);
+        for (StringMessagesKey featureKey: subscriptionPlanDTO.getFeatures()) {
+            FlowPanel feature = new FlowPanel();
+            feature.addStyleName(FEATURE_STYLE);
+            feature.add(new Label(SubscriptionStringConstants.INSTANCE.getString(featureKey)));
+            features.add(feature);
+        }
+    }
+
+    @UiHandler("subscribeButton")
+    void onClick(ClickEvent e) {
+        Window.alert("Selected!");
+    }
+
+    public void setText(String text) {
+        subscribeButton.setText(text);
+    }
+
+    public String getText() {
+        return subscribeButton.getText();
+    }
+
+}
@@ -0,0 +1,18 @@
+<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
+<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
+  xmlns:g="urn:import:com.google.gwt.user.client.ui">
+  <ui:with field="i18n" type="com.sap.sailing.gwt.ui.client.StringMessages" />
+  <ui:with field="main" type="com.sap.sailing.gwt.common.client.SharedResources" />
+  <ui:with field="local" type="com.sap.sailing.gwt.home.desktop.partials.subscription.SubscriptionResources"></ui:with>
+  <ui:style>
+  </ui:style>
+  <g:HTMLPanel>
+    <div class="{local.css.subscription}">
+      <h1 ui:field="title" class="{local.css.title}"></h1>
+      <h4 ui:field="description" class="{local.css.description}"></h4>
+      <h3 ui:field="price" class="{local.css.price}"></h3>
+      <g:FlowPanel ui:field="features" styleName="{local.css.features}"></g:FlowPanel>
+      <g:Button styleName="{main.mainCss.button} {main.mainCss.buttonstrong} {main.mainCss.buttonprimary} {main.mainCss.buttonarrowrightwhite} {local.css.subscribe}" ui:field="subscribeButton" text="{i18n.subscribe}"/>
+    </div>
+  </g:HTMLPanel>
+</ui:UiBinder> 
@@ -0,0 +1,28 @@
+package com.sap.sailing.gwt.home.desktop.partials.subscription;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.FlowPanel;
+import com.google.gwt.user.client.ui.Widget;
+
+public class SubscriptionContainer extends Composite {
+
+    private static SubscriptionContainerUiBinder uiBinder = GWT.create(SubscriptionContainerUiBinder.class);
+
+    interface SubscriptionContainerUiBinder extends UiBinder<Widget, SubscriptionContainer> {
+    }
+
+    public SubscriptionContainer() {
+        initWidget(uiBinder.createAndBindUi(this));
+    }
+
+    @UiField
+    FlowPanel container;
+    
+    public void addSubscription(Subscription subscription) {
+        container.add(subscription);
+    }
+
+}
@@ -0,0 +1,13 @@
+<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
+<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
+  xmlns:g="urn:import:com.google.gwt.user.client.ui">
+  <ui:with field="i18n" type="com.sap.sailing.gwt.ui.client.StringMessages" />
+  <ui:with field="main" type="com.sap.sailing.gwt.common.client.SharedResources" />
+  <ui:with field="local" type="com.sap.sailing.gwt.home.desktop.partials.subscription.SubscriptionResources"></ui:with>
+  <ui:style>
+  </ui:style>
+  <g:HTMLPanel styleName="{main.mediaCss.stackenblochen}">
+    <h1><ui:text from="{i18n.subscriptionPlanOverview}" /></h1>
+    <g:FlowPanel ui:field="container" styleName="{local.css.container}"></g:FlowPanel>
+  </g:HTMLPanel>
+</ui:UiBinder> 
@@ -0,0 +1,25 @@
+package com.sap.sailing.gwt.home.desktop.partials.subscription;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.resources.client.CssResource;
+import com.sap.sailing.gwt.home.shared.SharedHomeResources;
+
+public interface SubscriptionResources extends SharedHomeResources {
+
+    public static final SubscriptionResources INSTANCE = GWT.create(SubscriptionResources.class);
+
+    @Source("Subscription.gss")
+    LocalCss css();
+
+    public interface LocalCss extends CssResource {
+        String feature();
+        String highlight();
+        String subscription();
+        String title();
+        String description();
+        String price();
+        String features();
+        String subscribe();
+        String container();
+    }
+}
@@ -1,29 +1,25 @@
 package com.sap.sailing.gwt.home.shared.places.subscription;

-import com.google.gwt.dom.client.Style.FontWeight;
-import com.google.gwt.dom.client.Style.Unit;
 import com.google.gwt.user.client.ui.Composite;
-import com.google.gwt.user.client.ui.FlowPanel;
-import com.google.gwt.user.client.ui.Label;
-import com.sap.sse.security.ui.client.i18n.subscription.SubscriptionStringConstants;
+import com.sap.sailing.gwt.home.desktop.partials.subscription.Subscription;
+import com.sap.sailing.gwt.home.desktop.partials.subscription.SubscriptionContainer;
 import com.sap.sse.security.ui.shared.subscription.SubscriptionPlanDTO;

 public class SubscriptionViewImpl extends Composite implements SubscriptionView {

-    private static SubscriptionStringConstants i18n = SubscriptionStringConstants.INSTANCE;
-    private final FlowPanel container = new FlowPanel();
+    private final SubscriptionContainer container = new SubscriptionContainer();

    public SubscriptionViewImpl() {
        initWidget(container);
-        container.getElement().getStyle().setMargin(5, Unit.EM);
    }

    @Override
    public void addSubscriptionPlan(final SubscriptionPlanDTO plan, final boolean highlight) {
-        final Label label = new Label(i18n.getString(plan.getNameMessageKey()));
-        label.getElement().getStyle().setFontWeight(highlight ? FontWeight.BOLD : FontWeight.NORMAL);
-        container.add(label);
-        container.add(new Label(i18n.getString(plan.getDescMessageKey())));
+        container.addSubscription(new Subscription(plan, highlight));
+        container.addSubscription(new Subscription(plan, false));
+        container.addSubscription(new Subscription(plan, highlight));
+        container.addSubscription(new Subscription(plan, false));
+        container.addSubscription(new Subscription(plan, false));
    }

 }
@@ -1,5 +1,7 @@
 package com.sap.sse.security.ui.client.i18n.subscription;

+import java.util.MissingResourceException;
+
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.i18n.client.ConstantsWithLookup;
 import com.google.gwt.i18n.client.LocalizableResource.DefaultLocale;
@@ -10,7 +12,12 @@ public interface SubscriptionStringConstants extends ConstantsWithLookup {
    public static final SubscriptionStringConstants INSTANCE = GWT.create(SubscriptionStringConstants.class);

    default String getString(final StringMessagesKey messageKey) {
-        return getString(messageKey.getKey());
+        try {
+            return getString(messageKey.getKey());
+        } catch (MissingResourceException e) {
+            GWT.log("Cannot find resource with key '" + messageKey.getKey() + "'!");
+            return "???" + messageKey.getKey() + "???";
+        }
    }

    String pro_plan_name();