Add GIF pause overlay
This commit is contained in:
miruka
parent
5192fe8b55
commit
1f58cfeae8
61
src/icons/thin/play.svg
Normal file
61
src/icons/thin/play.svg
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="play.svg"
|
||||
inkscape:version="">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="640"
|
||||
inkscape:window-height="480"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:zoom="13.906433"
|
||||
inkscape:cx="21.364289"
|
||||
inkscape:cy="8.6358876"
|
||||
inkscape:current-layer="svg4"
|
||||
inkscape:pagecheckerboard="true" />
|
||||
<path
|
||||
d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-10l9 5.146-9 4.854z"
|
||||
id="path2"
|
||||
style="fill-opacity:0.60550457;fill:#000000" />
|
||||
<path
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:0.66055048;stroke:none;stroke-width:2.29196095;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;paint-order:normal"
|
||||
inkscape:transform-center-x="-0.88876775"
|
||||
inkscape:transform-center-y="-0.14457271"
|
||||
d="M 8.9991935,6.998851 18.001203,12.146 8.9991935,17.001085 Z"
|
||||
id="path817"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -1,12 +1,12 @@
|
|||
import QtQuick 2.12
|
||||
import QtGraphicalEffects 1.12
|
||||
|
||||
HImage {
|
||||
property string svgName: ""
|
||||
property int dimension: 20
|
||||
|
||||
|
||||
Image {
|
||||
id: icon
|
||||
cache: true
|
||||
asynchronous: true
|
||||
fillMode: Image.PreserveAspectFit
|
||||
visible: Boolean(svgName)
|
||||
colorize: theme.icons.colorize
|
||||
|
||||
source:
|
||||
svgName ?
|
||||
|
|
@ -16,4 +16,16 @@ HImage {
|
|||
|
||||
sourceSize.width: svgName ? dimension : 0
|
||||
sourceSize.height: svgName ? dimension : 0
|
||||
|
||||
|
||||
property string svgName: ""
|
||||
property int dimension: 20
|
||||
property color colorize: theme.icons.colorize
|
||||
|
||||
|
||||
layer.enabled: ! Qt.colorEqual(colorize, "transparent")
|
||||
layer.effect: ColorOverlay {
|
||||
color: icon.colorize
|
||||
cached: icon.cache
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import QtQuick 2.12
|
||||
import QtGraphicalEffects 1.12
|
||||
|
||||
Image {
|
||||
id: image
|
||||
|
|
@ -12,7 +11,6 @@ Image {
|
|||
|
||||
|
||||
property bool animate: true
|
||||
property color colorize: "transparent"
|
||||
|
||||
readonly property bool animated:
|
||||
image.source.toString()
|
||||
|
|
@ -20,17 +18,11 @@ Image {
|
|||
.endsWith(".gif")
|
||||
|
||||
|
||||
layer.enabled: ! Qt.colorEqual(colorize, "transparent")
|
||||
layer.effect: ColorOverlay {
|
||||
color: image.colorize
|
||||
cached: image.cache
|
||||
}
|
||||
|
||||
|
||||
Component {
|
||||
id: animatedImage
|
||||
id: animatedImageComponent
|
||||
|
||||
AnimatedImage {
|
||||
id: animatedImage
|
||||
source: image.source
|
||||
autoTransform: image.autoTransform
|
||||
asynchronous: image.asynchronous
|
||||
|
|
@ -43,18 +35,35 @@ Image {
|
|||
|
||||
cache: true // Needed to allow GIFs to loop
|
||||
paused: ! visible || window.hidden || userPaused
|
||||
property var pr: frameCount
|
||||
onPrChanged: print(source, pr)
|
||||
|
||||
property bool userPaused: false
|
||||
|
||||
TapHandler {
|
||||
onTapped: parent.userPaused = ! parent.userPaused
|
||||
}
|
||||
|
||||
HIcon {
|
||||
svgName: "play"
|
||||
colorize: "transparent"
|
||||
anchors.centerIn: parent
|
||||
dimension: Math.min(
|
||||
parent.width - theme.spacing * 2,
|
||||
parent.height - theme.spacing * 2,
|
||||
theme.controls.image.maxPauseIndicatorSize,
|
||||
)
|
||||
scale: parent.paused ? 1 : 0
|
||||
visible: scale > 0
|
||||
|
||||
Behavior on scale { HNumberAnimation { overshoot: 4 } }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HLoader {
|
||||
id: loader
|
||||
anchors.fill: parent
|
||||
sourceComponent: animate && animated ? animatedImage : null
|
||||
sourceComponent: animate && animated ? animatedImageComponent : null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -176,6 +176,9 @@ controls:
|
|||
color background: colors.inputBackground
|
||||
color foreground: colors.accentBackground
|
||||
|
||||
image:
|
||||
int maxPauseIndicatorSize: 64
|
||||
|
||||
avatar:
|
||||
int size: baseElementsHeight
|
||||
int radius: theme.radius
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user