Skip to content

Commit d37d283

Browse files
aleksei-semikozovaleksei-semikozov
committed
Playground - add theme selector and CardView example
1 parent 85d0849 commit d37d283

File tree

4 files changed

+337
-75
lines changed

4 files changed

+337
-75
lines changed

‎packages/devextreme/playground/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>DevExtreme Playground</title>
7+
<link rel="stylesheet" href="./themeSelector.css">
78
</head>
8-
<body>
9+
<body class="dx-viewport">
910
<div id="app">
10-
<select id="theme-selector" style="display: block;"></select>
11+
<div id="theme-selector"></div>
1112
<div id="container"></div>
1213
</div>
1314
<script type="module" src="./index.ts"></script>

‎packages/devextreme/playground/index.ts‎

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,30 @@
11
import '../js/__internal/integration/jquery';
2-
import '../js/ui/scheduler';
2+
import '../js/ui/card_view';
33
import $ from 'jquery';
4-
import { setupThemeSelector } from './themeSelector';
4+
import { setupThemeSelector } from './themeSelector.ts';
55

6-
const dataSource = [
7-
{
8-
text: 'Meeting',
9-
startDate: new Date(2024, 0, 10, 9, 0),
10-
endDate: new Date(2024, 0, 10, 10, 30),
11-
},
12-
{
13-
text: 'Conference Call',
14-
startDate: new Date(2024, 0, 10, 14, 0),
15-
endDate: new Date(2024, 0, 10, 15, 0),
16-
},
17-
{
18-
text: 'Team Building',
19-
startDate: new Date(2024, 0, 11, 10, 0),
20-
endDate: new Date(2024, 0, 11, 17, 0),
21-
},
6+
const customers = [
7+
{ ID: 1, Company: 'Super Mart of the West', Address: '702 SW 8th Street', City: 'Bentonville', State: 'Arkansas', Zipcode: 72716, Phone: '(800) 555-2797' },
8+
{ ID: 2, Company: 'Electronics Depot', Address: '2455 Paces Ferry Road NW', City: 'Atlanta', State: 'Georgia', Zipcode: 30339, Phone: '(800) 595-3232' },
9+
{ ID: 3, Company: 'K&S Music', Address: '1000 Nicllet Mall', City: 'Minneapolis', State: 'Minnesota', Zipcode: 55403, Phone: '(612) 304-6073' },
10+
{ ID: 4, Company: "Tom's Club", Address: '999 Lake Drive', City: 'Issaquah', State: 'Washington', Zipcode: 98027, Phone: '(800) 955-2292' },
11+
{ ID: 5, Company: 'E-Mart', Address: '3333 Beverly Rd', City: 'Hoffman Estates', State: 'Illinois', Zipcode: 60179, Phone: '(847) 286-2500' },
12+
{ ID: 6, Company: 'Walters', Address: '200 Wilmot Rd', City: 'Deerfield', State: 'Illinois', Zipcode: 60015, Phone: '(847) 940-2500' },
13+
{ ID: 7, Company: 'StereoShack', Address: '400 Commerce S', City: 'Fort Worth', State: 'Texas', Zipcode: 76102, Phone: '(817) 820-0741' },
14+
{ ID: 8, Company: 'Circuit Town', Address: '2200 Kensington Court', City: 'Oak Brook', State: 'Illinois', Zipcode: 60523, Phone: '(800) 955-2929' },
15+
{ ID: 9, Company: 'Premier Buy', Address: '7601 Penn Avenue South', City: 'Richfield', State: 'Minnesota', Zipcode: 55423, Phone: '(612) 291-1000' },
16+
{ ID: 10, Company: 'ElectrixMax', Address: '263 Shuman Blvd', City: 'Naperville', State: 'Illinois', Zipcode: 60563, Phone: '(630) 438-7800' },
17+
{ ID: 11, Company: 'Video Emporium', Address: '1201 Elm Street', City: 'Dallas', State: 'Texas', Zipcode: 75270, Phone: '(214) 854-3000' },
18+
{ ID: 12, Company: 'Screen Shop', Address: '1000 Lowes Blvd', City: 'Mooresville', State: 'North Carolina', Zipcode: 28117, Phone: '(800) 445-6937' },
2219
];
2320

2421
window.addEventListener('load', () =>
2522
setupThemeSelector('theme-selector').then(() => {
26-
$('#container').dxScheduler({
27-
dataSource,
28-
views: ['day', 'week', 'workWeek', 'month'],
29-
currentView: 'week',
30-
currentDate: new Date(2024, 0, 10),
31-
startDayHour: 8,
32-
endDayHour: 18,
33-
height: 600,
23+
$('#container').dxCardView({
24+
dataSource: customers,
25+
keyExpr: 'ID',
26+
cardsPerRow: 'auto',
27+
cardMinWidth: 320,
28+
columns: ['Company', 'Address', 'City', 'State', 'Zipcode', 'Phone'],
3429
});
3530
}));

‎packages/devextreme/playground/themeSelector.css‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
#theme-selector {
2+
display: inline-block;
3+
margin: 8px;
4+
}
5+
6+
.theme-selector-popup .dx-popup-content {
7+
padding: 0;
8+
display: flex;
9+
flex-direction: column;
10+
}
11+
12+
.theme-selector-content {
13+
display: flex;
14+
flex-direction: column;
15+
height: 100%;
16+
}
17+
18+
.theme-selector-tabs {
19+
flex: 0 0 auto;
20+
}
21+
22+
.theme-selector-list {
23+
flex: 1 1 auto;
24+
min-height: 0;
25+
}
26+
27+
.theme-selector-group-header {
28+
font-weight: 600;
29+
font-size: 13px;
30+
}
31+
32+
.theme-selector-item {
33+
display: flex;
34+
align-items: center;
35+
gap: 10px;
36+
}
37+
38+
.theme-selector-icon {
39+
flex-shrink: 0;
40+
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
41+
}
42+
43+
#theme-selector,
44+
.theme-selector-popup {
45+
--tsel-bg: #ffffff;
46+
--tsel-bg-subtle: #f4f5f7;
47+
--tsel-text: #1a1a1a;
48+
--tsel-text-muted: #6b7280;
49+
--tsel-border: rgba(0, 0, 0, 0.12);
50+
--tsel-hover: rgba(0, 0, 0, 0.04);
51+
--tsel-selected: rgba(10, 95, 193, 0.10);
52+
--tsel-accent: #0a5fc1;
53+
font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
54+
}
55+
56+
#theme-selector .dx-button,
57+
#theme-selector .dx-button-content,
58+
#theme-selector .dx-button .dx-button-text,
59+
#theme-selector .dx-icon,
60+
.theme-selector-popup .dx-overlay-content,
61+
.theme-selector-popup .dx-popup-content,
62+
.theme-selector-popup .dx-tabs,
63+
.theme-selector-popup .dx-tab,
64+
.theme-selector-popup .dx-list,
65+
.theme-selector-popup .dx-list-group-header,
66+
.theme-selector-popup .dx-list-item,
67+
.theme-selector-popup .dx-list-item-content {
68+
color: var(--tsel-text) !important;
69+
text-transform: none !important;
70+
letter-spacing: normal !important;
71+
font-family: inherit !important;
72+
}
73+
74+
#theme-selector .dx-button {
75+
background-color: var(--tsel-bg) !important;
76+
border: 1px solid var(--tsel-border) !important;
77+
border-radius: 6px !important;
78+
box-shadow: none !important;
79+
}
80+
81+
#theme-selector .dx-button.dx-state-hover {
82+
background-color: var(--tsel-hover) !important;
83+
}
84+
85+
#theme-selector .dx-button-content {
86+
display: inline-flex !important;
87+
align-items: center !important;
88+
gap: 8px !important;
89+
}
90+
91+
#theme-selector .dx-button-content > .dx-icon {
92+
display: none !important;
93+
}
94+
95+
#theme-selector .dx-button-content::after {
96+
content: '';
97+
width: 7px;
98+
height: 7px;
99+
border-right: 1.5px solid currentColor;
100+
border-bottom: 1.5px solid currentColor;
101+
transform: translateY(-2px) rotate(45deg);
102+
display: inline-block;
103+
flex-shrink: 0;
104+
}
105+
106+
.theme-selector-popup .dx-overlay-content,
107+
.theme-selector-popup .dx-popup-content,
108+
.theme-selector-popup .dx-tabs,
109+
.theme-selector-popup .dx-list {
110+
background-color: var(--tsel-bg) !important;
111+
border-color: var(--tsel-border) !important;
112+
}
113+
114+
.theme-selector-popup .dx-overlay-content {
115+
border-radius: 8px !important;
116+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
117+
}
118+
119+
.theme-selector-popup .dx-tabs {
120+
border-bottom: 1px solid var(--tsel-border) !important;
121+
width: 100% !important;
122+
}
123+
124+
.theme-selector-popup .dx-tabs-wrapper,
125+
.theme-selector-popup .dx-tabs-scrollable .dx-tabs-wrapper {
126+
display: flex !important;
127+
width: 100% !important;
128+
}
129+
130+
.theme-selector-popup .dx-tab {
131+
flex: 1 1 0 !important;
132+
min-width: 0 !important;
133+
}
134+
135+
.theme-selector-popup .dx-tab-text-span-pseudo {
136+
visibility: hidden !important;
137+
}
138+
139+
.theme-selector-popup .dx-tab-text-span {
140+
visibility: visible !important;
141+
color: var(--tsel-text) !important;
142+
}
143+
144+
.theme-selector-popup .dx-tab.dx-state-hover {
145+
background-color: var(--tsel-hover) !important;
146+
}
147+
148+
.theme-selector-popup .dx-tab.dx-tab-selected,
149+
.theme-selector-popup .dx-tab.dx-tab-selected.dx-state-focused {
150+
background-color: var(--tsel-bg) !important;
151+
}
152+
153+
.theme-selector-popup .dx-tab-indicator,
154+
.theme-selector-popup .dx-tabs-wrapper .dx-tab.dx-tab-selected::after {
155+
background-color: var(--tsel-accent) !important;
156+
color: var(--tsel-accent) !important;
157+
}
158+
159+
.theme-selector-popup .dx-list-group-header {
160+
background-color: var(--tsel-bg-subtle) !important;
161+
color: var(--tsel-text-muted) !important;
162+
border-bottom: 1px solid var(--tsel-border) !important;
163+
}
164+
165+
.theme-selector-popup .dx-list-item.dx-state-hover {
166+
background-color: var(--tsel-hover) !important;
167+
}
168+
169+
.theme-selector-popup .dx-list-item.dx-list-item-selected {
170+
background-color: var(--tsel-selected) !important;
171+
}

0 commit comments

Comments
 (0)