From 6c2cf4ea97ece718ff910c555c683f6a3698ba99 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@jermolene.com>
Date: Mon, 18 Nov 2019 22:18:55 +0000
Subject: [PATCH] Improve animated icon

---
 core/images/cloud-error.tid        | 12 ------------
 core/images/cloud-sync.tid         |  9 ---------
 core/images/cloud.tid              |  8 +++++---
 themes/tiddlywiki/vanilla/base.tid | 23 ++++++++++++++---------
 4 files changed, 19 insertions(+), 33 deletions(-)
 delete mode 100644 core/images/cloud-error.tid
 delete mode 100644 core/images/cloud-sync.tid

diff --git a/core/images/cloud-error.tid b/core/images/cloud-error.tid
deleted file mode 100644
index d0bf95614f..0000000000
--- a/core/images/cloud-error.tid
+++ /dev/null
@@ -1,12 +0,0 @@
-title: $:/core/images/cloud-error
-tags: $:/tags/Image
-
-<svg class="tc-image-cloud-error tc-image-button" width="22pt" height="22pt" viewBox="0 0 128 128">
-	<g stroke="none" fill-rule="nonzero">
-		<path d="M66,0 C81.6806304,0 94.8819723,10.6150954 98.8100784,25.0513388 C99.3686429,25.0172013 99.9323126,25 100.5,25 C115.687831,25 128,37.3121694 128,52.5 C128,66.8448207 117.016688,78.6243513 103.000837,79.887817 L103,80 L77,80 L77,68 L101.362457,68 L101.641921,67.9649574 L102.248437,67.9035416 C110.02317,67.0377164 116,60.4233278 116,52.5 C116,43.9395864 109.060414,37 100.5,37 L100.018169,37.0072684 L99.2385163,37.0437317 C93.7837145,37.240095 88.8791618,33.7235363 87.3145412,28.4942549 L87.1288044,27.8385057 C84.4274801,18.5445701 75.8582808,12 66,12 C59.2156293,12 52.9632384,15.0768947 48.8106025,20.2689254 L48.3577953,20.8440349 C45.11082,24.8413505 39.6590769,26.3293547 34.8173557,24.5067219 C33.9314612,24.173233 32.9868237,24 32,24 C27.581722,24 24,27.581722 24,32 C24,32.3181835 24.0179936,32.6318906 24.0534367,32.9402717 L24.1390527,33.561954 C24.7410827,38.2869697 22.4878983,42.924317 18.4012077,45.3711872 L17.8395602,45.6976545 C14.2458687,47.8534974 12,51.7245394 12,56 C12,62.627417 17.372583,68 24,68 L52,68 L52,80 L24,80 C10.745166,80 0,69.254834 0,56 C0,47.0199526 4.93198566,39.1918321 12.2349965,35.0765991 C12.080405,34.0746028 12,33.0466912 12,32 C12,20.954305 20.954305,12 32,12 C34.4796227,12 36.8538504,12.4512498 39.0450429,13.2761092 C45.2605605,5.20214719 55.022767,0 66,0 Z"></path>
-		<g class="tc-animate-pulse-fast">
-			<rect id="Rectangle" fill="#000000" x="56" y="24" width="16" height="64" rx="8"></rect>
-			<circle id="Oval" fill="#000000" cx="64" cy="102" r="8"></circle>
-		</g>
-	</g>
-</svg>
diff --git a/core/images/cloud-sync.tid b/core/images/cloud-sync.tid
deleted file mode 100644
index b8cada5de9..0000000000
--- a/core/images/cloud-sync.tid
+++ /dev/null
@@ -1,9 +0,0 @@
-title: $:/core/images/cloud-sync
-tags: $:/tags/Image
-
-<svg class="tc-image-cloud-sync tc-image-button" width="22pt" height="22pt" viewBox="0 0 128 128">
-	<g stroke="none" fill-rule="nonzero">
-		<path d="M66,0 C81.6806304,0 94.8819723,10.6150954 98.8100784,25.0513388 C99.3686429,25.0172013 99.9323126,25 100.5,25 C115.687831,25 128,37.3121694 128,52.5 C128,66.8448207 117.016688,78.6243513 103.000837,79.887817 L103,80 L100.671123,80.0012083 C102.350089,76.1588121 103.442848,72.0016648 103.836353,67.6428139 C110.822039,66.1156592 116,59.8748221 116,52.5 C116,43.9395864 109.060414,37 100.5,37 L100.018169,37.0072684 L99.2385163,37.0437317 C93.7837145,37.240095 88.8791618,33.7235363 87.3145412,28.4942549 L87.1288044,27.8385057 C84.4274801,18.5445701 75.8582808,12 66,12 C59.2156293,12 52.9632384,15.0768947 48.8106025,20.2689254 L48.3577953,20.8440349 C45.11082,24.8413505 39.6590769,26.3293547 34.8173557,24.5067219 C33.9314612,24.173233 32.9868237,24 32,24 C27.581722,24 24,27.581722 24,32 C24,32.3181835 24.0179936,32.6318906 24.0534367,32.9402717 L24.1390527,33.561954 C24.7410827,38.2869697 22.4878983,42.924317 18.4012077,45.3711872 L17.8395602,45.6976545 C14.2458687,47.8534974 12,51.7245394 12,56 C12,62.627417 17.372583,68 24,68 L24.1975545,68.0005387 C24.6174557,72.2291663 25.6959001,76.2640595 27.3288775,80.0012083 L24,80 C10.745166,80 0,69.254834 0,56 C0,47.0199526 4.93198566,39.1918321 12.2349965,35.0765991 C12.080405,34.0746028 12,33.0466912 12,32 C12,20.954305 20.954305,12 32,12 C34.4796227,12 36.8538504,12.4512498 39.0450429,13.2761092 C45.2605605,5.20214719 55.022767,0 66,0 Z"></path>
-		<path class="tc-animate-rotate-slow" d="M41.6,36 C39.2804041,36 37.4,37.8804041 37.4,40.2 C37.4,42.5195959 39.2804041,44.4 41.6,44.4 L44.0037518,44.4002412 C39.0527941,49.4507221 36,56.3688519 36,64 C36,79.3093333 48.2865601,91.7489867 63.5369688,91.9962488 L64,92 L64,83.6 C53.1752189,83.6 44.4,74.8247811 44.4,64 C44.4,57.973456 47.1199216,52.5821837 51.3991653,48.9867825 L51.4,54.2 C51.4,56.5195959 53.2804041,58.4 55.6,58.4 C57.9195959,58.4 59.8,56.5195959 59.8,54.2 L59.8,40.2 C59.8,37.8804041 57.9195959,36 55.6,36 L41.6,36 Z M64,36 L64.000875,44.399125 L64.3241218,44.4026258 C74.999408,44.5757093 83.6,53.2834667 83.6,64 C83.6,70.026954 80.8797084,75.4185498 76.5999614,79.0139512 L76.6,73.8 C76.6,71.4804041 74.7195959,69.6 72.4,69.6 C70.0804041,69.6 68.2,71.4804041 68.2,73.8 L68.2,87.8 C68.2,90.0569042 69.9801341,91.8980357 72.2129155,91.9959078 L72.4,92 L86.4,92 C88.7195959,92 90.6,90.1195959 90.6,87.8 C90.6,85.4804041 88.7195959,83.6 86.4,83.6 L83.9953867,83.6006377 C88.9468517,78.5500804 92,71.6315907 92,64 C92,48.6906667 79.7134399,36.2510133 64.4630312,36.0037512 L64,36 Z"></path>
-	</g>
-</svg>
\ No newline at end of file
diff --git a/core/images/cloud.tid b/core/images/cloud.tid
index 7230c238bc..f4520492bf 100644
--- a/core/images/cloud.tid
+++ b/core/images/cloud.tid
@@ -3,6 +3,8 @@ tags: $:/tags/Image
 
 <svg class="tc-image-cloud tc-image-button" width="22pt" height="22pt" viewBox="0 0 128 128">
 	<g stroke="none" fill-rule="nonzero">
-        <path d="M24,81 C10.745166,81 0,70.254834 0,57 C0,48.0199526 4.93198566,40.1918321 12.2349965,36.0765991 C12.080405,35.0746028 12,34.0466912 12,33 C12,21.954305 20.954305,13 32,13 C34.4796227,13 36.8538504,13.4512498 39.0450429,14.2761092 C45.2605605,6.20214719 55.022767,1 66,1 C81.6806304,1 94.8819723,11.6150954 98.8100784,26.0513388 C99.3686429,26.0172013 99.9323126,26 100.5,26 C115.687831,26 128,38.3121694 128,53.5 C128,67.8448207 117.016688,79.6243513 103.000837,80.887817 L103,81 L24,81 Z M101.362457,69 L101.641921,68.9649574 L102.248437,68.9035416 C110.02317,68.0377164 116,61.4233278 116,53.5 C116,44.9395864 109.060414,38 100.5,38 L100.018169,38.0072684 L99.2385163,38.0437317 C93.7837145,38.240095 88.8791618,34.7235363 87.3145412,29.4942549 L87.1288044,28.8385057 C84.4274801,19.5445701 75.8582808,13 66,13 C59.2156293,13 52.9632384,16.0768947 48.8106025,21.2689254 L48.3577953,21.8440349 C45.11082,25.8413505 39.6590769,27.3293547 34.8173557,25.5067219 C33.9314612,25.173233 32.9868237,25 32,25 C27.581722,25 24,28.581722 24,33 C24,33.3181835 24.0179936,33.6318906 24.0534367,33.9402717 L24.1390527,34.561954 C24.7410827,39.2869697 22.4878983,43.924317 18.4012077,46.3711872 L17.8395602,46.6976545 C14.2458687,48.8534974 12,52.7245394 12,57 C12,63.627417 17.372583,69 24,69 L101.362457,69 Z"></path>
-    </g>
-</svg>
+		<path d="M24,103 C10.745166,103 0,92.254834 0,79 C0,69.3033092 5.75057981,60.9497384 14.0274232,57.1636035 C14.0093131,56.7782748 14,56.390225 14,56 C14,42.745166 24.745166,32 38,32 C39.3725729,32 40.7182343,32.115222 42.0278394,32.3365212 C48.6277841,24.2002293 58.7066027,19 70,19 C89.882251,19 106,35.117749 106,55 L105.999487,55.0821053 C118.318792,56.098163 128,66.4184979 128,79 C128,91.2385153 118.83944,101.337467 107.00098,102.814197 L107,103 L104,103 L104,103 L24,103 L24,103 Z"></path>
+		<path class="tc-image-cloud-progress tc-animate-rotate-slow" d="M44.8,40 C42.8117749,40 41.2,41.6117749 41.2,43.6 C41.2,45.5882251 42.8117749,47.2 44.8,47.2 L46.8606847,47.1998741 C42.6168147,51.5288867 40,57.4588484 40,64 C40,77.1222857 50.5313372,87.7848457 63.6031161,87.9967847 L64,88 L64.001,80.8 C54.8295044,80.8 47.3751588,73.4522881 47.2030419,64.3229429 L47.2,64 C47.2,58.8345962 49.5311759,54.2136678 53.198847,51.1318954 L53.2,55.6 C53.2,57.5882251 54.8117749,59.2 56.8,59.2 C58.7882251,59.2 60.4,57.5882251 60.4,55.6 L60.4,43.6 C60.4,41.6117749 58.7882251,40 56.8,40 L44.8,40 Z M64,40 L64,47.2 C73.2783838,47.2 80.8,54.7216162 80.8,64 C80.8,69.1658724 78.468401,73.7871707 74.8001547,76.8689433 L74.8,72.4 C74.8,70.4117749 73.1882251,68.8 71.2,68.8 C69.2117749,68.8 67.6,70.4117749 67.6,72.4 L67.6,84.4 C67.6,86.3882251 69.2117749,88 71.2,88 L83.2,88 C85.1882251,88 86.8,86.3882251 86.8,84.4 C86.8,82.4117749 85.1882251,80.8 83.2,80.8 L81.1383361,80.8011247 C85.3827828,76.4720255 88,70.5416546 88,64 C88,50.745166 77.254834,40 64,40 Z"></path>
+		<path class="tc-image-cloud-error" d="M64,84 C67.3137085,84 70,86.6862915 70,90 C70,93.3137085 67.3137085,96 64,96 C60.6862915,96 58,93.3137085 58,90 C58,86.6862915 60.6862915,84 64,84 Z M64,32 C67.3137085,32 70,34.6862915 70,38 L70,72 C70,75.3137085 67.3137085,78 64,78 C60.6862915,78 58,75.3137085 58,72 L58,38 C58,34.6862915 60.6862915,32 64,32 Z"></path>
+	</g>
+</svg>
\ No newline at end of file
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index 635a2b6088..b17e8d3b15 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -2462,24 +2462,29 @@ input.tc-palette-manager-colour-input {
 */
 
 body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg {
-	fill: <<colour dirty-indicator>>;
+	transition: fill 250ms ease-in-out;
 	color: <<colour dirty-indicator>>;
+	fill: <<colour dirty-indicator>>;
 }
 
-body.tc-dirty .tc-dirty-control {
-	display: inline;
+body .tc-image-cloud-progress {
+	fill: <<colour background>>;
+	transition: opacity 450ms linear;
+	opacity: 0;
 }
 
-body.tc-dirty .tc-dirty-control.tc-hide-when-dirty {
-	display: none;
+body.tc-dirty .tc-image-cloud-progress {
+	opacity: 1;
 }
 
-body .tc-dirty-control.tc-show-when-dirty {
-	display: none;
+body .tc-image-cloud-error {
+	fill: <<colour background>>;
+	transition: fill 450ms linear, opacity 450ms linear;
+	opacity: 0;
 }
 
-body.tc-dirty .tc-dirty-control.tc-show-when-dirty {
-	display: inline;
+body.tc-dirty .tc-image-cloud-error {
+	opacity: 0;
 }
 
 /*