diff --git a/EmojiDrawer.qml b/EmojiDrawer.qml index 41f860c..a69570f 100644 --- a/EmojiDrawer.qml +++ b/EmojiDrawer.qml @@ -14,11 +14,13 @@ Item { id: root implicitHeight: 0 height: implicitHeight - property int size: 24 + property int size: 32 property int requestedHeight: size * 8 property string morph: "clw" 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 slideopen() @@ -27,6 +29,7 @@ Item { Rectangle { color: Theme.backgroundPaneColor + border.color: Theme.dividerColor anchors.fill: parent } @@ -46,22 +49,36 @@ Item { duration: 400; } - Button { - id: btnX - anchors.top: parent.top - anchors.right: parent.right - text: "x" - - onClicked: animClose.start() - } - ColumnLayout { anchors.fill: parent + anchors.margins: 10 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 { id: txtSearch + visible: root.searchMode + implicitWidth: 200 + implicitHeight: root.size //: Search... placeholderText: qsTr("search") onTextChanged: { @@ -69,101 +86,104 @@ Item { else emojiModel.model = folder_search emojiModel.updatefilters() } + font.pixelSize: root.size * 0.5 + background: Rectangle { + color: Theme.dividerColor + } } ImageButton { id: btnEmojiExpressionsGroup - visible: !root.narrowMode + visible: !root.narrowMode && !root.searchMode //: Expressions tooltip: qsTr("emojicat-expressions") - source: gcd.assetPath + "mutstd/smile.webp" + source: catimgpath + "big_smile.webp" size: root.size onClicked: emojiModel.model = folder_expressions } ImageButton { - visible: !root.narrowMode + visible: !root.narrowMode && !root.searchMode //: Activities tooltip: qsTr("emojicat-activities") - source: gcd.assetPath + "mutstd/artist_r1.webp" + source: catimgpath + "volleyball.webp" size: root.size onClicked: emojiModel.model = folder_activities_clothing } ImageButton { - visible: !root.narrowMode + visible: !root.narrowMode && !root.searchMode //: Food, drink & herbs tooltip: qsTr("emojicat-food") - source: gcd.assetPath + "mutstd/red_apple.webp" + source: catimgpath + "red_apple.webp" size: root.size onClicked: emojiModel.model = folder_food_drink_herbs } ImageButton { - visible: !root.narrowMode + visible: !root.narrowMode && !root.searchMode //: Gender, relationships & sexuality tooltip: qsTr("emojicat-gender") size: root.size - source: gcd.assetPath + "mutstd/pride_100.webp" + source: catimgpath + "transgender_symbol.webp" onClicked: emojiModel.model = folder_gsr } ImageButton { - visible: !root.narrowMode + visible: !root.narrowMode && !root.searchMode //: Nature and effects tooltip: qsTr("emojicat-nature") - source: gcd.assetPath + "mutstd/sun_behind_small_cloud.webp" + source: catimgpath + "crescent.webp" size: root.size onClicked: emojiModel.model = folder_nature } ImageButton { - visible: !root.narrowMode + visible: !root.narrowMode && !root.searchMode //: Objects tooltip: qsTr("emojicat-objects") - source: gcd.assetPath + "mutstd/crystal_ball.webp" + source: catimgpath + "light_bulb.webp" size: root.size onClicked: emojiModel.model = folder_objects } ImageButton { - visible: !root.narrowMode + visible: !root.narrowMode && !root.searchMode //: People and animals tooltip: qsTr("emojicat-people") - source: gcd.assetPath + "mutstd/crow.webp" + source: catimgpath + "bear.webp" size: root.size onClicked: emojiModel.model = folder_people } ImageButton { - visible: !root.narrowMode + visible: !root.narrowMode && !root.searchMode //: Symbols tooltip: qsTr("emojicat-symbols") - source: gcd.assetPath + "mutstd/purple_heart.webp" + source: catimgpath + "pentacle.webp" size: root.size onClicked: emojiModel.model = folder_symbols } ImageButton { - visible: !root.narrowMode + visible: !root.narrowMode && !root.searchMode //: Travel & places tooltip: qsTr("emojicat-travel") - source: gcd.assetPath + "mutstd/airplane.webp" + source: catimgpath + "airplane.webp" size: root.size onClicked: emojiModel.model = folder_travel_places } ImageButton { - visible: !root.narrowMode + visible: !root.narrowMode && !root.searchMode //: Miscellaneous tooltip: qsTr("emojicat-misc") - source: gcd.assetPath + "mutstd/hash_char.webp" + source: catimgpath + "hash.webp" size: root.size onClicked: emojiModel.model = folder_utils } - ImageButton { - visible: !root.narrowMode - id: btnUndefinedGroup - // (no tooltip; this is a catchall group meant to detect unclassified emoji during development) - //TODO: remove this category upon finalizing the Emoji Drawer - source: gcd.assetPath + "mutstd/undefined_character.webp" - size: root.size - onClicked: emojiModel.model = folder_other + + Rectangle { + width: 2 + height: root.size * 0.8 + color: Theme.dividerColor + visible: !root.narrowMode && !root.searchMode + anchors.verticalCenter: parent.verticalCenter } Item { - visible: root.narrowMode + visible: root.narrowMode && !root.searchMode height: root.size width: root.size @@ -173,17 +193,16 @@ Item { source: cats[index].source property int index: 0 property var cats: [ - {source: gcd.assetPath + "mutstd/smile.webp", model: folder_expressions}, - {source: gcd.assetPath + "mutstd/artist_r1.webp", model: folder_activities_clothing}, - {source: gcd.assetPath + "mutstd/red_apple.webp", model: folder_food_drink_herbs}, - {source: gcd.assetPath + "mutstd/pride_100.webp", model: folder_gsr}, - {source: gcd.assetPath + "mutstd/sun_behind_small_cloud.webp", model: folder_nature}, - {source: gcd.assetPath + "mutstd/crystal_ball.webp", model: folder_objects}, - {source: gcd.assetPath + "mutstd/crow.webp", model: folder_people}, - {source: gcd.assetPath + "mutstd/purple_heart.webp", model: folder_symbols}, - {source: gcd.assetPath + "mutstd/airplane.webp", model: folder_travel_places}, - {source: gcd.assetPath + "mutstd/hash_char.webp", model: folder_utils}, - {source: gcd.assetPath + "mutstd/undefined_character.webp", model: folder_other} + {source: catimgpath + "big_smile.webp", model: folder_expressions}, + {source: catimgpath + "volleyball.webp", model: folder_activities_clothing}, + {source: catimgpath + "red_apple.webp", model: folder_food_drink_herbs}, + {source: catimgpath + "transgender_symbol.webp", model: folder_gsr}, + {source: catimgpath + "crescent.webp", model: folder_nature}, + {source: catimgpath + "light_bulb.webp", model: folder_objects}, + {source: catimgpath + "bear.webp", model: folder_people}, + {source: catimgpath + "pentacle.webp", model: folder_symbols}, + {source: catimgpath + "airplane.webp", model: folder_travel_places}, + {source: catimgpath + "hash.webp", model: folder_utils} ] height: 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.fillHeight: true height: root.size * 3 - cellWidth: root.size - cellHeight: root.size + cellWidth: root.size * 1.2 + cellHeight: root.size * 1.2 clip: true ScrollBar.vertical: ScrollBar {} maximumFlickVelocity: 1250 @@ -305,7 +324,6 @@ Item { ListModel { id: folder_symbols } ListModel { id: folder_travel_places } ListModel { id: folder_utils } - ListModel { id: folder_other } ListModel { id: folder_search } DelegateModel { @@ -313,14 +331,14 @@ Item { model: folder_expressions delegate: Item { - width: root.size - height: root.size + width: root.size * 1.2 + height: root.size * 1.2 Image { id: img //source: "file://" + gcd.binaryPath + "/assets/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 anchors.centerIn: parent property string shortcode: code @@ -351,7 +369,6 @@ Item { folder_symbols.clear() folder_travel_places.clear() folder_utils.clear() - folder_other.clear() folder_search.clear() } @@ -369,7 +386,7 @@ Item { continue; } - var model = folder_other + var model = folder_expressions if (txtSearch.text == "") { switch(Mutant.standard.manifest[i].cat) { case "activities_clothing": model = folder_activities_clothing; break; diff --git a/Icon.qml b/Icon.qml index 760e783..eb8632b 100644 --- a/Icon.qml +++ b/Icon.qml @@ -21,6 +21,8 @@ Rectangle { property alias iconColor: iconColorOverlay.color property alias source: srcImg.source + property alias sourceWidth: srcImg.sourceSize.width + property alias sourceHeight: srcImg.sourceSize.height property real rotationAngle: 0.0 diff --git a/controls/ImageButton.qml b/controls/ImageButton.qml index b7665c0..6b61772 100644 --- a/controls/ImageButton.qml +++ b/controls/ImageButton.qml @@ -7,13 +7,21 @@ Item { property alias source: img.source property int size: 24 property string tooltip: "" + property alias color: bgRect.color width: size height: size signal clicked() + property alias imgSrc: img ToolTip.visible: tooltip != "" && ma.containsMouse ToolTip.text: tooltip + Rectangle { + id: bgRect + anchors.fill: parent + color: "transparent" + } + Image { id: img width: root.size * (ma.pressed ? 0.5 : 0.8)