Commit c797a9fd authored by Noah Davis's avatar Noah Davis 🌵
Browse files

Change sizing and alignment to be more like the mockup

parent e50082b6
......@@ -76,7 +76,10 @@ PlasmaComponents.ItemDelegate {
id: frame
anchors {
fill: parent
margins: delegate.isCurrent ? Kirigami.Units.largeSpacing - innerFrame.anchors.margins : Kirigami.Units.largeSpacing
leftMargin: delegate.isCurrent ? Kirigami.Units.largeSpacing - innerFrame.anchors.margins : Kirigami.Units.largeSpacing
rightMargin: delegate.isCurrent ? Kirigami.Units.largeSpacing - innerFrame.anchors.margins : Kirigami.Units.largeSpacing
topMargin: delegate.isCurrent ? -Kirigami.Units.smallSpacing : Kirigami.Units.largeSpacing
bottomMargin: delegate.isCurrent ? -Kirigami.Units.smallSpacing : Kirigami.Units.largeSpacing
}
radius: delegate.isCurrent ? 6 : 3
color: delegate.isCurrent ? delegate.Kirigami.Theme.highlightColor : delegate.Kirigami.Theme.backgroundColor
......
......@@ -41,11 +41,6 @@ AbstractDelegate {
}
}
leftPadding: units.largeSpacing*2
topPadding: units.largeSpacing*2
rightPadding: units.largeSpacing*2
bottomPadding: units.largeSpacing*2
Kirigami.Theme.inherit: !imagePalette.useColors
Kirigami.Theme.textColor: imagePalette.textColor
Kirigami.Theme.backgroundColor: imagePalette.backgroundColor
......@@ -73,9 +68,16 @@ AbstractDelegate {
id: content
PlasmaCore.IconItem {
id: icon
width: listView.cellWidth - delegate.leftPadding - (delegate.isCurrent ? 0 : delegate.rightPadding)
width: delegate.isCurrent ? Kirigami.Units.iconSizes.huge + Kirigami.Units.largeSpacing*2 : Kirigami.Units.iconSizes.huge
height: width
y: delegate.isCurrent ? content.height/2 - height/2 : 0
source: delegate.icon.name || delegate.icon.source
Behavior on y {
YAnimator {
duration: Kirigami.Units.longDuration
easing.type: Easing.InOutQuad
}
}
Behavior on width {
NumberAnimation {
duration: Kirigami.Units.longDuration
......@@ -85,8 +87,11 @@ AbstractDelegate {
}
ColumnLayout {
width: listView.cellWidth - delegate.leftPadding - delegate.rightPadding
anchors.right: parent.right
anchors {
left: delegate.isCurrent ? icon.right : parent.left
right: content.right
leftMargin: delegate.isCurrent ? Kirigami.Units.largeSpacing : 0
}
y: delegate.isCurrent ? content.height/2 - height/2 : content.height - label.height
Behavior on x {
XAnimator {
......@@ -105,9 +110,10 @@ AbstractDelegate {
id: label
visible: text.length > 0
Layout.fillWidth: true
Layout.fillHeight: true
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignHCenter
horizontalAlignment: delegate.isCurrent ? Text.AlignLeft : Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
maximumLineCount: 2
elide: Text.ElideRight
color: imagePalette.textColor
......@@ -117,16 +123,17 @@ AbstractDelegate {
PlasmaComponents.Label {
visible: text.length > 0
Layout.fillWidth: true
Layout.fillHeight: true
opacity: delegate.isCurrent
Behavior on opacity {
OpacityAnimator {
duration: Kirigami.Units.longDuration
duration: Kirigami.Units.longDuration*2
easing.type: Easing.InOutQuad
}
}
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignHCenter
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
maximumLineCount: 2
elide: Text.ElideRight
color: imagePalette.textColor
......
......@@ -48,7 +48,6 @@ FocusScope {
property Item navigationUp
property Item navigationDown
Kirigami.Heading {
id: header
anchors {
......@@ -56,6 +55,7 @@ FocusScope {
right: parent.right
top: parent.top
}
bottomPadding: Kirigami.Units.largeSpacing
text: title
layer.enabled: true
color: "white"
......@@ -68,6 +68,7 @@ FocusScope {
right: parent.right
top: header.bottom
bottom: parent.bottom
leftMargin: -Kirigami.Units.largeSpacing
}
focus: true
......@@ -81,7 +82,7 @@ FocusScope {
cacheBuffer: width
implicitHeight: cellWidth + units.gridUnit * 3
rightMargin: width-cellWidth*3
readonly property int cellWidth: Math.floor(width / columns)
readonly property int cellWidth: (Kirigami.Units.iconSizes.huge + Kirigami.Units.largeSpacing*4)
preferredHighlightBegin: cellWidth
preferredHighlightEnd: cellWidth
......
......@@ -35,7 +35,7 @@ import org.kde.mycroft.bigscreen 1.0 as BigScreen
FocusScope {
anchors {
fill: parent
margins: units.smallSpacing * 2
margins: Kirigami.Units.largeSpacing * 3
}
ColumnLayout {
......@@ -43,6 +43,7 @@ FocusScope {
anchors {
left: parent.left
right: parent.right
leftMargin: Kirigami.Units.largeSpacing
}
property Item currentSection
y: currentSection ? -currentSection.y : 0
......@@ -54,7 +55,7 @@ FocusScope {
}
}
height: parent.height
spacing: 0
spacing: Kirigami.Units.largeSpacing*4
BigScreen.TileView {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment