Skip to content

Commit

Permalink
New user interface for wiki creation
Browse files Browse the repository at this point in the history
* Refactor settings into separate tiddlers
* Refactor toolbar into separate tiddlers
* Add new "create wiki" toolbar button
  • Loading branch information
Jermolene committed Apr 26, 2020
1 parent 566a59b commit 68ed5f0
Show file tree
Hide file tree
Showing 24 changed files with 322 additions and 194 deletions.
8 changes: 0 additions & 8 deletions plugins/tiddlydesktop/WikiListRow.tid
Expand Up @@ -52,14 +52,6 @@ advanced
<div class="td-wiki-advanced">
<$list filter="[all[current]prefix[wikifile://]]">
<div class="td-wiki-toolbar-item">
<div class="td-file-input-wrapper">
<$button class="tc-btn-invisible td-button td-wikilist-button-open">
clone
</$button>
<$browse message="tiddlydesktop-clone-wiki-path" nwsaveas="nwsaveas" param=<<currentTiddler>> />
</div>
</div>
<div class="td-wiki-toolbar-item">
<$checkbox tiddler="""$:/TiddlyDesktop/Config/disable-backups/$(currentTiddler)$""" field="text" checked="no" unchecked="yes" default="no"> enable backups</$checkbox>
</div>
<div class="td-wiki-toolbar-item">
Expand Down
56 changes: 2 additions & 54 deletions plugins/tiddlydesktop/WikiListToolbar.tid
@@ -1,61 +1,9 @@
title: WikiListToolbar

<div class="td-toolbar">
<$list filter="[all[tiddlers+shadows]tag[toolbar]]" variable="toolbar">
<div class="td-toolbar-item">
<$image source="AppIcon.svg" class="td-logo"/>
<$transclude tiddler=<<toolbar>>/>
</div>
<div class="td-toolbar-item">
<div class="td-file-input-wrapper">
<$button class="td-button">
{{$:/core/images/new-button}} {{$:/core/images/file}}
<$text text="Add a TiddlyWiki file"/>
</$button>
<$browse message="tiddlydesktop-add-wiki-path"/>
</div>
</div>
<div class="td-toolbar-item">
<div class="td-file-input-wrapper">
<$button class="td-button">
{{$:/core/images/new-button}} {{$:/core/images/folder}}
<$text text="Add a TiddlyWiki folder"/>
</$button>
<$browse nwdirectory message="tiddlydesktop-add-wiki-path"/>
</div>
</div>
<div class="td-toolbar-item">
<$button class="td-button">
<$action-sendmessage $message="tiddlydesktop-add-wiki-url" $param="backstage://$:/TiddlyDesktop/Settings"/>
{{$:/core/images/options-button}}
Settings
</$button>
</div>
<div class="td-toolbar-item">
<$button class="td-button">
<$action-sendmessage $message="tiddlydesktop-add-wiki-url" $param="backstage://$:/TiddlyDesktop/Help"/>
{{$:/core/images/help}}
Help
</$button>
</div>
<div class="td-toolbar-item">
<$button class="td-button">
<$action-sendmessage $message="tiddlydesktop-open-backstage-wiki"/>
{{$:/core/images/spiral}}
Backstage
</$button>
</div>
<$select tiddler="$:/config/templatewiki/source">
<option></option>
<$list filter="[all[tiddlers+shadows]has[source]]">
<option value={{!!source}}>{{!!title}}</option>
</$list>
</$select>
<div class="td-toolbar-item">
<div class="td-file-input-wrapper">

<$button>
copy
</$button>
<$browse message="tiddlydesktop-clone-wiki-path" nwsaveas="nwsaveas" param={{$:/config/templatewiki/source}} />
</div>
</div>
</div>
8 changes: 2 additions & 6 deletions plugins/tiddlydesktop/WikiListWindow.tid
Expand Up @@ -3,16 +3,12 @@ page-title: TiddlyDesktop -- Main

<$importvariables filter="[[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]">

<$droplink>

<$transclude tiddler="WikiListToolbar" mode="inline"/>
<$transclude tiddler="$:/core/ui/PageTemplate/alerts" mode="inline"/>

<div class="tc-hidden-wikilist-toolbar">
<$droplink>

<$transclude tiddler="WikiListToolbar" mode="inline"/>

</div>

<$transclude tiddler="WikiList" mode="inline"/>

</$droplink>
Expand Down
2 changes: 1 addition & 1 deletion plugins/tiddlydesktop/help/Help.tid
Expand Up @@ -3,5 +3,5 @@ page-title: TiddlyDesktop Help
list: $:/TiddlyDesktop/Help/Introduction $:/TiddlyDesktop/Help/Usage $:/TiddlyDesktop/Help/Internals $:/TiddlyDesktop/Help/Development

<$importvariables filter="[[$:/core/macros/toc]]">
<$macrocall $name="toc-tabbed-internal-nav" tag="$:/TiddlyDesktop/Help" selectedTiddler="$:/temp/toc/selectedTiddler" unselectedText="<p>Select a topic in the table of contents. Click the arrow to expand a topic.</p>" missingText="<p>Missing tiddler.</p>"/>
<$macrocall $name="toc-tabbed-internal-nav" tag="$:/TiddlyDesktop/Help" selectedTiddler="$:/temp/help/toc/selectedTiddler" unselectedText="<p>Select a topic in the table of contents. Click the arrow to expand a topic.</p>" missingText="<p>Missing tiddler.</p>"/>
</$importvariables>
37 changes: 8 additions & 29 deletions plugins/tiddlydesktop/modules/startup/handlers.js
Expand Up @@ -18,10 +18,8 @@ exports.after = ["startup"];
exports.synchronous = true;

exports.startup = function() {
var fs = require("fs"),
path = require("path"),
http = require("http"),
https = require("https");
var fs = require("fs"),
path = require("path");
$tw.rootWidget.addEventListener("tiddlydesktop-open-backstage-wiki",function(event) {
$tw.desktop.backstageWindow.show();
return false;
Expand Down Expand Up @@ -53,32 +51,13 @@ exports.startup = function() {
$tw.desktop.windowList.revealByUrl(event.param);
return false;
});
$tw.rootWidget.addEventListener("tiddlydesktop-clone-wiki-path",function(event) {
var src = $tw.desktop.windowList.decodeUrl(event.param);
var dest = event.files[0].path;
if(src.info.hasOwnProperty("url")) {
var file = fs.createWriteStream(dest);
var protocol;
if(src.info.protocol === "http") {
protocol = http;
} else if(src.info.protocol === "https") {
protocol = https;
}
protocol.get(src.info.url,function (response) {
var stream = response.pipe(file);
stream.on("finish",function() {
$tw.desktop.windowList.openByUrl("file://" + dest);
});
stream.on("error",function(err) {
console.log("Error: " + err);
});
});
} else if(src.info.hasOwnProperty("pathname")) {
fs.writeFileSync(dest,fs.readFileSync(src.info.pathname));
$tw.desktop.windowList.openByUrl("file://" + dest);
} else {
console.log("Uncertain how to clone this: " + src)
$tw.rootWidget.addEventListener("tiddlydesktop-clone-wiki",function(event) {
var source = event.param,
dest = event.files && event.files[0].path;
if(source && dest) {
$tw.desktop.windowList.cloneToPath(source,dest);
}
return false;
});
$tw.rootWidget.addEventListener("tiddlydesktop-flags",function(event) {
$tw.desktop.gui.Window.open("chrome://flags",{
Expand Down
19 changes: 19 additions & 0 deletions plugins/tiddlydesktop/settings/Backups.tid
@@ -0,0 +1,19 @@
title: $:/TiddlyDesktop/Settings/Backups
caption: Backups
tags: $:/TiddlyDesktop/Settings

Backups for TiddlyWiki 5 file-based wikis are automatically made every time saving changes results in a file being overwritten. The previous content of the file is copied to a backup file with a filename such as `\MyData\index.html_backup\index.20150107172517000.html`.

The path of the backup file can be an absolute path or a relative path to the directory containing the ~TiddlyWiki file. The backup path can contain the following special tokens:

* `$filename$` to stand for the filename portion of the URL of the ~TiddlyWiki file
* `$filepath$` to stand for the entire filepath of the URL of the ~TiddlyWiki file

<$edit-text tiddler="$:/TiddlyDesktop/BackupPath" class="td-big-textarea" tag="input"/>

<$button>
<$action-deletetiddler $tiddler="$:/TiddlyDesktop/BackupPath"/>
Reset to default
</$button>

(Note that backups for ~TiddlyWiki Classic wikis are managed within the TWC wiki - see "txtBackupFolder" in ~AdvancedOptions).
12 changes: 12 additions & 0 deletions plugins/tiddlydesktop/settings/Flags.tid
@@ -0,0 +1,12 @@
title: $:/TiddlyDesktop/Settings/Flags
caption: Chromium Flags
tags: $:/TiddlyDesktop/Settings

These flags are used to control Chromium, the browser component within ~TiddlyDesktop.

[[Chromium flags reference|https://peter.sh/experiments/chromium-command-line-switches/]]

<$button>
<$action-sendmessage $message="tiddlydesktop-flags"/>
Open Chromium flags
</$button>
79 changes: 3 additions & 76 deletions plugins/tiddlydesktop/settings/Settings.tid
@@ -1,79 +1,6 @@
title: $:/TiddlyDesktop/Settings
tags: $:/tags/Settings
list-before: $:/core/ui/Settings/Info
caption: ~TiddlyDesktop
page-title: TiddlyDesktop Settings

<div class="td-backstage-tiddler-window-padded">

! ~TiddlyDesktop Settings

Version {{$:/TiddlyDesktop/version}}

!! Title of the ~WikiList Window

<$edit-text tiddler="WikiListWindow" class="td-big-textarea" field="page-title" tag="input"/>

!! Backups for ~TiddlyWiki 5 Wikis

Backups are automatically made every time saving changes results in a file being overwritten. The previous content of the file is copied to a backup file with a filename such as `\MyData\index.html_backup\index.20150107172517000.html`.

The path of the backup file can be an absolute path or a relative path to the directory containing the ~TiddlyWiki file. The backup path can contain the following special tokens:

* `$filename$` to stand for the filename portion of the URL of the ~TiddlyWiki file
* `$filepath$` to stand for the entire filepath of the URL of the ~TiddlyWiki file

<$edit-text tiddler="$:/TiddlyDesktop/BackupPath" class="td-big-textarea" tag="input"/>

<$button>
<$action-deletetiddler $tiddler="$:/TiddlyDesktop/BackupPath"/>
Reset to default
</$button>

(Note that backups for ~TiddlyWiki Classic wikis are managed within the TWC wiki - see "txtBackupFolder" in ~AdvancedOptions).

!! Templates

<$navigator>

!!! Add a new template:
''Title'': <$edit-text tag="input" tiddler="$:/temp/newtemplate/title" default=""/><br />
''Source'': <$edit-text tag="input" tiddler="$:/temp/newtemplate/source" default=""/>
<$button>
Add Template
<$action-setfield $tiddler={{$:/temp/newtemplate/title}} source={{$:/temp/newtemplate/source}} />
</$button>

''Note'': When adding a file or folder, prefix the path with `wikifile://` or `wikifolder://` respectively.


!!! Delete an existing template
<$list filter="[all[tiddlers+shadows]has[source]]">
<$button message="tm-delete-tiddler" tooltip={{$:/language/Buttons/Delete/Hint}} aria-label={{$:/language/Buttons/Delete/Caption}} class="tc-btn-invisible tc-tiddlylink" param=<<currentTiddler>> >
{{$:/core/images/delete-button}}
</$button>
<$text text={{!!title}} />: {{!!source}}<br />
</$list>
</$navigator>

!! User Configuration Folder

This is the folder in which ~TiddlyDesktop stores internal configuration. Notably, the subfolder `user-config-tiddlywiki` contains the backstage wiki folder. If you are experiencing problems with ~TiddlyDesktop you can delete the entire configuration folder to reset TiddlyDesktop to default settings.

<$button>
<$action-sendmessage $message="tiddlydesktop-open-config-folder" $param="USER_CONFIG_FOLDER"/>
Open user config folder
</$button>

!! Flags

These flags are used to control Chromium, the browser component within ~TiddlyDesktop.

[[Chromium flags reference|https://peter.sh/experiments/chromium-command-line-switches/]]

<$button>
<$action-sendmessage $message="tiddlydesktop-flags"/>
Open Chromium flags
</$button>

</div>
<$importvariables filter="[[$:/core/macros/toc]]">
<$macrocall $name="toc-tabbed-internal-nav" tag="$:/TiddlyDesktop/Settings" selectedTiddler="$:/temp/setings/toc/selectedTiddler" unselectedText="<p>Version {{$:/TiddlyDesktop/version}}.</p>" missingText="<p>Missing tiddler.</p>"/>
</$importvariables>
54 changes: 54 additions & 0 deletions plugins/tiddlydesktop/settings/Templates.tid
@@ -0,0 +1,54 @@
title: $:/TiddlyDesktop/Settings/Templates
caption: Templates
tags: $:/TiddlyDesktop/Settings

<$list filter="[all[tiddlers+shadows]tag[template]]">
<div style="margin-bottom:1em;padding:0.5em;background:white;">
<div style="float:right;">
<$list filter="[<currentTiddler>is[shadow]is[missing]]" variable="ignore" emptyMessage="""
<$button tooltip="Delete this template" class="tc-btn-invisible td-button">
<$action-deletetiddler $tiddler=<<currentTiddler>>/>
{{$:/core/images/delete-button}} Delete
</$button>
""">
<span class="tc-muted">(built-in)</span>
</$list>
</div>
<div><$text text={{!!caption}}/></div>
<div class="tc-muted">
<$list filter="[<currentTiddler>get[source]prefix[http]]" variable="ignore" emptyMessage="<$text text={{!!source}}/>">
<$link><$text text={{!!source}}/></$link>
</$list>
</div>
</div>
</$list>

!! Add a new template

''Caption'': <$edit-text tag="input" tiddler="$:/temp/newtemplate/caption" default=""/>

''Source'': <$edit-text tag="input" tiddler="$:/temp/newtemplate/source" default=""/>

<$list filter="[{$:/temp/newtemplate/source}prefix[http://]] ~[{$:/temp/newtemplate/source}prefix[https://]] ~[{$:/temp/newtemplate/source}prefix[wikifile://]] ~[{$:/temp/newtemplate/source}prefix[wikifolder://]]" variable="ignore" emptyMessage="<button disabled>Invalid source</button>">
<$button>
Add Template
<$action-createtiddler $basetitle="$:/TiddlyDesktop/Templates/Custom" caption={{$:/temp/newtemplate/caption}} source={{$:/temp/newtemplate/source}} tags="template"/>
<$action-setfield $tiddler="$:/temp/newtemplate/caption" $value=""/>
<$action-setfield $tiddler="$:/temp/newtemplate/source" $value=""/>
</$button>
</$list>

The source must match one of these patterns:

* `wikifile://<path-to-wiki-file>`
* `wikifolder://<path-to-wiki-folder>`
* `http://<url-of-wiki-file>`
* `https://<url-of-wiki-file>`

Examples:

```
wikifile:///Users/jobloggs/files/wiki.html
wikifolder:///MyWikiFolder
wikifolder://C:\MyWikiFolder
```
10 changes: 10 additions & 0 deletions plugins/tiddlydesktop/settings/UserConfig.tid
@@ -0,0 +1,10 @@
title: $:/TiddlyDesktop/Settings/UserConfig
caption: User Configuration Folder
tags: $:/TiddlyDesktop/Settings

This is the folder in which ~TiddlyDesktop stores internal configuration. Notably, the subfolder `user-config-tiddlywiki` contains the backstage wiki folder. If you are experiencing problems with ~TiddlyDesktop you can delete the entire configuration folder to reset TiddlyDesktop to default settings.

<$button>
<$action-sendmessage $message="tiddlydesktop-open-config-folder" $param="USER_CONFIG_FOLDER"/>
Open user config folder
</$button>
5 changes: 5 additions & 0 deletions plugins/tiddlydesktop/settings/WikiListTitle.tid
@@ -0,0 +1,5 @@
title: $:/TiddlyDesktop/Settings/WikiListTitle
caption: Wiki List Window Title
tags: $:/TiddlyDesktop/Settings

<$edit-text tiddler="WikiListWindow" class="td-big-textarea" field="page-title" tag="input"/>
29 changes: 19 additions & 10 deletions plugins/tiddlydesktop/styles/toolbar.tid
Expand Up @@ -4,6 +4,7 @@ tags: $:/tags/Stylesheet
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline

.td-toolbar {
position: relative;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
Expand All @@ -12,19 +13,9 @@ tags: $:/tags/Stylesheet
background-color: <<colour wikilist-toolbar-background>>;
font-size: 0.9em;
padding: 1em;
position: fixed;
left: 0;
right: 0;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
}

.tc-hidden-wikilist-toolbar .td-toolbar {
position: static;
width: 100%;
visibility: hidden;
box-shadow: none;
}

.td-toolbar-item {
display: inline-block;
margin-right: 1em;
Expand Down Expand Up @@ -57,3 +48,21 @@ tags: $:/tags/Stylesheet
cursor: pointer;
display: inline-block;
}

.td-create-wiki-dropdown .td-file-input-wrapper {
display: block;
}

.td-create-wiki-dropdown .td-file-input-wrapper button {
display: block;
}

.td-create-wiki-dropdown .td-file-input-wrapper:hover button {
color: <<color background>>;
background: <<color primary>>;
}

.td-create-wiki-dropdown h2 {
font-weight: bold;
margin: 0;
}

0 comments on commit 68ed5f0

Please sign in to comment.