Fix subtle buttons

Models/ThemeConfig/LayoutConfig.ts

@@ -8,7 +8,22 @@ import { ExtractImages } from "./Conversion/FixImages"
 import ExtraLinkConfig from "./ExtraLinkConfig"
 import { Utils } from "../../Utils"
 import used_languages from "../../assets/generated/used_languages.json"
-export default class LayoutConfig {
+
+/**
+ * Minimal information about a theme
+ **/
+export class LayoutInformation {
+    id: string
+    icon: string
+    title: any
+    shortDescription: any
+    definition?: any
+    mustHaveLanguage?: boolean
+    hideFromOverview?: boolean
+    keywords?: any[]
+}
+
+export default class LayoutConfig implements LayoutInformation {
     public static readonly defaultSocialImage = "assets/SocialImage.png"
     public readonly id: string
     public readonly credits?: string

UI/Base/SubtleButton.svelte

@@ -1,84 +1,82 @@
 <script lang="ts">
-  import { onMount } from "svelte"
+  import { onMount } from "svelte";
-  import { Store } from "../../Logic/UIEventSource"
+  import { Store } from "../../Logic/UIEventSource";
-  import BaseUIElement from "../BaseUIElement"
+  import BaseUIElement from "../BaseUIElement";
-  import Img from "./Img"
+  import Img from "./Img";
-  import Translations from "../i18n/Translations"
+  import Translations from "../i18n/Translations";
+  import { ImmutableStore } from "../../Logic/UIEventSource.js";
 
-  export let imageUrl: string | BaseUIElement = undefined
+  export let imageUrl: string | BaseUIElement = undefined;
-  export let message: string | BaseUIElement = undefined
+  export let message: string | BaseUIElement = undefined;
   export let options: {
     url?: string | Store<string>
     newTab?: boolean
     imgSize?: string
     extraClasses?: string
-  } = {}
+  } = {};
 
-  let href = typeof options?.url == "string" ? options.url : ""
+  // Website to open when clicked
+  let href : Store<string> = undefined
+  if(options?.url){
+     href = typeof options?.url == "string" ? new ImmutableStore(options.url) : options.url;
+  }
 
-  let imgElem: HTMLElement
+  let imgElem: HTMLElement;
-  let msgElem: HTMLElement
+  let msgElem: HTMLElement;
+  let imgClasses = "block justify-center shrink-0 mr-4 " + (options?.imgSize ?? "h-11 w-11");
 
   onMount(() => {
-    if (typeof options?.url != "string" && options?.url != undefined) {
-      options.url.addCallbackAndRun((data) => {
-        href = data
-      })
-    }
-
     // Image
     if (imgElem && imageUrl) {
-      let img: BaseUIElement
+      let img: BaseUIElement;
 
-      const imgClasses = "block justify-center flex-none mr-4 " + (options?.imgSize ?? "h-11 w-11")
       if ((imageUrl ?? "") === "") {
-        img = undefined
+        img = undefined;
-      } else if (typeof imageUrl === "string") {
+      } else if (typeof imageUrl !== "string") {
-        img = new Img(imageUrl)?.SetClass(imgClasses)
+        img = imageUrl?.SetClass(imgClasses);
-      } else {
-        img = imageUrl?.SetClass(imgClasses)
       }
-
+      if (img) imgElem.replaceWith(img.ConstructElement());
-      if (img) imgElem.replaceWith(img.ConstructElement())
     }
 
     // Message
     if (msgElem && message) {
-      let msg = Translations.W(message)?.SetClass("block text-ellipsis no-images flex-shrink")
+      let msg = Translations.W(message)?.SetClass("block text-ellipsis no-images flex-shrink");
-      msgElem.replaceWith(msg.ConstructElement())
+      msgElem.replaceWith(msg.ConstructElement());
     }
-  })
+  });
 </script>
 
 <svelte:element
-  this={options?.url == undefined ? "span" : "a"}
+  class={(options.extraClasses??"") + 'flex hover:shadow-xl transition-[color,background-color,box-shadow] hover:bg-unsubtle'}
-  class={(options.extraClasses??"") + ' hover:shadow-xl transition-[color,background-color,box-shadow] hover:bg-unsubtle'}
+  href={$href}
   target={options?.newTab ? "_blank" : ""}
-  {href}
+  this={href === undefined ? "span" : "a"}
 >
   <slot name="image">
-    {#if imgElem}
+    {#if imageUrl !== undefined}
-      <template bind:this={imgElem} />
+      {#if typeof imageUrl === "string"}
+        <Img src={imageUrl} class={imgClasses+ " bg-red border border-black"}></Img>
+      {:else }
+        <template bind:this={imgElem} />
       {/if}
+    {/if}
   </slot>
+
   <slot name="message">
     <template bind:this={msgElem} />
   </slot>
 </svelte:element>
 
 <style lang="scss">
+
   span,
   a {
-    @apply flex p-3 my-2 rounded-lg ;
+    @apply flex p-3 my-2 py-4 rounded-lg shrink-0;
     @apply items-center w-full no-underline;
     @apply bg-subtle text-black;
 
-    :global(img) {
-      @apply block justify-center flex-none mr-4 h-11 w-11;
-    }
-
     :global(span) {
-      @apply block text-ellipsis flex-shrink;
+      @apply block text-ellipsis;
     }
   }
 </style>

UI/BigComponents/CustomGeneratorButton.svelte

@@ -29,8 +29,8 @@
         url: "https://pietervdvn.github.io/mc/legacy/070/customGenerator.html",
       }}
     >
-      <span slot="image">
+      <span slot="image"  class="h-11 w-11 mx-4 bg-red" >
-        <ToSvelte construct={Svg.pencil_ui()} />
+        <ToSvelte construct={Svg.pencil_ui()}/>
       </span>
       <span slot="message">{t.createYourOwnTheme.toString()}</span>
     </SubtleButton>

UI/BigComponents/MoreScreen.ts

@@ -4,7 +4,7 @@ import { SubtleButton } from "../Base/SubtleButton"
 import Translations from "../i18n/Translations"
 import personal from "../../assets/themes/personal/personal.json"
 import BaseUIElement from "../BaseUIElement"
-import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
+import LayoutConfig, { LayoutInformation } from "../../Models/ThemeConfig/LayoutConfig"
 import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
 import Loc from "../../Models/Loc"
 import UserRelatedState from "../../Logic/State/UserRelatedState"
@@ -20,16 +20,7 @@ import HiddenThemeList from "./HiddenThemeList.svelte"
 import UnofficialThemeList from "./UnofficialThemeList.svelte"
 
 export default class MoreScreen extends Combine {
-    private static readonly officialThemes: {
+    private static readonly officialThemes: LayoutInformation[] = themeOverview
-        id: string
-        icon: string
-        title: any
-        shortDescription: any
-        definition?: any
-        mustHaveLanguage?: boolean
-        hideFromOverview: boolean
-        keywors?: any[]
-    }[] = themeOverview
 
     constructor(
         state: UserRelatedState & {

UI/BigComponents/ThemeButton.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import SubtleButton from "../Base/SubtleButton.svelte"
   import { Translation } from "../i18n/Translation"
-  import type { Theme } from "./ThemesList.svelte"
   import * as personal from "../../assets/themes/personal/personal.json"
   import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
   import UserDetails, { OsmConnection } from "../../Logic/Osm/OsmConnection"
   import Constants from "../../Models/Constants"
   import type Loc from "../../Models/Loc"
+  import type { LayoutInformation } from "../../Models/ThemeConfig/LayoutConfig";
 
-  export let theme: Theme
+  export let theme: LayoutInformation
   export let isCustom: boolean = false
   export let userDetails: UIEventSource<UserDetails>
   export let state: { osmConnection: OsmConnection; locationControl?: UIEventSource<Loc> }
@@ -80,7 +80,7 @@
 {#if theme.id !== personal.id || $userDetails.csCount > Constants.userJourney.personalLayoutUnlock}
   <div>
     <SubtleButton options={{ url: createUrl(theme, isCustom, state) }}>
-      <img slot="image" src={theme.icon} alt="" />
+      <img slot="image" src={theme.icon} class="block h-11 w-11 bg-red mx-4" alt="" />
       <span slot="message" class="message">
         <span>
           <span>{title}</span>

UI/BigComponents/ThemesList.svelte

@@ -1,16 +1,3 @@
-<script lang="ts" context="module">
-  export interface Theme {
-    id: string
-    icon: string
-    title: any
-    shortDescription: any
-    definition?: any
-    mustHaveLanguage?: boolean
-    hideFromOverview?: boolean
-    keywords?: any[]
-  }
-</script>
-
 <script lang="ts">
   import NoThemeResultButton from "./NoThemeResultButton.svelte"
 
@@ -21,9 +8,10 @@
   import CustomGeneratorButton from "./CustomGeneratorButton.svelte"
   import ProfessionalServicesButton from "./ProfessionalServicesButton.svelte"
   import ThemeButton from "./ThemeButton.svelte"
+  import { LayoutInformation } from "../../Models/ThemeConfig/LayoutConfig";
 
   export let search: UIEventSource<string>
-  export let themes: Theme[]
+  export let themes: LayoutInformation[]
   export let state: { osmConnection: OsmConnection; locationControl?: UIEventSource<Loc> }
   export let isCustom: boolean = false
   export let onMainScreen: boolean = true

css/index-tailwind-output.css

@@ -808,6 +808,11 @@ video {
   margin-bottom: 1rem;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .mx-10 {
   margin-left: 2.5rem;
   margin-right: 2.5rem;
@@ -1569,6 +1574,11 @@ video {
   padding: 0.125rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;