mirror of
https://github.com/status-im/status-desktop.git
synced 2025-01-11 06:47:01 +00:00
4ee21ada05
Introduced Style.svg() Style.png() Style.emoji() and
Style.icon() in Style.qml. Those should be used to
set the source in Images instead of using relative
paths. Usage:
Image {
source: Style.svg("check)
....
Also moved all Singletons inside a new "utils"
folder and made it a QML module, to use
import utils 1.0 instead of relative paths
Closes #3678
114 lines
3.5 KiB
QML
114 lines
3.5 KiB
QML
import QtQuick 2.13
|
|
import QtQuick.Layouts 1.3
|
|
|
|
import utils 1.0
|
|
import "../../shared"
|
|
|
|
|
|
Item {
|
|
id: emojiSection
|
|
property string searchString: ""
|
|
property string searchStringLowercase: searchString.toLowerCase()
|
|
property int imageWidth: 26
|
|
property int imageMargin: 4
|
|
property var emojis: []
|
|
property var allEmojis: modelData
|
|
property var addEmoji: function () {}
|
|
|
|
visible: emojis.length > 0 || !!(modelData && modelData.length && modelData[0].empty && searchString === "")
|
|
|
|
anchors.top: index === 0 ? parent.top : parent.children[index - 1].bottom
|
|
anchors.topMargin: index === 0 ? 0 : Style.current.padding
|
|
|
|
width: parent.width
|
|
// childrenRect caused a binding loop here
|
|
height: this.visible ? emojiGrid.height + categoryText.height + noRecentText.height + Style.current.padding : 0
|
|
|
|
StyledText {
|
|
id: categoryText
|
|
text: modelData && modelData.length ? modelData[0].category.toUpperCase() : ""
|
|
color: Style.current.secondaryText
|
|
font.pixelSize: 13
|
|
}
|
|
|
|
StyledText {
|
|
id: noRecentText
|
|
visible: !!(allEmojis && allEmojis.length && allEmojis[0].empty)
|
|
//% "No recent emojis"
|
|
text: qsTrId("no-recent-emojis")
|
|
color: Style.current.secondaryText
|
|
font.pixelSize: 10
|
|
anchors.top: categoryText.bottom
|
|
anchors.topMargin: Style.current.smallPadding
|
|
}
|
|
|
|
onSearchStringLowercaseChanged: {
|
|
if (emojiSection.searchStringLowercase === "") {
|
|
this.emojis = allEmojis
|
|
return
|
|
}
|
|
this.emojis = modelData.filter(function (emoji) {
|
|
if (emoji.empty) {
|
|
return false
|
|
}
|
|
return emoji.name.includes(emojiSection.searchStringLowercase) ||
|
|
emoji.shortname.includes(emojiSection.searchStringLowercase) ||
|
|
emoji.aliases.some(a => a.includes(emojiSection.searchStringLowercase))
|
|
})
|
|
}
|
|
|
|
onAllEmojisChanged: {
|
|
if (!!emojiSection.allEmojis[0] && this.allEmojis[0].empty) {
|
|
return
|
|
}
|
|
this.emojis = this.allEmojis
|
|
}
|
|
|
|
GridView {
|
|
id: emojiGrid
|
|
anchors.top: categoryText.bottom
|
|
anchors.topMargin: Style.current.smallPadding
|
|
width: parent.width
|
|
height: childrenRect.height
|
|
visible: count > 0
|
|
cellWidth: emojiSection.imageWidth + emojiSection.imageMargin * 2
|
|
cellHeight: emojiSection.imageWidth + emojiSection.imageMargin * 2
|
|
model: emojiSection.emojis
|
|
focus: true
|
|
clip: true
|
|
interactive: false
|
|
|
|
delegate: Item {
|
|
id: emojiContainer
|
|
width: emojiGrid.cellWidth
|
|
height: emojiGrid.cellHeight
|
|
|
|
Column {
|
|
anchors.fill: parent
|
|
anchors.topMargin: emojiSection.imageMargin
|
|
anchors.leftMargin: emojiSection.imageMargin
|
|
|
|
SVGImage {
|
|
width: emojiSection.imageWidth
|
|
height: emojiSection.imageWidth
|
|
//TODO EMOJI SVG?
|
|
source: "../../imports/twemoji/svg/" + modelData.filename + "?22x22"
|
|
|
|
MouseArea {
|
|
cursorShape: Qt.PointingHandCursor
|
|
anchors.fill: parent
|
|
onClicked: {
|
|
emojiSection.addEmoji(modelData)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/*##^##
|
|
Designer {
|
|
D{i:0;formeditorColor:"#ffffff";height:440;width:360}
|
|
}
|
|
##^##*/
|