From c3855ddda757b89cb1f3ac461f4d4e1fbce44c87 Mon Sep 17 00:00:00 2001 From: ian ramzy Date: Fri, 27 Mar 2020 14:06:07 -0400 Subject: [PATCH] Neomorphic buttons --- public/chat.html | 37 +++++++++++++---- public/css/chat.css | 98 ++++++++++++++++++++++++++------------------- public/js/chat.js | 40 +++++++++++++----- 3 files changed, 118 insertions(+), 57 deletions(-) diff --git a/public/chat.html b/public/chat.html index 5983914..233ebaa 100644 --- a/public/chat.html +++ b/public/chat.html @@ -5,6 +5,7 @@ Neon Chat + @@ -14,7 +15,11 @@ @@ -28,12 +33,30 @@ -
-
- Back - Fullscreen - Mute - Pause +
+
+ +
Mute
+
+
+ +
Fullscreen
+
+
+ +
Pause Video
+
+
+ +
End Call
diff --git a/public/css/chat.css b/public/css/chat.css index 3ff3b7c..c0ccf50 100644 --- a/public/css/chat.css +++ b/public/css/chat.css @@ -7,32 +7,29 @@ margin: 0; padding: 0; align-items: center; - /*padding: 0 50px;*/ } body { background: #16171B; margin: 0; padding: 0; - /*background: #ececec;*/ } video { background: #292B32; - /*background: white;*/ margin: 0 5%; box-sizing: border-box; border-radius: 10px; padding: 0; - /*box-shadow: rgba(118, 143, 255, 0.4) 0px 16px 24px 0px;*/ - } + #local-video { width: 20%; height: auto; -webkit-transform: scaleX(-1); transform: scaleX(-1); + background: #16171a; } #remote-video { @@ -45,42 +42,8 @@ video { } -.buttons { - width: 700px; - margin-left: -350px; - bottom: 0px; - position: absolute; - left: 50%; -} - -.buttons a { - cursor: pointer; -} - - -.round-button { - display: block; - width: 100px; - height: 60px; - line-height: 60px; - border-radius: 4px; - background: #292B32; - text-align: center; - text-decoration: none; - color: white; - transition: 0.2s; - margin: 20px; - font-family: "Heebo", sans-serif; - font-weight: 400; - float: left; -} - -.round-button:hover { - background: #3d3f47; -} - - .snackbar-container { + box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328; transition: all .5s ease; transition-property: top, right, bottom, left, opacity; font-family: "Heebo", sans-serif; @@ -173,4 +136,57 @@ video { left: 0; transform: none } -} \ No newline at end of file +} + + +/*Neomorphic buttons*/ +button { + border: none; + font-size: 2rem; + transition: all .3s ease-in-out; + color: gray; + background: transparent; + cursor: pointer; + padding: 10px; +} + +button:hover { + color: white; + border-radius: 100px; + background: #16171a; + /*box-shadow: 9px 9px 16px #1e1f21, -9px -9px 16px #2f3035;*/ + +} + +.multi-button { + position: absolute; + right: 50px; + top: 50px; + z-index: 999; + /*border-radius: 50px;*/ + border-radius: 10px; + background: #16171a; + box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328; + padding: 15px; + display: grid; + grid-gap: 0.5rem; + width: 50px; + margin-left: 200px; +} + +.HoverState { + color: white; + font-family: "Heebo", sans-serif; + position: absolute; + right: 70px; + white-space: nowrap; + top: 25px; + font-weight: bold; +} + +.buttonContainer { + position: relative; + margin: 0 auto; +} + +/*Neomorphic buttons*/ \ No newline at end of file diff --git a/public/js/chat.js b/public/js/chat.js index e1a2258..c04cabc 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -282,39 +282,49 @@ function openFullscreen() { function muteMicrophone() { var muted = VideoChat.localStream.getAudioTracks()[0].enabled; VideoChat.localStream.getAudioTracks()[0].enabled = !muted; - const mutedButton = document.getElementById("muteButton"); + const micIcon = document.getElementById("mic-icon"); + const micText = document.getElementById("mic-text"); if (muted) { - mutedButton.innerText = "Unmute" + micIcon.classList.remove("fa-microphone"); + micIcon.classList.add("fa-microphone-slash"); + micText.innerText = "Unmute" } else { - mutedButton.innerText = "Mute" + micIcon.classList.add("fa-microphone"); + micIcon.classList.remove("fa-microphone-slash"); + micText.innerText = "Mute" } } function pauseVideo() { var paused = VideoChat.localStream.getVideoTracks()[0].enabled; VideoChat.localStream.getVideoTracks()[0].enabled = !paused; - const pausedButton = document.getElementById("videoPauseButton"); + const micIcon = document.getElementById("video-icon"); + const micText = document.getElementById("video-text"); if (paused) { - pausedButton.innerText = "Unpause" + micIcon.classList.remove("fa-video"); + micIcon.classList.add("fa-video-slash"); + micText.innerText = "Unpause Video" } else { - pausedButton.innerText = "Pause" + micIcon.classList.add("fa-video"); + micIcon.classList.remove("fa-video-slash"); + micText.innerText = "Pause Video" } - } + //Show and hide buttons automatically var timedelay = 1; function delayCheck() { if (timedelay === 5) { - $('#buttons').fadeOut(); + $('.multi-button').fadeOut(); timedelay = 1; } timedelay = timedelay + 1; } $(document).mousemove(function () { - $('#buttons').fadeIn(); + $('.multi-button').fadeIn(); timedelay = 1; clearInterval(_delay); _delay = setInterval(delayCheck, 500); @@ -342,3 +352,15 @@ Snackbar.show({ VideoChat.requestMediaStream(); +//Neomorphic buttons +$(".HoverState").hide(); +$(document).ready(function () { + $(".hoverButton").mouseover(function () { + $(".HoverState").hide(); + $(this).next().show(); + }); + $(".hoverButton").mouseout(function () { + $(".HoverState").hide(); + }); +}); +//Neomorphic buttons \ No newline at end of file