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 _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 : {
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]
}
signal clicked()
// width expected to be set by parent object
implicitHeight : children[0].implicitHeight + 2*root._topBottomMargins
implicitHeight : children[0].implicitHeight
enum ViewType{
SmallView, LargeView
@ -77,10 +63,6 @@ Item {
top: root.top
left: root.left
right: root.rigth
leftMargin : root._leftRightMargins
rightMargin : root._leftRightMargins
topMargin : root._topBottomMargins
bottomMargin : root._topBottomMargins
}
Rectangle {
@ -124,7 +106,7 @@ Item {
Label {
Layout.maximumWidth: root.width - (
root._spacing + avatar.width + 2*root._leftRightMargins
root._spacing + avatar.width
)
colorScheme: root.colorScheme
@ -192,9 +174,4 @@ Item {
Layout.fillWidth: true
}
}
MouseArea {
anchors.fill: root
onClicked: root.clicked()
}
}

View File

@ -125,9 +125,9 @@ QtObject {
screen = Qt.application.screens[i]
if (
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
delegate: AccountDelegate{
width: leftBar.width - 2*accounts._leftRightMargins
delegate: Item {
id: accountDelegate
colorScheme: leftBar.colorScheme
user: root.backend.users.get(index)
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()
width: leftBar.width - 2*accounts._leftRightMargins
implicitHeight: children[0].implicitHeight + children[0].anchors.topMargin + children[0].anchors.bottomMargin
implicitWidth: children[0].implicitWidth + children[0].anchors.leftMargin + children[0].anchors.rightMargin
AccountDelegate {
id: accountDelegate
anchors.fill: parent
anchors.topMargin: 8
anchors.bottomMargin: 8
anchors.leftMargin: 12
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.Controls 2.12
import Proton 4.0
import "."
import "./Proton"
Rectangle {
anchors.fill: parent

View File

@ -19,6 +19,7 @@ import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
import QtQuick.Templates 2.12 as T
import QtQuick.Layouts 1.12
import "." as Proton
@ -72,103 +73,70 @@ T.Button {
}
}
contentItem: Item {
contentItem: RowLayout {
id: _contentItem
spacing: control.spacing
// 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
Proton.Label {
colorScheme: root.colorScheme
id: label
implicitHeight: labelIcon.implicitHeight
implicitWidth: labelIcon.implicitWidth
Layout.fillWidth: true
Layout.fillHeight: true
Item {
id: labelIcon
elide: Text.ElideRight
horizontalAlignment: Qt.AlignHCenter
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)
visible: !control.isIcon
text: control.text
color: {
if (primary && !isIcon) {
return "#FFFFFF"
} else {
return control.colorScheme.text_norm
}
}
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
opacity: control.enabled || control.loading ? 1.0 : 0.5
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 {
colorScheme: root.colorScheme
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
sourceSize.width: control.icon.width
sourceSize.height: control.icon.height
elide: Text.ElideRight
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
color: control.icon.color
source: control.loading ? "../icons/Loader_16.svg" : control.icon.source
visible: control.loading || control.icon.source
text: control.text
color: {
if (primary && !isIcon) {
return "#FFFFFF"
} else {
return control.colorScheme.text_norm
}
}
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
}
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) {
return `<a href="${url}">${text}</a>`
}

View File

@ -31,15 +31,14 @@ Window {
height: contentLayout.implicitHeight
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 var backend
property var notifications
color: "transparent"
signal showMainWindow()
signal showHelp()
signal showSettings()
@ -110,11 +109,10 @@ Window {
Status {
id: statusItem
Layout.fillHeight: true
Layout.fillWidth: true
Layout.topMargin: 20
Layout.bottomMargin: 20
Layout.topMargin: 12
Layout.bottomMargin: 12
colorScheme: root.colorScheme
backend: root.backend
@ -127,6 +125,9 @@ Window {
colorScheme: root.colorScheme
secondary: true
Layout.topMargin: 12
Layout.bottomMargin: 12
visible: (statusItem.activeNotification && statusItem.activeNotification.action) ? true : false
action: statusItem.activeNotification && statusItem.activeNotification.action.length > 0 ? statusItem.activeNotification.action[0] : null
}
@ -176,6 +177,8 @@ Window {
snapMode: ListView.SnapToItem
boundsBehavior: Flickable.StopAtBounds
spacing: 4
delegate: Item {
id: viewItem
width: ListView.view.width
@ -192,14 +195,17 @@ Window {
AccountDelegate {
Layout.fillWidth: true
Layout.margins: 12
Layout.topMargin: 12
Layout.bottomMargin: 12
user: viewItem.user
colorScheme: root.colorScheme
}
Button {
Layout.margins: 12
Layout.topMargin: 12
Layout.bottomMargin: 12
colorScheme: root.colorScheme
visible: viewItem.user ? !viewItem.user.loggedIn : false
text: qsTr("Sign in")

View File

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