From f6f5d2615a517776e10f4c88778aaf4ce226131e Mon Sep 17 00:00:00 2001 From: Nicolas Werner Date: Sat, 3 Jul 2021 22:45:36 +0200 Subject: [PATCH] Make emoji picker follow theme --- resources/qml/ChatPage.qml | 1 - resources/qml/delegates/MessageDelegate.qml | 1 + resources/qml/delegates/Reply.qml | 2 +- resources/qml/emoji/EmojiPicker.qml | 456 ++++++++++---------- src/WebRTCSession.cpp | 3 +- 5 files changed, 243 insertions(+), 220 deletions(-) diff --git a/resources/qml/ChatPage.qml b/resources/qml/ChatPage.qml index 3fa55b42..7f6758df 100644 --- a/resources/qml/ChatPage.qml +++ b/resources/qml/ChatPage.qml @@ -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 diff --git a/resources/qml/delegates/MessageDelegate.qml b/resources/qml/delegates/MessageDelegate.qml index fe76ef88..1befcec3 100644 --- a/resources/qml/delegates/MessageDelegate.qml +++ b/resources/qml/delegates/MessageDelegate.qml @@ -154,6 +154,7 @@ Item { NoticeMessage { text: qsTr("%1 changed the room avatar").arg(model.data.userName) } + } DelegateChoice { diff --git a/resources/qml/delegates/Reply.qml b/resources/qml/delegates/Reply.qml index c3d5d8ad..b5090529 100644 --- a/resources/qml/delegates/Reply.qml +++ b/resources/qml/delegates/Reply.qml @@ -59,8 +59,8 @@ Item { MessageDelegate { id: reply - enabled: false + enabled: false width: parent.width isReply: true } diff --git a/resources/qml/emoji/EmojiPicker.qml b/resources/qml/emoji/EmojiPicker.qml index efcdc2cf..6f10a230 100644 --- a/resources/qml/emoji/EmojiPicker.qml +++ b/resources/qml/emoji/EmojiPicker.qml @@ -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' + } + } } diff --git a/src/WebRTCSession.cpp b/src/WebRTCSession.cpp index 880a14a2..72330435 100644 --- a/src/WebRTCSession.cpp +++ b/src/WebRTCSession.cpp @@ -41,8 +41,7 @@ using webrtc::CallType; using webrtc::State; WebRTCSession::WebRTCSession() - : QObject() - , devices_(CallDevices::instance()) + : devices_(CallDevices::instance()) { qRegisterMetaType(); qmlRegisterUncreatableMetaObject(