openprivacy
/
opaque
3
0
Fork 0
Code Issues 3 Pull Requests 1 Releases Wiki Activity

redesigned emoji drawer

This commit is contained in:
erinn 2020-11-24 22:18:11 -08:00
parent a69fb3cff2
commit a6d1b3f330
3 changed files with 86 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
EmojiDrawer.qml
View File

@ -14,11 +14,13 @@ Item {
id: root id: root
implicitHeight: 0 implicitHeight: 0
height: implicitHeight height: implicitHeight
property int size: 24 property int size: 32
property int requestedHeight: size * 8 property int requestedHeight: size * 8
property string morph: "clw" property string morph: "clw"
property string color: "v1" property string color: "v1"
property bool narrowMode: width < (txtSearch.width + root.size * 14 + btnX.width) property bool narrowMode: width < (txtSearch.width + root.size * 14)
property bool searchMode: false
property string catimgpath: gcd.assetPath + "emojidrawer/" + (gcd.theme != "dark" ? "lightmode_" : "darkmode_")
signal picked(string shortcode) signal picked(string shortcode)
signal slideopen() signal slideopen()
@ -27,6 +29,7 @@ Item {
Rectangle { Rectangle {
color: Theme.backgroundPaneColor color: Theme.backgroundPaneColor
border.color: Theme.dividerColor
anchors.fill: parent anchors.fill: parent
} }
@ -46,22 +49,36 @@ Item {
duration: 400; duration: 400;
} }
Button {
id: btnX
anchors.top: parent.top
anchors.right: parent.right
text: "x"
onClicked: animClose.start()
}
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 10
RowLayout { RowLayout {
spacing: 0
ImageButton {
tooltip: qsTr("emojicat-search")
source: gcd.assetPath + "core/search-24px.webp"
size: root.size
color: root.searchMode ? Theme.dividerColor : "transparent"
onClicked: root.searchMode = !root.searchMode
imgSrc.visible: false
ColorOverlay {
color: root.searchMode ? Theme.backgroundMainColor : Theme.dividerColor
anchors.fill: parent.imgSrc
source: parent.imgSrc
antialiasing: true
smooth: true
}
}
TextField { TextField {
id: txtSearch id: txtSearch
visible: root.searchMode
implicitWidth: 200
implicitHeight: root.size
//: Search... //: Search...
placeholderText: qsTr("search") placeholderText: qsTr("search")
onTextChanged: { onTextChanged: {
@ -69,101 +86,104 @@ Item {
else emojiModel.model = folder_search else emojiModel.model = folder_search
emojiModel.updatefilters() emojiModel.updatefilters()
} }
font.pixelSize: root.size * 0.5
background: Rectangle {
color: Theme.dividerColor
}
} }
ImageButton { ImageButton {
id: btnEmojiExpressionsGroup id: btnEmojiExpressionsGroup
visible: !root.narrowMode visible: !root.narrowMode && !root.searchMode
//: Expressions //: Expressions
tooltip: qsTr("emojicat-expressions") tooltip: qsTr("emojicat-expressions")
source: gcd.assetPath + "mutstd/smile.webp" source: catimgpath + "big_smile.webp"
size: root.size size: root.size
onClicked: emojiModel.model = folder_expressions onClicked: emojiModel.model = folder_expressions
} }
ImageButton { ImageButton {
visible: !root.narrowMode visible: !root.narrowMode && !root.searchMode
//: Activities //: Activities
tooltip: qsTr("emojicat-activities") tooltip: qsTr("emojicat-activities")
source: gcd.assetPath + "mutstd/artist_r1.webp" source: catimgpath + "volleyball.webp"
size: root.size size: root.size
onClicked: emojiModel.model = folder_activities_clothing onClicked: emojiModel.model = folder_activities_clothing
} }
ImageButton { ImageButton {
visible: !root.narrowMode visible: !root.narrowMode && !root.searchMode
//: Food, drink & herbs //: Food, drink & herbs
tooltip: qsTr("emojicat-food") tooltip: qsTr("emojicat-food")
source: gcd.assetPath + "mutstd/red_apple.webp" source: catimgpath + "red_apple.webp"
size: root.size size: root.size
onClicked: emojiModel.model = folder_food_drink_herbs onClicked: emojiModel.model = folder_food_drink_herbs
} }
ImageButton { ImageButton {
visible: !root.narrowMode visible: !root.narrowMode && !root.searchMode
//: Gender, relationships & sexuality //: Gender, relationships & sexuality
tooltip: qsTr("emojicat-gender") tooltip: qsTr("emojicat-gender")
size: root.size size: root.size
source: gcd.assetPath + "mutstd/pride_100.webp" source: catimgpath + "transgender_symbol.webp"
onClicked: emojiModel.model = folder_gsr onClicked: emojiModel.model = folder_gsr
} }
ImageButton { ImageButton {
visible: !root.narrowMode visible: !root.narrowMode && !root.searchMode
//: Nature and effects //: Nature and effects
tooltip: qsTr("emojicat-nature") tooltip: qsTr("emojicat-nature")
source: gcd.assetPath + "mutstd/sun_behind_small_cloud.webp" source: catimgpath + "crescent.webp"
size: root.size size: root.size
onClicked: emojiModel.model = folder_nature onClicked: emojiModel.model = folder_nature
} }
ImageButton { ImageButton {
visible: !root.narrowMode visible: !root.narrowMode && !root.searchMode
//: Objects //: Objects
tooltip: qsTr("emojicat-objects") tooltip: qsTr("emojicat-objects")
source: gcd.assetPath + "mutstd/crystal_ball.webp" source: catimgpath + "light_bulb.webp"
size: root.size size: root.size
onClicked: emojiModel.model = folder_objects onClicked: emojiModel.model = folder_objects
} }
ImageButton { ImageButton {
visible: !root.narrowMode visible: !root.narrowMode && !root.searchMode
//: People and animals //: People and animals
tooltip: qsTr("emojicat-people") tooltip: qsTr("emojicat-people")
source: gcd.assetPath + "mutstd/crow.webp" source: catimgpath + "bear.webp"
size: root.size size: root.size
onClicked: emojiModel.model = folder_people onClicked: emojiModel.model = folder_people
} }
ImageButton { ImageButton {
visible: !root.narrowMode visible: !root.narrowMode && !root.searchMode
//: Symbols //: Symbols
tooltip: qsTr("emojicat-symbols") tooltip: qsTr("emojicat-symbols")
source: gcd.assetPath + "mutstd/purple_heart.webp" source: catimgpath + "pentacle.webp"
size: root.size size: root.size
onClicked: emojiModel.model = folder_symbols onClicked: emojiModel.model = folder_symbols
} }
ImageButton { ImageButton {
visible: !root.narrowMode visible: !root.narrowMode && !root.searchMode
//: Travel & places //: Travel & places
tooltip: qsTr("emojicat-travel") tooltip: qsTr("emojicat-travel")
source: gcd.assetPath + "mutstd/airplane.webp" source: catimgpath + "airplane.webp"
size: root.size size: root.size
onClicked: emojiModel.model = folder_travel_places onClicked: emojiModel.model = folder_travel_places
} }
ImageButton { ImageButton {
visible: !root.narrowMode visible: !root.narrowMode && !root.searchMode
//: Miscellaneous //: Miscellaneous
tooltip: qsTr("emojicat-misc") tooltip: qsTr("emojicat-misc")
source: gcd.assetPath + "mutstd/hash_char.webp" source: catimgpath + "hash.webp"
size: root.size size: root.size
onClicked: emojiModel.model = folder_utils onClicked: emojiModel.model = folder_utils
} }
ImageButton {
visible: !root.narrowMode Rectangle {
id: btnUndefinedGroup width: 2
// (no tooltip; this is a catchall group meant to detect unclassified emoji during development) height: root.size * 0.8
//TODO: remove this category upon finalizing the Emoji Drawer color: Theme.dividerColor
source: gcd.assetPath + "mutstd/undefined_character.webp" visible: !root.narrowMode && !root.searchMode
size: root.size anchors.verticalCenter: parent.verticalCenter
onClicked: emojiModel.model = folder_other
} }
Item { Item {
visible: root.narrowMode visible: root.narrowMode && !root.searchMode
height: root.size height: root.size
width: root.size width: root.size
@ -173,17 +193,16 @@ Item {
source: cats[index].source source: cats[index].source
property int index: 0 property int index: 0
property var cats: [ property var cats: [
{source: gcd.assetPath + "mutstd/smile.webp", model: folder_expressions}, {source: catimgpath + "big_smile.webp", model: folder_expressions},
{source: gcd.assetPath + "mutstd/artist_r1.webp", model: folder_activities_clothing}, {source: catimgpath + "volleyball.webp", model: folder_activities_clothing},
{source: gcd.assetPath + "mutstd/red_apple.webp", model: folder_food_drink_herbs}, {source: catimgpath + "red_apple.webp", model: folder_food_drink_herbs},
{source: gcd.assetPath + "mutstd/pride_100.webp", model: folder_gsr}, {source: catimgpath + "transgender_symbol.webp", model: folder_gsr},
{source: gcd.assetPath + "mutstd/sun_behind_small_cloud.webp", model: folder_nature}, {source: catimgpath + "crescent.webp", model: folder_nature},
{source: gcd.assetPath + "mutstd/crystal_ball.webp", model: folder_objects}, {source: catimgpath + "light_bulb.webp", model: folder_objects},
{source: gcd.assetPath + "mutstd/crow.webp", model: folder_people}, {source: catimgpath + "bear.webp", model: folder_people},
{source: gcd.assetPath + "mutstd/purple_heart.webp", model: folder_symbols}, {source: catimgpath + "pentacle.webp", model: folder_symbols},
{source: gcd.assetPath + "mutstd/airplane.webp", model: folder_travel_places}, {source: catimgpath + "airplane.webp", model: folder_travel_places},
{source: gcd.assetPath + "mutstd/hash_char.webp", model: folder_utils}, {source: catimgpath + "hash.webp", model: folder_utils}
{source: gcd.assetPath + "mutstd/undefined_character.webp", model: folder_other}
] ]
height: root.size * (maCatRot.pressed ? 0.8 : 1.0) height: root.size * (maCatRot.pressed ? 0.8 : 1.0)
width: root.size * (maCatRot.pressed ? 0.8 : 1.0) width: root.size * (maCatRot.pressed ? 0.8 : 1.0)
@ -283,8 +302,8 @@ Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
height: root.size * 3 height: root.size * 3
cellWidth: root.size cellWidth: root.size * 1.2
cellHeight: root.size cellHeight: root.size * 1.2
clip: true clip: true
ScrollBar.vertical: ScrollBar {} ScrollBar.vertical: ScrollBar {}
maximumFlickVelocity: 1250 maximumFlickVelocity: 1250
@ -305,7 +324,6 @@ Item {
ListModel { id: folder_symbols } ListModel { id: folder_symbols }
ListModel { id: folder_travel_places } ListModel { id: folder_travel_places }
ListModel { id: folder_utils } ListModel { id: folder_utils }
ListModel { id: folder_other }
ListModel { id: folder_search } ListModel { id: folder_search }
DelegateModel { DelegateModel {
@ -313,14 +331,14 @@ Item {
model: folder_expressions model: folder_expressions
delegate: Item { delegate: Item {
width: root.size width: root.size * 1.2
height: root.size height: root.size * 1.2
Image { Image {
id: img id: img
//source: "file://" + gcd.binaryPath + "/assets/mutstd/" + code + ".webp" //source: "file://" + gcd.binaryPath + "/assets/mutstd/" + code + ".webp"
source: gcd.assetPath + "mutstd/" + code + ".webp" source: gcd.assetPath + "mutstd/" + code + ".webp"
width: root.size * (mouseArea.pressed ? 0.7 : 0.8) width: root.size * (mouseArea.pressed ? 0.9 : 1)
height: width height: width
anchors.centerIn: parent anchors.centerIn: parent
property string shortcode: code property string shortcode: code
@ -351,7 +369,6 @@ Item {
folder_symbols.clear() folder_symbols.clear()
folder_travel_places.clear() folder_travel_places.clear()
folder_utils.clear() folder_utils.clear()
folder_other.clear()
folder_search.clear() folder_search.clear()
} }
@ -369,7 +386,7 @@ Item {
continue; continue;
} }
var model = folder_other var model = folder_expressions
if (txtSearch.text == "") { if (txtSearch.text == "") {
switch(Mutant.standard.manifest[i].cat) { switch(Mutant.standard.manifest[i].cat) {
case "activities_clothing": model = folder_activities_clothing; break; case "activities_clothing": model = folder_activities_clothing; break;

2
Icon.qml
View File

@ -21,6 +21,8 @@ Rectangle {
property alias iconColor: iconColorOverlay.color property alias iconColor: iconColorOverlay.color
property alias source: srcImg.source property alias source: srcImg.source
property alias sourceWidth: srcImg.sourceSize.width
property alias sourceHeight: srcImg.sourceSize.height
property real rotationAngle: 0.0 property real rotationAngle: 0.0

8
controls/ImageButton.qml
View File

@ -7,13 +7,21 @@ Item {
property alias source: img.source property alias source: img.source
property int size: 24 property int size: 24
property string tooltip: "" property string tooltip: ""
property alias color: bgRect.color
width: size width: size
height: size height: size
signal clicked() signal clicked()
property alias imgSrc: img
ToolTip.visible: tooltip != "" && ma.containsMouse ToolTip.visible: tooltip != "" && ma.containsMouse
ToolTip.text: tooltip ToolTip.text: tooltip
Rectangle {
id: bgRect
anchors.fill: parent
color: "transparent"
}
Image { Image {
id: img id: img
width: root.size * (ma.pressed ? 0.5 : 0.8) width: root.size * (ma.pressed ? 0.5 : 0.8)