Add UI for audio/video calls

11 files changed, 215 insertions, 2 deletions

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 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+    <template class="DinoUiCallWidget">
+        <property name="halign">start</property>
+        <style>
+            <class name="call-box-outer"/>
+        </style>
+        <child>
+            <object class="DinoUiSizingBin">
+                <property name="target-width">350</property>
+                <property name="max-width">350</property>
+                <property name="hexpand">True</property>
+                <property name="visible">True</property>
+                <child>
+                    <object class="GtkBox">
+                        <property name="orientation">vertical</property>
+                        <property name="halign">fill</property>
+                        <property name="hexpand">true</property>
+                        <property name="visible">True</property>
+                        <child>
+                            <object class="GtkBox">
+                                <property name="orientation">horizontal</property>
+                                <property name="spacing">10</property>
+                                <property name="visible">True</property>
+                                <style>
+                                    <class name="call-box"/>
+                                </style>
+                                <child>
+                                    <object class="GtkImage" id="image">
+                                        <property name="icon-size">5</property>
+                                        <property name="opacity">0.7</property>
+                                        <property name="visible">True</property>
+                                    </object>
+                                </child>
+                                <child>
+                                    <object class="GtkBox">
+                                        <property name="orientation">vertical</property>
+                                        <property name="hexpand">True</property>
+                                        <property name="visible">True</property>
+                                        <child>
+                                            <object class="GtkLabel" id="title_label">
+                                                <property name="ellipsize">middle</property>
+                                                <property name="xalign">0</property>
+                                                <property name="yalign">0</property>
+                                                <property name="visible">True</property>
+                                            </object>
+                                        </child>
+                                        <child>
+                                            <object class="GtkLabel" id="subtitle_label">
+                                                <property name="xalign">0</property>
+                                                <property name="yalign">1</property>
+                                                <property name="visible">True</property>
+                                                <attributes>
+                                                    <attribute name="scale" value="0.8"/>
+                                                </attributes>
+                                            </object>
+                                        </child>
+                                    </object>
+                                </child>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkRevealer" id="incoming_call_revealer">
+                                <property name="transition-type">slide-down</property>
+                                <property name="transition-duration">200</property>
+                                <property name="reveal-child">True</property>
+                                <property name="visible">True</property>
+                                <child>
+                                    <object class="GtkBox">
+                                        <property name="visible">True</property>
+                                        <style>
+                                            <class name="incoming-call-box"/>
+                                        </style>
+                                        <child>
+                                            <object class="GtkBox">
+                                                <property name="halign">end</property>
+                                                <property name="orientation">horizontal</property>
+                                                <property name="spacing">5</property>
+                                                <property name="margin">10</property>
+                                                <property name="hexpand">True</property>
+                                                <property name="visible">True</property>
+                                                <child>
+                                                    <object class="GtkButton" id="reject_call_button">
+                                                        <property name="label" translatable="yes">Reject</property>
+                                                        <property name="visible">True</property>
+                                                        <style>
+                                                            <class name="destructive-action"/>
+                                                        </style>
+                                                    </object>
+                                                </child>
+                                                <child>
+                                                    <object class="GtkButton" id="accept_call_button">
+                                                        <property name="label" translatable="yes">Accept</property>
+                                                        <property name="visible">True</property>
+                                                        <style>
+                                                            <class name="suggested-action"/>
+                                                        </style>
+                                                    </object>
+                                                </child>
+                                            </object>
+                                        </child>
+                                    </object>
+                                </child>
+                            </object>
+                        </child>
+                    </object>
+                </child>
+            </object>
+        </child>
+    </template>
+</interface>
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 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19,11C19,12.19 18.66,13.3 18.1,14.28L16.87,13.05C17.14,12.43 17.3,11.74 17.3,11H19M15,11.16L9,5.18V5A3,3 0 0,1 12,2A3,3 0 0,1 15,5V11L15,11.16M4.27,3L21,19.73L19.73,21L15.54,16.81C14.77,17.27 13.91,17.58 13,17.72V21H11V17.72C7.72,17.23 5,14.41 5,11H6.7C6.7,14 9.24,16.1 12,16.1C12.81,16.1 13.6,15.91 14.31,15.58L12.65,13.92L12,14A3,3 0 0,1 9,11V10.28L3,4.27L4.27,3Z" /></svg>
\ 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 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" /></svg>
\ 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 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,9C10.4,9 8.85,9.25 7.4,9.72V12.82C7.4,13.22 7.17,13.56 6.84,13.72C5.86,14.21 4.97,14.84 4.17,15.57C4,15.75 3.75,15.86 3.5,15.86C3.2,15.86 2.95,15.74 2.77,15.56L0.29,13.08C0.11,12.9 0,12.65 0,12.38C0,12.1 0.11,11.85 0.29,11.67C3.34,8.77 7.46,7 12,7C16.54,7 20.66,8.77 23.71,11.67C23.89,11.85 24,12.1 24,12.38C24,12.65 23.89,12.9 23.71,13.08L21.23,15.56C21.05,15.74 20.8,15.86 20.5,15.86C20.25,15.86 20,15.75 19.82,15.57C19.03,14.84 18.14,14.21 17.16,13.72C16.83,13.56 16.6,13.22 16.6,12.82V9.72C15.15,9.25 13.6,9 12,9Z" /></svg>
\ 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 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M15,12H17A5,5 0 0,0 12,7V9A3,3 0 0,1 15,12M19,12H21C21,7 16.97,3 12,3V5C15.86,5 19,8.13 19,12M20,15.5C18.75,15.5 17.55,15.3 16.43,14.93C16.08,14.82 15.69,14.9 15.41,15.18L13.21,17.38C10.38,15.94 8.06,13.62 6.62,10.79L8.82,8.59C9.1,8.31 9.18,7.92 9.07,7.57C8.7,6.45 8.5,5.25 8.5,4A1,1 0 0,0 7.5,3H4A1,1 0 0,0 3,4A17,17 0 0,0 20,21A1,1 0 0,0 21,20V16.5A1,1 0 0,0 20,15.5Z" /></svg>
\ 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 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M23.71,16.67C20.66,13.77 16.54,12 12,12C7.46,12 3.34,13.77 0.29,16.67C0.11,16.85 0,17.1 0,17.38C0,17.65 0.11,17.9 0.29,18.08L2.77,20.56C2.95,20.74 3.2,20.86 3.5,20.86C3.75,20.86 4,20.75 4.18,20.57C4.97,19.83 5.86,19.21 6.84,18.72C7.17,18.56 7.4,18.22 7.4,17.82V14.72C8.85,14.25 10.39,14 12,14C13.6,14 15.15,14.25 16.6,14.72V17.82C16.6,18.22 16.83,18.56 17.16,18.72C18.14,19.21 19.03,19.83 19.82,20.57C20,20.75 20.25,20.86 20.5,20.86C20.8,20.86 21.05,20.74 21.23,20.56L23.71,18.08C23.89,17.9 24,17.65 24,17.38C24,17.1 23.89,16.85 23.71,16.67M6.5,5.5L12,11L19,4L18,3L12,9L7.5,4.5H11V3H5V9H6.5V5.5Z" /></svg>
\ 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 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M23.71 16.67C20.66 13.78 16.54 12 12 12S3.34 13.78.29 16.67c-.18.18-.29.43-.29.71 0 .28.11.53.29.71l2.48 2.48c.18.18.43.29.71.29.27 0 .52-.11.7-.28.79-.74 1.69-1.36 2.66-1.85.33-.16.56-.5.56-.9v-3.1c1.45-.48 3-.73 4.6-.73s3.15.25 4.6.72v3.1c0 .39.23.74.56.9.98.49 1.87 1.12 2.66 1.85.18.18.43.28.7.28.28 0 .53-.11.71-.29l2.48-2.48c.18-.18.29-.43.29-.71a.99.99 0 0 0-.29-.7zM21.16 6.26l-1.41-1.41-3.56 3.55 1.41 1.41s3.45-3.52 3.56-3.55zM13 2h-2v5h2V2zM6.4 9.81L7.81 8.4 4.26 4.84 2.84 6.26c.11.03 3.56 3.55 3.56 3.55z" /></svg>
\ 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 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z" /></svg>
\ 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 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M3.27,2L2,3.27L4.73,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16C16.2,18 16.39,17.92 16.54,17.82L19.73,21L21,19.73M21,6.5L17,10.5V7A1,1 0 0,0 16,6H9.82L21,17.18V6.5Z" /></svg>
\ 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 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z" /></svg>
\ 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