callview: redesign
Change-Id: I8ce1e02be798104aaca9d09d9dc5d931133ada6d
diff --git a/src/mainview/components/CallOverlayButtonGroup.qml b/src/mainview/components/CallOverlayButtonGroup.qml
index 4309fa1..cddc0ea 100644
--- a/src/mainview/components/CallOverlayButtonGroup.qml
+++ b/src/mainview/components/CallOverlayButtonGroup.qml
@@ -1,6 +1,7 @@
/*
* Copyright (C) 2020 by Savoir-faire Linux
+ * Author: Sébastien Blin <sebastien.blin@savoirfairelinux.com>
* Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
*
* This program is free software; you can redistribute it and/or modify
@@ -26,286 +27,193 @@
import "../../commoncomponents"
Rectangle {
- id: callOverlayButtonGroupRect
-
+ id: root
/*
* ButtonCounts here is to make sure that flow layout margin is calculated correctly,
* since no other methods can make buttons at the layout center.
*/
- property int buttonCounts: 9
- property int buttonPreferredSize: 30
+ property int buttonPreferredSize: 24
- signal buttonEntered
signal chatButtonClicked
signal addToConferenceButtonClicked
- signal transferCallButtonClicked
function setButtonStatus(isPaused, isAudioOnly, isAudioMuted, isVideoMuted, isRecording, isSIP, isConferenceCall) {
noVideoButton.visible = !isAudioOnly
addToConferenceButton.visible = !isSIP
- transferCallButton.visible = isSIP
- sipInputPanelButton.visible = isSIP
- noMicButton.setChecked(isAudioMuted)
- noVideoButton.setChecked(isVideoMuted)
- recButton.setChecked(isRecording)
- holdButton.setChecked(isPaused)
-
- holdButton.visible = !isConferenceCall
+ noMicButton.checked = isAudioMuted
+ noVideoButton.checked = isVideoMuted
}
- function calculateFlowMargin() {
- return (callOverlayButtonGroupRect.width - buttonCounts * buttonPreferredSize
- - callOverlayButtonGroupRectFlow.spacing * (buttonCounts - 1)) / 2
- }
+ color: "transparent"
+ z: 2
- Flow {
- id: callOverlayButtonGroupRectFlow
+ RowLayout {
+ id: callOverlayButtonGroup
+
+ spacing: 8
+ height: 56
anchors.fill: parent
-
- /*
- * Minus 1 is to make sure that button will not flick when doing flow layout.
- */
- anchors.leftMargin: calculateFlowMargin(
- ) < 0 ? 0 : calculateFlowMargin() - 1
- anchors.rightMargin: calculateFlowMargin(
- ) < 0 ? 0 : calculateFlowMargin() - 1
-
- spacing: 10
-
- TintedButton {
- id: hangUpButton
-
- width: buttonPreferredSize
- height: buttonPreferredSize
-
- tintColor: JamiTheme.hangUpButtonTintedRed
- normalPixmapSource: "qrc:/images/icons/ic_close_white_24dp.png"
- selectedPixmapSource: "qrc:/images/icons/ic_close_white_24dp.png"
-
- onButtonEntered: {
- callOverlayButtonGroupRect.buttonEntered()
- }
-
- onClicked: {
- CallAdapter.hangUpThisCall()
- }
-
- onVisibleChanged: {
- if (this.visible)
- buttonCounts++
- else
- buttonCounts--
+ Item {
+ Layout.preferredWidth: {
+ // 6 is the number of button
+ // If ~ 500px, go into wide mode
+ (callOverlayButtonGroup.width < buttonPreferredSize * 12 - callOverlayButtonGroup.spacing * 6 + 300)?
+ 0 : callOverlayButtonGroup.width / 2 - buttonPreferredSize * 3 - callOverlayButtonGroup.spacing
}
}
- TintedButton {
- id: holdButton
-
- width: buttonPreferredSize
- height: buttonPreferredSize
-
- tintColor: JamiTheme.buttonTintedBlue
- normalPixmapSource: "qrc:/images/icons/ic_pause_white_24dp.png"
- selectedPixmapSource: "qrc:/images/icons/ic_play_white_24dp.png"
-
- onClicked: {
- CallAdapter.holdThisCallToggle()
- }
-
- onButtonEntered: {
- callOverlayButtonGroupRect.buttonEntered()
- }
-
- onVisibleChanged: {
- if (this.visible)
- buttonCounts++
- else
- buttonCounts--
- }
- }
-
- TintedButton {
- id: addToConferenceButton
-
- width: buttonPreferredSize
- height: buttonPreferredSize
-
- tintColor: JamiTheme.buttonTintedBlue
- normalPixmapSource: "qrc:/images/icons/ic_group_add_white_24dp.png"
- selectedPixmapSource: "qrc:/images/icons/ic_group_add_white_24dp.png"
-
- onButtonEntered: {
- callOverlayButtonGroupRect.buttonEntered()
- }
-
- onClicked: {
- callOverlayButtonGroupRect.addToConferenceButtonClicked()
- }
-
- onVisibleChanged: {
- if (this.visible)
- buttonCounts++
- else
- buttonCounts--
- }
- }
-
- TintedButton {
- id: transferCallButton
-
- width: buttonPreferredSize
- height: buttonPreferredSize
-
- tintColor: JamiTheme.buttonTintedBlue
- normalPixmapSource: "qrc:/images/icons/ic_call_transfer_white_24px.png"
- selectedPixmapSource: "qrc:/images/icons/ic_call_transfer_white_24px.png"
-
- onButtonEntered: {
- callOverlayButtonGroupRect.buttonEntered()
- }
-
- onClicked: {
- callOverlayButtonGroupRect.transferCallButtonClicked()
- }
-
- onVisibleChanged: {
- if (this.visible)
- buttonCounts++
- else
- buttonCounts--
- }
- }
-
- TintedButton {
- id: chatButton
-
- width: buttonPreferredSize
- height: buttonPreferredSize
-
- tintColor: JamiTheme.buttonTintedBlue
- normalPixmapSource: "qrc:/images/icons/ic_chat_white_24dp.png"
- selectedPixmapSource: "qrc:/images/icons/ic_chat_white_24dp.png"
-
- onClicked: {
- callOverlayButtonGroupRect.chatButtonClicked()
- }
-
- onButtonEntered: {
- callOverlayButtonGroupRect.buttonEntered()
- }
-
- onVisibleChanged: {
- if (this.visible)
- buttonCounts++
- else
- buttonCounts--
- }
- }
-
- TintedButton {
+ HoverableButton {
id: noMicButton
- width: buttonPreferredSize
- height: buttonPreferredSize
+ Layout.preferredWidth: buttonPreferredSize * 2
+ Layout.preferredHeight: buttonPreferredSize * 2
- tintColor: JamiTheme.buttonTintedBlue
- normalPixmapSource: "qrc:/images/icons/ic_mic_white_24dp.png"
- selectedPixmapSource: "qrc:/images/icons/ic_mic_off_white_24dp.png"
+ backgroundColor: Qt.rgba(0, 0, 0, 0.75)
+ onEnterColor: Qt.rgba(0, 0, 0, 0.6)
+ onPressColor: Qt.rgba(0, 0, 0, 0.5)
+ onReleaseColor: Qt.rgba(0, 0, 0, 0.6)
+ onExitColor: Qt.rgba(0, 0, 0, 0.75)
+
+ buttonImageHeight: buttonPreferredSize
+ buttonImageWidth: buttonPreferredSize
+ baseImage: "qrc:/images/icons/ic_mic_white_24dp.png"
+ checkedImage: "qrc:/images/icons/ic_mic_off_white_24dp.png"
+ baseColor: "white"
+ checkedColor: JamiTheme.declineButtonPressedRed
+ radius: 30
onClicked: {
CallAdapter.muteThisCallToggle()
}
+ }
- onButtonEntered: {
- callOverlayButtonGroupRect.buttonEntered()
- }
+ HoverableButton {
+ id: hangUpButton
- onVisibleChanged: {
- if (this.visible)
- buttonCounts++
- else
- buttonCounts--
+ Layout.preferredWidth: buttonPreferredSize * 2
+ Layout.preferredHeight: buttonPreferredSize * 2
+
+ backgroundColor: JamiTheme.declineButtonRed
+ onEnterColor: JamiTheme.declineButtonHoverRed
+ onPressColor: JamiTheme.declineButtonPressedRed
+ onReleaseColor: JamiTheme.declineButtonHoverRed
+ onExitColor: JamiTheme.declineButtonRed
+
+ buttonImageHeight: buttonPreferredSize
+ buttonImageWidth: buttonPreferredSize
+ source: "qrc:/images/icons/ic_call_end_white_24px.svg"
+ color: "white"
+ radius: 30
+
+ onClicked: {
+ CallAdapter.hangUpThisCall()
}
}
- TintedButton {
+ HoverableButton {
id: noVideoButton
- width: buttonPreferredSize
- height: buttonPreferredSize
+ Layout.preferredWidth: buttonPreferredSize * 2
+ Layout.preferredHeight: buttonPreferredSize * 2
- tintColor: JamiTheme.buttonTintedBlue
- normalPixmapSource: "qrc:/images/icons/ic_videocam_white.png"
- selectedPixmapSource: "qrc:/images/icons/ic_videocam_off_white_24dp.png"
+ backgroundColor: Qt.rgba(0, 0, 0, 0.75)
+ onEnterColor: Qt.rgba(0, 0, 0, 0.6)
+ onPressColor: Qt.rgba(0, 0, 0, 0.5)
+ onReleaseColor: Qt.rgba(0, 0, 0, 0.6)
+ onExitColor: Qt.rgba(0, 0, 0, 0.75)
- onButtonEntered: {
- callOverlayButtonGroupRect.buttonEntered()
- }
+ buttonImageHeight: buttonPreferredSize
+ buttonImageWidth: buttonPreferredSize
+ baseImage: "qrc:/images/icons/ic_videocam_white.png"
+ checkedImage: "qrc:/images/icons/ic_videocam_off_white_24dp.png"
+ baseColor: "white"
+ checkedColor: JamiTheme.declineButtonPressedRed
+ radius: 30
onClicked: {
CallAdapter.videoPauseThisCallToggle()
}
-
- onVisibleChanged: {
- if (this.visible)
- buttonCounts++
- else
- buttonCounts--
- }
}
- TintedButton {
- id: recButton
+ Item {
+ Layout.fillWidth: true
+ }
- width: buttonPreferredSize
- height: buttonPreferredSize
+ HoverableButton {
+ id: addToConferenceButton
- tintColor: JamiTheme.buttonTintedBlue
- normalPixmapSource: "qrc:/images/icons/ic_voicemail_white_24dp_2x.png"
- selectedPixmapSource: "qrc:/images/icons/ic_voicemail_white_24dp_2x.png"
+ Layout.preferredWidth: buttonPreferredSize * 2
+ Layout.preferredHeight: buttonPreferredSize * 2
- onButtonEntered: {
- callOverlayButtonGroupRect.buttonEntered()
- }
+ backgroundColor: Qt.rgba(0, 0, 0, 0.75)
+ onEnterColor: Qt.rgba(0, 0, 0, 0.6)
+ onPressColor: Qt.rgba(0, 0, 0, 0.5)
+ onReleaseColor: Qt.rgba(0, 0, 0, 0.6)
+ onExitColor: Qt.rgba(0, 0, 0, 0.75)
+
+ buttonImageHeight: buttonPreferredSize
+ buttonImageWidth: buttonPreferredSize
+ color: "white"
+ source: "qrc:/images/icons/ic_group_add_white_24dp.png"
+ radius: 30
onClicked: {
- CallAdapter.recordThisCallToggle()
- }
-
- onVisibleChanged: {
- if (this.visible)
- buttonCounts++
- else
- buttonCounts--
+ root.addToConferenceButtonClicked()
}
}
- TintedButton {
- id: sipInputPanelButton
+ HoverableButton {
+ id: chatButton
- width: buttonPreferredSize
- height: buttonPreferredSize
+ Layout.preferredWidth: buttonPreferredSize * 2
+ Layout.preferredHeight: buttonPreferredSize * 2
- tintColor: JamiTheme.buttonTintedBlue
- normalPixmapSource: "qrc:/images/icons/icon-keypad-24-2x.png"
- selectedPixmapSource: "qrc:/images/icons/icon-keypad-24-2x.png"
+ backgroundColor: Qt.rgba(0, 0, 0, 0.75)
+ onEnterColor: Qt.rgba(0, 0, 0, 0.6)
+ onPressColor: Qt.rgba(0, 0, 0, 0.5)
+ onReleaseColor: Qt.rgba(0, 0, 0, 0.6)
+ onExitColor: Qt.rgba(0, 0, 0, 0.75)
- onButtonEntered: {
- callOverlayButtonGroupRect.buttonEntered()
- }
+ buttonImageHeight: buttonPreferredSize
+ buttonImageWidth: buttonPreferredSize
+ color: "white"
+ source: "qrc:/images/icons/ic_chat_white_24dp.png"
+ radius: 30
- onVisibleChanged: {
- if (this.visible)
- buttonCounts++
- else
- buttonCounts--
+ onClicked: {
+ root.chatButtonClicked()
}
}
+
+ HoverableButton {
+ id: optionsButton
+
+ Layout.preferredWidth: buttonPreferredSize * 2
+ Layout.preferredHeight: buttonPreferredSize * 2
+
+ backgroundColor: Qt.rgba(0, 0, 0, 0.75)
+ onEnterColor: Qt.rgba(0, 0, 0, 0.6)
+ onPressColor: Qt.rgba(0, 0, 0, 0.5)
+ onReleaseColor: Qt.rgba(0, 0, 0, 0.6)
+ onExitColor: Qt.rgba(0, 0, 0, 0.75)
+
+ buttonImageHeight: buttonPreferredSize
+ buttonImageWidth: buttonPreferredSize
+ source: "qrc:/images/icons/more_vert-24px.svg"
+ radius: 30
+
+ onClicked: {
+ var rectPos = mapToItem(callStackViewWindow, optionsButton.x, optionsButton.y)
+ callViewContextMenu.activate()
+ callViewContextMenu.x = rectPos.x + optionsButton.width/2 - callViewContextMenu.width/2
+ callViewContextMenu.y = rectPos.y - 12 - callViewContextMenu.height
+ }
+ }
+
+ Item { Layout.preferredWidth: 8 }
}
-
- color: "transparent"
}