feat(sandbox): make use of `StatusInput` in chat view
This commit is contained in:
Pascal Precht
Pascal Precht
parent
c8e903496c
commit
731a0f8c8f
|
|
@ -172,10 +172,121 @@ Rectangle {
|
||||||
text: "Chat"
|
text: "Chat"
|
||||||
}
|
}
|
||||||
|
|
||||||
Column {
|
Item {
|
||||||
|
id: searchInputWrapper
|
||||||
anchors.top: headline.bottom
|
anchors.top: headline.bottom
|
||||||
anchors.topMargin: 16
|
anchors.topMargin: 16
|
||||||
width: parent.width
|
width: parent.width
|
||||||
|
height: searchInput.height
|
||||||
|
|
||||||
|
StatusBaseInput {
|
||||||
|
id: searchInput
|
||||||
|
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: actionButton.left
|
||||||
|
anchors.leftMargin: 16
|
||||||
|
anchors.rightMargin: 16
|
||||||
|
|
||||||
|
height: 36
|
||||||
|
topPadding: 8
|
||||||
|
bottomPadding: 0
|
||||||
|
placeholderText: "Search"
|
||||||
|
icon.name: "search"
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusRoundButton {
|
||||||
|
id: actionButton
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: 8
|
||||||
|
width: 32
|
||||||
|
height: 32
|
||||||
|
|
||||||
|
type: StatusRoundButton.Type.Secondary
|
||||||
|
icon.name: "add"
|
||||||
|
state: "default"
|
||||||
|
|
||||||
|
onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
|
||||||
|
states: [
|
||||||
|
State {
|
||||||
|
name: "default"
|
||||||
|
PropertyChanges {
|
||||||
|
target: actionButton
|
||||||
|
icon.rotation: 0
|
||||||
|
highlighted: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
State {
|
||||||
|
name: "pressed"
|
||||||
|
PropertyChanges {
|
||||||
|
target: actionButton
|
||||||
|
icon.rotation: 45
|
||||||
|
highlighted: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
transitions: [
|
||||||
|
Transition {
|
||||||
|
from: "default"
|
||||||
|
to: "pressed"
|
||||||
|
|
||||||
|
RotationAnimation {
|
||||||
|
duration: 150
|
||||||
|
direction: RotationAnimation.Clockwise
|
||||||
|
easing.type: Easing.InCubic
|
||||||
|
}
|
||||||
|
},
|
||||||
|
Transition {
|
||||||
|
from: "pressed"
|
||||||
|
to: "default"
|
||||||
|
RotationAnimation {
|
||||||
|
duration: 150
|
||||||
|
direction: RotationAnimation.Counterclockwise
|
||||||
|
easing.type: Easing.OutCubic
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
StatusPopupMenu {
|
||||||
|
id: chatContextMenu
|
||||||
|
|
||||||
|
onOpened: {
|
||||||
|
actionButton.state = "pressed"
|
||||||
|
}
|
||||||
|
|
||||||
|
onClosed: {
|
||||||
|
actionButton.state = "default"
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusMenuItem {
|
||||||
|
text: "Start new chat"
|
||||||
|
icon.name: "private-chat"
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusMenuItem {
|
||||||
|
text: "Start group chat"
|
||||||
|
icon.name: "group-chat"
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusMenuItem {
|
||||||
|
text: "Join public chat"
|
||||||
|
icon.name: "public-chat"
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusMenuItem {
|
||||||
|
text: "Communities"
|
||||||
|
icon.name: "communities"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Column {
|
||||||
|
anchors.top: searchInputWrapper.bottom
|
||||||
|
anchors.topMargin: 16
|
||||||
|
width: parent.width
|
||||||
spacing: 8
|
spacing: 8
|
||||||
|
|
||||||
StatusContactRequestsIndicatorListItem {
|
StatusContactRequestsIndicatorListItem {
|
||||||
|
|
@ -491,6 +602,7 @@ Rectangle {
|
||||||
height: parent.height
|
height: parent.height
|
||||||
horizontalAlignment: Text.AlignHCenter
|
horizontalAlignment: Text.AlignHCenter
|
||||||
font.pixelSize: 15
|
font.pixelSize: 15
|
||||||
|
color: Theme.palette.directColor1
|
||||||
text: modelData
|
text: modelData
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M9.82051 5.10748C10.148 4.98152 10.5 5.22326 10.5 5.57415V11.4259C10.5 11.7768 10.148 12.0185 9.8205 11.8925L8.20145 11.2698C8.01814 11.1993 7.8324 11.1356 7.6446 11.0788C7.38272 10.9996 7.11478 11.164 7.04842 11.4294L6.66417 12.9664C6.36119 14.1784 4.63882 14.1784 4.33583 12.9664L3.74837 10.6166C3.70074 10.4261 3.54598 10.2811 3.35275 10.2459L2.82112 10.1493C2.34563 10.0628 2 9.64869 2 9.16541V7.83456C2 7.35127 2.34562 6.93714 2.82111 6.85069L6.76064 6.13441C7.25246 6.04499 7.73482 5.90967 8.20139 5.73022L9.82051 5.10748Z" fill="black"/>
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 10.7149C2 9.17362 3.16788 7.88312 4.70149 7.72976L8.33775 7.36613C10.7589 7.12402 13.1156 6.44212 15.292 5.35393L19.1056 3.44712C20.4354 2.78222 22 3.74921 22 5.23598V16.7638C22 18.2506 20.4354 19.2176 19.1056 18.5527L15.292 16.6459C14.6768 16.3383 14.0473 16.0632 13.406 15.8213C13.0859 15.7006 12.75 15.9414 12.75 16.2836V18.5C12.75 19.7426 11.7426 20.75 10.5 20.75H10C7.92893 20.75 6.25 19.0711 6.25 17V14.8774C6.25 14.6205 6.05535 14.4054 5.79975 14.3799L4.70149 14.2701C3.16789 14.1167 2 12.8262 2 11.2849V10.7149ZM20.5 5.23598V16.7638C20.5 17.1355 20.1088 17.3773 19.7764 17.2111L15.9628 15.3042C13.6232 14.1345 11.0898 13.4014 8.48701 13.1411L4.85075 12.7775C4.08394 12.7008 3.5 12.0556 3.5 11.2849V10.7149C3.5 9.94424 4.08394 9.299 4.85074 9.22232L8.48701 8.85869C11.0898 8.59841 13.6232 7.86537 15.9628 6.69558L19.7764 4.78877C20.1088 4.62254 20.5 4.86429 20.5 5.23598ZM8.29975 14.6299C8.00541 14.6005 7.75 14.8316 7.75 15.1274V17C7.75 18.2426 8.75736 19.25 10 19.25H10.5C10.9142 19.25 11.25 18.9142 11.25 18.5V15.5339C11.25 15.3049 11.0947 15.1046 10.8717 15.0528C10.0384 14.8593 9.19211 14.7191 8.33775 14.6337L8.29975 14.6299Z" fill="black"/>
|
||||||
<path d="M12.3205 12.8541C12.1274 12.7798 12 12.5943 12 12.3874V4.61261C12 4.40573 12.1274 4.22021 12.3205 4.14594L12.641 4.02267C13.296 3.77074 14 4.25423 14 4.95601V12.0441C14 12.7458 13.296 13.2293 12.641 12.9774L12.3205 12.8541Z" fill="black"/>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 906 B After Width: | Height: | Size: 1.3 KiB |
Loading…
Reference in New Issue