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

Binary file not shown.

View File

@@ -2,7 +2,7 @@ import QtQuick 2.12
import QtQuick.Controls 2.12 as Controls
import QtQuick.Layouts 1.12
import org.kde.kirigami 2.4 as Kirigami
import org.kde.kirigami 2.13 as Kirigami
import SortFilterProxyModel 0.2
@@ -10,20 +10,25 @@ import Spectral.Component 2.0
import Spectral 0.1
Kirigami.ScrollablePage {
id: page
property var roomListModel
property var enteredRoom
property var searchText
signal enterRoom(var room)
signal leaveRoom(var room)
title: "Rooms"
actions {
main: Kirigami.Action {
iconName: "document-edit"
}
contextualActions: []
titleDelegate: Kirigami.SearchField {
Layout.topMargin: Kirigami.Units.smallSpacing
Layout.bottomMargin: Kirigami.Units.smallSpacing
Layout.fillHeight: true
Layout.fillWidth: true
onTextChanged: page.searchText = text
}
ListView {
id: messageListView
@@ -66,6 +71,11 @@ Kirigami.ScrollablePage {
filters: [
ExpressionFilter {
expression: joinState != "upgraded"
},
RegExpFilter {
roleName: "name"
pattern: searchText
caseSensitivity: Qt.CaseInsensitive
}
]
}
@@ -89,12 +99,12 @@ Kirigami.ScrollablePage {
contentItem: RowLayout {
spacing: Kirigami.Units.largeSpacing
Avatar {
Kirigami.Avatar {
Layout.preferredWidth: height
Layout.fillHeight: true
source: avatar
hint: name || "No Name"
source: avatar ? "image://mxc/" + avatar : ""
name: model.name || "No Name"
}
ColumnLayout {
@@ -108,11 +118,17 @@ Kirigami.ScrollablePage {
Layout.fillWidth: true
Layout.fillHeight: true
text: name || "No Name"
font.pixelSize: 16
font.bold: unreadCount >= 0
elide: Text.ElideRight
wrapMode: Text.NoWrap
}
Controls.Label {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter
text: (lastEvent == "" ? topic : lastEvent).replace(/(\r\n\t|\n|\r\t)/gm," ")
font.pixelSize: 13

View File

@@ -1,7 +1,8 @@
import QtQuick 2.12
import QtQuick.Controls 2.12 as Controls
import QtQuick.Controls 2.12 as QQC2
import QtQuick.Layouts 1.12
import Qt.labs.qmlmodels 1.0
import QtQuick.Controls.Material 2.12
import org.kde.kirigami 2.4 as Kirigami
@@ -9,6 +10,8 @@ import SortFilterProxyModel 0.2
import Spectral.Component 2.0
import Spectral.Component.Timeline 2.0
import Spectral.Dialog 2.0
import Spectral.Effect 2.0
import Spectral 0.1
Kirigami.ScrollablePage {
@@ -18,18 +21,73 @@ Kirigami.ScrollablePage {
title: "Messages"
actions {
main: Kirigami.Action {
iconName: "document-edit"
}
contextualActions: []
}
MessageEventModel {
id: messageEventModel
room: currentRoom
}
ImageClipboard {
id: imageClipboard
}
QQC2.Popup {
anchors.centerIn: parent
id: attachDialog
padding: 16
contentItem: RowLayout {
QQC2.ToolButton {
Layout.preferredWidth: 160
Layout.fillHeight: true
icon.name: 'mail-attachment'
text: "Choose local file"
onClicked: {
attachDialog.close()
var fileDialog = openFileDialog.createObject(ApplicationWindow.overlay)
fileDialog.chosen.connect(function(path) {
if (!path) return
roomPanelInput.attach(path)
})
fileDialog.open()
}
}
Kirigami.Separator {}
QQC2.ToolButton {
Layout.preferredWidth: 160
Layout.fillHeight: true
padding: 16
icon.name: 'insert-image'
text: "Clipboard image"
onClicked: {
var localPath = StandardPaths.writableLocation(StandardPaths.CacheLocation) + "/screenshots/" + (new Date()).getTime() + ".png"
if (!imageClipboard.saveImage(localPath)) return
roomPanelInput.attach(localPath)
attachDialog.close()
}
}
}
}
Component {
id: openFileDialog
OpenFileDialog {}
}
SortFilterProxyModel {
id: sortedMessageEventModel
@@ -232,16 +290,9 @@ Kirigami.ScrollablePage {
}
}
footer: RowLayout {
Controls.ToolButton {
contentItem: Kirigami.Icon {
source: "mail-attachment"
}
}
Controls.TextField {
Layout.fillWidth: true
}
footer: RoomPanelInput {
id: roomPanelInput
Layout.fillWidth: true
}
background: Item {}

View File

@@ -1,7 +1,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.Component.Emoji 2.0
@@ -30,14 +30,20 @@ Control {
id: root
padding: 0
background: Rectangle {
color: MSettings.darkTheme ? "#303030" : "#fafafa"
radius: 24
layer.enabled: true
layer.effect: ElevationEffect {
elevation: 1
color: Kirigami.Theme.backgroundColor
Kirigami.Separator {
Rectangle {
anchors.fill: parent
color: Kirigami.Theme.focusColor
visible: chatTextInput.activeFocus
}
anchors {
left: parent.left
right: parent.right
top: parent.top
}
}
}
@@ -59,18 +65,13 @@ Control {
padding: 4
background: Rectangle {
radius: height / 2
color: replyUser ? Qt.darker(replyUser.color, 1.1) : MPalette.accent
}
contentItem: RowLayout {
Avatar {
Kirigami.Avatar {
Layout.preferredWidth: 24
Layout.preferredHeight: 24
source: replyUser ? replyUser.avatarMediaId : ""
hint: replyUser ? replyUser.displayName : "No name"
source: replyUser ? "image://mxc/" + replyUser.avatarMediaId: ""
name: replyUser ? replyUser.displayName : "No name"
}
Label {
@@ -87,7 +88,6 @@ Control {
TextEdit {
Layout.fillWidth: true
color: MPalette.foreground
text: "<style>a{color: " + color + ";} .user-pill{}</style>" + replyContent
font.family: window.font.family
@@ -96,7 +96,6 @@ Control {
readOnly: true
wrapMode: Label.Wrap
selectedTextColor: "white"
selectionColor: MPalette.accent
textFormat: Text.RichText
}
}
@@ -159,21 +158,19 @@ Control {
horizontalAlignment: Text.AlignHCenter
}
Avatar {
Kirigami.Avatar {
Layout.preferredWidth: 24
Layout.preferredHeight: 24
visible: !isEmoji
source: modelData.avatarMediaId ?? null
color: modelData.color ? Qt.darker(modelData.color, 1.1) : MPalette.accent
source: modelData.avatarMediaId ? "image://mxc/" + modelData.avatarMediaId : ""
color: modelData.color ? Qt.darker(modelData.color, 1.1) : null
}
Label {
Layout.fillHeight: true
visible: !isEmoji
text: autoCompleteText
color: highlighted ? "white" : MPalette.foreground
color: highlighted ? Kirigami.Theme.highlightTextColor : Kirigami.Theme.textColor
verticalAlignment: Text.AlignVCenter
rightPadding: 8
}
@@ -196,8 +193,6 @@ Control {
Layout.rightMargin: 12
visible: emojiPicker.visible || replyItem.visible || autoCompleteListView.visible
color: MSettings.darkTheme ? "#424242" : "#e7ebeb"
}
RowLayout {
@@ -213,9 +208,7 @@ Control {
id: uploadButton
visible: !isReply && !hasAttachment
contentItem: MaterialIcon {
icon: "\ue226"
}
icon.name: "mail-attachment"
onClicked: {
if (imageClipboard.hasImage) {
@@ -264,13 +257,7 @@ Control {
visible: hasAttachment
rightPadding: 8
background: Rectangle {
color: MPalette.accent
radius: height / 2
antialiasing: true
}
contentItem: RowLayout {
spacing: 0
@@ -280,15 +267,11 @@ Control {
id: cancelAttachmentButton
contentItem: MaterialIcon {
icon: "\ue5cd"
color: "white"
font.pixelSize: 18
}
icon.name: "mail-attachement"
onClicked: {
hasAttachment = false
attachmentPath = ""
hasAttachment = false;
attachmentPath = "";
}
}
@@ -448,19 +431,13 @@ Control {
}
}
MaterialIcon {
ToolButton {
flat: true
Layout.alignment: Qt.AlignVCenter
icon: "\ue165"
icon.name: "format-text-code"
font.pixelSize: 16
color: MPalette.foreground
opacity: MSettings.markdownFormatting ? 1 : 0.3
MouseArea {
anchors.fill: parent
onClicked: MSettings.markdownFormatting = !MSettings.markdownFormatting
}
onClicked: MSettings.markdownFormatting = !MSettings.markdownFormatting
}
ToolButton {
@@ -469,10 +446,7 @@ Control {
Layout.alignment: Qt.AlignBottom
id: emojiButton
contentItem: MaterialIcon {
icon: "\ue24e"
}
icon.name: "document-send"
onClicked: emojiPicker.visible = !emojiPicker.visible
}

View File

@@ -0,0 +1,20 @@
import QtQuick 2.12
import QtQuick.Controls 2.12 as Controls
import QtQuick.Layouts 1.12
import Qt.labs.qmlmodels 1.0
import org.kde.kirigami 2.12 as Kirigami
import SortFilterProxyModel 0.2
import Spectral.Component 2.0
import Spectral.Component.Timeline 2.0
import Spectral 0.1
Kirigami.GlobalDrawer {
id: root
modal: true
collapsible: true
collapsed: Kirigami.Settings.isMobile
}

View File

@@ -2,3 +2,4 @@ module Spectral.Panel
RoomPanel 2.0 RoomPanel.qml
RoomListPanel 2.0 RoomListPanel.qml
RoomDrawer 2.0 RoomDrawer.qml
SpectralSidebar 2.0 SpectralSidebar.qml