Update emoji picker and translations

This commit is contained in:
Joseph Donofry 2020-05-13 20:19:15 -04:00
parent dfb76c693d
commit ff7468e6d5
No known key found for this signature in database
GPG Key ID: E8A1D78EF044B0CB
20 changed files with 246 additions and 136 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 573 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 573 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -189,13 +189,13 @@
<context>
<name>EmojiPicker</name>
<message>
<location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
<location line="+133"/>
<location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
<location line="+135"/>
<source>Search</source>
<translation type="unfinished"></translation>
</message>
<message>
<location line="-16"/>
<location line="-42"/>
<source>People</source>
<translation type="unfinished"></translation>
</message>
@ -751,7 +751,7 @@
<translation type="unfinished"></translation>
</message>
<message>
<location line="+15"/>
<location line="+16"/>
<source>Reply</source>
<translation>Antworten</translation>
</message>
@ -764,7 +764,7 @@
<context>
<name>TimelineView</name>
<message>
<location filename="../qml/TimelineView.qml" line="+52"/>
<location filename="../qml/TimelineView.qml" line="+65"/>
<source>React</source>
<translation type="unfinished"></translation>
</message>

View File

@ -189,13 +189,13 @@
<context>
<name>EmojiPicker</name>
<message>
<location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
<location line="+133"/>
<location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
<location line="+135"/>
<source>Search</source>
<translation type="unfinished"></translation>
</message>
<message>
<location line="-16"/>
<location line="-42"/>
<source>People</source>
<translation type="unfinished"></translation>
</message>
@ -751,7 +751,7 @@
<translation type="unfinished"></translation>
</message>
<message>
<location line="+15"/>
<location line="+16"/>
<source>Reply</source>
<translation type="unfinished"></translation>
</message>
@ -764,7 +764,7 @@
<context>
<name>TimelineView</name>
<message>
<location filename="../qml/TimelineView.qml" line="+52"/>
<location filename="../qml/TimelineView.qml" line="+65"/>
<source>React</source>
<translation type="unfinished"></translation>
</message>

View File

@ -189,13 +189,13 @@
<context>
<name>EmojiPicker</name>
<message>
<location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
<location line="+133"/>
<location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
<location line="+135"/>
<source>Search</source>
<translation type="unfinished"></translation>
</message>
<message>
<location line="-16"/>
<location line="-42"/>
<source>People</source>
<translation type="unfinished"></translation>
</message>
@ -751,7 +751,7 @@
<translation type="unfinished"></translation>
</message>
<message>
<location line="+15"/>
<location line="+16"/>
<source>Reply</source>
<translation>Reply</translation>
</message>
@ -764,7 +764,7 @@
<context>
<name>TimelineView</name>
<message>
<location filename="../qml/TimelineView.qml" line="+52"/>
<location filename="../qml/TimelineView.qml" line="+65"/>
<source>React</source>
<translation type="unfinished"></translation>
</message>

View File

@ -189,13 +189,13 @@
<context>
<name>EmojiPicker</name>
<message>
<location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
<location line="+133"/>
<location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
<location line="+135"/>
<source>Search</source>
<translation type="unfinished"></translation>
</message>
<message>
<location line="-16"/>
<location line="-42"/>
<source>People</source>
<translation type="unfinished"></translation>
</message>
@ -751,7 +751,7 @@
<translation type="unfinished"></translation>
</message>
<message>
<location line="+15"/>
<location line="+16"/>
<source>Reply</source>
<translation type="unfinished"></translation>
</message>
@ -764,7 +764,7 @@
<context>
<name>TimelineView</name>
<message>
<location filename="../qml/TimelineView.qml" line="+52"/>
<location filename="../qml/TimelineView.qml" line="+65"/>
<source>React</source>
<translation type="unfinished"></translation>
</message>

View File

@ -189,13 +189,13 @@
<context>
<name>EmojiPicker</name>
<message>
<location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
<location line="+133"/>
<location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
<location line="+135"/>
<source>Search</source>
<translation type="unfinished"></translation>
</message>
<message>
<location line="-16"/>
<location line="-42"/>
<source>People</source>
<translation type="unfinished"></translation>
</message>
@ -752,7 +752,7 @@
<translation type="unfinished"></translation>
</message>
<message>
<location line="+15"/>
<location line="+16"/>
<source>Reply</source>
<translation type="unfinished"></translation>
</message>
@ -765,7 +765,7 @@
<context>
<name>TimelineView</name>
<message>
<location filename="../qml/TimelineView.qml" line="+52"/>
<location filename="../qml/TimelineView.qml" line="+65"/>
<source>React</source>
<translation type="unfinished"></translation>
</message>

View File

@ -189,13 +189,13 @@
<context>
<name>EmojiPicker</name>
<message>
<location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
<location line="+133"/>
<location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
<location line="+135"/>
<source>Search</source>
<translation type="unfinished"></translation>
</message>
<message>
<location line="-16"/>
<location line="-42"/>
<source>People</source>
<translation type="unfinished"></translation>
</message>
@ -750,7 +750,7 @@
<translation type="unfinished"></translation>
</message>
<message>
<location line="+15"/>
<location line="+16"/>
<source>Reply</source>
<translation></translation>
</message>
@ -763,7 +763,7 @@
<context>
<name>TimelineView</name>
<message>
<location filename="../qml/TimelineView.qml" line="+52"/>
<location filename="../qml/TimelineView.qml" line="+65"/>
<source>React</source>
<translation type="unfinished"></translation>
</message>

View File

@ -189,13 +189,13 @@
<context>
<name>EmojiPicker</name>
<message>
<location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
<location line="+133"/>
<location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
<location line="+135"/>
<source>Search</source>
<translation type="unfinished"></translation>
</message>
<message>
<location line="-16"/>
<location line="-42"/>
<source>People</source>
<translation type="unfinished"></translation>
</message>
@ -751,7 +751,7 @@
<translation type="unfinished"></translation>
</message>
<message>
<location line="+15"/>
<location line="+16"/>
<source>Reply</source>
<translation type="unfinished"></translation>
</message>
@ -764,7 +764,7 @@
<context>
<name>TimelineView</name>
<message>
<location filename="../qml/TimelineView.qml" line="+52"/>
<location filename="../qml/TimelineView.qml" line="+65"/>
<source>React</source>
<translation type="unfinished"></translation>
</message>

View File

@ -189,13 +189,13 @@
<context>
<name>EmojiPicker</name>
<message>
<location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
<location line="+133"/>
<location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
<location line="+135"/>
<source>Search</source>
<translation type="unfinished"></translation>
</message>
<message>
<location line="-16"/>
<location line="-42"/>
<source>People</source>
<translation type="unfinished"></translation>
</message>
@ -752,7 +752,7 @@
<translation type="unfinished"></translation>
</message>
<message>
<location line="+15"/>
<location line="+16"/>
<source>Reply</source>
<translation type="unfinished"></translation>
</message>
@ -765,7 +765,7 @@
<context>
<name>TimelineView</name>
<message>
<location filename="../qml/TimelineView.qml" line="+52"/>
<location filename="../qml/TimelineView.qml" line="+65"/>
<source>React</source>
<translation type="unfinished"></translation>
</message>

View File

@ -189,13 +189,13 @@
<context>
<name>EmojiPicker</name>
<message>
<location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
<location line="+133"/>
<location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
<location line="+135"/>
<source>Search</source>
<translation type="unfinished"></translation>
</message>
<message>
<location line="-16"/>
<location line="-42"/>
<source>People</source>
<translation type="unfinished"></translation>
</message>
@ -752,7 +752,7 @@
<translation type="unfinished"></translation>
</message>
<message>
<location line="+15"/>
<location line="+16"/>
<source>Reply</source>
<translation type="unfinished"></translation>
</message>
@ -765,7 +765,7 @@
<context>
<name>TimelineView</name>
<message>
<location filename="../qml/TimelineView.qml" line="+52"/>
<location filename="../qml/TimelineView.qml" line="+65"/>
<source>React</source>
<translation type="unfinished"></translation>
</message>

View File

@ -189,13 +189,13 @@
<context>
<name>EmojiPicker</name>
<message>
<location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
<location line="+133"/>
<location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
<location line="+135"/>
<source>Search</source>
<translation type="unfinished"></translation>
</message>
<message>
<location line="-16"/>
<location line="-42"/>
<source>People</source>
<translation type="unfinished"></translation>
</message>
@ -750,7 +750,7 @@
<translation type="unfinished"></translation>
</message>
<message>
<location line="+15"/>
<location line="+16"/>
<source>Reply</source>
<translation type="unfinished"></translation>
</message>
@ -763,7 +763,7 @@
<context>
<name>TimelineView</name>
<message>
<location filename="../qml/TimelineView.qml" line="+52"/>
<location filename="../qml/TimelineView.qml" line="+65"/>
<source>React</source>
<translation type="unfinished"></translation>
</message>

View File

@ -81,6 +81,7 @@ MouseArea {
hoverEnabled: true
ToolTip.visible: hovered
ToolTip.text: qsTr("React")
emojiPicker: emojiPopup
// onClicked: chat.model.reactAction(model.id)
}
ImageButton {

View File

@ -6,8 +6,10 @@ import QtQuick.Window 2.2
import Qt.labs.settings 1.0
import im.nheko 1.0
import im.nheko.EmojiModel 1.0
import "./delegates"
import "./emoji"
Page {
property var colors: currentActivePalette
@ -34,6 +36,17 @@ Page {
property bool buttons: true
}
EmojiPicker {
id: emojiPopup
width: 7 * 52 + 20
height: 6 * 52
colors: palette
model: EmojiProxyModel {
category: Emoji.Category.People
sourceModel: EmojiModel {}
}
}
Menu {
id: messageContextMenu
modal: true

View File

@ -7,21 +7,10 @@ import "../"
ImageButton {
property var colors: currentActivePalette
property var emojiPicker
image: ":/icons/icons/ui/smile.png"
id: emojiButton
onClicked: emojiPopup.open()
onClicked: emojiPicker.visible ? emojiPicker.close() : emojiPicker.show(emojiButton)
EmojiPicker {
id: emojiPopup
x: Math.round((emojiButton.width - width) / 2)
y: emojiButton.height
width: 7 * 52
height: 6 * 52
colors: emojiButton.colors
model: EmojiProxyModel {
category: Emoji.Category.People
sourceModel: EmojiModel {}
}
}
}

View File

@ -1,6 +1,7 @@
import QtQuick 2.9
import QtQuick.Controls 2.9
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.9
import im.nheko 1.0
import im.nheko.EmojiModel 1.0
@ -8,6 +9,13 @@ import im.nheko.EmojiModel 1.0
import "../"
Popup {
function show(showAt) {
parent = showAt
x = Math.round((showAt.width - width) / 2)
y = showAt.height
open()
}
property var colors
property alias model: gridView.model
property var textArea
@ -16,54 +24,31 @@ Popup {
id: emojiPopup
margins: 0
bottomPadding: 1
leftPadding: 1
rightPadding: 1
modal: true
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
ColumnLayout {
id: columnView
anchors.fill: parent
// Search field
TextField {
id: emojiSearch
Layout.alignment: Qt.AlignVCenter
Layout.preferredWidth: parent.width - 4
visible: emojiPopup.model.category === Emoji.Category.Search
placeholderText: qsTr("Search")
selectByMouse: true
rightPadding: clearSearch.width
Timer {
id: searchTimer
interval: 350 // tweak as needed?
onTriggered: emojiPopup.model.filter = emojiSearch.text
}
ToolButton {
id: clearSearch
anchors {
verticalCenter: parent.verticalCenter
right: parent.right
}
// clear the default hover effects.
background: Item {}
visible: emojiSearch.text !== ''
icon.source: "image://colorimage/:/icons/icons/ui/round-remove-button.png?" + (clearSearch.hovered ? colors.highlight : colors.buttonText)
focusPolicy: Qt.NoFocus
onClicked: emojiSearch.clear()
}
onTextChanged: searchTimer.restart()
onVisibleChanged: if (visible) forceActiveFocus()
}
spacing: 0
Layout.bottomMargin: 0
Layout.leftMargin: 3
Layout.rightMargin: 3
Layout.topMargin: 2
// emoji grid
GridView {
id: gridView
Layout.preferredHeight: emojiPopup.height
Layout.fillWidth: true
Layout.fillHeight: true
Layout.leftMargin: 4
cellWidth: 52
cellHeight: 52
@ -76,12 +61,12 @@ Popup {
delegate: AbstractButton {
width: 48
height: 48
contentItem: Text {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pointSize: 36
font.family: settings.emoji_font_family
font.pixelSize: 36
text: model.unicode
}
@ -94,53 +79,115 @@ Popup {
hoverEnabled: true
ToolTip.text: model.shortName
ToolTip.visible: hovered
// give the emoji a little oomf
DropShadow {
width: parent.width;
height: parent.height;
horizontalOffset: 3
verticalOffset: 3
radius: 8.0
samples: 17
color: "#80000000"
source: parent.contentItem
}
// TODO: emit a signal and maybe add favorites at some point?
//onClicked: textArea.insert(textArea.cursorPosition, modelData.unicode)
}
ScrollBar.vertical: ScrollBar {}
// Search field
header: TextField {
id: emojiSearch
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: emojiScroll.width + 4
placeholderText: qsTr("Search")
selectByMouse: true
rightPadding: clearSearch.width
Timer {
id: searchTimer
interval: 350 // tweak as needed?
onTriggered: {
emojiPopup.model.filter = emojiSearch.text
emojiPopup.model.category = Emoji.Category.Search
}
}
ToolButton {
id: clearSearch
anchors {
verticalCenter: parent.verticalCenter
right: parent.right
}
// clear the default hover effects.
background: Item {}
visible: emojiSearch.text !== ''
icon.source: "image://colorimage/:/icons/icons/ui/round-remove-button.png?" + (clearSearch.hovered ? colors.highlight : colors.buttonText)
focusPolicy: Qt.NoFocus
onClicked: emojiSearch.clear()
}
onTextChanged: searchTimer.restart()
onVisibleChanged: if (visible) forceActiveFocus()
}
ScrollBar.vertical: ScrollBar {
id: emojiScroll
}
}
// Separator
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 2
Layout.preferredHeight: 1
color: emojiPopup.colors.highlight
color: emojiPopup.colors.dark
}
// Category picker row
Row {
RowLayout {
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 { label: "😏"; category: Emoji.Category.People }
ListElement { label: "🌲"; category: Emoji.Category.Nature }
ListElement { label: "🍛"; category: Emoji.Category.Food }
ListElement { label: "🚁"; category: Emoji.Category.Activity }
ListElement { label: "🚅"; category: Emoji.Category.Travel }
ListElement { label: "💡"; category: Emoji.Category.Objects }
ListElement { label: "🔣"; category: Emoji.Category.Symbols }
ListElement { label: "🏁"; category: Emoji.Category.Flags }
ListElement { label: "🔍"; category: Emoji.Category.Search }
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 {
width: 40
height: 40
Layout.preferredWidth: 36
Layout.preferredHeight: 36
contentItem: Text {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pointSize: 30
text: model.label
contentItem: Image {
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
fillMode: Image.Pad
smooth: true
sourceSize.width: 32
sourceSize.height: 32
source: "image://colorimage/" + model.image + "?" + (hovered ? colors.highlight : colors.buttonText)
}
background: Rectangle {
anchors.fill: parent
color: emojiPopup.model.category === model.category ? colors.highlight : 'transparent'
property real highlightHue: colors.highlight.hslHue
property real highlightSat: colors.highlight.hslSaturation
property real highlightLight: colors.highlight.hslLightness
color: emojiPopup.model.category === model.category ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.25) : 'transparent'
radius: 5
border.color: emojiPopup.model.category === model.category ? colors.highlight : 'transparent'
}
hoverEnabled: true
@ -162,13 +209,55 @@ Popup {
return qsTr('Symbols');
case Emoji.Category.Flags:
return qsTr('Flags');
case Emoji.Category.Search:
return qsTr('Search');
}
}
ToolTip.visible: hovered
onClicked: emojiPopup.model.category = model.category
onClicked: {
emojiPopup.model.category = model.category
}
}
}
// Separator
Rectangle {
Layout.fillHeight: true
Layout.preferredWidth: 1
implicitWidth: 1
height: parent.height
color: emojiPopup.colors.dark
}
// Search Button is special
AbstractButton {
id: searchBtn
hoverEnabled: true
Layout.alignment: Qt.AlignRight
Layout.bottomMargin: 0
ToolTip.text: qsTr("Search")
ToolTip.visible: hovered
onClicked: {
// clear any filters
emojiPopup.model.category = Emoji.Category.Search
gridView.positionViewAtBeginning()
emojiSearch.forceActiveFocus()
}
Layout.preferredWidth: 36
Layout.preferredHeight: 36
implicitWidth: 36
implicitHeight: 36
contentItem: Image {
anchors.right: parent.right
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
fillMode: Image.Pad
smooth: true
sourceSize.width: 32
sourceSize.height: 32
source: "image://colorimage/:/icons/icons/ui/search.png?" + (parent.hovered ? colors.highlight : colors.buttonText)
}
}
}

View File

@ -20,6 +20,8 @@
<file>icons/ui/checkmark@2x.png</file>
<file>icons/ui/cursor.png</file>
<file>icons/ui/cursor@2x.png</file>
<file>icons/ui/search.png</file>
<file>icons/ui/search@2x.png</file>
<file>icons/ui/settings.png</file>
<file>icons/ui/settings@2x.png</file>
<file>icons/ui/smile.png</file>

View File

@ -9,19 +9,35 @@ set -eu
INPUT=$1
OUTPUT=nheko
filename=$(basename -- "$1")
extension="${filename##*.}"
mkdir ${OUTPUT}.iconset
sips -z 16 16 "${INPUT}" --out ${OUTPUT}.iconset/icon_16x16.png
sips -z 32 32 "${INPUT}" --out ${OUTPUT}.iconset/icon_16x16@2x.png
sips -z 32 32 "${INPUT}" --out ${OUTPUT}.iconset/icon_32x32.png
sips -z 64 64 "${INPUT}" --out ${OUTPUT}.iconset/icon_32x32@2x.png
sips -z 128 128 "${INPUT}" --out ${OUTPUT}.iconset/icon_128x128.png
sips -z 256 256 "${INPUT}" --out ${OUTPUT}.iconset/icon_128x128@2x.png
sips -z 256 256 "${INPUT}" --out ${OUTPUT}.iconset/icon_256x256.png
sips -z 512 512 "${INPUT}" --out ${OUTPUT}.iconset/icon_256x256@2x.png
sips -z 512 512 "${INPUT}" --out ${OUTPUT}.iconset/icon_512x512.png
if [ extension = "svg" ]; then
rsvg-convert -h 16 "${INPUT}" > ${OUTPUT}.iconset/icon_16x16.png
rsvg-convert -h 32 "${INPUT}" > ${OUTPUT}.iconset/icon_16x16@2x.png
rsvg-convert -h 32 "${INPUT}" > ${OUTPUT}.iconset/icon_32x32.png
rsvg-convert -h 64 "${INPUT}" > ${OUTPUT}.iconset/icon_32x32@2x.png
rsvg-convert -h 128 "${INPUT}" > ${OUTPUT}.iconset/icon_128x128.png
rsvg-convert -h 256 "${INPUT}" > ${OUTPUT}.iconset/icon_128x128@2x.png
rsvg-convert -h 256 "${INPUT}" > ${OUTPUT}.iconset/icon_256x256.png
rsvg-convert -h 512 "${INPUT}" > ${OUTPUT}.iconset/icon_256x256@2x.png
rsvg-convert -h 512 "${INPUT}" > ${OUTPUT}.iconset/icon_512x512.png
rsvg-convert -h 1024 "${INPUT}" > ${OUTPUT}.iconset/icon_512x512@2x.png
else
sips -z 16 16 "${INPUT}" --out ${OUTPUT}.iconset/icon_16x16.png
sips -z 32 32 "${INPUT}" --out ${OUTPUT}.iconset/icon_16x16@2x.png
sips -z 32 32 "${INPUT}" --out ${OUTPUT}.iconset/icon_32x32.png
sips -z 64 64 "${INPUT}" --out ${OUTPUT}.iconset/icon_32x32@2x.png
sips -z 128 128 "${INPUT}" --out ${OUTPUT}.iconset/icon_128x128.png
sips -z 256 256 "${INPUT}" --out ${OUTPUT}.iconset/icon_128x128@2x.png
sips -z 256 256 "${INPUT}" --out ${OUTPUT}.iconset/icon_256x256.png
sips -z 512 512 "${INPUT}" --out ${OUTPUT}.iconset/icon_256x256@2x.png
sips -z 512 512 "${INPUT}" --out ${OUTPUT}.iconset/icon_512x512.png
cp "${INPUT}" ${OUTPUT}.iconset/icon_512x512@2x.png
cp "${INPUT}" ${OUTPUT}.iconset/icon_512x512@2x.png
fi
iconutil -c icns ${OUTPUT}.iconset