1
0
mirror of https://github.com/mifi/lossless-cut.git synced 2024-11-21 18:02:35 +01:00

Make more room in UI by moving icons a bit

Status icons on the left, action icons on the right
This commit is contained in:
Mikael Finstad 2017-11-21 22:54:08 +01:00
parent fdd0794a13
commit 67e87881b1
2 changed files with 24 additions and 9 deletions

View File

@ -38,7 +38,7 @@ input, button, textarea, :focus {
padding: .4em;
}
.controls-wrapper button, .right-menu button {
.controls-wrapper button, .right-menu button, .left-menu button {
background: white;
border-radius: .3em;
color: rgba(0, 0, 0, 0.7);
@ -49,7 +49,7 @@ input, button, textarea, :focus {
border: none;
}
.controls-wrapper button:active, .right-menu button:active {
.controls-wrapper button:active, .right-menu button:active, .left-menu button:active {
background: #ccc;
}
@ -58,6 +58,14 @@ input, button, textarea, :focus {
position: absolute;
right: 0;
bottom: 0;
padding: .3em;
}
.left-menu {
position: absolute;
left: 0;
bottom: 0;
padding: .3em;
}
.controls-wrapper {

View File

@ -404,25 +404,32 @@ class App extends React.Component {
</div>
</div>
<div className="left-menu">
<button title="Format">
{this.state.fileFormat || 'FMT'}
</button>
<button className="playback-rate" title="Playback rate">
{_.round(this.state.playbackRate, 1) || 1}x
</button>
</div>
<div className="right-menu">
<button
title={`Custom output dir (cancel to restore default). Current: ${this.getOutputDir() || 'Not set (use input dir)'}`}
onClick={withBlur(() => this.setOutputDir())}
>
{this.getOutputDir() ? `...${this.getOutputDir().substr(-10)}` : 'OUT PATH'}
</button>
<button title="Format">
{this.state.fileFormat || 'FMT'}
</button>
<button className="playback-rate" title="Playback rate">
{_.round(this.state.playbackRate, 1) || 1}x
{this.getOutputDir() ? `...${this.getOutputDir().substr(-10)}` : 'OUTDIR'}
</button>
<i
title="Capture frame"
style={{ margin: '-.4em -.2em' }}
className="button fa fa-camera"
aria-hidden="true"
onClick={() => this.capture()}
/>
<button
title="Capture frame format"
onClick={withBlur(() => this.toggleCaptureFormat())}