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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ + \ 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 @@ src/mainview/components/WelcomePage.qml src/mainview/components/MessageWebView.qml src/mainview/components/MessageWebViewHeader.qml - src/commoncomponents/HoverableButton.qml + src/commoncomponents/PushButton.qml src/mainview/components/AccountComboBox.qml src/mainview/components/ConversationSmartListView.qml src/commoncomponents/JamiFileDialog.qml @@ -122,7 +122,6 @@ src/mainview/js/contactpickercreation.js src/mainview/js/mediahandlerpickercreation.js src/mainview/components/ContactPickerItemDelegate.qml - src/wizardview/components/HoverableGradientButton.qml src/commoncomponents/AccountMigrationDialog.qml src/commoncomponents/MaterialButton.qml src/mainview/components/RecordBox.qml @@ -140,5 +139,6 @@ src/commoncomponents/BaseDialog.qml src/commoncomponents/ModalPopup.qml src/commoncomponents/SimpleMessageDialog.qml + src/commoncomponents/ResponsiveImage.qml diff --git a/resources.qrc b/resources.qrc index c2c868bff..51a1b2ec9 100644 --- a/resources.qrc +++ b/resources.qrc @@ -120,5 +120,19 @@ images/icons/arrow_back-white-24dp.svg images/icons/keyboard_voice-24px.svg images/icons/videocam-24px.svg + images/icons/qr_code-24px.svg + images/icons/content_copy-24px.svg + images/icons/videocam_off-24px.svg + images/icons/check-24px.svg + images/icons/mic_off-24px.svg + images/icons/mic-24px.svg + images/icons/group_add-24px.svg + images/icons/chat-24px.svg + images/icons/phone_paused-24px.svg + images/icons/pause-24px.svg + images/icons/arrow_drop_up-24px.svg + images/icons/arrow_drop_down-24px.svg + images/icons/expand_less-24px.svg + images/icons/expand_more-24px.svg 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 - * - * 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 . - */ -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: "" + buttonText + "" - - 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 + * Author: Andreas Tracyk + * + * 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 . + */ + +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 + * + * 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 . + */ + +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 + * Author: Andreas Traczyk * * 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 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 @@ -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 @@ -17,6 +16,7 @@ * You should have received a copy of the GNU General Public License * along with this program. If not, see . */ + 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 } } } 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 @@ -16,6 +15,7 @@ * You should have received a copy of the GNU General Public License * along with this program. If not, see . */ + 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 @@ -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 - * - * 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 . - */ -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