-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1212 from codaxy/theme-packed-dark
Theme packed dark (first version)
- Loading branch information
Showing
42 changed files
with
2,509 additions
and
1,525 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,130 +1,143 @@ | ||
| import {cx, Section, FlexRow, Window, MsgBox, Button, TextField, DateField, TextArea} from 'cx/widgets'; | ||
| import {LabelsLeftLayout, bind, expr} from 'cx/ui'; | ||
| import { cx, Section, FlexRow, Window, MsgBox, Button, TextField, DateField, TextArea } from "cx/widgets"; | ||
| import { LabelsLeftLayout, bind, expr } from "cx/ui"; | ||
|
|
||
| const showModal = (store) => { | ||
| let modal = Window.create({ | ||
| title: 'Modal', | ||
| modal: true, | ||
| center: true, | ||
| style: 'width: 500px; max-width: 90vw', | ||
| bodyStyle: "padding: 20px", | ||
| items: <cx> | ||
| let modal = Window.create({ | ||
| title: "Modal", | ||
| modal: true, | ||
| center: true, | ||
| pad: true, | ||
| style: "width: 500px; max-width: 90vw", | ||
| items: ( | ||
| <cx> | ||
| <p> | ||
| Modal windows have a modal backdrop which prevents | ||
| user from interacting with the contents on the page | ||
| while the window is open. | ||
| Modal windows have a modal backdrop which prevents user from interacting with the contents on the page | ||
| while the window is open. | ||
| </p> | ||
| <p> | ||
| There can be multiple modal windows open in the same time. | ||
| </p> | ||
| <Button mod="hollow" | ||
| onClick={(e, {store}) => { | ||
| showModal(store); | ||
| }} | ||
| <p>There can be multiple modal windows open in the same time.</p> | ||
| <Button | ||
| onClick={(e, { store }) => { | ||
| showModal(store); | ||
| }} | ||
| > | ||
| Open Modal | ||
| Open Modal | ||
| </Button> | ||
| </cx> | ||
| }); | ||
| </cx> | ||
| ), | ||
| }); | ||
|
|
||
| modal.open(store); | ||
| modal.open(store); | ||
| }; | ||
|
|
||
| export default <cx> | ||
| <a href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/window/states.tsx" target="_blank" putInto="github">Source Code</a> | ||
| <FlexRow wrap spacing="large" target="tablet" align="start"> | ||
|
|
||
| <Window title="Contact" | ||
| visible={{bind: "contact.visible", defaultValue: false}} | ||
| export default ( | ||
| <cx> | ||
| <a | ||
| href="https://github.com/codaxy/cx/tree/master/gallery/routes/general/window/states.tsx" | ||
| target="_blank" | ||
| putInto="github" | ||
| > | ||
| Source Code | ||
| </a> | ||
| <FlexRow wrap spacing="large" target="tablet" align="start"> | ||
| <Window | ||
| title="Contact" | ||
| visible={{ bind: "contact.visible", defaultValue: false }} | ||
| center | ||
| styles="width:500px;max-width: 90vw" | ||
| modal> | ||
| <div style={{padding: "20px"}} layout={{type: LabelsLeftLayout, mod: 'stretch'}}> | ||
| <TextField label="Name" value={bind("$page.contact.name")} style={{width: '100%'}}/> | ||
| <TextField label="Email" value={bind("$page.contact.email")} style={{width: '100%'}}/> | ||
| <TextArea label="Message" value={bind("$page.contact.message")} rows={5} style={{width: '100%'}}/> | ||
| <DateField label="Date" value={bind("$page.contact.date")}/> | ||
| pad | ||
| > | ||
| <div layout={{ type: LabelsLeftLayout, mod: "stretch" }}> | ||
| <TextField label="Name" value={bind("$page.contact.name")} style={{ width: "100%" }} /> | ||
| <TextField label="Email" value={bind("$page.contact.email")} style={{ width: "100%" }} /> | ||
| <TextArea label="Message" value={bind("$page.contact.message")} rows={5} style={{ width: "100%" }} /> | ||
| <DateField label="Date" value={bind("$page.contact.date")} /> | ||
| </div> | ||
| <FlexRow putInto="footer" spacing justify="end"> | ||
| <Button mod="primary">Submit</Button> | ||
| <Button onClick={(e, ins) => { | ||
| ins.parentOptions.dismiss() | ||
| }}> | ||
| Cancel | ||
| </Button> | ||
| <Button mod="primary">Submit</Button> | ||
| <Button | ||
| onClick={(e, ins) => { | ||
| ins.parentOptions.dismiss(); | ||
| }} | ||
| > | ||
| Cancel | ||
| </Button> | ||
| </FlexRow> | ||
| </Window> | ||
| </Window> | ||
|
|
||
| <Window | ||
| <Window | ||
| title="Backdrop" | ||
| backdrop | ||
| center | ||
| styles="width:500px;max-width: 90vw" | ||
| visible={{bind: "backdrop.visible"}} | ||
| bodyStyle="padding: 50px" | ||
| > | ||
| <p> | ||
| Windows with backdrop can be closed by clicking anywhere outside the window. | ||
| </p> | ||
| </Window> | ||
| visible={{ bind: "backdrop.visible" }} | ||
| pad | ||
| > | ||
| <p>Windows with backdrop can be closed by clicking anywhere outside the window.</p> | ||
| </Window> | ||
|
|
||
| <Section mod="well" hLevel={4} title="Options"> | ||
| <Section mod="well" hLevel={4} title="Options"> | ||
| <FlexRow wrap spacing> | ||
| <Button | ||
| onClick={(e, {store}) => { | ||
| store.toggle("contact.visible") | ||
| }} | ||
| > | ||
| Standard | ||
| </Button> | ||
| <Button | ||
| onClick={(e, { store }) => { | ||
| store.toggle("contact.visible"); | ||
| }} | ||
| > | ||
| Standard | ||
| </Button> | ||
|
|
||
| <Button | ||
| onClick={(e, {store}) => { | ||
| store.toggle("backdrop.visible") | ||
| }} | ||
| > | ||
| Backdrop | ||
| </Button> | ||
| <Button | ||
| onClick={(e, { store }) => { | ||
| store.toggle("backdrop.visible"); | ||
| }} | ||
| > | ||
| Backdrop | ||
| </Button> | ||
|
|
||
| <Button | ||
| onClick={(e, {store}) => { | ||
| showModal(store); | ||
| }} | ||
| > | ||
| Modal | ||
| </Button> | ||
| <Button | ||
| onClick={(e, { store }) => { | ||
| showModal(store); | ||
| }} | ||
| > | ||
| Modal | ||
| </Button> | ||
| </FlexRow> | ||
| </Section> | ||
| <Section mod="well" hLevel={4} title="MsgBox"> | ||
| </Section> | ||
| <Section mod="well" hLevel={4} title="MsgBox"> | ||
| <FlexRow wrap spacing> | ||
| <Button | ||
| onClick={(e) => { | ||
| MsgBox.alert("This is an important message!"); | ||
| }} | ||
| > | ||
| Alert | ||
| </Button> | ||
|
|
||
| <Button onClick={(e) => { | ||
| MsgBox.alert("This is an important message!") | ||
| }}> | ||
| Alert | ||
| </Button> | ||
|
|
||
|
|
||
| <Button onClick={(e) => { | ||
| MsgBox.yesNo("Do you like CxJS?") | ||
| .then(result => { | ||
| if (result == 'yes') { | ||
| MsgBox.alert({ | ||
| message: <div ws> | ||
| Great! Please support CxJS by giving it | ||
| {' '} | ||
| <a href="https://github.com/codaxy/cxjs" target="_blank">a star on GitHub!</a>. | ||
| </div> | ||
| }); | ||
| } | ||
| }) | ||
| }}> | ||
| Yes or No | ||
| </Button> | ||
| <Button | ||
| onClick={(e) => { | ||
| MsgBox.yesNo("Do you like CxJS?").then((result) => { | ||
| if (result == "yes") { | ||
| MsgBox.alert({ | ||
| message: ( | ||
| <div ws> | ||
| Great! Please support CxJS by giving it{" "} | ||
| <a href="https://github.com/codaxy/cxjs" target="_blank"> | ||
| a star on GitHub! | ||
| </a> | ||
| . | ||
| </div> | ||
| ), | ||
| }); | ||
| } | ||
| }); | ||
| }} | ||
| > | ||
| Yes or No | ||
| </Button> | ||
| </FlexRow> | ||
| </Section> | ||
| </FlexRow> | ||
| </cx> | ||
| </Section> | ||
| </FlexRow> | ||
| </cx> | ||
| ); | ||
|
|
||
| import {hmr} from '../../hmr.js'; | ||
| hmr(module); | ||
| import { hmr } from "../../hmr.js"; | ||
| hmr(module); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import style from "./packed-dark.useable.scss"; | ||
| import { registerTheme } from "./index"; | ||
| import { applyThemeOverrides } from "cx-theme-packed-dark/src"; | ||
|
|
||
| registerTheme("packed-dark", style, applyThemeOverrides); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| $cx-include-global-rules: true; | ||
|
|
||
| @import "~cx-theme-packed-dark/src/variables"; | ||
| @import "./util/divide.scss"; | ||
| @import "~cx-theme-packed-dark/src/index"; | ||
|
|
||
| @import "./util/customize-master"; | ||
|
|
||
| @include customize-master( | ||
| $brand-background: #2281b1, | ||
| $brand-highlight-color: #2281b1, | ||
| $sidebar-background-color: rgba(0, 0, 0, 0.2), | ||
| $sidebar-link-color: rgba(255, 255, 255, 0.6), | ||
| $sidebar-active-link-color: rgba(255, 255, 255, 0.8) | ||
| ); |
Oops, something went wrong.