From 0f46facecd558786631c2ad4cf66d27331f16a86 Mon Sep 17 00:00:00 2001 From: fiaxh Date: Fri, 19 Mar 2021 23:09:56 +0100 Subject: Add UI for audio/video calls --- main/data/call_widget.ui | 111 +++++++++++++++++++++++ main/data/icons/dino-microphone-off-symbolic.svg | 1 + main/data/icons/dino-microphone-symbolic.svg | 1 + main/data/icons/dino-phone-hangup-symbolic.svg | 1 + main/data/icons/dino-phone-in-talk-symbolic.svg | 1 + main/data/icons/dino-phone-missed-symbolic.svg | 1 + main/data/icons/dino-phone-ring-symbolic.svg | 1 + main/data/icons/dino-phone-symbolic.svg | 1 + main/data/icons/dino-video-off-symbolic.svg | 1 + main/data/icons/dino-video-symbolic.svg | 1 + main/data/theme.css | 97 +++++++++++++++++++- 11 files changed, 215 insertions(+), 2 deletions(-) create mode 100644 main/data/call_widget.ui create mode 100644 main/data/icons/dino-microphone-off-symbolic.svg create mode 100644 main/data/icons/dino-microphone-symbolic.svg create mode 100644 main/data/icons/dino-phone-hangup-symbolic.svg create mode 100644 main/data/icons/dino-phone-in-talk-symbolic.svg create mode 100644 main/data/icons/dino-phone-missed-symbolic.svg create mode 100644 main/data/icons/dino-phone-ring-symbolic.svg create mode 100644 main/data/icons/dino-phone-symbolic.svg create mode 100644 main/data/icons/dino-video-off-symbolic.svg create mode 100644 main/data/icons/dino-video-symbolic.svg (limited to 'main/data') diff --git a/main/data/call_widget.ui b/main/data/call_widget.ui new file mode 100644 index 00000000..47fb0046 --- /dev/null +++ b/main/data/call_widget.ui @@ -0,0 +1,111 @@ + + + + diff --git a/main/data/icons/dino-microphone-off-symbolic.svg b/main/data/icons/dino-microphone-off-symbolic.svg new file mode 100644 index 00000000..7e5b853d --- /dev/null +++ b/main/data/icons/dino-microphone-off-symbolic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/main/data/icons/dino-microphone-symbolic.svg b/main/data/icons/dino-microphone-symbolic.svg new file mode 100644 index 00000000..fbf0784a --- /dev/null +++ b/main/data/icons/dino-microphone-symbolic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/main/data/icons/dino-phone-hangup-symbolic.svg b/main/data/icons/dino-phone-hangup-symbolic.svg new file mode 100644 index 00000000..ecd230ac --- /dev/null +++ b/main/data/icons/dino-phone-hangup-symbolic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/main/data/icons/dino-phone-in-talk-symbolic.svg b/main/data/icons/dino-phone-in-talk-symbolic.svg new file mode 100644 index 00000000..351035da --- /dev/null +++ b/main/data/icons/dino-phone-in-talk-symbolic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/main/data/icons/dino-phone-missed-symbolic.svg b/main/data/icons/dino-phone-missed-symbolic.svg new file mode 100644 index 00000000..228f073e --- /dev/null +++ b/main/data/icons/dino-phone-missed-symbolic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/main/data/icons/dino-phone-ring-symbolic.svg b/main/data/icons/dino-phone-ring-symbolic.svg new file mode 100644 index 00000000..06b8dcbf --- /dev/null +++ b/main/data/icons/dino-phone-ring-symbolic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/main/data/icons/dino-phone-symbolic.svg b/main/data/icons/dino-phone-symbolic.svg new file mode 100644 index 00000000..0020dddc --- /dev/null +++ b/main/data/icons/dino-phone-symbolic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/main/data/icons/dino-video-off-symbolic.svg b/main/data/icons/dino-video-off-symbolic.svg new file mode 100644 index 00000000..d438e065 --- /dev/null +++ b/main/data/icons/dino-video-off-symbolic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/main/data/icons/dino-video-symbolic.svg b/main/data/icons/dino-video-symbolic.svg new file mode 100644 index 00000000..60a1c742 --- /dev/null +++ b/main/data/icons/dino-video-symbolic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/main/data/theme.css b/main/data/theme.css index 6bacee30..423cbf68 100644 --- a/main/data/theme.css +++ b/main/data/theme.css @@ -86,16 +86,26 @@ window.dino-main .dino-conversation .message-box.edit-mode:hover { background: alpha(@theme_selected_bg_color, 0.12); } -window.dino-main .file-box-outer { +window.dino-main .file-box-outer, +window.dino-main .call-box-outer { background: @theme_base_color; border-radius: 3px; border: 1px solid alpha(@theme_fg_color, 0.1); } -window.dino-main .file-box { +window.dino-main .file-box, +window.dino-main .call-box { margin: 12px 16px 12px 12px; } +window.dino-main .call-box-outer.incoming { + border-color: alpha(@theme_selected_bg_color, 0.3); +} + +window.dino-main .incoming-call-box { + background: alpha(@theme_selected_bg_color, 0.1); +} + window.dino-main .dino-sidebar > frame.collapsed { border-bottom: 1px solid @borders; } @@ -204,3 +214,86 @@ box.dino-input-error label.input-status-highlight-once { animation-iteration-count: 1; animation-name: input-error-highlight; } + +/* Call window */ + +.dino-call-window .titlebar { + min-height: 0; +} + +.dino-call-window headerbar, .call-button { + box-shadow: none; +} + +.dino-call-window .titlebutton.close:hover { + background: rgba(255,255,255,0.15); + border-color: rgba(255,255,255,0); + box-shadow: none; +} + +.dino-call-window button.call-button { + outline: 0; + border-radius: 1000px; +} +.dino-call-window button.white-button { + color: #1d1c1d; + background: rgba(255,255,255,0.9); + border: lightgrey; +} + +.dino-call-window button.transparent-white-button { + color: white; + background: rgba(255,255,255,0.15); + border: none; +} + +.dino-call-window button.call-mediadevice-settings-button { + border-radius: 1000px; + min-height: 0; + min-width: 0; + padding: 3px; + margin: 2px; + transition-duration: 0; +} + +.dino-call-window button.call-mediadevice-settings-button:hover, +.dino-call-window button.call-mediadevice-settings-button:checked { /* Effect that makes the button slightly larger on hover :) */ + border-radius: 1000px; + min-height: 0; + min-width: 0; + padding: 5px; + margin: 0; +} + +.dino-call-window .unencrypted-box { + color: @error_color; + padding: 10px; + border-radius: 5px; + background: rgba(0,0,0,0.5); +} + +.dino-call-window .call-header-bar { + background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0)); + border: 0; + border-radius: 0; +} + +.dino-call-window .call-header-bar, +.dino-call-window .call-header-bar image { + color: #ededec; +} + +.dino-call-window .call-bottom-bar { + background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3)); + border: 0; +} + +.dino-call-window .video-placeholder-box { + background-color: #212121; +} + +.dino-call-window .text-no-controls { + background: white; + border-radius: 5px; + padding: 5px 10px; +} \ No newline at end of file -- cgit v1.2.3-70-g09d2