forked from Silverfish/proton-bridge
GODT-1272: Fix status view layout
This commit is contained in:
@ -28,18 +28,6 @@ Item {
|
|||||||
property var user
|
property var user
|
||||||
|
|
||||||
property var _spacing: 12
|
property var _spacing: 12
|
||||||
property var _leftRightMargins: {
|
|
||||||
switch(root.type) {
|
|
||||||
case AccountDelegate.SmallView: return 12
|
|
||||||
case AccountDelegate.LargeView: return 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
property var _topBottomMargins: {
|
|
||||||
switch(root.type) {
|
|
||||||
case AccountDelegate.SmallView: return 10
|
|
||||||
case AccountDelegate.LargeView: return 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
property color usedSpaceColor : {
|
property color usedSpaceColor : {
|
||||||
if (!root.enabled) return root.colorScheme.text_weak
|
if (!root.enabled) return root.colorScheme.text_weak
|
||||||
@ -60,10 +48,8 @@ Item {
|
|||||||
return Math.round(bytes*10 / Math.pow(1024, i))/10 + " " + units[i]
|
return Math.round(bytes*10 / Math.pow(1024, i))/10 + " " + units[i]
|
||||||
}
|
}
|
||||||
|
|
||||||
signal clicked()
|
|
||||||
|
|
||||||
// width expected to be set by parent object
|
// width expected to be set by parent object
|
||||||
implicitHeight : children[0].implicitHeight + 2*root._topBottomMargins
|
implicitHeight : children[0].implicitHeight
|
||||||
|
|
||||||
enum ViewType{
|
enum ViewType{
|
||||||
SmallView, LargeView
|
SmallView, LargeView
|
||||||
@ -77,10 +63,6 @@ Item {
|
|||||||
top: root.top
|
top: root.top
|
||||||
left: root.left
|
left: root.left
|
||||||
right: root.rigth
|
right: root.rigth
|
||||||
leftMargin : root._leftRightMargins
|
|
||||||
rightMargin : root._leftRightMargins
|
|
||||||
topMargin : root._topBottomMargins
|
|
||||||
bottomMargin : root._topBottomMargins
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
@ -124,7 +106,7 @@ Item {
|
|||||||
|
|
||||||
Label {
|
Label {
|
||||||
Layout.maximumWidth: root.width - (
|
Layout.maximumWidth: root.width - (
|
||||||
root._spacing + avatar.width + 2*root._leftRightMargins
|
root._spacing + avatar.width
|
||||||
)
|
)
|
||||||
|
|
||||||
colorScheme: root.colorScheme
|
colorScheme: root.colorScheme
|
||||||
@ -192,9 +174,4 @@ Item {
|
|||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
MouseArea {
|
|
||||||
anchors.fill: root
|
|
||||||
onClicked: root.clicked()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -125,9 +125,9 @@ QtObject {
|
|||||||
screen = Qt.application.screens[i]
|
screen = Qt.application.screens[i]
|
||||||
if (
|
if (
|
||||||
isInInterval(iconCenter.x, screen.virtualX, screen.virtualX+screen.width) &&
|
isInInterval(iconCenter.x, screen.virtualX, screen.virtualX+screen.width) &&
|
||||||
isInInterval(iconCenter.y, screen.virtualY, screen.virtualY+screen.heigh)
|
isInInterval(iconCenter.y, screen.virtualY, screen.virtualY+screen.height)
|
||||||
) {
|
) {
|
||||||
return
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -158,21 +158,37 @@ Item {
|
|||||||
}
|
}
|
||||||
|
|
||||||
model: root.backend.users
|
model: root.backend.users
|
||||||
delegate: AccountDelegate{
|
delegate: Item {
|
||||||
width: leftBar.width - 2*accounts._leftRightMargins
|
|
||||||
|
|
||||||
id: accountDelegate
|
width: leftBar.width - 2*accounts._leftRightMargins
|
||||||
colorScheme: leftBar.colorScheme
|
implicitHeight: children[0].implicitHeight + children[0].anchors.topMargin + children[0].anchors.bottomMargin
|
||||||
user: root.backend.users.get(index)
|
implicitWidth: children[0].implicitWidth + children[0].anchors.leftMargin + children[0].anchors.rightMargin
|
||||||
onClicked: {
|
|
||||||
var user = root.backend.users.get(index)
|
AccountDelegate {
|
||||||
accounts.currentIndex = index
|
id: accountDelegate
|
||||||
if (!user) return
|
|
||||||
if (user.loggedIn) {
|
anchors.fill: parent
|
||||||
rightContent.showAccount()
|
anchors.topMargin: 8
|
||||||
} else {
|
anchors.bottomMargin: 8
|
||||||
signIn.username = user.username
|
anchors.leftMargin: 12
|
||||||
rightContent.showSignIn()
|
anchors.rightMargin: 12
|
||||||
|
|
||||||
|
colorScheme: leftBar.colorScheme
|
||||||
|
user: root.backend.users.get(index)
|
||||||
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
anchors.fill: parent
|
||||||
|
onClicked: {
|
||||||
|
var user = root.backend.users.get(index)
|
||||||
|
accounts.currentIndex = index
|
||||||
|
if (!user) return
|
||||||
|
if (user.loggedIn) {
|
||||||
|
rightContent.showAccount()
|
||||||
|
} else {
|
||||||
|
signIn.username = user.username
|
||||||
|
rightContent.showSignIn()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -18,7 +18,8 @@
|
|||||||
import QtQuick 2.13
|
import QtQuick 2.13
|
||||||
import QtQuick.Controls 2.12
|
import QtQuick.Controls 2.12
|
||||||
|
|
||||||
import Proton 4.0
|
import "."
|
||||||
|
import "./Proton"
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
|||||||
@ -19,6 +19,7 @@ import QtQuick 2.12
|
|||||||
import QtQuick.Controls 2.12
|
import QtQuick.Controls 2.12
|
||||||
import QtQuick.Controls.impl 2.12
|
import QtQuick.Controls.impl 2.12
|
||||||
import QtQuick.Templates 2.12 as T
|
import QtQuick.Templates 2.12 as T
|
||||||
|
import QtQuick.Layouts 1.12
|
||||||
|
|
||||||
import "." as Proton
|
import "." as Proton
|
||||||
|
|
||||||
@ -72,103 +73,70 @@ T.Button {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
contentItem: Item {
|
contentItem: RowLayout {
|
||||||
id: _contentItem
|
id: _contentItem
|
||||||
|
spacing: control.spacing
|
||||||
|
|
||||||
// Since contentItem is allways resized to maximum available size - we need to "incapsulate" label
|
Proton.Label {
|
||||||
// and icon within one single item with calculated fixed implicit size
|
colorScheme: root.colorScheme
|
||||||
|
id: label
|
||||||
|
|
||||||
implicitHeight: labelIcon.implicitHeight
|
Layout.fillWidth: true
|
||||||
implicitWidth: labelIcon.implicitWidth
|
Layout.fillHeight: true
|
||||||
|
|
||||||
Item {
|
elide: Text.ElideRight
|
||||||
id: labelIcon
|
horizontalAlignment: Qt.AlignHCenter
|
||||||
|
|
||||||
anchors.horizontalCenter: _contentItem.horizontalCenter
|
visible: !control.isIcon
|
||||||
anchors.verticalCenter: _contentItem.verticalCenter
|
text: control.text
|
||||||
|
color: {
|
||||||
width: Math.min(implicitWidth, control.availableWidth)
|
if (primary && !isIcon) {
|
||||||
height: Math.min(implicitHeight, control.availableHeight)
|
return "#FFFFFF"
|
||||||
|
} else {
|
||||||
implicitWidth: {
|
return control.colorScheme.text_norm
|
||||||
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: {
|
opacity: control.enabled || control.loading ? 1.0 : 0.5
|
||||||
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)
|
type: labelType
|
||||||
|
}
|
||||||
|
|
||||||
|
ColorImage {
|
||||||
|
id: iconImage
|
||||||
|
|
||||||
|
Layout.alignment: Qt.AlignCenter
|
||||||
|
|
||||||
|
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)
|
||||||
}
|
}
|
||||||
|
|
||||||
Proton.Label {
|
sourceSize.width: control.icon.width
|
||||||
colorScheme: root.colorScheme
|
sourceSize.height: control.icon.height
|
||||||
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
|
color: control.icon.color
|
||||||
horizontalAlignment: Qt.AlignHCenter
|
source: control.loading ? "../icons/Loader_16.svg" : control.icon.source
|
||||||
verticalAlignment: Qt.AlignVCenter
|
visible: control.loading || control.icon.source
|
||||||
|
|
||||||
text: control.text
|
RotationAnimation {
|
||||||
color: {
|
target: iconImage
|
||||||
if (primary && !isIcon) {
|
loops: Animation.Infinite
|
||||||
return "#FFFFFF"
|
duration: 1000
|
||||||
} else {
|
from: 0
|
||||||
return control.colorScheme.text_norm
|
to: 360
|
||||||
}
|
direction: RotationAnimation.Clockwise
|
||||||
}
|
running: control.loading
|
||||||
opacity: control.enabled || control.loading ? 1.0 : 0.5
|
|
||||||
|
|
||||||
type: labelType
|
|
||||||
}
|
|
||||||
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
|
|
||||||
sourceSize.width: control.icon.width
|
|
||||||
sourceSize.height: control.icon.height
|
|
||||||
|
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -133,6 +133,8 @@ T.Label {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
verticalAlignment: Text.AlignBottom
|
||||||
|
|
||||||
function link(url, text) {
|
function link(url, text) {
|
||||||
return `<a href="${url}">${text}</a>`
|
return `<a href="${url}">${text}</a>`
|
||||||
}
|
}
|
||||||
|
|||||||
@ -31,15 +31,14 @@ Window {
|
|||||||
height: contentLayout.implicitHeight
|
height: contentLayout.implicitHeight
|
||||||
width: contentLayout.implicitWidth
|
width: contentLayout.implicitWidth
|
||||||
|
|
||||||
flags: Qt.FramelessWindowHint | Qt.NoDropShadowWindowHint | Qt.WindowStaysOnTopHint
|
flags: (Qt.platform.os === "linux" ? Qt.Tool : 0) | Qt.FramelessWindowHint | Qt.NoDropShadowWindowHint | Qt.WindowStaysOnTopHint | Qt.WA_TranslucentBackground
|
||||||
|
color: "transparent"
|
||||||
|
|
||||||
property ColorScheme colorScheme: ProtonStyle.currentStyle
|
property ColorScheme colorScheme: ProtonStyle.currentStyle
|
||||||
|
|
||||||
property var backend
|
property var backend
|
||||||
property var notifications
|
property var notifications
|
||||||
|
|
||||||
color: "transparent"
|
|
||||||
|
|
||||||
signal showMainWindow()
|
signal showMainWindow()
|
||||||
signal showHelp()
|
signal showHelp()
|
||||||
signal showSettings()
|
signal showSettings()
|
||||||
@ -110,11 +109,10 @@ Window {
|
|||||||
Status {
|
Status {
|
||||||
id: statusItem
|
id: statusItem
|
||||||
|
|
||||||
Layout.fillHeight: true
|
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
|
||||||
Layout.topMargin: 20
|
Layout.topMargin: 12
|
||||||
Layout.bottomMargin: 20
|
Layout.bottomMargin: 12
|
||||||
|
|
||||||
colorScheme: root.colorScheme
|
colorScheme: root.colorScheme
|
||||||
backend: root.backend
|
backend: root.backend
|
||||||
@ -127,6 +125,9 @@ Window {
|
|||||||
colorScheme: root.colorScheme
|
colorScheme: root.colorScheme
|
||||||
secondary: true
|
secondary: true
|
||||||
|
|
||||||
|
Layout.topMargin: 12
|
||||||
|
Layout.bottomMargin: 12
|
||||||
|
|
||||||
visible: (statusItem.activeNotification && statusItem.activeNotification.action) ? true : false
|
visible: (statusItem.activeNotification && statusItem.activeNotification.action) ? true : false
|
||||||
action: statusItem.activeNotification && statusItem.activeNotification.action.length > 0 ? statusItem.activeNotification.action[0] : null
|
action: statusItem.activeNotification && statusItem.activeNotification.action.length > 0 ? statusItem.activeNotification.action[0] : null
|
||||||
}
|
}
|
||||||
@ -176,6 +177,8 @@ Window {
|
|||||||
snapMode: ListView.SnapToItem
|
snapMode: ListView.SnapToItem
|
||||||
boundsBehavior: Flickable.StopAtBounds
|
boundsBehavior: Flickable.StopAtBounds
|
||||||
|
|
||||||
|
spacing: 4
|
||||||
|
|
||||||
delegate: Item {
|
delegate: Item {
|
||||||
id: viewItem
|
id: viewItem
|
||||||
width: ListView.view.width
|
width: ListView.view.width
|
||||||
@ -192,14 +195,17 @@ Window {
|
|||||||
AccountDelegate {
|
AccountDelegate {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
|
||||||
Layout.margins: 12
|
Layout.topMargin: 12
|
||||||
|
Layout.bottomMargin: 12
|
||||||
|
|
||||||
user: viewItem.user
|
user: viewItem.user
|
||||||
colorScheme: root.colorScheme
|
colorScheme: root.colorScheme
|
||||||
}
|
}
|
||||||
|
|
||||||
Button {
|
Button {
|
||||||
Layout.margins: 12
|
Layout.topMargin: 12
|
||||||
|
Layout.bottomMargin: 12
|
||||||
|
|
||||||
colorScheme: root.colorScheme
|
colorScheme: root.colorScheme
|
||||||
visible: viewItem.user ? !viewItem.user.loggedIn : false
|
visible: viewItem.user ? !viewItem.user.loggedIn : false
|
||||||
text: qsTr("Sign in")
|
text: qsTr("Sign in")
|
||||||
|
|||||||
@ -27,4 +27,7 @@ Window {
|
|||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
colorScheme: ProtonStyle.currentStyle
|
colorScheme: ProtonStyle.currentStyle
|
||||||
}
|
}
|
||||||
|
onClosing: {
|
||||||
|
Qt.quit()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user