mirror of
https://github.com/discourse/discourse.git
synced 2024-12-14 08:53:44 +08:00
3ad2fd032b
* UX: More additions * UX: more * DEV: Add admin/config/themes route * UX: Use admin config card * syntax merge fixes * cleanup * cleanup * checkbox * more * error * save on click * more * fix setter * DEV: Implement vanilla checkbox * cleanup * UX: save themes as default * DEV: Add component list to card * DEV: Add placeholder for no screenshots * DEV: Fix default theme reactivity Also add content/optionalAction yields to config area card and put the theme user selectable checkbox there, along with adding styles. * DEV: Change to generic "look and feel" config area * DEV: Auto redirect to themes on base look and feel route * UX: Remove computed from sorted themes * linting * UX: Turn update icon into button that routes to settings * DEV: remove unused function * UX: center icons with title * DEV: Lint * UX: Hook up theme preview button * DEV: Minor fixes --------- Co-authored-by: Martin Brennan <martin@discourse.org> Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
87 lines
2.9 KiB
Plaintext
87 lines
2.9 KiB
Plaintext
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>
|
|
}
|