Make emoji picker follow theme
This commit is contained in:
parent
683a24d2aa
commit
f6f5d2615a
@ -24,7 +24,6 @@ Rectangle {
|
|||||||
id: communityListC
|
id: communityListC
|
||||||
|
|
||||||
visible: Settings.groupView
|
visible: Settings.groupView
|
||||||
|
|
||||||
minimumWidth: communitiesList.avatarSize * 4 + Nheko.paddingMedium * 2
|
minimumWidth: communitiesList.avatarSize * 4 + Nheko.paddingMedium * 2
|
||||||
collapsedWidth: communitiesList.avatarSize + 2 * Nheko.paddingMedium
|
collapsedWidth: communitiesList.avatarSize + 2 * Nheko.paddingMedium
|
||||||
preferredWidth: Settings.communityListWidth >= minimumWidth ? Settings.communityListWidth : collapsedWidth
|
preferredWidth: Settings.communityListWidth >= minimumWidth ? Settings.communityListWidth : collapsedWidth
|
||||||
|
@ -154,6 +154,7 @@ Item {
|
|||||||
NoticeMessage {
|
NoticeMessage {
|
||||||
text: qsTr("%1 changed the room avatar").arg(model.data.userName)
|
text: qsTr("%1 changed the room avatar").arg(model.data.userName)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
DelegateChoice {
|
DelegateChoice {
|
||||||
|
@ -59,8 +59,8 @@ Item {
|
|||||||
|
|
||||||
MessageDelegate {
|
MessageDelegate {
|
||||||
id: reply
|
id: reply
|
||||||
enabled: false
|
|
||||||
|
|
||||||
|
enabled: false
|
||||||
width: parent.width
|
width: parent.width
|
||||||
isReply: true
|
isReply: true
|
||||||
}
|
}
|
||||||
|
@ -35,244 +35,268 @@ Menu {
|
|||||||
modal: true
|
modal: true
|
||||||
focus: true
|
focus: true
|
||||||
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
|
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
|
||||||
height: columnView.implicitHeight + 4
|
//height: columnView.implicitHeight + 4
|
||||||
width: columnView.implicitWidth
|
//width: columnView.implicitWidth
|
||||||
|
width: 7 * 52 + 20
|
||||||
|
|
||||||
ColumnLayout {
|
Rectangle {
|
||||||
id: columnView
|
color: Nheko.colors.window
|
||||||
|
height: columnView.implicitHeight + 4
|
||||||
|
width: 7 * 52 + 20
|
||||||
|
|
||||||
spacing: 0
|
ColumnLayout {
|
||||||
anchors.leftMargin: 3
|
id: columnView
|
||||||
anchors.rightMargin: 3
|
|
||||||
anchors.bottom: parent.bottom
|
|
||||||
anchors.left: parent.left
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.topMargin: 2
|
|
||||||
|
|
||||||
// Search field
|
spacing: 0
|
||||||
TextField {
|
anchors.leftMargin: 3
|
||||||
id: emojiSearch
|
anchors.rightMargin: 3
|
||||||
|
anchors.bottom: parent.bottom
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.topMargin: 2
|
||||||
|
|
||||||
//width: gridView.width - 6
|
// Search field
|
||||||
Layout.topMargin: 3
|
TextField {
|
||||||
Layout.preferredWidth: 7 * 52 + 20 - 6
|
id: emojiSearch
|
||||||
placeholderText: qsTr("Search")
|
|
||||||
selectByMouse: true
|
|
||||||
rightPadding: clearSearch.width
|
|
||||||
onTextChanged: searchTimer.restart()
|
|
||||||
onVisibleChanged: {
|
|
||||||
if (visible)
|
|
||||||
forceActiveFocus();
|
|
||||||
|
|
||||||
}
|
Layout.topMargin: 3
|
||||||
|
Layout.preferredWidth: 7 * 52 + 20 - 6
|
||||||
Timer {
|
palette: Nheko.colors
|
||||||
id: searchTimer
|
background: null
|
||||||
|
placeholderTextColor: Nheko.colors.buttonText
|
||||||
interval: 350 // tweak as needed?
|
color: Nheko.colors.text
|
||||||
onTriggered: {
|
placeholderText: qsTr("Search")
|
||||||
emojiPopup.model.searchString = emojiSearch.text;
|
selectByMouse: true
|
||||||
emojiPopup.model.category = Emoji.Category.Search;
|
rightPadding: clearSearch.width
|
||||||
}
|
onTextChanged: searchTimer.restart()
|
||||||
}
|
onVisibleChanged: {
|
||||||
|
if (visible)
|
||||||
ToolButton {
|
forceActiveFocus();
|
||||||
id: clearSearch
|
|
||||||
|
|
||||||
visible: emojiSearch.text !== ''
|
|
||||||
icon.source: "image://colorimage/:/icons/icons/ui/round-remove-button.png?" + (clearSearch.hovered ? Nheko.colors.highlight : Nheko.colors.buttonText)
|
|
||||||
focusPolicy: Qt.NoFocus
|
|
||||||
onClicked: emojiSearch.clear()
|
|
||||||
|
|
||||||
anchors {
|
|
||||||
verticalCenter: parent.verticalCenter
|
|
||||||
right: parent.right
|
|
||||||
}
|
|
||||||
// clear the default hover effects.
|
|
||||||
|
|
||||||
background: Item {
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// emoji grid
|
|
||||||
GridView {
|
|
||||||
id: gridView
|
|
||||||
|
|
||||||
Layout.preferredHeight: cellHeight * 5
|
|
||||||
Layout.preferredWidth: 7 * 52 + 20
|
|
||||||
Layout.leftMargin: 4
|
|
||||||
cellWidth: 52
|
|
||||||
cellHeight: 52
|
|
||||||
boundsBehavior: Flickable.StopAtBounds
|
|
||||||
clip: true
|
|
||||||
currentIndex: -1 // prevent sorting from stealing focus
|
|
||||||
|
|
||||||
// Individual emoji
|
|
||||||
delegate: AbstractButton {
|
|
||||||
width: 48
|
|
||||||
height: 48
|
|
||||||
hoverEnabled: true
|
|
||||||
ToolTip.text: model.shortName
|
|
||||||
ToolTip.visible: hovered
|
|
||||||
// TODO: maybe add favorites at some point?
|
|
||||||
onClicked: {
|
|
||||||
console.debug("Picked " + model.unicode);
|
|
||||||
emojiPopup.close();
|
|
||||||
callback(model.unicode);
|
|
||||||
}
|
|
||||||
|
|
||||||
// give the emoji a little oomf
|
|
||||||
DropShadow {
|
|
||||||
width: parent.width
|
|
||||||
height: parent.height
|
|
||||||
horizontalOffset: 3
|
|
||||||
verticalOffset: 3
|
|
||||||
radius: 8
|
|
||||||
samples: 17
|
|
||||||
color: "#80000000"
|
|
||||||
source: parent.contentItem
|
|
||||||
}
|
|
||||||
|
|
||||||
contentItem: Text {
|
|
||||||
horizontalAlignment: Text.AlignHCenter
|
|
||||||
verticalAlignment: Text.AlignVCenter
|
|
||||||
font.family: Settings.emojiFont
|
|
||||||
font.pixelSize: 36
|
|
||||||
text: model.unicode
|
|
||||||
}
|
|
||||||
|
|
||||||
background: Rectangle {
|
|
||||||
anchors.fill: parent
|
|
||||||
color: hovered ? Nheko.colors.highlight : 'transparent'
|
|
||||||
radius: 5
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
ScrollBar.vertical: ScrollBar {
|
|
||||||
id: emojiScroll
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Separator
|
|
||||||
Rectangle {
|
|
||||||
visible: emojiSearch.text === ''
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.preferredHeight: 1
|
|
||||||
color: emojiPopup.Nheko.colors.alternateBase
|
|
||||||
}
|
|
||||||
|
|
||||||
// Category picker row
|
|
||||||
RowLayout {
|
|
||||||
visible: emojiSearch.text === ''
|
|
||||||
Layout.bottomMargin: 0
|
|
||||||
Layout.preferredHeight: 42
|
|
||||||
implicitHeight: 42
|
|
||||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
|
|
||||||
|
|
||||||
// Display the normal categories
|
|
||||||
Repeater {
|
|
||||||
|
|
||||||
model: ListModel {
|
|
||||||
// TODO: Would like to get 'simple' icons for the categories
|
|
||||||
ListElement {
|
|
||||||
image: ":/icons/icons/emoji-categories/people.png"
|
|
||||||
category: Emoji.Category.People
|
|
||||||
}
|
|
||||||
|
|
||||||
ListElement {
|
|
||||||
image: ":/icons/icons/emoji-categories/nature.png"
|
|
||||||
category: Emoji.Category.Nature
|
|
||||||
}
|
|
||||||
|
|
||||||
ListElement {
|
|
||||||
image: ":/icons/icons/emoji-categories/foods.png"
|
|
||||||
category: Emoji.Category.Food
|
|
||||||
}
|
|
||||||
|
|
||||||
ListElement {
|
|
||||||
image: ":/icons/icons/emoji-categories/activity.png"
|
|
||||||
category: Emoji.Category.Activity
|
|
||||||
}
|
|
||||||
|
|
||||||
ListElement {
|
|
||||||
image: ":/icons/icons/emoji-categories/travel.png"
|
|
||||||
category: Emoji.Category.Travel
|
|
||||||
}
|
|
||||||
|
|
||||||
ListElement {
|
|
||||||
image: ":/icons/icons/emoji-categories/objects.png"
|
|
||||||
category: Emoji.Category.Objects
|
|
||||||
}
|
|
||||||
|
|
||||||
ListElement {
|
|
||||||
image: ":/icons/icons/emoji-categories/symbols.png"
|
|
||||||
category: Emoji.Category.Symbols
|
|
||||||
}
|
|
||||||
|
|
||||||
ListElement {
|
|
||||||
image: ":/icons/icons/emoji-categories/flags.png"
|
|
||||||
category: Emoji.Category.Flags
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
delegate: AbstractButton {
|
Timer {
|
||||||
Layout.preferredWidth: 36
|
id: searchTimer
|
||||||
Layout.preferredHeight: 36
|
|
||||||
|
interval: 350 // tweak as needed?
|
||||||
|
onTriggered: {
|
||||||
|
emojiPopup.model.searchString = emojiSearch.text;
|
||||||
|
emojiPopup.model.category = Emoji.Category.Search;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ToolButton {
|
||||||
|
id: clearSearch
|
||||||
|
|
||||||
|
visible: emojiSearch.text !== ''
|
||||||
|
icon.source: "image://colorimage/:/icons/icons/ui/round-remove-button.png?" + (clearSearch.hovered ? Nheko.colors.highlight : Nheko.colors.buttonText)
|
||||||
|
focusPolicy: Qt.NoFocus
|
||||||
|
onClicked: emojiSearch.clear()
|
||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
ToolTip.text: {
|
background: null
|
||||||
switch (model.category) {
|
|
||||||
case Emoji.Category.People:
|
anchors {
|
||||||
return qsTr('People');
|
verticalCenter: parent.verticalCenter
|
||||||
case Emoji.Category.Nature:
|
right: parent.right
|
||||||
return qsTr('Nature');
|
}
|
||||||
case Emoji.Category.Food:
|
// clear the default hover effects.
|
||||||
return qsTr('Food');
|
|
||||||
case Emoji.Category.Activity:
|
Image {
|
||||||
return qsTr('Activity');
|
height: parent.height - 2 * Nheko.paddingSmall
|
||||||
case Emoji.Category.Travel:
|
width: height
|
||||||
return qsTr('Travel');
|
source: "image://colorimage/:/icons/icons/ui/round-remove-button.png?" + (clearSearch.hovered ? Nheko.colors.highlight : Nheko.colors.buttonText)
|
||||||
case Emoji.Category.Objects:
|
|
||||||
return qsTr('Objects');
|
anchors {
|
||||||
case Emoji.Category.Symbols:
|
verticalCenter: parent.verticalCenter
|
||||||
return qsTr('Symbols');
|
right: parent.right
|
||||||
case Emoji.Category.Flags:
|
margins: Nheko.paddingSmall
|
||||||
return qsTr('Flags');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// emoji grid
|
||||||
|
GridView {
|
||||||
|
id: gridView
|
||||||
|
|
||||||
|
Layout.preferredHeight: cellHeight * 5
|
||||||
|
Layout.preferredWidth: 7 * 52 + 20
|
||||||
|
Layout.leftMargin: 4
|
||||||
|
cellWidth: 52
|
||||||
|
cellHeight: 52
|
||||||
|
boundsBehavior: Flickable.StopAtBounds
|
||||||
|
clip: true
|
||||||
|
currentIndex: -1 // prevent sorting from stealing focus
|
||||||
|
|
||||||
|
// Individual emoji
|
||||||
|
delegate: AbstractButton {
|
||||||
|
width: 48
|
||||||
|
height: 48
|
||||||
|
hoverEnabled: true
|
||||||
|
ToolTip.text: model.shortName
|
||||||
ToolTip.visible: hovered
|
ToolTip.visible: hovered
|
||||||
|
// TODO: maybe add favorites at some point?
|
||||||
onClicked: {
|
onClicked: {
|
||||||
//emojiPopup.model.category = model.category;
|
console.debug("Picked " + model.unicode);
|
||||||
gridView.positionViewAtIndex(emojiPopup.model.sourceModel.categoryToIndex(model.category), GridView.Beginning);
|
emojiPopup.close();
|
||||||
|
callback(model.unicode);
|
||||||
}
|
}
|
||||||
|
|
||||||
MouseArea {
|
// give the emoji a little oomf
|
||||||
id: mouseArea
|
DropShadow {
|
||||||
|
width: parent.width
|
||||||
anchors.fill: parent
|
height: parent.height
|
||||||
onPressed: mouse.accepted = false
|
horizontalOffset: 3
|
||||||
cursorShape: Qt.PointingHandCursor
|
verticalOffset: 3
|
||||||
|
radius: 8
|
||||||
|
samples: 17
|
||||||
|
color: "#80000000"
|
||||||
|
source: parent.contentItem
|
||||||
}
|
}
|
||||||
|
|
||||||
contentItem: Image {
|
contentItem: Text {
|
||||||
horizontalAlignment: Image.AlignHCenter
|
horizontalAlignment: Text.AlignHCenter
|
||||||
verticalAlignment: Image.AlignVCenter
|
verticalAlignment: Text.AlignVCenter
|
||||||
fillMode: Image.Pad
|
font.family: Settings.emojiFont
|
||||||
sourceSize.width: 32
|
font.pixelSize: 36
|
||||||
sourceSize.height: 32
|
text: model.unicode
|
||||||
source: "image://colorimage/" + model.image + "?" + (hovered ? Nheko.colors.highlight : Nheko.colors.buttonText)
|
color: Nheko.colors.text
|
||||||
}
|
}
|
||||||
|
|
||||||
background: Rectangle {
|
background: Rectangle {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
color: emojiPopup.model.category === model.category ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.2) : 'transparent'
|
color: hovered ? Nheko.colors.highlight : 'transparent'
|
||||||
radius: 5
|
radius: 5
|
||||||
border.color: emojiPopup.model.category === model.category ? Nheko.colors.highlight : 'transparent'
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
ScrollBar.vertical: ScrollBar {
|
||||||
|
id: emojiScroll
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Separator
|
||||||
|
Rectangle {
|
||||||
|
visible: emojiSearch.text === ''
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.preferredHeight: 1
|
||||||
|
color: emojiPopup.Nheko.theme.separator
|
||||||
|
}
|
||||||
|
|
||||||
|
// Category picker row
|
||||||
|
RowLayout {
|
||||||
|
visible: emojiSearch.text === ''
|
||||||
|
Layout.bottomMargin: 0
|
||||||
|
Layout.preferredHeight: 42
|
||||||
|
implicitHeight: 42
|
||||||
|
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
|
||||||
|
|
||||||
|
// Display the normal categories
|
||||||
|
Repeater {
|
||||||
|
|
||||||
|
model: ListModel {
|
||||||
|
// TODO: Would like to get 'simple' icons for the categories
|
||||||
|
ListElement {
|
||||||
|
image: ":/icons/icons/emoji-categories/people.png"
|
||||||
|
category: Emoji.Category.People
|
||||||
|
}
|
||||||
|
|
||||||
|
ListElement {
|
||||||
|
image: ":/icons/icons/emoji-categories/nature.png"
|
||||||
|
category: Emoji.Category.Nature
|
||||||
|
}
|
||||||
|
|
||||||
|
ListElement {
|
||||||
|
image: ":/icons/icons/emoji-categories/foods.png"
|
||||||
|
category: Emoji.Category.Food
|
||||||
|
}
|
||||||
|
|
||||||
|
ListElement {
|
||||||
|
image: ":/icons/icons/emoji-categories/activity.png"
|
||||||
|
category: Emoji.Category.Activity
|
||||||
|
}
|
||||||
|
|
||||||
|
ListElement {
|
||||||
|
image: ":/icons/icons/emoji-categories/travel.png"
|
||||||
|
category: Emoji.Category.Travel
|
||||||
|
}
|
||||||
|
|
||||||
|
ListElement {
|
||||||
|
image: ":/icons/icons/emoji-categories/objects.png"
|
||||||
|
category: Emoji.Category.Objects
|
||||||
|
}
|
||||||
|
|
||||||
|
ListElement {
|
||||||
|
image: ":/icons/icons/emoji-categories/symbols.png"
|
||||||
|
category: Emoji.Category.Symbols
|
||||||
|
}
|
||||||
|
|
||||||
|
ListElement {
|
||||||
|
image: ":/icons/icons/emoji-categories/flags.png"
|
||||||
|
category: Emoji.Category.Flags
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
delegate: AbstractButton {
|
||||||
|
Layout.preferredWidth: 36
|
||||||
|
Layout.preferredHeight: 36
|
||||||
|
hoverEnabled: true
|
||||||
|
ToolTip.text: {
|
||||||
|
switch (model.category) {
|
||||||
|
case Emoji.Category.People:
|
||||||
|
return qsTr('People');
|
||||||
|
case Emoji.Category.Nature:
|
||||||
|
return qsTr('Nature');
|
||||||
|
case Emoji.Category.Food:
|
||||||
|
return qsTr('Food');
|
||||||
|
case Emoji.Category.Activity:
|
||||||
|
return qsTr('Activity');
|
||||||
|
case Emoji.Category.Travel:
|
||||||
|
return qsTr('Travel');
|
||||||
|
case Emoji.Category.Objects:
|
||||||
|
return qsTr('Objects');
|
||||||
|
case Emoji.Category.Symbols:
|
||||||
|
return qsTr('Symbols');
|
||||||
|
case Emoji.Category.Flags:
|
||||||
|
return qsTr('Flags');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ToolTip.visible: hovered
|
||||||
|
onClicked: {
|
||||||
|
//emojiPopup.model.category = model.category;
|
||||||
|
gridView.positionViewAtIndex(emojiPopup.model.sourceModel.categoryToIndex(model.category), GridView.Beginning);
|
||||||
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
id: mouseArea
|
||||||
|
|
||||||
|
anchors.fill: parent
|
||||||
|
onPressed: mouse.accepted = false
|
||||||
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
}
|
||||||
|
|
||||||
|
contentItem: Image {
|
||||||
|
horizontalAlignment: Image.AlignHCenter
|
||||||
|
verticalAlignment: Image.AlignVCenter
|
||||||
|
fillMode: Image.Pad
|
||||||
|
sourceSize.width: 32
|
||||||
|
sourceSize.height: 32
|
||||||
|
source: "image://colorimage/" + model.image + "?" + (hovered ? Nheko.colors.highlight : Nheko.colors.buttonText)
|
||||||
|
}
|
||||||
|
|
||||||
|
background: Rectangle {
|
||||||
|
anchors.fill: parent
|
||||||
|
color: emojiPopup.model.category === model.category ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.2) : 'transparent'
|
||||||
|
radius: 5
|
||||||
|
border.color: emojiPopup.model.category === model.category ? Nheko.colors.highlight : 'transparent'
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -41,8 +41,7 @@ using webrtc::CallType;
|
|||||||
using webrtc::State;
|
using webrtc::State;
|
||||||
|
|
||||||
WebRTCSession::WebRTCSession()
|
WebRTCSession::WebRTCSession()
|
||||||
: QObject()
|
: devices_(CallDevices::instance())
|
||||||
, devices_(CallDevices::instance())
|
|
||||||
{
|
{
|
||||||
qRegisterMetaType<webrtc::CallType>();
|
qRegisterMetaType<webrtc::CallType>();
|
||||||
qmlRegisterUncreatableMetaObject(
|
qmlRegisterUncreatableMetaObject(
|
||||||
|
Loading…
Reference in New Issue
Block a user