diff --git a/src/components/navbar/style.styl b/src/components/navbar/style.styl index 87bc083..696ceac 100644 --- a/src/components/navbar/style.styl +++ b/src/components/navbar/style.styl @@ -17,7 +17,7 @@ } .navbar - position: fixed + position: absolute background-color: var(--Navbar-bg) box-shadow: 0 3px 5px -5px rgba(0, 0, 0, 15) align-items: center diff --git a/src/components/title-bar/index.js b/src/components/title-bar/index.js index a587ba8..ebb8b40 100644 --- a/src/components/title-bar/index.js +++ b/src/components/title-bar/index.js @@ -40,6 +40,7 @@ class TitleBar extends Component { min: PropTypes.func, max: PropTypes.func }), + fullscreen: PropTypes.bool.isRequired, platform: PropTypes.string, title: PropTypes.oneOfType([ PropTypes.string, @@ -47,23 +48,6 @@ class TitleBar extends Component { ]) } - constructor (props) { - super(); - - this.state = { - fullscreen: props.fullscreen - } - } - - setFullscreen () { - this.setState(prevState => { - const {actions} = this.props - const fullscreen = !!!prevState.fullscreen - actions.fullscreen(fullscreen) - return {fullscreen} - }) - } - getButtons () { let data = [] let { props, state } = this @@ -80,20 +64,22 @@ class TitleBar extends Component { } render () { - let {props, state} = this + + const {actions, platform, fullscreen, title} = this.props + return ( ) } diff --git a/src/components/title-bar/style.styl b/src/components/title-bar/style.styl index 6f8a61a..a5a8284 100644 --- a/src/components/title-bar/style.styl +++ b/src/components/title-bar/style.styl @@ -18,10 +18,6 @@ &.shrink { max-height: 0 - - .fullscreen { - padding-top: 4vh; - } } .controls @@ -55,6 +51,7 @@ margin: 0 6px opacity: 0.5 padding: 0 + top: 1vh &.active &:hover opacity: 1 diff --git a/src/components/view/style.styl b/src/components/view/style.styl index 9f307a6..9f6f0da 100644 --- a/src/components/view/style.styl +++ b/src/components/view/style.styl @@ -4,6 +4,9 @@ left: 0 right: 0 bottom: 0 + overflow-x: hidden + overflow-y: auto + scrollable() .content position: absolute diff --git a/src/components/window/index.js b/src/components/window/index.js index f265f1b..ae7fc28 100644 --- a/src/components/window/index.js +++ b/src/components/window/index.js @@ -6,17 +6,56 @@ import TitleBar from '../title-bar'; import Navbar from '../navbar'; import style from './style.styl'; -const Window = ({title, titlebar, bars, actions, ...props}) => ( -
- - {bars} -
- - {props.children} - -
-
-) +class Window extends React.Component { + constructor (props) { + super(props); + + this.state = { + fullscreen: props.fullscreen + } + } + + setFullscreen () { + this.setState(prevState => { + const {actions} = this.props + const fullscreen = !!!prevState.fullscreen + actions.fullscreen(fullscreen) + return {fullscreen} + }) + } + + render () { + const {title, titlebar, bars, ...props} = this.props + const {fullscreen} = this.state + + const actions = { + ...this.props.actions, + fullscreen: this.setFullscreen.bind(this) + } + + return ( +
+ + {bars} +
+ + {props.children} + +
+
+ ) + } +} + +Window.defaultProps = { + fullscreen: false +} + +Window.propTypes = { + fullscreen: PropTypes.bool +} const DemoWindow = ({opacity = 0.5, ...props}) => (