Make emoji picker follow theme

This commit is contained in:
Nicolas Werner 2021-07-03 22:45:36 +02:00
parent 683a24d2aa
commit f6f5d2615a
No known key found for this signature in database
GPG Key ID: C8D75E610773F2D9
5 changed files with 243 additions and 220 deletions

View File

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

View File

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

View File

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

View File

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

View File

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