mirror of https://github.com/status-im/StatusQ.git
feat(Components): introduce StatusChatListItem
This introduces the brand new `StatusChatListItem` which can be used
to render channels, one-to-one chats and community channels in Status
applications.
The component can be used as follows:
```qml
import Status.Components 0.1
StatusChatListItem {
name: "channel-name" // name of channel or user
type: StatusChatListItem.Type.PublicChat // GroupChat | CommunityChat | OneToOneChat
image.source: "profile/image/source" // uses letter identicon instead of not supplied
hasUnreadMessages: true // default `false`
badge.value: 1 // default `0`
muted: true // `default `false`
selected: true // default `false`
onUnmute: ... // signal when unmute icon is clicked
}
```
Closes #65
This commit is contained in:
Pascal Precht
Pascal Precht
parent
f1e34e39b9
commit
b40d427d88
|
|
@ -10,6 +10,65 @@ GridLayout {
|
||||||
columnSpacing: 5
|
columnSpacing: 5
|
||||||
rowSpacing: 5
|
rowSpacing: 5
|
||||||
|
|
||||||
|
StatusChatListItem {
|
||||||
|
id: test
|
||||||
|
name: "public-channel"
|
||||||
|
type: StatusChatListItem.Type.PublicChat
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusChatListItem {
|
||||||
|
name: "group-chat"
|
||||||
|
type: StatusChatListItem.Type.GroupChat
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusChatListItem {
|
||||||
|
name: "community-channel"
|
||||||
|
type: StatusChatListItem.Type.CommunityChat
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusChatListItem {
|
||||||
|
name: "community-channel-with-image"
|
||||||
|
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||||
|
type: StatusChatListItem.Type.CommunityChat
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusChatListItem {
|
||||||
|
name: "Weird Crazy Otter"
|
||||||
|
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||||
|
type: StatusChatListItem.Type.OneToOneChat
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusChatListItem {
|
||||||
|
name: "has-unread-messages"
|
||||||
|
type: StatusChatListItem.Type.PublicChat
|
||||||
|
hasUnreadMessages: true
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusChatListItem {
|
||||||
|
name: "has-mentions"
|
||||||
|
type: StatusChatListItem.Type.PublicChat
|
||||||
|
badge.value: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusChatListItem {
|
||||||
|
name: "is-muted"
|
||||||
|
type: StatusChatListItem.Type.PublicChat
|
||||||
|
muted: true
|
||||||
|
onUnmute: muted = false
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusChatListItem {
|
||||||
|
name: "selected-channel"
|
||||||
|
type: StatusChatListItem.Type.PublicChat
|
||||||
|
selected: true
|
||||||
|
}
|
||||||
|
StatusChatListItem {
|
||||||
|
name: "selected-muted-channel"
|
||||||
|
type: StatusChatListItem.Type.PublicChat
|
||||||
|
selected: true
|
||||||
|
muted: true
|
||||||
|
}
|
||||||
|
|
||||||
StatusListItem {
|
StatusListItem {
|
||||||
title: "Title"
|
title: "Title"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,202 @@
|
||||||
|
import QtQuick 2.13
|
||||||
|
import StatusQ.Core 0.1
|
||||||
|
import StatusQ.Core.Theme 0.1
|
||||||
|
import StatusQ.Components 0.1
|
||||||
|
import StatusQ.Controls 0.1
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: statusChatListItem
|
||||||
|
|
||||||
|
property string name: ""
|
||||||
|
property alias badge: statusBadge
|
||||||
|
property bool hasUnreadMessages: false
|
||||||
|
property bool hasMention: false
|
||||||
|
property bool muted: false
|
||||||
|
property StatusImageSettings image: StatusImageSettings {}
|
||||||
|
property StatusIconSettings icon: StatusIconSettings {
|
||||||
|
color: Theme.palette.miscColor5
|
||||||
|
}
|
||||||
|
property int type: StatusChatListItem.Type.PublicChat
|
||||||
|
property bool selected: false
|
||||||
|
|
||||||
|
signal clicked(var mouse)
|
||||||
|
signal unmute()
|
||||||
|
|
||||||
|
enum Type {
|
||||||
|
PublicChat,
|
||||||
|
GroupChat,
|
||||||
|
CommunityChat,
|
||||||
|
OneToOneChat
|
||||||
|
}
|
||||||
|
|
||||||
|
implicitWidth: 287
|
||||||
|
implicitHeight: 40
|
||||||
|
|
||||||
|
radius: 8
|
||||||
|
|
||||||
|
color: {
|
||||||
|
if (selected) {
|
||||||
|
return Theme.palette.statusChatListItem.selectedBackgroundColor
|
||||||
|
}
|
||||||
|
return sensor.containsMouse ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
|
||||||
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
id: sensor
|
||||||
|
|
||||||
|
anchors.fill: parent
|
||||||
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
hoverEnabled: true
|
||||||
|
|
||||||
|
onClicked: statusChatListItem.clicked(mouse)
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
id: identicon
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: 8
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
|
||||||
|
sourceComponent: !!statusChatListItem.image.source.toString() ?
|
||||||
|
statusRoundedImageCmp : statusLetterIdenticonCmp
|
||||||
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: statusLetterIdenticonCmp
|
||||||
|
StatusLetterIdenticon {
|
||||||
|
height: 24
|
||||||
|
width: 24
|
||||||
|
name: statusChatListItem.name
|
||||||
|
letterSize: 15
|
||||||
|
color: statusChatListItem.icon.color
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: statusRoundedImageCmp
|
||||||
|
Item {
|
||||||
|
height: 24
|
||||||
|
width: 24
|
||||||
|
StatusRoundedImage {
|
||||||
|
id: statusRoundedImage
|
||||||
|
width: parent.width
|
||||||
|
height: parent.height
|
||||||
|
image.source: statusChatListItem.image.source
|
||||||
|
}
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
sourceComponent: {
|
||||||
|
switch (statusRoundedImage.image.status) {
|
||||||
|
case Image.Loading:
|
||||||
|
return statusLoadingIndicator
|
||||||
|
break;
|
||||||
|
case Image.Error:
|
||||||
|
return statusLetterIdenticonCmp
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: statusLoadingIndicator
|
||||||
|
StatusLoadingIndicator {
|
||||||
|
color: Theme.palette.directColor6
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusIcon {
|
||||||
|
id: statusIcon
|
||||||
|
anchors.left: identicon.right
|
||||||
|
anchors.leftMargin: 8
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
|
||||||
|
width: 14
|
||||||
|
visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
|
||||||
|
opacity: {
|
||||||
|
if (statusChatListItem.muted && !sensor.containsMouse) {
|
||||||
|
return 0.4
|
||||||
|
}
|
||||||
|
return statusChatListItem.hasMention ||
|
||||||
|
statusChatListItem.hasUnreadMessages ||
|
||||||
|
statusChatListItem.selected ||
|
||||||
|
statusBadge.visible ||
|
||||||
|
sensor.containsMouse ? 1.0 : 0.7
|
||||||
|
}
|
||||||
|
|
||||||
|
icon: {
|
||||||
|
switch (statusChatListItem.type) {
|
||||||
|
case StatusChatListItem.Type.PublicCat:
|
||||||
|
return Theme.palette.name == "light" ? "public-chat" : "public-chat-white"
|
||||||
|
break;
|
||||||
|
case StatusChatListItem.Type.GroupChat:
|
||||||
|
return Theme.palette.name == "light" ? "group" : "group-white"
|
||||||
|
break;
|
||||||
|
case StatusChatListItem.Type.CommunityChat:
|
||||||
|
return Theme.palette.name == "light" ? "channel" : "channel-white"
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return Theme.palette.name == "light" ? "public-chat" : "public-chat-white"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusBaseText {
|
||||||
|
id: chatName
|
||||||
|
anchors.left: statusIcon.visible ? statusIcon.right : identicon.right
|
||||||
|
anchors.leftMargin: statusIcon.visible ? 1 : 8
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
|
||||||
|
text: statusChatListItem.name
|
||||||
|
color: {
|
||||||
|
if (statusChatListItem.muted && !sensor.containsMouse) {
|
||||||
|
return Theme.palette.directColor5
|
||||||
|
}
|
||||||
|
return statusChatListItem.hasMention ||
|
||||||
|
statusChatListItem.hasUnreadMessages ||
|
||||||
|
statusChatListItem.selected ||
|
||||||
|
sensor.containsMouse ||
|
||||||
|
statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
|
||||||
|
}
|
||||||
|
font.weight: statusChatListItem.hasMention ||
|
||||||
|
statusChatListItem.hasUnreadMessages ||
|
||||||
|
statusBadge.visible ? Font.Bold : Font.Medium
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusBadge {
|
||||||
|
id: statusBadge
|
||||||
|
|
||||||
|
anchors.right: mutedIcon.visible ? mutedIcon.left : parent.right
|
||||||
|
anchors.rightMargin: 8
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
|
||||||
|
border.width: 4
|
||||||
|
border.color: color
|
||||||
|
visible: statusBadge.value > 0
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusIcon {
|
||||||
|
id: mutedIcon
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: 8
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
width: 14
|
||||||
|
opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2
|
||||||
|
icon: Theme.palette.name === "light" ? "muted" : "muted-white"
|
||||||
|
visible: statusChatListItem.muted
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
id: mutedIconSensor
|
||||||
|
hoverEnabled: true
|
||||||
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
anchors.fill: parent
|
||||||
|
onClicked: statusChatListItem.unmute()
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusToolTip {
|
||||||
|
text: "Unmute"
|
||||||
|
visible: mutedIconSensor.containsMouse
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
module StatusQ.Components
|
module StatusQ.Components
|
||||||
|
|
||||||
StatusBadge 0.1 StatusBadge.qml
|
StatusBadge 0.1 StatusBadge.qml
|
||||||
|
StatusChatListItem 0.1 StatusChatListItem.qml
|
||||||
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
|
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
|
||||||
StatusListItem 0.1 StatusListItem.qml
|
StatusListItem 0.1 StatusListItem.qml
|
||||||
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
|
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,8 @@ import QtQuick 2.13
|
||||||
|
|
||||||
ThemePalette {
|
ThemePalette {
|
||||||
|
|
||||||
|
name: "dark"
|
||||||
|
|
||||||
property QtObject baseFont: FontLoader {
|
property QtObject baseFont: FontLoader {
|
||||||
source: "../../../assets/fonts/Inter/Inter-Regular.otf"
|
source: "../../../assets/fonts/Inter/Inter-Regular.otf"
|
||||||
}
|
}
|
||||||
|
|
@ -125,6 +127,11 @@ ThemePalette {
|
||||||
property color backgroundColor: baseColor3
|
property color backgroundColor: baseColor3
|
||||||
}
|
}
|
||||||
|
|
||||||
|
property QtObject statusChatListItem: QtObject {
|
||||||
|
property color hoverBackgroundColor: directColor8
|
||||||
|
property color selectedBackgroundColor: directColor7
|
||||||
|
}
|
||||||
|
|
||||||
property QtObject statusBadge: QtObject {
|
property QtObject statusBadge: QtObject {
|
||||||
property color foregroundColor: baseColor3
|
property color foregroundColor: baseColor3
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,8 @@ import QtQuick 2.13
|
||||||
|
|
||||||
ThemePalette {
|
ThemePalette {
|
||||||
|
|
||||||
|
name: "light"
|
||||||
|
|
||||||
property QtObject baseFont: FontLoader {
|
property QtObject baseFont: FontLoader {
|
||||||
source: "../../../assets/fonts/Inter/Inter-Regular.otf"
|
source: "../../../assets/fonts/Inter/Inter-Regular.otf"
|
||||||
}
|
}
|
||||||
|
|
@ -125,6 +127,11 @@ ThemePalette {
|
||||||
property color backgroundColor: white
|
property color backgroundColor: white
|
||||||
}
|
}
|
||||||
|
|
||||||
|
property QtObject statusChatListItem: QtObject {
|
||||||
|
property color hoverBackgroundColor: baseColor2
|
||||||
|
property color selectedBackgroundColor: baseColor3
|
||||||
|
}
|
||||||
|
|
||||||
property QtObject statusBadge: QtObject {
|
property QtObject statusBadge: QtObject {
|
||||||
property color foregroundColor: white
|
property color foregroundColor: white
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,8 @@ QtObject {
|
||||||
|
|
||||||
id: theme
|
id: theme
|
||||||
|
|
||||||
|
property string name
|
||||||
|
|
||||||
property FontLoader baseFont
|
property FontLoader baseFont
|
||||||
property FontLoader baseFontThin
|
property FontLoader baseFontThin
|
||||||
property FontLoader baseFontExtraLight
|
property FontLoader baseFontExtraLight
|
||||||
|
|
@ -86,6 +88,11 @@ QtObject {
|
||||||
property color backgroundColor
|
property color backgroundColor
|
||||||
}
|
}
|
||||||
|
|
||||||
|
property QtObject statusChatListItem: QtObject {
|
||||||
|
property color hoverBackgroundColor
|
||||||
|
property color selectedBackgroundColor
|
||||||
|
}
|
||||||
|
|
||||||
property QtObject statusBadge: QtObject {
|
property QtObject statusBadge: QtObject {
|
||||||
property color foregroundColor
|
property color foregroundColor
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7383 5.13185C10.8111 4.72408 10.5396 4.3345 10.1318 4.26168C9.72408 4.18887 9.33449 4.4604 9.26168 4.86816L8.73137 7.8379C8.68879 8.07636 8.48139 8.25001 8.23915 8.25001H5.5C5.08579 8.25001 4.75 8.58579 4.75 9.00001C4.75 9.41422 5.08579 9.75001 5.5 9.75001H7.79273C8.10404 9.75001 8.33967 10.0314 8.28494 10.3379L7.65994 13.8379C7.61736 14.0764 7.40996 14.25 7.16773 14.25H4.5C4.08579 14.25 3.75 14.5858 3.75 15C3.75 15.4142 4.08579 15.75 4.5 15.75H6.7213C7.03261 15.75 7.26824 16.0314 7.21351 16.3379L6.76168 18.8682C6.68886 19.2759 6.96039 19.6655 7.36816 19.7383C7.77592 19.8111 8.16551 19.5396 8.23832 19.1318L8.76863 16.1621C8.81121 15.9236 9.01861 15.75 9.26084 15.75H13.2213C13.5326 15.75 13.7682 16.0314 13.7135 16.3379L13.2617 18.8682C13.1889 19.2759 13.4604 19.6655 13.8682 19.7383C14.2759 19.8111 14.6655 19.5396 14.7383 19.1318L15.2686 16.1621C15.3112 15.9236 15.5186 15.75 15.7608 15.75H18.5C18.9142 15.75 19.25 15.4142 19.25 15C19.25 14.5858 18.9142 14.25 18.5 14.25H16.2073C15.896 14.25 15.6603 13.9686 15.7151 13.6621L16.3401 10.1621C16.3826 9.92365 16.59 9.75001 16.8323 9.75001H19.5C19.9142 9.75001 20.25 9.41422 20.25 9.00001C20.25 8.58579 19.9142 8.25001 19.5 8.25001H17.2787C16.9674 8.25001 16.7318 7.96858 16.7865 7.66211L17.2383 5.13185C17.3111 4.72408 17.0396 4.3345 16.6318 4.26168C16.2241 4.18887 15.8345 4.4604 15.7617 4.86816L15.2314 7.8379C15.1888 8.07636 14.9814 8.25001 14.7392 8.25001H10.7787C10.4674 8.25001 10.2318 7.96858 10.2865 7.66211L10.7383 5.13185ZM14.7849 10.3379C14.8397 10.0314 14.604 9.75001 14.2927 9.75001H10.3323C10.09 9.75001 9.88264 9.92365 9.84006 10.1621L9.21506 13.6621C9.16033 13.9686 9.39596 14.25 9.70727 14.25H13.6677C13.91 14.25 14.1174 14.0764 14.1599 13.8379L14.7849 10.3379Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1,7 @@
|
||||||
|
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8 8C9.24265 8 10.25 6.99264 10.25 5.75C10.25 4.50736 9.24265 3.5 8 3.5C6.75736 3.5 5.75 4.50736 5.75 5.75C5.75 6.99264 6.75736 8 8 8Z" fill="white"/>
|
||||||
|
<path d="M4.12343 12.5101C4.56395 10.7798 6.13252 9.5 8 9.5C9.86749 9.5 11.4361 10.7798 11.8766 12.5101C12.0128 13.0453 11.5523 13.5 11 13.5H5C4.44772 13.5 3.98718 13.0453 4.12343 12.5101Z" fill="white"/>
|
||||||
|
<path d="M4.5 7.75C4.5 8.7165 3.7165 9.5 2.75 9.5C1.7835 9.5 1 8.7165 1 7.75C1 6.7835 1.7835 6 2.75 6C3.7165 6 4.5 6.7835 4.5 7.75Z" fill="white"/>
|
||||||
|
<path d="M13.25 9.5C14.2165 9.5 15 8.7165 15 7.75C15 6.7835 14.2165 6 13.25 6C12.2835 6 11.5 6.7835 11.5 7.75C11.5 8.7165 12.2835 9.5 13.25 9.5Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 778 B |
|
|
@ -0,0 +1,5 @@
|
||||||
|
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9.70186 3.61736C9.91545 3.40377 9.89277 3.04794 9.62625 2.90578C9.13934 2.64607 8.58479 2.5 8.00002 2.5C6.27863 2.5 4.8192 3.76576 4.57576 5.46984L4.14144 8.51005C4.11619 8.68684 4.43245 8.88677 4.55873 8.76049L9.70186 3.61736Z" fill="white"/>
|
||||||
|
<path d="M1.952 13.4879C1.6769 13.782 1.68279 14.2434 1.96967 14.5303C2.26256 14.8232 2.73744 14.8232 3.03033 14.5303L4.91421 12.6464C5.00798 12.5527 5.13516 12.5 5.26777 12.5H5.5C5.77614 12.5 5.99359 12.7273 6.06171 12.9949C6.28197 13.8601 7.06626 14.5 8 14.5C8.93374 14.5 9.71803 13.8601 9.93829 12.9949C10.0064 12.7273 10.2239 12.5 10.5 12.5H12.5858C13.4767 12.5 13.9229 11.4229 13.2929 10.7929L12.7071 10.2071C12.2481 9.74811 11.9504 9.15264 11.8586 8.51005L11.543 6.30054C11.5207 6.14475 11.5731 5.98756 11.6844 5.87628L14.0303 3.53033C14.3232 3.23744 14.3232 2.76256 14.0303 2.46967C13.7435 2.18281 13.282 2.1769 12.988 2.45195C12.9822 2.45811 12.9763 2.4642 12.9703 2.47021L1.97033 13.4702C1.96429 13.4762 1.95818 13.4822 1.952 13.4879Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9.70186 3.61736C9.91545 3.40377 9.89277 3.04794 9.62625 2.90578C9.13934 2.64607 8.58479 2.5 8.00002 2.5C6.27863 2.5 4.8192 3.76576 4.57576 5.46984L4.14144 8.51005C4.11619 8.68684 4.43245 8.88677 4.55873 8.76049L9.70186 3.61736Z" fill="black"/>
|
||||||
|
<path d="M1.952 13.4879C1.6769 13.782 1.68279 14.2434 1.96967 14.5303C2.26256 14.8232 2.73744 14.8232 3.03033 14.5303L4.91421 12.6464C5.00798 12.5527 5.13516 12.5 5.26777 12.5H5.5C5.77614 12.5 5.99359 12.7273 6.06171 12.9949C6.28197 13.8601 7.06626 14.5 8 14.5C8.93374 14.5 9.71803 13.8601 9.93829 12.9949C10.0064 12.7273 10.2239 12.5 10.5 12.5H12.5858C13.4767 12.5 13.9229 11.4229 13.2929 10.7929L12.7071 10.2071C12.2481 9.74811 11.9504 9.15264 11.8586 8.51005L11.543 6.30054C11.5207 6.14475 11.5731 5.98756 11.6844 5.87628L14.0303 3.53033C14.3232 3.23744 14.3232 2.76256 14.0303 2.46967C13.7435 2.18281 13.282 2.1769 12.988 2.45195C12.9822 2.45811 12.9763 2.4642 12.9703 2.47021L1.97033 13.4702C1.96429 13.4762 1.95818 13.4822 1.952 13.4879Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<svg width="16" height="17" viewBox="0 0 16 17" 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="white"/>
|
||||||
|
<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="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 906 B |
|
|
@ -1,3 +1,4 @@
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<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="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 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: 1.3 KiB After Width: | Height: | Size: 906 B |
Loading…
Reference in New Issue