Skip to content

Commit

Permalink
feat: move ch strip to left side
Browse files Browse the repository at this point in the history
  • Loading branch information
@olzzon
olzzon committed Jan 16, 2020
1 parent b84e965 commit 89756b9
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 83 deletions.
81 changes: 34 additions & 47 deletions client/assets/css/ChanStrip.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
.chan-strip-body {
position: fixed;
display: flex;
position: relative;
top: 5px;
left: 0px;
right: 0px;
overflow: auto;
height: 240px;
width: 420px;
height: 940px;
background-color: rgb(31, 31, 31);
border-color: rgb(70, 70, 70);
border-style: solid;
Expand All @@ -15,37 +12,36 @@
color: #fff;
}

.chan-strip-body > .header {
margin-left: 20px;
margin-top: 10px;
width: 420px;
font-size: 240%;
color: #fff;
}

.chan-strip-body > .parameters {
position: fixed;
display: flex;
top: 5px;
left: 2px;
width: 1880px;
overflow: auto;
height: 240px;
text-align: left;
z-index: 2;

text-align: center;
color: #fff;
}

.parameters > .vertical {
transform: rotate(180deg);
text-align: right;
writing-mode: vertical-rl;
text-orientation: right;
.parameters > .parameter-group {
display: flex;
top: 5px;
left: 2px;
margin-left: 20px;
margin-right: 20px;
margin-top: 50px;
line-height: 30px;
font-size: 140%;
overflow: auto;
text-align: center;
color: #fff;
}
.parameters > .vertical-line {
background-color:rgb(70, 70, 70);
height: 100%;
width: 4px;
margin-left: 10px;
margin-right: 10px;

.parameters > .group-text {
text-align: center;
line-height: 20px;
font-size: 110%;
}

.parameters > .parameter-text {
Expand All @@ -67,39 +63,30 @@
font-size: 95%;
}

.chan-strip-body > .settings-buttons {
background-color: rgb(31, 31, 31);
.header > .close {
position: fixed;
z-index: 2;
top: 9px;
height: 240px;
width: 140px;
right: 15px;
}

.settings-buttons > .close {
outline : none;
border-color: rgb(99, 99, 99);
background-color: rgb(27, 27, 27);
border-radius: 100%;
display: block;
border-radius: 20px;
color: #fff;
width: 50px;
height: 50px;
font-size: 30px;
line-height: 50px;
margin-left: 50px;
margin-top: 5px;
left: 350px;
}

.settings-buttons > button {
.header > button {
outline : none;
border-color: rgb(99, 99, 99);
background-color: rgb(27, 27, 27);
border-radius: 7px;
margin-top: 10px;
width: 130px;
font-size: 105%;
line-height: 30px;
margin-left: 10px;
margin-top: 5px;
width: 180px;
font-size: 12px;
line-height: 40px;
color: #fff;
}

Expand Down
1 change: 0 additions & 1 deletion client/assets/css/Channels.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
flex-direction: row;
background-color: black;
min-height: 760px;
margin-top: 22vh;
}

.channels-mix-body {
Expand Down
70 changes: 35 additions & 35 deletions client/components/ChanStrip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ import {
TOGGLE_SHOW_MONITOR_OPTIONS
} from '../../server/reducers/settingsActions'
import { IFader } from '../../server/reducers/fadersReducer'
import { SET_FADER_THRESHOLD, SET_FADER_RATIO, SET_FADER_LOW, SET_FADER_MID, SET_FADER_HIGH } from '../../server/reducers/faderActions'
import { SET_AUX_LEVEL } from '../../server/reducers/channelActions';
import { SOCKET_SET_THRESHOLD, SOCKET_SET_RATIO, SOCKET_SET_LOW, SOCKET_SET_MID, SOCKET_SET_HIGH, SOCKET_SET_AUX_LEVEL } from '../../server/constants/SOCKET_IO_DISPATCHERS';

interface IChanStripInjectProps {
Expand Down Expand Up @@ -250,64 +248,66 @@ class ChanStrip extends React.PureComponent<IChanStripProps & IChanStripInjectPr
parameters() {
return (
<div className="parameters">
<div className="vertical">
{this.props.label || ("FADER " + (this.props.faderIndex + 1))}
{" COMPRESSOR"}
<div className="group-text">
{"COMPRESSOR"}
</div>
<div className="vertical-line"></div>
{this.threshold()}
{this.ratio()}
<div className="vertical-line"></div>
<div className="vertical">
{this.props.label || ("FADER " + (this.props.faderIndex + 1))}
{" EQUALIZER"}
<div className="parameter-group">
{this.threshold()}
{this.ratio()}
</div>
<div className="vertical-line"></div>
{this.low()}
{this.mid()}
{this.high()}
<div className="vertical-line"></div>
<div className="vertical">
{this.props.label || ("FADER " + (this.props.faderIndex + 1))}
{" MONITOR MIX MINUS"}
<hr/>
<div className="group-text">
{"EQUALIZER"}
</div>
<div className="parameter-group">
{this.low()}
{this.mid()}
{this.high()}
</div>
<hr/>
<div className="group-text">
{"MONITOR MIX MINUS"}
</div>
<div className="vertical-line"></div>
<ul className="monitor-sends">
{this.props.channel.map((ch: any, index: number) => {
if (ch.auxLevel[this.props.auxSendIndex] >= 0) {
return this.monitor(index)
}
})}
</ul>
<div className="vertical-line"></div>
<div className="vertical">
</div>
</div>
)
}

render() {
return (
<div className="chan-strip-body">
{this.props.offtubeMode ?
this.parameters()
: null
}
<div className="settings-buttons">
<div className="header">
{this.props.label || ("FADER " + (this.props.faderIndex + 1))}
<button
className="close"
onClick={() => this.handleClose()}
>X</button>
<div className="vertical-line"></div>
className="close"
onClick={() => this.handleClose()}
>X
</button>

</div>
<div className="header">
<button
className="button"
onClick={() => this.handleShowRoutingOptions()}
>CHANNEL ROUTING</button>
>CHANNEL ROUTING
</button>
<button
className="button"
onClick={() => this.handleShowMonitorOptions()}
>MONITOR ROUTING</button>
>MONITOR ROUTING
</button>
</div>
<hr/>
{this.props.offtubeMode ?
this.parameters()
: null
}
</div>
)
}
Expand Down

0 comments on commit 89756b9

Please sign in to comment.