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

Improve emojis & reactions

Browse Source
This commit is contained in:
Tobias Fella
2022-12-05 16:46:55 +00:00
parent 1f83ab4450
commit 9060de1d60
11 changed files with 422 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/qml/Component/Emoji/EmojiPicker.qml
View File

@@ -1,63 +1,54 @@
// SPDX-FileCopyrightText: 2018-2019 Black Hat <bhat@encom.eu.org>
// SPDX-License-Identifier: GPL-3.0-only
// SPDX-FileCopyrightText: 2022 Tobias Fella <fella@posteo.de>
// SPDX-License-Identifier: GPL-2.0-or-later
import QtQuick 2.15
import QtQuick.Controls 2.15 as QQC2
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.15 as Kirigami
import org.kde.neochat 1.0
ColumnLayout {
id: _picker
id: emojiPicker
property var emojiCategory: EmojiModel.History
property var textArea
readonly property var emojiModel: EmojiModel
readonly property int categoryIconSize: 45
readonly property var currentCategory: EmojiModel.categoriesWithCustom[categories.currentIndex].category
readonly property int categoryCount: categories.count
signal chosen(string emoji)
spacing: 0
onActiveFocusChanged: if (activeFocus) categories.forceActiveFocus()
QQC2.ScrollView {
Layout.fillWidth: true
Layout.preferredHeight: Kirigami.Units.gridUnit * 2 + QQC2.ScrollBar.horizontal.height + 2 // for the focus line
QQC2.ScrollBar.horizontal.height: QQC2.ScrollBar.horizontal.visible ? QQC2.ScrollBar.horizontal.implicitHeight : 0
Layout.preferredHeight: emojiPicker.categoryIconSize + QQC2.ScrollBar.horizontal.height
ListView {
id: categories
clip: true
orientation: ListView.Horizontal
model: EmojiModel.categories
delegate: QQC2.ItemDelegate {
id: del
keyNavigationEnabled: true
keyNavigationWraps: true
Keys.forwardTo: searchField
interactive: width !== contentWidth
width: contentItem.Layout.preferredWidth
height: Kirigami.Units.gridUnit * 2
model: EmojiModel.categoriesWithCustom
delegate: EmojiDelegate {
id: emojiDelegate
contentItem: Kirigami.Heading {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
level: modelData.category === EmojiModel.Custom ? 4 : 1
width: emojiPicker.categoryIconSize
height: width
Layout.preferredWidth: modelData.category === EmojiModel.Custom ? implicitWidth + Kirigami.Units.largeSpacing : Kirigami.Units.gridUnit * 2
checked: categories.currentIndex === model.index
emoji: modelData.emoji
name: modelData.name
font.family: modelData.category === EmojiModel.Custom ? Kirigami.Theme.defaultFont.family : 'emoji'
text: modelData.category === EmojiModel.Custom ? i18n("Custom") : modelData.emoji
onClicked: {
categories.currentIndex = index
}
Rectangle {
anchors.bottom: parent.bottom
width: parent.width
height: 2
visible: _picker.emojiCategory === modelData.category
color: Kirigami.Theme.focusColor
}
onClicked: _picker.emojiCategory = modelData.category
}
}
}
@@ -67,57 +58,22 @@ ColumnLayout {
Layout.preferredHeight: 1
}
QQC2.ScrollView {
Kirigami.SearchField {
id: searchField
Layout.margins: Kirigami.Units.smallSpacing
Layout.fillWidth: true
Layout.preferredHeight: Kirigami.Units.gridUnit * 8
Layout.fillHeight: true
}
GridView {
cellWidth: Kirigami.Units.gridUnit * 2
cellHeight: Kirigami.Units.gridUnit * 2
EmojiGrid {
id: emojiGrid
targetIconSize: emojiPicker.categoryIconSize
model: searchField.text.length === 0 ? EmojiModel.emojis(emojiPicker.currentCategory) : EmojiModel.filterModel(searchField.text, false)
Layout.fillWidth: true
Layout.preferredHeight: 350
onChosen: emojiPicker.chosen(unicode)
withCustom: true
header: categories
clip: true
model: _picker.emojiCategory === EmojiModel.Custom ? CustomEmojiModel : EmojiModel.emojis(_picker.emojiCategory)
delegate: QQC2.ItemDelegate {
width: Kirigami.Units.gridUnit * 2
height: Kirigami.Units.gridUnit * 2
contentItem: Kirigami.Heading {
level: 1
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.family: 'emoji'
text: modelData.isCustom ? "" : modelData.unicode
}
Image {
visible: modelData.isCustom
source: visible ? modelData.unicode : ""
anchors.fill: parent
anchors.margins: 2
sourceSize.width: width
sourceSize.height: height
Rectangle {
anchors.fill: parent
visible: parent.status === Image.Loading
radius: height/2
gradient: ShimmerGradient { }
}
}
onClicked: {
if (modelData.isCustom) {
chosen(modelData.shortName)
} else {
chosen(modelData.unicode)
}
emojiModel.emojiUsed(modelData)
}
}
}
Keys.forwardTo: searchField
}
}