Skip to content

Commit 1fcd2ac

Browse files
mstijakmstijak
authored
Merge pull request #1212 from codaxy/theme-packed-dark
Theme packed dark (first version)
2 parents f868fec + 94554e2 commit 1fcd2ac

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+2509
-1525
lines changed

‎docs/content/widgets/configs/Window.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,10 @@ export default {
3838
Set to `true` to disable moving the window by dragging the header.
3939
</Md></cx>
4040
},
41+
pad: {
42+
type: 'boolean',
43+
description: <cx><Md>
44+
Set to `true` to add default padding to the window body.
45+
</Md></cx>
46+
},
4147
};

‎gallery/components/ThemeLoader.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ function importTheme(theme) {
2525

2626
case "space-blue":
2727
return import(/* webpackChunkName: 'space-blue' */ "../themes/space-blue");
28+
29+
case "packed-dark":
30+
return import(/* webpackChunkName: 'packed-dark' */ "../themes/packed-dark");
2831
}
2932
}
3033

‎gallery/config/webpack.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ module.exports = (production) => ({
2020
"cx-theme-aquamarine": p("../packages/cx-theme-aquamarine"),
2121
"cx-theme-material-dark": p("../packages/cx-theme-material-dark"),
2222
"cx-theme-space-blue": p("../packages/cx-theme-space-blue"),
23+
"cx-theme-packed-dark": p("../packages/cx-theme-packed-dark"),
2324
//uncomment the line below to alias cx-react to cx-preact or some other React replacement library
2425
//'cx-react': 'cx-preact',
2526
},

‎gallery/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
66
<title>CxJS Gallery</title>
77
<link
8-
href="https://fonts.googleapis.com/css?family=Roboto:400,500|Open+Sans:400,500,600,700|Material+Icons"
8+
href="https://fonts.googleapis.com/css?family=Roboto:400,500|Open+Sans:400,500,600,700|Material+Icons|Inter"
99
rel="stylesheet"
1010
/>
1111
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.from,Array.prototype.find,Array.prototype.findIndex,Math.log10,Intl.~locale.en"></script>

‎gallery/index.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,12 @@
2222
background: var(--master-sidebar-background);
2323
color: var(--master-sidebar-color);
2424

25-
.cxb-link.cxs-active, .cxb-link:hover {
25+
.cxb-link.cxs-active,
26+
.cxb-link:hover {
2627
color: var(--master-sidebar-active-color);
2728
}
2829
}
2930

30-
31-
31+
p:last-child {
32+
margin-bottom: 0;
33+
}

‎gallery/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"cx-theme-frost": "^18.7.1",
1717
"cx-theme-material": "^18.7.0",
1818
"cx-theme-material-dark": "^20.1.0",
19+
"cx-theme-packed-dark": "^24.4.1",
1920
"cx-theme-space-blue": "^20.1.0",
2021
"intl": "^1.2.5",
2122
"plural": "^1.1.0",

‎gallery/routes/general/window/states.tsx‎

Lines changed: 115 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,143 @@
1-
import {cx, Section, FlexRow, Window, MsgBox, Button, TextField, DateField, TextArea} from 'cx/widgets';
2-
import {LabelsLeftLayout, bind, expr} from 'cx/ui';
1+
import { cx, Section, FlexRow, Window, MsgBox, Button, TextField, DateField, TextArea } from "cx/widgets";
2+
import { LabelsLeftLayout, bind, expr } from "cx/ui";
33

44
const showModal = (store) => {
5-
let modal = Window.create({
6-
title: 'Modal',
7-
modal: true,
8-
center: true,
9-
style: 'width: 500px; max-width: 90vw',
10-
bodyStyle: "padding: 20px",
11-
items: <cx>
5+
let modal = Window.create({
6+
title: "Modal",
7+
modal: true,
8+
center: true,
9+
pad: true,
10+
style: "width: 500px; max-width: 90vw",
11+
items: (
12+
<cx>
1213
<p>
13-
Modal windows have a modal backdrop which prevents
14-
user from interacting with the contents on the page
15-
while the window is open.
14+
Modal windows have a modal backdrop which prevents user from interacting with the contents on the page
15+
while the window is open.
1616
</p>
17-
<p>
18-
There can be multiple modal windows open in the same time.
19-
</p>
20-
<Button mod="hollow"
21-
onClick={(e, {store}) => {
22-
showModal(store);
23-
}}
17+
<p>There can be multiple modal windows open in the same time.</p>
18+
<Button
19+
onClick={(e, { store }) => {
20+
showModal(store);
21+
}}
2422
>
25-
Open Modal
23+
Open Modal
2624
</Button>
27-
</cx>
28-
});
25+
</cx>
26+
),
27+
});
2928

30-
modal.open(store);
29+
modal.open(store);
3130
};
3231

33-
export default <cx>
34-
<a href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/window/states.tsx" target="_blank" putInto="github">Source Code</a>
35-
<FlexRow wrap spacing="large" target="tablet" align="start">
36-
37-
<Window title="Contact"
38-
visible={{bind: "contact.visible", defaultValue: false}}
32+
export default (
33+
<cx>
34+
<a
35+
href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/window/states.tsx"
36+
target="_blank"
37+
putInto="github"
38+
>
39+
Source Code
40+
</a>
41+
<FlexRow wrap spacing="large" target="tablet" align="start">
42+
<Window
43+
title="Contact"
44+
visible={{ bind: "contact.visible", defaultValue: false }}
3945
center
4046
styles="width:500px;max-width: 90vw"
41-
modal>
42-
<div style={{padding: "20px"}} layout={{type: LabelsLeftLayout, mod: 'stretch'}}>
43-
<TextField label="Name" value={bind("$page.contact.name")} style={{width: '100%'}}/>
44-
<TextField label="Email" value={bind("$page.contact.email")} style={{width: '100%'}}/>
45-
<TextArea label="Message" value={bind("$page.contact.message")} rows={5} style={{width: '100%'}}/>
46-
<DateField label="Date" value={bind("$page.contact.date")}/>
47+
pad
48+
>
49+
<div layout={{ type: LabelsLeftLayout, mod: "stretch" }}>
50+
<TextField label="Name" value={bind("$page.contact.name")} style={{ width: "100%" }} />
51+
<TextField label="Email" value={bind("$page.contact.email")} style={{ width: "100%" }} />
52+
<TextArea label="Message" value={bind("$page.contact.message")} rows={5} style={{ width: "100%" }} />
53+
<DateField label="Date" value={bind("$page.contact.date")} />
4754
</div>
4855
<FlexRow putInto="footer" spacing justify="end">
49-
<Button mod="primary">Submit</Button>
50-
<Button onClick={(e, ins) => {
51-
ins.parentOptions.dismiss()
52-
}}>
53-
Cancel
54-
</Button>
56+
<Button mod="primary">Submit</Button>
57+
<Button
58+
onClick={(e, ins) => {
59+
ins.parentOptions.dismiss();
60+
}}
61+
>
62+
Cancel
63+
</Button>
5564
</FlexRow>
56-
</Window>
65+
</Window>
5766

58-
<Window
67+
<Window
5968
title="Backdrop"
6069
backdrop
6170
center
6271
styles="width:500px;max-width: 90vw"
63-
visible={{bind: "backdrop.visible"}}
64-
bodyStyle="padding: 50px"
65-
>
66-
<p>
67-
Windows with backdrop can be closed by clicking anywhere outside the window.
68-
</p>
69-
</Window>
72+
visible={{ bind: "backdrop.visible" }}
73+
pad
74+
>
75+
<p>Windows with backdrop can be closed by clicking anywhere outside the window.</p>
76+
</Window>
7077

71-
<Section mod="well" hLevel={4} title="Options">
78+
<Section mod="well" hLevel={4} title="Options">
7279
<FlexRow wrap spacing>
73-
<Button
74-
onClick={(e, {store}) => {
75-
store.toggle("contact.visible")
76-
}}
77-
>
78-
Standard
79-
</Button>
80+
<Button
81+
onClick={(e, { store }) => {
82+
store.toggle("contact.visible");
83+
}}
84+
>
85+
Standard
86+
</Button>
8087

81-
<Button
82-
onClick={(e, {store}) => {
83-
store.toggle("backdrop.visible")
84-
}}
85-
>
86-
Backdrop
87-
</Button>
88+
<Button
89+
onClick={(e, { store }) => {
90+
store.toggle("backdrop.visible");
91+
}}
92+
>
93+
Backdrop
94+
</Button>
8895

89-
<Button
90-
onClick={(e, {store}) => {
91-
showModal(store);
92-
}}
93-
>
94-
Modal
95-
</Button>
96+
<Button
97+
onClick={(e, { store }) => {
98+
showModal(store);
99+
}}
100+
>
101+
Modal
102+
</Button>
96103
</FlexRow>
97-
</Section>
98-
<Section mod="well" hLevel={4} title="MsgBox">
104+
</Section>
105+
<Section mod="well" hLevel={4} title="MsgBox">
99106
<FlexRow wrap spacing>
107+
<Button
108+
onClick={(e) => {
109+
MsgBox.alert("This is an important message!");
110+
}}
111+
>
112+
Alert
113+
</Button>
100114

101-
<Button onClick={(e) => {
102-
MsgBox.alert("This is an important message!")
103-
}}>
104-
Alert
105-
</Button>
106-
107-
108-
<Button onClick={(e) => {
109-
MsgBox.yesNo("Do you like CxJS?")
110-
.then(result => {
111-
if (result == 'yes') {
112-
MsgBox.alert({
113-
message: <div ws>
114-
Great! Please support CxJS by giving it
115-
{' '}
116-
<a href="https://github.com/codaxy/cxjs" target="_blank">a star on GitHub!</a>.
117-
</div>
118-
});
119-
}
120-
})
121-
}}>
122-
Yes or No
123-
</Button>
115+
<Button
116+
onClick={(e) => {
117+
MsgBox.yesNo("Do you like CxJS?").then((result) => {
118+
if (result == "yes") {
119+
MsgBox.alert({
120+
message: (
121+
<div ws>
122+
Great! Please support CxJS by giving it{" "}
123+
<a href="https://github.com/codaxy/cxjs" target="_blank">
124+
a star on GitHub!
125+
</a>
126+
.
127+
</div>
128+
),
129+
});
130+
}
131+
});
132+
}}
133+
>
134+
Yes or No
135+
</Button>
124136
</FlexRow>
125-
</Section>
126-
</FlexRow>
127-
</cx>
137+
</Section>
138+
</FlexRow>
139+
</cx>
140+
);
128141

129-
import {hmr} from '../../hmr.js';
130-
hmr(module);
142+
import { hmr } from "../../hmr.js";
143+
hmr(module);

‎gallery/routes/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ let themes = {
1919
"~/dark": "Dark",
2020
};
2121

22+
if (process.env.NODE_ENV == "development") {
23+
// not ready for prime time
24+
themes["~/packed-dark"] = "Packed Dark";
25+
}
26+
2227
export default (
2328
<cx>
2429
<MasterLayout
@@ -49,7 +54,7 @@ export default (
4954
redirect={computable(
5055
"$themeRoute.remainder",
5156
"$route.theme",
52-
(remainder, theme) => `~/${theme || "aquamarine"}${remainder || "/button/states"}`
57+
(remainder, theme) => `~/${theme || "aquamarine"}${remainder || "/button/states"}`,
5358
)}
5459
/>
5560
</Route>
@@ -75,7 +80,7 @@ export default (
7580
<ThemeLoader theme={bind("$themeRoute.theme")}>
7681
<main class="main" layout={FirstVisibleChildLayout}>
7782
{list.map((cat) =>
78-
cat.items?.map((item) => <SandboxedAsyncRoute route={item.route} content={item.content} />)
83+
cat.items?.map((item) => <SandboxedAsyncRoute route={item.route} content={item.content} />),
7984
)}
8085
<Section title="Page Not Found" mod="card">
8186
This page doesn't exists. Please check your URL.

‎gallery/themes/packed-dark.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import style from "./packed-dark.useable.scss";
2+
import { registerTheme } from "./index";
3+
import { applyThemeOverrides } from "cx-theme-packed-dark/src";
4+
5+
registerTheme("packed-dark", style, applyThemeOverrides);

‎gallery/themes/packed-dark.useable.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
$cx-include-global-rules: true;
2+
3+
@import "~cx-theme-packed-dark/src/variables";
4+
@import "./util/divide.scss";
5+
@import "~cx-theme-packed-dark/src/index";
6+
7+
@import "./util/customize-master";
8+
9+
@include customize-master(
10+
$brand-background: #2281b1,
11+
$brand-highlight-color: #2281b1,
12+
$sidebar-background-color: rgba(0, 0, 0, 0.2),
13+
$sidebar-link-color: rgba(255, 255, 255, 0.6),
14+
$sidebar-active-link-color: rgba(255, 255, 255, 0.8)
15+
);

0 commit comments

Comments
 (0)