172 lines
5.7 KiB
QML
172 lines
5.7 KiB
QML
// Copyright (c) 2021 Proton Technologies AG
|
|
//
|
|
// This file is part of ProtonMail Bridge.
|
|
//
|
|
// ProtonMail Bridge 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.
|
|
//
|
|
// ProtonMail Bridge 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 ProtonMail Bridge. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
// Notify user
|
|
|
|
import QtQuick 2.8
|
|
import ProtonUI 1.0
|
|
|
|
Rectangle {
|
|
id: root
|
|
property int posx // x-coordinate of triangle
|
|
property bool isTriangleBelow
|
|
property string text
|
|
property alias bubbleColor: bubble.color
|
|
anchors {
|
|
top : tabbar.bottom
|
|
left : tabbar.left
|
|
leftMargin : {
|
|
// position of bubble calculated from posx
|
|
return Math.max(
|
|
Style.main.leftMargin, // keep minimal left margin
|
|
Math.min(
|
|
root.posx - root.width/2, // fit triangle in the middle if possible
|
|
tabbar.width - root.width - Style.main.rightMargin // keep minimal right margin
|
|
)
|
|
)
|
|
}
|
|
topMargin: 0
|
|
}
|
|
height : triangle.height + bubble.height
|
|
width : bubble.width
|
|
color : "transparent"
|
|
visible : false
|
|
|
|
|
|
Rectangle {
|
|
id : triangle
|
|
anchors {
|
|
top : root.isTriangleBelow ? undefined : root.top
|
|
bottom : root.isTriangleBelow ? root.bottom : undefined
|
|
bottomMargin : 1*Style.px
|
|
left : root.left
|
|
leftMargin : root.posx - triangle.width/2 - root.anchors.leftMargin
|
|
}
|
|
width: 2*Style.tabbar.heightTriangle+2
|
|
height: Style.tabbar.heightTriangle
|
|
color: "transparent"
|
|
Canvas {
|
|
anchors.fill: parent
|
|
rotation: root.isTriangleBelow ? 180 : 0
|
|
onPaint: {
|
|
var ctx = getContext("2d")
|
|
ctx.fillStyle = bubble.color
|
|
ctx.moveTo(0 , height)
|
|
ctx.lineTo(width/2, 0)
|
|
ctx.lineTo(width , height)
|
|
ctx.closePath()
|
|
ctx.fill()
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: bubble
|
|
anchors {
|
|
top: root.top
|
|
left: root.left
|
|
topMargin: (root.isTriangleBelow ? 0 : triangle.height)
|
|
}
|
|
width : mainText.contentWidth + Style.main.leftMargin + Style.main.rightMargin
|
|
height : 2*Style.main.fontSize
|
|
radius : Style.bubble.radius
|
|
color : Style.bubble.background
|
|
|
|
AccessibleText {
|
|
id: mainText
|
|
anchors {
|
|
horizontalCenter : parent.horizontalCenter
|
|
top: parent.top
|
|
topMargin : Style.main.fontSize
|
|
}
|
|
|
|
text: "<html><style>a { color: "+Style.main.textBlue+";}</style>"+root.text+"<html>"
|
|
width : Style.bubble.width - ( Style.main.leftMargin + Style.main.rightMargin )
|
|
font.pointSize: Style.main.fontSize * Style.pt
|
|
horizontalAlignment: Text.AlignHCenter
|
|
textFormat: Text.RichText
|
|
wrapMode: Text.WordWrap
|
|
color: Style.bubble.text
|
|
onLinkActivated: {
|
|
Qt.openUrlExternally(link)
|
|
}
|
|
MouseArea {
|
|
anchors.fill: mainText
|
|
cursorShape: mainText.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
|
|
acceptedButtons: Qt.NoButton
|
|
}
|
|
|
|
Accessible.name: qsTr("Message")
|
|
Accessible.description: root.text
|
|
}
|
|
|
|
ButtonRounded {
|
|
id: okButton
|
|
visible: !root.isTriangleBelow
|
|
anchors {
|
|
bottom : parent.bottom
|
|
horizontalCenter : parent.horizontalCenter
|
|
bottomMargin : Style.main.fontSize
|
|
}
|
|
text: qsTr("Okay", "confirms and dismisses a notification")
|
|
height: Style.main.fontSize*2
|
|
color_main: Style.main.text
|
|
color_minor: Style.main.textBlue
|
|
isOpaque: true
|
|
onClicked: hide()
|
|
}
|
|
}
|
|
|
|
function place(index) {
|
|
if (index < 0) {
|
|
// add accounts
|
|
root.isTriangleBelow = true
|
|
bubble.height = 3.25*Style.main.fontSize
|
|
root.posx = 2*Style.main.leftMargin
|
|
bubble.width = mainText.contentWidth - Style.main.leftMargin
|
|
} else {
|
|
root.isTriangleBelow = false
|
|
bubble.height = (
|
|
bubble.anchors.topMargin + // from top
|
|
mainText.contentHeight + // the text content
|
|
Style.main.fontSize + // gap between button
|
|
okButton.height + okButton.anchors.bottomMargin // from bottom and button
|
|
)
|
|
if (index < 3) {
|
|
// possition accordig to top tab
|
|
var margin = Style.main.leftMargin + Style.tabbar.widthButton/2
|
|
root.posx = margin + index*tabbar.spacing
|
|
} else {
|
|
// quit button
|
|
root.posx = tabbar.width - 2*Style.main.rightMargin
|
|
}
|
|
}
|
|
}
|
|
|
|
function show() {
|
|
root.visible=true
|
|
gui.winMain.activeContent = false
|
|
}
|
|
|
|
function hide() {
|
|
root.visible=false
|
|
go.bubbleClosed()
|
|
gui.winMain.activeContent = true
|
|
gui.winMain.tabbar.focusButton()
|
|
}
|
|
}
|