ESCA111/neochat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve consistency of emoji picker

Browse Source 
Now use Kirigami.Units and Kirigami.Theme, this also fix at the same
time a few issues on the dark theme.
This commit is contained in:
Carl Schwan
2020-11-16 11:05:55 +01:00
parent 9120521fc5
commit 76728cb3f9
2 changed files with 35 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
imports/NeoChat/Component/ChatTextInput.qml
View File

@@ -52,6 +52,16 @@ Control {
contentItem: ColumnLayout {
spacing: 0
EmojiPicker {
id: emojiPicker
Layout.fillWidth: true
visible: false
textArea: inputField
emojiModel: EmojiModel { id: emojiModel }
}
RowLayout {
Layout.fillWidth: true
@@ -70,8 +80,8 @@ Control {
contentItem: RowLayout {
Kirigami.Avatar {
Layout.preferredWidth: 24
Layout.preferredHeight: 24
Layout.preferredWidth: Kirigami.Units.gridUnit
Layout.preferredHeight: Kirigami.Units.gridUnit
source: replyUser ? "image://mxc/" + replyUser.avatarMediaId: ""
name: replyUser ? replyUser.displayName : "No name"
@@ -132,22 +142,21 @@ Control {
}
contentItem: RowLayout {
spacing: 6
spacing: Kirigami.Units.largeSpacing
Text {
width: 24
height: 24
Label {
width: Kirigami.Units.gridUnit
height: Kirigami.Units.gridUnit
visible: isEmoji
text: autoCompleteText
font.pixelSize: 24
font.family: "Emoji"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
Kirigami.Avatar {
Layout.preferredWidth: 24
Layout.preferredHeight: 24
Layout.preferredWidth: Kirigami.Units.gridUnit
Layout.preferredHeight: Kirigami.Units.gridUnit
source: modelData.avatarMediaId ? "image://mxc/" + modelData.avatarMediaId : ""
color: modelData.color ? Qt.darker(modelData.color, 1.1) : null
@@ -159,7 +168,7 @@ Control {
text: autoCompleteText
color: highlighted ? Kirigami.Theme.highlightTextColor : Kirigami.Theme.textColor
verticalAlignment: Text.AlignVCenter
rightPadding: 8
rightPadding: Kirigami.Units.largeSpacing
}
}
@@ -173,12 +182,9 @@ Control {
}
}
Rectangle {
Kirigami.Separator {
Layout.fillWidth: true
Layout.preferredHeight: 1
Layout.leftMargin: 12
Layout.rightMargin: 12
visible: emojiPicker.visible || replyItem.visible || autoCompleteListView.visible
}
@@ -439,16 +445,6 @@ Control {
}
}
}
EmojiPicker {
id: emojiPicker
Layout.fillWidth: true
visible: false
textArea: inputField
emojiModel: EmojiModel { id: emojiModel }
}
}
function insert(str) {

38
imports/NeoChat/Component/Emoji/EmojiPicker.qml
View File

@@ -6,12 +6,11 @@
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 NeoChat.Component 1.0
import org.kde.neochat 1.0
import NeoChat.Setting 1.0
ColumnLayout {
property string emojiCategory: "history"
@@ -22,9 +21,7 @@ ColumnLayout {
ListView {
Layout.fillWidth: true
Layout.preferredHeight: 48
Layout.leftMargin: 24
Layout.rightMargin: 24
Layout.preferredHeight: Kirigami.Units.gridUnit * 2 + 2 // for the focus line
boundsBehavior: Flickable.DragOverBounds
@@ -45,14 +42,14 @@ ColumnLayout {
}
delegate: ItemDelegate {
width: 64
height: 48
width: Kirigami.Units.gridUnit * 2
height: Kirigami.Units.gridUnit * 2
contentItem: Label {
contentItem: Kirigami.Heading {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
level: 1
font.pixelSize: 24
font.family: 'emoji'
text: label
}
@@ -65,28 +62,24 @@ ColumnLayout {
visible: emojiCategory === category
color: Material.accent
color: Kirigami.Theme.focusColor
}
onClicked: emojiCategory = category
}
}
Rectangle {
Kirigami.Separator {
Layout.fillWidth: true
Layout.preferredHeight: 1
Layout.leftMargin: 12
Layout.rightMargin: 12
color: MSettings.darkTheme ? "#424242" : "#e7ebeb"
}
GridView {
Layout.fillWidth: true
Layout.preferredHeight: 180
Layout.preferredHeight: Kirigami.Units.gridUnit * 8
cellWidth: 48
cellHeight: 48
cellWidth: Kirigami.Units.gridUnit * 2
cellHeight: Kirigami.Units.gridUnit * 2
boundsBehavior: Flickable.DragOverBounds
@@ -117,14 +110,13 @@ ColumnLayout {
}
delegate: ItemDelegate {
width: 48
height: 48
width: Kirigami.Units.gridUnit * 2
height: Kirigami.Units.gridUnit * 2
contentItem: Label {
contentItem: Kirigami.Heading {
level: 1
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: 32
font.family: 'emoji'
text: modelData.unicode
}