MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2024-11-14 22:29:20 +08:00
Code Issues Releases Wiki Activity

better snackbars

Browse Source
This commit is contained in:
Ian Ramzy 2020-04-04 00:21:03 -04:00
parent 2025b42d28
commit 251989498d
4 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/css/chat.css
View File

@ -164,7 +164,7 @@ a {
} }
/*Neomorphic buttons*/ /*Neomorphic buttons*/
button { .multi-button button {
border: none; border: none;
font-size: 1.5rem; font-size: 1.5rem;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
@ -172,6 +172,7 @@ button {
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
padding: 7px; padding: 7px;
border-radius: 5px;
} }
button:focus { button:focus {
@ -180,8 +181,8 @@ button:focus {
button:hover { button:hover {
color: white; color: white;
border-radius: 100px; /*border-radius: 100px;*/
background: #16171a; /*background: #16171a;*/
} }
.multi-button { .multi-button {
@ -307,8 +308,11 @@ button:hover {
padding-left: 40px; padding-left: 40px;
} }
/*Your messages*/ /*recieved messages*/
#chat-zone .message-item.moderator .message-bloc { #chat-zone .message-item.moderator .message-bloc {
/*background-color: #376df9;*/
/*background: linear-gradient(100deg, #376df9 0, #ff5fa0 75%, #ffc55a 100%);*/
background-color: rgb(29, 30, 33); background-color: rgb(29, 30, 33);
color: #fff; color: #fff;
position: relative; position: relative;
@ -321,7 +325,7 @@ button:hover {
box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a; box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a;
} }
/*Recieved messages*/ /*sent messages*/
#chat-zone .message-item.customer .message-bloc { #chat-zone .message-item.customer .message-bloc {
background-color: rgb(47, 48, 52); background-color: rgb(47, 48, 52);
color: #fff; color: #fff;

11
public/css/snackbar.css
View File

@ -16,17 +16,22 @@
top: -100px; top: -100px;
opacity: 0; opacity: 0;
z-index: 9999; z-index: 9999;
background-color: #376df9;
background: linear-gradient(100deg, #376df9 0, #ff5fa0 75%, #ffc55a 100%);
} }
.snackbar-container .action { .snackbar-container .action {
background: inherit; background: white;
padding: 7px;
border-radius: 3px;
display: inline-block; display: inline-block;
border: none; border: none;
font-size: inherit; font-size: inherit;
text-transform: uppercase; text-transform: uppercase;
color: #4caf50; color: #000000;
margin: 0 0 0 24px; margin: 0 0 0 24px;
padding: 0; /*padding: 0;*/
min-width: min-content; min-width: min-content;
cursor: pointer; cursor: pointer;
} }

20
public/js/chat.js
View File

@ -63,11 +63,11 @@ var VideoChat = {
VideoChat.localStream = stream; VideoChat.localStream = stream;
// Add the stream as video's srcObject. // Add the stream as video's srcObject.
Snackbar.show({ Snackbar.show({
text: "Share this URL with a friend to get started", text: "Share this URL with a friend to get started!",
actionText: "Copy Link", actionText: "Copy Link",
width: "355px", width: "400px",
pos: "top-center", pos: "top-center",
actionTextColor: "#8688ff", actionTextColor: "#616161",
duration: 500000, duration: 500000,
backgroundColor: "#16171a", backgroundColor: "#16171a",
onActionClick: function (element) { onActionClick: function (element) {
@ -501,11 +501,11 @@ function swap() {
text: text:
"Please allow screen share. Click the middle of the picture above and then press share.", "Please allow screen share. Click the middle of the picture above and then press share.",
// actionText: "Show Me How", // actionText: "Show Me How",
width: "455px", width: "400px",
pos: "bottom-center", pos: "bottom-center",
actionTextColor: "#8688ff", actionTextColor: "#616161",
duration: 50000, duration: 50000,
backgroundColor: "#292B32",
// onActionClick: function (element) { // onActionClick: function (element) {
// window.open( // window.open(
// "https://getacclaim.zendesk.com/hc/en-us/articles/360001547832-Setting-the-default-camera-on-your-browser", // "https://getacclaim.zendesk.com/hc/en-us/articles/360001547832-Setting-the-default-camera-on-your-browser",
@ -529,6 +529,11 @@ function swap() {
pauseVideo(); pauseVideo();
} }
switchStreamHelper(stream); switchStreamHelper(stream);
})
.catch(function (err) {
logIt(err);
logIt("Error sharing screen");
Snackbar.close();
}); });
} else { } else {
VideoChat.localVideo.srcObject.getTracks().forEach((track) => track.stop()); VideoChat.localVideo.srcObject.getTracks().forEach((track) => track.stop());
@ -869,9 +874,8 @@ function startUp() {
actionText: "Show Me How", actionText: "Show Me How",
width: "455px", width: "455px",
pos: "top-right", pos: "top-right",
actionTextColor: "#8688ff", actionTextColor: "#616161",
duration: 50000, duration: 50000,
backgroundColor: "#292B32",
onActionClick: function (element) { onActionClick: function (element) {
window.open( window.open(
"https://getacclaim.zendesk.com/hc/en-us/articles/360001547832-Setting-the-default-camera-on-your-browser", "https://getacclaim.zendesk.com/hc/en-us/articles/360001547832-Setting-the-default-camera-on-your-browser",

4
public/js/snackbar.js
View File

@ -36,7 +36,7 @@
secondButtonText: "", secondButtonText: "",
secondButtonAria: "Description for Screen Readers", secondButtonAria: "Description for Screen Readers",
secondButtonTextColor: "#4CAF50", secondButtonTextColor: "#4CAF50",
backgroundColor: "#323232", // backgroundColor: "#323232",
pos: "bottom-left", pos: "bottom-left",
duration: 5000, duration: 5000,
customClass: "", customClass: "",
@ -75,7 +75,7 @@
$p.style.lineHeight = "1em"; $p.style.lineHeight = "1em";
$p.innerHTML = options.text; $p.innerHTML = options.text;
Snackbar.snackbar.appendChild($p); Snackbar.snackbar.appendChild($p);
Snackbar.snackbar.style.background = options.backgroundColor; // Snackbar.snackbar.style.background = options.backgroundColor;
if (options.showSecondButton) { if (options.showSecondButton) {
var secondButton = document.createElement("button"); var secondButton = document.createElement("button");