rework window and view, handle fullscreen correctly, fix navbars

Signed-off-by: Niv Sardi <xaiki@evilgiggle.com>

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

src/components/title-bar/index.js

@@ -40,30 +40,14 @@ class TitleBar extends Component {
             min: PropTypes.func,
             max: PropTypes.func
         }),
+        fullscreen: PropTypes.bool.isRequired,
         platform: PropTypes.string,
         title: PropTypes.oneOfType([
             PropTypes.string,
             PropTypes.object
         ])
     }
 
-    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 (
             <nav className={Styles([
                     style.titlebar,
-                    style[props.platform],
-                    state.fullscreen ? style.shrink : null
+                    style[platform],
+                    fullscreen ? style.shrink : null
             ])}>
                 <div className={style.controls}>
-                    {this.getButtons(props.platform).map((i, k) => <Button key={k} {...i}/>)}
+                    {this.getButtons(platform).map((i, k) => <Button key={k} {...i}/>)}
                 </div>
-                <button className={style.fullscreen} onClick={this.setFullscreen.bind(this)}>
-                    <i className="material-icons">{state.fullscreen ? 'fullscreen_exit' : 'fullscreen'}</i>
+                <button className={style.fullscreen} onClick={actions.fullscreen}>
+                    <i className="material-icons">{fullscreen ? 'fullscreen_exit' : 'fullscreen'}</i>
                 </button>
-                <h1 className={style.title}>{props.title}</h1>
+                <h1 className={style.title}>{title}</h1>
             </nav>
         )
     }

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

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

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}) => (
-    <div className={style.windowOuter}>
-        <TitleBar title={title} actions={actions} {...titlebar}/>
-        {bars}
-        <div className={style.windowInner}>
-            <View>
-                {props.children}
-            </View>
-        </div>
-    </div>
-)
+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 (
+            <div className={style.windowOuter}>
+                <TitleBar title={title} actions={actions} fullscreen={fullscreen} {...titlebar}/>
+                {bars}
+                <div className={style.windowInner} style={{
+                    height: fullscreen ? '100%' : 'calc(100% - var(--Window-handler-height))'
+                }}>
+                    <View>
+                        {props.children}
+                    </View>
+                </div>
+            </div>
+        )
+    }
+}
+
+Window.defaultProps = {
+    fullscreen: false
+}
+
+Window.propTypes = {
+    fullscreen: PropTypes.bool
+}
 
 const DemoWindow = ({opacity = 0.5, ...props}) => (
     <div className={style.demoWindow} style={{

src/components/window/style.styl

@@ -4,7 +4,7 @@
     font-family: var(--Font-family)
     overlay(relative)
     overflow: hidden
-    height: calc(100% - var(--Window-handler-height))
+    height: 100%
     width: 100%
 
     .windowInner