mirror of
https://git.jami.net/savoirfairelinux/jami-client-qt.git
synced 2025-09-10 12:03:18 +02:00
misc: fix image button svg rendering and cleanup button components
- provides a base component for rendering scaled svg images - simplifies the normal/hovered/pressed state transitions - uses color overlay to factor out image source changes for checked states - fixes sizing inconsistencies and visual bugs - removes manual background color changes and minimizes the use of MouseArea components - removes the unused HoverableGradienButton component Gitlab: #14 Change-Id: I06357d3cc6d8d04d9d1f062753dc39223a64d4f6
This commit is contained in:
Andreas Traczyk
parent
54093e5c96
commit
5d8256fb9b
56 changed files with 562 additions and 729 deletions
1
images/icons/arrow_drop_down-24px.svg
Normal file
1
images/icons/arrow_drop_down-24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 10l5 5 5-5z"/></svg>
|
||||
|
After Width: | Height: | Size: 152 B |
1
images/icons/arrow_drop_up-24px.svg
Normal file
1
images/icons/arrow_drop_up-24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 14l5-5 5 5z"/></svg>
|
||||
|
After Width: | Height: | Size: 152 B |
1
images/icons/chat-24px.svg
Normal file
1
images/icons/chat-24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z"/></svg>
|
||||
|
After Width: | Height: | Size: 253 B |
1
images/icons/check-24px.svg
Normal file
1
images/icons/check-24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
|
||||
|
After Width: | Height: | Size: 187 B |
1
images/icons/content_copy-24px.svg
Normal file
1
images/icons/content_copy-24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
|
||||
|
After Width: | Height: | Size: 265 B |
1
images/icons/expand_less-24px.svg
Normal file
1
images/icons/expand_less-24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>
|
||||
|
After Width: | Height: | Size: 184 B |
1
images/icons/expand_more-24px.svg
Normal file
1
images/icons/expand_more-24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>
|
||||
|
After Width: | Height: | Size: 182 B |
1
images/icons/group_add-24px.svg
Normal file
1
images/icons/group_add-24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M8 10H5V7H3v3H0v2h3v3h2v-3h3v-2zm10 1c1.66 0 2.99-1.34 2.99-3S19.66 5 18 5c-.32 0-.63.05-.91.14.57.81.9 1.79.9 2.86s-.34 2.04-.9 2.86c.28.09.59.14.91.14zm-5 0c1.66 0 2.99-1.34 2.99-3S14.66 5 13 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm6.62 2.16c.83.73 1.38 1.66 1.38 2.84v2h3v-2c0-1.54-2.37-2.49-4.38-2.84zM13 13c-2 0-6 1-6 3v2h12v-2c0-2-4-3-6-3z"/></svg>
|
||||
|
After Width: | Height: | Size: 476 B |
1
images/icons/mic-24px.svg
Normal file
1
images/icons/mic-24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/></svg>
|
||||
|
After Width: | Height: | Size: 329 B |
1
images/icons/mic_off-24px.svg
Normal file
1
images/icons/mic_off-24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0zm0 0h24v24H0z" fill="none"/><path d="M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z"/></svg>
|
||||
|
After Width: | Height: | Size: 507 B |
1
images/icons/pause-24px.svg
Normal file
1
images/icons/pause-24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
|
||||
|
After Width: | Height: | Size: 169 B |
1
images/icons/phone_paused-24px.svg
Normal file
1
images/icons/phone_paused-24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3h-2v7h2V3zm3 12.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM19 3v7h2V3h-2z"/></svg>
|
||||
|
After Width: | Height: | Size: 411 B |
1
images/icons/qr_code-24px.svg
Normal file
1
images/icons/qr_code-24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M3,11h8V3H3V11z M5,5h4v4H5V5z"/><path d="M3,21h8v-8H3V21z M5,15h4v4H5V15z"/><path d="M13,3v8h8V3H13z M19,9h-4V5h4V9z"/><rect height="2" width="2" x="19" y="19"/><rect height="2" width="2" x="13" y="13"/><rect height="2" width="2" x="15" y="15"/><rect height="2" width="2" x="13" y="17"/><rect height="2" width="2" x="15" y="19"/><rect height="2" width="2" x="17" y="17"/><rect height="2" width="2" x="17" y="13"/><rect height="2" width="2" x="19" y="15"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 650 B |
1
images/icons/videocam_off-24px.svg
Normal file
1
images/icons/videocam_off-24px.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0zm0 0h24v24H0z" fill="none"/><path d="M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z"/></svg>
|
||||
|
After Width: | Height: | Size: 308 B |
4
qml.qrc
4
qml.qrc
|
|
@ -80,7 +80,7 @@
|
|||
<file>src/mainview/components/WelcomePage.qml</file>
|
||||
<file>src/mainview/components/MessageWebView.qml</file>
|
||||
<file>src/mainview/components/MessageWebViewHeader.qml</file>
|
||||
<file>src/commoncomponents/HoverableButton.qml</file>
|
||||
<file>src/commoncomponents/PushButton.qml</file>
|
||||
<file>src/mainview/components/AccountComboBox.qml</file>
|
||||
<file>src/mainview/components/ConversationSmartListView.qml</file>
|
||||
<file>src/commoncomponents/JamiFileDialog.qml</file>
|
||||
|
|
@ -122,7 +122,6 @@
|
|||
<file>src/mainview/js/contactpickercreation.js</file>
|
||||
<file>src/mainview/js/mediahandlerpickercreation.js</file>
|
||||
<file>src/mainview/components/ContactPickerItemDelegate.qml</file>
|
||||
<file>src/wizardview/components/HoverableGradientButton.qml</file>
|
||||
<file>src/commoncomponents/AccountMigrationDialog.qml</file>
|
||||
<file>src/commoncomponents/MaterialButton.qml</file>
|
||||
<file>src/mainview/components/RecordBox.qml</file>
|
||||
|
|
@ -140,5 +139,6 @@
|
|||
<file>src/commoncomponents/BaseDialog.qml</file>
|
||||
<file>src/commoncomponents/ModalPopup.qml</file>
|
||||
<file>src/commoncomponents/SimpleMessageDialog.qml</file>
|
||||
<file>src/commoncomponents/ResponsiveImage.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
|
|
|||
|
|
@ -120,5 +120,19 @@
|
|||
<file>images/icons/arrow_back-white-24dp.svg</file>
|
||||
<file>images/icons/keyboard_voice-24px.svg</file>
|
||||
<file>images/icons/videocam-24px.svg</file>
|
||||
<file>images/icons/qr_code-24px.svg</file>
|
||||
<file>images/icons/content_copy-24px.svg</file>
|
||||
<file>images/icons/videocam_off-24px.svg</file>
|
||||
<file>images/icons/check-24px.svg</file>
|
||||
<file>images/icons/mic_off-24px.svg</file>
|
||||
<file>images/icons/mic-24px.svg</file>
|
||||
<file>images/icons/group_add-24px.svg</file>
|
||||
<file>images/icons/chat-24px.svg</file>
|
||||
<file>images/icons/phone_paused-24px.svg</file>
|
||||
<file>images/icons/pause-24px.svg</file>
|
||||
<file>images/icons/arrow_drop_up-24px.svg</file>
|
||||
<file>images/icons/arrow_drop_down-24px.svg</file>
|
||||
<file>images/icons/expand_less-24px.svg</file>
|
||||
<file>images/icons/expand_more-24px.svg</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ MenuItem {
|
|||
implicitHeight: preferredHeight
|
||||
|
||||
border.width: 0
|
||||
color: menuItem.down ? JamiTheme.releaseColor : "white"
|
||||
color: menuItem.down ? JamiTheme.normalButtonColor : "white"
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
|
|
@ -107,7 +107,7 @@ MenuItem {
|
|||
contextMenuBackgroundRect.color = JamiTheme.pressColor
|
||||
}
|
||||
onReleased: {
|
||||
contextMenuBackgroundRect.color = JamiTheme.releaseColor
|
||||
contextMenuBackgroundRect.color = JamiTheme.normalButtonColor
|
||||
menuItem.clicked()
|
||||
}
|
||||
onEntered: {
|
||||
|
|
|
|||
|
|
@ -1,125 +0,0 @@
|
|||
|
||||
/*
|
||||
* Copyright (C) 2020 by Savoir-faire Linux
|
||||
* Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtGraphicalEffects 1.15
|
||||
import "../constant"
|
||||
|
||||
// HoverableButton contains the following configurable properties:
|
||||
// 1. Color changes on different button state
|
||||
// 2. Radius control (rounded)
|
||||
// 3. Text content or image content
|
||||
// 4. Can use OnClicked slot to implement some click logic
|
||||
//
|
||||
// Note: if use text property directly, buttonTextColor will not work.
|
||||
Button {
|
||||
id: hoverableButton
|
||||
|
||||
checkable: true
|
||||
checked: false
|
||||
|
||||
property int fontPointSize: 9
|
||||
property int buttonImageHeight: hoverableButtonBackground.height - 10
|
||||
property int buttonImageWidth: hoverableButtonBackground.width - 10
|
||||
|
||||
property string buttonText: ""
|
||||
property string buttonTextColor: "black"
|
||||
|
||||
property string backgroundColor: JamiTheme.releaseColor
|
||||
property string onPressColor: JamiTheme.pressColor
|
||||
property string onReleaseColor: JamiTheme.releaseColor
|
||||
property string onEnterColor: JamiTheme.hoverColor
|
||||
property string onExitColor: JamiTheme.releaseColor
|
||||
|
||||
property alias radius: hoverableButtonBackground.radius
|
||||
property alias source: hoverableButtonImage.source
|
||||
property var checkedImage: ""
|
||||
property var baseImage: ""
|
||||
property var checkedColor: null
|
||||
property var baseColor: null
|
||||
property alias color: hoverableButton.baseColor
|
||||
property string toolTipText: ""
|
||||
|
||||
font.pointSize: fontPointSize
|
||||
|
||||
hoverEnabled: true
|
||||
|
||||
text: "<font color=" + "'" + buttonTextColor + "'>" + buttonText + "</font>"
|
||||
|
||||
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
|
||||
ToolTip.visible: hovered && (toolTipText.length > 0)
|
||||
ToolTip.text: toolTipText
|
||||
|
||||
background: Rectangle {
|
||||
id: hoverableButtonBackground
|
||||
|
||||
color: backgroundColor
|
||||
|
||||
Image {
|
||||
id: hoverableButtonImage
|
||||
|
||||
anchors.centerIn: hoverableButtonBackground
|
||||
|
||||
height: buttonImageHeight
|
||||
width: buttonImageWidth
|
||||
|
||||
fillMode: Image.PreserveAspectFit
|
||||
mipmap: true
|
||||
asynchronous: true
|
||||
|
||||
source: {
|
||||
if (checkable && checkedImage)
|
||||
return hoverableButton.checked ? checkedImage : baseImage
|
||||
else
|
||||
return ""
|
||||
}
|
||||
|
||||
layer {
|
||||
enabled: true
|
||||
effect: ColorOverlay {
|
||||
id: overlay
|
||||
color: hoverableButton.checked && checkedColor?
|
||||
checkedColor :
|
||||
(baseColor? baseColor : "transparent")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
|
||||
hoverEnabled: hoverableButton.hoverEnabled
|
||||
|
||||
onPressed: {
|
||||
hoverableButtonBackground.color = onPressColor
|
||||
}
|
||||
onReleased: {
|
||||
hoverableButtonBackground.color = onReleaseColor
|
||||
hoverableButton.toggle()
|
||||
hoverableButton.clicked()
|
||||
}
|
||||
onEntered: {
|
||||
hoverableButtonBackground.color = onEnterColor
|
||||
}
|
||||
onExited: {
|
||||
hoverableButtonBackground.color = onExitColor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -32,7 +32,7 @@ Button {
|
|||
property int buttonImageHeight: hoverableButtonBackground.height
|
||||
property int buttonImageWidth: hoverableButtonBackground.width
|
||||
|
||||
property string backgroundColor: JamiTheme.releaseColor
|
||||
property string backgroundColor: JamiTheme.normalButtonColor
|
||||
property string onPressColor: JamiTheme.pressColor
|
||||
property string onReleaseColor: backgroundColor
|
||||
property string onEnterColor: JamiTheme.hoverColor
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ Button {
|
|||
property int fontPointSize: 9
|
||||
property int buttonImageHeight: hoverableButtonBackground.height - 10
|
||||
property int buttonImageWidth: hoverableButtonBackground.width - 10
|
||||
property string backgroundColor: JamiTheme.releaseColor
|
||||
property string backgroundColor: JamiTheme.normalButtonColor
|
||||
property string onPressColor: JamiTheme.pressColor
|
||||
property string onReleaseColor: backgroundColor
|
||||
property string onEnterColor: JamiTheme.hoverColor
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ Rectangle{
|
|||
border.width: 1
|
||||
border.color: JamiTheme.hoverColor
|
||||
|
||||
color: JamiTheme.releaseColor
|
||||
color: JamiTheme.normalButtonColor
|
||||
|
||||
ListView{
|
||||
id: listView
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtGraphicalEffects 1.15
|
||||
import QtQuick.Window 2.15
|
||||
|
||||
import "../constant"
|
||||
|
||||
|
|
@ -73,6 +74,23 @@ Button {
|
|||
Image {
|
||||
id: buttonImage
|
||||
|
||||
property real pixelDensity: Screen.pixelDensity
|
||||
property real isSvg: {
|
||||
var match = /[^.]+$/.exec(source)
|
||||
return match !== null && match[0] === 'svg'
|
||||
}
|
||||
|
||||
function setSourceSize() {
|
||||
if (isSvg) {
|
||||
sourceSize.width = width
|
||||
sourceSize.height = height
|
||||
} else
|
||||
sourceSize = undefined
|
||||
}
|
||||
|
||||
onPixelDensityChanged: setSourceSize()
|
||||
Component.onCompleted: setSourceSize()
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: JamiTheme.preferredMarginSize / 2
|
||||
|
|
|
|||
|
|
@ -174,15 +174,13 @@ ColumnLayout {
|
|||
Layout.preferredHeight: JamiTheme.preferredFieldHeight
|
||||
Layout.topMargin: JamiTheme.preferredMarginSize / 2
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: takePhotoButton
|
||||
|
||||
property string cameraAltIconUrl: "qrc:/images/icons/baseline-camera_alt-24px.svg"
|
||||
property string addPhotoIconUrl: "qrc:/images/icons/round-add_a_photo-24px.svg"
|
||||
property string refreshIconUrl: "qrc:/images/icons/baseline-refresh-24px.svg"
|
||||
|
||||
Layout.preferredWidth: JamiTheme.preferredFieldHeight
|
||||
Layout.preferredHeight: JamiTheme.preferredFieldHeight
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
|
||||
text: ""
|
||||
|
|
@ -226,7 +224,7 @@ ColumnLayout {
|
|||
}
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: importButton
|
||||
|
||||
Layout.preferredWidth: JamiTheme.preferredFieldHeight
|
||||
|
|
|
|||
171
src/commoncomponents/PushButton.qml
Normal file
171
src/commoncomponents/PushButton.qml
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
/*
|
||||
* Copyright (C) 2020 by Savoir-faire Linux
|
||||
* Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
|
||||
* Author: Andreas Tracyk <andreas.traczyk@savoirfairelinux.com>
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtGraphicalEffects 1.15
|
||||
import "../constant"
|
||||
|
||||
//
|
||||
// PushButton contains the following configurable properties:
|
||||
// - colored states
|
||||
// - radius
|
||||
// - minimal support for text
|
||||
// - animation duration
|
||||
// TODO: allow transparent background tinted text/icon
|
||||
//
|
||||
AbstractButton {
|
||||
id: root
|
||||
|
||||
// Shape will default to a 15px circle
|
||||
// but can be sized accordingly.
|
||||
property int preferredSize: 30
|
||||
property int preferredWidth: preferredSize
|
||||
property int preferredHeight: preferredSize
|
||||
property int preferredMargin: 16
|
||||
property alias textHAlign: textContent.horizontalAlignment
|
||||
// Note the radius will default to preferredSize
|
||||
property alias radius: background.radius
|
||||
|
||||
// Text properties
|
||||
property alias buttonText: textContent.text
|
||||
property alias buttonTextColor: textContent.color
|
||||
property alias fontPointSize: textContent.font.pointSize
|
||||
|
||||
property string toolTipText: ""
|
||||
|
||||
// State colors
|
||||
property string pressedColor: JamiTheme.pressedButtonColor
|
||||
property string hoveredColor: JamiTheme.hoveredButtonColor
|
||||
property string normalColor: JamiTheme.normalButtonColor
|
||||
property int duration: JamiTheme.fadeDuration
|
||||
|
||||
// Image properties
|
||||
property alias source: image.source
|
||||
property var imageColor: null
|
||||
property string normalImageSource
|
||||
property var checkedColor: null
|
||||
property string checkedImageSource
|
||||
property alias imagePadding: image.padding
|
||||
property alias imageOffset: image.offset
|
||||
|
||||
width: preferredSize
|
||||
height: preferredSize
|
||||
|
||||
checkable: true
|
||||
checked: false
|
||||
hoverEnabled: true
|
||||
|
||||
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
|
||||
ToolTip.visible: hovered && (toolTipText.length > 0)
|
||||
ToolTip.text: toolTipText
|
||||
|
||||
background: Rectangle {
|
||||
id: background
|
||||
|
||||
radius: preferredSize
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "pressed"; when: pressed
|
||||
PropertyChanges { target: background; color: pressedColor }
|
||||
PropertyChanges { target: image; offset: Qt.point(0, 0.5) }
|
||||
},
|
||||
State {
|
||||
name: "hovered"; when: hovered
|
||||
PropertyChanges { target: background; color: hoveredColor }
|
||||
},
|
||||
State {
|
||||
name: "normal"; when: !hovered
|
||||
PropertyChanges { target: background; color: normalColor }
|
||||
}
|
||||
]
|
||||
|
||||
transitions: [
|
||||
Transition {
|
||||
to: "normal"; reversible: true
|
||||
ColorAnimation { duration: root.duration }
|
||||
},
|
||||
Transition {
|
||||
to: "pressed"; reversible: true
|
||||
ParallelAnimation {
|
||||
ColorAnimation { duration: root.duration * 0.5 }
|
||||
NumberAnimation { duration: root.duration * 0.5 }
|
||||
}
|
||||
},
|
||||
Transition {
|
||||
to: ""; reversible: true
|
||||
ColorAnimation { duration: root.duration }
|
||||
}
|
||||
]
|
||||
|
||||
ResponsiveImage {
|
||||
id: image
|
||||
|
||||
containerWidth: preferredSize
|
||||
containerHeight: preferredSize
|
||||
|
||||
anchors.verticalCenter: background.verticalCenter
|
||||
anchors.horizontalCenter: textContent.text ? undefined : parent.horizontalCenter
|
||||
anchors.left: textContent.text ? parent.left : undefined
|
||||
anchors.leftMargin: preferredMargin
|
||||
|
||||
source: {
|
||||
if (checkable && checkedImageSource)
|
||||
return checked ? checkedImageSource : normalImageSource
|
||||
else
|
||||
return normalImageSource
|
||||
}
|
||||
|
||||
layer {
|
||||
enabled: imageColor || checkedColor
|
||||
effect: ColorOverlay {
|
||||
id: overlay
|
||||
color: {
|
||||
if (checked && checkedColor) return checkedColor
|
||||
else if (imageColor) return imageColor
|
||||
else return JamiTheme.transparentColor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
id: textContent
|
||||
|
||||
anchors.left: {
|
||||
if (image.source.toString() !== '')
|
||||
return image.right
|
||||
else
|
||||
return background.left
|
||||
}
|
||||
anchors.leftMargin: preferredMargin
|
||||
anchors.right: background.right
|
||||
anchors.rightMargin: preferredMargin
|
||||
anchors.verticalCenter: background.verticalCenter
|
||||
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
|
||||
color: JamiTheme.primaryForegroundColor
|
||||
font.kerning: true
|
||||
font.pointSize: 9
|
||||
elide: Qt.ElideRight
|
||||
}
|
||||
}
|
||||
}
|
||||
64
src/commoncomponents/ResponsiveImage.qml
Normal file
64
src/commoncomponents/ResponsiveImage.qml
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
/*
|
||||
* Copyright (C) 2020 by Savoir-faire Linux
|
||||
* Author: Andreas Tracyk <andreas.traczyk@savoirfairelinux.com>
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Window 2.15
|
||||
|
||||
Image {
|
||||
id: root
|
||||
|
||||
property real containerWidth
|
||||
property real containerHeight
|
||||
|
||||
property int padding: 0
|
||||
property point offset: Qt.point(0, 0)
|
||||
|
||||
property string normalSource
|
||||
property string checkedSource
|
||||
|
||||
property real pixelDensity: Screen.pixelDensity
|
||||
property bool isSvg: {
|
||||
var match = /[^.]+$/.exec(source)
|
||||
return match !== null && match[0] === 'svg'
|
||||
}
|
||||
|
||||
anchors.horizontalCenterOffset: offset.x
|
||||
anchors.verticalCenterOffset: offset.y
|
||||
|
||||
// works out to 24 if containerWidth is 30
|
||||
width: Math.trunc(containerWidth * Math.sqrt(2) * 0.5) + 3 - padding
|
||||
height: Math.trunc(containerHeight * Math.sqrt(2) * 0.5) + 3 - padding
|
||||
|
||||
fillMode: Image.PreserveAspectFit
|
||||
mipmap: true
|
||||
smooth: false
|
||||
asynchronous: true
|
||||
antialiasing: false
|
||||
|
||||
function setSourceSize() {
|
||||
if (isSvg) {
|
||||
sourceSize.width = Math.max(24, width)
|
||||
sourceSize.height = Math.max(24, height)
|
||||
} else
|
||||
sourceSize = undefined
|
||||
}
|
||||
|
||||
onPixelDensityChanged: setSourceSize()
|
||||
Component.onCompleted: setSourceSize()
|
||||
}
|
||||
|
|
@ -22,12 +22,25 @@ pragma Singleton
|
|||
import QtQuick 2.14
|
||||
|
||||
Item {
|
||||
// Color strings.
|
||||
// Color strings
|
||||
property string blackColor: "#000000"
|
||||
property string whiteColor: "#ffffff"
|
||||
property string transparentColor: "transparent"
|
||||
property string primaryForegroundColor: blackColor
|
||||
property string primaryBackgroundColor: whiteColor
|
||||
|
||||
property string pressedButtonColor: "#a0a0a0"
|
||||
property string hoveredButtonColor: "#c7c7c7"
|
||||
property string normalButtonColor: "#e0e0e0"
|
||||
|
||||
property string invertedPressedButtonColor: Qt.rgba(0, 0, 0, 0.5)
|
||||
property string invertedHoveredButtonColor: Qt.rgba(0, 0, 0, 0.6)
|
||||
property string invertedNormalButtonColor: Qt.rgba(0, 0, 0, 0.75)
|
||||
|
||||
property string hoverColor: "#c7c7c7"
|
||||
property string pressColor: "#c0c0c0"
|
||||
property string releaseColor: "#e0e0e0"
|
||||
|
||||
property string tabbarBorderColor: "#e3e3e3"
|
||||
property string transparentColor: "transparent"
|
||||
property string presenceGreen: "#4cd964"
|
||||
property string notificationRed: "#ff3b30"
|
||||
property string unPresenceOrange: "orange"
|
||||
|
|
@ -115,4 +128,6 @@ Item {
|
|||
property color urgentOrange_: rgb256(255, 165, 0)
|
||||
property color green_: rgb256(127, 255, 0)
|
||||
property color presenceGreen_: rgb256(76, 217, 100)
|
||||
|
||||
property int fadeDuration: 150
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/*
|
||||
* Copyright (C) 2020 by Savoir-faire Linux
|
||||
* Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
|
||||
* Author: Andreas Traczyk <andreas.traczyk@savoirfairelinux.com>
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
|
|
@ -91,7 +92,7 @@ ComboBox {
|
|||
font.pointSize: JamiTheme.textFontSize
|
||||
}
|
||||
|
||||
Image {
|
||||
ResponsiveImage {
|
||||
id: arrowDropDown
|
||||
|
||||
anchors.left: textUserAliasRoot.right
|
||||
|
|
@ -100,8 +101,6 @@ ComboBox {
|
|||
width: 24
|
||||
height: 24
|
||||
|
||||
fillMode: Image.PreserveAspectFit
|
||||
mipmap: true
|
||||
source: "qrc:/images/icons/round-arrow_drop_down-24px.svg"
|
||||
}
|
||||
|
||||
|
|
@ -140,59 +139,6 @@ ComboBox {
|
|||
AccountListModel.Username)
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
id: qrCodeGenerateButton
|
||||
|
||||
anchors.right: settingsButton.left
|
||||
anchors.rightMargin: 10
|
||||
anchors.verticalCenter: root.verticalCenter
|
||||
|
||||
buttonImageHeight: height - 8
|
||||
buttonImageWidth: width - 8
|
||||
radius: height / 2
|
||||
|
||||
width: 24
|
||||
height: 24
|
||||
|
||||
visible: AccountAdapter.currentAccountType === Profile.Type.RING
|
||||
toolTipText: JamiStrings.displayQRCode
|
||||
hoverEnabled: true
|
||||
|
||||
source: "qrc:/images/qrcode.png"
|
||||
backgroundColor: "white"
|
||||
onClicked: {
|
||||
if (visible)
|
||||
qrDialog.open()
|
||||
}
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
id: settingsButton
|
||||
|
||||
anchors.right: root.right
|
||||
anchors.rightMargin: 10
|
||||
anchors.verticalCenter: root.verticalCenter
|
||||
|
||||
buttonImageHeight: height - 8
|
||||
buttonImageWidth: width - 8
|
||||
radius: height / 2
|
||||
width: 25
|
||||
height: 25
|
||||
|
||||
source: !mainViewWindow.inSettingsView ?
|
||||
"qrc:/images/icons/round-settings-24px.svg" :
|
||||
"qrc:/images/icons/round-close-24px.svg"
|
||||
toolTipText: !mainViewWindow.inSettingsView ?
|
||||
JamiStrings.openSettings :
|
||||
JamiStrings.closeSettings
|
||||
hoverEnabled: true
|
||||
|
||||
backgroundColor: "white"
|
||||
onClicked: {
|
||||
settingBtnClicked()
|
||||
}
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
id: rootItemBackground
|
||||
|
||||
|
|
@ -216,64 +162,59 @@ ComboBox {
|
|||
id: comboBoxRootMouseArea
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
hoverEnabled: true
|
||||
propagateComposedEvents: true
|
||||
|
||||
onPressed: {
|
||||
if (isMouseOnButton(mouse, qrCodeGenerateButton)) {
|
||||
qrCodeGenerateButton.backgroundColor = JamiTheme.pressColor
|
||||
qrCodeGenerateButton.clicked()
|
||||
}if (isMouseOnButton(mouse, settingsButton)) {
|
||||
settingsButton.backgroundColor = JamiTheme.pressColor
|
||||
settingsButton.clicked()
|
||||
onClicked: {
|
||||
if (comboBoxPopup.opened) {
|
||||
root.popup.close()
|
||||
} else {
|
||||
rootItemBackground.color = JamiTheme.pressColor
|
||||
root.popup.open()
|
||||
}
|
||||
}
|
||||
onEntered: rootItemBackground.color = Qt.lighter(JamiTheme.hoverColor, 1.05)
|
||||
onExited: rootItemBackground.color = JamiTheme.backgroundColor
|
||||
}
|
||||
|
||||
onReleased: {
|
||||
if (isMouseOnButton(mouse, qrCodeGenerateButton)) {
|
||||
qrCodeGenerateButton.backgroundColor = JamiTheme.releaseColor
|
||||
} else if (isMouseOnButton(mouse, settingsButton)) {
|
||||
settingsButton.backgroundColor = JamiTheme.releaseColor
|
||||
} else {
|
||||
rootItemBackground.color = JamiTheme.releaseColor
|
||||
if (comboBoxPopup.opened) {
|
||||
root.popup.close()
|
||||
} else {
|
||||
root.popup.open()
|
||||
}
|
||||
}
|
||||
PushButton {
|
||||
id: qrCodeGenerateButton
|
||||
|
||||
anchors.right: settingsButton.left
|
||||
anchors.rightMargin: 10
|
||||
anchors.verticalCenter: root.verticalCenter
|
||||
|
||||
width: visible ? preferredSize : 0
|
||||
height: visible ? preferredSize : 0
|
||||
|
||||
visible: AccountAdapter.currentAccountType === Profile.Type.RING
|
||||
toolTipText: JamiStrings.displayQRCode
|
||||
|
||||
source: "qrc:/images/icons/qr_code-24px.svg"
|
||||
|
||||
onClicked: {
|
||||
if (visible)
|
||||
qrDialog.open()
|
||||
}
|
||||
onEntered: {
|
||||
rootItemBackground.color = JamiTheme.hoverColor
|
||||
}
|
||||
onExited: {
|
||||
}
|
||||
|
||||
PushButton {
|
||||
id: settingsButton
|
||||
|
||||
anchors.right: root.right
|
||||
anchors.rightMargin: 10
|
||||
anchors.verticalCenter: root.verticalCenter
|
||||
|
||||
source: !mainViewWindow.inSettingsView ?
|
||||
"qrc:/images/icons/round-settings-24px.svg" :
|
||||
"qrc:/images/icons/round-close-24px.svg"
|
||||
|
||||
toolTipText: !mainViewWindow.inSettingsView ?
|
||||
JamiStrings.openSettings :
|
||||
JamiStrings.closeSettings
|
||||
|
||||
onClicked: {
|
||||
settingBtnClicked()
|
||||
rootItemBackground.color = JamiTheme.backgroundColor
|
||||
}
|
||||
onMouseXChanged: {
|
||||
|
||||
// Manually making button hover.
|
||||
qrCodeGenerateButton.backgroundColor = (isMouseOnButton(mouse, qrCodeGenerateButton)) ?
|
||||
JamiTheme.hoverColor : "white"
|
||||
|
||||
settingsButton.backgroundColor = (isMouseOnButton(mouse, settingsButton)) ?
|
||||
JamiTheme.hoverColor : "white"
|
||||
}
|
||||
|
||||
function isMouseOnButton(mouse, button) {
|
||||
var mousePos = mapToItem(comboBoxRootMouseArea, mouse.x, mouse.y)
|
||||
var qrButtonPos = mapToItem(comboBoxRootMouseArea,
|
||||
button.x,
|
||||
button.y)
|
||||
if ((mousePos.x >= qrButtonPos.x
|
||||
&& mousePos.x <= qrButtonPos.x + button.width)
|
||||
&& (mousePos.y >= qrButtonPos.y
|
||||
&& mousePos.y <= qrButtonPos.y + button.height))
|
||||
return true
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
indicator: null
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ Popup {
|
|||
itemComboBackground.color = JamiTheme.pressColor
|
||||
}
|
||||
onReleased: {
|
||||
itemComboBackground.color = JamiTheme.releaseColor
|
||||
itemComboBackground.color = JamiTheme.normalButtonColor
|
||||
currentIndex = index
|
||||
root.close()
|
||||
AccountAdapter.accountChanged(index)
|
||||
|
|
@ -159,7 +159,7 @@ Popup {
|
|||
implicitHeight: accountComboBox.height
|
||||
|
||||
background: Rectangle {
|
||||
color: comboBoxFooterItem.hovered? JamiTheme.releaseColor : JamiTheme.backgroundColor
|
||||
color: comboBoxFooterItem.hovered? JamiTheme.normalButtonColor : JamiTheme.backgroundColor
|
||||
}
|
||||
|
||||
text: qsTr("Add Account") + "+"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/*
|
||||
* Copyright (C) 2020 by Savoir-faire Linux
|
||||
* Author: Sébastien Blin <sebastien.blin@savoirfairelinux.com>
|
||||
|
|
@ -49,7 +48,7 @@ Popup {
|
|||
|
||||
width: 250
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: closeButton
|
||||
|
||||
anchors.top: contactPickerPopupRect.top
|
||||
|
|
@ -57,10 +56,6 @@ Popup {
|
|||
anchors.right: contactPickerPopupRect.right
|
||||
anchors.rightMargin: 5
|
||||
|
||||
width: 30
|
||||
height: 30
|
||||
|
||||
radius: 30
|
||||
source: "qrc:/images/icons/ic_close_black_24dp.png"
|
||||
|
||||
onClicked: {
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@ Rectangle {
|
|||
|
||||
anchors.fill: parent
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: backButton
|
||||
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
|
|
@ -171,19 +171,18 @@ Rectangle {
|
|||
Layout.topMargin: JamiTheme.preferredMarginSize
|
||||
Layout.leftMargin: JamiTheme.preferredMarginSize
|
||||
|
||||
radius: 32
|
||||
source: "qrc:/images/icons/arrow_back-white-24dp.svg"
|
||||
backgroundColor: "transparent"
|
||||
onExitColor: "transparent"
|
||||
onEnterColor: JamiTheme.lightGrey_
|
||||
|
||||
pressedColor: JamiTheme.invertedPressedButtonColor
|
||||
hoveredColor: JamiTheme.invertedHoveredButtonColor
|
||||
normalColor: JamiTheme.invertedNormalButtonColor
|
||||
|
||||
toolTipText: qsTr("Toggle to display side panel")
|
||||
hoverEnabled: true
|
||||
|
||||
visible: mainViewWindow.sidePanelOnly
|
||||
|
||||
onClicked: {
|
||||
mainViewWindow.showWelcomeView()
|
||||
}
|
||||
onClicked: mainViewWindow.showWelcomeView()
|
||||
|
||||
}
|
||||
|
||||
Text {
|
||||
|
|
@ -287,7 +286,7 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
ResponsiveImage {
|
||||
id: onHoldImage
|
||||
|
||||
anchors.verticalCenter: callOverlayRect.verticalCenter
|
||||
|
|
@ -298,9 +297,7 @@ Rectangle {
|
|||
|
||||
visible: false
|
||||
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: "qrc:/images/icons/ic_pause_white_100px.png"
|
||||
asynchronous: true
|
||||
source: "qrc:/images/icons/phone_paused-24px.svg"
|
||||
}
|
||||
|
||||
CallOverlayButtonGroup {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/*
|
||||
* Copyright (C) 2020 by Savoir-faire Linux
|
||||
* Author: Sébastien Blin <sebastien.blin@savoirfairelinux.com>
|
||||
|
|
@ -17,6 +16,7 @@
|
|||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
|
@ -31,7 +31,7 @@ Rectangle {
|
|||
|
||||
// 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 buttonPreferredSize: 24
|
||||
property int buttonPreferredSize: 48
|
||||
property var isHost: true
|
||||
property var isSip: false
|
||||
|
||||
|
|
@ -66,163 +66,134 @@ Rectangle {
|
|||
|
||||
Item {
|
||||
Layout.preferredWidth: {
|
||||
// TODO: refactor with Flow if possible
|
||||
// 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
|
||||
if (callOverlayButtonGroup.width < (buttonPreferredSize * 6 -
|
||||
callOverlayButtonGroup.spacing * 6 + 300)) {
|
||||
return 0
|
||||
} else {
|
||||
return callOverlayButtonGroup.width / 2 - buttonPreferredSize * 1.5 -
|
||||
callOverlayButtonGroup.spacing
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: noMicButton
|
||||
|
||||
Layout.preferredWidth: buttonPreferredSize * 2
|
||||
Layout.preferredHeight: buttonPreferredSize * 2
|
||||
Layout.leftMargin: 8
|
||||
Layout.preferredWidth: buttonPreferredSize
|
||||
Layout.preferredHeight: buttonPreferredSize
|
||||
|
||||
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)
|
||||
pressedColor: JamiTheme.invertedPressedButtonColor
|
||||
hoveredColor: JamiTheme.invertedHoveredButtonColor
|
||||
normalColor: JamiTheme.invertedNormalButtonColor
|
||||
|
||||
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"
|
||||
normalImageSource: "qrc:/images/icons/mic-24px.svg"
|
||||
imageColor: JamiTheme.whiteColor
|
||||
|
||||
checkedImageSource: "qrc:/images/icons/mic_off-24px.svg"
|
||||
checkedColor: JamiTheme.declineButtonPressedRed
|
||||
radius: 30
|
||||
|
||||
toolTipText: !checked ? JamiStrings.mute : JamiStrings.unmute
|
||||
|
||||
onClicked: {
|
||||
CallAdapter.muteThisCallToggle()
|
||||
}
|
||||
onClicked: CallAdapter.muteThisCallToggle()
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: hangUpButton
|
||||
|
||||
Layout.preferredWidth: buttonPreferredSize * 2
|
||||
Layout.preferredHeight: buttonPreferredSize * 2
|
||||
Layout.preferredWidth: buttonPreferredSize
|
||||
Layout.preferredHeight: buttonPreferredSize
|
||||
|
||||
backgroundColor: JamiTheme.declineButtonRed
|
||||
onEnterColor: JamiTheme.declineButtonHoverRed
|
||||
onPressColor: JamiTheme.declineButtonPressedRed
|
||||
onReleaseColor: JamiTheme.declineButtonHoverRed
|
||||
onExitColor: JamiTheme.declineButtonRed
|
||||
pressedColor: JamiTheme.declineButtonPressedRed
|
||||
hoveredColor: JamiTheme.declineButtonHoverRed
|
||||
normalColor: JamiTheme.declineButtonRed
|
||||
|
||||
buttonImageHeight: buttonPreferredSize
|
||||
buttonImageWidth: buttonPreferredSize
|
||||
source: "qrc:/images/icons/ic_call_end_white_24px.svg"
|
||||
color: "white"
|
||||
radius: 30
|
||||
imageColor: JamiTheme.whiteColor
|
||||
|
||||
toolTipText: JamiStrings.hangup
|
||||
|
||||
onClicked: {
|
||||
CallAdapter.hangUpThisCall()
|
||||
}
|
||||
onClicked: CallAdapter.hangUpThisCall()
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: noVideoButton
|
||||
|
||||
Layout.preferredWidth: buttonPreferredSize * 2
|
||||
Layout.preferredHeight: buttonPreferredSize * 2
|
||||
Layout.preferredWidth: buttonPreferredSize
|
||||
Layout.preferredHeight: buttonPreferredSize
|
||||
|
||||
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)
|
||||
pressedColor: JamiTheme.invertedPressedButtonColor
|
||||
hoveredColor: JamiTheme.invertedHoveredButtonColor
|
||||
normalColor: JamiTheme.invertedNormalButtonColor
|
||||
|
||||
buttonImageHeight: buttonPreferredSize
|
||||
buttonImageWidth: buttonPreferredSize
|
||||
baseImage: "qrc:/images/icons/ic_videocam_white.png"
|
||||
checkedImage: "qrc:/images/icons/ic_videocam_off_white_24dp.png"
|
||||
baseColor: "white"
|
||||
normalImageSource: "qrc:/images/icons/videocam-24px.svg"
|
||||
imageColor: JamiTheme.whiteColor
|
||||
|
||||
checkedImageSource: "qrc:/images/icons/videocam_off-24px.svg"
|
||||
checkedColor: JamiTheme.declineButtonPressedRed
|
||||
radius: 30
|
||||
|
||||
toolTipText: !checked ? JamiStrings.pause : JamiStrings.resume
|
||||
|
||||
onClicked: {
|
||||
CallAdapter.videoPauseThisCallToggle()
|
||||
}
|
||||
onClicked: CallAdapter.videoPauseThisCallToggle()
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: addToConferenceButton
|
||||
|
||||
Layout.preferredWidth: buttonPreferredSize * 2
|
||||
Layout.preferredHeight: buttonPreferredSize * 2
|
||||
Layout.preferredWidth: buttonPreferredSize
|
||||
Layout.preferredHeight: buttonPreferredSize
|
||||
visible: !isHost
|
||||
|
||||
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)
|
||||
pressedColor: JamiTheme.invertedPressedButtonColor
|
||||
hoveredColor: JamiTheme.invertedHoveredButtonColor
|
||||
normalColor: JamiTheme.invertedNormalButtonColor
|
||||
|
||||
buttonImageHeight: buttonPreferredSize
|
||||
buttonImageWidth: buttonPreferredSize
|
||||
color: "white"
|
||||
source: "qrc:/images/icons/ic_group_add_white_24dp.png"
|
||||
radius: 30
|
||||
source: "qrc:/images/icons/group_add-24px.svg"
|
||||
imageColor: JamiTheme.whiteColor
|
||||
|
||||
toolTipText: JamiStrings.addParticipants
|
||||
|
||||
onClicked: {
|
||||
root.addToConferenceButtonClicked()
|
||||
}
|
||||
onClicked: root.addToConferenceButtonClicked()
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: chatButton
|
||||
|
||||
Layout.preferredWidth: buttonPreferredSize * 2
|
||||
Layout.preferredHeight: buttonPreferredSize * 2
|
||||
Layout.preferredWidth: buttonPreferredSize
|
||||
Layout.preferredHeight: buttonPreferredSize
|
||||
|
||||
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)
|
||||
pressedColor: JamiTheme.invertedPressedButtonColor
|
||||
hoveredColor: JamiTheme.invertedHoveredButtonColor
|
||||
normalColor: JamiTheme.invertedNormalButtonColor
|
||||
|
||||
buttonImageHeight: buttonPreferredSize
|
||||
buttonImageWidth: buttonPreferredSize
|
||||
color: "white"
|
||||
source: "qrc:/images/icons/ic_chat_white_24dp.png"
|
||||
radius: 30
|
||||
source: "qrc:/images/icons/chat-24px.svg"
|
||||
imageColor: JamiTheme.whiteColor
|
||||
|
||||
toolTipText: JamiStrings.chat
|
||||
|
||||
onClicked: {
|
||||
root.chatButtonClicked()
|
||||
}
|
||||
onClicked: root.chatButtonClicked()
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: optionsButton
|
||||
|
||||
Layout.preferredWidth: buttonPreferredSize * 2
|
||||
Layout.preferredHeight: buttonPreferredSize * 2
|
||||
Layout.preferredWidth: buttonPreferredSize
|
||||
Layout.preferredHeight: buttonPreferredSize
|
||||
Layout.rightMargin: 8
|
||||
|
||||
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)
|
||||
pressedColor: JamiTheme.invertedPressedButtonColor
|
||||
hoveredColor: JamiTheme.invertedHoveredButtonColor
|
||||
normalColor: JamiTheme.invertedNormalButtonColor
|
||||
|
||||
buttonImageHeight: buttonPreferredSize
|
||||
buttonImageWidth: buttonPreferredSize
|
||||
source: "qrc:/images/icons/more_vert-24px.svg"
|
||||
radius: 30
|
||||
imageColor: JamiTheme.whiteColor
|
||||
|
||||
toolTipText: JamiStrings.moreOptions
|
||||
|
||||
|
|
@ -234,7 +205,5 @@ Rectangle {
|
|||
callViewContextMenu.openMenu()
|
||||
}
|
||||
}
|
||||
|
||||
Item { Layout.preferredWidth: 8 }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ Popup {
|
|||
|
||||
width: 250
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: closeButton
|
||||
|
||||
anchors.top: contactPickerPopupRect.top
|
||||
|
|
@ -56,11 +56,7 @@ Popup {
|
|||
anchors.right: contactPickerPopupRect.right
|
||||
anchors.rightMargin: 5
|
||||
|
||||
width: 30
|
||||
height: 30
|
||||
|
||||
radius: 30
|
||||
source: "qrc:/images/icons/ic_close_black_24dp.png"
|
||||
source: "qrc:/images/icons/round-close-24px.svg"
|
||||
|
||||
onClicked: {
|
||||
contactPickerPopup.close()
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ ItemDelegate {
|
|||
}
|
||||
|
||||
onReleased: {
|
||||
itemSmartListBackground.color = JamiTheme.releaseColor
|
||||
itemSmartListBackground.color = JamiTheme.normalButtonColor
|
||||
|
||||
ContactAdapter.contactSelected(index)
|
||||
contactPickerPopup.close()
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ ItemDelegate {
|
|||
} else {
|
||||
itemSmartListBackground.color = Qt.binding(function () {
|
||||
return InCall ? Qt.lighter(JamiTheme.selectionBlue,
|
||||
1.8) : JamiTheme.releaseColor
|
||||
1.8) : JamiTheme.normalButtonColor
|
||||
})
|
||||
ConversationsAdapter.selectConversation(
|
||||
AccountAdapter.currentAccountId, UID)
|
||||
|
|
@ -180,7 +180,7 @@ ItemDelegate {
|
|||
}
|
||||
onReleased: {
|
||||
if (!InCall) {
|
||||
itemSmartListBackground.color = JamiTheme.releaseColor
|
||||
itemSmartListBackground.color = JamiTheme.normalButtonColor
|
||||
}
|
||||
if (mouse.button === Qt.RightButton) {
|
||||
smartListContextMenu.parent = mouseAreaSmartListItemDelegate
|
||||
|
|
@ -220,7 +220,7 @@ ItemDelegate {
|
|||
} else {
|
||||
itemSmartListBackground.color = Qt.binding(function () {
|
||||
return InCall ? Qt.lighter(JamiTheme.selectionBlue,
|
||||
1.8) : JamiTheme.releaseColor
|
||||
1.8) : JamiTheme.normalButtonColor
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ Rectangle {
|
|||
|
||||
Layout.alignment: Qt.AlignLeft
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: callAnswerButton
|
||||
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
|
|
@ -100,20 +100,14 @@ Rectangle {
|
|||
Layout.preferredWidth: buttonPreferredSize
|
||||
Layout.preferredHeight: buttonPreferredSize
|
||||
|
||||
backgroundColor: JamiTheme.acceptButtonGreen
|
||||
onEnterColor: JamiTheme.acceptButtonHoverGreen
|
||||
onPressColor: JamiTheme.acceptButtonPressedGreen
|
||||
onReleaseColor: JamiTheme.acceptButtonHoverGreen
|
||||
onExitColor: JamiTheme.acceptButtonGreen
|
||||
pressedColor: JamiTheme.acceptButtonPressedGreen
|
||||
hoveredColor: JamiTheme.acceptButtonHoverGreen
|
||||
normalColor: JamiTheme.acceptButtonGreen
|
||||
|
||||
buttonImageHeight: buttonPreferredSize / 2
|
||||
buttonImageWidth: buttonPreferredSize / 2
|
||||
source: "qrc:/images/icons/ic_check_white_18dp_2x.png"
|
||||
radius: 32
|
||||
source: "qrc:/images/icons/check-24px.svg"
|
||||
imageColor: JamiTheme.whiteColor
|
||||
|
||||
onClicked: {
|
||||
callAcceptButtonIsClicked()
|
||||
}
|
||||
onClicked: callAcceptButtonIsClicked()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -122,7 +116,7 @@ Rectangle {
|
|||
|
||||
Layout.alignment: Qt.AlignRight
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: callDeclineButton
|
||||
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
|
|
@ -130,20 +124,16 @@ Rectangle {
|
|||
Layout.preferredWidth: buttonPreferredSize
|
||||
Layout.preferredHeight: buttonPreferredSize
|
||||
|
||||
backgroundColor: JamiTheme.declineButtonRed
|
||||
onEnterColor: JamiTheme.declineButtonHoverRed
|
||||
onPressColor: JamiTheme.declineButtonPressedRed
|
||||
onReleaseColor: JamiTheme.declineButtonHoverRed
|
||||
onExitColor: JamiTheme.declineButtonRed
|
||||
pressedColor: JamiTheme.declineButtonPressedRed
|
||||
hoveredColor: JamiTheme.declineButtonHoverRed
|
||||
normalColor: JamiTheme.declineButtonRed
|
||||
|
||||
buttonImageHeight: buttonPreferredSize / 2
|
||||
buttonImageWidth: buttonPreferredSize / 2
|
||||
source: "qrc:/images/icons/ic_close_white_24dp.png"
|
||||
radius: 32
|
||||
source: "qrc:/images/icons/round-close-24px.svg"
|
||||
imageColor: JamiTheme.whiteColor
|
||||
|
||||
onClicked: {
|
||||
callCancelButtonIsClicked()
|
||||
}
|
||||
toolTipText: JamiStrings.hangup
|
||||
|
||||
onClicked: callCancelButtonIsClicked()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ Popup {
|
|||
color: "white"
|
||||
radius: 10
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: closeButton
|
||||
|
||||
anchors.top: mediahandlerPickerPopupRect.top
|
||||
|
|
@ -55,10 +55,6 @@ Popup {
|
|||
anchors.right: mediahandlerPickerPopupRect.right
|
||||
anchors.rightMargin: 5
|
||||
|
||||
width: 30
|
||||
height: 30
|
||||
|
||||
radius: 30
|
||||
source: "qrc:/images/icons/round-close-24px.svg"
|
||||
|
||||
onClicked: {
|
||||
|
|
@ -136,17 +132,13 @@ Popup {
|
|||
color: "white"
|
||||
radius: 10
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: backButton
|
||||
anchors.top: mediahandlerPreferencePopupRect2.top
|
||||
anchors.topMargin: 5
|
||||
anchors.left: mediahandlerPreferencePopupRect2.left
|
||||
anchors.leftMargin: 5
|
||||
|
||||
width: 30
|
||||
height: 30
|
||||
|
||||
radius: 30
|
||||
source: "qrc:/images/icons/ic_arrow_back_24px.svg"
|
||||
toolTipText: qsTr("Go back to plugins list")
|
||||
hoverEnabled: true
|
||||
|
|
@ -155,7 +147,7 @@ Popup {
|
|||
}
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: closeButton2
|
||||
|
||||
anchors.top: mediahandlerPreferencePopupRect2.top
|
||||
|
|
@ -163,10 +155,6 @@ Popup {
|
|||
anchors.right: mediahandlerPreferencePopupRect2.right
|
||||
anchors.rightMargin: 5
|
||||
|
||||
width: 30
|
||||
height: 30
|
||||
|
||||
radius: 30
|
||||
source: "qrc:/images/icons/round-close-24px.svg"
|
||||
|
||||
onClicked: {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/*
|
||||
* Copyright (C) 2020 by Savoir-faire Linux
|
||||
* Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
|
||||
|
|
@ -16,6 +15,7 @@
|
|||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
|
@ -26,11 +26,10 @@ import "../../commoncomponents"
|
|||
Rectangle {
|
||||
id: messagingHeaderRect
|
||||
|
||||
property int buttonPreferredSize: 30
|
||||
property string userAliasLabelText: ""
|
||||
property string userUserNameLabelText: ""
|
||||
property string userAliasLabelText
|
||||
property string userUserNameLabelText
|
||||
property string backToWelcomeViewButtonSource: "qrc:/images/icons/ic_arrow_back_24px.svg"
|
||||
property bool sendContactRequestButtonVisible: true
|
||||
property alias sendContactRequestButtonVisible: sendContactRequestButton.visible
|
||||
|
||||
signal backClicked
|
||||
signal needToHideConversationInCall
|
||||
|
|
@ -49,18 +48,15 @@ Rectangle {
|
|||
|
||||
anchors.fill: parent
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: backToWelcomeViewButton
|
||||
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
Layout.leftMargin: 16
|
||||
Layout.preferredWidth: buttonPreferredSize
|
||||
Layout.preferredHeight: buttonPreferredSize
|
||||
|
||||
radius: 30
|
||||
source: backToWelcomeViewButtonSource
|
||||
backgroundColor: "white"
|
||||
onExitColor: "white"
|
||||
|
||||
normalColor: JamiTheme.primaryBackgroundColor
|
||||
|
||||
onClicked: {
|
||||
if (backToWelcomeViewButtonSource === "qrc:/images/icons/ic_arrow_back_24px.svg")
|
||||
|
|
@ -74,6 +70,7 @@ Rectangle {
|
|||
id: userNameOrIdRect
|
||||
|
||||
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
|
||||
|
||||
// Width + margin.
|
||||
Layout.preferredWidth: messagingHeaderRect.width
|
||||
- backToWelcomeViewButton.width - buttonGroup.width - 45
|
||||
|
|
@ -82,7 +79,7 @@ Rectangle {
|
|||
Layout.bottomMargin: 7
|
||||
Layout.leftMargin: 16
|
||||
|
||||
color: "transparent"
|
||||
color: JamiTheme.transparentColor
|
||||
|
||||
ColumnLayout {
|
||||
id: userNameOrIdColumnLayout
|
||||
|
|
@ -126,26 +123,22 @@ Rectangle {
|
|||
id: buttonGroup
|
||||
|
||||
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
|
||||
Layout.preferredWidth: buttonPreferredSize * 3 + 18
|
||||
Layout.preferredHeight: buttonPreferredSize
|
||||
Layout.preferredWidth: childrenRect.width + 18
|
||||
Layout.preferredHeight: childrenRect.height
|
||||
Layout.rightMargin: 16
|
||||
|
||||
color: "transparent"
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: startAAudioCallButton
|
||||
|
||||
anchors.right: startAVideoCallButton.left
|
||||
anchors.rightMargin: 16
|
||||
anchors.verticalCenter: buttonGroup.verticalCenter
|
||||
|
||||
height: buttonPreferredSize
|
||||
width: buttonPreferredSize
|
||||
|
||||
radius: 30
|
||||
source: "qrc:/images/icons/ic_phone_24px.svg"
|
||||
backgroundColor: "white"
|
||||
onExitColor: "white"
|
||||
|
||||
normalColor: JamiTheme.primaryBackgroundColor
|
||||
|
||||
onClicked: {
|
||||
MessagesAdapter.sendContactRequest()
|
||||
|
|
@ -154,20 +147,18 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: startAVideoCallButton
|
||||
|
||||
anchors.right: sendContactRequestButton.visible ? sendContactRequestButton.left : buttonGroup.right
|
||||
anchors.right: sendContactRequestButton.visible ?
|
||||
sendContactRequestButton.left :
|
||||
buttonGroup.right
|
||||
anchors.rightMargin: 16
|
||||
anchors.verticalCenter: buttonGroup.verticalCenter
|
||||
|
||||
height: buttonPreferredSize
|
||||
width: buttonPreferredSize
|
||||
|
||||
radius: 30
|
||||
source: "qrc:/images/icons/videocam-24px.svg"
|
||||
backgroundColor: "white"
|
||||
onExitColor: "white"
|
||||
|
||||
normalColor: JamiTheme.primaryBackgroundColor
|
||||
|
||||
onClicked: {
|
||||
MessagesAdapter.sendContactRequest()
|
||||
|
|
@ -176,33 +167,21 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: sendContactRequestButton
|
||||
|
||||
anchors.right: buttonGroup.right
|
||||
anchors.rightMargin: 8
|
||||
anchors.verticalCenter: buttonGroup.verticalCenter
|
||||
|
||||
height: buttonPreferredSize
|
||||
width: buttonPreferredSize
|
||||
|
||||
visible: sendContactRequestButtonVisible
|
||||
radius: 30
|
||||
width: sendContactRequestButton.visible ? preferredSize : 0
|
||||
source: "qrc:/images/icons/person_add-24px.svg"
|
||||
backgroundColor: "white"
|
||||
onExitColor: "white"
|
||||
|
||||
normalColor: JamiTheme.primaryBackgroundColor
|
||||
|
||||
onClicked: {
|
||||
MessagesAdapter.sendContactRequest()
|
||||
sendContactRequestButtonVisible = false
|
||||
}
|
||||
|
||||
onVisibleChanged: {
|
||||
if (sendContactRequestButton.visible) {
|
||||
sendContactRequestButton.width = buttonPreferredSize
|
||||
} else {
|
||||
sendContactRequestButton.width = 0
|
||||
}
|
||||
visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ Rectangle {
|
|||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
|
||||
text: UtilsAdapter.getCallStatusStr(callStatus) + "..."
|
||||
text: UtilsAdapter.getCallStatusStr(callStatus) + "…"
|
||||
color: Qt.lighter("white", 1.5)
|
||||
}
|
||||
|
||||
|
|
@ -91,7 +91,7 @@ Rectangle {
|
|||
Layout.alignment: Qt.AlignCenter
|
||||
Layout.bottomMargin: 48
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: callCancelButton
|
||||
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
|
|
@ -99,18 +99,14 @@ Rectangle {
|
|||
Layout.preferredWidth: buttonPreferredSize
|
||||
Layout.preferredHeight: buttonPreferredSize
|
||||
|
||||
backgroundColor: JamiTheme.declineButtonRed
|
||||
onEnterColor: JamiTheme.declineButtonHoverRed
|
||||
onPressColor: JamiTheme.declineButtonPressedRed
|
||||
onReleaseColor: JamiTheme.declineButtonHoverRed
|
||||
onExitColor: JamiTheme.declineButtonRed
|
||||
pressedColor: JamiTheme.declineButtonPressedRed
|
||||
hoveredColor: JamiTheme.declineButtonHoverRed
|
||||
normalColor: JamiTheme.declineButtonRed
|
||||
|
||||
buttonImageHeight: buttonPreferredSize / 2
|
||||
buttonImageWidth: buttonPreferredSize / 2
|
||||
source: "qrc:/images/icons/ic_close_white_24dp.png"
|
||||
radius: 30
|
||||
source: "qrc:/images/icons/round-close-24px.svg"
|
||||
imageColor: JamiTheme.whiteColor
|
||||
|
||||
toolTipText: qsTr("Cancel the call")
|
||||
toolTipText: JamiStrings.hangup
|
||||
|
||||
onClicked: {
|
||||
callCancelButtonIsClicked()
|
||||
|
|
|
|||
|
|
@ -254,17 +254,25 @@ Window {
|
|||
}
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
MaterialButton {
|
||||
id: selectButton
|
||||
|
||||
anchors.bottom: selectScreenWindowRect.bottom
|
||||
anchors.bottomMargin: JamiTheme.preferredMarginSize
|
||||
anchors.horizontalCenter: selectScreenWindowRect.horizontalCenter
|
||||
|
||||
width: 200
|
||||
height: 36
|
||||
|
||||
visible: selectedScreenNumber != -1
|
||||
|
||||
color: JamiTheme.buttonTintedBlack
|
||||
hoveredColor: JamiTheme.buttonTintedBlackHovered
|
||||
pressedColor: JamiTheme.buttonTintedBlackPressed
|
||||
outlined: true
|
||||
enabled: true
|
||||
|
||||
text: JamiStrings.shareScreen
|
||||
radius: 10
|
||||
|
||||
onClicked: {
|
||||
if (selectArea) {
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ Rectangle {
|
|||
hoverEnabled: true
|
||||
|
||||
onReleased: {
|
||||
searchStatusRect.color = JamiTheme.releaseColor
|
||||
searchStatusRect.color = JamiTheme.normalButtonColor
|
||||
}
|
||||
|
||||
onEntered: {
|
||||
|
|
|
|||
|
|
@ -56,21 +56,20 @@ Popup {
|
|||
model: ["1", "2", "3", "A", "4", "5", "6", "B", "7",
|
||||
"8", "9", "C", "*", "0", "#", "D"]
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: sipInputPanelButton
|
||||
|
||||
Layout.preferredWidth: 30
|
||||
Layout.preferredHeight: 30
|
||||
|
||||
radius: 30
|
||||
preferredMargin: 8
|
||||
buttonText: modelData
|
||||
buttonTextColor: "white"
|
||||
checkable: false
|
||||
backgroundColor: JamiTheme.sipInputButtonBackgroundColor
|
||||
onEnterColor: JamiTheme.sipInputButtonHoverColor
|
||||
onExitColor: JamiTheme.sipInputButtonBackgroundColor
|
||||
onPressColor: JamiTheme.sipInputButtonPressColor
|
||||
onReleaseColor: JamiTheme.sipInputButtonHoverColor
|
||||
|
||||
pressedColor: JamiTheme.sipInputButtonPressColor
|
||||
hoveredColor: JamiTheme.sipInputButtonHoverColor
|
||||
normalColor: JamiTheme.sipInputButtonBackgroundColor
|
||||
|
||||
toolTipText: modelData
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ Rectangle {
|
|||
|
||||
anchors.fill: parent
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: backButton
|
||||
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
|
|
@ -58,19 +58,17 @@ Rectangle {
|
|||
Layout.topMargin: JamiTheme.preferredMarginSize
|
||||
Layout.leftMargin: JamiTheme.preferredMarginSize
|
||||
|
||||
radius: 32
|
||||
source: "qrc:/images/icons/arrow_back-white-24dp.svg"
|
||||
backgroundColor: "transparent"
|
||||
onExitColor: "transparent"
|
||||
onEnterColor: JamiTheme.lightGrey_
|
||||
|
||||
pressedColor: JamiTheme.invertedPressedButtonColor
|
||||
hoveredColor: JamiTheme.invertedHoveredButtonColor
|
||||
normalColor: JamiTheme.invertedNormalButtonColor
|
||||
|
||||
toolTipText: qsTr("Toggle to display side panel")
|
||||
hoverEnabled: true
|
||||
|
||||
visible: mainViewWindow.sidePanelOnly
|
||||
|
||||
onClicked: {
|
||||
mainViewWindow.showWelcomeView()
|
||||
}
|
||||
onClicked: mainViewWindow.showWelcomeView()
|
||||
}
|
||||
|
||||
Image {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/*
|
||||
* Copyright (C) 2020 by Savoir-faire Linux
|
||||
* Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
|
||||
|
|
@ -27,7 +26,7 @@ import "../../commoncomponents"
|
|||
|
||||
Rectangle {
|
||||
id: welcomeRect
|
||||
property int buttonPreferredSize: 30
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
Rectangle {
|
||||
|
|
@ -103,7 +102,9 @@ Rectangle {
|
|||
|
||||
ColumnLayout {
|
||||
id: jamiRegisteredNameRectColumnLayout
|
||||
|
||||
spacing: 0
|
||||
|
||||
Text {
|
||||
id: jamiRegisteredNameText
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
|
|
@ -122,13 +123,14 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: copyRegisterednameButton
|
||||
|
||||
preferredSize: 34
|
||||
imagePadding: 4
|
||||
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
Layout.preferredWidth: buttonPreferredSize
|
||||
Layout.preferredHeight: buttonPreferredSize
|
||||
radius: 30
|
||||
source: "qrc:/images/icons/ic_content_copy.svg"
|
||||
source: "qrc:/images/icons/content_copy-24px.svg"
|
||||
onClicked: {
|
||||
UtilsAdapter.setText(
|
||||
textMetricsjamiRegisteredNameText.text)
|
||||
|
|
@ -155,9 +157,7 @@ Rectangle {
|
|||
color: "grey"
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
aboutPopUpDialog.open()
|
||||
}
|
||||
onClicked: aboutPopUpDialog.open()
|
||||
}
|
||||
|
||||
CustomBorder {
|
||||
|
|
|
|||
|
|
@ -68,20 +68,19 @@ ColumnLayout {
|
|||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
HoverableButtonTextItem {
|
||||
PushButton {
|
||||
Layout.preferredWidth: JamiTheme.preferredFieldHeight
|
||||
Layout.preferredHeight: JamiTheme.preferredFieldHeight
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
|
||||
radius: height / 2
|
||||
|
||||
toolTipText: JamiStrings.tipAdvancedSettingsDisplay
|
||||
|
||||
preferredSize: 32
|
||||
source: {
|
||||
if (advancedSettingsView.visible) {
|
||||
return "qrc:/images/icons/round-arrow_drop_up-24px.svg"
|
||||
return "qrc:/images/icons/expand_less-24px.svg"
|
||||
} else {
|
||||
return "qrc:/images/icons/round-arrow_drop_down-24px.svg"
|
||||
return "qrc:/images/icons/expand_more-24px.svg"
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -118,8 +118,8 @@ ColumnLayout {
|
|||
toolTipText: JamiStrings.tipBannedContacts
|
||||
|
||||
source: bannedListWidget.visible?
|
||||
"qrc:/images/icons/round-arrow_drop_up-24px.svg" :
|
||||
"qrc:/images/icons/round-arrow_drop_down-24px.svg"
|
||||
"qrc:/images/icons/expand_less-24px.svg" :
|
||||
"qrc:/images/icons//expand_more-24px.svg"
|
||||
|
||||
onClicked: toggleBannedContacts()
|
||||
}
|
||||
|
|
@ -150,4 +150,4 @@ ColumnLayout {
|
|||
onBtnReAddContactClicked: unban(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ ItemDelegate {
|
|||
}
|
||||
}
|
||||
|
||||
HoverableRadiusButton {
|
||||
PushButton {
|
||||
id: btnEditDevice
|
||||
|
||||
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
|
||||
|
|
@ -124,15 +124,6 @@ ItemDelegate {
|
|||
Layout.preferredWidth: JamiTheme.preferredFieldHeight
|
||||
Layout.preferredHeight: JamiTheme.preferredFieldHeight
|
||||
|
||||
buttonImageHeight: height - 8
|
||||
buttonImageWidth: width - 8
|
||||
|
||||
radius: height / 2
|
||||
width: 24
|
||||
height: 24
|
||||
|
||||
backgroundColor: "transparent"
|
||||
|
||||
source: {
|
||||
if(isCurrent) {
|
||||
var path = editable ?
|
||||
|
|
@ -144,8 +135,7 @@ ItemDelegate {
|
|||
}
|
||||
}
|
||||
|
||||
ToolTip.visible: hovered
|
||||
ToolTip.text: {
|
||||
toolTipText: {
|
||||
if(isCurrent) {
|
||||
if (editable) {
|
||||
return JamiStrings.editDeviceName
|
||||
|
|
|
|||
|
|
@ -33,12 +33,12 @@ Button {
|
|||
property alias imageSource: buttonPix.source
|
||||
property alias buttonText: buttonText.text
|
||||
|
||||
property string backgroundColor: JamiTheme.releaseColor
|
||||
property string onPressColor: JamiTheme.pressColor
|
||||
property string onReleaseColor: JamiTheme.releaseColor
|
||||
property string onEnterColor: JamiTheme.hoverColor
|
||||
property string backgroundColor: JamiTheme.normalButtonColor
|
||||
property string onPressColor: JamiTheme.pressedButtonColor
|
||||
property string onReleaseColor: JamiTheme.normalButtonColor
|
||||
property string onEnterColor: JamiTheme.hoveredButtonColor
|
||||
property string onExitColor: JamiTheme.transparentColor
|
||||
property string checkedColor: JamiTheme.releaseColor
|
||||
property string checkedColor: JamiTheme.normalButtonColor
|
||||
|
||||
signal checkedToggledForLeftPanel(var checked)
|
||||
signal checkedToggledForRightPanel(var checked)
|
||||
|
|
|
|||
|
|
@ -96,34 +96,14 @@ ColumnLayout {
|
|||
fontSize: JamiTheme.settingsFontSize
|
||||
}
|
||||
|
||||
HoverableButtonTextItem {
|
||||
id: downPushButton
|
||||
|
||||
Layout.preferredWidth: 24
|
||||
Layout.preferredHeight: 24
|
||||
|
||||
radius: height / 2
|
||||
|
||||
source: "qrc:/images/icons/round-arrow_drop_down-24px.svg"
|
||||
|
||||
onClicked: {
|
||||
decreaseCodecPriority()
|
||||
}
|
||||
PushButton {
|
||||
source: "qrc:/images/icons/arrow_drop_down-24px.svg"
|
||||
onClicked: decreaseCodecPriority()
|
||||
}
|
||||
|
||||
HoverableButtonTextItem {
|
||||
id: mediaUpPushButton
|
||||
|
||||
Layout.preferredWidth: 24
|
||||
Layout.preferredHeight: 24
|
||||
|
||||
radius: height / 2
|
||||
|
||||
source: "qrc:/images/icons/round-arrow_drop_up-24px.svg"
|
||||
|
||||
onClicked: {
|
||||
increaseCodecPriority()
|
||||
}
|
||||
PushButton {
|
||||
source: "qrc:/images/icons/arrow_drop_up-24px.svg"
|
||||
onClicked: increaseCodecPriority()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ RowLayout {
|
|||
property string title: ""
|
||||
signal backArrowClicked
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: backToSettingsMenuButton
|
||||
|
||||
Layout.preferredWidth: JamiTheme.preferredFieldHeight
|
||||
|
|
@ -40,8 +40,9 @@ RowLayout {
|
|||
|
||||
radius: JamiTheme.preferredFieldHeight
|
||||
source: "qrc:/images/icons/ic_arrow_back_24px.svg"
|
||||
backgroundColor: "white"
|
||||
onExitColor: "white"
|
||||
|
||||
normalColor: JamiTheme.primaryBackgroundColor
|
||||
|
||||
toolTipText: JamiStrings.back
|
||||
hoverEnabled: true
|
||||
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: backButton
|
||||
|
||||
anchors.left: parent.left
|
||||
|
|
@ -203,10 +203,7 @@ Rectangle {
|
|||
width: 35
|
||||
height: 35
|
||||
|
||||
radius: 30
|
||||
|
||||
backgroundColor: root.color
|
||||
onExitColor: root.color
|
||||
normalColor: root.color
|
||||
|
||||
source: "qrc:/images/icons/ic_arrow_back_24px.svg"
|
||||
toolTipText: JamiStrings.backToWelcome
|
||||
|
|
|
|||
|
|
@ -360,7 +360,7 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: backButton
|
||||
|
||||
anchors.left: parent.left
|
||||
|
|
@ -370,10 +370,7 @@ Rectangle {
|
|||
width: 35
|
||||
height: 35
|
||||
|
||||
radius: 30
|
||||
|
||||
backgroundColor: root.color
|
||||
onExitColor: root.color
|
||||
normalColor: root.color
|
||||
|
||||
source: "qrc:/images/icons/ic_arrow_back_24px.svg"
|
||||
toolTipText: JamiStrings.back
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: backButton
|
||||
|
||||
anchors.left: parent.left
|
||||
|
|
@ -172,10 +172,7 @@ Rectangle {
|
|||
width: 35
|
||||
height: 35
|
||||
|
||||
radius: 30
|
||||
|
||||
backgroundColor: root.color
|
||||
onExitColor: root.color
|
||||
normalColor: root.color
|
||||
|
||||
source: "qrc:/images/icons/ic_arrow_back_24px.svg"
|
||||
toolTipText: JamiStrings.backToWelcome
|
||||
|
|
|
|||
|
|
@ -1,145 +0,0 @@
|
|||
|
||||
/*
|
||||
* Copyright (C) 2020 by Savoir-faire Linux
|
||||
* Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
|
||||
*
|
||||
* This program is free software; you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation; either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.14
|
||||
import QtGraphicalEffects 1.15
|
||||
import net.jami.Models 1.0
|
||||
|
||||
|
||||
//
|
||||
// HoverableButton contains the following configurable properties:
|
||||
// 1. Color changes on different button state
|
||||
// 2. Radius control (rounded)
|
||||
// 3. Text content or image content
|
||||
// 4. Can use OnClicked slot to implement some click logic
|
||||
Button {
|
||||
id: hoverableButton
|
||||
property int fontPointSize: 9
|
||||
property string backgroundColor: JamiTheme.releaseColor
|
||||
property string backgroundColorDisabled : Qt.rgba(242/256, 242/256, 242/256, 0.8)
|
||||
|
||||
property string startColor :"#109ede"
|
||||
property string endColor : "#2b5084"
|
||||
|
||||
property string startColorPressed :"#043161"
|
||||
property string endColorPressed : "#00113f"
|
||||
|
||||
property string startColorHovered :"#2b4b7e"
|
||||
property string endColorHovered : "#001d4d"
|
||||
|
||||
property string onPressColor: JamiTheme.pressColor
|
||||
property string onReleaseColor: backgroundColor
|
||||
property string onEnterColor: JamiTheme.hoverColor
|
||||
property string onExitColor: backgroundColor
|
||||
property string textColor: "white"
|
||||
property string tooltipText: ""
|
||||
|
||||
property string toolTipText: ""
|
||||
|
||||
property alias radius: hoverableButtonBackground.radius
|
||||
|
||||
property bool isBeingPressed: false
|
||||
|
||||
radius: height / 2
|
||||
font.pointSize: fontPointSize
|
||||
font.kerning: true
|
||||
hoverEnabled: true
|
||||
|
||||
ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
|
||||
ToolTip.visible: hovered && (toolTipText.length > 0)
|
||||
ToolTip.text: toolTipText
|
||||
|
||||
contentItem: Text {
|
||||
text: hoverableButton.text
|
||||
font: hoverableButton.font
|
||||
opacity: enabled ? 1.0 : 0.3
|
||||
color: enabled? textColor : "grey"
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
id: hoverableButtonBackground
|
||||
color: backgroundColor
|
||||
|
||||
MouseArea {
|
||||
id: btnMouseArea
|
||||
anchors.fill: hoverableButtonBackground
|
||||
hoverEnabled: true
|
||||
onPressed: {
|
||||
hoverableButtonBackground.color = onPressColor
|
||||
isBeingPressed = true
|
||||
}
|
||||
onReleased: {
|
||||
hoverableButtonBackground.color = onReleaseColor
|
||||
isBeingPressed = false
|
||||
hoverableButton.clicked()
|
||||
}
|
||||
onEntered: {
|
||||
hoverableButtonBackground.color = onEnterColor
|
||||
}
|
||||
onExited: {
|
||||
hoverableButtonBackground.color = onExitColor
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
LinearGradient {
|
||||
id: backgroundGradient
|
||||
|
||||
source: hoverableButtonBackground
|
||||
anchors.fill: hoverableButtonBackground
|
||||
start: Qt.point(0, 0)
|
||||
end: Qt.point(width, 0)
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0.0; color: {
|
||||
if(!hoverableButton.enabled){
|
||||
return backgroundColorDisabled
|
||||
}
|
||||
|
||||
if(isBeingPressed){
|
||||
return startColorPressed
|
||||
} else {
|
||||
if(hoverableButton.hovered){
|
||||
return startColorHovered
|
||||
} else {
|
||||
return startColor
|
||||
}
|
||||
}
|
||||
} }
|
||||
|
||||
GradientStop { position: 1.0; color: {
|
||||
if(!hoverableButton.enabled){
|
||||
return backgroundColorDisabled
|
||||
}
|
||||
|
||||
if(isBeingPressed){
|
||||
return endColorPressed
|
||||
} else {
|
||||
if(hoverableButton.hovered){
|
||||
return endColorHovered
|
||||
} else {
|
||||
return endColor
|
||||
}
|
||||
}
|
||||
} }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -184,7 +184,7 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: backButton
|
||||
|
||||
anchors.left: parent.left
|
||||
|
|
@ -194,10 +194,7 @@ Rectangle {
|
|||
width: 35
|
||||
height: 35
|
||||
|
||||
radius: 30
|
||||
|
||||
backgroundColor: root.color
|
||||
onExitColor: root.color
|
||||
normalColor: root.color
|
||||
|
||||
source: "qrc:/images/icons/ic_arrow_back_24px.svg"
|
||||
toolTipText: qsTr("Back to welcome page")
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: backButton
|
||||
|
||||
anchors.left: parent.left
|
||||
|
|
@ -169,10 +169,7 @@ Rectangle {
|
|||
width: 35
|
||||
height: 35
|
||||
|
||||
radius: 30
|
||||
|
||||
backgroundColor: root.color
|
||||
onExitColor: root.color
|
||||
normalColor: root.color
|
||||
|
||||
source: "qrc:/images/icons/ic_arrow_back_24px.svg"
|
||||
toolTipText: qsTr("Back to welcome page")
|
||||
|
|
|
|||
|
|
@ -232,7 +232,7 @@ Rectangle {
|
|||
onHeightChanged: scrollToBottom()
|
||||
}
|
||||
|
||||
HoverableButton {
|
||||
PushButton {
|
||||
id: backButton
|
||||
|
||||
anchors.left: parent.left
|
||||
|
|
@ -251,10 +251,8 @@ Rectangle {
|
|||
height: 35
|
||||
|
||||
visible: UtilsAdapter.getAccountListSize()
|
||||
radius: 30
|
||||
|
||||
backgroundColor: root.color
|
||||
onExitColor: root.color
|
||||
normalColor: root.color
|
||||
|
||||
source: "qrc:/images/icons/ic_arrow_back_24px.svg"
|
||||
toolTipText: JamiStrings.back
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue