Visual changes to Saving Tiddler (#4640)

* Styles and templates for visual changes to Saving methods listing

* Color coding saver methods according to delivery

* Changes to tags and few tiddlers
- The tag InternetExplorer has been changed to [[Internet Explorer]]
- A tag for Edge is added
- Reclassified TiddlyServer as DIY instead of App
The existing criteriion for classification is unclear. Here is my reasoning for the change. An app is something user can simply install and run. Like TiddlyDesktop or Tiddloid. A DIY is something user has to install additional runtimes for. Thus Nodejs is a DIY. In the same vein, TiddlyServer is a DIY

* Adding Twexe

* Reversing accidental changes to StoryList

* Restyling Download button and Card Size

* Removing "Read more" links

Entire card is now clickable
To give visual clues regarding the clickability of card, title will change color to blue on card hover

* Removing margins from elements under link and adding padding instead.

Why this change? Margins are not "clickable". Having margins under <a> tag means there are minute dead areas where the mouse pointer will change shape, is not clickable and degrade user experience. Paddings are "clickable"
This commit is contained in:
Rizwan 2020-06-14 16:18:13 +05:30 committed by GitHub
parent 09a2db1cff
commit 1e221ddbdb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 317 additions and 76 deletions

View File

@ -1,5 +1,5 @@
created: 20191004112211823
list: [[WidgetMessage: tm-unload-plugin-library]] [[WidgetMessage: tm-load-plugin-library]] [[WidgetMessage: tm-load-plugin-from-library]] HelloThere GettingStarted Community
list: HelloThere GettingStarted Community
modified: 20191004113621710
title: $:/StoryList
type: text/vnd.tiddlywiki

View File

@ -0,0 +1,29 @@
caption: Twexe
color: #ff8a65
community-author: ihm4u
created: 20200507214737998
delivery: App
description: Single File Tiddlywiki5 executable
method: save
modified: 20200507215529213
tags: Firefox [[Internet Explorer]] Opera Resources Safari Saving Windows Edge Linux
title: Twexe: Single File Tiddlywiki5 executable
type: text/vnd.tiddlywiki
url: https://ihm4u.github.io/twexe/
{{!!description}}
{{!!url}}
!! Features
* Automatic backups
* Automatic saving
* No browser add-ons needed!!
* Works on Linux and Windows
* Single file executable, can be moved, copied, etc.
* Wiki is compressed, occupying less space on your disk (sometimes even a third of the space!)
* Converts //any// Tiddlywiki5 file to a single file executable <<twexe>>, no need for special tiddlywiki plugins
* Automatically uses the saving tab in the control panel (there you can specify a backup directory if you don't like the default)
* Easily get back the html wiki file from the executable twexe (if you need it for some reason)
* Opens up the possibility to run external executables from your wiki (to draw charts, etc.) - stay tuned!!
* Supports external images (i.e. with _canonical_uri field)

View File

@ -1,10 +1,12 @@
caption: ~TiddlyDrive
color: #FFEB3B
community-author: Joshua Stubbs
created: 20171109172705241
delivery: Google Drive Add-on
description: Google Drive add-on to save TiddlyWiki files
method: save
modified: 20190531161707260
tags: Saving plugins Resources Android Chrome Firefox InternetExplorer iOS Linux Mac Opera PHP Safari Windows
modified: 20200507202706013
tags: Android Chrome Firefox [[Internet Explorer]] Linux Mac Opera PHP Resources Safari Saving Windows iOS plugins Edge
title: TiddlyDrive Add-on for Google Drive by Joshua Stubbs
type: text/vnd.tiddlywiki
url: https://lordratte.gitlab.io/tiddlydrive/#installation-guide

View File

@ -1,9 +1,11 @@
caption: ~TiddlyServer
color: #f06292
community-author: Arlen Beiler
created: 20171109171415540
delivery: App
delivery: DIY
description: An extension to TiddlyWiki's Node.js server
method: sync
modified: 20171113134624304
modified: 20200507203417109
tags: Linux Mac Windows Saving Resources
title: TiddlyServer by Arlen Beiler
type: text/vnd.tiddlywiki

View File

@ -1,10 +1,12 @@
caption: Noteself
color: #29B6F6
community-author: Danielo Rodríguez
created: 20141122093837330
delivery: Web Service
description: Free online service that you can also host yourself
method: sync
modified: 20171113132811794
tags: Saving Resources Android Chrome Firefox InternetExplorer iOS Linux Mac Opera PHP Safari Windows
modified: 20200507203026367
tags: Android Chrome Firefox [[Internet Explorer]] Linux Mac Opera PHP Resources Safari Saving Windows iOS Edge
title: "Noteself" by Danielo Rodríguez
type: text/vnd.tiddlywiki
url: https://noteself.github.io/

View File

@ -1,10 +1,12 @@
caption: Timimi
color: #4db6ac
community-author: Riz
created: 20180830194141190
delivery: Browser Extension & Native host
description: Browser extension & native host for desktops
method: save
modified: 20200501092235061
tags: Windows Linux Chrome Firefox Saving Resources plugins Mac Opera
modified: 20200507202633529
tags: Windows Linux Chrome Firefox Saving Resources plugins Mac Opera Edge
title: Timimi: WebExtension and Native Host by Riz
type: text/vnd.tiddlywiki
url: https://ibnishak.github.io/Timimi/

View File

@ -1,9 +1,11 @@
caption: file-backups
created: 201711161655
color: #4DB6AC
community-author: Mario Pietsch
created: 20171116165500000
delivery: Browser Extension
description: Browser extension for Firefox
method: save
modified: 201711161655
modified: 20200507105159105
tags: Firefox Saving Resources plugins
title: "file-backups" Extension for Firefox by pmario
type: text/vnd.tiddlywiki

View File

@ -1,9 +1,11 @@
caption: savetiddlers
color: #4DB6AC
community-author: Buggyj
created: 20171109171935039
delivery: Browser Extension
description: Browser extension for Chrome and Firefox
method: save
modified: 20171113132624609
modified: 20200507105459753
tags: Chrome Firefox Saving Resources plugins
title: "savetiddlers" Extension for Chrome and Firefox by buggyj
type: text/vnd.tiddlywiki

View File

@ -1,5 +1,5 @@
created: 20131129090249275
modified: 20171113162547685
modified: 20200507203622933
tags: [[Working with TiddlyWiki]]
title: GettingStarted
type: text/vnd.tiddlywiki
@ -8,6 +8,6 @@ Click here to download an empty copy of TiddlyWiki: {{$:/editions/tw5.com/snippe
The next step is to choose a method for saving changes. There's a wide variety of methods available, with different features and limitations. Click on the badge for a method to see more information about it. You can also click on one of the platform filters to restrict the listing to methods that work with that platform.
<<.warning "Don't attempt to use the browser ''File''/''Save'' menu option to save changes (it doesn't work)">>
<<.warning "Don't attempt to use the browser ''File''/''Save'' menu option to save changes (it doesn't work)">><br/><br/>
{{Saving}}

View File

@ -1,9 +1,10 @@
caption: HTA Hack
color: #F06292
created: 20131212223146250
delivery: DIY
description: Manual method to let Internet Explorer save changes directly
method: save
modified: 20171113160539299
modified: 20200507110355115
tags: Saving Windows
title: Windows HTA Hack
type: text/vnd.tiddlywiki

View File

@ -1,9 +1,10 @@
caption: Node.js
color: #F06292
created: 20131219100608529
delivery: DIY
description: Flexible hosting on your own machine or in the cloud
method: sync
modified: 20180701185303780
modified: 20200507110222866
tags: Saving [[TiddlyWiki on Node.js]] Windows Mac Linux
title: Installing TiddlyWiki on Node.js
type: text/vnd.tiddlywiki

View File

@ -1,9 +1,10 @@
caption: Node.js on Termux
color: #F06292
created: 20200501120322327
delivery: App with DIY steps
description: Using Node.js to serve/create flatfile wikis
method: sync
modified: 20200501120801899
modified: 20200507112915801
tags: Saving [[TiddlyWiki on Node.js]] Android
title: Serving TW5 from Android
type: text/vnd.tiddlywiki

View File

@ -1,14 +1,14 @@
caption: Emergency Export
color: #7986CB
created: 20180309211328412
delivery: Saver
description: Awkward but useful emergency technique for saving tiddlers
method: save
modified: 20180309221402430
tags: Mac Android Windows Linux Saving Chrome Safari Firefox Opera InternetExplorer
modified: 20200507202809334
tags: Android Chrome Firefox [[Internet Explorer]] Linux Mac Opera Safari Saving Windows Edge
title: Emergency Tiddler Export
type: text/vnd.tiddlywiki
This method is useful if, for any reason, you should find your current TiddlyWiki instance is not saving (e.g. a plugin or a server has stopped working). It should work on just about any platform.
* Go to advanced search {{$:/core/ui/Buttons/advanced-search}}

View File

@ -1,9 +1,10 @@
caption: Internet Information Services
color: #F06292
created: 20180328120356008
delivery: DIY
description: Windows' built-in web server
method: sync
modified: 20180701185718671
modified: 20200507105855400
tags: Saving [[TiddlyWiki on Node.js]] Windows
title: Installing TiddlyWiki on Microsoft Internet Information Server
type: text/vnd.tiddlywiki

View File

@ -1,9 +1,11 @@
caption: Tiddloid and Tiddloid Lite
color: #FF8A65
community-author: donmor
created: 20130825161400000
delivery: App
description: Android app for saving changes locally to device storage
method: save
modified: 20200501103500478
modified: 20200507103926292
tags: Saving Android
title: Saving on Android
type: text/vnd.tiddlywiki

View File

@ -1,9 +1,10 @@
caption: Beaker Browser
color: #FF8A65
created: 20161229121316912
delivery: App
description: Powerful new browser for Mac, Windows and Linux
method: save
modified: 20171113110603084
modified: 20200507104016915
tags: Saving Windows Linux Mac
title: Saving on Beaker Browser
type: text/vnd.tiddlywiki

View File

@ -1,12 +1,15 @@
caption: ~TiddlyDesktop
color: #FF8A65
community-author: Jeremy Ruston
created: 20171112085137764
delivery: App
description: Custom desktop application for working with TiddlyWiki
method: save
modified: 20171113105959509
modified: 20200507104332791
tags: Saving Mac Windows Linux
title: Saving on TiddlyDesktop
type: text/vnd.tiddlywiki
url: https://github.com/Jermolene/TiddlyDesktop/releases
See the [[Introducing TiddlyDesktop Video]]

View File

@ -1,12 +1,14 @@
caption: ~TiddlySpot
color: #29B6F6
community-author: Simon Baird and Daniel Baird
created: 20130825213500000
modified: 20160610082610879
tags: Saving Android Chrome Firefox InternetExplorer iOS Linux Mac Opera PHP Safari Windows
delivery: Service
description: Free online service for hosting TiddlyWiki files
method: save
modified: 20200507202953380
tags: Android Chrome Firefox [[Internet Explorer]] Linux Mac Opera PHP Safari Saving Windows iOS Edge
title: Saving on TiddlySpot
type: text/vnd.tiddlywiki
delivery: Service
method: save
caption: TiddlySpot
description: Free online service for hosting TiddlyWiki files
[[TiddlySpot|http://tiddlyspot.com]] is a free hosting service for TiddlyWiki documents from Simon Baird and Daniel Baird.

View File

@ -1,9 +1,10 @@
caption: PHP
color: #F06292
created: 20140111091844267
delivery: DIY
description: DIY script you can install on your own server
method: save
modified: 20171115171431733
modified: 20200507110314202
tags: Saving PHP
title: Saving on a PHP Server
type: text/vnd.tiddlywiki

View File

@ -1,9 +1,11 @@
caption: Quine
color: #FF8A65
community-author: Chris Hunt
created: 20131129101027725
delivery: App
description: iPad/iPhone app for working with TiddlyWiki
method: save
modified: 20200428224059031
modified: 20200507104206754
tags: Saving iOS
title: Saving on iPad/iPhone
type: text/vnd.tiddlywiki

View File

@ -1,12 +1,13 @@
caption: Git Service Saver
color: #29B6F6
created: 20190408173002622
modified: 20190408173002622
tags: Saving Android Chrome Firefox InternetExplorer iOS Linux Mac Opera Safari Windows
delivery: Service
description: Save changes directly to a Git repository (on GitHub, GitLab)
method: save
modified: 20200507203007684
tags: Android Chrome Firefox [[Internet Explorer]] Linux Mac Opera Safari Saving Windows iOS Edge
title: Saving to a Git service
type: text/vnd.tiddlywiki
delivery: Service
method: save
caption: Git Service Saver
description: Save changes directly to a Git repository (on GitHub, GitLab)
TiddlyWiki can save changes directly to a GitHub repository in the single file configuration.

View File

@ -1,10 +1,11 @@
caption: WebDAV
caption: ~WebDAV
color: #f48fb1
created: 20160216191710789
delivery: Protocol
description: Standard web protocol available on products such as Sharepoint
method: save
modified: 20171117171334181
tags: Saving Android Chrome Firefox InternetExplorer iOS Linux Mac Opera PHP Safari Windows
modified: 20200507202752943
tags: Android Chrome Firefox [[Internet Explorer]] Linux Mac Opera PHP Safari Saving Windows iOS Edge
title: Saving via WebDAV
type: text/vnd.tiddlywiki

View File

@ -1,10 +1,12 @@
caption: Ruby Server
color: #78909C
community-author: Jim Foltz
created: 20180514011710789
delivery: Server-side Script
description: DIY script you can run as a server
method: save
modified: 20180513222628883
tags: Saving Android Chrome Firefox InternetExplorer iOS Linux Mac Opera Safari Windows
modified: 20200507203129704
tags: Android Chrome Firefox [[Internet Explorer]] Linux Mac Opera Safari Saving Windows iOS Edge
title: Saving via a Minimal Ruby Server
type: text/vnd.tiddlywiki

View File

@ -1,9 +1,11 @@
caption: ~TiddlyFox
color: #4DB6AC
community-author: Jeremy Ruston
created: 20131221085742684
delivery: Browser Extension
description: Browser extension for older versions of Firefox
method: save
modified: 20171118230504315
modified: 20200507105421421
tags: Saving Firefox
title: Saving with TiddlyFox
type: text/vnd.tiddlywiki

View File

@ -1,10 +1,12 @@
caption: ~TiddlyIE
color: #4DB6AC
community-author: David Jade
created: 20131211220000000
delivery: Browser Extension
description: Browser extension for Internet Explorer
method: save
modified: 20171113110036278
tags: Saving InternetExplorer
modified: 20200507201415232
tags: [[Internet Explorer]] Saving
title: Saving with TiddlyIE
type: text/vnd.tiddlywiki

View File

@ -1,10 +1,11 @@
caption: Download Saver
color: #7986CB
created: 20131129092604900
delivery: Saver
description: Slightly awkward but universal technique that works on almost every browser
method: save
modified: 20171113110022987
tags: Saving Chrome Safari Firefox Opera InternetExplorer
modified: 20200507202835577
tags: Chrome Firefox [[Internet Explorer]] Opera Safari Saving Edge
title: Saving with the HTML5 fallback saver
type: text/vnd.tiddlywiki

View File

@ -1,37 +1,68 @@
created: 20140912140651119
list: [[Saving with the HTML5 fallback saver]] [[Installing TiddlyWiki on Node.js]] [[TiddlyServer by Arlen Beiler]] [[Saving on TiddlyDesktop]] [[Saving on Beaker Browser]] [[Saving on iPad/iPhone]] [["savetiddlers" Extension for Chrome and Firefox by buggyj]] [["file-backups" Extension for Firefox by pmario]] [["Noteself" by Danielo Rodríguez]] [[TiddlyDrive Add-on for Google Drive by Joshua Stubbs]] [[TiddlyWiki in the Sky for Dropbox]] [[Saving on a PHP Server]] [[Saving via WebDAV]] [[Saving on Android]] [[Saving with TiddlyFox]] [[Saving with TiddlyIE]] [[Windows HTA Hack]]
modified: 20171113135847405
list:
modified: 20200507203641230
saving-browser: Firefox Chrome Edge [[Internet Explorer]] Safari Opera
saving-os: Windows Mac Linux Android iOS
tags: [[Working with TiddlyWiki]]
title: Saving
type: text/vnd.tiddlywiki
\define filter-button(caption,filter)
<$reveal type="nomatch" state="$:/SavingDetailsFilter" text="""$filter$""" tag="span">
<$button class="tc-btn-invisible tc-btn-unpushed" set="$:/SavingDetailsFilter" setTo="""$filter$""">
<$text text="""$caption$"""/>
</$button>
</$reveal>
<$reveal type="match" state="$:/SavingDetailsFilter" text="""$filter$""" tag="span">
<$button class="tc-btn-invisible tc-btn-pushed">
<$text text="""$caption$"""/> {{$:/core/images/done-button}}
</$button>
</$reveal>
\define alltagsfilter()
<$vars tag1="tag[" tag2="]" lb="[" rb="tag[Saving]sort[delivery]]">
<$set filter="[list[]addprefix<tag1>addsuffix<tag2>]+[join[]addprefix<lb>addsuffix<rb>]" name="alltags" select=0>
<$text text=<<alltags>>/>
</$set>
</$vars>
\end
\define filter-maker()
[tag[Saving]tag[$(currentTiddler)$]]
\define saverssidebaritem(item:"Linux")
<$checkbox tiddler=<<qualify $:/temp/$item$>> field="status" checked="selected" checkactions=<<checkactions "$item$">> uncheckactions=<<uncheckactions "$item$">> default="closed"> $item$</$checkbox><br/>
\end
\define saverssidebaritemlist(fieldname:"os")
<$list filter="[enlist{!!$fieldname$}]" variable="currentItem">
<$macrocall $name="saverssidebaritem" item=<<currentItem>>/>
</$list>
\end
\define uncheckactions(item:"Linux")
<$action-listops $subfilter="-[[$item$]]"/>
\end
\define checkactions(item:"Linux")
<$action-listops $subfilter="[[$item$]]"/>
\end
\define uncheckactions(item:"Linux")
<$action-listops $subfilter="-[[$item$]]"/>
\end
Available methods for saving changes with TiddlyWiki:
<div class="tc-thumbnail-tabs">
<div style="font-size:0.9em;">
PLATFORMS:
<<filter-button caption:"All" filter:"[tag[Saving]]">>
<$list filter="Android Chrome Firefox InternetExplorer iOS Linux Mac Opera PHP Safari Windows">
<$macrocall $name="filter-button" caption=<<currentTiddler>> filter=<<filter-maker>>/>
<div class="tc-wrapper-flex">
<div class="tc-saving-sidebar">
<div class="tc-saving-sidebar-category">
<div class="tc-saving-sidebar-category-title">OS</div>
<div class="tc-saving-sidebar-category-item">
<<saverssidebaritemlist "saving-os">>
</div>
</div>
<div class="tc-saving-sidebar-category">
<div class="tc-saving-sidebar-category-title">Browser</div>
<div class="tc-saving-sidebar-category-item">
<<saverssidebaritemlist "saving-browser">>
</div>
</div>
</div>
<!-- Page content -->
<div class="content">
<$wikify text=<<alltagsfilter>> name="alltagsfilterwikified">
<$list filter=<<alltagsfilterwikified>>>
{{||$:/_tw5.com-card-template}}
</$list>
</$wikify>
</div>
<br/>
<$macrocall $name="tabs" tabsList={{$:/SavingDetailsFilter}} template="$:/SavingDetailsTemplate" buttonTemplate="$:/SavingThumbnailsTemplate"/>
</div>
</div>

View File

@ -1,10 +1,11 @@
caption: ~TiddlyWiki Cloud Connectors
color: #29B6F6
created: 20171113135053055
delivery: Web Service
description: Online service for editing TiddlyWiki documents in Dropbox
method: save
modified: 20180410115910048
tags: Saving Android Chrome Firefox InternetExplorer iOS Linux Mac Opera PHP Safari Windows
modified: 20200507202922556
tags: Android Chrome Firefox [[Internet Explorer]] Linux Mac Opera PHP Safari Saving Windows iOS Edge
title: TiddlyWiki Cloud
type: text/vnd.tiddlywiki
url: https://twcloud.github.io/tw5-dropbox/

View File

@ -1,6 +1,9 @@
created: 20200507005920476
modified: 20200507044420793
title: $:/editions/tw5.com/snippets/download-empty-button
type: text/vnd.tiddlywiki
<$button class="tc-btn-big-green">
<$button class="tc-btn-download">
<$action-sendmessage $message="tm-download-file" $param="$:/editions/tw5.com/download-empty" filename="empty.html"/>
Download Empty {{$:/core/images/save-button}}
</$button>

View File

@ -0,0 +1,17 @@
created: 20200507002521489
modified: 20200515012732244
tags:
title: $:/_tw5.com-card-template
type: text/vnd.tiddlywiki
\define tw-card-template(bordercolor:"")
<div class="tc-card" style="border-top: 5px solid $bordercolor$;">
<$link>
<div class="tc-card-title"><$transclude field="caption"><$view field="title"/></$transclude></div>
<div class="tc-card-author"> <$list filter="[is[current]has[community-author]]">by {{!!community-author}}</$list></div>
<p><$view field="description"/></p>
</$link>
</div>
\end
<$macrocall $name="tw-card-template" bordercolor={{!!color}}/>

View File

@ -1,5 +1,8 @@
title: $:/_tw5.com-styles
created: 20200507002727378
modified: 20200515024640489
tags: $:/tags/Stylesheet
title: $:/_tw5.com-styles
type: text/vnd.tiddlywiki
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
@ -74,3 +77,124 @@ tags: $:/tags/Stylesheet
width: 1em;
height: 1em;
}
.tc-wrapper-flex {
display: flex;
}
.tc-saving-sidebar {
margin: 0;
padding: 0;
min-width: 200px;
overflow: auto;
}
.tc-saving-sidebar a {
display: block;
}
@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
.tc-wrapper-flex {
flex-direction: column;
}
.tc-saving-sidebar {
width: 100%;
height: auto;
}
.tc-saving-sidebar a {
float: left;
}
}
.tc-saving-sidebar-category {
margin-bottom: 10px;
}
.tc-saving-sidebar-category-title {
font-weight: bold;
margin-bottom: 5px;
font-size: 16px;
}
.tc-saving-sidebar-category-item {
margin-left: 10px;
}
.tc-card {
margin: 15px;
padding: 10px 20px;
border-radius: 10px;
border-top: 5px solid #45D3D3;
box-shadow: 0 8px 17px -8px #A3A5AE;
background-color: #FFF;
width: 200px;
transition: box-shadow 0.3s ease-in-out;
font-size: 13px;
line-height: 18px;
}
.tc-card:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.tc-card:hover .tc-card-title {
color: #1462ff;
}
.tc-card-title {
text-align: center;
font-size: 1.2em;
font-weight: 600;
transition: color 0.2s ease-in-out;
padding: 10px 0;
}
.tc-card-author {
text-align: right;
}
.tc-card p {
height: 67px;
overflow: hidden;
margin: 0;
padding: 13px 0;
}
.tc-card a {
color: #222;
}
.tc-card a:hover {
text-decoration:none;
}
.tc-card a:active, .tc-card a:focus, .tc-btn-download:active, .tc-btn-download:focus{
outline: none;
}
div.content {
padding: 1px 16px;
display: flex;
flex-wrap: wrap;
}
.tc-btn-download {
width: 250px;
padding: 10px;
border-radius: 5px;
background: #1462ff;
border-radius: 5px;
border: none;
box-shadow: 0 2px 2px 0 #4a74c9;
overflow: hidden;
cursor: pointer;
font-size: 1.2em;
line-height: 1.4em;
color: #fff;
fill: #fff;
}
.tc-btn-download:active {
background: #1475ff;
}