From 5d8256fb9b81856705c44b3d2371cdbb7abfb3c8 Mon Sep 17 00:00:00 2001
From: Andreas Traczyk <andreas.traczyk@savoirfairelinux.com>
Date: Mon, 28 Sep 2020 18:59:40 -0400
Subject: [PATCH] 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
---
images/icons/arrow_drop_down-24px.svg | 1 +
images/icons/arrow_drop_up-24px.svg | 1 +
images/icons/chat-24px.svg | 1 +
images/icons/check-24px.svg | 1 +
images/icons/content_copy-24px.svg | 1 +
images/icons/expand_less-24px.svg | 1 +
images/icons/expand_more-24px.svg | 1 +
images/icons/group_add-24px.svg | 1 +
images/icons/mic-24px.svg | 1 +
images/icons/mic_off-24px.svg | 1 +
images/icons/pause-24px.svg | 1 +
images/icons/phone_paused-24px.svg | 1 +
images/icons/qr_code-24px.svg | 1 +
images/icons/videocam_off-24px.svg | 1 +
qml.qrc | 4 +-
resources.qrc | 14 ++
src/commoncomponents/GeneralMenuItem.qml | 4 +-
src/commoncomponents/HoverableButton.qml | 125 -------------
.../HoverableButtonTextItem.qml | 2 +-
.../HoverableRadiusButton.qml | 2 +-
src/commoncomponents/ListViewJami.qml | 2 +-
src/commoncomponents/MaterialButton.qml | 18 ++
src/commoncomponents/PhotoboothView.qml | 6 +-
src/commoncomponents/PushButton.qml | 171 ++++++++++++++++++
src/commoncomponents/ResponsiveImage.qml | 64 +++++++
src/constant/JamiTheme.qml | 21 ++-
src/mainview/components/AccountComboBox.qml | 149 +++++----------
.../components/AccountComboBoxPopup.qml | 4 +-
.../components/CallAdvancedOptions.qml | 7 +-
src/mainview/components/CallOverlay.qml | 23 +--
.../components/CallOverlayButtonGroup.qml | 165 +++++++----------
src/mainview/components/ContactPicker.qml | 8 +-
.../components/ContactPickerItemDelegate.qml | 2 +-
.../ConversationSmartListViewItemDelegate.qml | 6 +-
src/mainview/components/IncomingCallPage.qml | 42 ++---
.../components/MediaHandlerPicker.qml | 18 +-
.../components/MessageWebViewHeader.qml | 71 +++-----
src/mainview/components/OutgoingCallPage.qml | 20 +-
src/mainview/components/SelectScreen.qml | 12 +-
src/mainview/components/SidePanel.qml | 2 +-
src/mainview/components/SipInputPanel.qml | 13 +-
src/mainview/components/UserInfoCallPage.qml | 16 +-
src/mainview/components/WelcomePage.qml | 20 +-
.../components/AdvancedSettings.qml | 9 +-
.../components/BannedContacts.qml | 6 +-
.../components/DeviceItemDelegate.qml | 14 +-
src/settingsview/components/IconButton.qml | 10 +-
src/settingsview/components/MediaSettings.qml | 32 +---
.../components/SettingsHeader.qml | 7 +-
.../ConnectToAccountManagerPage.qml | 7 +-
.../components/CreateAccountPage.qml | 7 +-
.../components/CreateSIPAccountPage.qml | 7 +-
.../components/HoverableGradientButton.qml | 145 ---------------
.../components/ImportFromBackupPage.qml | 7 +-
.../components/ImportFromDevicePage.qml | 7 +-
src/wizardview/components/WelcomePage.qml | 6 +-
56 files changed, 561 insertions(+), 728 deletions(-)
create mode 100644 images/icons/arrow_drop_down-24px.svg
create mode 100644 images/icons/arrow_drop_up-24px.svg
create mode 100644 images/icons/chat-24px.svg
create mode 100644 images/icons/check-24px.svg
create mode 100644 images/icons/content_copy-24px.svg
create mode 100644 images/icons/expand_less-24px.svg
create mode 100644 images/icons/expand_more-24px.svg
create mode 100644 images/icons/group_add-24px.svg
create mode 100644 images/icons/mic-24px.svg
create mode 100644 images/icons/mic_off-24px.svg
create mode 100644 images/icons/pause-24px.svg
create mode 100644 images/icons/phone_paused-24px.svg
create mode 100644 images/icons/qr_code-24px.svg
create mode 100644 images/icons/videocam_off-24px.svg
delete mode 100644 src/commoncomponents/HoverableButton.qml
create mode 100644 src/commoncomponents/PushButton.qml
create mode 100644 src/commoncomponents/ResponsiveImage.qml
delete mode 100644 src/wizardview/components/HoverableGradientButton.qml
diff --git a/images/icons/arrow_drop_down-24px.svg b/images/icons/arrow_drop_down-24px.svg
new file mode 100644
index 000000000..e8b16b340
--- /dev/null
+++ b/images/icons/arrow_drop_down-24px.svg
@@ -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>
\ No newline at end of file
diff --git a/images/icons/arrow_drop_up-24px.svg b/images/icons/arrow_drop_up-24px.svg
new file mode 100644
index 000000000..d2c6f0b9f
--- /dev/null
+++ b/images/icons/arrow_drop_up-24px.svg
@@ -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>
\ No newline at end of file
diff --git a/images/icons/chat-24px.svg b/images/icons/chat-24px.svg
new file mode 100644
index 000000000..4ce311b89
--- /dev/null
+++ b/images/icons/chat-24px.svg
@@ -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>
\ No newline at end of file
diff --git a/images/icons/check-24px.svg b/images/icons/check-24px.svg
new file mode 100644
index 000000000..522695ef3
--- /dev/null
+++ b/images/icons/check-24px.svg
@@ -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>
\ No newline at end of file
diff --git a/images/icons/content_copy-24px.svg b/images/icons/content_copy-24px.svg
new file mode 100644
index 000000000..844a4f99e
--- /dev/null
+++ b/images/icons/content_copy-24px.svg
@@ -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>
\ No newline at end of file
diff --git a/images/icons/expand_less-24px.svg b/images/icons/expand_less-24px.svg
new file mode 100644
index 000000000..2d2595701
--- /dev/null
+++ b/images/icons/expand_less-24px.svg
@@ -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>
\ No newline at end of file
diff --git a/images/icons/expand_more-24px.svg b/images/icons/expand_more-24px.svg
new file mode 100644
index 000000000..c55bd7ff5
--- /dev/null
+++ b/images/icons/expand_more-24px.svg
@@ -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>
\ No newline at end of file
diff --git a/images/icons/group_add-24px.svg b/images/icons/group_add-24px.svg
new file mode 100644
index 000000000..2ac152b09
--- /dev/null
+++ b/images/icons/group_add-24px.svg
@@ -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>
\ No newline at end of file
diff --git a/images/icons/mic-24px.svg b/images/icons/mic-24px.svg
new file mode 100644
index 000000000..56e1a13b4
--- /dev/null
+++ b/images/icons/mic-24px.svg
@@ -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>
\ No newline at end of file
diff --git a/images/icons/mic_off-24px.svg b/images/icons/mic_off-24px.svg
new file mode 100644
index 000000000..2d7e121d6
--- /dev/null
+++ b/images/icons/mic_off-24px.svg
@@ -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>
\ No newline at end of file
diff --git a/images/icons/pause-24px.svg b/images/icons/pause-24px.svg
new file mode 100644
index 000000000..63a1c461e
--- /dev/null
+++ b/images/icons/pause-24px.svg
@@ -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>
\ No newline at end of file
diff --git a/images/icons/phone_paused-24px.svg b/images/icons/phone_paused-24px.svg
new file mode 100644
index 000000000..d8cb108e9
--- /dev/null
+++ b/images/icons/phone_paused-24px.svg
@@ -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>
\ No newline at end of file
diff --git a/images/icons/qr_code-24px.svg b/images/icons/qr_code-24px.svg
new file mode 100644
index 000000000..c0c158359
--- /dev/null
+++ b/images/icons/qr_code-24px.svg
@@ -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>
\ No newline at end of file
diff --git a/images/icons/videocam_off-24px.svg b/images/icons/videocam_off-24px.svg
new file mode 100644
index 000000000..f5fcd7c81
--- /dev/null
+++ b/images/icons/videocam_off-24px.svg
@@ -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>
\ No newline at end of file
diff --git a/qml.qrc b/qml.qrc
index 0028cdd75..5773ee215 100644
--- a/qml.qrc
+++ b/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>
diff --git a/resources.qrc b/resources.qrc
index c2c868bff..51a1b2ec9 100644
--- a/resources.qrc
+++ b/resources.qrc
@@ -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>
diff --git a/src/commoncomponents/GeneralMenuItem.qml b/src/commoncomponents/GeneralMenuItem.qml
index cda67b8a4..1db75484b 100644
--- a/src/commoncomponents/GeneralMenuItem.qml
+++ b/src/commoncomponents/GeneralMenuItem.qml
@@ -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: {
diff --git a/src/commoncomponents/HoverableButton.qml b/src/commoncomponents/HoverableButton.qml
deleted file mode 100644
index a3056bb14..000000000
--- a/src/commoncomponents/HoverableButton.qml
+++ /dev/null
@@ -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
- }
- }
- }
-}
diff --git a/src/commoncomponents/HoverableButtonTextItem.qml b/src/commoncomponents/HoverableButtonTextItem.qml
index a788cbba3..3ab423673 100644
--- a/src/commoncomponents/HoverableButtonTextItem.qml
+++ b/src/commoncomponents/HoverableButtonTextItem.qml
@@ -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
diff --git a/src/commoncomponents/HoverableRadiusButton.qml b/src/commoncomponents/HoverableRadiusButton.qml
index d59cc21c4..2f69b88ef 100644
--- a/src/commoncomponents/HoverableRadiusButton.qml
+++ b/src/commoncomponents/HoverableRadiusButton.qml
@@ -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
diff --git a/src/commoncomponents/ListViewJami.qml b/src/commoncomponents/ListViewJami.qml
index c20cc8c3e..e92ca6529 100644
--- a/src/commoncomponents/ListViewJami.qml
+++ b/src/commoncomponents/ListViewJami.qml
@@ -35,7 +35,7 @@ Rectangle{
border.width: 1
border.color: JamiTheme.hoverColor
- color: JamiTheme.releaseColor
+ color: JamiTheme.normalButtonColor
ListView{
id: listView
diff --git a/src/commoncomponents/MaterialButton.qml b/src/commoncomponents/MaterialButton.qml
index d0ffd3f6b..f6654776c 100644
--- a/src/commoncomponents/MaterialButton.qml
+++ b/src/commoncomponents/MaterialButton.qml
@@ -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
diff --git a/src/commoncomponents/PhotoboothView.qml b/src/commoncomponents/PhotoboothView.qml
index 78d578634..0bff080a1 100644
--- a/src/commoncomponents/PhotoboothView.qml
+++ b/src/commoncomponents/PhotoboothView.qml
@@ -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
diff --git a/src/commoncomponents/PushButton.qml b/src/commoncomponents/PushButton.qml
new file mode 100644
index 000000000..821ce1dd3
--- /dev/null
+++ b/src/commoncomponents/PushButton.qml
@@ -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
+ }
+ }
+}
diff --git a/src/commoncomponents/ResponsiveImage.qml b/src/commoncomponents/ResponsiveImage.qml
new file mode 100644
index 000000000..26fcb7954
--- /dev/null
+++ b/src/commoncomponents/ResponsiveImage.qml
@@ -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()
+}
diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml
index ec7c48752..4614a8881 100644
--- a/src/constant/JamiTheme.qml
+++ b/src/constant/JamiTheme.qml
@@ -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
}
diff --git a/src/mainview/components/AccountComboBox.qml b/src/mainview/components/AccountComboBox.qml
index b3e1c7f18..9882ecc26 100644
--- a/src/mainview/components/AccountComboBox.qml
+++ b/src/mainview/components/AccountComboBox.qml
@@ -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,63 +162,58 @@ 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()
- } else {
- rootItemBackground.color = JamiTheme.pressColor
- }
- }
- onReleased: {
- if (isMouseOnButton(mouse, qrCodeGenerateButton)) {
- qrCodeGenerateButton.backgroundColor = JamiTheme.releaseColor
- } else if (isMouseOnButton(mouse, settingsButton)) {
- settingsButton.backgroundColor = JamiTheme.releaseColor
+ onClicked: {
+ if (comboBoxPopup.opened) {
+ root.popup.close()
} else {
- rootItemBackground.color = JamiTheme.releaseColor
- if (comboBoxPopup.opened) {
- root.popup.close()
- } else {
- root.popup.open()
- }
+ root.popup.open()
}
}
- onEntered: {
- rootItemBackground.color = JamiTheme.hoverColor
- }
- onExited: {
- rootItemBackground.color = JamiTheme.backgroundColor
- }
- onMouseXChanged: {
+ onEntered: rootItemBackground.color = Qt.lighter(JamiTheme.hoverColor, 1.05)
+ onExited: rootItemBackground.color = JamiTheme.backgroundColor
+ }
- // Manually making button hover.
- qrCodeGenerateButton.backgroundColor = (isMouseOnButton(mouse, qrCodeGenerateButton)) ?
- JamiTheme.hoverColor : "white"
+ PushButton {
+ id: qrCodeGenerateButton
- settingsButton.backgroundColor = (isMouseOnButton(mouse, settingsButton)) ?
- JamiTheme.hoverColor : "white"
+ 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()
}
+ }
+
+ 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
- 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
+ onClicked: {
+ settingBtnClicked()
+ rootItemBackground.color = JamiTheme.backgroundColor
}
}
diff --git a/src/mainview/components/AccountComboBoxPopup.qml b/src/mainview/components/AccountComboBoxPopup.qml
index c20edfbe9..877eceb6a 100644
--- a/src/mainview/components/AccountComboBoxPopup.qml
+++ b/src/mainview/components/AccountComboBoxPopup.qml
@@ -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") + "+"
diff --git a/src/mainview/components/CallAdvancedOptions.qml b/src/mainview/components/CallAdvancedOptions.qml
index 92d5f093c..468bdb0dc 100644
--- a/src/mainview/components/CallAdvancedOptions.qml
+++ b/src/mainview/components/CallAdvancedOptions.qml
@@ -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: {
diff --git a/src/mainview/components/CallOverlay.qml b/src/mainview/components/CallOverlay.qml
index a29e0d2ec..98bcf6088 100644
--- a/src/mainview/components/CallOverlay.qml
+++ b/src/mainview/components/CallOverlay.qml
@@ -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 {
diff --git a/src/mainview/components/CallOverlayButtonGroup.qml b/src/mainview/components/CallOverlayButtonGroup.qml
index 7ac4fc986..cc4b2308a 100644
--- a/src/mainview/components/CallOverlayButtonGroup.qml
+++ b/src/mainview/components/CallOverlayButtonGroup.qml
@@ -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
+
+ pressedColor: JamiTheme.invertedPressedButtonColor
+ hoveredColor: JamiTheme.invertedHoveredButtonColor
+ normalColor: JamiTheme.invertedNormalButtonColor
- 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)
+ normalImageSource: "qrc:/images/icons/videocam-24px.svg"
+ imageColor: JamiTheme.whiteColor
- buttonImageHeight: buttonPreferredSize
- buttonImageWidth: buttonPreferredSize
- baseImage: "qrc:/images/icons/ic_videocam_white.png"
- checkedImage: "qrc:/images/icons/ic_videocam_off_white_24dp.png"
- baseColor: "white"
+ 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 }
}
}
diff --git a/src/mainview/components/ContactPicker.qml b/src/mainview/components/ContactPicker.qml
index d3e15d04a..8b793d7ab 100644
--- a/src/mainview/components/ContactPicker.qml
+++ b/src/mainview/components/ContactPicker.qml
@@ -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()
diff --git a/src/mainview/components/ContactPickerItemDelegate.qml b/src/mainview/components/ContactPickerItemDelegate.qml
index 0f2f65680..81ad03cf1 100644
--- a/src/mainview/components/ContactPickerItemDelegate.qml
+++ b/src/mainview/components/ContactPickerItemDelegate.qml
@@ -118,7 +118,7 @@ ItemDelegate {
}
onReleased: {
- itemSmartListBackground.color = JamiTheme.releaseColor
+ itemSmartListBackground.color = JamiTheme.normalButtonColor
ContactAdapter.contactSelected(index)
contactPickerPopup.close()
diff --git a/src/mainview/components/ConversationSmartListViewItemDelegate.qml b/src/mainview/components/ConversationSmartListViewItemDelegate.qml
index 09cbaffbc..bf25a2bf7 100644
--- a/src/mainview/components/ConversationSmartListViewItemDelegate.qml
+++ b/src/mainview/components/ConversationSmartListViewItemDelegate.qml
@@ -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
})
}
}
diff --git a/src/mainview/components/IncomingCallPage.qml b/src/mainview/components/IncomingCallPage.qml
index f7afd3644..849bcff59 100644
--- a/src/mainview/components/IncomingCallPage.qml
+++ b/src/mainview/components/IncomingCallPage.qml
@@ -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()
}
}
}
diff --git a/src/mainview/components/MediaHandlerPicker.qml b/src/mainview/components/MediaHandlerPicker.qml
index b8c9cda4d..53d921ec8 100644
--- a/src/mainview/components/MediaHandlerPicker.qml
+++ b/src/mainview/components/MediaHandlerPicker.qml
@@ -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: {
diff --git a/src/mainview/components/MessageWebViewHeader.qml b/src/mainview/components/MessageWebViewHeader.qml
index 68e978dc2..5a6b5d30b 100644
--- a/src/mainview/components/MessageWebViewHeader.qml
+++ b/src/mainview/components/MessageWebViewHeader.qml
@@ -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
}
}
}
diff --git a/src/mainview/components/OutgoingCallPage.qml b/src/mainview/components/OutgoingCallPage.qml
index 59b38589a..185b4f5ab 100644
--- a/src/mainview/components/OutgoingCallPage.qml
+++ b/src/mainview/components/OutgoingCallPage.qml
@@ -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()
diff --git a/src/mainview/components/SelectScreen.qml b/src/mainview/components/SelectScreen.qml
index 018f84cdf..4a471d071 100644
--- a/src/mainview/components/SelectScreen.qml
+++ b/src/mainview/components/SelectScreen.qml
@@ -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) {
diff --git a/src/mainview/components/SidePanel.qml b/src/mainview/components/SidePanel.qml
index 04646ea66..c36f54562 100644
--- a/src/mainview/components/SidePanel.qml
+++ b/src/mainview/components/SidePanel.qml
@@ -153,7 +153,7 @@ Rectangle {
hoverEnabled: true
onReleased: {
- searchStatusRect.color = JamiTheme.releaseColor
+ searchStatusRect.color = JamiTheme.normalButtonColor
}
onEntered: {
diff --git a/src/mainview/components/SipInputPanel.qml b/src/mainview/components/SipInputPanel.qml
index efb0cd52f..f0be26d56 100644
--- a/src/mainview/components/SipInputPanel.qml
+++ b/src/mainview/components/SipInputPanel.qml
@@ -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
diff --git a/src/mainview/components/UserInfoCallPage.qml b/src/mainview/components/UserInfoCallPage.qml
index 0b79b353f..b6826be0b 100644
--- a/src/mainview/components/UserInfoCallPage.qml
+++ b/src/mainview/components/UserInfoCallPage.qml
@@ -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 {
diff --git a/src/mainview/components/WelcomePage.qml b/src/mainview/components/WelcomePage.qml
index e012efb76..ab265180d 100644
--- a/src/mainview/components/WelcomePage.qml
+++ b/src/mainview/components/WelcomePage.qml
@@ -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 {
diff --git a/src/settingsview/components/AdvancedSettings.qml b/src/settingsview/components/AdvancedSettings.qml
index 6d8a0cca3..8d2dc1f52 100644
--- a/src/settingsview/components/AdvancedSettings.qml
+++ b/src/settingsview/components/AdvancedSettings.qml
@@ -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"
}
}
diff --git a/src/settingsview/components/BannedContacts.qml b/src/settingsview/components/BannedContacts.qml
index 6218291ee..67e468317 100644
--- a/src/settingsview/components/BannedContacts.qml
+++ b/src/settingsview/components/BannedContacts.qml
@@ -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)
}
}
-}
\ No newline at end of file
+}
diff --git a/src/settingsview/components/DeviceItemDelegate.qml b/src/settingsview/components/DeviceItemDelegate.qml
index 72b2d0a63..a651ef434 100644
--- a/src/settingsview/components/DeviceItemDelegate.qml
+++ b/src/settingsview/components/DeviceItemDelegate.qml
@@ -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
diff --git a/src/settingsview/components/IconButton.qml b/src/settingsview/components/IconButton.qml
index 5e40da679..5d5be18b0 100644
--- a/src/settingsview/components/IconButton.qml
+++ b/src/settingsview/components/IconButton.qml
@@ -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)
diff --git a/src/settingsview/components/MediaSettings.qml b/src/settingsview/components/MediaSettings.qml
index 75446fb8e..8df44349b 100644
--- a/src/settingsview/components/MediaSettings.qml
+++ b/src/settingsview/components/MediaSettings.qml
@@ -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()
}
}
diff --git a/src/settingsview/components/SettingsHeader.qml b/src/settingsview/components/SettingsHeader.qml
index 9d9c93d34..ec6567617 100644
--- a/src/settingsview/components/SettingsHeader.qml
+++ b/src/settingsview/components/SettingsHeader.qml
@@ -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
diff --git a/src/wizardview/components/ConnectToAccountManagerPage.qml b/src/wizardview/components/ConnectToAccountManagerPage.qml
index 3d7e3fc62..3eea4cab1 100644
--- a/src/wizardview/components/ConnectToAccountManagerPage.qml
+++ b/src/wizardview/components/ConnectToAccountManagerPage.qml
@@ -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
diff --git a/src/wizardview/components/CreateAccountPage.qml b/src/wizardview/components/CreateAccountPage.qml
index 49c3ca6aa..c3d95bd78 100644
--- a/src/wizardview/components/CreateAccountPage.qml
+++ b/src/wizardview/components/CreateAccountPage.qml
@@ -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
diff --git a/src/wizardview/components/CreateSIPAccountPage.qml b/src/wizardview/components/CreateSIPAccountPage.qml
index 1ee25d958..54036f77d 100644
--- a/src/wizardview/components/CreateSIPAccountPage.qml
+++ b/src/wizardview/components/CreateSIPAccountPage.qml
@@ -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
diff --git a/src/wizardview/components/HoverableGradientButton.qml b/src/wizardview/components/HoverableGradientButton.qml
deleted file mode 100644
index c602f52f0..000000000
--- a/src/wizardview/components/HoverableGradientButton.qml
+++ /dev/null
@@ -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
- }
- }
- } }
- }
- }
-}
diff --git a/src/wizardview/components/ImportFromBackupPage.qml b/src/wizardview/components/ImportFromBackupPage.qml
index 2edc0303d..12fa667a5 100644
--- a/src/wizardview/components/ImportFromBackupPage.qml
+++ b/src/wizardview/components/ImportFromBackupPage.qml
@@ -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")
diff --git a/src/wizardview/components/ImportFromDevicePage.qml b/src/wizardview/components/ImportFromDevicePage.qml
index afcddc2b5..145da991e 100644
--- a/src/wizardview/components/ImportFromDevicePage.qml
+++ b/src/wizardview/components/ImportFromDevicePage.qml
@@ -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")
diff --git a/src/wizardview/components/WelcomePage.qml b/src/wizardview/components/WelcomePage.qml
index 1debe547a..63e04fdbd 100644
--- a/src/wizardview/components/WelcomePage.qml
+++ b/src/wizardview/components/WelcomePage.qml
@@ -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
--
GitLab