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