GODT-1272: Fix status view layout

This commit is contained in:
Alexander Bilyak
2021-10-07 11:53:51 +00:00
committed by Jakub
parent 94347d95df
commit ea821b1bd8
8 changed files with 109 additions and 136 deletions

View File

@ -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()
}
} }

View File

@ -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
} }
} }

View File

@ -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()
}
} }
} }
} }

View File

@ -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

View File

@ -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
}
} }
} }
} }

View File

@ -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>`
} }

View File

@ -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")

View File

@ -27,4 +27,7 @@ Window {
anchors.fill: parent anchors.fill: parent
colorScheme: ProtonStyle.currentStyle colorScheme: ProtonStyle.currentStyle
} }
onClosing: {
Qt.quit()
}
} }