Skip to content
Snippets Groups Projects
Commit 5d8256fb authored by Andreas Traczyk's avatar Andreas Traczyk
Browse files

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
parent 54093e5c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 34 additions and 131 deletions
images/icons/arrow_drop_down-24px.svg 0 → 100644
+ 1
− 0
View file @ 5d8256fb
<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
images/icons/arrow_drop_up-24px.svg 0 → 100644
+ 1
− 0
View file @ 5d8256fb
<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
images/icons/chat-24px.svg 0 → 100644
+ 1
− 0
View file @ 5d8256fb
<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
images/icons/check-24px.svg 0 → 100644
+ 1
− 0
View file @ 5d8256fb
<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
images/icons/content_copy-24px.svg 0 → 100644
+ 1
− 0
View file @ 5d8256fb
<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
images/icons/expand_less-24px.svg 0 → 100644
+ 1
− 0
View file @ 5d8256fb
<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
images/icons/expand_more-24px.svg 0 → 100644
+ 1
− 0
View file @ 5d8256fb
<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
images/icons/group_add-24px.svg 0 → 100644
+ 1
− 0
View file @ 5d8256fb
<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
images/icons/mic-24px.svg 0 → 100644
+ 1
− 0
View file @ 5d8256fb
<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
images/icons/mic_off-24px.svg 0 → 100644
+ 1
− 0
View file @ 5d8256fb
<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
images/icons/pause-24px.svg 0 → 100644
+ 1
− 0
View file @ 5d8256fb
<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
images/icons/phone_paused-24px.svg 0 → 100644
+ 1
− 0
View file @ 5d8256fb
<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
images/icons/qr_code-24px.svg 0 → 100644
+ 1
− 0
View file @ 5d8256fb
<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
images/icons/videocam_off-24px.svg 0 → 100644
+ 1
− 0
View file @ 5d8256fb
<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
qml.qrc
+ 2
− 2
View file @ 5d8256fb
......@@ -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>
resources.qrc
+ 14
− 0
View file @ 5d8256fb
......@@ -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>
src/commoncomponents/GeneralMenuItem.qml
+ 2
− 2
View file @ 5d8256fb
......@@ -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: {
......
src/commoncomponents/HoverableButton.qml deleted 100644 → 0
+ 0
− 125
View file @ 54093e5c
/*
* 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
}
}
}
}
src/commoncomponents/HoverableButtonTextItem.qml
+ 1
− 1
View file @ 5d8256fb
......@@ -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
......
src/commoncomponents/HoverableRadiusButton.qml
+ 1
− 1
View file @ 5d8256fb
......@@ -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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment