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:
parent
fdd0794a13
commit
67e87881b1
12
src/main.css
12
src/main.css
@ -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 {
|
||||
|
@ -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())}
|
||||
|
Loading…
Reference in New Issue
Block a user