🐛 Replace flag emojis with SVG flags closes #96

Signed-off-by: Marcus Fihlon <[email protected]>
McPringle · Apr 25, 2024 · 40ae6ae · 40ae6ae
1 parent d643fa5
commit 40ae6ae
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 13 deletions.
diff --git a/frontend/themes/apus/views/room-view.css b/frontend/themes/apus/views/room-view.css
@@ -61,3 +61,7 @@
 .room-view .title .language {
     float: right;
 }
+
+.room-view .title .language svg {
+    height: 16px;
+}
diff --git a/src/main/java/swiss/fihlon/apus/event/Language.java b/src/main/java/swiss/fihlon/apus/event/Language.java
@@ -22,11 +22,23 @@
 public enum Language {
 
     // Important: When adding a new language, modify the test accordingly!
-    DE("de", "\uD83C\uDDE9\uD83C\uDDEA"),
-    EN("en", "\uD83C\uDDEC\uD83C\uDDE7");
+    DE("de", """
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480">
+              <path fill="#fc0" d="M0 320h640v160H0z"/>
+              <path fill="#000001" d="M0 0h640v160H0z"/>
+              <path fill="red" d="M0 160h640v160H0z"/>
+            </svg>"""),
+    EN("en", """
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480">
+              <path fill="#012169" d="M0 0h640v480H0z"/>
+              <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z"/>
+              <path fill="#C8102E" d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z"/>
+              <path fill="#FFF" d="M241 0v480h160V0zM0 160v160h640V160z"/>
+              <path fill="#C8102E" d="M0 193v96h640v-96zM273 0v480h96V0z"/>
+            </svg>""");
 
     private final String languageCode;
-    private final String flagEmoji;
+    private final String svgCode;
 
     public static Language languageWithCode(@NotNull final String languageCode) {
         for (final Language language : values()) {
@@ -37,9 +49,9 @@ public static Language languageWithCode(@NotNull final String languageCode) {
         throw new IllegalArgumentException(String.format("No language constant with language code '%s'!", languageCode));
     }
 
-    Language(@NotNull final String languageCode, @NotNull final String flagEmoji) {
+    Language(@NotNull final String languageCode, @NotNull final String svgCode) {
         this.languageCode = languageCode;
-        this.flagEmoji = flagEmoji;
+        this.svgCode = svgCode;
     }
 
     @NotNull
@@ -48,7 +60,7 @@ public String getLanguageCode() {
     }
 
     @NotNull
-    public String getFlagEmoji() {
-        return flagEmoji;
+    public String getSvgCode() {
+        return svgCode;
     }
 }
diff --git a/src/main/java/swiss/fihlon/apus/ui/view/RoomView.java b/src/main/java/swiss/fihlon/apus/ui/view/RoomView.java
@@ -19,10 +19,12 @@
 
 import com.vaadin.flow.component.Component;
 import com.vaadin.flow.component.Html;
+import com.vaadin.flow.component.Svg;
 import com.vaadin.flow.component.Text;
 import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.H3;
+import com.vaadin.flow.component.html.Image;
 import com.vaadin.flow.component.html.Span;
 import org.jetbrains.annotations.NotNull;
 import org.jetbrains.annotations.Nullable;
@@ -96,11 +98,8 @@ private Component createTitleComponent() {
 
     @NotNull
     private Component createLanguageComponent() {
-        final var languageComponent = new Span();
+        final var languageComponent = new Svg(language.getSvgCode());
         languageComponent.addClassName("language");
-        if (language != null) {
-            languageComponent.add(language.getFlagEmoji());
-        }
         return languageComponent;
     }
 

diff --git a/src/test/java/swiss/fihlon/apus/event/LanguageTest.java b/src/test/java/swiss/fihlon/apus/event/LanguageTest.java
@@ -39,8 +39,8 @@ void getLanguageCode() {
     @Test
     void getFlagEmoji() {
         for (final Language language : Language.values()) {
-            assertNotNull(language.getFlagEmoji());
-            assertFalse(language.getFlagEmoji().isBlank());
+            assertTrue(language.getSvgCode().trim().startsWith("<svg "));
+            assertTrue(language.getSvgCode().trim().endsWith("</svg>"));
         }
     }