Improved TextArea for Toots

This commit is contained in:
molan-git 2020-01-30 10:09:11 +01:00 committed by GitHub
parent 68f0ab53f4
commit 7dbcbeaeb6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -6,31 +6,37 @@ import "./components/"
Page { Page {
id: conversationPage id: conversationPage
property string type; property string type
property alias title: header.title property alias title: header.title
property alias description: header.description property alias description: header.description
property alias avatar: header.image property alias avatar: header.image
property string suggestedUser: "" property string suggestedUser: ""
property ListModel suggestedModel; property ListModel suggestedModel
property string toot_id: "" property string toot_id: ""
property int tootMaxChar: 500; property int tootMaxChar: 500;
property ListModel mdl; property ListModel mdl
allowedOrientations: Orientation.All allowedOrientations: Orientation.All
onSuggestedUserChanged: { onSuggestedUserChanged: {
console.log(suggestedUser) console.log(suggestedUser)
suggestedModel = Qt.createQmlObject('import QtQuick 2.0; ListModel { }', Qt.application, 'InternalQmlObject'); suggestedModel = Qt.createQmlObject(
predictionList.visible = false; 'import QtQuick 2.0; ListModel { }',
Qt.application, 'InternalQmlObject'
)
predictionList.visible = false
if (suggestedUser.length > 0) { if (suggestedUser.length > 0) {
var msg = { var msg = {
'action' : 'accounts/search', "action": 'accounts/search',
'method' : 'GET', "method": 'GET',
'model' : suggestedModel, "model": suggestedModel,
'mode' : "append", "mode": "append",
'params' : [ {name: "q", data: suggestedUser} ], "params": [{
'conf' : Logic.conf "name": "q",
}; "data": suggestedUser
worker.sendMessage(msg); }],
predictionList.visible = true; "conf": Logic.conf
}
worker.sendMessage(msg)
predictionList.visible = true
} }
} }
@ -58,7 +64,7 @@ Page {
header: PageHeader { header: PageHeader {
title: qsTr("Conversation") title: qsTr("Conversation")
} }
clip: true; clip: true
anchors { anchors {
top: parent.top top: parent.top
bottom: panel.top bottom: panel.top
@ -73,7 +79,8 @@ Page {
text: Format.formatDate(section, Formatter.DateMedium) text: Format.formatDate(section, Formatter.DateMedium)
} }
} }
delegate: VisualContainer {} delegate: VisualContainer {
}
onCountChanged: { onCountChanged: {
if (mdl) if (mdl)
for (var i = 0; i < mdl.count; i++) { for (var i = 0; i < mdl.count; i++) {
@ -83,11 +90,10 @@ Page {
} }
} }
} }
} }
Rectangle { Rectangle {
id: predictionList id: predictionList
visible: false; visible: false
anchors.bottom: panel.top anchors.bottom: panel.top
anchors.left: parent.left anchors.left: parent.left
anchors.right: panel.right anchors.right: panel.right
@ -101,14 +107,18 @@ Page {
delegate: ItemUser { delegate: ItemUser {
onClicked: { onClicked: {
var start = toot.cursorPosition; var start = toot.cursorPosition
while (toot.text[start] !== "@" && start > 0) { while (toot.text[start] !== "@" && start > 0) {
start--; start--
} }
textOperations.text = toot.text textOperations.text = toot.text
textOperations.cursorPosition = toot.cursorPosition textOperations.cursorPosition = toot.cursorPosition
textOperations.moveCursorSelection(start - 1, TextInput.SelectWords) textOperations.moveCursorSelection(start - 1, TextInput.SelectWords)
toot.text = textOperations.text.substring(0, textOperations.selectionStart) + ' @'+model.account_acct + ' ' + textOperations.text.substring(textOperations.selectionEnd).trim() toot.text = textOperations.text.substring(0, textOperations.selectionStart)
+ ' @'
+ model.account_acct
+ ' '
+ textOperations.text.substring(textOperations.selectionEnd).trim()
toot.cursorPosition = toot.text.indexOf('@' + model.account_acct) toot.cursorPosition = toot.text.indexOf('@' + model.account_acct)
} }
@ -129,7 +139,9 @@ Page {
} }
width: parent.width width: parent.width
height: progressBar.height + toot.height + (mediaModel.count ? uploadedImages.height : 0) + btnContentWarning.height + Theme.paddingMedium + (warningContent.visible ? warningContent.height : 0) height: progressBar.height + toot.height + (mediaModel.count ? uploadedImages.height : 0)
+ btnContentWarning.height + Theme.paddingMedium
+ (warningContent.visible ? warningContent.height : 0)
dock: Dock.Bottom dock: Dock.Bottom
Rectangle { Rectangle {
width: parent.width width: parent.width
@ -144,8 +156,9 @@ Page {
} }
Rectangle { Rectangle {
id: progressBar id: progressBar
width: toot.text.length ? panel.width*(toot.text.length/tootMaxChar) : 0; width: toot.text.length ? panel.width * (toot.text.length / tootMaxChar) : 0
height: Theme.itemSizeSmall * 0.10
height: Theme.itemSizeSmall * 0.05
color: Theme.highlightBackgroundColor color: Theme.highlightBackgroundColor
opacity: 0.7 opacity: 0.7
anchors { anchors {
@ -157,7 +170,7 @@ Page {
TextField { TextField {
id: warningContent id: warningContent
visible: false visible: false
height: visible ? implicitHeight : 0; height: visible ? implicitHeight : 0
anchors { anchors {
top: parent.top top: parent.top
topMargin: Theme.paddingMedium topMargin: Theme.paddingMedium
@ -171,6 +184,7 @@ Page {
color: palette.highlightColor color: palette.highlightColor
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
EnterKey.onClicked: { EnterKey.onClicked: {
//tweet()
} }
} }
TextInput { TextInput {
@ -182,6 +196,7 @@ Page {
id: toot id: toot
anchors { anchors {
top: warningContent.bottom top: warningContent.bottom
topMargin: Theme.paddingMedium
left: parent.left left: parent.left
right: parent.right right: parent.right
rightMargin: Theme.paddingMedium rightMargin: Theme.paddingMedium
@ -189,22 +204,28 @@ Page {
autoScrollEnabled: true autoScrollEnabled: true
labelVisible: false labelVisible: false
//focus: true //focus: true
text: description !== "" && (description.charAt(0) == '@' || description.charAt(0) == '#') ? description+' ' : '' text: description !== "" && (description.charAt(0) == '@'
height: 300 || description.charAt(
0) == '#') ? description + ' ' : ''
height: Math.max(250, Math.min(800, implicitHeight))
//height: implicitHeight
horizontalAlignment: Text.AlignLeft horizontalAlignment: Text.AlignLeft
placeholderText: "What's on your mind?" placeholderText: "What's on your mind?"
EnterKey.onClicked: { EnterKey.onClicked: {
//tweet()
} }
onTextChanged: { onTextChanged: {
textOperations.text = toot.text textOperations.text = toot.text
textOperations.cursorPosition = toot.cursorPosition textOperations.cursorPosition = toot.cursorPosition
textOperations.selectWord() textOperations.selectWord()
textOperations.select(textOperations.selectionStart ? textOperations.selectionStart-1 : 0, textOperations.selectionEnd) textOperations.select(
textOperations.selectionStart ? textOperations.selectionStart - 1 : 0,
textOperations.selectionEnd)
//console.log(textOperations.text.substr(textOperations.selectionStart, textOperations.selectionEnd)) //console.log(textOperations.text.substr(textOperations.selectionStart, textOperations.selectionEnd))
console.log(toot.text.length) console.log(toot.text.length)
suggestedUser = "" suggestedUser = ""
if (textOperations.selectedText.charAt(0) === "@") { if (textOperations.selectedText.charAt(0) === "@") {
suggestedUser = textOperations.selectedText.trim().substring(1); suggestedUser = textOperations.selectedText.trim().substring(1)
} }
} }
} }
@ -216,19 +237,18 @@ Page {
} }
anchors { anchors {
top: warningContent.bottom top: warningContent.bottom + 4
bottom: bottom.top bottom: bottom.top
right: parent.right right: parent.right
rightMargin: Theme.paddingSmall rightMargin: Theme.paddingSmall
} }
icon.source: "../../qml/images/emojiselect.svg" + (pressed icon.source: "../../qml/images/emojiselect.svg" + (pressed ? Theme.highlightColor : (warningContent.visible ? Theme.secondaryHighlightColor : Theme.primaryColor))
? Theme.secondaryHighlightColor
: Theme.secondaryColor)
onClicked: pageStack.push(firstWizardPage) onClicked: pageStack.push(firstWizardPage)
} }
SilicaGridView { SilicaGridView {
id: uploadedImages id: uploadedImages
width: parent.width width: parent.width
anchors.top: bottom.toot
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
height: mediaModel.count ? Theme.itemSizeSmall : 0 height: mediaModel.count ? Theme.itemSizeSmall : 0
model: mediaModel model: mediaModel
@ -238,7 +258,9 @@ Page {
id: myDelegate id: myDelegate
width: uploadedImages.cellWidth width: uploadedImages.cellWidth
height: uploadedImages.cellHeight height: uploadedImages.cellHeight
RemorseItem { id: remorse } RemorseItem {
id: remorse
}
Image { Image {
anchors.fill: parent anchors.fill: parent
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
@ -249,30 +271,46 @@ Page {
var idx = index var idx = index
console.log(idx) console.log(idx)
//mediaModel.remove(idx) //mediaModel.remove(idx)
remorse.execute(myDelegate, qsTr("Delete"), function() { mediaModel.remove(idx) } ) remorse.execute(myDelegate, qsTr("Delete"), function () {
mediaModel.remove(idx)
})
} }
} }
add: Transition { add: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 800 } NumberAnimation {
property: "opacity"
from: 0
to: 1.0
duration: 800
}
} }
remove: Transition { remove: Transition {
NumberAnimation { property: "opacity"; from: 1.0; to: 0; duration: 800 } NumberAnimation {
property: "opacity"
from: 1.0
to: 0
duration: 800
}
} }
displaced: Transition { displaced: Transition {
NumberAnimation { properties: "x,y"; duration: 800; easing.type: Easing.InOutBack } NumberAnimation {
properties: "x,y"
duration: 800
easing.type: Easing.InOutBack
}
} }
} }
IconButton { IconButton {
id: btnContentWarning id: btnContentWarning
anchors { anchors {
verticalCenter: privacy.verticalCenter verticalCenter: privacy.verticalCenter
left: parent.left left: parent.left
leftMargin: Theme.paddingMedium leftMargin: Theme.paddingMedium
} }
icon.source: "image://theme/icon-s-warning?" + (pressed icon.source: "image://theme/icon-s-warning?"
? Theme.highlightColor + (pressed ? Theme.highlightColor : (warningContent.visible ? Theme.secondaryHighlightColor : Theme.primaryColor))
: (warningContent.visible ? Theme.secondaryHighlightColor : Theme.primaryColor))
onClicked: warningContent.visible = !warningContent.visible onClicked: warningContent.visible = !warningContent.visible
} }
IconButton { IconButton {
@ -283,89 +321,98 @@ Page {
left: btnContentWarning.right left: btnContentWarning.right
leftMargin: Theme.paddingSmall leftMargin: Theme.paddingSmall
} }
icon.source: "image://theme/icon-s-attach?" + (pressed icon.source: "image://theme/icon-s-attach?"
? Theme.highlightColor + (pressed ? Theme.highlightColor : (warningContent.visible ? Theme.secondaryHighlightColor : Theme.primaryColor))
: (warningContent.visible ? Theme.secondaryHighlightColor : Theme.primaryColor))
onClicked: { onClicked: {
btnAddImage.enabled = false; btnAddImage.enabled = false
var once = true; var once = true
var imagePicker = pageStack.push("Sailfish.Pickers.ImagePickerPage", { "allowedOrientations" : Orientation.All }); var imagePicker = pageStack.push("Sailfish.Pickers.ImagePickerPage", {"allowedOrientations": Orientation.All})
imagePicker.selectedContentChanged.connect(function () { imagePicker.selectedContentChanged.connect(function () {
var imagePath = imagePicker.selectedContent; var imagePath = imagePicker.selectedContent
console.log(imagePath) console.log(imagePath)
imageUploader.setUploadUrl(Logic.conf.instance + "/api/v1/media") imageUploader.setUploadUrl(Logic.conf.instance + "/api/v1/media")
imageUploader.setFile(imagePath); imageUploader.setFile(imagePath)
imageUploader.setAuthorizationHeader(Logic.conf.api_user_token); imageUploader.setAuthorizationHeader(Logic.conf.api_user_token)
imageUploader.upload(); imageUploader.upload()
}); })
} }
} }
ImageUploader { ImageUploader {
id: imageUploader id: imageUploader
onProgressChanged: { onProgressChanged: {
console.log("progress " + progress) console.log("progress " + progress)
uploadProgress.width = parent.width * progress uploadProgress.width = parent.width * progress
} }
onSuccess: { onSuccess: {
uploadProgress.width = 0 uploadProgress.width = 0
console.log(replyData); console.log(replyData)
mediaModel.append(JSON.parse(replyData)) mediaModel.append(JSON.parse(replyData))
} }
onFailure: { onFailure: {
uploadProgress.width = 0 uploadProgress.width = 0
btnAddImage.enabled = true; btnAddImage.enabled = true
console.log(status) console.log(status)
console.log(statusText) console.log(statusText)
} }
} }
ComboBox { ComboBox {
id: privacy id: privacy
anchors { anchors {
top: toot.bottom topMargin: -Theme.paddingSmall * 2
//topMargin: -Theme.paddingSmall*2
left: btnAddImage.right left: btnAddImage.right
right: btnSend.left right: btnSend.left
bottom: parent.bottom
} }
currentIndex: 0
menu: ContextMenu { menu: ContextMenu {
MenuItem { text: qsTr("Public") } MenuItem {
MenuItem { text: qsTr("Unlisted") } text: qsTr("Public")
MenuItem { text: qsTr("Followers-only") } }
MenuItem { text: qsTr("Direct") } MenuItem {
text: qsTr("Unlisted")
}
MenuItem {
text: qsTr("Followers-only")
}
MenuItem {
text: qsTr("Direct")
} }
} }
}
IconButton { IconButton {
id: btnSend id: btnSend
icon.source: "image://theme/icon-m-send?" + (pressed icon.source: "image://theme/icon-m-send?"
? Theme.highlightColor + (pressed ? Theme.highlightColor : Theme.primaryColor)
: Theme.primaryColor)
anchors { anchors {
top: toot.bottom top: toot.bottom
right: parent.right right: parent.right
rightMargin: Theme.paddingLarge rightMargin: Theme.paddingSmall
} }
enabled: toot.text !== "" && toot.text.length < tootMaxChar enabled: toot.text !== "" && toot.text.length < tootMaxChar && uploadProgress.width == 0
onClicked: { onClicked: {
var visibility = [ "Public", "Unlisted", "Private", "Direct"]; var visibility = ["public", "unlisted", "private", "direct"]
var media_ids = []; var media_ids = []
for (var k = 0; k < mediaModel.count; k++) { for (var k = 0; k < mediaModel.count; k++) {
console.log(mediaModel.get(k).id) console.log(mediaModel.get(k).id)
media_ids.push(mediaModel.get(k).id) media_ids.push(mediaModel.get(k).id)
} }
var msg = { var msg = {
'action' : 'statuses', "action": 'statuses',
'method' : 'POST', "method": 'POST',
'model' : mdl, "model": mdl,
'mode' : "append", "mode": "append",
'params' : { "params": {
"status": toot.text, "status": toot.text,
"visibility": visibility[privacy.currentIndex], "visibility": visibility[privacy.currentIndex],
"media_ids": media_ids "media_ids": media_ids
}, },
'conf' : Logic.conf "conf": Logic.conf
}; }
if (toot_id) if (toot_id)
msg.params['in_reply_to_id'] = (toot_id) + "" msg.params['in_reply_to_id'] = (toot_id) + ""
@ -374,15 +421,14 @@ Page {
msg.params['spoiler_text'] = warningContent.text msg.params['spoiler_text'] = warningContent.text
} }
worker.sendMessage(msg); worker.sendMessage(msg)
warningContent.text = "" warningContent.text = ""
toot.text = "" toot.text = ""
mediaModel.clear() mediaModel.clear()
pageStack.pop()
} }
} }
Rectangle { Rectangle {
id: uploadProgress id: uploadProgress
color: Theme.highlightBackgroundColor color: Theme.highlightBackgroundColor
@ -394,44 +440,46 @@ Page {
Component.onCompleted: { Component.onCompleted: {
toot.cursorPosition = toot.text.length toot.cursorPosition = toot.text.length
if (mdl.count > 0) { if (mdl.count > 0) {
var setIndex = 0; var setIndex = 0
switch (mdl.get(0).status_visibility) { switch (mdl.get(0).status_visibility) {
case "unlisted": case "unlisted":
setIndex = 1; setIndex = 1
break; break
case "private": case "private":
setIndex = 2; setIndex = 2
break; break
case "direct": case "direct":
privacy.enabled = false; privacy.enabled = false
setIndex = 3; setIndex = 3
break; break
default: default:
privacy.enabled = true; privacy.enabled = true
setIndex = 0; setIndex = 0
} }
privacy.currentIndex = setIndex; privacy.currentIndex = setIndex
} }
console.log(JSON.stringify()) console.log(JSON.stringify())
worker.sendMessage({ worker.sendMessage({
'action' : 'statuses/'+mdl.get(0).status_id+'/context', "action": 'statuses/' + mdl.get(0).status_id + '/context',
'method' : 'GET', "method": 'GET',
'model' : mdl, "model": mdl,
'params' : { }, "params": { },
'conf' : Logic.conf "conf": Logic.conf
}); })
} }
Component { Component {
id: firstWizardPage id: firstWizardPage
Dialog { Dialog {
id: emoticonsDialog id: emoticonsDialog
canAccept: false; //selector.currentIndex >= 0 canAccept: false //selector.currentIndex >= 0
//acceptDestination: conversationPage //acceptDestination: conversationPage
onAcceptPendingChanged: { onAcceptPendingChanged: {
if (acceptPending) { if (acceptPending) {
// Tell the destination page what the selected category is // Tell the destination page what the selected category is
// acceptDestinationInstance.category = selector.value // acceptDestinationInstance.category = selector.value
} }
@ -551,7 +599,6 @@ Page {
ListElement { section: "Horoscope Signs"; glyph: "♑" } ListElement { section: "Horoscope Signs"; glyph: "♑" }
ListElement { section: "Horoscope Signs"; glyph: "♒" } ListElement { section: "Horoscope Signs"; glyph: "♒" }
ListElement { section: "Horoscope Signs"; glyph: "♓" } ListElement { section: "Horoscope Signs"; glyph: "♓" }
} }
delegate: BackgroundItem { delegate: BackgroundItem {
width: gridView.cellWidth width: gridView.cellWidth
@ -564,11 +611,12 @@ Page {
} }
onClicked: { onClicked: {
var cursorPosition = toot.cursorPosition var cursorPosition = toot.cursorPosition
toot.text = toot.text.substring(0, cursorPosition) + model.glyph + toot.text.substring(cursorPosition) toot.text = toot.text.substring(
0, cursorPosition) + model.glyph + toot.text.substring(
cursorPosition)
toot.cursorPosition = cursorPosition + model.glyph.length toot.cursorPosition = cursorPosition + model.glyph.length
emoticonsDialog.canAccept = true; emoticonsDialog.canAccept = true
emoticonsDialog.accept() emoticonsDialog.accept()
} }
} }
} }