Skip to content

Commit cd05f3e

Browse files
committed
feat: new theme selector ember ui + convert more svg
1 parent e332851 commit cd05f3e

File tree

20 files changed

+294
-102
lines changed

20 files changed

+294
-102
lines changed
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type { TOC } from '@ember/component/template-only';
2+
3+
const GettingStartedIcon: TOC<{ Element: SVGSVGElement }> = <template>
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
fill="none"
7+
viewBox="0 0 24 24"
8+
stroke-width="1.5"
9+
stroke="currentColor"
10+
...attributes
11+
>
12+
<path
13+
stroke-linecap="round"
14+
stroke-linejoin="round"
15+
d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"
16+
/>
17+
</svg>
18+
</template>;
19+
export default GettingStartedIcon;
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type { TOC } from '@ember/component/template-only';
2+
3+
const InstallationIcon: TOC<{ Element: SVGSVGElement }> = <template>
4+
<svg
5+
xmlns="http://www.w3.org/2000/svg"
6+
fill="none"
7+
viewBox="0 0 24 24"
8+
stroke-width="1.5"
9+
stroke="currentColor"
10+
...attributes
11+
>
12+
<path
13+
stroke-linecap="round"
14+
stroke-linejoin="round"
15+
d="m9 12.75 3 3m0 0 3-3m-3 3v-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
16+
/>
17+
</svg>
18+
</template>;
19+
export default InstallationIcon;

doc-app/app/templates/dashboard.gts

Lines changed: 10 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@ import TpkDashBoard, {
44
type SidebarItem,
55
} from '@triptyk/ember-ui/components/prefabs/tpk-dashboard';
66
import type { TOC } from '@ember/component/template-only';
7-
import ThemeSelector from 'doc-app/components/theme-selector';
7+
import TpkThemeSelector from '@triptyk/ember-ui/components/prefabs/tpk-theme-selector';
88
import { service } from '@ember/service';
99
import type { IntlService } from 'ember-intl';
1010
import { action } from '@ember/object';
11+
import GettingStartedIcon from 'doc-app/assets/icons/getting-started.gts';
12+
import InstallationIcon from 'doc-app/assets/icons/installation.gts';
1113

1214
export default class DashboardTemplate extends Component {
1315
@service declare intl: IntlService;
@@ -27,43 +29,17 @@ export default class DashboardTemplate extends Component {
2729
type: 'link',
2830
label: 'Getting Started',
2931
route: 'dashboard.docs.ember-input-validation.prefabs.input',
30-
icon: <template>
31-
<svg
32-
xmlns="http://www.w3.org/2000/svg"
33-
fill="none"
34-
viewBox="0 0 24 24"
35-
stroke-width="1.5"
36-
stroke="currentColor"
37-
class="size-4"
38-
>
39-
<path
40-
stroke-linecap="round"
41-
stroke-linejoin="round"
42-
d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5"
43-
/>
44-
</svg>
45-
</template> as TOC<{ Element: SVGSVGElement }>,
32+
icon: <template><GettingStartedIcon class="size-4" /></template> as TOC<{
33+
Element: SVGSVGElement;
34+
}>,
4635
},
4736
{
4837
type: 'link',
4938
label: 'Installation',
5039
route: 'dashboard.docs.ember-input-validation.prefabs.input',
51-
icon: <template>
52-
<svg
53-
xmlns="http://www.w3.org/2000/svg"
54-
fill="none"
55-
viewBox="0 0 24 24"
56-
stroke-width="1.5"
57-
stroke="currentColor"
58-
class="size-4"
59-
>
60-
<path
61-
stroke-linecap="round"
62-
stroke-linejoin="round"
63-
d="m9 12.75 3 3m0 0 3-3m-3 3v-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
64-
/>
65-
</svg>
66-
</template> as TOC<{ Element: SVGSVGElement }>,
40+
icon: <template><InstallationIcon class="size-4" /></template> as TOC<{
41+
Element: SVGSVGElement;
42+
}>,
6743
},
6844
{
6945
type: 'group',
@@ -314,7 +290,7 @@ export default class DashboardTemplate extends Component {
314290
</svg>
315291
</a>
316292
</div>
317-
<ThemeSelector />
293+
<TpkThemeSelector @localStorageKey="doc-app-theme" />
318294
</div>
319295
</:footer>
320296
<:content>

doc-app/app/templates/home.gts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import TpkDashBoard, {
77
type Language,
88
} from '@triptyk/ember-ui/components/prefabs/tpk-dashboard';
99
import type { TOC } from '@ember/component/template-only';
10-
import ThemeSelector from 'doc-app/components/theme-selector';
10+
import TpkThemeSelector from '@triptyk/ember-ui/components/prefabs/tpk-theme-selector';
1111
import { hash } from '@ember/helper';
1212
import type { IntlService } from 'ember-intl';
1313

@@ -165,7 +165,10 @@ export default class DashboardTemplate extends Component {
165165
</:content>
166166
<:footer>
167167
<div class="flex items-center justify-center w-full p-2 px-4">
168-
<ThemeSelector @sidebarCollapsed={{this.sidebarCollapsed}} />
168+
<TpkThemeSelector
169+
@sidebarCollapsed={{this.sidebarCollapsed}}
170+
@localStorageKey="doc-app-theme"
171+
/>
169172
</div>
170173
</:footer>
171174
<:menu>

doc-app/translations/en-us.yaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ global:
33
results: 'results'
44
results_by_page: 'results by page'
55
search: 'Search'
6+
theme: 'Theme'
67

78
docs:
89
sections:

doc-app/translations/fr-fr.yaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ global:
33
results: 'résultats'
44
results_by_page: 'résultats par page'
55
search: 'Rechercher'
6+
theme: 'Thème'
67

78
docs:
89
sections:

packages/ember-ui/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@
134134
"./components/prefabs/tpk-reset-password.js": "./dist/_app_/components/prefabs/tpk-reset-password.js",
135135
"./components/prefabs/tpk-sidebar.js": "./dist/_app_/components/prefabs/tpk-sidebar.js",
136136
"./components/prefabs/tpk-table-generic-prefab.js": "./dist/_app_/components/prefabs/tpk-table-generic-prefab.js",
137+
"./components/prefabs/tpk-theme-selector.js": "./dist/_app_/components/prefabs/tpk-theme-selector.js",
137138
"./components/tpk-actions-menu.js": "./dist/_app_/components/tpk-actions-menu.js",
138139
"./components/tpk-actions-menu/element.js": "./dist/_app_/components/tpk-actions-menu/element.js",
139140
"./components/tpk-confirm-modal.js": "./dist/_app_/components/tpk-confirm-modal.js",

packages/ember-ui/src/app.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
@import url('./components/prefabs/tpk-confirm-modal-prefab.css');
22
@import url('./components/prefabs/tpk-table-generic-prefab.css');
33
@import url('./components/prefabs/tpk-dashboard.css');
4+
@import url('./components/prefabs/tpk-theme-selector.css');
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type { TOC } from '@ember/component/template-only';
2+
3+
const BurgerIcon: TOC<{ Element: SVGSVGElement }> = <template>
4+
<svg
5+
xmlns='http://www.w3.org/2000/svg'
6+
fill='none'
7+
viewBox='0 0 24 24'
8+
stroke-width='1.5'
9+
stroke='currentColor'
10+
...attributes
11+
>
12+
<path
13+
stroke-linecap='round'
14+
stroke-linejoin='round'
15+
d='M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5'
16+
/>
17+
</svg>
18+
</template>;
19+
export default BurgerIcon;

packages/ember-ui/src/assets/icons/chevron-down.gts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ const ChevronDownIcon: TOC<{ Element: SVGSVGElement }> = <template>
77
viewBox='0 0 24 24'
88
stroke-width='1.5'
99
stroke='currentColor'
10-
class='size-6'
1110
...attributes
1211
>
1312
<path

0 commit comments

Comments
 (0)