Emoji Picker.
This commit is contained in:
Black Hat
parent
2a8aa34416
commit
dd6c10e382
|
|
@ -3,22 +3,82 @@ import QtQuick.Controls 2.2
|
|||
import QtQuick.Layouts 1.3
|
||||
import QtQuick.Controls.Material 2.2
|
||||
|
||||
import Spectral.Component 2.0
|
||||
|
||||
import Spectral 0.1
|
||||
import Spectral.Setting 0.1
|
||||
|
||||
Popup {
|
||||
property var emojiModel
|
||||
property var textArea
|
||||
ColumnLayout {
|
||||
property string emojiCategory: "people"
|
||||
property var textArea
|
||||
property var emojiModel
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
|
||||
ListView {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 48
|
||||
Layout.leftMargin: 24
|
||||
Layout.rightMargin: 24
|
||||
|
||||
boundsBehavior: Flickable.DragOverBounds
|
||||
|
||||
clip: true
|
||||
|
||||
orientation: ListView.Horizontal
|
||||
|
||||
model: ListModel {
|
||||
ListElement { label: "😏"; category: "people" }
|
||||
ListElement { label: "🌲"; category: "nature" }
|
||||
ListElement { label: "🍛"; category: "food"}
|
||||
ListElement { label: "🚁"; category: "activity" }
|
||||
ListElement { label: "🚅"; category: "travel" }
|
||||
ListElement { label: "💡"; category: "objects" }
|
||||
ListElement { label: "🔣"; category: "symbols" }
|
||||
ListElement { label: "🏁"; category: "flags" }
|
||||
}
|
||||
|
||||
delegate: ItemDelegate {
|
||||
width: 64
|
||||
height: 48
|
||||
|
||||
contentItem: Text {
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
|
||||
font.pointSize: 24
|
||||
font.family: "Emoji"
|
||||
text: label
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
width: parent.width
|
||||
height: 2
|
||||
|
||||
visible: emojiCategory === category
|
||||
|
||||
color: Material.accent
|
||||
}
|
||||
|
||||
onClicked: emojiCategory = category
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 1
|
||||
|
||||
color: MSettings.darkTheme ? "#424242" : "#e7ebeb"
|
||||
}
|
||||
|
||||
GridView {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.preferredHeight: 180
|
||||
|
||||
cellWidth: 36
|
||||
cellHeight: 36
|
||||
cellWidth: 48
|
||||
cellHeight: 48
|
||||
|
||||
boundsBehavior: Flickable.DragOverBounds
|
||||
|
||||
|
|
@ -27,8 +87,8 @@ Popup {
|
|||
model: emojiModel.model[emojiCategory]
|
||||
|
||||
delegate: ItemDelegate {
|
||||
width: 36
|
||||
height: 36
|
||||
width: 48
|
||||
height: 48
|
||||
|
||||
contentItem: Text {
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
|
|
@ -44,43 +104,4 @@ Popup {
|
|||
|
||||
ScrollBar.vertical: ScrollBar {}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 2
|
||||
|
||||
color: Material.accent
|
||||
}
|
||||
|
||||
Row {
|
||||
Repeater {
|
||||
model: ListModel {
|
||||
ListElement { label: "😏"; category: "people" }
|
||||
ListElement { label: "🌲"; category: "nature" }
|
||||
ListElement { label: "🍛"; category: "food"}
|
||||
ListElement { label: "🚁"; category: "activity" }
|
||||
ListElement { label: "🚅"; category: "travel" }
|
||||
ListElement { label: "💡"; category: "objects" }
|
||||
ListElement { label: "🔣"; category: "symbols" }
|
||||
ListElement { label: "🏁"; category: "flags" }
|
||||
}
|
||||
|
||||
delegate: ItemDelegate {
|
||||
width: 36
|
||||
height: 36
|
||||
|
||||
contentItem: Text {
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
|
||||
font.pointSize: 20
|
||||
font.family: "Emoji"
|
||||
text: label
|
||||
}
|
||||
|
||||
onClicked: emojiCategory = category
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -151,6 +151,8 @@ Rectangle {
|
|||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
clip: true
|
||||
|
||||
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
||||
|
||||
ColumnLayout {
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@ Control {
|
|||
property int autoCompleteBeginPosition
|
||||
property int autoCompleteEndPosition
|
||||
|
||||
id: root
|
||||
|
||||
padding: 0
|
||||
|
||||
background: Rectangle {
|
||||
|
|
@ -105,11 +107,38 @@ Control {
|
|||
}
|
||||
}
|
||||
|
||||
contentItem: RowLayout {
|
||||
contentItem: Column {
|
||||
spacing: 0
|
||||
|
||||
add: Transition {
|
||||
NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 250 }
|
||||
}
|
||||
|
||||
EmojiPicker {
|
||||
width: parent.width
|
||||
|
||||
id: emojiPicker
|
||||
|
||||
visible: false
|
||||
|
||||
textArea: inputField
|
||||
emojiModel: EmojiModel { id: emojiModel }
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 1
|
||||
|
||||
color: MSettings.darkTheme ? "#424242" : "#e7ebeb"
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
width: parent.width
|
||||
|
||||
spacing: 0
|
||||
|
||||
ToolButton {
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
|
||||
id: uploadButton
|
||||
visible: !isReply
|
||||
|
|
@ -128,7 +157,10 @@ Control {
|
|||
}
|
||||
|
||||
ToolButton {
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
|
||||
id: cancelReplyButton
|
||||
|
||||
visible: isReply
|
||||
|
||||
contentItem: MaterialIcon {
|
||||
|
|
@ -301,7 +333,7 @@ Control {
|
|||
}
|
||||
|
||||
ToolButton {
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
|
||||
id: emojiButton
|
||||
|
||||
|
|
@ -309,24 +341,7 @@ Control {
|
|||
icon: "\ue24e"
|
||||
}
|
||||
|
||||
onClicked: emojiPicker.visible ? emojiPicker.close() : emojiPicker.open()
|
||||
|
||||
EmojiPicker {
|
||||
x: -width + parent.width
|
||||
y: -height - 16
|
||||
|
||||
width: 360
|
||||
height: 320
|
||||
|
||||
id: emojiPicker
|
||||
|
||||
emojiModel: EmojiModel {
|
||||
id: emojiModel
|
||||
}
|
||||
|
||||
Material.elevation: 2
|
||||
|
||||
textArea: inputField
|
||||
onClicked: emojiPicker.visible = !emojiPicker.visible
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@ ApplicationWindow {
|
|||
visible: true
|
||||
title: qsTr("Spectral")
|
||||
|
||||
Material.foreground: Material.theme == Material.Dark ? "#FFFFFF" : "#1D333E"
|
||||
Material.background: Material.theme == Material.Dark ? "#303030" : "#FFFFFF"
|
||||
Material.foreground: MSettings.darkTheme ? "#FFFFFF" : "#1D333E"
|
||||
Material.background: MSettings.darkTheme ? "#303030" : "#FFFFFF"
|
||||
|
||||
Platform.SystemTrayIcon {
|
||||
visible: MSettings.showTray
|
||||
|
|
|
|||
Loading…
Reference in New Issue