✨ Make colors configurable

Signed-off-by: Marcus Fihlon <[email protected]>

README.md

@@ -98,9 +98,10 @@ You can now also attach breakpoints in code for debugging purposes, by clicking
 
 To modify the default configuration values, just specify environment variables with the following names:
 
-| Variable                | Default | Description                                                                  |
+| Environment Variable    | Default | Description                                                                  |
 |-------------------------|---------|------------------------------------------------------------------------------|
 | ADMIN_PASSWORD          |         | The hashed password to get admin access (empty = disabled).                  |
+| CUSTOM_STYLES           |         | Inject custom styles into the user interface (see explanations below).       |
 | DEMO_ROOM_COUNT         | 0       | Number of rooms for the event demo plugin (0 = disabled).                    |
 | DOAG_EVENT_API          | [1]     | The URL of the DOAG event API to read the conference agenda.                 |
 | DOAG_EVENT_ID           | 0       | The ID of the DOAG event to read the conference agenda (0 = disabled).       |
@@ -122,6 +123,27 @@ The environment variables will override the default values. Some default values
 1. https://meine.doag.org/api/event/action.getCPEventAgenda/eventId.%d/
 2. https://sessionize.com/api/v2/%s/view/Sessions
 
+#### Custom Styles
+
+You can modify the styles of the user interface using CSS variables. The CSS variables must be set using the environment variable `CUSTOM_STYLES` in key and value pairs. The key is the variable to be set. Keys and values must be separated by a colon (`:`). Multiple key and value pairs are separated by a semicolon (`;`). Example:
+
+```
+--name-of-variable-one:value1;--name-of-variable-two:value2
+```
+
+The following table contains the CSS variables you can modify to change the user interface:
+
+| CSS Variable                   | Default | Description                                                        |
+|--------------------------------|---------|--------------------------------------------------------------------|
+| --event-background-color       | #007e89 | The color for the background of the event agenda.                  |
+| --event-text-color             | #003861 | The color for the text of the event agenda.                        |
+| --event-running-session-color  | #9bf4ff | The color for the background of rooms with running sessions.       |
+| --event-next-session-color     | #62d7e3 | The color for the background of rooms with sessions starting next. |
+| --event-closed-room-color      | #5da6b2 | The color for the background of closed rooms.                      |
+| --social-background-color      | #1aa3b1 | The color for the background of the social wall.                   |
+| --social-text-color            | #003861 | The color for the text of the social wall.                         |
+| --social-post-background-color | #84ddee | The color for the background of social wall posts.                 |
+
 ### Create Hashed Password
 
 For security reasons the password is not stored in cleartext. *Apus* requires the password to be hashed using [bcrypt](https://en.wikipedia.org/wiki/Bcrypt). Of course, *Apus* can do this for you. Start the JAR file providing the parameter `-p` followed by the password you want to create a hash for. The output will show you two lines of code. The first line contains the hashed password and the second line contains the same hashed password, but with the dollar signs escaped ready to copy and paste it into a `docker-compose.yaml`. Example:

frontend/themes/apus/styles.css

@@ -17,15 +17,17 @@
  */
 
 :root {
-    background-color: #000000;
-}
+    --event-background-color: #007e89;
+    --event-text-color: #003861;
+    --event-running-session-color: #9bf4ff;
+    --event-next-session-color: #62d7e3;
+    --event-closed-room-color: #5da6b2;
 
-:root, h3, a, a:visited {
-    color: #014f7a;
-}
+    --social-background-color: #1aa3b1;
+    --social-text-color: #003861;
+    --social-post-background-color: #84ddee;
 
-h2 {
-    color: #003861;
+    background-color: #000000;
 }
 
 a {

frontend/themes/apus/views/event-view.css

@@ -17,7 +17,7 @@
  */
 
 #event-view {
-    background-color: #007e89;
+    background-color: var(--event-background-color);
     position: absolute;
     top: 0;
     left: 0;
@@ -26,6 +26,10 @@
     overflow: clip;
 }
 
+#event-view * {
+    color: var(--event-text-color);
+}
+
 #event-view h2 {
     float: left;
     font-size: 30px;
@@ -38,7 +42,7 @@
 }
 
 #event-view .legend > span {
-    color: #003861;
+    color: var(--event-text-color);
     margin-left: var(--lumo-space-s);
 }
 

frontend/themes/apus/views/post-view.css

@@ -17,7 +17,7 @@
  */
 
 .post-view {
-    background-color: #84ddee;
+    background-color: var(--social-post-background-color);
     border-radius: var(--lumo-border-radius-s);
     padding: var(--lumo-space-s);
 }

frontend/themes/apus/views/room-view.css

@@ -29,15 +29,15 @@
 }
 
 .running-session {
-    background-color: #9bf4ff;
+    background-color: var(--event-running-session-color);
 }
 
-.next-session, .empty-room {
-    background-color: #62d7e3;
+.next-session {
+    background-color: var(--event-next-session-color);
 }
 
 .empty-room {
-    opacity: 0.5;
+    background-color: var(--event-closed-room-color);
 }
 
 .empty-room .title h3 {

frontend/themes/apus/views/social-view.css

@@ -18,7 +18,7 @@
 
 #social-view {
     font-size: var(--lumo-font-size-m);
-    background-color: #1aa3b1;
+    background-color: var(--social-background-color);
     position: absolute;
     top: 0;
     left: 870px;
@@ -30,6 +30,10 @@
     flex-direction: column;
 }
 
+#social-view * {
+    color: var(--social-text-color);
+}
+
 #social-view h2 {
     font-size: 30px;
     margin: 0 10px 10px 10px;

src/main/java/swiss/fihlon/apus/configuration/Configuration.java

@@ -35,6 +35,7 @@ public class Configuration {
     // Core Configs
     private String version;
     private AdminConfig admin;
+    private CustomConfig custom;
     private EventConfig event;
     private FilterConfig filter;
 
@@ -58,6 +59,14 @@ public void setVersion(@NotNull final String version) {
         this.version = version;
     }
 
+    public CustomConfig getCustom() {
+        return custom;
+    }
+
+    public void setCustom(@NotNull final CustomConfig custom) {
+        this.custom = custom;
+    }
+
     public AdminConfig getAdmin() {
         return admin;
     }

src/main/java/swiss/fihlon/apus/configuration/CustomConfig.java

@@ -0,0 +1,22 @@
+/*
+ * Apus - A social wall for conferences with additional features.
+ * Copyright (C) Marcus Fihlon and the individual contributors to Apus.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+package swiss.fihlon.apus.configuration;
+
+import org.jetbrains.annotations.NotNull;
+
+public record CustomConfig(@NotNull String styles) { }

src/main/java/swiss/fihlon/apus/ui/view/SocialWallView.java

@@ -17,23 +17,47 @@
  */
 package swiss.fihlon.apus.ui.view;
 
+import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.router.Route;
 import org.jetbrains.annotations.NotNull;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 import org.springframework.scheduling.TaskScheduler;
 import swiss.fihlon.apus.configuration.Configuration;
 import swiss.fihlon.apus.plugin.event.EventService;
 import swiss.fihlon.apus.plugin.social.SocialService;
 
+import java.util.Arrays;
+
 @Route("")
 @CssImport(value = "./themes/apus/views/social-wall-view.css")
 public final class SocialWallView extends Div {
 
+    public static final Logger LOGGER = LoggerFactory.getLogger(SocialWallView.class);
+
     public SocialWallView(@NotNull final EventService eventService,
                           @NotNull final SocialService socialService,
                           @NotNull final TaskScheduler taskScheduler,
                           @NotNull final Configuration configuration) {
+        final String customStyles = configuration.getCustom().styles();
+        if (!customStyles.isBlank()) {
+            final var currentStyle = UI.getCurrent().getElement().getStyle();
+            Arrays.stream(customStyles.split(";"))
+                    .forEach(customStyle -> {
+                        if (!customStyle.isBlank()) {
+                            final var style = customStyle.split(":", 2);
+                            if (style.length == 2) {
+                                currentStyle.set(style[0], style[1]);
+                            } else {
+                                LOGGER.warn("Custom style has incorrect format: missing ':' (delimiter between key and value)");
+                            }
+                        } else {
+                            LOGGER.warn("Custom style has incorrect format: empty definition (nothing between ';')");
+                        }
+                    });
+        }
         setId("social-wall-view");
         add(new EventView(eventService, taskScheduler));
         add(new SocialView(socialService, taskScheduler, configuration));

src/main/resources/META-INF/additional-spring-configuration-metadata.json

@@ -5,6 +5,11 @@
       "type" : "java.lang.String",
       "description" : "The password to get admin access (empty = disabled)."
     },
+    {
+      "name" : "apus.custom.styles",
+      "type" : "java.lang.String",
+      "description" : "Inject custom styles into the user interface."
+    },
     {
       "name" : "apus.demo.roomCount",
       "type" : "java.lang.String",

src/main/resources/application.properties

@@ -11,6 +11,7 @@ vaadin.frontend.hotdeploy=true
 apus.version=@project.version@
 
 apus.admin.password=${ADMIN_PASSWORD:}
+apus.custom.styles=${CUSTOM_STYLES:}
 apus.demo.roomCount=${DEMO_ROOM_COUNT:0}
 apus.doag.eventApi=${DOAG_EVENT_API:https://meine.doag.org/api/event/action.getCPEventAgenda/eventId.%d/}
 apus.doag.eventId=${DOAG_EVENT_ID:0}

src/test/resources/application.properties

@@ -1,6 +1,7 @@
 apus.version[email protected]@
 
 apus.admin.password=$2a$10$nybQbl/iY8SRJkfHJVncS.L5.OC3KJ6VRBYVAID7qnUqwylmn/BtK
+apus.custom.styles=
 apus.demo.roomCount=-1
 apus.doag.eventApi=file:src/test/resources/DOAG.json?eventId=%d
 apus.doag.eventId=-1