feat(fe/themes): Add premium flag and pro icon

ji-devs · Jul 13, 2023 · 003b490 · 003b490
1 parent 017f073
commit 003b490
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 8 deletions.
diff --git a/frontend/apps/crates/components/src/theme_selector/dom.rs b/frontend/apps/crates/components/src/theme_selector/dom.rs
@@ -32,6 +32,7 @@ fn render(
             html!("theme-selector-option", {
                 .prop("theme", theme_id.as_str_id())
                 .prop("optionType", option_type)
+                .prop("premium", theme_id.map_theme(|theme| theme).premium)
                 .prop_signal("selected", state.selected_signal(theme_id))
                 .event(clone!(state => move |_evt:events::Click| {
                     state.set_theme(theme_id);

diff --git a/frontend/apps/crates/utils/src/themes.rs b/frontend/apps/crates/utils/src/themes.rs
@@ -95,6 +95,9 @@ pub struct Theme {
 
     #[serde(rename(deserialize = "cards"))]
     pub cards: Cards,
+
+    #[serde(default)]
+    pub premium: bool,
 }
 
 #[derive(Debug, Deserialize)]

diff --git a/frontend/elements/src/module/_common/edit/widgets/theme-selector/option.ts b/frontend/elements/src/module/_common/edit/widgets/theme-selector/option.ts
@@ -1,6 +1,7 @@
 import { LitElement, html, css, customElement, property } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { ThemeId, THEMES } from "@elements/_themes/themes";
+import {nothing} from "lit-html";
 
 const themeIconPath = (theme: ThemeId, hover: boolean, optionType?: String): string => {
     return `theme/${theme}/icon${optionType ? `-${optionType}` : ""}${hover ? "-hover" : ""}.jpg`;
@@ -42,6 +43,36 @@ export class _ extends LitElement {
                     margin-top: 16px;
                 }
 
+                .content > div {
+                    position: relative;
+                }
+
+                .content .premium {
+                    padding: 0 4px;
+                    border-radius: 2px;
+                    border: solid 1px var(--light-blue-3);
+                    background-color: var(--white);
+                    position: absolute;
+                    left: 6px;
+                    bottom: 12px;
+                }
+
+                .content .premium img-ui {
+                    width: 11px;
+                }
+
+                .content .premium .premium-label {
+                    display: none;
+                    font-family: 'Poppins', sans-serif;
+                    font-size: 11px;
+                    font-weight: 600;
+                    margin-left: 6px;
+                }
+
+                .content .premium:hover .premium-label {
+                    display: inline-block;
+                }
+
                 img-ui {
                     margin-bottom: 12px;
                     width: 106px;
@@ -83,6 +114,9 @@ export class _ extends LitElement {
     @property({ type: String })
     optionType?: String;
 
+    @property({ type: Boolean })
+    premium: boolean = false;
+
     onEnter() {
         this.hover = true;
     }
@@ -112,14 +146,23 @@ export class _ extends LitElement {
                 @mouseleave="${this.onLeave.bind(this)}"
             >
                 <div class="content">
-                    <img-ui
-                        class=${imageClass}
-                        path="${themeIconPath(theme, false, optionType)}"
-                    ></img-ui>
-                    <img-ui
-                        class=${imageHoverClass}
-                        path="${themeIconPath(theme, true, optionType)}"
-                    ></img-ui>
+                    <div>
+                        ${this.premium
+                            ? html`<span class="premium"><img-ui
+                                class="jiggling"
+                                path="icons/pro-icon-small.svg"
+                            ></img-ui><span class="premium-label">Pro</span></span>`
+                            : nothing
+                        }
+                        <img-ui
+                            class=${imageClass}
+                            path="${themeIconPath(theme, false, optionType)}"
+                        ></img-ui>
+                        <img-ui
+                            class=${imageHoverClass}
+                            path="${themeIconPath(theme, true, optionType)}"
+                        ></img-ui>
+                    </div>
                     <div class="label">${THEMES[theme].label.en}</div>
                 </div>
             </section>