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

emojidrawer polish

This commit is contained in:
erinn 2020-11-25 18:37:51 -08:00
parent a6d1b3f330
commit 67a662f11b
1 changed files with 45 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
EmojiDrawer.qml
View File

@ -18,9 +18,14 @@ Item {
property int requestedHeight: size * 8
property string morph: "clw"
property string color: "v1"
property bool narrowMode: width < (txtSearch.width + root.size * 14)
// can't bind to the width of the category bar when narrow=true, so we have to calculate it ourselves
// narrowMode when (width of emoji drawer) < (category icon size + padding)
// * (number of categories, minus one which is a VLine)
// - padding (no spacing at the end)
// + 2 * (left/right margin size)
property bool narrowMode: width < (root.size + categoryRow.spacing) * (categoryRow.children.length - 1) - categoryRow.spacing + categoryContainer.anchors.margins * 2
property bool searchMode: false
property string catimgpath: gcd.assetPath + "emojidrawer/" + (gcd.theme != "dark" ? "lightmode_" : "darkmode_")
property string catimgpath: gcd.assetPath + "emojidrawer/" + (gcd.theme != "dark" ? "lightmode_" : "darkmode_")
signal picked(string shortcode)
signal slideopen()
@ -50,45 +55,53 @@ Item {
}
ColumnLayout {
id: categoryContainer
anchors.fill: parent
anchors.margins: 10
RowLayout {
spacing: 0
id: categoryRow
spacing: 10
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
Row {
ImageButton {
tooltip: qsTr("search")
source: gcd.assetPath + "core/search-24px.webp"
size: root.size
color: root.searchMode ? Theme.dividerColor : "transparent"
onClicked: {
root.searchMode = !root.searchMode
if (!root.searchMode) txtSearch.text = ""
else txtSearch.focus = true
}
imgSrc.visible: false
ColorOverlay {
color: root.searchMode ? Theme.backgroundMainColor : Theme.dividerColor
anchors.fill: parent.imgSrc
source: parent.imgSrc
antialiasing: true
smooth: true
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: {
if (text == "") emojiModel.model = folder_expressions
else emojiModel.model = folder_search
emojiModel.updatefilters()
}
font.pixelSize: root.size * 0.5
background: Rectangle {
color: Theme.dividerColor
TextField {
id: txtSearch
visible: root.searchMode
implicitWidth: 200
implicitHeight: root.size
//: Search...
placeholderText: qsTr("search")
onTextChanged: {
if (text == "") emojiModel.model = folder_expressions
else emojiModel.model = folder_search
emojiModel.updatefilters()
}
font.pixelSize: root.size * 0.5
background: Rectangle {
color: Theme.dividerColor
}
}
}