Add stepper

Author: sven1103

user-interface/frontend/themes/datamanager/components/all.css

@@ -25,11 +25,16 @@ First some general property definitions
   --font-weight-medium: 500;
   --font-weight-semi-bold: 600;
   --font-weight-bold: 700;
+  --icon-color-primary: var(--lumo-primary-color);
   --icon-color-info: rgba(22, 118, 243, 1);
   --icon-color-error: rgba(255, 66, 56, 1);
   --icon-color-success: rgba(21, 193, 93, 1);
   --icon-color-warning: rgba(254, 201, 1, 1);
+  --icon-color-default: rgba(28, 46, 69, 0.6);
+  --icon-size-xs: 1rem;
+  --icon-size-s: var(--lumo-icon-size-s);
   --icon-size-m: var(--lumo-icon-size-m);
+  --icon-size-l: var(--lumo-icon-size-l);
   --spacing-01: 0.125rem;
   --spacing-02: 0.25rem;
   --spacing-03: 0.5rem;
@@ -147,6 +152,11 @@ Body text
 Padding & gaps
 ***************************/
 
+.padding-left-right-02 {
+  padding-left: var(--spacing-02);
+  padding-right: var(--spacing-02);
+}
+
 .padding-left-right-04 {
   padding-left: var(--spacing-04);
   padding-right: var(--spacing-04);
@@ -187,6 +197,10 @@ Padding & gaps
   padding-bottom: var(--spacing-07);
 }
 
+.gap-02 {
+  gap: var(--spacing-02);
+}
+
 .gap-04 {
   gap: var(--spacing-04);
 }
@@ -320,10 +334,70 @@ Icons
   color: var(--icon-color-warning)
 }
 
+.icon-size-xs {
+  height: var(--icon-size-xs);
+  width: var(--icon-size-xs);
+}
+
+.icon-size-s {
+  height: var(--icon-size-s);
+  width: var(--icon-size-s);
+}
+
 .icon-size-m {
   height: var(--icon-size-m);
+  width: var(--icon-size-m);
 }
 
+.icon-size-l {
+  height: var(--icon-size-l);
+  width: var(--icon-size-l);
+}
+
+.round {
+  border-radius: 50%;
+}
+
+.icon-background-color-default {
+  background-color: var(--icon-color-default);
+}
+
+.icon-background-color-primary {
+  background-color: var(--icon-color-primary);
+}
+
+.icon-color-default {
+  color: var(--icon-color-default);
+}
+
+
+
+.icon-text-white {
+  color: white;
+}
+
+.icon-text-inner {
+  font-size: 0.6875rem;
+}
+
+.icon-label-text {
+  font-size: 0.875rem;
+}
+
+.icon-label-text-color-default {
+  color: var(--icon-color-default);
+}
+
+.icon-label-text-color-primary {
+  color: var(--icon-color-primary);
+}
+
+.icon-content-center {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+}
 
 
 /****************************
@@ -339,6 +413,11 @@ Layout
   flex-direction: row;
 }
 
+.flex-vertical {
+  display: flex;
+  flex-direction: column;
+}
+
 
 
 /****************************

user-interface/src/main/bundles/dev.bundle

@@ -21,7 +21,7 @@
 import life.qbic.datamanager.views.general.dialog.InputValidation;
 import life.qbic.datamanager.views.general.dialog.UserInput;
 import life.qbic.datamanager.views.general.dialog.stepper.Step;
-import life.qbic.datamanager.views.general.dialog.stepper.StepDisplay;
+import life.qbic.datamanager.views.general.dialog.stepper.StepperDisplay;
 import life.qbic.datamanager.views.general.dialog.stepper.StepperDialog;
 import life.qbic.datamanager.views.general.dialog.stepper.StepperDialogFooter;
 import life.qbic.datamanager.views.general.icon.IconFactory;
@@ -127,7 +127,7 @@ private static Div stepperDialogShowCase(List<Step> steps, String dialogTitle) {
     StepperDialog stepperDialog = StepperDialog.create(dialog, steps);
     StepperDialogFooter.with(stepperDialog);
 
-    StepDisplay.with(stepperDialog, steps.stream().map(Step::name).toList());
+    StepperDisplay.with(stepperDialog, steps.stream().map(Step::name).toList());
 
     showDialog.addClickListener(listener -> stepperDialog.open());
 

user-interface/src/main/java/life/qbic/datamanager/views/demo/ComponentDemo.java

@@ -23,6 +23,7 @@
 public class AppDialog extends Dialog {
 
   public static final String PADDING_LEFT_RIGHT_07 = "padding-left-right-07";
+  public static final String PADDING_TOP_BOTTOM_04 = "padding-top-bottom-04";
   public static final String PADDING_TOP_BOTTOM_05 = "padding-top-bottom-05";
   public static final String BORDER_BOTTOM_SOLID = "border-bottom-solid";
   public static final String FULL_WIDTH = "full-width";
@@ -249,8 +250,7 @@ private static class LayoutSmall implements Style {
 
     LayoutSmall() {
       header.addClassNames(paddings());
-      navigation.addClassNames(paddings());
-      navigation.addClassName(BORDER_BOTTOM_SOLID);
+      navigation.addClassNames(PADDING_LEFT_RIGHT_07, PADDING_TOP_BOTTOM_04, BORDER_BOTTOM_SOLID);
       body.addClassNames(paddings());
       footer.addClassNames(paddings());
       footer.addClassName(FULL_WIDTH);
@@ -295,8 +295,7 @@ private static class LayoutMedium implements Style {
     LayoutMedium() {
       header.addClassNames(paddings());
       body.addClassNames(paddings());
-      navigation.addClassNames(paddings());
-      navigation.addClassName(BORDER_BOTTOM_SOLID);
+      navigation.addClassNames(PADDING_LEFT_RIGHT_07, PADDING_TOP_BOTTOM_04, BORDER_BOTTOM_SOLID);
       footer.addClassNames(paddings());
       footer.addClassName(FULL_WIDTH);
     }
@@ -339,8 +338,7 @@ private static class LayoutLarge implements Style {
 
     LayoutLarge() {
       header.addClassNames(paddings());
-      navigation.addClassNames(paddings());
-      navigation.addClassName(BORDER_BOTTOM_SOLID);
+      navigation.addClassNames(PADDING_LEFT_RIGHT_07, PADDING_TOP_BOTTOM_04, BORDER_BOTTOM_SOLID);
       body.addClassNames(paddings());
       footer.addClassNames(paddings());
       footer.addClassName(FULL_WIDTH);

user-interface/src/main/java/life/qbic/datamanager/views/general/dialog/AppDialog.java

@@ -1,9 +1,6 @@
 package life.qbic.datamanager.views.general.dialog.stepper;
 
 import com.vaadin.flow.component.html.Div;
-import java.util.ArrayList;
-import java.util.List;
-import org.springframework.lang.NonNull;
 
 /**
  * <b><class short description - 1 Line!></b>
@@ -12,28 +9,42 @@
  *
  * @since <version tag>
  */
-public class StepDisplay extends Div implements NavigationListener  {
+public class StepDisplay extends Div {
 
-  private final StepperDialog dialog;
+  public static final String ICON_BACKGROUND_COLOR_DEFAULT = "icon-background-color-default";
+  public static final String ICON_BACKGROUND_COLOR_PRIMARY = "icon-background-color-primary";
+  public static final String ICON_LABEL_TEXT_COLOR_DEFAULT = "icon-label-text-color-default";
+  public static final String ICON_LABEL_TEXT_COLOR_PRIMARY = "icon-label-text-color-primary";
+  private final Div numberIcon;
+  private final Div stepLabel;
 
-  private final List<String> steps;
+  private StepDisplay(int number, String label) {
+    this.addClassNames("flex-vertical", "gap-02", "flex-align-items-center");
+    this.numberIcon = new Div(String.valueOf(number));
+    this.stepLabel = new Div(label);
+    numberIcon.addClassNames("round", "icon-size-m", ICON_BACKGROUND_COLOR_DEFAULT,
+        "icon-text-white", "icon-content-center", "icon-text-inner");
+    stepLabel.addClassNames("icon-label-text", ICON_LABEL_TEXT_COLOR_DEFAULT);
+    add(numberIcon, stepLabel);
+  }
 
-  private StepDisplay(StepperDialog stepperDialog, List<String> stepNames) {
-    this.dialog = stepperDialog;
-    this.steps = new ArrayList<>(stepNames);
-    dialog.registerNavigationListener(this);
-    onNavigationChange(dialog.currentNavigation());
-    this.addClassNames("full-width", "flex-horizontal", "gap-04");
+  public static StepDisplay with(int number, String label) {
+    return new StepDisplay(number, label);
   }
 
-  public static StepDisplay with(@NonNull StepperDialog stepperDialog, @NonNull List<String> stepNames) {
-    return new StepDisplay(stepperDialog, stepNames);
+  public void activate() {
+    numberIcon.removeClassName(ICON_BACKGROUND_COLOR_DEFAULT);
+    numberIcon.addClassName(ICON_BACKGROUND_COLOR_PRIMARY);
+
+    stepLabel.removeClassName(ICON_LABEL_TEXT_COLOR_DEFAULT);
+    stepLabel.addClassName(ICON_LABEL_TEXT_COLOR_PRIMARY);
   }
 
-  @Override
-  public void onNavigationChange(NavigationInformation navigationInformation) {
-    this.removeAll();
-    steps.forEach(step -> add(new Div(step)));
-    dialog.setStepper(this);
+  public void deactivate() {
+    numberIcon.removeClassName(ICON_BACKGROUND_COLOR_PRIMARY);
+    numberIcon.addClassName(ICON_BACKGROUND_COLOR_DEFAULT);
+
+    stepLabel.removeClassName(ICON_LABEL_TEXT_COLOR_PRIMARY);
+    stepLabel.addClassName(ICON_LABEL_TEXT_COLOR_DEFAULT);
   }
 }

user-interface/src/main/java/life/qbic/datamanager/views/general/dialog/stepper/StepDisplay.java

@@ -0,0 +1,62 @@
+package life.qbic.datamanager.views.general.dialog.stepper;
+
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.icon.Icon;
+import com.vaadin.flow.component.icon.VaadinIcon;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.stream.IntStream;
+import org.springframework.lang.NonNull;
+
+/**
+ * <b><class short description - 1 Line!></b>
+ *
+ * <p><More detailed description - When to use, what it solves, etc.></p>
+ *
+ * @since <version tag>
+ */
+public class StepperDisplay extends Div implements NavigationListener {
+
+  private final StepperDialog dialog;
+
+  private final List<String> steps;
+
+  private StepperDisplay(StepperDialog stepperDialog, List<String> stepNames) {
+    this.dialog = stepperDialog;
+    this.steps = new ArrayList<>(stepNames);
+    dialog.registerNavigationListener(this);
+    onNavigationChange(dialog.currentNavigation());
+    this.addClassNames("full-width", "flex-horizontal", "gap-04", "flex-align-items-center");
+  }
+
+  public static StepperDisplay with(@NonNull StepperDialog stepperDialog,
+      @NonNull List<String> stepNames) {
+    return new StepperDisplay(stepperDialog, stepNames);
+  }
+
+  @Override
+  public void onNavigationChange(NavigationInformation navigationInformation) {
+    this.removeAll();
+    IntStream.range(0, steps.size()).forEach(index -> {
+      var step = StepDisplay.with(index + 1, steps.get(index));
+      if (index == navigationInformation.currentStep() - 1) {
+        step.activate();
+      }
+      add(step);
+      if (index < navigationInformation.totalSteps() - 1) {
+        add(new StepPointer(VaadinIcon.ARROW_RIGHT.create()));
+      }
+    });
+    dialog.setStepper(this);
+  }
+
+  private static class StepPointer extends Div {
+
+    StepPointer(@NonNull Icon icon) {
+      this.add(icon);
+      addClassNames("icon-color-default", "padding-left-right-02", "icon-size-xs",
+          "flex-horizontal");
+    }
+
+  }
+}