Improve Kirigami

This commit is contained in:
Carl Schwan
2020-10-03 18:29:54 +02:00
parent 2532a86e7e
commit 88ea6f2ea1
22 changed files with 270 additions and 267 deletions

View File

@@ -1,56 +0,0 @@
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0
import Spectral.Setting 0.1
Item {
property string hint: "H"
property string source: ""
property color color: MPalette.accent
readonly property url realSource: source ? "image://mxc/" + source : ""
id: root
Image {
anchors.fill: parent
id: image
visible: realSource
source: width < 1 ? "" : realSource
sourceSize.width: width
sourceSize.height: width
fillMode: Image.PreserveAspectCrop
mipmap: true
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: image.width
height: image.width
radius: width / 2
}
}
}
Rectangle {
anchors.fill: parent
visible: !realSource || image.status != Image.Ready
radius: height / 2
color: root.color
antialiasing: true
Label {
anchors.centerIn: parent
color: "white"
text: hint[0].toUpperCase()
font.pixelSize: root.width / 2
font.weight: Font.Medium
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
}
}

View File

@@ -5,6 +5,7 @@ import QtQuick.Controls.Material 2.12
import QtGraphicalEffects 1.0
import Qt.labs.platform 1.0 as Platform
import QtMultimedia 5.12
import org.kde.kirigami 2.13 as Kirigami
import Spectral 0.1
import Spectral.Setting 0.1
@@ -25,14 +26,14 @@ RowLayout {
z: -5
Avatar {
Kirigami.Avatar {
Layout.preferredWidth: 36
Layout.preferredHeight: 36
Layout.alignment: Qt.AlignBottom
visible: avatarVisible
hint: author.displayName
source: author.avatarMediaId
name: author.displayName
source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : ""
color: author.color
Component {

View File

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.12
import QtQuick.Controls.Material 2.12
import QtGraphicalEffects 1.0
import Qt.labs.platform 1.0 as Platform
import org.kde.kirigami 2.13 as Kirigami
import Spectral 0.1
import Spectral.Setting 0.1
@@ -29,14 +30,14 @@ RowLayout {
z: -5
Avatar {
Kirigami.Avatar {
Layout.preferredWidth: 36
Layout.preferredHeight: 36
Layout.alignment: Qt.AlignBottom
visible: avatarVisible
hint: author.displayName
source: author.avatarMediaId
name: author.displayName
source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : ""
color: author.color
Component {

View File

@@ -1,8 +1,9 @@
import QtQuick 2.12
import QtQuick.Controls 2.12 as Controls
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.12
import org.kde.kirigami 2.4 as Kirigami
import org.kde.kirigami 2.13 as Kirigami
import Spectral 0.1
import Spectral.Setting 0.1
@@ -25,15 +26,15 @@ RowLayout {
spacing: Kirigami.Units.largeSpacing
Avatar {
Kirigami.Avatar {
Layout.preferredWidth: Kirigami.Units.gridUnit * 1.5
Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5
Layout.alignment: Qt.AlignTop
visible: showAuthor
hint: author.displayName
source: author.avatarMediaId
name: author.displayName
source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : ""
color: author.color
}
@@ -43,71 +44,92 @@ RowLayout {
visible: !showAuthor
}
Item {
Layout.preferredWidth: column.width + 16
Layout.preferredHeight: column.height + 16
ColumnLayout {
Layout.fillWidth: true
/*RectangularGlow {
anchors.fill: messageBubble
glowRadius: 0.8
spread: 0.3
cornerRadius: messageBubble.radius + glowRadius
color: Qt.darker(messageBubble.color, 1.2)
}*/
// inner area of the message bubble
/*Rectangle {
id: messageBubble
anchors.fill: parent
radius: 2
color: authorColor
}*/
id: column
spacing: Kirigami.Units.smallSpacing
Controls.Label {
ColumnLayout {
id: column
Layout.fillWidth: true
anchors.centerIn: parent
spacing: Kirigami.Units.smallSpacing
visible: showAuthor
text: author.displayName
font.bold: true
color: Kirigami.Theme.activeTextColor
wrapMode: Text.Wrap
}
RowLayout {
Layout.fillWidth: true
visible: replyVisible
Rectangle {
Layout.preferredWidth: 4
Layout.fillHeight: true
color: Kirigami.Theme.highlightColor
}
Avatar {
Layout.preferredWidth: Kirigami.Units.gridUnit * 1.5
Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5
Layout.alignment: Qt.AlignTop
source: replyVisible ? reply.author.avatarMediaId : ""
hint: replyVisible ? reply.author.displayName : "H"
color: replyVisible ? reply.author.color : MPalette.accent
}
ColumnLayout {
Controls.Label {
Layout.fillWidth: true
Controls.Label {
Layout.fillWidth: true
visible: showAuthor
text: replyVisible ? reply.author.displayName : ""
color: Kirigami.Theme.activeTextColor
wrapMode: Text.Wrap
text: author.displayName
font.bold: true
color: Kirigami.Theme.activeTextColor
wrapMode: Text.Wrap
}
RowLayout {
Layout.fillWidth: true
visible: replyVisible
Rectangle {
Layout.preferredWidth: 4
Layout.fillHeight: true
color: Kirigami.Theme.highlightColor
}
Text {
Kirigami.Avatar {
Layout.preferredWidth: Kirigami.Units.gridUnit * 1.5
Layout.preferredHeight: Kirigami.Units.gridUnit * 1.5
Layout.alignment: Qt.AlignTop
source: replyVisible && reply.author.avatarMediaId ? "image://mxc/" + reply.author.avatarMediaId : ""
name: replyVisible ? reply.author.displayName : "H"
color: replyVisible ? reply.author.color : MPalette.accent
}
ColumnLayout {
Layout.fillWidth: true
text: "<style>pre {white-space: pre-wrap} a{color: " + color + ";} .user-pill{}</style>" + (replyVisible ? reply.display : "")
Controls.Label {
Layout.fillWidth: true
color: Kirigami.Theme.textColor
// selectionColor: Kirigami.Theme.highlightColor
// selectedTextColor: Kirigami.Theme.highlightedTextColor
text: replyVisible ? reply.author.displayName : ""
color: Kirigami.Theme.activeTextColor
wrapMode: Text.Wrap
}
// selectByMouse: true
// readOnly: true
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
textFormat: Text.RichText
Text {
Layout.fillWidth: true
text: replyVisible ? reply.display : ""
color: Kirigami.Theme.textColor
// selectionColor: Kirigami.Theme.highlightColor
// selectedTextColor: Kirigami.Theme.highlightedTextColor
// selectByMouse: true
// readOnly: true
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
textFormat: Text.RichText
}
}
}
}

View File

@@ -2,6 +2,7 @@ import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls.Material 2.12
import org.kde.kirigami 2.13 as Kirigami
import Spectral.Component 2.0
import Spectral.Dialog 2.0
@@ -11,11 +12,11 @@ import Spectral.Setting 0.1
RowLayout {
id: row
Avatar {
Kirigami.Avatar {
Layout.preferredWidth: 24
Layout.preferredHeight: 24
hint: author.displayName
name: author.displayName
source: author.avatarMediaId
color: author.color

View File

@@ -7,18 +7,12 @@ import org.kde.kirigami 2.4 as Kirigami
Item {
default property alias innerObject : column.children
readonly property int horizontalPadding: Kirigami.Units.largeSpacing
readonly property int verticalPadding: Kirigami.Units.smallSpacing
height: column.implicitHeight + verticalPadding * 2
height: column.implicitHeight
ColumnLayout {
x: horizontalPadding
y: verticalPadding
width: parent.width - horizontalPadding * 2
id: column
x: horizontalPadding
width: parent.width - Kirigami.Units.largeSpacing * 2
SectionDelegate {
Layout.maximumWidth: parent.width
@@ -27,10 +21,4 @@ Item {
visible: showSection
}
}
Controls.ItemDelegate {
anchors.fill: parent
z: -1
}
}

View File

@@ -5,6 +5,7 @@ import QtQuick.Controls.Material 2.12
import QtGraphicalEffects 1.0
import QtMultimedia 5.12
import Qt.labs.platform 1.0 as Platform
import org.kde.kirigami 2.13 as Kirigami
import Spectral 0.1
import Spectral.Setting 0.1
@@ -46,14 +47,14 @@ RowLayout {
}
}
Avatar {
Kirigami.Avatar {
Layout.preferredWidth: 36
Layout.preferredHeight: 36
Layout.alignment: Qt.AlignBottom
visible: avatarVisible
hint: author.displayName
source: author.avatarMediaId
name: author.displayName
source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : ""
color: author.color
Component {

View File

@@ -5,6 +5,5 @@ SideNavButton 2.0 SideNavButton.qml
ScrollHelper 2.0 ScrollHelper.qml
AutoListView 2.0 AutoListView.qml
AutoTextField 2.0 AutoTextField.qml
Avatar 2.0 Avatar.qml
FullScreenImage 2.0 FullScreenImage.qml
AutoRectangle 2.0 AutoRectangle.qml