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

feat(@desktop/chat): Style gif widget component

This commit is contained in:
Anthony Laibe 2021-08-02 09:11:28 +02:00 committed by Iuri Matias
parent c5051d4d4f
commit b21e1d87c0
9 changed files with 152 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/chat/views/gif_list.nim
View File

@ -7,6 +7,7 @@ type
Url = UserRole + 1
Id = UserRole + 2
Title = UserRole + 3
TinyUrl = UserRole + 4
QtObject:
type
@ -41,10 +42,12 @@ QtObject:
of GifRoles.Url: result = newQVariant(gif.url)
of GifRoles.Id: result = newQVariant(gif.id)
of GifRoles.Title: result = newQVariant(gif.title)
of GifRoles.TinyUrl: result = newQVariant(gif.tinyUrl)
method roleNames(self: GifList): Table[int, string] =
{
GifRoles.Url.int:"url",
GifRoles.Id.int:"id",
GifRoles.Title.int:"title"
GifRoles.Title.int:"title",
GifRoles.TinyUrl.int:"tinyUrl"
}.toTable

4
src/status/gif.nim
View File

@ -21,6 +21,7 @@ type
id*: int
title*: string
url*: string
tinyUrl*: string
height*: int
proc toGifItem(jsonMsg: JsonNode): GifItem =
@ -28,11 +29,12 @@ proc toGifItem(jsonMsg: JsonNode): GifItem =
id: jsonMsg{"id"}.getInt,
title: jsonMsg{"title"}.getStr,
url: jsonMsg{"media"}[0]["gif"]["url"].getStr,
tinyUrl: jsonMsg{"media"}[0]["tinygif"]["url"].getStr,
height: jsonMsg{"media"}[0]["gif"]["dims"][1].getInt
)
proc `$`*(self: GifItem): string =
return fmt"GifItem(id:{self.id}, title:{self.title}, url:{self.url})"
return fmt"GifItem(id:{self.id}, title:{self.title}, url:{self.url}, tinyUrl:{self.tinyUrl}, height:{self.height})"
type
GifClient* = ref object

1
ui/app/AppMain.qml
View File

@ -359,6 +359,7 @@ StatusAppLayout {
property bool isActivityCenterEnabled: false
property bool showOnlineUsers: false
property bool isGifWidgetEnabled: false
property bool isTenorWarningAccepted: false
property bool displayChatImages: false
property bool useCompactMode: true
property bool timelineEnabled: true

6
ui/app/img/gif-icon.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="M16 1.49997H4C2.61929 1.49997 1.5 2.61926 1.5 3.99997V16C1.5 17.3807 2.61929 18.5 4 18.5H16C17.3807 18.5 18.5 17.3807 18.5 16V3.99997C18.5 2.61926 17.3807 1.49997 16 1.49997ZM4 -3.05176e-05C1.79086 -3.05176e-05 0 1.79083 0 3.99997V16C0 18.2091 1.79086 20 4 20H16C18.2091 20 20 18.2091 20 16V3.99997C20 1.79083 18.2091 -3.05176e-05 16 -3.05176e-05H4Z" fill="#4360DF"/>
<path d="M8.72261 11.4868V10.4133C8.72261 9.99525 8.38061 9.65325 7.96261 9.65325H6.22411C5.90111 9.65325 5.64461 9.90975 5.64461 10.2328C5.64461 10.5748 5.90111 10.8313 6.22411 10.8313H7.37361V11.5913C7.11711 11.8288 6.58511 12.0758 6.02461 12.0758C4.87511 12.0758 4.03911 11.1923 4.03911 9.99525C4.03911 8.79825 4.87511 7.91475 6.02461 7.91475C6.50911 7.91475 6.98411 8.12375 7.34511 8.47525C7.46861 8.59875 7.63961 8.66525 7.80111 8.66525C8.13361 8.66525 8.43761 8.38975 8.43761 8.05725C8.43761 7.91475 8.38061 7.76275 8.27611 7.64875C7.78211 7.11675 7.05061 6.71775 6.02461 6.71775C4.17211 6.71775 2.65211 7.99075 2.65211 9.99525C2.65211 11.9903 4.17211 13.2823 6.02461 13.2823C7.30711 13.2823 8.72261 12.6363 8.72261 11.4868Z" fill="#4360DF"/>
<path d="M11.4392 12.5602V7.43975C11.4392 7.07875 11.1352 6.77475 10.7742 6.77475C10.3942 6.77475 10.0902 7.07875 10.0902 7.43975V12.5602C10.0902 12.9212 10.3942 13.2252 10.7552 13.2252C11.1352 13.2252 11.4392 12.9212 11.4392 12.5602Z" fill="#4360DF"/>
<path d="M17.3479 7.43025C17.3479 7.09775 17.0819 6.83175 16.7684 6.83175H13.5669C13.1489 6.83175 12.8069 7.17375 12.8069 7.59175V12.5603C12.8069 12.9213 13.1109 13.2253 13.4719 13.2253C13.8519 13.2253 14.1559 12.9213 14.1559 12.5603V11.0463C14.1559 10.7701 14.3797 10.5463 14.6559 10.5463H16.2425C16.556 10.5463 16.822 10.2803 16.822 9.95725C16.822 9.62475 16.556 9.35876 16.2425 9.35876H14.6559C14.3797 9.35876 14.1559 9.1349 14.1559 8.85876V8.51925C14.1559 8.24311 14.3797 8.01925 14.6559 8.01925H16.7684C17.0819 8.01925 17.3479 7.75325 17.3479 7.43025Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

9
ui/shared/status/StatusChatInput.qml
View File

@ -1092,14 +1092,9 @@ Rectangle {
anchors.right: emojiBtn.left
anchors.rightMargin: 2
anchors.bottom: parent.bottom
icon.name: "wallet"
icon.name: "gif-icon"
type: "secondary"
onClicked: {
if (!gifPopup.opened) {
chatsModel.gif.load()
}
togglePopup(gifPopup, gifBtn)
}
onClicked: togglePopup(gifPopup, gifBtn)
}
StatusIconButton {

34
ui/shared/status/StatusGifColumn.qml
View File

@ -1,11 +1,13 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import "../../imports"
Column {
id: root
spacing: 4
spacing: 8
property alias gifList: repeater
property var gifWidth: 0
property var gifSelected: function () {}
@ -14,14 +16,40 @@ Column {
id: repeater
delegate: Rectangle {
height: animation.height
height: animation.status != Image.Ready ? loader.height : animation.height
width: root.gifWidth
color: Style.current.background
border.color: Style.current.border
Rectangle {
id: loader
height: 100
width: root.gifWidth
visible: animation.status != Image.Ready
radius: Style.current.radius
rotation: 90
gradient: Gradient {
GradientStop { position: 0.0; color: "transparent" }
GradientStop { position: 1.0; color: "#E6EEF2" }
}
}
AnimatedImage {
id: animation
source: model.url
visible: animation.status == Image.Ready
source: model.tinyUrl
width: root.gifWidth
fillMode: Image.PreserveAspectFit
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: animation.width
height: animation.height
radius: Style.current.radius
color: Style.current.background
border.color: Style.current.border
}
}
}
MouseArea {

98
ui/shared/status/StatusGifPopup.qml
View File

@ -37,6 +37,17 @@ Popup {
onOpened: {
searchBox.text = ""
searchBox.forceActiveFocus(Qt.MouseFocusReason)
if (appSettings.isTenorWarningAccepted) {
chatsModel.gif.load()
} else {
confirmationPopup.open()
}
}
onClosed: {
if (confirmationPopup.opened) {
confirmationPopup.close()
}
}
Connections {
@ -71,19 +82,88 @@ Popup {
}
}
StyledText {
text: qsTr("TRENDING")
visible: searchBox.text === ""
color: Style.current.secondaryText
font.pixelSize: 13
topPadding: gifHeader.headerMargin
leftPadding: gifHeader.headerMargin
}
Loader {
Layout.fillWidth: true
Layout.rightMargin: Style.current.smallPadding / 2
Layout.topMargin: Style.current.smallPadding
Layout.alignment: Qt.AlignTop | Qt.AlignLeft
Layout.preferredHeight: 400 - gifHeader.height
sourceComponent: loading ? gifLoading : gifItems
sourceComponent: gifItems
}
}
Component {
id: gifLoading
StatusLoadingIndicator {}
Popup {
id: confirmationPopup
modal: false
anchors.centerIn: parent
height: 290
width: 280
closePolicy: Popup.NoAutoClose
background: Rectangle {
radius: Style.current.radius
color: Style.current.background
border.color: Style.current.border
layer.enabled: true
layer.effect: DropShadow{
verticalOffset: 3
radius: 8
samples: 15
fast: true
cached: true
color: "#22000000"
}
}
Column {
anchors.fill: parent
spacing: 12
SVGImage {
id: gifImage
anchors.horizontalCenter: parent.horizontalCenter
source: "./assets/img/gif.svg"
}
StyledText {
id: title
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("Enable Tenor GIFs?")
font.weight: Font.Medium
font.pixelSize: Style.current.primaryTextFontSize
}
StyledText {
id: headline
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("Once enabled, GIFs posted in the chat may share your metadata with Tenor.")
width: parent.width
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
font.pixelSize: 13
color: Style.current.secondaryText
}
StatusButton {
id: removeBtn
anchors.horizontalCenter: parent.horizontalCenter
//% "Remove"
text: qsTrId("Enable")
onClicked: {
appSettings.isTenorWarningAccepted = true
chatsModel.gif.load()
confirmationPopup.close()
}
}
}
}
Component {
@ -102,23 +182,23 @@ Popup {
Row {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: 4
spacing: Style.current.halfPadding
StatusGifColumn {
gifList.model: chatsModel.gif.columnA
gifWidth: (popup.width / 3) - 12
gifWidth: (popup.width / 3) - Style.current.padding
gifSelected: popup.gifSelected
}
StatusGifColumn {
gifList.model: chatsModel.gif.columnB
gifWidth: (popup.width / 3) - 12
gifWidth: (popup.width / 3) - Style.current.padding
gifSelected: popup.gifSelected
}
StatusGifColumn {
gifList.model: chatsModel.gif.columnC
gifWidth: (popup.width / 3) - 12
gifWidth: (popup.width / 3) - Style.current.padding
gifSelected: popup.gifSelected
}
}

8
ui/shared/status/assets/img/gif-dark.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="132" height="94" viewBox="0 0 132 94" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M15 21C11.6863 21 9 23.6863 9 27V79C9 82.3137 11.6863 85 15 85H105C108.314 85 111 82.3137 111 79V27C111 23.6863 108.314 21 105 21H15ZM55.4939 52.4786C55.3915 52.4033 55.2819 52.3365 55.1664 52.2793C55.0895 52.2413 55.01 52.2075 54.9282 52.1784C54.6939 52.0949 54.4409 52.0492 54.1772 52.0492H49.2087C48.2855 52.0492 47.5525 52.7525 47.5525 53.6382C47.5525 54.576 48.2855 55.2793 49.2087 55.2793H52.4939V57.3632C52.1237 57.6922 51.5526 58.0277 50.8715 58.2793C50.2042 58.5258 49.4313 58.6918 48.6385 58.6918C45.3533 58.6918 42.964 56.2692 42.964 52.987C42.964 49.7048 45.3533 47.2822 48.6385 47.2822C50.0232 47.2822 51.3807 47.8553 52.4125 48.8191C52.5034 48.9063 52.6033 48.9832 52.7094 49.0492C53.0153 49.2396 53.373 49.3401 53.7157 49.3401C53.873 49.3401 54.028 49.3194 54.1772 49.2807C54.3533 49.2351 54.5214 49.1644 54.6754 49.0732C55.1798 48.7746 55.5348 48.2557 55.5348 47.6729C55.5348 47.2822 55.3719 46.8654 55.0732 46.5528C53.6614 45.0941 51.5708 44 48.6385 44C43.3441 44 39 47.4906 39 52.987C39 58.4573 43.3441 62 48.6385 62C52.3038 62 56.3493 60.2287 56.3493 57.0767V54.1331C56.3493 53.4609 56.013 52.8603 55.4939 52.4786ZM55.3529 63.3273C56.1155 62.893 56.8796 62.3237 57.5323 61.615C58.2208 63.5394 60.1137 64.8437 62.1585 64.8437C63.6764 64.8437 65.1308 64.1425 66.0666 62.9876C66.9872 64.1333 68.4135 64.8437 69.9225 64.8437C72.4909 64.8437 74.8774 62.8363 74.8774 60.0203V57.4978H77.841C80.3076 57.4978 82.4972 55.5102 82.4972 52.8828C82.4972 51.7941 82.1253 50.8096 81.5116 50.0302C82.9627 49.2675 84 47.7622 84 45.9537C84 43.3311 81.8421 41.3126 79.3438 41.3126H70.194C68.6303 41.3126 67.1628 42.0213 66.1934 43.1744C65.2802 41.934 63.7918 41.1563 62.2128 41.1563C60.0563 41.1563 58.0279 42.5716 57.4329 44.6925C57.3717 44.62 57.3081 44.5492 57.2423 44.4804L57.2357 44.4734L57.2289 44.4664C55.2621 42.4342 52.3979 41 48.6385 41C42.0176 41 36 45.5216 36 52.987C36 60.4097 41.9991 65 48.6385 65C50.894 65 53.353 64.4661 55.3529 63.3273ZM64.1134 45.9797V60.0203C64.1134 61.0101 63.2445 61.8437 62.1585 61.8437C61.1268 61.8437 60.258 61.0101 60.258 60.0203V45.9797C60.258 44.9899 61.1268 44.1563 62.2128 44.1563C63.2445 44.1563 64.1134 44.9899 64.1134 45.9797ZM81 45.9537C81 45.042 80.2398 44.3126 79.3438 44.3126H70.194C68.9994 44.3126 68.022 45.2504 68.022 46.3965V60.0203C68.022 61.0101 68.8908 61.8437 69.9225 61.8437C71.0085 61.8437 71.8774 61.0101 71.8774 60.0203V55.8689C71.8774 55.1117 72.5171 54.4978 73.3063 54.4978H77.841C78.737 54.4978 79.4972 53.7685 79.4972 52.8828C79.4972 51.9711 78.737 51.2417 77.841 51.2417H73.3063C72.5171 51.2417 71.8774 50.6279 71.8774 49.8707V48.9398C71.8774 48.1826 72.5171 47.5687 73.3063 47.5687H79.3438C80.2398 47.5687 81 46.8394 81 45.9537Z" fill="#88B0FF"/>
<path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M21 15C17.6863 15 15 17.6863 15 21H105C108.314 21 111 23.6863 111 27V79C114.314 79 117 76.3137 117 73V21C117 17.6863 114.314 15 111 15H21Z" fill="#88B0FF"/>
<path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M27 9C23.6863 9 21 11.6863 21 15H111C114.314 15 117 17.6863 117 21V73C120.314 73 123 70.3137 123 67V15C123 11.6863 120.314 9 117 9H27Z" fill="#88B0FF"/>
<path d="M56.3493 57.0767V54.1331C56.3493 52.987 55.3719 52.0492 54.1772 52.0492H49.2087C48.2855 52.0492 47.5525 52.7525 47.5525 53.6382C47.5525 54.576 48.2855 55.2793 49.2087 55.2793H52.4939V57.3632C51.7608 58.0145 50.2404 58.6918 48.6385 58.6918C45.3533 58.6918 42.964 56.2692 42.964 52.987C42.964 49.7048 45.3533 47.2822 48.6385 47.2822C50.0232 47.2822 51.3807 47.8553 52.4125 48.8191C52.7654 49.1577 53.2541 49.3401 53.7157 49.3401C54.666 49.3401 55.5348 48.5847 55.5348 47.6729C55.5348 47.2822 55.3719 46.8654 55.0732 46.5528C53.6614 45.0941 51.5708 44 48.6385 44C43.3441 44 39 47.4906 39 52.987C39 58.4573 43.3441 62 48.6385 62C52.3038 62 56.3493 60.2287 56.3493 57.0767Z" fill="#88B0FF"/>
<path d="M64.1134 60.0203V45.9797C64.1134 44.9899 63.2445 44.1563 62.2128 44.1563C61.1268 44.1563 60.258 44.9899 60.258 45.9797V60.0203C60.258 61.0101 61.1268 61.8437 62.1585 61.8437C63.2445 61.8437 64.1134 61.0101 64.1134 60.0203Z" fill="#88B0FF"/>
<path d="M81 45.9537C81 45.042 80.2398 44.3126 79.3438 44.3126H70.194C68.9994 44.3126 68.022 45.2504 68.022 46.3965V60.0203C68.022 61.0101 68.8908 61.8437 69.9225 61.8437C71.0085 61.8437 71.8774 61.0101 71.8774 60.0203V55.8688C71.8774 55.1117 72.5171 54.4978 73.3063 54.4978H77.841C78.7369 54.4978 79.4972 53.7685 79.4972 52.8828C79.4972 51.9711 78.7369 51.2417 77.841 51.2417H73.3063C72.5171 51.2417 71.8774 50.6279 71.8774 49.8707V48.9398C71.8774 48.1826 72.5171 47.5687 73.3063 47.5687H79.3438C80.2398 47.5687 81 46.8394 81 45.9537Z" fill="#88B0FF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

8
ui/shared/status/assets/img/gif.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="132" height="94" viewBox="0 0 132 94" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd" d="M15 21C11.6863 21 9 23.6863 9 27V79C9 82.3137 11.6863 85 15 85H105C108.314 85 111 82.3137 111 79V27C111 23.6863 108.314 21 105 21H15ZM55.4939 52.4786C55.3915 52.4033 55.2819 52.3365 55.1664 52.2793C55.0895 52.2413 55.01 52.2075 54.9282 52.1784C54.6939 52.0949 54.4409 52.0492 54.1772 52.0492H49.2087C48.2855 52.0492 47.5525 52.7525 47.5525 53.6382C47.5525 54.576 48.2855 55.2793 49.2087 55.2793H52.4939V57.3632C52.1237 57.6922 51.5526 58.0277 50.8715 58.2793C50.2042 58.5258 49.4313 58.6918 48.6385 58.6918C45.3533 58.6918 42.964 56.2692 42.964 52.987C42.964 49.7048 45.3533 47.2822 48.6385 47.2822C50.0232 47.2822 51.3807 47.8553 52.4125 48.8191C52.5034 48.9063 52.6033 48.9832 52.7094 49.0492C53.0153 49.2396 53.373 49.3401 53.7157 49.3401C53.873 49.3401 54.028 49.3194 54.1772 49.2807C54.3533 49.2351 54.5214 49.1644 54.6754 49.0732C55.1798 48.7746 55.5348 48.2557 55.5348 47.6729C55.5348 47.2822 55.3719 46.8654 55.0732 46.5528C53.6614 45.0941 51.5708 44 48.6385 44C43.3441 44 39 47.4906 39 52.987C39 58.4573 43.3441 62 48.6385 62C52.3038 62 56.3493 60.2287 56.3493 57.0767V54.1331C56.3493 53.4609 56.013 52.8603 55.4939 52.4786ZM55.3529 63.3273C56.1155 62.893 56.8796 62.3237 57.5323 61.615C58.2208 63.5394 60.1137 64.8437 62.1585 64.8437C63.6764 64.8437 65.1308 64.1425 66.0666 62.9876C66.9872 64.1333 68.4135 64.8437 69.9225 64.8437C72.4909 64.8437 74.8774 62.8363 74.8774 60.0203V57.4978H77.841C80.3076 57.4978 82.4972 55.5102 82.4972 52.8828C82.4972 51.7941 82.1253 50.8096 81.5116 50.0302C82.9627 49.2675 84 47.7622 84 45.9537C84 43.3311 81.8421 41.3126 79.3438 41.3126H70.194C68.6303 41.3126 67.1628 42.0213 66.1934 43.1744C65.2802 41.934 63.7918 41.1563 62.2128 41.1563C60.0563 41.1563 58.0279 42.5716 57.4329 44.6925C57.3717 44.62 57.3081 44.5492 57.2423 44.4804L57.2357 44.4734L57.2289 44.4664C55.2621 42.4342 52.3979 41 48.6385 41C42.0176 41 36 45.5216 36 52.987C36 60.4097 41.9991 65 48.6385 65C50.894 65 53.353 64.4661 55.3529 63.3273ZM64.1134 45.9797V60.0203C64.1134 61.0101 63.2445 61.8437 62.1585 61.8437C61.1268 61.8437 60.258 61.0101 60.258 60.0203V45.9797C60.258 44.9899 61.1268 44.1563 62.2128 44.1563C63.2445 44.1563 64.1134 44.9899 64.1134 45.9797ZM81 45.9537C81 45.042 80.2398 44.3126 79.3438 44.3126H70.194C68.9994 44.3126 68.022 45.2504 68.022 46.3965V60.0203C68.022 61.0101 68.8908 61.8437 69.9225 61.8437C71.0085 61.8437 71.8774 61.0101 71.8774 60.0203V55.8689C71.8774 55.1117 72.5171 54.4978 73.3063 54.4978H77.841C78.737 54.4978 79.4972 53.7685 79.4972 52.8828C79.4972 51.9711 78.737 51.2417 77.841 51.2417H73.3063C72.5171 51.2417 71.8774 50.6279 71.8774 49.8707V48.9398C71.8774 48.1826 72.5171 47.5687 73.3063 47.5687H79.3438C80.2398 47.5687 81 46.8394 81 45.9537Z" fill="#4360DF"/>
<path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M21 15C17.6863 15 15 17.6863 15 21H105C108.314 21 111 23.6863 111 27V79C114.314 79 117 76.3137 117 73V21C117 17.6863 114.314 15 111 15H21Z" fill="#4360DF"/>
<path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M27 9C23.6863 9 21 11.6863 21 15H111C114.314 15 117 17.6863 117 21V73C120.314 73 123 70.3137 123 67V15C123 11.6863 120.314 9 117 9H27Z" fill="#4360DF"/>
<path d="M56.3493 57.0767V54.1331C56.3493 52.987 55.3719 52.0492 54.1772 52.0492H49.2087C48.2855 52.0492 47.5525 52.7525 47.5525 53.6382C47.5525 54.576 48.2855 55.2793 49.2087 55.2793H52.4939V57.3632C51.7608 58.0145 50.2404 58.6918 48.6385 58.6918C45.3533 58.6918 42.964 56.2692 42.964 52.987C42.964 49.7048 45.3533 47.2822 48.6385 47.2822C50.0232 47.2822 51.3807 47.8553 52.4125 48.8191C52.7654 49.1577 53.2541 49.3401 53.7157 49.3401C54.666 49.3401 55.5348 48.5847 55.5348 47.6729C55.5348 47.2822 55.3719 46.8654 55.0732 46.5528C53.6614 45.0941 51.5708 44 48.6385 44C43.3441 44 39 47.4906 39 52.987C39 58.4573 43.3441 62 48.6385 62C52.3038 62 56.3493 60.2287 56.3493 57.0767Z" fill="#4360DF"/>
<path d="M64.1134 60.0203V45.9797C64.1134 44.9899 63.2445 44.1563 62.2128 44.1563C61.1268 44.1563 60.258 44.9899 60.258 45.9797V60.0203C60.258 61.0101 61.1268 61.8437 62.1585 61.8437C63.2445 61.8437 64.1134 61.0101 64.1134 60.0203Z" fill="#4360DF"/>
<path d="M81 45.9537C81 45.042 80.2398 44.3126 79.3438 44.3126H70.194C68.9994 44.3126 68.022 45.2504 68.022 46.3965V60.0203C68.022 61.0101 68.8908 61.8437 69.9225 61.8437C71.0085 61.8437 71.8774 61.0101 71.8774 60.0203V55.8688C71.8774 55.1117 72.5171 54.4978 73.3063 54.4978H77.841C78.7369 54.4978 79.4972 53.7685 79.4972 52.8828C79.4972 51.9711 78.7369 51.2417 77.841 51.2417H73.3063C72.5171 51.2417 71.8774 50.6279 71.8774 49.8707V48.9398C71.8774 48.1826 72.5171 47.5687 73.3063 47.5687H79.3438C80.2398 47.5687 81 46.8394 81 45.9537Z" fill="#4360DF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB