Make emoji picker follow theme
This commit is contained in:
Nicolas Werner
parent
683a24d2aa
commit
f6f5d2615a
|
|
@ -24,7 +24,6 @@ Rectangle {
|
|||
id: communityListC
|
||||
|
||||
visible: Settings.groupView
|
||||
|
||||
minimumWidth: communitiesList.avatarSize * 4 + Nheko.paddingMedium * 2
|
||||
collapsedWidth: communitiesList.avatarSize + 2 * Nheko.paddingMedium
|
||||
preferredWidth: Settings.communityListWidth >= minimumWidth ? Settings.communityListWidth : collapsedWidth
|
||||
|
|
|
|||
|
|
@ -154,6 +154,7 @@ Item {
|
|||
NoticeMessage {
|
||||
text: qsTr("%1 changed the room avatar").arg(model.data.userName)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
DelegateChoice {
|
||||
|
|
|
|||
|
|
@ -59,8 +59,8 @@ Item {
|
|||
|
||||
MessageDelegate {
|
||||
id: reply
|
||||
enabled: false
|
||||
|
||||
enabled: false
|
||||
width: parent.width
|
||||
isReply: true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,244 +35,268 @@ Menu {
|
|||
modal: true
|
||||
focus: true
|
||||
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
|
||||
height: columnView.implicitHeight + 4
|
||||
width: columnView.implicitWidth
|
||||
//height: columnView.implicitHeight + 4
|
||||
//width: columnView.implicitWidth
|
||||
width: 7 * 52 + 20
|
||||
|
||||
ColumnLayout {
|
||||
id: columnView
|
||||
Rectangle {
|
||||
color: Nheko.colors.window
|
||||
height: columnView.implicitHeight + 4
|
||||
width: 7 * 52 + 20
|
||||
|
||||
spacing: 0
|
||||
anchors.leftMargin: 3
|
||||
anchors.rightMargin: 3
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.topMargin: 2
|
||||
ColumnLayout {
|
||||
id: columnView
|
||||
|
||||
// Search field
|
||||
TextField {
|
||||
id: emojiSearch
|
||||
spacing: 0
|
||||
anchors.leftMargin: 3
|
||||
anchors.rightMargin: 3
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.topMargin: 2
|
||||
|
||||
//width: gridView.width - 6
|
||||
Layout.topMargin: 3
|
||||
Layout.preferredWidth: 7 * 52 + 20 - 6
|
||||
placeholderText: qsTr("Search")
|
||||
selectByMouse: true
|
||||
rightPadding: clearSearch.width
|
||||
onTextChanged: searchTimer.restart()
|
||||
onVisibleChanged: {
|
||||
if (visible)
|
||||
forceActiveFocus();
|
||||
// Search field
|
||||
TextField {
|
||||
id: emojiSearch
|
||||
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: searchTimer
|
||||
|
||||
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()
|
||||
|
||||
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
|
||||
}
|
||||
Layout.topMargin: 3
|
||||
Layout.preferredWidth: 7 * 52 + 20 - 6
|
||||
palette: Nheko.colors
|
||||
background: null
|
||||
placeholderTextColor: Nheko.colors.buttonText
|
||||
color: Nheko.colors.text
|
||||
placeholderText: qsTr("Search")
|
||||
selectByMouse: true
|
||||
rightPadding: clearSearch.width
|
||||
onTextChanged: searchTimer.restart()
|
||||
onVisibleChanged: {
|
||||
if (visible)
|
||||
forceActiveFocus();
|
||||
|
||||
}
|
||||
|
||||
delegate: AbstractButton {
|
||||
Layout.preferredWidth: 36
|
||||
Layout.preferredHeight: 36
|
||||
Timer {
|
||||
id: searchTimer
|
||||
|
||||
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
|
||||
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');
|
||||
background: null
|
||||
|
||||
anchors {
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
// clear the default hover effects.
|
||||
|
||||
Image {
|
||||
height: parent.height - 2 * Nheko.paddingSmall
|
||||
width: height
|
||||
source: "image://colorimage/:/icons/icons/ui/round-remove-button.png?" + (clearSearch.hovered ? Nheko.colors.highlight : Nheko.colors.buttonText)
|
||||
|
||||
anchors {
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
margins: Nheko.paddingSmall
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 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: {
|
||||
//emojiPopup.model.category = model.category;
|
||||
gridView.positionViewAtIndex(emojiPopup.model.sourceModel.categoryToIndex(model.category), GridView.Beginning);
|
||||
console.debug("Picked " + model.unicode);
|
||||
emojiPopup.close();
|
||||
callback(model.unicode);
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
|
||||
anchors.fill: parent
|
||||
onPressed: mouse.accepted = false
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
// 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: 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)
|
||||
contentItem: Text {
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.family: Settings.emojiFont
|
||||
font.pixelSize: 36
|
||||
text: model.unicode
|
||||
color: Nheko.colors.text
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
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
|
||||
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;
|
||||
|
||||
WebRTCSession::WebRTCSession()
|
||||
: QObject()
|
||||
, devices_(CallDevices::instance())
|
||||
: devices_(CallDevices::instance())
|
||||
{
|
||||
qRegisterMetaType<webrtc::CallType>();
|
||||
qmlRegisterUncreatableMetaObject(
|
||||
|
|
|
|||
Loading…
Reference in New Issue