mirror of
https://gitlab.linphone.org/BC/public/linphone-desktop.git
synced 2026-01-22 14:18:09 +00:00
235 lines
7.7 KiB
QML
235 lines
7.7 KiB
QML
import QtQuick 2.7
|
|
import QtQuick.Controls 2.2
|
|
import QtGraphicalEffects 1.12
|
|
|
|
import Common 1.0
|
|
|
|
// =============================================================================
|
|
// An animated (or not) button with image(s).
|
|
// =============================================================================
|
|
|
|
Item {
|
|
id: wrappedButton
|
|
|
|
// ---------------------------------------------------------------------------
|
|
property QtObject colorSet: QtObject {
|
|
property int iconSize: 30
|
|
property string icon : ''
|
|
property color backgroundNormalColor : "white"
|
|
property color backgroundDisabledColor : "white"
|
|
property color backgroundHoveredColor : "white"
|
|
property color backgroundUpdatingColor : "white"
|
|
property color backgroundPressedColor : "white"
|
|
// Color for shown part
|
|
property color foregroundNormalColor : "black"
|
|
property color foregroundDisabledColor : "black"
|
|
property color foregroundHoveredColor : "black"
|
|
property color foregroundUpdatingColor : "black"
|
|
property color foregroundPressedColor : "black"
|
|
}
|
|
property bool isCustom : false
|
|
property bool enabled: true
|
|
property bool updating: false
|
|
property bool useStates: true
|
|
//property bool autoIcon : false // hovered/pressed : use an automatic layer instead of specific icon image
|
|
property int iconSize : colorSet.iconSize
|
|
readonly property alias hovered: button.hovered
|
|
property alias text: button.text
|
|
// 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
|
|
|
|
|
|
// AutoColor for hide part alpha /4
|
|
property color foregroundHiddenPartNormalColor : colorSet.foregroundNormalColor ? Qt.rgba(colorSet.foregroundNormalColor.r, colorSet.foregroundNormalColor.g, colorSet.foregroundNormalColor.b, colorSet.foregroundNormalColor.a/4) : 'transparent'
|
|
property color foregroundHiddenPartDisabledColor : colorSet.foregroundDisabledColor ? Qt.rgba(colorSet.foregroundDisabledColor.r, colorSet.foregroundDisabledColor.g, colorSet.foregroundDisabledColor.b, colorSet.foregroundDisabledColor.a/4): 'transparent'
|
|
property color foregroundHiddenPartHoveredColor : colorSet.foregroundHoveredColor ? Qt.rgba(colorSet.foregroundHoveredColor.r, colorSet.foregroundHoveredColor.g, colorSet.foregroundHoveredColor.b, colorSet.foregroundHoveredColor.a/4): 'transparent'
|
|
property color foregroundHiddenPartUpdatingColor : colorSet.foregroundUpdatingColor ? Qt.rgba(colorSet.foregroundUpdatingColor.r, colorSet.foregroundUpdatingColor.g, colorSet.foregroundUpdatingColor.b, colorSet.foregroundUpdatingColor.a/4): 'transparent'
|
|
property color 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.icon
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
signal clicked
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function _getIcon () {
|
|
if(isCustom)
|
|
return wrappedButton.icon
|
|
if(wrappedButton.icon == '')
|
|
return wrappedButton.icon;
|
|
if (wrappedButton.updating) {
|
|
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 getBackgroundColor(){
|
|
if(isCustom){
|
|
if(wrappedButton.icon == '')
|
|
return wrappedButton.colorSet.backgroundNormalColor
|
|
if (wrappedButton.updating)
|
|
return wrappedButton.colorSet.backgroundUpdatingColor
|
|
if (!useStates)
|
|
return wrappedButton.colorSet.backgroundNormalColor
|
|
if (!wrappedButton.enabled)
|
|
return wrappedButton.colorSet.backgroundDisabledColor
|
|
return button.down ? wrappedButton.colorSet.backgroundPressedColor
|
|
: (button.hovered ? wrappedButton.colorSet.backgroundHoveredColor: wrappedButton.colorSet.backgroundNormalColor)
|
|
}else
|
|
return 'transparent'
|
|
}
|
|
function getForegroundColor(){
|
|
if(isCustom){
|
|
if(wrappedButton.icon == '')
|
|
return wrappedButton.colorSet.foregroundNormalColor
|
|
if (wrappedButton.updating)
|
|
return wrappedButton.colorSet.foregroundUpdatingColor
|
|
if (!useStates)
|
|
return wrappedButton.colorSet.foregroundNormalColor
|
|
if (!wrappedButton.enabled)
|
|
return wrappedButton.colorSet.foregroundDisabledColor
|
|
return button.down ? wrappedButton.colorSet.foregroundPressedColor
|
|
: (button.hovered ? wrappedButton.colorSet.foregroundHoveredColor: wrappedButton.colorSet.foregroundNormalColor)
|
|
}else
|
|
return "black"
|
|
}
|
|
function getForegroundHiddenPartColor(){
|
|
if(isCustom){
|
|
if(wrappedButton.icon == '')
|
|
return wrappedButton.foregroundHiddenPartNormalColor
|
|
if (wrappedButton.updating)
|
|
return wrappedButton.foregroundHiddenPartUpdatingColor
|
|
if (!useStates)
|
|
return wrappedButton.foregroundHiddenPartNormalColor
|
|
if (!wrappedButton.enabled)
|
|
return wrappedButton.foregroundHiddenPartDisabledColor
|
|
return button.down ? wrappedButton.foregroundHiddenPartPressedColor
|
|
: (button.hovered ? wrappedButton.foregroundHiddenPartHoveredColor: wrappedButton.foregroundHiddenPartNormalColor)
|
|
}else
|
|
return "#80FFFFFF"
|
|
}
|
|
// ---------------------------------------------------------------------------
|
|
|
|
height: iconSize || parent.iconSize || parent.height
|
|
width: iconSize || parent.iconSize || parent.width
|
|
|
|
Button {
|
|
id: button
|
|
|
|
anchors.fill: parent
|
|
background: Rectangle {
|
|
id: backgroundColor
|
|
color: getBackgroundColor()
|
|
}
|
|
hoverEnabled: !wrappedButton.updating//|| wrappedButton.autoIcon
|
|
|
|
onClicked: !wrappedButton.updating && wrappedButton.enabled && wrappedButton.clicked()
|
|
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: getForegroundHiddenPartColor()
|
|
anchors.leftMargin: parent.width * wrappedButton.percentageDisplayed / 100
|
|
}
|
|
}
|
|
|
|
|
|
Icon {
|
|
id: icon
|
|
|
|
anchors.centerIn: parent
|
|
icon: {
|
|
if(!Images[_getIcon()])
|
|
console.log(_getIcon())
|
|
return Images[_getIcon()].id
|
|
}
|
|
iconSize: wrappedButton.iconSize || (
|
|
parent.width > parent.height ? parent.height : parent.width
|
|
)
|
|
visible: !isCustom
|
|
}
|
|
|
|
|
|
OpacityMask{
|
|
anchors.fill: foregroundColor
|
|
source: foregroundColor
|
|
maskSource: icon
|
|
visible: isCustom
|
|
MouseArea{
|
|
anchors.fill:parent
|
|
hoverEnabled: true
|
|
acceptedButtons: Qt.NoButton
|
|
cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
|
|
}
|
|
}
|
|
|
|
|
|
OpacityMask{
|
|
id: mask
|
|
anchors.fill: foregroundHiddenPartColor
|
|
source: foregroundHiddenPartColor
|
|
maskSource: icon
|
|
visible: isCustom && percentageDisplayed != 100
|
|
/*
|
|
layer {
|
|
enabled: true
|
|
effect: ColorOverlay {
|
|
color: "#80FFFFFF"
|
|
}
|
|
}*/
|
|
MouseArea{
|
|
anchors.fill:parent
|
|
hoverEnabled: true
|
|
acceptedButtons: Qt.NoButton
|
|
cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
|
|
}
|
|
}
|
|
TooltipArea {
|
|
id:tooltip
|
|
text: ''
|
|
visible:text!=''
|
|
}
|
|
}
|
|
|
|
}
|