tan
/
Spectral
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Emoji Picker.

This commit is contained in:
Black Hat 2018-11-18 10:47:12 +08:00
parent 2a8aa34416
commit dd6c10e382
4 changed files with 306 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
imports/Spectral/Component/Emoji/EmojiPicker.qml
View File

@ -3,22 +3,82 @@ import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls.Material 2.2
import Spectral 0.1
import Spectral.Component 2.0
Popup {
property var emojiModel
property var textArea
property string emojiCategory: "people"
import Spectral 0.1
import Spectral.Setting 0.1
ColumnLayout {
anchors.fill: parent
property string emojiCategory: "people"
property var textArea
property var emojiModel
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
}
}
}
}
}

2
imports/Spectral/Panel/RoomListPanel.qml
View File

@ -151,6 +151,8 @@ Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ColumnLayout {

57
imports/Spectral/Panel/RoomPanelInput.qml
View File

@ -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
}
}
}

4
qml/main.qml
View File

@ -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