Further icon, UI and copy text tweaks

Move the icons and styles from the core into the TiddlyWeb plugin
2026-11-02 04:54:27 +00:00 · 2019-11-18 23:06:39 +00:00
1 parent b5c274c5cd
commit 77adee2c46
@@ -1,10 +1,11 @@
-title: $:/core/images/cloud
+title: $:/plugins/tiddlywiki/tiddlyweb/icon/cloud
 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,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-idle" d="M57.9289322,84.6984848 C55.5857864,87.0416306 51.7867966,87.0416306 49.4436508,84.6984848 L35.3015152,70.5563492 C32.9583694,68.2132034 32.9583694,64.4142136 35.3015152,62.0710678 C37.6446609,59.7279221 41.4436508,59.7279221 43.7867966,62.0710678 L53.6862915,71.9705627 L81.9705627,43.6862915 C84.3137085,41.3431458 88.1126984,41.3431458 90.4558441,43.6862915 C92.7989899,46.0294373 92.7989899,49.8284271 90.4558441,52.1715729 L57.9289322,84.6984848 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>
+		<path class="tc-image-cloud-error tc-animate-pulse-fast" 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>
@@ -1,6 +1,6 @@
 title: $:/core/ui/Buttons/save-wiki
 tags: $:/tags/PageControls
-caption: {{$:/core/images/cloud-sync}} Server status
+caption: {{$:/plugins/tiddlywiki/tiddlyweb/icon/cloud}} Server status
 description: Status of synchronisation with server

 \define config-title()
@@ -9,7 +9,7 @@ $:/config/PageControlButtons/Visibility/$(listItem)$
 <$button popup=<<qualify "$:/state/popup/save-wiki">> tooltip="Status of synchronisation with server" aria-label="Server status" class=<<tv-config-toolbar-class>> selectedClass="tc-selected">
 <span class="tc-dirty-indicator">
 <$list filter="[<tv-config-toolbar-icons>match[yes]]">
-{{$:/core/images/cloud}}
+{{$:/plugins/tiddlywiki/tiddlyweb/icon/cloud}}
 </$list>
 <$list filter="[<tv-config-toolbar-text>match[yes]]">
 <span class="tc-btn-text"><$text text="Server status"/></span>
@@ -25,7 +25,7 @@ $:/config/PageControlButtons/Visibility/$(listItem)$
 </$reveal>
 <$reveal state="$:/status/IsLoggedIn" type="match" text="yes">
 <p>
-Currently logged in<$reveal state="$:/status/UserName" type="nomatch" text="" default=""> as <$text text={{$:/status/UserName}}/></$reveal><$reveal state="$:/status/IsReadOnly" type="match" text="yes" default="no"> (read-only)</$reveal>
+You are logged in<$reveal state="$:/status/UserName" type="nomatch" text="" default=""> as <strong><$text text={{$:/status/UserName}}/></strong></$reveal><$reveal state="$:/status/IsReadOnly" type="match" text="yes" default="no"> (read-only)</$reveal>
 </p>
 <hr/>
 <$button tooltip="Get latest changes from the server" aria-label="Refresh from server" class="tc-btn-invisible">
@@ -34,7 +34,7 @@ Currently logged in<$reveal state="$:/status/UserName" type="nomatch" text="" de
 </$button>
 <$button class="tc-btn-invisible">
 <$wikify name="site-title" text={{$:/config/SaveWikiButton/Filename}}>
-	<$action-sendmessage $message="tm-download-file" $param={{$:/config/SaveWikiButton/Template}} filename=<<site-title>>/>
+<$action-sendmessage $message="tm-download-file" $param={{$:/config/SaveWikiButton/Template}} filename=<<site-title>>/>
 </$wikify>
 {{$:/core/images/download-button}} Save snapshot for offline use
 </$button>
@@ -0,0 +1,64 @@
+title: $:/plugins/tiddlywiki/tiddlyweb/styles
+tags: [[$:/tags/Stylesheet]]
+
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
+
+body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg {
+	transition: fill 250ms ease-in-out;
+}
+
+body .tc-image-cloud-idle {
+	fill: <<colour background>>;
+	transition: opacity 450ms linear;
+	opacity: 1;	
+}
+
+body.tc-dirty .tc-image-cloud-idle {
+	opacity: 0;
+}
+
+body .tc-image-cloud-progress {
+	transition: opacity 450ms linear;
+	transform-origin: 50% 50%;
+	transform: rotate(359deg);
+	animation: animation-rotate-slow 2s infinite linear;
+	fill: <<colour background>>;
+	opacity: 0;
+}
+
+body.tc-dirty .tc-image-cloud-progress {
+	opacity: 1;
+}
+
+body .tc-image-cloud-error {
+	transition: opacity 450ms linear;
+	transform-origin: 50% 50%;
+	animation: animation-pulse-fast 0.7s infinite linear;
+	fill: <<colour background>>;
+	opacity: 0;
+}
+
+body.tc-dirty .tc-image-cloud-error {
+	opacity: 0;
+}
+
+@keyframes animation-rotate-slow {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: scale(359deg);
+	}
+}
+
+@keyframes animation-pulse-fast {
+	0% {
+		transform: scale(0.3);
+	}
+	50% {
+		transform: scale(0.8);
+	}
+	100% {
+		transform: scale(1.5);
+	}
+}
@@ -107,38 +107,3 @@ canvas.tc-edit-bitmapeditor  {
 .tc-plugin-info {
 	<<box-shadow "1px 1px 3px rgba(0,0,0,0.5)">>
 }
-
-.tc-animate-rotate-slow {
-	transform-origin: 50% 50%;
-	transform: rotate(359deg);
-	animation: rotate-slow 2s infinite linear;
-}
-
-@keyframes rotate-slow {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: scale(359deg);
-	}
-}
-
-.tc-animate-pulse-fast {
-	transform-origin: 50% 50%;
-	animation: pulse-fast 0.7s infinite linear;
-}
-
-@keyframes pulse-fast {
-	0% {
-		transform: scale(0.3);
-		opacity: 0.25;
-	}
-	50% {
-		transform: scale(0.8);
-		opacity: 1;
-	}
-	100% {
-		transform: scale(1);
-		opacity: 0.25;
-	}
-}
@@ -2462,31 +2462,10 @@ input.tc-palette-manager-colour-input {
 */

 body.tc-dirty span.tc-dirty-indicator, body.tc-dirty span.tc-dirty-indicator svg {
-	transition: fill 250ms ease-in-out;
 	color: <<colour dirty-indicator>>;
 	fill: <<colour dirty-indicator>>;
 }

-body .tc-image-cloud-progress {
-	fill: <<colour background>>;
-	transition: opacity 450ms linear;
-	opacity: 0;
-}
-
-body.tc-dirty .tc-image-cloud-progress {
-	opacity: 1;
-}
-
-body .tc-image-cloud-error {
-	fill: <<colour background>>;
-	transition: fill 450ms linear, opacity 450ms linear;
-	opacity: 0;
-}
-
-body.tc-dirty .tc-image-cloud-error {
-	opacity: 0;
-}
-
 /*
 ** File inputs
 */