From 845f7f4ba38dc08fbc6ad072f1450d2c24e9553d Mon Sep 17 00:00:00 2001 From: Steve Kellock Date: Sat, 5 Aug 2017 14:18:12 -0400 Subject: [PATCH 1/2] Tabs now show/hide instead of create/destroy. --- .../example-using-tabs/dog-tab/dog-tab.tsx | 8 +++++-- .../example-using-tabs/long-tab/long-tab.tsx | 22 +++++++++++-------- .../welcome-screen/sample-tabs.tsx | 4 ++-- .../welcome-screen/welcome-screen.tsx | 10 ++++++--- .../centered-content/centered-content.tsx | 2 +- .../scrollable-content/scrollable-content.tsx | 2 +- 6 files changed, 30 insertions(+), 18 deletions(-) diff --git a/src/renderer/features/example-using-tabs/dog-tab/dog-tab.tsx b/src/renderer/features/example-using-tabs/dog-tab/dog-tab.tsx index 2c7e842..bbbf2a0 100644 --- a/src/renderer/features/example-using-tabs/dog-tab/dog-tab.tsx +++ b/src/renderer/features/example-using-tabs/dog-tab/dog-tab.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { CSSProperties } from 'react' import { Text, CenteredContent, spacing, cssProps } from '../../../platform' import { FunDog } from '../fun-dog' import { Logo } from '../logo' @@ -7,11 +8,14 @@ const TEXT_STYLE = cssProps({ paddingTop: spacing.medium, paddingBottom: spacing.medium, }) +export interface DogTabProps { + style?: CSSProperties | CSSProperties[] | null | false +} -export class DogTab extends React.PureComponent<{}, {}> { +export class DogTab extends React.PureComponent { render() { return ( - + Wake up and smell the electrons. diff --git a/src/renderer/features/example-using-tabs/long-tab/long-tab.tsx b/src/renderer/features/example-using-tabs/long-tab/long-tab.tsx index 3665284..afff3aa 100644 --- a/src/renderer/features/example-using-tabs/long-tab/long-tab.tsx +++ b/src/renderer/features/example-using-tabs/long-tab/long-tab.tsx @@ -1,16 +1,20 @@ import * as React from 'react' +import { CSSProperties } from 'react' import { Text, ScrollableContent, spacing, cssProps } from '../../../platform' -import { css } from 'glamor' const PADDED = cssProps({ paddingBottom: spacing.medium, }) -export class LongTab extends React.PureComponent<{}, {}> { +export interface LongTabProps { + style?: CSSProperties | CSSProperties[] | null | false +} + +export class LongTab extends React.PureComponent { render() { return ( - - + + Lomo kombucha irony, keffiyeh man bun pitchfork helvetica organic godard brunch XOXO subway tile. Vexillologist gluten-free prism air plant godard raw denim tacos forage neutra kogi lyft beard. Direct trade retro ramps, pour-over slow-carb 8-bit hell of @@ -22,7 +26,7 @@ export class LongTab extends React.PureComponent<{}, {}> { bicycle rights. Post-ironic selfies gochujang franzen master cleanse chicharrones ethical coloring book keytar 8-bit poutine fixie. - + Shaman glossier listicle, tousled knausgaard vegan microdosing mumblecore meditation freegan taiyaki. Dreamcatcher occupy enamel pin edison bulb PBR&B +1 food truck try-hard forage pug iceland sartorial scenester. Yr brooklyn pinterest +1 sustainable. Narwhal @@ -33,7 +37,7 @@ export class LongTab extends React.PureComponent<{}, {}> { VHS, brooklyn salvia lyft activated charcoal direct trade mlkshk unicorn williamsburg post-ironic banjo. Sriracha cray coloring book activated charcoal irony meditation. - + Drinking vinegar 8-bit roof party leggings, master cleanse deep v slow-carb locavore hoodie. La croix thundercats trust fund synth, truffaut woke bitters twee craft beer next level mustache ramps yr hashtag. Portland 8-bit gentrify 3 wolf moon hexagon, 90's @@ -49,7 +53,7 @@ export class LongTab extends React.PureComponent<{}, {}> { Listicle letterpress waistcoat actually, hell of typewriter normcore thundercats kale chips post-ironic helvetica pabst. - + Chambray ethical vice williamsburg. Four loko chambray glossier seitan, stumptown fanny pack PBR&B normcore quinoa echo park. Direct trade taxidermy pok pok, unicorn you probably haven't heard of them letterpress leggings. Flannel kinfolk four loko taxidermy fanny pack @@ -63,7 +67,7 @@ export class LongTab extends React.PureComponent<{}, {}> { master cleanse wayfarers. Mlkshk sriracha microdosing, chia post-ironic paleo chillwave PBR&B. - + Ugh +1 narwhal, truffaut polaroid live-edge artisan tousled wayfarers taxidermy chia raw denim flannel. Vinyl polaroid franzen portland tilde edison bulb, you probably haven't heard of them hot chicken mlkshk. Prism blue bottle mustache, tattooed selvage franzen @@ -76,7 +80,7 @@ export class LongTab extends React.PureComponent<{}, {}> { synth affogato pickled. Truffaut typewriter quinoa copper mug fanny pack glossier 8-bit, meditation vape jean shorts. Ennui church-key cliche af intelligentsia, fam fingerstache. - Oh. You need a little dummy text for your mockup? How quaint. + Oh. You need a little dummy text for your mockup? How quaint. I bet you’re still using Bootstrap too… ) diff --git a/src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx b/src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx index 77eab07..48af771 100644 --- a/src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx +++ b/src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx @@ -22,7 +22,7 @@ const KEY_1 = `${commandOrControlKey}+1` const KEY_2 = `${commandOrControlKey}+2` const KEY_3 = `${commandOrControlKey}+3` -const ROOT_STYLE = compose( +const ROOT = compose( styles.row, cssProps({ paddingLeft: spacing.medium, @@ -51,7 +51,7 @@ export class SampleTabs extends React.PureComponent { render() { const { tab } = this.props return ( -
+
diff --git a/src/renderer/features/example-using-tabs/welcome-screen/welcome-screen.tsx b/src/renderer/features/example-using-tabs/welcome-screen/welcome-screen.tsx index 9bc3266..2851636 100644 --- a/src/renderer/features/example-using-tabs/welcome-screen/welcome-screen.tsx +++ b/src/renderer/features/example-using-tabs/welcome-screen/welcome-screen.tsx @@ -3,10 +3,14 @@ import { SampleTabs, SampleTabType } from './sample-tabs' import { LongTab } from '../long-tab' import { DogTab } from '../dog-tab' import { Header } from '../header' -import { styles } from '../../../platform' +import { styles, cssProps } from '../../../platform' import Store = require('electron-store') import { css } from 'glamor' +const HIDDEN = cssProps({ + display: 'none', +}) + // a sample store const store = new Store() @@ -38,8 +42,8 @@ export class WelcomeScreen extends React.Component<{}, WelcomeScreenState> {
- {this.state.tab === 'one' && } - {this.state.tab === 'two' && } + +
) } diff --git a/src/renderer/platform/components/centered-content/centered-content.tsx b/src/renderer/platform/components/centered-content/centered-content.tsx index 9117af9..dcb027d 100644 --- a/src/renderer/platform/components/centered-content/centered-content.tsx +++ b/src/renderer/platform/components/centered-content/centered-content.tsx @@ -5,7 +5,7 @@ import { compose, css } from 'glamor' export interface CenteredContentProps { children: React.ReactNode - style?: CSSProperties | CSSProperties[] + style?: CSSProperties | CSSProperties[] | false | null } const BASE = compose( diff --git a/src/renderer/platform/components/scrollable-content/scrollable-content.tsx b/src/renderer/platform/components/scrollable-content/scrollable-content.tsx index fd09bec..22c5b49 100644 --- a/src/renderer/platform/components/scrollable-content/scrollable-content.tsx +++ b/src/renderer/platform/components/scrollable-content/scrollable-content.tsx @@ -5,7 +5,7 @@ import { css, compose } from 'glamor' export interface ScrollableContentProps { children?: React.ReactNode - style?: CSSProperties | CSSProperties[] + style?: CSSProperties | CSSProperties[] | null | false } const ROOT = compose( From 43c370589e3d8661007138f3d820ea90153af80c Mon Sep 17 00:00:00 2001 From: Steve Kellock Date: Sat, 5 Aug 2017 16:25:25 -0400 Subject: [PATCH 2/2] Adjusts styles and plays with colors. --- .../example-using-tabs/fun-dog/fun-dog.tsx | 6 ++- .../example-using-tabs/header/header.tsx | 5 +- .../welcome-screen/sample-tabs.tsx | 15 ++++-- .../welcome-screen/welcome-screen.tsx | 2 - src/renderer/platform/components/tab/tab.tsx | 15 ++++-- .../platform/components/text/text.test.js.md | 10 ++-- .../components/text/text.test.js.snap | Bin 350 -> 350 bytes .../platform/components/text/text.tsx | 5 +- src/renderer/platform/theme/colors.ts | 43 +++++++++++------- src/renderer/platform/theme/fontSizes.ts | 3 +- .../platform/utils/css-reset/css-reset.ts | 2 +- 11 files changed, 65 insertions(+), 41 deletions(-) diff --git a/src/renderer/features/example-using-tabs/fun-dog/fun-dog.tsx b/src/renderer/features/example-using-tabs/fun-dog/fun-dog.tsx index 8f85d89..d1f7fdb 100644 --- a/src/renderer/features/example-using-tabs/fun-dog/fun-dog.tsx +++ b/src/renderer/features/example-using-tabs/fun-dog/fun-dog.tsx @@ -1,12 +1,14 @@ import * as React from 'react' import dogImage from './fun-dog.jpg' -import { cssProps } from '../../../platform' +import { cssProps, colors } from '../../../platform' import { css } from 'glamor' const ROOT = cssProps({ width: 300, borderStyle: 'solid', - borderWidth: 1, + borderWidth: 2, + borderColor: colors.line, + borderRadius: 4, }) export function FunDog() { diff --git a/src/renderer/features/example-using-tabs/header/header.tsx b/src/renderer/features/example-using-tabs/header/header.tsx index d3c6217..e185f12 100644 --- a/src/renderer/features/example-using-tabs/header/header.tsx +++ b/src/renderer/features/example-using-tabs/header/header.tsx @@ -9,8 +9,9 @@ const ROOT = compose( cssProps({ textAlign: 'center', paddingTop: spacing.verySmall, - backgroundColor: colors.headerBg, - fontSize: fontSizes.small, + backgroundColor: colors.navBackground, + color: colors.navLine, + fontSize: fontSizes.medium, }), ) diff --git a/src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx b/src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx index 48af771..6efd058 100644 --- a/src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx +++ b/src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx @@ -23,11 +23,18 @@ const KEY_2 = `${commandOrControlKey}+2` const KEY_3 = `${commandOrControlKey}+3` const ROOT = compose( + styles.windowDrag, styles.row, cssProps({ paddingLeft: spacing.medium, paddingRight: spacing.medium, - backgroundColor: colors.headerBg, + paddingTop: spacing.small, + backgroundColor: colors.navBackground, + justifyContent: 'center', + borderBottom: 1, + borderBottomColor: colors.line, + borderBottomStyle: 'solid', + boxShadow: `0px 2px 10px ${colors.navBackground}`, }), ) @@ -52,9 +59,9 @@ export class SampleTabs extends React.PureComponent { const { tab } = this.props return (
- - - + + +
) } diff --git a/src/renderer/features/example-using-tabs/welcome-screen/welcome-screen.tsx b/src/renderer/features/example-using-tabs/welcome-screen/welcome-screen.tsx index 2851636..9022a82 100644 --- a/src/renderer/features/example-using-tabs/welcome-screen/welcome-screen.tsx +++ b/src/renderer/features/example-using-tabs/welcome-screen/welcome-screen.tsx @@ -2,7 +2,6 @@ import * as React from 'react' import { SampleTabs, SampleTabType } from './sample-tabs' import { LongTab } from '../long-tab' import { DogTab } from '../dog-tab' -import { Header } from '../header' import { styles, cssProps } from '../../../platform' import Store = require('electron-store') import { css } from 'glamor' @@ -40,7 +39,6 @@ export class WelcomeScreen extends React.Component<{}, WelcomeScreenState> { render() { return (
-
diff --git a/src/renderer/platform/components/tab/tab.tsx b/src/renderer/platform/components/tab/tab.tsx index e76e015..e07664d 100644 --- a/src/renderer/platform/components/tab/tab.tsx +++ b/src/renderer/platform/components/tab/tab.tsx @@ -14,28 +14,33 @@ const BASE = compose( styles.noWindowDrag, cssProps({ cursor: 'pointer', - padding: spacing.small, - fontSize: fontSizes.default, + paddingTop: spacing.small, + paddingBottom: spacing.small, + paddingLeft: spacing.medium, + paddingRight: spacing.medium, }), ) const ACTIVE = cssProps({ - color: colors.primary, - borderBottom: colors.primary, + borderBottom: colors.line, borderBottomWidth: 2, borderBottomStyle: 'solid', }) +const BASE_TEXT = cssProps({ color: colors.navInactive, fontSize: fontSizes.mediumPlus }) +const ACTIVE_TEXT = cssProps({ color: colors.navActive }) + /** * A tab component that you click on. Not the tab panel. */ export function Tab(props: TabProps) { // work out the styles const styleProps = css(BASE, props.active && ACTIVE, props.style) + const textStyle = css(BASE_TEXT, props.active && ACTIVE_TEXT) return (
- +
) } diff --git a/src/renderer/platform/components/text/text.test.js.md b/src/renderer/platform/components/text/text.test.js.md index e24746f..646a284 100644 --- a/src/renderer/platform/components/text/text.test.js.md +++ b/src/renderer/platform/components/text/text.test.js.md @@ -9,7 +9,7 @@ Generated by [AVA](https://ava.li). > Snapshot 1

## children have priority over text @@ -17,7 +17,7 @@ Generated by [AVA](https://ava.li). > Snapshot 1

one

@@ -27,7 +27,7 @@ Generated by [AVA](https://ava.li). > Snapshot 1

hi

@@ -37,7 +37,7 @@ Generated by [AVA](https://ava.li). > Snapshot 1

hello

@@ -47,7 +47,7 @@ Generated by [AVA](https://ava.li). > Snapshot 1

one

diff --git a/src/renderer/platform/components/text/text.test.js.snap b/src/renderer/platform/components/text/text.test.js.snap index fd13f8908f82408128be8a54ccf84a4eb541a50a..fa8a5e8e1c11325324d31f674d53bbb884b01a7d 100644 GIT binary patch delta 73 zcmV-P0Ji_$0^R~5K~_N^Q*L2!b7*gLAa*ed0RZZnmg8$Vgd&;hw-FJ13g?j`;0M#p f^0JLBp_2&#LlP~Mi_^=>VGaZUqebxfhywrsGe{k| delta 73 zcmV-P0Ji_$0^R~5K~_N^Q*L2!b7*gLAa*ed0RYBm0j>inRAR+-Vp;J$2?~)S;0Mi8 fOY+l7ppyv!LlTQCvWtq-VGaZUOb>Smhywrsw9Xj6 diff --git a/src/renderer/platform/components/text/text.tsx b/src/renderer/platform/components/text/text.tsx index 553f2eb..cd1b1a3 100644 --- a/src/renderer/platform/components/text/text.tsx +++ b/src/renderer/platform/components/text/text.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { CSSProperties } from 'react' -import { fonts, fontSizes, cssProps } from '../..' +import { colors, fonts, fontSizes, cssProps } from '../..' import { css } from 'glamor' export interface TextProps { @@ -10,7 +10,8 @@ export interface TextProps { } const STYLE = cssProps({ - fontSize: fontSizes.default, + color: colors.text, + fontSize: fontSizes.medium, fontFamily: fonts.default, padding: 0, margin: 0, diff --git a/src/renderer/platform/theme/colors.ts b/src/renderer/platform/theme/colors.ts index fc74258..8c89d5f 100644 --- a/src/renderer/platform/theme/colors.ts +++ b/src/renderer/platform/theme/colors.ts @@ -2,15 +2,19 @@ * Named colours. */ const palette = { - blue: '#66d', + bluez: ['#2B3A45', '#56748A', '#9CD4FC', '#D2EBFD', '#EDF7FE'], + beige: ['#383330', '#585350', '#a8a3a0', '#d8d3d0', '#f8f3f0'], + mint: ['#385350', '#587370', '#a8c3c0', '#d8e3e0', '#f8ffff'], + purps: ['#503853', '#705873', '#c0a8c3', '#e0d8e3', '#fff8ff'], + grayscale: ['#1d1d1d', '#2d2d2d', '#333', '#666', '#888', '#aaa', '#ddd', '#e6e6e6', '#f0f0f0'], cherry: '#d44', - white: '#fff', - offWhite: '#f0f0f0', - neutral: '#999', - offBlack: '#222', - black: '#000', } +/** + * The dominant color scale. + */ +const dominant = palette.beige + /** * These are the various roles that colour plays in the system. */ @@ -24,20 +28,25 @@ export const colors = { /** * The default dackground color. */ - background: palette.white, + background: dominant[4], - /** - * The header background color. + /** + * The background color navigation. */ - headerBg: palette.white, + navBackground: dominant[2], + /** the line color of the nav */ + navLine: dominant[1], + /** Navigation foreground when it isn't active. */ + navInactive: dominant[3], + /** Navigation foreground when active. */ + navActive: dominant[1], - /** - * The predominant colour. - */ - primary: palette.blue, + /** Normal reading text. */ + text: palette.grayscale[2], - /** - * When something goes wrong. - */ + /** When something goes wrong. */ error: palette.cherry, + + /** Subtle lines like dividers. */ + line: dominant[1], } diff --git a/src/renderer/platform/theme/fontSizes.ts b/src/renderer/platform/theme/fontSizes.ts index 283d9a5..25f58fb 100644 --- a/src/renderer/platform/theme/fontSizes.ts +++ b/src/renderer/platform/theme/fontSizes.ts @@ -1,4 +1,5 @@ export const fontSizes = { small: 12, - default: 16, + medium: 15, + mediumPlus: 18, } diff --git a/src/renderer/platform/utils/css-reset/css-reset.ts b/src/renderer/platform/utils/css-reset/css-reset.ts index 5745750..ef041c1 100644 --- a/src/renderer/platform/utils/css-reset/css-reset.ts +++ b/src/renderer/platform/utils/css-reset/css-reset.ts @@ -10,7 +10,7 @@ import { css } from 'glamor' css.global('html, body', { userSelect: 'none', cursor: 'default', - WebkitFontSmoothing: 'subpixel-antialiased', + WebkitFontSmoothing: 'subpixel-antialiased', // none | antialiased | subpixel-antialiased textRendering: 'optimizeLegibility', font: 'caption', })