mirror of
https://gitlab.linphone.org/BC/public/linphone-desktop.git
synced 2026-01-19 12:28:08 +00:00
fe4c1982bb
Adapt video conference view to be used for one-one. Adapt waiting room to be used for outgoing and ending calls. Fix display of the icon in ActionButton to respect custom sizes. Fix camera refreshing. Hide some item memu on One-one. Update SDK.
337 lines
15 KiB
QML
337 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{
|
|
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')
|
|
if (!useStates)
|
|
return getColor(wrappedButton.colorSet.backgroundNormalColor, defaultColor, 'backgroundNormalColor')
|
|
if (!wrappedButton.enabled)
|
|
return getColor(wrappedButton.colorSet.backgroundDisabledColor, defaultColor, 'backgroundDisabledColor')
|
|
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')
|
|
if (!useStates)
|
|
return getColor(wrappedButton.colorSet.foregroundNormalColor, defaultColor, 'foregroundNormalColor')
|
|
if (!wrappedButton.enabled)
|
|
return getColor(wrappedButton.colorSet.foregroundDisabledColor, defaultColor, 'foregroundDisabledColor')
|
|
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
|
|
|
|
|
|
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
|
|
}
|
|
}
|
|
|
|
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
|
|
}
|
|
}
|
|
TooltipArea {
|
|
id:tooltip
|
|
text: ''
|
|
visible:text!=''
|
|
}
|
|
MouseArea{
|
|
anchors.fill:parent
|
|
hoverEnabled: true
|
|
acceptedButtons: Qt.NoButton
|
|
cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
|
|
visible: !iconIsCustom
|
|
}
|
|
}
|
|
|
|
}
|