Skip to content

Commit ef871af

Browse files
GoodDayForSurfGoodDayForSurf
committed
Vue:
add fluent as default theme add theme switching
1 parent a1e42f3 commit ef871af

25 files changed

+296
-160
lines changed

‎packages/devextreme-cli/src/applications/application.vue.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,9 @@ const addTemplate = (appPath, appName, templateOptions) => {
7777
const applicationTemplatePath = path.join(templateCreator.getTempaltePath('vue-v3'), 'application');
7878
const styles = [
7979
'./themes/generated/theme.additional.css',
80+
'./themes/generated/theme.additional.dark.css',
8081
'./themes/generated/theme.base.css',
82+
'./themes/generated/theme.base.dark.css',
8183
'devextreme/dist/css/dx.common.css'
8284
];
8385

‎packages/devextreme-cli/src/templates/vue-v3/application/devextreme.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,54 @@
1313
"outputFile": "src/themes/generated/theme.base.css"
1414
}
1515
},
16+
{
17+
"command": "build-theme",
18+
"options": {
19+
"inputFile": "src/themes/metadata.base.dark.json",
20+
"outputFile": "src/themes/generated/theme.base.dark.css"
21+
}
22+
},
1623
{
1724
"command": "build-theme",
1825
"options": {
1926
"inputFile": "src/themes/metadata.additional.json",
2027
"outputFile": "src/themes/generated/theme.additional.css"
2128
}
2229
},
30+
{
31+
"command": "build-theme",
32+
"options": {
33+
"inputFile": "src/themes/metadata.additional.dark.json",
34+
"outputFile": "src/themes/generated/theme.additional.dark.css"
35+
}
36+
},
2337
{
2438
"command": "export-theme-vars",
2539
"options": {
2640
"inputFile": "src/themes/metadata.base.json",
2741
"outputFile": "src/themes/generated/variables.base.scss"
2842
}
2943
},
44+
{
45+
"command": "export-theme-vars",
46+
"options": {
47+
"inputFile": "src/themes/metadata.base.dark.json",
48+
"outputFile": "src/themes/generated/variables.base.dark.scss"
49+
}
50+
},
3051
{
3152
"command": "export-theme-vars",
3253
"options": {
3354
"inputFile": "src/themes/metadata.additional.json",
3455
"outputFile": "src/themes/generated/variables.additional.scss"
3556
}
57+
},
58+
{
59+
"command": "export-theme-vars",
60+
"options": {
61+
"inputFile": "src/themes/metadata.additional.dark.json",
62+
"outputFile": "src/themes/generated/variables.additional.dark.scss"
63+
}
3664
}
3765
]
3866
}

‎packages/devextreme-cli/src/templates/vue-v3/application/src/App.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default {
4747
const title = vm.proxy.$appInfo.title;
4848
const screen = reactive({ getScreenSizeInfo: {} });
4949
screen.getScreenSizeInfo = getScreenSizeInfo();
50-
50+
5151
function screenSizeChanged () {
5252
screen.getScreenSizeInfo = getScreenSizeInfo();
5353
}
@@ -90,8 +90,7 @@ body {
9090
}
9191
9292
.app {
93-
@import "./themes/generated/variables.base.scss";
94-
background-color: darken($base-bg, 5);
93+
background-color: var(--base-bg-darken-5);
9594
display: flex;
9695
height: 100%;
9796
width: 100%;

‎packages/devextreme-cli/src/templates/vue-v3/application/src/components/app-footer.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,10 @@
99
</template>
1010

1111
<style lang="scss">
12-
@import "../themes/generated/variables.base.scss";
13-
1412
.footer {
1513
display: block;
16-
color: rgba($base-text-color, alpha($base-text-color) * 0.7);
17-
border-top: 1px solid var(--dx-color-border);
14+
color: var(--base-text-color-alpha-7);
15+
border-top: 1px solid var(--footer-border-color);
1816
padding-top: 20px;
1917
padding-bottom: 24px;
2018
margin: 0 40px;

‎packages/devextreme-cli/src/templates/vue-v3/application/src/components/header-toolbar.vue‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,11 @@
2020
location="before"
2121
css-class="header-title dx-toolbar-label"
2222
>
23-
<div>{{ title }}</div>
23+
<div>{{ title }} </div>
24+
</dx-item>
25+
26+
<dx-item location="after">
27+
<div><theme-switcher /></div>
2428
</dx-item>
2529

2630
<dx-item
@@ -41,7 +45,7 @@
4145
</div>
4246
</template>
4347
</dx-item>
44-
48+
4549
<template #menuUserItem>
4650
<user-panel
4751
:email="email"
@@ -61,6 +65,7 @@ import { useRouter, useRoute } from 'vue-router';
6165
import { ref } from 'vue';
6266
6367
import UserPanel from "./user-panel";
68+
import ThemeSwitcher from './theme-switcher.vue';
6469
6570
export default {
6671
props: {
@@ -75,7 +80,7 @@ export default {
7580
7681
const email = ref("");
7782
auth.getUser().then((e) => email.value = e.data.email);
78-
83+
7984
const userMenuItems = [{
8085
text: "Profile",
8186
icon: "user",
@@ -86,7 +91,7 @@ export default {
8691
icon: "runner",
8792
onClick: onLogoutClick
8893
}];
89-
94+
9095
function onLogoutClick() {
9196
auth.logOut();
9297
router.push({
@@ -108,6 +113,7 @@ export default {
108113
};
109114
},
110115
components: {
116+
ThemeSwitcher,
111117
DxButton,
112118
DxToolbar,
113119
DxItem,
@@ -117,11 +123,10 @@ export default {
117123
</script>
118124

119125
<style lang="scss">
120-
@import "../themes/generated/variables.base.scss";
121126
@import "../dx-styles.scss";
122127
123128
header {
124-
background-color: $base-bg;
129+
background-color: var(--base-bg);
125130
}
126131
127132
.header-component {

‎packages/devextreme-cli/src/templates/vue-v3/application/src/components/side-nav-menu.vue‎

Lines changed: 54 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -108,67 +108,71 @@ export default {
108108
</script>
109109

110110
<style lang="scss">
111+
@import "../variables.scss";
111112
@import "../dx-styles.scss";
112-
@import "../themes/generated/variables.additional.scss";
113113
114-
.side-navigation-menu {
115-
display: flex;
116-
flex-direction: column;
117-
min-height: 100%;
118-
height: 100%;
119-
width: 250px !important;
120-
121-
.menu-container {
122-
min-height: 100%;
114+
.dx-swatch-additional, .dx-swatch-additional-dark {
115+
&.side-navigation-menu {
123116
display: flex;
124-
flex: 1;
125-
126-
.dx-treeview {
127-
// ## Long text positioning
128-
white-space: nowrap;
129-
// ##
130-
131-
// ## Icon width customization
132-
.dx-treeview-item {
133-
padding-left: 0;
134-
flex-direction: row-reverse;
135-
136-
.dx-icon {
137-
width: $side-panel-min-width !important;
138-
margin: 0 !important;
117+
flex-direction: column;
118+
min-height: 100%;
119+
height: 100%;
120+
width: 250px !important;
121+
background-color: var(--base-bg);
122+
123+
.menu-container {
124+
min-height: 100%;
125+
display: flex;
126+
flex: 1;
127+
128+
.dx-treeview {
129+
// ## Long text positioning
130+
white-space: nowrap;
131+
// ##
132+
133+
// ## Icon width customization
134+
.dx-treeview-item {
135+
padding-left: 0;
136+
border-radius: 0;
137+
flex-direction: row-reverse;
138+
139+
.dx-icon {
140+
width: $side-panel-min-width !important;
141+
margin: 0 !important;
142+
}
139143
}
140-
}
141-
// ##
142144
143-
// ## Arrow customization
144-
.dx-treeview-node {
145-
padding: 0 0 !important;
146-
}
147-
148-
.dx-treeview-toggle-item-visibility {
149-
right: 10px;
150-
left: auto;
151-
}
145+
// ##
152146
153-
.dx-rtl .dx-treeview-toggle-item-visibility {
154-
left: 10px;
155-
right: auto;
156-
}
157-
// ##
147+
// ## Arrow customization
148+
.dx-treeview-node {
149+
padding: 0 0 !important;
150+
}
158151
159-
// ## Item levels customization
160-
.dx-treeview-node {
161-
&[aria-level="1"] {
162-
font-weight: bold;
163-
border-bottom: 1px solid var(--dx-color-border);
152+
.dx-treeview-toggle-item-visibility {
153+
right: 10px;
154+
left: auto;
164155
}
165156
166-
&[aria-level="2"] .dx-treeview-item-content {
167-
font-weight: normal;
168-
padding: 0 $side-panel-min-width;
157+
.dx-rtl .dx-treeview-toggle-item-visibility {
158+
left: 10px;
159+
right: auto;
160+
}
161+
// ##
162+
163+
// ## Item levels customization
164+
.dx-treeview-node {
165+
&[aria-level="1"] {
166+
font-weight: bold;
167+
}
168+
169+
&[aria-level="2"] .dx-treeview-item-content {
170+
font-weight: normal;
171+
padding: 0 $side-panel-min-width;
172+
}
169173
}
174+
// ##
170175
}
171-
// ##
172176
}
173177
}
174178
}

‎packages/devextreme-cli/src/templates/vue-v3/application/src/components/theme-switcher.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<dx-button
3+
class="theme-button"
4+
styling-mode="text"
5+
:icon="currentTheme === 'dark' ? 'sun' : 'moon'"
6+
@click="onClickButton"
7+
/>
8+
</template>
9+
10+
<script setup>
11+
import { DxButton } from 'devextreme-vue/button';
12+
import { themeService } from '../themes/theme-service';
13+
14+
const currentTheme = themeService.currentTheme;
15+
16+
function onClickButton() {
17+
themeService.switchAppTheme();
18+
}
19+
</script>

‎packages/devextreme-cli/src/templates/vue-v3/application/src/components/user-panel.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,6 @@ export default {
4545
</script>
4646

4747
<style lang="scss">
48-
@import "../themes/generated/variables.base.scss";
49-
5048
.user-info {
5149
display: flex;
5250
align-items: center;
@@ -76,15 +74,15 @@ export default {
7674
7775
.user-name {
7876
font-size: 14px;
79-
color: $base-text-color;
77+
color: var(--base-text-color);
8078
margin: 0 9px;
8179
}
8280
}
8381
8482
.user-panel {
8583
.dx-list-item .dx-icon {
8684
vertical-align: middle;
87-
color: $base-text-color;
85+
color: var(--base-text-color);
8886
margin-right: 16px;
8987
}
9088
.dx-rtl .dx-list-item .dx-icon {

0 commit comments

Comments
 (0)