Add Toolbar tooltips

src/client/components/Toolbar.tsx

@@ -91,16 +91,19 @@ extends React.PureComponent<ToolbarProps, ToolbarState> {
           className={classnames('button chat', {
             on: this.props.chatVisible,
           })}
+          href='#'
           data-blink={!this.props.chatVisible &&
             messagesCount > this.state.readMessages}
           title="Chat"
         >
           <span className="icon icon-question_answer" />
+          <span className="tooltip">Toggle Chat</span>
         </a>
         <a
           className="button send-file"
           onClick={this.handleSendFile}
           title="Send file"
+          href='#'
         >
           <input
             style={hidden}
@@ -110,6 +113,7 @@ extends React.PureComponent<ToolbarProps, ToolbarState> {
             onChange={this.handleSelectFiles}
           />
           <span className="icon icon-file-text2" />
+          <span className="tooltip">Send File</span>
         </a>
 
         {stream && (
@@ -119,24 +123,30 @@ extends React.PureComponent<ToolbarProps, ToolbarState> {
               className={classnames('button mute-audio', {
                 on: this.state.micMuted,
               })}
+              href='#'
               title="Mute audio"
             >
               <span className="on icon icon-mic_off" />
               <span className="off icon icon-mic" />
+              <span className="tooltip">Toggle Microphone</span>
             </a>
             <a onClick={this.handleCamClick}
               className={classnames('button mute-video', {
                 on: this.state.camDisabled,
               })}
+              href='#'
               title="Mute video"
             >
               <span className="on icon icon-videocam_off" />
               <span className="off icon icon-videocam" />
+              <span className="tooltip">Toggle Camera</span>
             </a>
           </React.Fragment>
         )}
 
-        <a onClick={this.handleFullscreenClick}
+        <a
+          onClick={this.handleFullscreenClick}
+          href='#'
           className={classnames('button fullscreen', {
             on: this.state.fullScreenEnabled,
           })}
@@ -144,13 +154,17 @@ extends React.PureComponent<ToolbarProps, ToolbarState> {
         >
           <span className="on icon icon-fullscreen_exit" />
           <span className="off icon icon-fullscreen" />
+          <span className="tooltip">Fullscreen</span>
         </a>
 
-        <a onClick={this.handleHangoutClick}
+        <a
+          onClick={this.handleHangoutClick}
           className="button hangup"
-          title="Hangup"
+          href='#'
+          title="Hang Up"
         >
           <span className="icon icon-call_end" />
+          <span className="tooltip">Hang Up</span>
         </a>
       </div>
     )

src/scss/_media.scss

@@ -1,10 +1,22 @@
 .media-container form.media {
   margin: 1rem auto 0;
-  max-width: 440px;
+  max-width: 450px;
   text-align: center;
 
   & > * {
-    margin: 0.25rem;
+    & + * {
+      margin-top: 1rem;
+    }
+    @media(max-width: 650px) {
+      display: block;
+      width: 100%;
+    }
+    @media(min-width: 651px) {
+      & + * {
+        margin-left: 1rem;
+      }
+    }
+
   }
 
   select {

src/scss/_toolbar.scss

@@ -3,43 +3,71 @@
   /* on icons are hidden by default */
 
   .icon {
-    &.on {
+    position: relative;
-      display: none;
-    }
-    &.off {
-      display: block;
-    }
     font-size: 24px;
     color: #fff;
-    position: absolute;
-    top: 12px;
-    left: 12px;
-  }
-
-  /* off icons are displayed by default */
-
-  /* on icons are displayed when parent svg has class 'on' */
-
-  .button {
-    &.on .icon {
-      &.on {
-        display: block;
-      }
-      &.off {
-        display: none;
-      }
-    }
     width: 48px;
     height: 48px;
     border-radius: 48px;
     box-shadow: 2px 2px 24px #444;
-    display: block;
-    transform: translateX(calc(-6vw - 96px));
     transition: all .1s;
     transition-timing-function: ease-in-out;
+
+    &::before {
+      position: absolute;
+      left: 1px;
+      right: 0;
+      text-align: center;
+      top: 12px;
+    }
+
+    &.on {
+      display: none;
+    }
+
+  }
+
+  .tooltip {
+    margin-left: 0.5rem;
+    opacity: 0;
+    visibility: hidden;
+    color: white;
+    text-shadow: 0 0 5px black;
+    transition: opacity 200ms ease-in 25ms, transform 100ms ease-in;
+    transform: translateX(-100%);
+    z-index: 0;
+  }
+
+  .button {
+    text-decoration: none;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+
     &:hover {
-      box-shadow: 4px 4px 48px #666;
+      .icon {
-      cursor: pointer;
+        box-shadow: 4px 4px 48px #666;
+        cursor: pointer;
+        background-color: #407cf7;
+      }
+      .icon.icon-call_end {
+        background-color: #dd2c00;
+      }
+      .tooltip {
+        opacity: 1;
+        visibility: visible;
+        transform: translateX(0);
+      }
+    }
+    &.on .icon {
+      background: lighten(#407cf7, 10%);
+      &.on {
+        display: inherit;
+      }
+      &.off {
+        display: none;
+      }
     }
   }
 
@@ -47,52 +75,14 @@
     margin-top: 1rem;
   }
 
-  /* off icons are hidden when parent svg has class 'on' */
-
-  &.active .button {
-    transform: translateX(0);
-  }
-
   .chat {
-    &[data-blink="true"] {
+    &[data-blink="true"] .icon {
       -webkit-animation: bg-blink 1s infinite;
       -moz-animation: bg-blink 1s infinite;
       animation: bg-blink 1s infinite;
     }
-    &:hover, &.on {
-      background: #407cf7;
-    }
   }
 
-  .mute-audio {
-    &:hover, &.on {
-      background: #407cf7;
-    }
-  }
-
-  .send-file {
-    &:hover {
-      background: #407cf7;
-    }
-  }
-
-  .mute-video {
-    &:hover, &.on {
-      background: #407cf7;
-    }
-  }
-
-  .fullscreen {
-    &:hover, &.on {
-      background: #407cf7;
-    }
-  }
-
-  .hangup {
-    &:hover {
-      background: #dd2c00;
-    }
-  }
 }
 
 @-webkit-keyframes bg_blink {