mirror of
https://github.com/status-im/status-desktop.git
synced 2025-02-22 19:48:52 +00:00
fix: use opacity gradient and icon for read more/less
This commit is contained in:
Richard Ramos
Iuri Matias
parent
124ce83ba7
commit
0c71ddc888
@ -1,6 +1,7 @@
|
||||
import QtQuick 2.13
|
||||
import "../../../../../shared"
|
||||
import "../../../../../imports"
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
Item {
|
||||
property bool longChatText: true
|
||||
@ -12,7 +13,8 @@ Item {
|
||||
id: root
|
||||
visible: contentType == Constants.messageType || isEmoji
|
||||
z: 51
|
||||
height: visible ? (showMoreLoader.active ? childrenRect.height : chatText.height) : 0
|
||||
|
||||
height: visible ? (showMoreLoader.active ? childrenRect.height - 10 : chatText.height) : 0
|
||||
|
||||
// This function is to avoid the binding loop warning
|
||||
function setWidths() {
|
||||
@ -39,6 +41,7 @@ Item {
|
||||
|
||||
StyledTextEdit {
|
||||
id: chatText
|
||||
visible: !root.veryLongChatText || root.readMore
|
||||
textFormat: Text.RichText
|
||||
wrapMode: Text.Wrap
|
||||
font.pixelSize: Style.current.primaryTextFontSize
|
||||
@ -104,24 +107,47 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loader {
|
||||
id: mask
|
||||
anchors.fill: chatText
|
||||
active: root.veryLongChatText
|
||||
visible: false
|
||||
sourceComponent: LinearGradient {
|
||||
start: Qt.point(0, 0)
|
||||
end: Qt.point(0, chatText.height)
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0.0; color: "white" }
|
||||
GradientStop { position: 0.85; color: "white" }
|
||||
GradientStop { position: 1; color: "transparent" }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: opMask
|
||||
active: root.veryLongChatText && !root.readMore
|
||||
anchors.fill: chatText
|
||||
sourceComponent: OpacityMask {
|
||||
source: chatText
|
||||
maskSource: mask
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: showMoreLoader
|
||||
active: root.veryLongChatText
|
||||
anchors.top: chatText.bottom
|
||||
anchors.topMargin: Style.current.smallPadding
|
||||
anchors.left: chatText.horizontalAlignment === Text.AlignLeft ? chatText.left : undefined
|
||||
anchors.right: chatText.horizontalAlignment === Text.AlignLeft ? undefined : chatText.right
|
||||
|
||||
anchors.topMargin: - Style.current.padding
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
sourceComponent: Component {
|
||||
StyledText {
|
||||
text: root.readMore ?
|
||||
qsTr("Read less") :
|
||||
qsTr("Read more")
|
||||
color: chatText.color
|
||||
font.pixelSize: 12
|
||||
font.underline: true
|
||||
SVGImage {
|
||||
id: emojiImage
|
||||
width: 256
|
||||
height: 44
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: "../../../../img/read-" + (root.readMore ? "less" : "more") + ".svg"
|
||||
z: 100
|
||||
|
||||
MouseArea {
|
||||
z: 101
|
||||
anchors.fill: parent
|
||||
|
||||
26
ui/app/img/read-less.svg
Normal file
26
ui/app/img/read-less.svg
Normal file
@ -0,0 +1,26 @@
|
||||
<svg width="256" height="44" viewBox="0 0 256 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_dd)">
|
||||
<rect x="116" y="10" width="24" height="24" rx="12" fill="#4360DF"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M122.47 24.5303C122.763 24.8232 123.237 24.8232 123.53 24.5303L127.646 20.4142C127.842 20.219 128.158 20.219 128.354 20.4142L132.47 24.5303C132.763 24.8232 133.237 24.8232 133.53 24.5303C133.823 24.2374 133.823 23.7626 133.53 23.4697L128.884 18.8232C128.396 18.3351 127.604 18.3351 127.116 18.8232L122.47 23.4697C122.177 23.7626 122.177 24.2374 122.47 24.5303Z" fill="white"/>
|
||||
<defs>
|
||||
<filter id="filter0_dd" x="104" y="2" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.133333 0 0 0 0 0.2 0 0 0 0.08 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.133333 0 0 0 0 0.2 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear" x1="128" y1="0" x2="128" y2="44" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#ECEFFC" stop-opacity="0"/>
|
||||
<stop offset="0.765745" stop-color="#ECEFFC"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
23
ui/app/img/read-more.svg
Normal file
23
ui/app/img/read-more.svg
Normal file
@ -0,0 +1,23 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg width="256" height="44" viewBox="0 0 256 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_dd)">
|
||||
<rect x="116" y="10" width="24" height="24" rx="12" fill="#4360DF"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M 122.47 25.53 C 122.177 25.238 122.177 24.763 122.47 24.47 L 127.116 19.823 C 127.604 19.335 128.396 19.335 128.884 19.823 L 133.53 24.47 C 133.823 24.763 133.823 25.238 133.53 25.53 C 133.237 25.823 132.763 25.823 132.47 25.53 L 128.354 21.414 C 128.158 21.219 127.842 21.219 127.646 21.414 L 123.53 25.53 C 123.237 25.823 122.763 25.823 122.47 25.53 Z" fill="white" transform="matrix(-1, 0, 0, -1, 256.000008, 45.206749)"/>
|
||||
<defs>
|
||||
<filter id="filter0_dd" x="104" y="2" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.133333 0 0 0 0 0.2 0 0 0 0.08 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0.133333 0 0 0 0 0.2 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Loading…
x
Reference in New Issue
Block a user