mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 03:57:21 +00:00
Code Issues Releases Wiki Activity

Make save wiki button be accessible to users without colour vision (#7232)

Browse Source 
* Make save wiki button be accessible to users without colour vision

* Make the dynamic button be a separate button

For backwards compatibility
This commit is contained in:
Jeremy Ruston 2023-01-28 09:51:25 +00:00 committed by GitHub
parent 6404d5652e
commit d70b6a7d6c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 43 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
core/images/save-button-dynamic.tid Normal file
View File

@ -0,0 +1,12 @@
title: $:/core/images/save-button-dynamic
tags: $:/tags/Image
<svg width="22pt" height="22pt" class="tc-image-save-button-dynamic tc-image-button" viewBox="0 0 128 128">
<g class="tc-image-save-button-dynamic-clean">
<path fill-rule="evenodd" d="M120.783 34.33c4.641 8.862 7.266 18.948 7.266 29.646 0 35.347-28.653 64-64 64-35.346 0-64-28.653-64-64 0-35.346 28.654-64 64-64 18.808 0 35.72 8.113 47.43 21.03l2.68-2.68c3.13-3.13 8.197-3.132 11.321-.008 3.118 3.118 3.121 8.193-.007 11.32l-4.69 4.691zm-12.058 12.058a47.876 47.876 0 013.324 17.588c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48c14.39 0 27.3 6.332 36.098 16.362L58.941 73.544 41.976 56.578c-3.127-3.127-8.201-3.123-11.32-.005-3.123 3.124-3.119 8.194.006 11.319l22.617 22.617a7.992 7.992 0 005.659 2.347c2.05 0 4.101-.783 5.667-2.349l44.12-44.12z"/>
</g>
<g class="tc-image-save-button-dynamic-dirty">
<path d="M64.856912,0 C100.203136,0 128.856912,28.653776 128.856912,64 C128.856912,99.346224 100.203136,128 64.856912,128 C29.510688,128 0.856911958,99.346224 0.856911958,64 C0.856911958,28.653776 29.510688,0 64.856912,0 Z M64.856912,16 C38.347244,16 16.856912,37.490332 16.856912,64 C16.856912,90.509668 38.347244,112 64.856912,112 C91.3665799,112 112.856912,90.509668 112.856912,64 C112.856912,37.490332 91.3665799,16 64.856912,16 Z"></path>
<circle cx="65" cy="64" r="32"></circle>
</g>
</svg>

4
core/ui/PageControls/savewiki.tid
View File

@ -1,6 +1,6 @@
title: $:/core/ui/Buttons/save-wiki
tags: $:/tags/PageControls
caption: {{$:/core/images/save-button}} {{$:/language/Buttons/SaveWiki/Caption}}
caption: {{$:/core/images/save-button-dynamic}} {{$:/language/Buttons/SaveWiki/Caption}}
description: {{$:/language/Buttons/SaveWiki/Hint}}
\whitespace trim
@ -10,7 +10,7 @@ description: {{$:/language/Buttons/SaveWiki/Hint}}
</$wikify>
<span class="tc-dirty-indicator">
<$list filter="[<tv-config-toolbar-icons>match[yes]]">
{{$:/core/images/save-button}}
{{$:/core/images/save-button-dynamic}}
</$list>
<$list filter="[<tv-config-toolbar-text>match[yes]]">
<span class="tc-btn-text">

2
core/wiki/download-wiki-button.tid
View File

@ -4,5 +4,5 @@ title: $:/snippets/download-wiki-button
\whitespace trim
<$button class="tc-btn-big-green">
<$action-sendmessage $message="tm-download-file" $param="$:/core/save/all" filename="index.html"/>
<<lingo Full/Caption>>&#32;{{$:/core/images/save-button}}
<<lingo Full/Caption>>&#32;{{$:/core/images/save-button-dynamic}}
</$button>

2
editions/tw5.com/tiddlers/howtos/How to put the last modification date in a banner.tid
View File

@ -7,7 +7,7 @@ type: text/vnd.tiddlywiki
Here's how to display the last modification date of a wiki in a banner in the corner of the window:
# [[Install the plugin|Installing a plugin from the plugin library]] <<.def "Corner ribbon">> in your ~TiddlyWiki
# Save (<<.icon $:/core/images/save-button>>) and reload (<<.icon $:/core/images/refresh-button>>) your wiki
# Save (<<.icon $:/core/images/save-button-dynamic>>) and reload (<<.icon $:/core/images/refresh-button>>) your wiki
# Create a new tiddler called [[$:/_MyRibbon]] tagged [[$:/tags/PageControls]] and containing:<div>
```

2
editions/tw5.com/tiddlers/howtos/Upgrading.tid
View File

@ -27,7 +27,7 @@ This process will work on most desktop browsers. Note that none of your personal
#* If the file is encrypted you will be prompted for the password
# Review the list of tiddlers that will be upgraded
# Click ''Upgrade''
# Save changes to save the new version (<<.icon $:/core/images/save-button>>)
# Save changes to save the new version (<<.icon $:/core/images/save-button-dynamic>>)
This will download a file called ''upgrade.html'' to your computer. This file is the upgrade of your old file. You may need to open the location where ''upgrade.html'' was downloaded, rename ''upgrade.html'' with the name of the old file you are upgrading, and replace the old file by moving the new file in its place.

2
editions/tw5.com/tiddlers/nodejs/Installing TiddlyWiki on Node.js.tid
View File

@ -32,7 +32,7 @@ type: text/vnd.tiddlywiki
## Visit http://127.0.0.1:8080/ in your browser
## Try editing and creating tiddlers
# Optionally, make an offline copy:
#* click the <<.icon $:/core/images/save-button>> ''save changes'' button in the sidebar, ''OR''
#* click the <<.icon $:/core/images/save-button-dynamic>> ''save changes'' button in the sidebar, ''OR''
#* `tiddlywiki mynewwiki --build index`
The `-g` flag causes TiddlyWiki to be installed globally. Without it, TiddlyWiki will only be available in the directory where you installed it.

2
editions/tw5.com/tiddlers/plugins/Installing a plugin from the plugin library.tid
View File

@ -27,7 +27,7 @@ Follow these instructions when using TiddlyWiki as a standalone, single file wik
# Click the ''install'' button to install a plugin
# Save your TiddlyWiki <<.icon $:/core/images/save-button>>
# Save your TiddlyWiki <<.icon $:/core/images/save-button-dynamic>>
# If a yellow warning bar appears at the top of the window, refresh the window so that TiddlyWiki completes installation of the plugin <<.icon $:/core/images/refresh-button>>

2
editions/tw5.com/tiddlers/plugins/Manually installing a plugin.tid
View File

@ -18,7 +18,7 @@ If you want to follow the steps //side by side// you can <<open-external-window
# Import the new plugin shown in the $:/Import tiddler
# Save your TiddlyWiki (<<.icon $:/core/images/save-button>>)
# Save your TiddlyWiki (<<.icon $:/core/images/save-button-dynamic>>)
# If a yellow warning bar appears at the top of the window, refresh the window so that TiddlyWiki completes installation of the plugin <<.icon $:/core/images/refresh-button>>

2
editions/tw5.com/tiddlers/plugins/Uninstalling a plugin.tid
View File

@ -19,7 +19,7 @@ Follow these instructions when using TiddlyWiki as a standalone, single file wik
# Click the <<.icon $:/core/images/down-arrow>> ''more'' button and <<.icon $:/core/images/delete-button>> ''delete'' the tiddler
# Save your TiddlyWiki <<.icon $:/core/images/save-button>>
# Save your TiddlyWiki <<.icon $:/core/images/save-button-dynamic>>
# If a yellow warning bar appears at the top of the window, refresh the window so that TiddlyWiki completely removes the plugin <<.icon $:/core/images/refresh-button>>

2
editions/tw5.com/tiddlers/saving/Saving on iPad_iPhone.tid
View File

@ -17,7 +17,7 @@ Instructions for use:
# Open Quine 2
# Tap the + toolbar button to create and open a new TiddlyWiki
# From the file list tap an existing TiddlyWiki file to open it
# Edit the TiddlyWiki as normal, and save as normal using either Autosave or the TiddlyWiki save button <<.icon $:/core/images/save-button>>
# Edit the TiddlyWiki as normal, and save as normal using either Autosave or the TiddlyWiki save button <<.icon $:/core/images/save-button-dynamic>>
# Tap the left hand "Documents" toolbar button to close an open TiddlyWiki
*Quine 2 works natively in iOS with the local file system and the iCloud file system

2
editions/tw5.com/tiddlers/saving/Saving with TiddlyFox on Android.tid
View File

@ -19,6 +19,6 @@ type: text/vnd.tiddlywiki
# Choose to open the file in Firefox (rather than the default Android viewer)
# Click ''OK'' in response to the prompt from TiddlyFox that asks whether to enable saving for this file
# Try creating a new tiddler using the ''new tiddler'' <<.icon $:/core/images/new-button>> button in the sidebar. Type some content for the tiddler, and click the <<.icon $:/core/images/done-button>> ''ok'' button
# Save your changes by clicking the <<.icon $:/core/images/save-button>> ''save changes'' button in the sidebar
# Save your changes by clicking the <<.icon $:/core/images/save-button-dynamic>> ''save changes'' button in the sidebar
#* Look for the yellow notification ''Saved wiki'' at the top right of the window
# Refresh the browser window to verify that your changes have been saved correctly

2
editions/tw5.com/tiddlers/saving/Saving with TiddlyFox.tid
View File

@ -25,6 +25,6 @@ If you're using [[Firefox for Android]], see the instructions for [[Saving with
#* If you are using TiddlyFox v2.x.x you will need to click on the icon of a kitten standing on a blue globe to activate saving. There is no prompt in v2.0.1.
#** For TiddlyFox v2.0.1, you can not be using Private Browsing mode nor can you be using "Never Remember History".
# Try creating a new tiddler using the ''new tiddler'' <<.icon $:/core/images/new-button>> button in the sidebar. Type some content for the tiddler, and click the <<.icon $:/core/images/done-button>> ''ok'' button
# Save your changes by clicking the <<.icon $:/core/images/save-button>> ''save changes'' button in the sidebar
# Save your changes by clicking the <<.icon $:/core/images/save-button-dynamic>> ''save changes'' button in the sidebar
#* Look for the yellow notification ''Saved wiki'' at the top right of the window
# Refresh the browser window to verify that your changes have been saved correctly

2
editions/tw5.com/tiddlers/saving/Saving with TiddlyIE.tid
View File

@ -20,5 +20,5 @@ type: text/vnd.tiddlywiki
#* You may rename it, but be sure to keep the `.html` or `.htm` extension
# Open the file in Internet Explorer
# Try creating a new tiddler using the ''new tiddler'' <<.icon $:/core/images/new-button>> button in the sidebar. Type some content for the tiddler, and click the <<.icon $:/core/images/done-button>> ''ok'' button
# Save your changes by clicking the <<.icon $:/core/images/save-button>> ''save changes'' button in the sidebar. Internet Explorer will ask for your consent to save the file locally by presenting a file ''Save As'' dialog.
# Save your changes by clicking the <<.icon $:/core/images/save-button-dynamic>> ''save changes'' button in the sidebar. Internet Explorer will ask for your consent to save the file locally by presenting a file ''Save As'' dialog.
# Refresh the browser window to verify that your changes have been saved correctly

2
editions/tw5.com/tiddlers/saving/Saving with the HTML5 saver.tid
View File

@ -19,7 +19,7 @@ This is the default method of saving if no other method is installed. It uses yo
#* You may rename it, but be sure to keep the `.html` or `.htm` extension
# Open the file in your browser
# Try creating a new tiddler using the ''new tiddler'' <<.icon $:/core/images/new-button>> button in the sidebar. Type some content for the tiddler, and click the <<.icon $:/core/images/done-button>> ''ok'' button
# Save your changes by clicking the <<.icon $:/core/images/save-button>> ''save changes'' button in the sidebar
# Save your changes by clicking the <<.icon $:/core/images/save-button-dynamic>> ''save changes'' button in the sidebar
# Your browser will download a new copy of the wiki incorporating your changes
# Locate the newly downloaded file and open it in your browser
# Verify that your changes have been saved correctly

2
editions/tw5.com/tiddlers/workingwithtw/Creating and editing tiddlers.tid
View File

@ -30,6 +30,6 @@ When you create a new tiddler or edit an existing one, the tiddler will go into
When you have finished editing, click a button at the top right of the tiddler:
*The ''ok'' button (<<.icon $:/core/images/done-button>>) stores your changes to this one tiddler and leaves draft mode. If your wiki is configured to [[AutoSave]], your changes will be permanently saved. Otherwise they will only be stored temporarily in your web browser, and you will lose them if you close your ~TiddlyWiki page without first clicking the master ''save changes'' button (<<.icon $:/core/images/save-button>>) in the sidebar.
*The ''ok'' button (<<.icon $:/core/images/done-button>>) stores your changes to this one tiddler and leaves draft mode. If your wiki is configured to [[AutoSave]], your changes will be permanently saved. Otherwise they will only be stored temporarily in your web browser, and you will lose them if you close your ~TiddlyWiki page without first clicking the master ''save changes'' button (<<.icon $:/core/images/save-button-dynamic>>) in the sidebar.
*The ''cancel'' button (<<.icon $:/core/images/cancel-button>>) discards your changes (after asking you to confirm) and leaves draft mode.
*The ''delete'' button (<<.icon $:/core/images/delete-button>>) deletes the entire tiddler (after asking you to confirm).

16
themes/tiddlywiki/vanilla/base.tid
View File

@ -2889,6 +2889,22 @@ button > .tc-toc-caption{
** Dirty indicator
*/
html body svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-clean {
visibility: visible;
}
html body svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-dirty {
visibility: hidden;
}
html body.tc-dirty svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-clean {
visibility: hidden;
}
html body.tc-dirty svg.tc-image-save-button-dynamic .tc-image-save-button-dynamic-dirty {
visibility: visible;
}
html body.tc-dirty span.tc-dirty-indicator, html body.tc-dirty span.tc-dirty-indicator svg {
fill: <<colour dirty-indicator>>;
color: <<colour dirty-indicator>>;