mirror of
https://github.com/ProtonMail/proton-bridge.git
synced 2025-12-10 12:46:46 +00:00
GODT-1179 GODT-658: Components and login flows
This commit is contained in:
Alexander Bilyak
@ -28,49 +28,151 @@ T.Button {
|
||||
readonly property bool primary: !secondary
|
||||
readonly property bool isIcon: control.text === ""
|
||||
|
||||
property bool loading: false
|
||||
|
||||
// TODO: store previous enabled state and restore it?
|
||||
// For now assuming that only enabled buttons could have loading state
|
||||
onLoadingChanged: {
|
||||
if (loading) {
|
||||
enabled = false
|
||||
} else {
|
||||
enabled = true
|
||||
}
|
||||
}
|
||||
|
||||
id: control
|
||||
|
||||
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
|
||||
implicitContentWidth + leftPadding + rightPadding)
|
||||
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
|
||||
implicitContentHeight + topPadding + bottomPadding)
|
||||
implicitWidth: Math.max(
|
||||
implicitBackgroundWidth + leftInset + rightInset,
|
||||
implicitContentWidth + leftPadding + rightPadding
|
||||
)
|
||||
implicitHeight: Math.max(
|
||||
implicitBackgroundHeight + topInset + bottomInset,
|
||||
implicitContentHeight + topPadding + bottomPadding
|
||||
)
|
||||
|
||||
padding: 8
|
||||
horizontalPadding: 16
|
||||
spacing: 10
|
||||
|
||||
icon.width: 12
|
||||
icon.height: 12
|
||||
icon.color: control.checked || control.highlighted ? control.palette.brightText :
|
||||
control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText
|
||||
font.family: Style.font_family
|
||||
font.pixelSize: Style.body_font_size
|
||||
font.letterSpacing: Style.body_letter_spacing
|
||||
|
||||
contentItem: IconLabel {
|
||||
spacing: control.spacing
|
||||
mirrored: control.mirrored
|
||||
display: control.display
|
||||
icon.width: 16
|
||||
icon.height: 16
|
||||
icon.color: {
|
||||
if (primary && !isIcon) {
|
||||
return "#FFFFFF"
|
||||
} else {
|
||||
return colorScheme.text_norm
|
||||
}
|
||||
}
|
||||
|
||||
icon: control.icon
|
||||
text: control.text
|
||||
font: control.font
|
||||
color: {
|
||||
if (!secondary) {
|
||||
// Primary colors
|
||||
return "#FFFFFF"
|
||||
} else {
|
||||
// Secondary colors
|
||||
return colorScheme.text_norm
|
||||
contentItem: Item {
|
||||
id: _contentItem
|
||||
|
||||
// Since contentItem is allways resized to maximum available size - we need to "incapsulate" label
|
||||
// and icon within one single item with calculated fixed implicit size
|
||||
|
||||
implicitHeight: labelIcon.implicitHeight
|
||||
implicitWidth: labelIcon.implicitWidth
|
||||
|
||||
Item {
|
||||
id: labelIcon
|
||||
|
||||
anchors.horizontalCenter: _contentItem.horizontalCenter
|
||||
anchors.verticalCenter: _contentItem.verticalCenter
|
||||
|
||||
width: Math.min(implicitWidth, control.availableWidth)
|
||||
height: Math.min(implicitHeight, control.availableHeight)
|
||||
|
||||
implicitWidth: {
|
||||
var textImplicitWidth = control.text !== "" ? label.implicitWidth : 0
|
||||
var iconImplicitWidth = iconImage.source ? iconImage.implicitWidth : 0
|
||||
var spacing = (control.text !== "" && iconImage.source && control.display === AbstractButton.TextBesideIcon) ? control.spacing : 0
|
||||
|
||||
return control.display === AbstractButton.TextBesideIcon ? textImplicitWidth + iconImplicitWidth + spacing : Math.max(textImplicitWidth, iconImplicitWidth)
|
||||
}
|
||||
implicitHeight: {
|
||||
var textImplicitHeight = control.text !== "" ? label.implicitHeight : 0
|
||||
var iconImplicitHeight = iconImage.source ? iconImage.implicitHeight : 0
|
||||
var spacing = (control.text !== "" && iconImage.source && control.display === AbstractButton.TextUnderIcon) ? control.spacing : 0
|
||||
|
||||
return control.display === AbstractButton.TextUnderIcon ? textImplicitHeight + iconImplicitHeight + spacing : Math.max(textImplicitHeight, iconImplicitHeight)
|
||||
}
|
||||
|
||||
Label {
|
||||
id: label
|
||||
anchors.left: labelIcon.left
|
||||
anchors.top: labelIcon.top
|
||||
anchors.bottom: labelIcon.bottom
|
||||
anchors.right: control.loading ? iconImage.left : labelIcon.right
|
||||
anchors.rightMargin: control.loading ? control.spacing : 0
|
||||
|
||||
elide: Text.ElideRight
|
||||
horizontalAlignment: Qt.AlignHCenter
|
||||
verticalAlignment: Qt.AlignVCenter
|
||||
|
||||
text: control.text
|
||||
font: control.font
|
||||
color: {
|
||||
if (primary && !isIcon) {
|
||||
return "#FFFFFF"
|
||||
} else {
|
||||
return colorScheme.text_norm
|
||||
}
|
||||
}
|
||||
opacity: control.enabled || control.loading ? 1.0 : 0.5
|
||||
}
|
||||
|
||||
ColorImage {
|
||||
id: iconImage
|
||||
|
||||
anchors.verticalCenter: labelIcon.verticalCenter
|
||||
anchors.right: labelIcon.right
|
||||
|
||||
width: {
|
||||
// special case for loading since we want icon to be square for rotation animation
|
||||
if (control.loading) {
|
||||
return Math.min(control.icon.width, availableWidth, control.icon.height, availableHeight)
|
||||
}
|
||||
|
||||
return Math.min(control.icon.width, availableWidth)
|
||||
}
|
||||
height: {
|
||||
if (control.loading) {
|
||||
return width
|
||||
}
|
||||
|
||||
Math.min(control.icon.height, availableHeight)
|
||||
}
|
||||
|
||||
color: control.icon.color
|
||||
source: control.loading ? "../icons/Loader_16.svg" : control.icon.source
|
||||
visible: control.loading || control.icon.source
|
||||
|
||||
RotationAnimation {
|
||||
target: iconImage
|
||||
loops: Animation.Infinite
|
||||
duration: 1000
|
||||
from: 0
|
||||
to: 360
|
||||
direction: RotationAnimation.Clockwise
|
||||
running: control.loading
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
implicitWidth: 72
|
||||
implicitWidth: 36
|
||||
implicitHeight: 36
|
||||
radius: 4
|
||||
visible: !control.flat || control.down || control.checked || control.highlighted
|
||||
visible: true
|
||||
color: {
|
||||
if (!isIcon) {
|
||||
if (!secondary) {
|
||||
if (primary) {
|
||||
// Primary colors
|
||||
|
||||
if (control.down) {
|
||||
@ -81,6 +183,10 @@ T.Button {
|
||||
return colorScheme.interaction_norm_hover
|
||||
}
|
||||
|
||||
if (control.loading) {
|
||||
return colorScheme.interaction_norm_hover
|
||||
}
|
||||
|
||||
return colorScheme.interaction_norm
|
||||
} else {
|
||||
// Secondary colors
|
||||
@ -93,10 +199,14 @@ T.Button {
|
||||
return colorScheme.interaction_default_hover
|
||||
}
|
||||
|
||||
if (control.loading) {
|
||||
return colorScheme.interaction_default_hover
|
||||
}
|
||||
|
||||
return colorScheme.interaction_default
|
||||
}
|
||||
} else {
|
||||
if (!secondary) {
|
||||
if (primary) {
|
||||
// Primary icon colors
|
||||
|
||||
if (control.down) {
|
||||
@ -107,6 +217,10 @@ T.Button {
|
||||
return colorScheme.interaction_default_hover
|
||||
}
|
||||
|
||||
if (control.loading) {
|
||||
return colorScheme.interaction_default_hover
|
||||
}
|
||||
|
||||
return colorScheme.interaction_default
|
||||
} else {
|
||||
// Secondary icon colors
|
||||
@ -119,10 +233,18 @@ T.Button {
|
||||
return colorScheme.interaction_default_hover
|
||||
}
|
||||
|
||||
if (control.loading) {
|
||||
return colorScheme.interaction_default_hover
|
||||
}
|
||||
|
||||
return colorScheme.interaction_default
|
||||
}
|
||||
}
|
||||
}
|
||||
opacity: control.enabled ? 1.0 : 0.5
|
||||
|
||||
border.color: colorScheme.border_norm
|
||||
border.width: secondary ? 1 : 0
|
||||
|
||||
opacity: control.enabled || control.loading ? 1.0 : 0.5
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user