mirror of
https://gitlab.linphone.org/BC/public/linphone-desktop.git
synced 2026-01-18 20:08:11 +00:00
342 lines
15 KiB
QML
342 lines
15 KiB
QML
import QtQuick 2.7
|
|
import QtQuick.Controls 2.2
|
|
import QtQuick.Layouts 1.3
|
|
import QtGraphicalEffects 1.12
|
|
|
|
import Common 1.0
|
|
|
|
// =============================================================================
|
|
// An animated (or not) button with image(s).
|
|
// =============================================================================
|
|
|
|
Item {
|
|
id: wrappedButton
|
|
property color defaultBackgroundColor: 'white'
|
|
property color defaultForegroundColor: 'black'
|
|
|
|
// ---------------------------------------------------------------------------
|
|
readonly property QtObject defaultColorSet : QtObject {
|
|
property int iconSize: 30
|
|
property string icon : ''
|
|
property color backgroundNormalColor : defaultBackgroundColor
|
|
property color backgroundDisabledColor : defaultBackgroundColor
|
|
property color backgroundHoveredColor : defaultBackgroundColor
|
|
property color backgroundUpdatingColor : defaultBackgroundColor
|
|
property color backgroundPressedColor : defaultBackgroundColor
|
|
// Color for shown part
|
|
property color foregroundNormalColor : defaultForegroundColor
|
|
property color foregroundDisabledColor : defaultForegroundColor
|
|
property color foregroundHoveredColor : defaultForegroundColor
|
|
property color foregroundUpdatingColor : defaultForegroundColor
|
|
property color foregroundPressedColor : defaultForegroundColor
|
|
}
|
|
property QtObject colorSet: defaultColorSet
|
|
onColorSetChanged: if(!colorSet) colorSet = defaultColorSet
|
|
property bool isCustom : false
|
|
property bool iconIsCustom: isCustom
|
|
property bool enabled: true
|
|
property bool updating: false
|
|
property bool useStates: true
|
|
property bool toggled: false
|
|
//property bool autoIcon : false // hovered/pressed : use an automatic layer instead of specific icon image
|
|
property int iconSize : colorSet ? colorSet.iconSize : 0
|
|
property int iconHeight: colorSet.iconHeight ? colorSet.iconHeight : 0
|
|
property int iconWidth: colorSet.iconWidth ? colorSet.iconWidth : 0
|
|
readonly property alias hovered: button.hovered
|
|
property alias text: button.text
|
|
property alias longPressedTimeout: longPressedTimeout.interval // default: 500ms
|
|
|
|
// Tooltip aliases
|
|
property alias tooltipText : tooltip.text
|
|
property alias tooltipIsClickable : tooltip.isClickable
|
|
property alias tooltipMaxWidth: tooltip.maxWidth
|
|
property alias tooltipVisible: tooltip.visible
|
|
// Custom mode
|
|
|
|
property alias backgroundRadius : backgroundColor.radius
|
|
|
|
property alias horizontalAlignment: icon.horizontalAlignment
|
|
property alias verticalAlignment: icon.verticalAlignment
|
|
property alias fillMode: icon.fillMode
|
|
|
|
|
|
// Hidden part : transparent if not specified
|
|
property color backgroundHiddenPartNormalColor : colorSet.backgroundHiddenPartNormalColor ? colorSet.backgroundHiddenPartNormalColor : (colorSet.backgroundNormalColor ? colorSet.backgroundNormalColor : 'transparent')
|
|
property color backgroundHiddenPartDisabledColor : colorSet.backgroundHiddenPartDisabledColor ? colorSet.backgroundHiddenPartDisabledColor : (colorSet.backgroundDisabledColor ? colorSet.backgroundDisabledColor : 'transparent')
|
|
property color backgroundHiddenPartHoveredColor : colorSet.backgroundHiddenPartHoveredColor ? colorSet.backgroundHiddenPartHoveredColor : (colorSet.backgroundHoveredColor ? colorSet.backgroundHoveredColor : 'transparent')
|
|
property color backgroundHiddenPartUpdatingColor : colorSet.backgroundHiddenPartUpdatingColor ? colorSet.backgroundHiddenPartUpdatingColor : (colorSet.backgroundUpdatingColor ? colorSet.backgroundUpdatingColor : 'transparent')
|
|
property color backgroundHiddenPartPressedColor : colorSet.backgroundHiddenPartPressedColor ? colorSet.backgroundHiddenPartPressedColor : (colorSet.backgroundPressedColor ? colorSet.backgroundPressedColor : 'transparent')
|
|
|
|
// AutoColor : alpha /4 for foreground
|
|
property color foregroundHiddenPartNormalColor : colorSet.foregroundHiddenPartNormalColor ? colorSet.foregroundHiddenPartNormalColor : (colorSet.foregroundNormalColor ? Qt.rgba(colorSet.foregroundNormalColor.r, colorSet.foregroundNormalColor.g, colorSet.foregroundNormalColor.b, colorSet.foregroundNormalColor.a/4) : 'transparent')
|
|
property color foregroundHiddenPartDisabledColor : colorSet.foregroundHiddenPartDisabledColor ? colorSet.foregroundHiddenPartDisabledColor : (colorSet.foregroundDisabledColor ? Qt.rgba(colorSet.foregroundDisabledColor.r, colorSet.foregroundDisabledColor.g, colorSet.foregroundDisabledColor.b, colorSet.foregroundDisabledColor.a/4): 'transparent')
|
|
property color foregroundHiddenPartHoveredColor : colorSet.foregroundHiddenPartHoveredColor ? colorSet.foregroundHiddenPartHoveredColor : (colorSet.foregroundHoveredColor ? Qt.rgba(colorSet.foregroundHoveredColor.r, colorSet.foregroundHoveredColor.g, colorSet.foregroundHoveredColor.b, colorSet.foregroundHoveredColor.a/4): 'transparent')
|
|
property color foregroundHiddenPartUpdatingColor : colorSet.foregroundHiddenPartUpdatingColor ? colorSet.foregroundHiddenPartUpdatingColor : (colorSet.foregroundUpdatingColor ? Qt.rgba(colorSet.foregroundUpdatingColor.r, colorSet.foregroundUpdatingColor.g, colorSet.foregroundUpdatingColor.b, colorSet.foregroundUpdatingColor.a/4): 'transparent')
|
|
property color foregroundHiddenPartPressedColor : colorSet.foregroundHiddenPartPressedColor ? colorSet.foregroundHiddenPartPressedColor : (colorSet.foregroundPressedColor ? Qt.rgba(colorSet.foregroundPressedColor.r, colorSet.foregroundPressedColor.g, colorSet.foregroundPressedColor.b, colorSet.foregroundPressedColor.a/4): 'transparent')
|
|
//---------------------------------------------
|
|
property int percentageDisplayed : 100
|
|
|
|
// If `useStates` = true, the used icons are:
|
|
// `icon`_pressed, `icon`_hovered and `icon`_normal.
|
|
property string icon : colorSet ? colorSet.icon : ''
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
signal clicked(real x, real y)
|
|
signal pressed(real x, real y)
|
|
signal released(real x, real y)
|
|
signal longPressed()
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function _getIcon () {
|
|
if(isCustom)
|
|
return wrappedButton.icon
|
|
if(wrappedButton.icon == '')
|
|
return wrappedButton.icon;
|
|
if (wrappedButton.updating || wrappedButton.toggled) {
|
|
return wrappedButton.icon + '_updating'
|
|
}
|
|
|
|
if (!useStates) {
|
|
return wrappedButton.icon
|
|
}
|
|
|
|
if (!wrappedButton.enabled) {
|
|
return wrappedButton.icon + '_disabled'
|
|
}
|
|
// if(!autoIcon) {
|
|
return wrappedButton.icon + (
|
|
button.down
|
|
? '_pressed'
|
|
: (button.hovered ? '_hovered' : '_normal')
|
|
)
|
|
// }
|
|
// return wrappedButton.icon;
|
|
}
|
|
function getColor(color, defaultColor, debugVar){
|
|
if(color)
|
|
return color
|
|
else{
|
|
if( debugVar )
|
|
console.warn("No color defined for :"+debugVar+ " on "+_getIcon())
|
|
return defaultColor
|
|
}
|
|
}
|
|
function getBackgroundColor(){
|
|
var defaultColor = 'transparent'
|
|
if(isCustom){
|
|
//if(wrappedButton.icon == '')
|
|
//return getColor(wrappedButton.colorSet.backgroundNormalColor, defaultColor, 'backgroundNormalColor')
|
|
if (wrappedButton.updating || wrappedButton.toggled)
|
|
return getColor(wrappedButton.colorSet.backgroundUpdatingColor, defaultColor, 'backgroundUpdatingColor')
|
|
var normalColor = getColor(wrappedButton.colorSet.backgroundNormalColor, defaultColor, 'backgroundNormalColor')
|
|
if (!useStates)
|
|
return normalColor
|
|
if (!wrappedButton.enabled)
|
|
return getColor(wrappedButton.colorSet.backgroundDisabledColor, normalColor)
|
|
return button.down ? getColor(wrappedButton.colorSet.backgroundPressedColor, defaultColor, 'backgroundPressedColor')
|
|
: (button.hovered ? getColor(wrappedButton.colorSet.backgroundHoveredColor, defaultColor, 'backgroundHoveredColor')
|
|
: getColor(wrappedButton.colorSet.backgroundNormalColor, defaultColor, 'backgroundNormalColor'))
|
|
}else
|
|
return defaultColor
|
|
}
|
|
function getForegroundColor(){
|
|
var defaultColor = 'black'
|
|
if(isCustom){
|
|
//if(wrappedButton.icon == '')
|
|
//return getColor(wrappedButton.colorSet.foregroundNormalColor, defaultColor, 'foregroundNormalColor')
|
|
if (wrappedButton.updating || wrappedButton.toggled)
|
|
return getColor(wrappedButton.colorSet.foregroundUpdatingColor, defaultColor, 'foregroundUpdatingColor')
|
|
var normalColor = getColor(wrappedButton.colorSet.foregroundNormalColor, defaultColor, 'foregroundNormalColor')
|
|
if (!useStates)
|
|
return normalColor
|
|
if (!wrappedButton.enabled)
|
|
return getColor(wrappedButton.colorSet.foregroundDisabledColor, normalColor)
|
|
return button.down ? getColor(wrappedButton.colorSet.foregroundPressedColor, defaultColor, 'foregroundPressedColor')
|
|
: (button.hovered ? getColor(wrappedButton.colorSet.foregroundHoveredColor, defaultColor, 'foregroundHoveredColor')
|
|
: getColor(wrappedButton.colorSet.foregroundNormalColor, defaultColor, 'foregroundNormalColor'))
|
|
}else
|
|
return defaultColor
|
|
}
|
|
function getBackgroundHiddenPartColor(){
|
|
var defaultColor = 'transparent'
|
|
if(isCustom){
|
|
//if(wrappedButton.icon == '')
|
|
//return getColor(wrappedButton.colorSet.backgroundHiddenPartNormalColor, defaultColor, 'backgroundHiddenPartNormalColor')
|
|
if (wrappedButton.updating || wrappedButton.toggled)
|
|
return getColor(wrappedButton.colorSet.backgroundHiddenPartUpdatingColor, defaultColor, 'backgroundHiddenPartUpdatingColor')
|
|
if (!useStates)
|
|
return getColor(wrappedButton.colorSet.backgroundHiddenPartNormalColor, defaultColor, 'backgroundHiddenPartNormalColor')
|
|
if (!wrappedButton.enabled)
|
|
return getColor(wrappedButton.colorSet.backgroundHiddenPartDisabledColor, defaultColor, 'backgroundHiddenPartDisabledColor')
|
|
return button.down ? getColor(wrappedButton.colorSet.backgroundHiddenPartPressedColor, defaultColor, 'backgroundHiddenPartPressedColor')
|
|
: (button.hovered ? getColor(wrappedButton.colorSet.backgroundHiddenPartHoveredColor, defaultColor, 'backgroundHiddenPartHoveredColor')
|
|
: getColor(wrappedButton.colorSet.backgroundHiddenPartNormalColor, defaultColor, 'backgroundHiddenPartNormalColor'))
|
|
}else
|
|
return defaultColor
|
|
}
|
|
function getForegroundHiddenPartColor(){
|
|
var defaultColor = '#80FFFFFF'
|
|
if(isCustom){
|
|
//if(wrappedButton.icon == '')
|
|
//return getColor(wrappedButton.colorSet.foregroundHiddenPartNormalColor, defaultColor, 'foregroundHiddenPartNormalColor')
|
|
if (wrappedButton.updating || wrappedButton.toggled)
|
|
return getColor(wrappedButton.colorSet.foregroundHiddenPartUpdatingColor, defaultColor, 'foregroundHiddenPartUpdatingColor')
|
|
if (!useStates)
|
|
return getColor(wrappedButton.colorSet.foregroundHiddenPartNormalColor, defaultColor, 'foregroundHiddenPartNormalColor')
|
|
if (!wrappedButton.enabled)
|
|
return getColor(wrappedButton.colorSet.foregroundHiddenPartDisabledColor, defaultColor, 'foregroundHiddenPartDisabledColor')
|
|
return button.down ? getColor(wrappedButton.colorSet.foregroundHiddenPartPressedColor, defaultColor, 'foregroundHiddenPartPressedColor')
|
|
: (button.hovered ? getColor(wrappedButton.colorSet.foregroundHiddenPartHoveredColor, defaultColor, 'foregroundHiddenPartHoveredColor')
|
|
: getColor(wrappedButton.colorSet.foregroundHiddenPartNormalColor, defaultColor, 'foregroundHiddenPartNormalColor'))
|
|
}else
|
|
return defaultColor
|
|
}
|
|
// ---------------------------------------------------------------------------
|
|
property int fitHeight: iconHeight || iconSize || parent.iconSize || parent.height
|
|
property int fitWidth: iconWidth || iconSize || parent.iconSize || parent.width
|
|
height: fitHeight
|
|
width: fitWidth
|
|
opacity: enabled ? 1.0 : 0.5
|
|
|
|
Button {
|
|
id: button
|
|
|
|
anchors.fill: parent
|
|
background: Row{
|
|
anchors.fill: parent
|
|
Rectangle {
|
|
height: parent.height
|
|
width:parent.width * wrappedButton.percentageDisplayed / 100
|
|
id: backgroundColor
|
|
color: getBackgroundColor()
|
|
}
|
|
Rectangle {
|
|
height: parent.height
|
|
width: parent.width * ( 1 - wrappedButton.percentageDisplayed / 100 )
|
|
id: backgroundHiddenPartColor
|
|
color: width > 0 ? getBackgroundHiddenPartColor() : 'transparent'
|
|
}
|
|
}
|
|
hoverEnabled: !wrappedButton.updating//|| wrappedButton.autoIcon
|
|
onClicked: {
|
|
longPressedTimeout.stop()
|
|
if(!wrappedButton.updating && wrappedButton.enabled) wrappedButton.clicked(pressX, pressY)
|
|
}
|
|
onPressed: if(!wrappedButton.updating && wrappedButton.enabled){
|
|
longPressedTimeout.restart()
|
|
wrappedButton.pressed(pressX, pressY)
|
|
}
|
|
onReleased: {
|
|
longPressedTimeout.stop()
|
|
if(!wrappedButton.updating && wrappedButton.enabled)
|
|
wrappedButton.released(pressX, pressY)
|
|
}
|
|
onHoveredChanged: if(!hovered) longPressedTimeout.stop()
|
|
|
|
Timer{
|
|
id: longPressedTimeout
|
|
interval: 500
|
|
repeat: false
|
|
onTriggered: if(!wrappedButton.updating && wrappedButton.enabled) wrappedButton.longPressed()
|
|
}
|
|
|
|
Rectangle{
|
|
id: foregroundColor
|
|
anchors.fill:parent
|
|
visible: false
|
|
color: 'transparent'
|
|
Rectangle{
|
|
anchors.fill:parent
|
|
color: getForegroundColor()
|
|
anchors.rightMargin: parent.width * ( 1 - wrappedButton.percentageDisplayed / 100 )
|
|
}
|
|
}
|
|
Rectangle{
|
|
id: foregroundHiddenPartColor
|
|
anchors.fill:parent
|
|
visible: false
|
|
color: 'transparent'
|
|
Rectangle{
|
|
anchors.fill:parent
|
|
color: percentageDisplayed != 100 ? getForegroundHiddenPartColor() : 'transparent'
|
|
anchors.leftMargin: parent.width * wrappedButton.percentageDisplayed / 100
|
|
}
|
|
}
|
|
|
|
|
|
Icon {
|
|
id: icon
|
|
|
|
anchors.centerIn: parent
|
|
anchors.fill: iconHeight>0 || iconWidth ? parent : undefined
|
|
icon: {
|
|
var iconString = _getIcon()
|
|
if( iconString ) {
|
|
if(Images[iconString])
|
|
return Images[iconString].id
|
|
else
|
|
console.log("No images for: "+iconString)
|
|
}
|
|
return ''
|
|
}
|
|
iconSize: wrappedButton.iconSize || (
|
|
parent.width > parent.height ? parent.height : parent.width
|
|
)
|
|
iconHeight: wrappedButton.iconHeight
|
|
iconWidth: wrappedButton.iconWidth
|
|
visible: !iconIsCustom
|
|
}
|
|
|
|
OpacityMask{
|
|
anchors.fill: icon
|
|
source: foregroundColor
|
|
maskSource: icon
|
|
|
|
visible: iconIsCustom
|
|
MouseArea{
|
|
anchors.fill:parent
|
|
hoverEnabled: true
|
|
acceptedButtons: Qt.NoButton
|
|
cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
|
|
visible: wrappedButton.enabled
|
|
}
|
|
}
|
|
|
|
OpacityMask{
|
|
id: mask
|
|
anchors.fill: icon
|
|
source: foregroundHiddenPartColor
|
|
maskSource: icon
|
|
|
|
visible: iconIsCustom && percentageDisplayed != 100
|
|
/*
|
|
layer {
|
|
enabled: true
|
|
effect: ColorOverlay {
|
|
color: "#80FFFFFF"
|
|
}
|
|
}*/
|
|
MouseArea{
|
|
anchors.fill:parent
|
|
hoverEnabled: true
|
|
acceptedButtons: Qt.NoButton
|
|
cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
|
|
visible: wrappedButton.enabled
|
|
}
|
|
}
|
|
TooltipArea {
|
|
id:tooltip
|
|
text: ''
|
|
visible:text!=''
|
|
}
|
|
MouseArea{
|
|
anchors.fill:parent
|
|
hoverEnabled: true
|
|
acceptedButtons: Qt.NoButton
|
|
cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
|
|
visible: wrappedButton.enabled && !iconIsCustom && !tooltip.visible
|
|
}
|
|
}
|
|
|
|
}
|