fix: color of fader-handle dependent on pgm-vo-mute state

olzzon · Feb 14, 2020 · 5796eec · 5796eec
1 parent 1b46a47
commit 5796eec
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 113 deletions.
diff --git a/client/assets/css/Channel.css b/client/assets/css/Channel.css
@@ -139,18 +139,6 @@
     color: rgb(1, 12, 114);
 }
 
-.channel-body.with-snaps .channel-pgm-button, .channel-body.with-snaps .channel-pst-button, .channel-body.with-snaps .channel-pfl-button {
-    height: 40px;
-}
-
-.channel-body.with-snaps .channel-pgm-button {
-    margin-top: 187px;
-}
-
-.channel-body.with-snaps:not(.with-pfl) .channel-pst-button {
-    margin-bottom: 44px;
-}
-
 @keyframes pfl-active-flash {
     0% {
         box-shadow: 0 0 10px rgba(105, 140, 255, 1);
@@ -166,61 +154,6 @@
     }
 }
 
-.channel-snap-body {
-    margin-top: 10px;
-}
-
-.channel-snap-line {
-    margin-top: 4px;
-    background-color: #2b2b2b;
-}
-
-.channel-snap-button {
-    outline : none;
-    -moz-outline : none;
-    color: rgb(41, 41, 41);
-    margin-left: 20px;
-    margin-top: 4px;
-    margin-bottom: 4px;
-    height: 25px;
-    width: 60px;
-    border-radius: 7px;
-    border-color: rgb(68, 68, 68);
-    color: rgb(89, 83, 10);
-}
-
-.channel-snap-button.on {
-    color: rgb(183, 182, 20);
-}
-
-
-.channel-body.with-snaps {
-    width: 220px;
-    margin-top: 140px;
-    transform: translate(-40px, 0) rotate(270deg);
-}
-
-.channel-settings {
-    left: -3px;
-    background: none;
-    border: none;
-    outline: none;
-}
-
-.channel-settings:hover > svg {
-    fill: rgba(255, 255, 255, 0.5);
-}
-
-.channel-settings:active > svg {
-    fill: rgba(255, 255, 255, 1);
-}
-
-.channel-settings > svg {
-    width: 25px;
-    height: 25px;
-    fill: rgb(99, 99, 99);
-}
-
 .channel-strip-button {
     outline : none;
     -moz-outline : none;
@@ -236,10 +169,6 @@
     border-color: rgba(99, 99, 99, 0.301);
 }
 
-.channel-body.with-snaps .vumeter-body {
-    height: 230px;
-}
-
 .channel-volume-fader {
     width: 10px;
     height: 420px;
@@ -250,41 +179,6 @@
 
 }
 
-.channel-volume-thumb {
-    margin-left: -21px;
-    width: 49px;
-    height: 75px;
-    border: 1px solid #c5c2c2;
-    border-radius: 8px;
-    background: linear-gradient(to top, #3a3a3a 0%, #c2c2c2 20%, hsl(0, 0%, 57%) 50%, #00a 1px, #919191 52%, #c2c2c2 80%, #3a3a3a 100%);
-}
-
-.channel-volume-thumb-color-pgm {
-    margin-left: -21px;
-    width: 49px;
-    height: 75px;
-    border: 1px solid rgb(253, 60, 60);
-    border-radius: 8px;
-    background: linear-gradient(to top, #3a1d1d 0%, #c04d4d 20%, #811919 50%, #00a 1px, #8a2626 52%, #bd5151 80%, #411f1f 100%);
-}
-
-.channel-volume-thumb-color-vo {
-    margin-left: -21px;
-    width: 49px;
-    height: 75px;
-    border: 1px solid rgb(252, 255, 86);
-    border-radius: 8px;
-    background: linear-gradient(to top, #353006 0%, #c59327 20%, #856b14 50%, #00a 1px, #866724 52%, #cca22d 80%, #463b0a 100%);
-}
-
-.channel-volume-thumb-color-mute {
-    margin-left: -21px;
-    width: 49px;
-    height: 75px;
-    border: 1px solid rgb(58, 58, 58);
-    border-radius: 8px;
-    background: linear-gradient(to top, #111111 0%, #252525 20%, #2b2b2b 50%, rgb(56, 56, 56) 1px, #292929 52%, #222222 80%, #222222 100%);
-}
 
 :focus {
     outline: 0;

diff --git a/client/assets/css/NoUiSlider.css b/client/assets/css/NoUiSlider.css
@@ -133,25 +133,39 @@
   cursor: ns-resize;
 }
 .noUi-handle {
-  border: 1px solid rgb(121, 121, 121);
-  border-radius: 3px;
+  border: 1px solid #c5c2c2;
+  border-radius: 8px;
   background: linear-gradient(to top, #3a3a3a 0%, #c2c2c2 20%, hsl(0, 0%, 57%) 50%, #00a 1px, #919191 52%, #c2c2c2 80%, #3a3a3a 100%);
   cursor: default;
-  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
 }
+
+.pgm-on .noUi-handle {
+  border: 1px solid rgb(253, 60, 60);
+  background: linear-gradient(to top, #3a1d1d 0%, #c04d4d 20%, #811919 50%, #00a 1px, #8a2626 52%, #bd5151 80%, #411f1f 100%);
+}
+
+.vo-on .noUi-handle {
+  border: 1px solid rgb(252, 255, 86);
+  background: linear-gradient(to top, #353006 0%, #c59327 20%, #856b14 50%, #00a 1px, #866724 52%, #cca22d 80%, #463b0a 100%);
+}
+
+.mute-on .noUi-handle {
+  border: 1px solid rgb(58, 58, 58);
+  background: linear-gradient(to top, #111111 0%, #252525 20%, #2b2b2b 50%, rgb(56, 56, 56) 1px, #292929 52%, #222222 80%, #222222 100%);
+}
+
 .noUi-active {
   box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
 }
 /* Handle stripes;
  */
-.noUi-handle:before,
 .noUi-handle:after {
   content: "";
   display: block;
   position: absolute;
   height: 14px;
   width: 1px;
-  background: #E8E7E6;
+  background: rgba(0, 0, 0, 0);
   left: 14px;
   top: 6px;
 }

diff --git a/client/components/Channel.tsx b/client/components/Channel.tsx
@@ -104,8 +104,7 @@ class Channel extends React.Component<IChannelProps & IChannelInjectProps & Stor
                     ClassNames(
                         {
                             'channel-volume-fader': true,
-                        },
-                        {
+                            "noUi-vertical": true, 
                             "pgm-on": this.props.fader.pgmOn,
                             "vo-on": this.props.fader.voOn,
                             "mute-on": this.props.fader.muteOn,
@@ -115,12 +114,14 @@ class Channel extends React.Component<IChannelProps & IChannelInjectProps & Stor
                 }
                 orientation="vertical"
                 animate={false}
+
                 range={{ min: 0, max: 1 }} 
                 start={[this.props.fader.faderLevel]} 
                 connect
                 onSlide={(event: any) => {
                     this.handleLevel(event);
                 }}
+
             />
         )
     }