Show the University Tübingen Logo (#601)

Steffengreiner · KochTobi · sven1103 · web-flow · commit dd5aceb1b256 · 2024-06-10T09:55:57.000+02:00
* Refactor Login UI with title and background image

* Provide fields as final

* Remove background image

---------

Co-authored-by: Tobias Koch &lt;tobias.koch@qbic.uni-tuebingen.de&gt;
Co-authored-by: Sven F &lt;9976560+sven1103@users.noreply.github.com&gt;
diff --git a/user-interface/frontend/themes/datamanager/components/main.css b/user-interface/frontend/themes/datamanager/components/main.css
@@ -1,18 +1,52 @@
 #content-area {
-  overflow: auto;
   grid-area: content-area;
 }
 
 #main-layout {
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
+  grid-template-rows: minmax(max-content, 95%) minmax(min-content, 5%);
   height: 100%;
   grid-template-areas:
     "content-area"
     "data-manager-footer";
 }
 
+#landing-page-layout .landing-page-content {
+  /*Static resources have to be loaded in css form the Meta-INF directory see vaadin cheatsheet
+  https://vaadin.com/vaadin-reference-card#static-content */
+  /*Provide Background image here once a valid one is provided*/
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 100%;
+}
+
+#landing-page-layout .landing-page-title-and-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  row-gap: var(--lumo-space-s);
+  margin-bottom: var(--lumo-space-l);
+  padding-top: var(--lumo-space-xl);
+}
+
+#landing-page-layout .landing-page-title-and-logo .title {
+  font-weight: bold;
+  font-size: var(--lumo-font-size-xxl);
+}
+
+#landing-page-layout .landing-page-title-and-logo .subtitle {
+  color: var(--lumo-tertiary-text-color);
+  font-weight: bold;
+}
+
+#landing-page-layout .landing-page-title-and-logo .ut-logo {
+  height: 2.5em;
+  margin-bottom: var(--lumo-space-xl);
+}
+
 #data-manager-footer {
   display: inline-flex;
   column-gap: var(--lumo-space-l);
diff --git a/user-interface/frontend/themes/datamanager/components/navbar.css b/user-interface/frontend/themes/datamanager/components/navbar.css
@@ -87,7 +87,7 @@
   width: 100%;
 }
 
-.landing-page-layout::part(navbar) {
+#landing-page-layout::part(navbar) {
   padding-inline: var(--lumo-space-m);
 }
 
diff --git a/user-interface/src/main/java/life/qbic/datamanager/views/LandingPageTitleAndLogo.java b/user-interface/src/main/java/life/qbic/datamanager/views/LandingPageTitleAndLogo.java
@@ -0,0 +1,37 @@
+package life.qbic.datamanager.views;
+
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.Image;
+import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.server.StreamResource;
+
+/**
+ * Landing Page Title and Logo
+ * <p>
+ * {@link Div} based Component hosting the university Tübingen Logo and the Title to be shown in all
+ * Pages that have the {@link life.qbic.datamanager.views.landing.LandingPageLayout} as their parent
+ * layout.
+ */
+public class LandingPageTitleAndLogo extends Div {
+
+  private final Span title = new Span("Data Manager");
+  private final Span subTitle = new Span("University of Tübingen Life Science Data Management");
+  private final static String UT_LOGO_PATH = "login/university-tuebingen-logo.svg";
+
+  public LandingPageTitleAndLogo() {
+    add(getUTLogo());
+    addClassName("landing-page-title-and-logo");
+    add(title);
+    title.addClassName("title");
+    add(subTitle);
+    subTitle.addClassName("subtitle");
+  }
+
+  private Image getUTLogo() {
+    StreamResource utResource = new StreamResource("university_tuebingen_logo.svg",
+        () -> getClass().getClassLoader().getResourceAsStream(UT_LOGO_PATH));
+    Image utLogo = new Image(utResource, "university_tuebingen_logo");
+    utLogo.addClassName("ut-logo");
+    return utLogo;
+  }
+}
diff --git a/user-interface/src/main/java/life/qbic/datamanager/views/landing/LandingPageLayout.java b/user-interface/src/main/java/life/qbic/datamanager/views/landing/LandingPageLayout.java
@@ -1,13 +1,18 @@
 package life.qbic.datamanager.views.landing;
 
+import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.HasElement;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.button.ButtonVariant;
+import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.RouterLayout;
 import java.io.Serial;
 import java.util.Objects;
 import life.qbic.datamanager.views.DataManagerLayout;
+import life.qbic.datamanager.views.LandingPageTitleAndLogo;
 import org.springframework.beans.factory.annotation.Autowired;
 
 /**
@@ -16,21 +21,22 @@
  * @since 1.0.0
  */
 @PageTitle("Data Manager")
-public class LandingPageLayout extends DataManagerLayout {
+public class LandingPageLayout extends DataManagerLayout implements RouterLayout {
 
   @Serial
   private static final long serialVersionUID = 8899881833038660866L;
-
   public Button register;
   public Button login;
+  private final Div landingPageContent = new Div();
+  private final LandingPageTitleAndLogo landingPageTitleAndLogo = new LandingPageTitleAndLogo();
 
   public LandingPageLayout(@Autowired LandingPageHandlerInterface handlerInterface) {
     Objects.requireNonNull(handlerInterface);
-    addClassName("landing-page-layout");
-
+    setId("landing-page-layout");
+    //CSS class hosting the background image for all our landing pages
+    landingPageContent.addClassName("landing-page-content");
     createNavBarContent();
     registerToHandler(handlerInterface);
-
   }
 
   private void registerToHandler(LandingPageHandlerInterface handler) {
@@ -58,4 +64,19 @@ private HorizontalLayout createHeaderButtonLayout() {
   private void styleHeaderButtons() {
     login.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
   }
+
+  /**
+   * {@inheritDoc}
+   *
+   * @param content
+   * @throws IllegalArgumentException if content is not a {@link Component}
+   */
+  @Override
+  public void showRouterLayoutContent(HasElement content) {
+    landingPageContent.removeAll();
+    //Ensures that the data manager title und UT Logo is always present in this layout
+    landingPageContent.getElement().appendChild(landingPageTitleAndLogo.getElement());
+    landingPageContent.getElement().appendChild(content.getElement());
+    super.showRouterLayoutContent(landingPageContent);
+  }
 }
diff --git a/user-interface/src/main/java/life/qbic/datamanager/views/login/LoginLayout.java b/user-interface/src/main/java/life/qbic/datamanager/views/login/LoginLayout.java
@@ -44,7 +44,6 @@ public class LoginLayout extends VerticalLayout implements HasUrlParameter<Strin
   private final transient LoginHandlerInterface viewHandler;
 
   public LoginLayout(@Autowired LoginHandlerInterface loginHandlerInterface) {
-    this.addClassName("grid");
     initLayout();
     styleLayout();
     viewHandler = loginHandlerInterface;
@@ -68,7 +67,6 @@ private void registerToHandler(LoginHandlerInterface loginHandler) {
   private void styleLayout() {
     styleNotificationLayout();
     styleFormLayout();
-    setSizeFull();
     setAlignItems(FlexComponent.Alignment.CENTER);
     setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);
   }
diff --git a/user-interface/src/main/java/life/qbic/datamanager/views/login/passwordreset/ResetPasswordLayout.java b/user-interface/src/main/java/life/qbic/datamanager/views/login/passwordreset/ResetPasswordLayout.java
@@ -78,7 +78,6 @@ private void styleLayout() {
 
     styleFieldLayout();
     styleSendButton();
-    setSizeFull();
     setAlignItems(FlexComponent.Alignment.CENTER);
     setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);
   }
diff --git a/user-interface/src/main/java/life/qbic/datamanager/views/register/UserRegistrationLayout.java b/user-interface/src/main/java/life/qbic/datamanager/views/register/UserRegistrationLayout.java
@@ -85,7 +85,6 @@ private void styleLayout() {
     styleNotificationLayout();
     styleRegisterButton();
     styleFormLayout();
-    setSizeFull();
     setAlignItems(FlexComponent.Alignment.CENTER);
     setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);
   }
diff --git a/user-interface/src/main/resources/login/university-tuebingen-logo.svg b/user-interface/src/main/resources/login/university-tuebingen-logo.svg

Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,7 @@`
`87`	`87`	`width: 100%;`
`88`	`88`	`}`
`89`	`89`
`90`		`-.landing-page-layout::part(navbar) {`
	`90`	`+#landing-page-layout::part(navbar) {`
`91`	`91`	`padding-inline: var(--lumo-space-m);`
`92`	`92`	`}`
`93`	`93`
Original file line number	Diff line number	Diff line change
`@@ -78,7 +78,6 @@ private void styleLayout() {`
`78`	`78`
`79`	`79`	`styleFieldLayout();`
`80`	`80`	`styleSendButton();`
`81`		`- setSizeFull();`
`82`	`81`	`setAlignItems(FlexComponent.Alignment.CENTER);`
`83`	`82`	`setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);`
`84`	`83`	`}`
Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,6 @@ private void styleLayout() {`
`85`	`85`	`styleNotificationLayout();`
`86`	`86`	`styleRegisterButton();`
`87`	`87`	`styleFormLayout();`
`88`		`- setSizeFull();`
`89`	`88`	`setAlignItems(FlexComponent.Alignment.CENTER);`
`90`	`89`	`setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);`
`91`	`90`	`}`