mirror of
https://github.com/desktop/desktop
synced 2024-10-31 11:07:25 +00:00
First hacky attempt at window controls (on windows)... windows
This commit is contained in:
parent
cfad322b1b
commit
2398af38d4
4 changed files with 61 additions and 0 deletions
|
@ -4,6 +4,7 @@ import Info from './info'
|
|||
import UsersStore from './users-store'
|
||||
import User from './user'
|
||||
import NotLoggedIn from './not-logged-in'
|
||||
import {WindowControls} from './ui/window/window-controls'
|
||||
import API from './lib/api'
|
||||
import {Repo} from './lib/api'
|
||||
|
||||
|
@ -66,6 +67,7 @@ export default class App extends React.Component<AppProps, AppState> {
|
|||
return (
|
||||
<div id='desktop-app-title-bar'>
|
||||
<span className='app-title'>GitHub Desktop</span>
|
||||
<WindowControls />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
37
src/ui/window/window-controls.tsx
Normal file
37
src/ui/window/window-controls.tsx
Normal file
|
@ -0,0 +1,37 @@
|
|||
import * as React from 'react'
|
||||
import {remote} from 'electron'
|
||||
|
||||
interface WindowControlState {
|
||||
windowState: 'minimized' | 'normal' | 'maximized' | 'full-screen'
|
||||
}
|
||||
|
||||
export class WindowControls extends React.Component<void, WindowControlState> {
|
||||
|
||||
public componentWillMount() {
|
||||
this.setState({ windowState: 'normal' })
|
||||
}
|
||||
|
||||
public render() {
|
||||
|
||||
// We only know how to render fake windows-y controls
|
||||
if (process.platform !== 'win32') {
|
||||
return null
|
||||
}
|
||||
|
||||
const min = <button tabIndex='-1' className='window-control minimize' onClick={() => remote.getCurrentWindow().minimize()}>min</button>
|
||||
|
||||
const maximizeOrRestore = this.state.windowState === 'maximized'
|
||||
? <button tabIndex='-1' className='window-control restore' onClick={() => remote.getCurrentWindow().unmaximize()}>restore</button>
|
||||
: <button tabIndex='-1' className='window-control maximize' onClick={() => remote.getCurrentWindow().maximize()}>max</button>
|
||||
|
||||
const close = <button tabIndex='-1' className='window-control close' onClick={() => remote.getCurrentWindow().close()}>x</button>
|
||||
|
||||
return (
|
||||
<div className='window-controls'>
|
||||
{min}
|
||||
{maximizeOrRestore}
|
||||
{close}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
|
@ -1,2 +1,3 @@
|
|||
@import "ui/app";
|
||||
@import "ui/window/window-controls";
|
||||
@import "ui/octicons";
|
||||
|
|
21
styles/ui/window/_window-controls.scss
Normal file
21
styles/ui/window/_window-controls.scss
Normal file
|
@ -0,0 +1,21 @@
|
|||
@import "../../mixins";
|
||||
|
||||
button.window-control {
|
||||
-webkit-app-region: no-drag;
|
||||
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
|
||||
color: #ccc;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: #e7e7e7;
|
||||
color: #333;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue