Improve scrolling behaviour of emoji picker on desktop, show scrollbars for categories
Signed-off-by: Claudio Cambra <claudio.cambra@gmail.com>
This commit is contained in:
Claudio Cambra
committed by
Tobias Fella
Tobias Fella
parent
47a4e5c447
commit
dc8b68931e
@@ -20,61 +20,61 @@ ColumnLayout {
|
|||||||
|
|
||||||
spacing: 0
|
spacing: 0
|
||||||
|
|
||||||
ListView {
|
ScrollView {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.preferredHeight: Kirigami.Units.gridUnit * 2 + 2 // for the focus line
|
Layout.preferredHeight: Kirigami.Units.gridUnit * 2 + ScrollBar.horizontal.height + 2 // for the focus line
|
||||||
|
ScrollBar.horizontal.height: ScrollBar.horizontal.visible ? ScrollBar.horizontal.implicitHeight : 0
|
||||||
|
|
||||||
boundsBehavior: Flickable.DragOverBounds
|
ListView {
|
||||||
|
clip: true
|
||||||
|
orientation: ListView.Horizontal
|
||||||
|
|
||||||
clip: true
|
model: ListModel {
|
||||||
|
ListElement { label: "custom"; category: "custom" }
|
||||||
orientation: ListView.Horizontal
|
ListElement { label: "⌛️"; category: "history" }
|
||||||
|
ListElement { label: "😏"; category: "people" }
|
||||||
model: ListModel {
|
ListElement { label: "🌲"; category: "nature" }
|
||||||
ListElement { label: "custom"; category: "custom" }
|
ListElement { label: "🍛"; category: "food"}
|
||||||
ListElement { label: "⌛️"; category: "history" }
|
ListElement { label: "🚁"; category: "activity" }
|
||||||
ListElement { label: "😏"; category: "people" }
|
ListElement { label: "🚅"; category: "travel" }
|
||||||
ListElement { label: "🌲"; category: "nature" }
|
ListElement { label: "💡"; category: "objects" }
|
||||||
ListElement { label: "🍛"; category: "food"}
|
ListElement { label: "🔣"; category: "symbols" }
|
||||||
ListElement { label: "🚁"; category: "activity" }
|
ListElement { label: "🏁"; category: "flags" }
|
||||||
ListElement { label: "🚅"; category: "travel" }
|
|
||||||
ListElement { label: "💡"; category: "objects" }
|
|
||||||
ListElement { label: "🔣"; category: "symbols" }
|
|
||||||
ListElement { label: "🏁"; category: "flags" }
|
|
||||||
}
|
|
||||||
|
|
||||||
delegate: ItemDelegate {
|
|
||||||
id: del
|
|
||||||
|
|
||||||
required property string label
|
|
||||||
required property string category
|
|
||||||
|
|
||||||
width: contentItem.Layout.preferredWidth
|
|
||||||
height: Kirigami.Units.gridUnit * 2
|
|
||||||
|
|
||||||
contentItem: Kirigami.Heading {
|
|
||||||
horizontalAlignment: Text.AlignHCenter
|
|
||||||
verticalAlignment: Text.AlignVCenter
|
|
||||||
level: del.label === "custom" ? 4 : 1
|
|
||||||
|
|
||||||
Layout.preferredWidth: del.label === "custom" ? implicitWidth + Kirigami.Units.largeSpacing : Kirigami.Units.gridUnit * 2
|
|
||||||
|
|
||||||
font.family: del.label === "custom" ? Kirigami.Theme.defaultFont.family : 'emoji'
|
|
||||||
text: del.label === "custom" ? i18n("Custom") : del.label
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
delegate: ItemDelegate {
|
||||||
anchors.bottom: parent.bottom
|
id: del
|
||||||
|
|
||||||
width: parent.width
|
required property string label
|
||||||
height: 2
|
required property string category
|
||||||
|
|
||||||
visible: emojiCategory === category
|
width: contentItem.Layout.preferredWidth
|
||||||
|
height: Kirigami.Units.gridUnit * 2
|
||||||
|
|
||||||
color: Kirigami.Theme.focusColor
|
contentItem: Kirigami.Heading {
|
||||||
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
level: del.label === "custom" ? 4 : 1
|
||||||
|
|
||||||
|
Layout.preferredWidth: del.label === "custom" ? implicitWidth + Kirigami.Units.largeSpacing : Kirigami.Units.gridUnit * 2
|
||||||
|
|
||||||
|
font.family: del.label === "custom" ? Kirigami.Theme.defaultFont.family : 'emoji'
|
||||||
|
text: del.label === "custom" ? i18n("Custom") : del.label
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
anchors.bottom: parent.bottom
|
||||||
|
|
||||||
|
width: parent.width
|
||||||
|
height: 2
|
||||||
|
|
||||||
|
visible: emojiCategory === category
|
||||||
|
|
||||||
|
color: Kirigami.Theme.focusColor
|
||||||
|
}
|
||||||
|
|
||||||
|
onClicked: emojiCategory = category
|
||||||
}
|
}
|
||||||
|
|
||||||
onClicked: emojiCategory = category
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -83,83 +83,81 @@ ColumnLayout {
|
|||||||
Layout.preferredHeight: 1
|
Layout.preferredHeight: 1
|
||||||
}
|
}
|
||||||
|
|
||||||
GridView {
|
ScrollView {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.preferredHeight: Kirigami.Units.gridUnit * 8
|
Layout.preferredHeight: Kirigami.Units.gridUnit * 8
|
||||||
Layout.fillHeight: true
|
Layout.fillHeight: true
|
||||||
|
|
||||||
cellWidth: Kirigami.Units.gridUnit * 2
|
GridView {
|
||||||
cellHeight: Kirigami.Units.gridUnit * 2
|
cellWidth: Kirigami.Units.gridUnit * 2
|
||||||
|
cellHeight: Kirigami.Units.gridUnit * 2
|
||||||
|
|
||||||
boundsBehavior: Flickable.DragOverBounds
|
clip: true
|
||||||
|
|
||||||
clip: true
|
model: {
|
||||||
|
switch (emojiCategory) {
|
||||||
model: {
|
case "custom":
|
||||||
switch (emojiCategory) {
|
return CustomEmojiModel
|
||||||
case "custom":
|
case "history":
|
||||||
return CustomEmojiModel
|
return emojiModel.history
|
||||||
case "history":
|
case "people":
|
||||||
return emojiModel.history
|
return emojiModel.people
|
||||||
case "people":
|
case "nature":
|
||||||
return emojiModel.people
|
return emojiModel.nature
|
||||||
case "nature":
|
case "food":
|
||||||
return emojiModel.nature
|
return emojiModel.food
|
||||||
case "food":
|
case "activity":
|
||||||
return emojiModel.food
|
return emojiModel.activity
|
||||||
case "activity":
|
case "travel":
|
||||||
return emojiModel.activity
|
return emojiModel.travel
|
||||||
case "travel":
|
case "objects":
|
||||||
return emojiModel.travel
|
return emojiModel.objects
|
||||||
case "objects":
|
case "symbols":
|
||||||
return emojiModel.objects
|
return emojiModel.symbols
|
||||||
case "symbols":
|
case "flags":
|
||||||
return emojiModel.symbols
|
return emojiModel.flags
|
||||||
case "flags":
|
}
|
||||||
return emojiModel.flags
|
return null
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
delegate: 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 {
|
delegate: ItemDelegate {
|
||||||
visible: modelData.isCustom
|
width: Kirigami.Units.gridUnit * 2
|
||||||
source: visible ? modelData.unicode : ""
|
height: Kirigami.Units.gridUnit * 2
|
||||||
anchors.fill: parent
|
|
||||||
anchors.margins: 2
|
|
||||||
|
|
||||||
sourceSize.width: width
|
contentItem: Kirigami.Heading {
|
||||||
sourceSize.height: height
|
level: 1
|
||||||
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
font.family: 'emoji'
|
||||||
|
text: modelData.isCustom ? "" : modelData.unicode
|
||||||
|
}
|
||||||
|
|
||||||
Rectangle {
|
Image {
|
||||||
|
visible: modelData.isCustom
|
||||||
|
source: visible ? modelData.unicode : ""
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
visible: parent.status === Image.Loading
|
anchors.margins: 2
|
||||||
radius: height/2
|
|
||||||
gradient: ShimmerGradient { }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onClicked: {
|
sourceSize.width: width
|
||||||
if (modelData.isCustom) {
|
sourceSize.height: height
|
||||||
chosen(modelData.shortname)
|
|
||||||
} else {
|
Rectangle {
|
||||||
chosen(modelData.unicode)
|
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)
|
||||||
}
|
}
|
||||||
emojiModel.emojiUsed(modelData)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ScrollBar.vertical: ScrollBar {}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user