status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add icons to the menu

This commit is contained in:
Richard Ramos 2020-05-27 10:57:22 -04:00 committed by RichΛrd
parent 12bbea8d77
commit c7e54c8de7
4 changed files with 90 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
ui/app/AppLayouts/Chat/ContactsColumn.qml
View File

@ -100,49 +100,85 @@ Item {
fontSizeMode: Text.FixedSize
font.bold: true
font.pixelSize: 28
state: "default"
rotation: 0
states: [
State {
name: "default"
PropertyChanges { target: addChatLbl; rotation: 0 }
},
State {
name: "rotated"
PropertyChanges { target: addChatLbl; rotation: 45 }
}
]
transitions: [
Transition {
from: "default"
to: "rotated"
RotationAnimation {
duration: 150;
direction: RotationAnimation.Clockwise
easing.type: Easing.InCubic
}
},
Transition {
from: "rotated"
to: "default"
RotationAnimation {
duration: 150;
direction: RotationAnimation.Counterclockwise
easing.type: Easing.OutCubic
}
}
]
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
addChatLbl.state = "rotated"
let x = addChatLbl.x + addChatLbl.width / 2 - newChatMenu.width / 2
newChatMenu.popup(x, addChatLbl.height + 10)
}
QQC2.Menu {
id: newChatMenu
Action { text: qsTr("Start new chat") }
Action { text: qsTr("Start group chat") }
Action {
QQC2.Action {
text: qsTr("Start new chat")
icon.source: "../../img/new_chat.svg"
console.log("TODO: Start new chat")
}
QQC2.Action {
text: qsTr("Start group chat")
icon.source: "../../img/group_chat.svg"
onTriggered: {
console.log("TODO: Start group chat")
}
}
QQC2.Action {
text: qsTr("Join public chat")
icon.source: "../../img/public_chat.svg"
onTriggered: {
chatGroupsListView.currentIndex = chatsModel.joinChat(searchText.text);
searchText.text = "";
}
}
onAboutToHide: {
addChatLbl.state = "default"
}
topPadding: 16
bottomPadding: 16
delegate: QQC2.MenuItem {
id: addChatMenuItem
implicitWidth: 200
implicitHeight: 40
font.pixelSize: 15
contentItem: Text {
leftPadding: addChatMenuItem.indicator.width
rightPadding: addChatMenuItem.arrow.width
text: addChatMenuItem.text
font: addChatMenuItem.font
color: addChatMenuItem.highlighted ? Theme.white : Theme.black
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
icon.color: addChatMenuItem.highlighted ? "white" : Theme.blue
background: Rectangle {
implicitWidth: 220
implicitHeight: 40
@ -156,6 +192,29 @@ Item {
implicitHeight: 172
color: "transparent"
Rectangle {
id: bgAddItemMenuArrow
color: Theme.white2
height: 14
width: 14
rotation: 135
x: bgAddItemMenu.width / 2 - width / 2
layer.enabled: true
layer.effect: DropShadow{
width: bgAddItemMenuArrow.width
height: bgAddItemMenuArrow.height
x: bgAddItemMenuArrow.x
y: bgAddItemMenuArrow.y + 10
visible: bgAddItemMenuArrow.visible
source: bgAddItemMenuArrow
horizontalOffset: 0
verticalOffset: 5
radius: 10
samples: 15
color: "#22000000"
}
}
Rectangle {
id: bgAddItemMenu2
y: 7
@ -172,22 +231,13 @@ Item {
visible: bgAddItemMenu2.visible
source: bgAddItemMenu2
horizontalOffset: 0
verticalOffset: 5
verticalOffset: 7
radius: 10
samples: 15
color: "#22000000"
}
}
// Trying to create an arrow for the dialog
// TODO: replace this and the prev rectangle by a canvas that draws the menu bg including its arrow
Rectangle {
color: Theme.white2
height: 14
width: 14
rotation: 135
x: bgAddItemMenu.width / 2 - width / 2
}
}
}
}

6
ui/app/img/group_chat.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.16665 6.66668C9.16665 8.5076 7.67434 10 5.83332 10C3.9923 10 2.49999 8.5076 2.49999 6.66668C2.49999 4.82575 3.9923 3.33334 5.83332 3.33334C7.67434 3.33334 9.16665 4.82575 9.16665 6.66668ZM7.49999 6.66668C7.49999 7.58719 6.75373 8.33334 5.83332 8.33334C4.91291 8.33334 4.16665 7.58719 4.16665 6.66668C4.16665 5.74616 4.91291 5.00001 5.83332 5.00001C6.75373 5.00001 7.49999 5.74616 7.49999 6.66668Z" fill="#4360DF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 9.16668C17.5 11.0076 16.0077 12.5 14.1667 12.5C12.3256 12.5 10.8333 11.0076 10.8333 9.16668C10.8333 7.32575 12.3256 5.83334 14.1667 5.83334C16.0077 5.83334 17.5 7.32575 17.5 9.16668ZM15.8333 9.16668C15.8333 10.0872 15.0871 10.8333 14.1667 10.8333C13.2462 10.8333 12.5 10.0872 12.5 9.16668C12.5 8.24616 13.2462 7.50001 14.1667 7.50001C15.0871 7.50001 15.8333 8.24616 15.8333 9.16668Z" fill="#4360DF"/>
<path d="M2.12665 14.1113L1.84447 13.8619C1.55577 13.6068 1.56432 13.1538 1.86258 12.9099L2.19644 12.6366C3.11929 12.024 4.22606 11.6671 5.41665 11.6667H6.24999C7.44119 11.6667 8.54877 12.0237 9.47203 12.6366L9.80589 12.9099C10.1042 13.1538 10.1127 13.6068 9.824 13.8619L9.54182 14.1113C9.33633 14.2929 9.03665 14.3194 8.80268 14.1767L8.33332 13.8907C7.72053 13.5363 7.00886 13.3333 6.24999 13.3333H5.41848C4.65961 13.3333 3.94794 13.5363 3.33515 13.8907L2.86579 14.1767C2.63182 14.3194 2.33214 14.2929 2.12665 14.1113Z" fill="#4360DF"/>
<path d="M10.0433 16.6113L9.76114 16.3619C9.47244 16.1068 9.48098 15.6538 9.77924 15.4099L10.1131 15.1366C11.0364 14.5237 12.1439 14.1667 13.3352 14.1667H15.0018C16.193 14.1667 17.3006 14.5237 18.2239 15.1366L18.5577 15.4099C18.856 15.6538 18.8645 16.1068 18.5758 16.3619L18.2936 16.6113C18.2607 16.6405 18.2251 16.6658 18.1879 16.6868C18.1557 16.705 18.1223 16.7202 18.0882 16.7323C18.0017 16.7628 17.9097 16.774 17.8188 16.7651C17.7272 16.7562 17.6367 16.7269 17.5545 16.6767L17.0851 16.3907C16.4724 16.0363 15.7607 15.8333 15.0018 15.8333H13.3352C12.5763 15.8333 11.8646 16.0363 11.2518 16.3907L10.7825 16.6767C10.5485 16.8194 10.2488 16.7929 10.0433 16.6113Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

3
ui/app/img/new_chat.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.83329 0.666656C2.53211 0.666656 0.666626 2.53214 0.666626 4.83332V13.1667C0.666626 13.4823 0.844961 13.7709 1.12728 13.912C1.4096 14.0532 1.74744 14.0227 1.99996 13.8333L4.66663 11.8333C4.95512 11.617 5.30601 11.5 5.66663 11.5H7.33329C7.33329 13.3409 8.82568 14.8333 10.6666 14.8333H12.8888L16 17.1667C16.2525 17.356 16.5903 17.3865 16.8726 17.2453C17.155 17.1042 17.3333 16.8156 17.3333 16.5V9.83332C17.3333 7.99237 15.8409 6.49999 14 6.49999V4.83332C14 2.53214 12.1345 0.666656 9.83329 0.666656H4.83329ZM12.3333 7.33332V4.83332C12.3333 3.45261 11.214 2.33332 9.83329 2.33332H4.83329C3.45258 2.33332 2.33329 3.45261 2.33329 4.83332V11.0833C2.33329 11.255 2.52929 11.353 2.66663 11.25L3.66663 10.5C4.24361 10.0672 4.94539 9.83332 5.66663 9.83332H9.83329C11.214 9.83332 12.3333 8.71404 12.3333 7.33332ZM8.99996 11.5H9.83329C11.8491 11.5 13.5306 10.0685 13.9166 8.16666H14C14.9204 8.16666 15.6666 8.91285 15.6666 9.83332V14.4167C15.6666 14.5883 15.4706 14.6863 15.3333 14.5833L13.6666 13.3333C13.5224 13.2251 13.3469 13.1667 13.1666 13.1667H10.6666C9.74615 13.1667 8.99996 12.4205 8.99996 11.5Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

3
ui/app/img/public_chat.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7953 3.87842C16.1369 3.45921 17.5 4.4614 17.5 5.86694V13.2998C17.5 14.7053 16.1369 15.7075 14.7953 15.2883L10.6085 13.9799L9.42423 16.3484C9.07125 17.0542 8.34981 17.5 7.56083 17.5H6.10799C4.59269 17.5 3.58439 15.934 4.21143 14.5546L5.2358 12.301L4.25435 11.9943C3.21065 11.6681 2.5 10.7015 2.5 9.60809V9.55865C2.5 8.46521 3.21065 7.49862 4.25435 7.17248L14.7953 3.87842ZM15.8333 5.86694C15.8333 5.58587 15.5607 5.38537 15.2924 5.4692L14.1667 5.82096V13.3458L15.2924 13.6975C15.5607 13.7814 15.8333 13.5809 15.8333 13.2998V5.86694ZM4.75138 8.76326L12.5 6.3418V12.825L4.75138 10.4035C4.40348 10.2947 4.16667 9.97257 4.16667 9.60809V9.55865C4.16667 9.19417 4.40348 8.87201 4.75138 8.76326ZM6.83879 12.8019L5.72856 15.2443C5.60323 15.5202 5.80485 15.8334 6.10799 15.8334H7.56083C7.71871 15.8334 7.86296 15.7442 7.93355 15.6031L8.99679 13.4763L6.83879 12.8019Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB