Make save wiki button be accessible to users without colour vision (#7232)
* 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
GitHub
parent
6404d5652e
commit
d70b6a7d6c
|
|
@ -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>
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>> {{$:/core/images/save-button}}
|
||||
<<lingo Full/Caption>> {{$:/core/images/save-button-dynamic}}
|
||||
</$button>
|
||||
|
|
@ -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>
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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>>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
|
|
|||
|
|
@ -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>>;
|
||||
|
|
|
|||
Loading…
Reference in New Issue