discourse/app/assets/javascripts/admin/addon/components/themes-grid-placeholder.gjs

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

87 lines
2.9 KiB
Plaintext
Raw Normal View History

import Component from "@glimmer/component";
import { htmlSafe } from "@ember/template";
export default class ThemesGridPlaceholder extends Component {
get themeColors() {
if (this.args.theme.color_scheme) {
return {
primary: `#${this.args.theme.color_scheme.colors[0].hex}`,
secondary: `#${this.args.theme.color_scheme.colors[1].hex}`,
tertiary: `#${this.args.theme.color_scheme.colors[2].hex}`,
quaternary: `#${this.args.theme.color_scheme.colors[3].hex}`,
highlight: `#${this.args.theme.color_scheme.colors[6].hex}`,
danger: `#${this.args.theme.color_scheme.colors[7].hex}`,
success: `#${this.args.theme.color_scheme.colors[8].hex}`,
love: `#${this.args.theme.color_scheme.colors[9].hex}`,
};
} else {
return {
primary: "var(--primary)",
secondary: "var(--secondary)",
tertiary: "var(--tertiary)",
quaternary: "var(--quaternary)",
highlight: "var(--highlight)",
danger: "var(--danger)",
success: "var(--success)",
love: "var(--love)",
};
}
}
<template>
<svg viewBox="0 0 636 347" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
width="635.115"
height="347"
fill={{htmlSafe this.themeColors.secondary}}
/>
<path
d="M54.9766 79.1039C55.9198 76.0065 59.8623 75.0916 62.0732 77.4571L121.448 140.986C123.659 143.351 122.48 147.223 119.326 147.955L34.621 167.611C31.467 168.343 28.7034 165.386 29.6466 162.288L54.9766 79.1039Z"
fill={{htmlSafe this.themeColors.primary}}
/>
<path
d="M398.487 211.02C400.651 208.611 404.611 209.448 405.615 212.527L432.579 295.196C433.584 298.274 430.879 301.285 427.711 300.615L342.635 282.633C339.467 281.963 338.212 278.115 340.376 275.707L398.487 211.02Z"
fill={{htmlSafe this.themeColors.tertiary}}
/>
<circle cx="109.357" cy="262.879" r="44.1636" fill="#D1F0FF" />
<circle cx="365.927" cy="103.048" r="44.1636" fill="#E45735" />
<rect
x="166.139"
y="68.751"
width="81.9226"
height="81.9226"
rx="4.20606"
transform="rotate(-15.9297 166.139 68.751)"
fill={{htmlSafe this.themeColors.danger}}
/>
<rect
x="500.521"
y="100.296"
width="81.9226"
height="81.9226"
rx="4.20606"
transform="rotate(-15.9297 500.521 100.296)"
fill={{htmlSafe this.themeColors.success}}
/>
<rect
x="481.857"
y="222.921"
width="121.976"
height="54.6788"
rx="4.20606"
transform="rotate(9.12857 481.857 222.921)"
fill={{htmlSafe this.themeColors.love}}
/>
<rect
x="176.654"
y="240.608"
width="121.976"
height="54.6788"
rx="4.20606"
transform="rotate(-22.7296 176.654 240.608)"
fill={{htmlSafe this.themeColors.primary}}
/>
</svg>
</template>
}