diff --git a/docs/mac-os/box.md b/docs/mac-os/box.md index a6f7a360..063f5806 100644 --- a/docs/mac-os/box.md +++ b/docs/mac-os/box.md @@ -2,17 +2,25 @@ ### Properties -Property | Type | Description -:------------------ | :-----------:| :---------- -background | string | Sets the background color of a component. -height | number | Sets the height of a component. -hidden | bool | Sets the visibility of a component. -horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ -label | string | Adds a label to the box. -margin | string | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ -padding | string | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ -verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ -width | number | Sets the width of a component. +Property | Type | Description +:------------------ | :-------------:| :---------- +background | string | Sets the background color of a component. +height | number | Sets the height of a component. +hidden | bool | Sets the visibility of a component. +horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ +label | string | Adds a label to the box. +margin | string, number | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ +marginBottom | string, number | Sets the outer margin bottom of a component. +marginLeft | string, number | Sets the outer margin left of a component. +marginRight | string, number | Sets the outer margin right of a component. +marginTop | string, number | Sets the outer margin top of a component. +padding | string, number | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ +paddingBottom | string, number | Sets the padding bottom inside a component. +paddingLeft | string, number | Sets the padding left inside a component. +paddingRight | string, number | Sets the padding right inside a component. +paddingTop | string, number | Sets the padding top inside a component. +verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ +width | number | Sets the width of a component. ### Examples diff --git a/docs/mac-os/label.md b/docs/mac-os/label.md index 34dd1870..0428f070 100644 --- a/docs/mac-os/label.md +++ b/docs/mac-os/label.md @@ -2,16 +2,24 @@ ### Properties -Property | Type | Description -:------------------ | :-----------:| :---------- -color | string | Sets the color of the text. -height | number | Sets the height of a component. -hidden | bool | Sets the visibility of a component. -horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ -margin | string | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ -padding | string | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ -verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ -width | number | Sets the width of a component. +Property | Type | Description +:------------------ | :-------------:| :---------- +color | string | Sets the color of the text. +height | number | Sets the height of a component. +hidden | bool | Sets the visibility of a component. +horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ +margin | string, number | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ +marginBottom | string, number | Sets the outer margin bottom of a component. +marginLeft | string, number | Sets the outer margin left of a component. +marginRight | string, number | Sets the outer margin right of a component. +marginTop | string, number | Sets the outer margin top of a component. +padding | string, number | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ +paddingBottom | string, number | Sets the padding bottom inside a component. +paddingLeft | string, number | Sets the padding left inside a component. +paddingRight | string, number | Sets the padding right inside a component. +paddingTop | string, number | Sets the padding top inside a component. +verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ +width | number | Sets the width of a component. ### Examples diff --git a/docs/mac-os/segmented-control.md b/docs/mac-os/segmented-control.md index 73346230..4b7762e2 100644 --- a/docs/mac-os/segmented-control.md +++ b/docs/mac-os/segmented-control.md @@ -4,13 +4,17 @@ ### Properties -Property | Type | Description -:------------------ | :-----------:| :---------- -box | bool | Sets whether the item is in a box or not. -height | number | Sets the height of a component. -hidden | bool | Sets the visibility of a component. -margin | string | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ -width | number | Sets the width of a component. +Property | Type | Description +:------------------ | :-------------:| :---------- +box | bool | Sets whether the item is in a box or not. +height | number | Sets the height of a component. +hidden | bool | Sets the visibility of a component. +margin | string, number | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ +marginBottom | string, number | Sets the outer margin bottom of a component. +marginLeft | string, number | Sets the outer margin left of a component. +marginRight | string, number | Sets the outer margin right of a component. +marginTop | string, number | Sets the outer margin top of a component. +width | number | Sets the width of a component. ## SegmentedControlItem diff --git a/docs/mac-os/title-bar.md b/docs/mac-os/title-bar.md index b7601458..c009ba25 100644 --- a/docs/mac-os/title-bar.md +++ b/docs/mac-os/title-bar.md @@ -5,6 +5,7 @@ Property | Type | Description :------------------ | :-----------:| :---------- controls | bool | Sets the visibility of the controls of the title bar. +inset | bool | Sets the controls of the title bar state to be inset. isFullscreen | bool | Sets the title bar state to fullscreen. onCloseClick | function | Callback function of the close button. onMaximizeClick | function | Callback function of the maximize button diff --git a/docs/mac-os/toolbar-nav.md b/docs/mac-os/toolbar-nav.md new file mode 100644 index 00000000..fe539f23 --- /dev/null +++ b/docs/mac-os/toolbar-nav.md @@ -0,0 +1,82 @@ +# Toolbar Nav + +## ToolbarNav + +### Properties + +Property | Type | Description +:------------------ | :-----------:| :---------- +height | number | Sets the height of a component. +width | number | Sets the width of a component. + +## ToolbarNavItem + +### Properties + +Property | Type | Description +:------------------ | :---------------------:| :---------- +icon | element, array | Sets the icon element of the item. +onClick | function | Callback function when the item is pressed. +selected | bool | Sets whether the item is selected or not. +title | string | Sets the title of the item. + +### Examples + +```jsx +import React, { Component } from 'react'; +import { TitleBar, Toolbar, ToolbarNav, ToolbarNavItem } from 'react-desktop/macOs'; + +const circle = ( + + + +); + +const star = ( + + + +); + +const polygon = ( + + + +); + +export default class extends Component { + constructor() { + super(); + this.state = { selected: 1 }; + } + + render() { + return ( + + + + this.setState({ selected: 1 })} + /> + this.setState({ selected: 2 })} + /> + this.setState({ selected: 3 })} + /> + + + + ); + } +} +``` diff --git a/docs/mac-os/toolbar.md b/docs/mac-os/toolbar.md index 53fcbba4..84e94af8 100644 --- a/docs/mac-os/toolbar.md +++ b/docs/mac-os/toolbar.md @@ -1,19 +1,25 @@ # Toolbar +### Properties + +Property | Type | Description +:------------------ | :-----------:| :---------- +height | number | Sets the height of a component. +horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ +verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ +width | number | Sets the width of a component. + ### Examples ```jsx import React, { Component } from 'react'; -import { TitleBar, Toolbar } from 'react-desktop/macOs'; +import { TitleBar, Toolbar, Text } from 'react-desktop/macOs'; export default class extends Component { render() { return ( - - + + ); } diff --git a/docs/mac-os/view.md b/docs/mac-os/view.md index ab1d7f74..59f4b119 100644 --- a/docs/mac-os/view.md +++ b/docs/mac-os/view.md @@ -2,17 +2,25 @@ ### Properties -Property | Type | Description -:------------------ | :-----------:| :---------- -background | string | Sets the background color of a component. -height | number | Sets the height of a component. -hidden | bool | Sets the visibility of a component. -horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ -layout | string | Sets the direction of the content.
__Property value__ _"horizontal"_, _"vertical"_ -margin | string | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ -padding | string | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ -verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ -width | number | Sets the width of a component. +Property | Type | Description +:------------------ | :-------------:| :---------- +background | string | Sets the background color of a component. +height | number | Sets the height of a component. +hidden | bool | Sets the visibility of a component. +horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ +layout | string | Sets the direction of the content.
__Property value__ _"horizontal"_, _"vertical"_ +margin | string, number | Sets the outer margin of a component.
__E.G.__ _"30px 20px"_ +marginBottom | string, number | Sets the outer margin bottom of a component. +marginLeft | string, number | Sets the outer margin left of a component. +marginRight | string, number | Sets the outer margin right of a component. +marginTop | string, number | Sets the outer margin top of a component. +padding | string, number | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ +paddingBottom | string, number | Sets the padding bottom inside a component. +paddingLeft | string, number | Sets the padding left inside a component. +paddingRight | string, number | Sets the padding right inside a component. +paddingTop | string, number | Sets the padding top inside a component. +verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ +width | number | Sets the width of a component. ### Examples diff --git a/docs/mac-os/window.md b/docs/mac-os/window.md index 8dfb80b0..3e9f2fda 100644 --- a/docs/mac-os/window.md +++ b/docs/mac-os/window.md @@ -2,16 +2,20 @@ ### Properties -Property | Type | Description -:------------------ | :-----------:| :---------- -background | string | Sets the background color of a component. -chrome | bool | Sets the chrome of the window. -height | number | Sets the height of a component. -hidden | bool | Sets the visibility of a component. -horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ -padding | string | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ -verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ -width | number | Sets the width of a component. +Property | Type | Description +:------------------ | :-------------:| :---------- +background | string | Sets the background color of a component. +chrome | bool | Sets the chrome of the window. +height | number | Sets the height of a component. +hidden | bool | Sets the visibility of a component. +horizontalAlignment | string | Sets the horizontal alignment of the component's content
__Property value__ _"left"_, _"center"_, _"right"_ +padding | string, number | Sets the padding inside a component.
__E.G.__ _"30px 20px"_ +paddingBottom | string, number | Sets the padding bottom inside a component. +paddingLeft | string, number | Sets the padding left inside a component. +paddingRight | string, number | Sets the padding right inside a component. +paddingTop | string, number | Sets the padding top inside a component. +verticalAlignment | string | Sets the vertical alignment of the component's content.
__Property value__ _"top"_, _"center"_, _"bottom"_ +width | number | Sets the width of a component. ### Examples diff --git a/examples/macOs/components/toolbar.js b/examples/macOs/components/toolbar.js index d77e259b..ea1750dd 100644 --- a/examples/macOs/components/toolbar.js +++ b/examples/macOs/components/toolbar.js @@ -1,14 +1,11 @@ import React, { Component } from 'react'; -import { TitleBar, Toolbar } from 'react-desktop/macOs'; +import { TitleBar, Toolbar, Text } from 'react-desktop/macOs'; export default class extends Component { render() { return ( - - + + ); } diff --git a/examples/macOs/components/toolbarNav.js b/examples/macOs/components/toolbarNav.js new file mode 100644 index 00000000..03e49c4e --- /dev/null +++ b/examples/macOs/components/toolbarNav.js @@ -0,0 +1,56 @@ +import React, { Component } from 'react'; +import { TitleBar, Toolbar, ToolbarNav, ToolbarNavItem } from 'react-desktop/macOs'; + +const circle = ( + + + +); + +const star = ( + + + +); + +const polygon = ( + + + +); + +export default class extends Component { + constructor() { + super(); + this.state = { selected: 1 }; + } + + render() { + return ( + + + + this.setState({ selected: 1 })} + /> + this.setState({ selected: 2 })} + /> + this.setState({ selected: 3 })} + /> + + + + ); + } +} diff --git a/package.json b/package.json index 288d4f73..ce40c2e3 100644 --- a/package.json +++ b/package.json @@ -34,23 +34,23 @@ }, "devDependencies": { "babel-cli": "^6.11.4", - "babel-core": "^6.11.4", + "babel-core": "^6.13.2", "babel-eslint": "^6.1.2", "babel-loader": "^6.2.4", "babel-plugin-transform-decorators-legacy": "^1.3.4", - "babel-preset-es2015": "^6.9.0", + "babel-preset-es2015": "^6.13.2", "babel-preset-react": "^6.11.1", "babel-preset-stage-0": "^6.5.0", "chai": "^3.5.0", - "eslint": "^3.1.1", - "eslint-plugin-react": "^5.2.2", + "eslint": "^3.2.2", + "eslint-plugin-react": "^6.0.0", "html-webpack-plugin": "^2.22.0", "jsdom": "^9.4.1", - "mocha": "^2.5.3", - "react": "^15.2.1", - "react-addons-test-utils": "^15.2.1", + "mocha": "^3.0.2", + "react": "^15.3.0", + "react-addons-test-utils": "^15.3.0", "react-color": "^2.2.2", - "react-dom": "^15.2.1", + "react-dom": "^15.3.0", "react-hot-loader": "^1.3.0", "webpack": "^1.13.1", "webpack-dev-server": "^1.14.1" @@ -60,7 +60,7 @@ "eslint": "./node_modules/.bin/eslint ./src ./test", "prebuild": "rsync -av -delete . build --exclude build --exclude .git --exclude .idea && npm run eslint && npm run test", "build": "./node_modules/.bin/babel ./build/src --out-dir ./build/src && ./node_modules/.bin/babel ./build/index.js --out-file ./build/index.js && ./node_modules/.bin/babel ./build/macOs.js --out-file ./build/osx.js && ./node_modules/.bin/babel ./build/macOs.js --out-file ./build/macOs.js && ./node_modules/.bin/babel ./build/windows.js --out-file ./build/windows.js", - "playground": "./node_modules/.bin/webpack-dev-server --config ./playground/webpack.config.js --colors --inline --port 3000", + "playground": "./node_modules/.bin/webpack-dev-server --config ./playground/webpack.config.js --colors --inline --port 3001", "build-publish": "npm run build && npm publish ./build" } } diff --git a/src/titleBar/macOs/controls/controls.js b/src/titleBar/macOs/controls/controls.js index 213049ac..18a58538 100644 --- a/src/titleBar/macOs/controls/controls.js +++ b/src/titleBar/macOs/controls/controls.js @@ -13,8 +13,7 @@ var styles = { }, inset: { - marginLeft: '5px', - marginTop: '12px' + marginLeft: '5px' } }; diff --git a/src/titleBar/macOs/styles/10.11.js b/src/titleBar/macOs/styles/10.11.js index 0585bb7d..0cf6d8dc 100644 --- a/src/titleBar/macOs/styles/10.11.js +++ b/src/titleBar/macOs/styles/10.11.js @@ -33,12 +33,11 @@ export default { cursor: 'default', fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif', fontSize: '13px', - letterSpacing: '0.5px', + letterSpacing: '0px', color: '#4d4d4d', flexGrow: '1', flexShrink: '1', textAlign: 'center', - lineHeight: '22px', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, diff --git a/src/toolbar/macOs/nav/item/item.js b/src/toolbar/macOs/nav/item/item.js index 7b74ed51..971b13ec 100644 --- a/src/toolbar/macOs/nav/item/item.js +++ b/src/toolbar/macOs/nav/item/item.js @@ -26,13 +26,14 @@ const styles = { class Item extends Component { static propTypes = { - name: PropTypes.string, - icon: PropTypes.element, - selected: PropTypes.bool + titel: PropTypes.string, + icon: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), + selected: PropTypes.bool, + onClick: PropTypes.func }; render() { - const { name, icon, style, selected, ...props } = this.props; + const { title, icon, style, selected, ...props } = this.props; return (
@@ -43,7 +44,7 @@ class Item extends Component {
{icon}
- {name} + {title}
); diff --git a/src/toolbar/macOs/nav/nav.js b/src/toolbar/macOs/nav/nav.js index 288abafb..fc2b2663 100644 --- a/src/toolbar/macOs/nav/nav.js +++ b/src/toolbar/macOs/nav/nav.js @@ -1,6 +1,7 @@ -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; import { Style } from 'radium'; import Dimension, { dimensionPropTypes } from '../../../style/dimension'; +import WindowFocus from '../../../windowFocus'; const styles = { nav: { @@ -10,22 +11,30 @@ const styles = { }; @Dimension({ height: '54px' }) +@WindowFocus() class Nav extends Component { static propTypes = { ...dimensionPropTypes }; render() { - const { children, style, ...props } = this.props; + const { children, style, isWindowFocused, ...props } = this.props; + let componentStyle = { ...styles.nav }; + + let fillOpacity = '.8'; + if (!isWindowFocused) { + componentStyle.opacity = '.5'; + fillOpacity = '.3'; + } return ( -
+