From fd8b82cf9fca2bae8be1004913967a2e6daabcb7 Mon Sep 17 00:00:00 2001 From: spencerpincott Date: Sun, 9 Feb 2020 00:42:25 -0500 Subject: [PATCH] Add button styling --- .vscode/settings.json | 10 ++++ public/phone-solid.svg | 1 + public/play-solid.svg | 1 + src/Components/Phone/Button/button.module.css | 50 +++++++++++++++++++ src/Components/Phone/{ => Button}/button.tsx | 4 +- src/Components/Phone/phone.tsx | 10 ++-- src/Mocks/mock-connection.ts | 17 ++++--- src/Mocks/mock-device.ts | 6 ++- 8 files changed, 84 insertions(+), 15 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 public/phone-solid.svg create mode 100644 public/play-solid.svg create mode 100644 src/Components/Phone/Button/button.module.css rename src/Components/Phone/{ => Button}/button.tsx (64%) diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..a7cc93b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,10 @@ +{ + "css.lint.validProperties": [ + "composes" + ], + "css.lint.unknownAtRules": "ignore", + "scss.lint.validProperties": [ + "composes" + ], + "scss.lint.unknownAtRules": "ignore" +} \ No newline at end of file diff --git a/public/phone-solid.svg b/public/phone-solid.svg new file mode 100644 index 0000000..d3f3a90 --- /dev/null +++ b/public/phone-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/play-solid.svg b/public/play-solid.svg new file mode 100644 index 0000000..942492c --- /dev/null +++ b/public/play-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/Components/Phone/Button/button.module.css b/src/Components/Phone/Button/button.module.css new file mode 100644 index 0000000..482aed7 --- /dev/null +++ b/src/Components/Phone/Button/button.module.css @@ -0,0 +1,50 @@ +.button { + border-radius: 50%; + border: none; + width: 70px; + height: 70px; + + margin: 15px; +} +.button:after { + display: block; + +} + +.connect { + composes: button; + background-color: #45bd57; +} +.connect:hover { + background-image: linear-gradient(#76b880, #5fb86c); +} +.connect:after { + content: url(/play-solid.svg); + transform: scale(0.4); + position: relative; + left: 2px; +} + +.answer { + composes: button; + background-color: #45bd57; +} +.answer:hover { + background-image: linear-gradient(#84b68c, #5fb86c); +} +.answer:after { + content: url(/phone-solid.svg); + transform: scale(0.65); +} + +.hangup, .reject { + composes: button; + background-color: #ff3b2f; +} +.hangup:hover, .reject:hover { + background-image: linear-gradient(#fd7f79, #fc564e); +} +.hangup:after, .reject:after { + content: url(/phone-solid.svg); + transform: rotate(224deg) scale(0.65); +} diff --git a/src/Components/Phone/button.tsx b/src/Components/Phone/Button/button.tsx similarity index 64% rename from src/Components/Phone/button.tsx rename to src/Components/Phone/Button/button.tsx index 2ffb285..3e06c19 100644 --- a/src/Components/Phone/button.tsx +++ b/src/Components/Phone/Button/button.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import styles from './button.module.css'; interface ButtonSettings { @@ -8,8 +9,7 @@ interface ButtonSettings export default function Button({title, onClick} : ButtonSettings) { return ( - ); } \ No newline at end of file diff --git a/src/Components/Phone/phone.tsx b/src/Components/Phone/phone.tsx index 2569901..5494d9d 100644 --- a/src/Components/Phone/phone.tsx +++ b/src/Components/Phone/phone.tsx @@ -1,7 +1,7 @@ import React from 'react'; import useVoice, { Voice } from '../../Wrappers/voice'; import { voiceToken } from '../../Wrappers/default-config'; -import Button from './button'; +import Button from './Button/button'; import DeviceState from './display-device-state'; export default function Phone({voice:{ startDevice, answer, reject, hangup, dial, voiceState} }: {voice: Voice}) @@ -11,7 +11,7 @@ export default function Phone({voice:{ startDevice, answer, reject, hangup, dial return (
-
); } @@ -20,8 +20,8 @@ export default function Phone({voice:{ startDevice, answer, reject, hangup, dial return (
-
); } @@ -30,7 +30,7 @@ export default function Phone({voice:{ startDevice, answer, reject, hangup, dial return (
-
); } diff --git a/src/Mocks/mock-connection.ts b/src/Mocks/mock-connection.ts index 267785f..9b475ce 100644 --- a/src/Mocks/mock-connection.ts +++ b/src/Mocks/mock-connection.ts @@ -1,4 +1,5 @@ import { Connection, ConnectionParameters, ConnectionStatus, ConnectionEvent } from "twilio-client"; +import { defaultDelay } from "./mock-device"; export class MockConnection implements Connection { @@ -13,31 +14,35 @@ export class MockConnection implements Connection private readonly handlers = <{[key in ConnectionEvent]: ((mute?: boolean) => void)[]}>{}; private muted: boolean = false; + private executeHandler(handlerName: ConnectionEvent) + { + setTimeout(() => this.handlers[handlerName]?.forEach(handler => handler()), defaultDelay); + } public accept(audioConstraints?: any) { - setTimeout(() => this.handlers["accept"].forEach(handler => handler()), 500) + this.executeHandler("accept"); } public reject() { - setTimeout(() => this.handlers["disconnect"].forEach(handler => handler()), 500) + this.executeHandler("disconnect"); } public ignore() { - setTimeout(() => this.handlers["disconnect"].forEach(handler => handler()), 500) + this.executeHandler("disconnect"); } public disconnect() { - setTimeout(() => this.handlers["disconnect"].forEach(handler => handler()), 500) + this.executeHandler("disconnect"); } public mute(mute: boolean) { - this.muted = mute - setTimeout(() => this.handlers["mute"].forEach(handler => handler(this.muted)), 500) + this.muted = mute; + this.executeHandler("mute"); } public isMuted() diff --git a/src/Mocks/mock-device.ts b/src/Mocks/mock-device.ts index 0ce766f..1826ea6 100644 --- a/src/Mocks/mock-device.ts +++ b/src/Mocks/mock-device.ts @@ -1,6 +1,8 @@ import { Device, DeviceAudio, SetupParams, Connection, DeviceStatus, DeviceEvent } from "twilio-client"; import { MockConnection } from "./mock-connection"; +export const defaultDelay = 500; + export class MockDevice implements Device { public audio: DeviceAudio = {}; @@ -27,12 +29,12 @@ export class MockDevice implements Device public destroy(): void { - this.handlers["offline"].forEach(handler => handler()); + setTimeout(() => this.handlers["offline"]?.forEach(handler => handler()), 500); } public disconnectAll(): void { - this.handlers["disconnect"].forEach(handler => handler()); + setTimeout(() => this.handlers["disconnect"]?.forEach(handler => handler()), 500); } public status()