Lots of improvements to the plugin library

* Moved “add new plugin” into a modal wizard
* Adopt big friendly buttons
* Add plugin icons and readmes to “add new plugin” modal
* Use tabs for splitting plugins/themes/languages
* Consistent styling between the “add new plugin” modal and the
“installed plugins” control panel tab
* Behind the scenes, moved from addressing the library as
`recipes/defaults/tiddlers/<etc>` to `recipes/library/tiddlers<etc>`
print-window-tiddler
Jermolene 2015-03-18 11:46:28 +00:00
rodzic 421ac16389
commit 24435a46be
17 zmienionych plików z 227 dodań i 222 usunięć

Wyświetl plik

@ -38,8 +38,8 @@ Palette/Editor/Reset/Caption: reset
Palette/HideEditor/Caption: hide editor
Palette/Prompt: Current palette:
Palette/ShowEditor/Caption: show editor
Plugins/Add/Hint: Install new plugins
Plugins/Add/Caption: Add
Plugins/Add/Hint: Install plugins from the official library
Plugins/Add/Caption: Get more plugins
Plugins/Caption: Plugins
Plugins/Disable/Caption: disable
Plugins/Disable/Hint: Disable this plugin when reloading page
@ -47,11 +47,13 @@ Plugins/Disabled/Status: (disabled)
Plugins/Empty/Hint: None
Plugins/Enable/Caption: enable
Plugins/Enable/Hint: Enable this plugin when reloading page
Plugins/Installed/Hint: Currently installed plugins
Plugins/Installed/Caption: Installed
Plugins/Language/Prompt: Languages
Plugins/Plugin/Prompt: Plugins
Plugins/Theme/Prompt: Themes
Plugins/Installed/Hint: Currently installed plugins:
Plugins/Languages/Caption: Languages
Plugins/Languages/Hint: Language pack plugins
Plugins/Plugins/Caption: Plugins
Plugins/Plugins/Hint: Plugins
Plugins/Themes/Caption: Themes
Plugins/Themes/Hint: Theme plugins
Saving/Caption: Saving
Saving/Heading: Saving
Saving/TiddlySpot/Advanced/Heading: Advanced Settings

Wyświetl plik

@ -39,20 +39,44 @@ Command.prototype.execute = function() {
fs = require("fs"),
path = require("path"),
containerTitle = this.params[0],
basepath = this.params[1],
skinnyListTitle = this.params[2];
filter = this.params[1],
basepath = this.params[2],
skinnyListTitle = this.params[3];
// Get the container tiddler as data
var containerData = self.commander.wiki.getTiddlerData(containerTitle,undefined);
if(!containerData) {
return "'" + containerTitle + "' is not a tiddler bundle";
}
// Save each JSON file and collect the skinny data
var skinnyList = [];
// Filter the list of plugins
var pluginList = [];
$tw.utils.each(containerData.tiddlers,function(tiddler,title) {
pluginList.push(title);
});
var filteredPluginList;
if(filter) {
filteredPluginList = self.commander.wiki.filterTiddlers(filter,null,self.commander.wiki.makeTiddlerIterator(pluginList));
} else {
filteredPluginList = pluginList;
}
// Iterate through the plugins
var skinnyList = [];
$tw.utils.each(filteredPluginList,function(title) {
var tiddler = containerData.tiddlers[title];
// Save each JSON file and collect the skinny data
var pathname = path.resolve(self.commander.outputPath,basepath + encodeURIComponent(title) + ".json");
$tw.utils.createFileDirectories(pathname);
fs.writeFileSync(pathname,JSON.stringify(tiddler,null,$tw.config.preferences.jsonSpaces),"utf8");
skinnyList.push($tw.utils.extend({},tiddler,{text: undefined}));
// Collect the skinny list data
var pluginTiddlers = JSON.parse(tiddler.text),
readmeContent = (pluginTiddlers.tiddlers[title + "/readme"] || {}).text,
iconTiddler = pluginTiddlers.tiddlers[title + "/icon"] || {},
iconType = iconTiddler.type,
iconText = iconTiddler.text,
iconContent;
if(iconType && iconText) {
iconContent = $tw.utils.makeDataUri(iconText,iconType);
}
skinnyList.push($tw.utils.extend({},tiddler,{text: undefined, readme: readmeContent, icon: iconContent}));
});
// Save the catalogue tiddler
if(skinnyListTitle) {

Wyświetl plik

@ -82,7 +82,7 @@ exports.startup = function() {
} else {
iframeInfo.domNode.contentWindow.postMessage({
verb: "GET",
url: "recipes/default/tiddlers.json",
url: "recipes/library/tiddlers.json",
cookies: {
type: "save-info",
infoTitlePrefix: paramObject.infoTitlePrefix || "$:/temp/RemoteAssetInfo/",
@ -104,7 +104,7 @@ exports.startup = function() {
} else {
iframeInfo.domNode.contentWindow.postMessage({
verb: "GET",
url: "recipes/default/tiddlers/" + encodeURIComponent(title) + ".json",
url: "recipes/library/tiddlers/" + encodeURIComponent(title) + ".json",
cookies: {
type: "save-tiddler",
url: url

Wyświetl plik

@ -1,88 +0,0 @@
title: $:/core/ui/ControlPanel/Plugins/Add
tags: $:/tags/ControlPanel/Plugins
caption: {{$:/language/ControlPanel/Plugins/Add/Caption}}
\define lingo-base() $:/language/ControlPanel/Plugins/
\define install-plugin-button()
<$button>
<$action-sendmessage $message="tm-load-plugin-from-library" url={{!!url}} title={{$(assetInfo)$!!original-title}}/>
<$list filter="[<assetInfo>get[original-title]get[version]]" variable="installedVersion" emptyMessage="""install""">
reinstall
</$list>
</$button>
\end
\define display-plugin-info()
<tr>
<td>
<<install-plugin-button>>
<br>
</td>
<td>
''<$view tiddler=<<assetInfo>> field="description"/>''
<br>
<$view tiddler=<<assetInfo>> field="original-title"/>
</td>
<td>
<$view tiddler=<<assetInfo>> field="version"/>
<$list filter="[<assetInfo>get[original-title]get[version]]" variable="installedVersion">
<br>
<em>
Installed:
<br>
<$text text=<<installedVersion>>/>
</em>
</$list>
</td>
</tr>
\end
\define load-plugin-library-button()
<$button>
<$action-sendmessage $message="tm-load-plugin-library" url={{!!url}} infoTitlePrefix="$:/temp/RemoteAssetInfo/"/>
open plugin library
</$button>
\end
\define display-server-connection()
<$list filter="[all[tiddlers+shadows]tag[$:/tags/ServerConnection]suffix{!!url}]" variable="connectionTiddler" emptyMessage=<<load-plugin-library-button>>>
Search: <$edit-text tiddler="""$:/temp/RemoteAssetSearch/$(currentTiddler)$""" default="" type="search" tag="input" focus="true"/>
<$select tiddler="$:/temp/RemoteAssetCategory/$(currentTiddler)$" default="plugin">
<option value="plugin">Plugins</option>
<option value="theme">Themes</option>
<option value="language">Languages</option>
</$select>
<$set name="pluginType" filter="[[$:/temp/RemoteAssetCategory/$(currentTiddler)$]is[tiddler]]" value={{$:/temp/RemoteAssetCategory/$(currentTiddler)$}} emptyValue="plugin">
<table class="tc-plugin-library-listing">
<tbody>
<$list filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type<pluginType>search{$:/temp/RemoteAssetSearch/$(currentTiddler)$}sort[description]]" variable="assetInfo">
<<display-plugin-info>>
</$list>
</tbody>
</table>
</$set>
</$list>
\end
\define plugin-library-listing()
<$list filter="[all[tiddlers+shadows]tag[$:/tags/PluginLibrary]]">
<div class="tc-plugin-library">
!! <$link><$transclude field="caption"><$view field="title"/></$transclude></$link>
//<$view field="url"/>//
<$transclude/>
<<display-server-connection>>
</div>
</$list>
\end
<div>
<<plugin-library-listing>>
</div>

Wyświetl plik

@ -1,101 +0,0 @@
title: $:/core/ui/ControlPanel/Plugins/Installed
tags: $:/tags/ControlPanel/Plugins
caption: {{$:/language/ControlPanel/Plugins/Installed/Caption}}
\define lingo-base() $:/language/ControlPanel/Plugins/
\define popup-state-macro()
$(qualified-state)$-$(currentTiddler)$
\end
\define tabs-state-macro()
$(popup-state)$-$(pluginInfoType)$
\end
\define plugin-icon-title()
$(currentTiddler)$/icon
\end
\define plugin-disable-title()
$:/config/Plugins/Disabled/$(currentTiddler)$
\end
\define plugin-table-body(type,disabledMessage)
<div class="tc-plugin-info-chunk">
<$reveal type="nomatch" state=<<popup-state>> text="yes">
<$button class="tc-btn-invisible tc-btn-dropdown" set=<<popup-state>> setTo="yes">
{{$:/core/images/right-arrow}}
</$button>
</$reveal>
<$reveal type="match" state=<<popup-state>> text="yes">
<$button class="tc-btn-invisible tc-btn-dropdown" set=<<popup-state>> setTo="no">
{{$:/core/images/down-arrow}}
</$button>
</$reveal>
</div>
<div class="tc-plugin-info-chunk">
<$transclude tiddler=<<currentTiddler>> subtiddler=<<plugin-icon-title>>>
<$transclude tiddler="$:/core/images/plugin-generic-$type$"/>
</$transclude>
</div>
<div class="tc-plugin-info-chunk">
<div>
''<$view field="description"><$view field="title"/></$view>'' $disabledMessage$
</div>
<div>
<$view field="title"/>
</div>
<div>
<$view field="version"/>
</div>
</div>
\end
\define plugin-table(type)
<$set name="qualified-state" value=<<qualify "$:/state/plugin-info">>>
<$list filter="[!has[draft.of]plugin-type[$type$]sort[description]]" emptyMessage=<<lingo "Empty/Hint">>>
<$set name="popup-state" value=<<popup-state-macro>>>
<$reveal type="nomatch" state=<<plugin-disable-title>> text="yes">
<$link to={{!!title}} class="tc-plugin-info">
<<plugin-table-body type:"$type$">>
</$link>
</$reveal>
<$reveal type="match" state=<<plugin-disable-title>> text="yes">
<$link to={{!!title}} class="tc-plugin-info tc-plugin-info-disabled">
<<plugin-table-body type:"$type$" disabledMessage:"<$macrocall $name='lingo' title='Disabled/Status'/>">>
</$link>
</$reveal>
<$reveal type="match" text="yes" state=<<popup-state>>>
<div class="tc-plugin-info-dropdown">
<$list filter="[all[current]] -[[$:/core]]">
<div style="float:right;">
<$reveal type="nomatch" state=<<plugin-disable-title>> text="yes">
<$button set=<<plugin-disable-title>> setTo="yes" tooltip={{$:/language/ControlPanel/Plugins/Disable/Hint}} aria-label={{$:/language/ControlPanel/Plugins/Disable/Caption}}>
<<lingo Disable/Caption>>
</$button>
</$reveal>
<$reveal type="match" state=<<plugin-disable-title>> text="yes">
<$button set=<<plugin-disable-title>> setTo="no" tooltip={{$:/language/ControlPanel/Plugins/Enable/Hint}} aria-label={{$:/language/ControlPanel/Plugins/Enable/Caption}}>
<<lingo Enable/Caption>>
</$button>
</$reveal>
</div>
</$list>
<$reveal type="nomatch" text="" state="!!list">
<$macrocall $name="tabs" state=<<tabs-state-macro>> tabsList={{!!list}} default="readme" template="$:/core/ui/PluginInfo"/>
</$reveal>
<$reveal type="match" text="" state="!!list">
No information provided
</$reveal>
</div>
</$reveal>
</$set>
</$list>
</$set>
\end
! <<lingo Plugin/Prompt>>
<<plugin-table plugin>>
! <<lingo Theme/Prompt>>
<<plugin-table theme>>
! <<lingo Language/Prompt>>
<<plugin-table language>>

Wyświetl plik

@ -0,0 +1,116 @@
title: $:/core/ui/ControlPanel/Modals/AddPlugins
subtitle: {{$:/core/images/download-button}} {{$:/language/ControlPanel/Plugins/Add/Caption}}
\define lingo-base() $:/language/ControlPanel/Plugins/
\define install-plugin-button()
<$button>
<$action-sendmessage $message="tm-load-plugin-from-library" url={{!!url}} title={{$(assetInfo)$!!original-title}}/>
<$list filter="[<assetInfo>get[original-title]get[version]]" variable="installedVersion" emptyMessage="""install""">
reinstall
</$list>
</$button>
\end
\define popup-state-macro()
$:/state/add-plugin-info/$(connectionTiddler)$/$(assetInfo)$
\end
\define display-plugin-info(type)
<$set name="popup-state" value=<<popup-state-macro>>>
<div class="tc-plugin-info">
<div class="tc-plugin-info-chunk tc-small-icon">
<$reveal type="nomatch" state=<<popup-state>> text="yes">
<$button class="tc-btn-invisible tc-btn-dropdown" set=<<popup-state>> setTo="yes">
{{$:/core/images/right-arrow}}
</$button>
</$reveal>
<$reveal type="match" state=<<popup-state>> text="yes">
<$button class="tc-btn-invisible tc-btn-dropdown" set=<<popup-state>> setTo="no">
{{$:/core/images/down-arrow}}
</$button>
</$reveal>
</div>
<div class="tc-plugin-info-chunk">
<$list filter="[<assetInfo>has[icon]]" emptyMessage="""<$transclude tiddler="$:/core/images/plugin-generic-$type$"/>""">
<img src={{$(assetInfo)$!!icon}}/>
</$list>
</div>
<div class="tc-plugin-info-chunk">
<h1><$view tiddler=<<assetInfo>> field="description"/></h1>
<h2><$view tiddler=<<assetInfo>> field="original-title"/></h2>
<div><em><$view tiddler=<<assetInfo>> field="version"/></em></div>
</div>
<div class="tc-plugin-info-chunk">
<<install-plugin-button>>
</div>
</div>
<$reveal type="match" text="yes" state=<<popup-state>>>
<div class="tc-plugin-info-dropdown">
<div class="tc-plugin-info-dropdown-message">
<$list filter="[<assetInfo>get[original-title]get[version]]" variable="installedVersion" emptyMessage="""This plugin is not currently installed""">
<em>
This plugin is already installed at version <$text text=<<installedVersion>>/>
</em>
</$list>
</div>
<div class="tc-plugin-info-dropdown-body">
<$transclude tiddler=<<assetInfo>> field="readme" mode="block"/>
</div>
</div>
</$reveal>
</$set>
\end
\define load-plugin-library-button()
<$button class="tc-btn-big-green">
<$action-sendmessage $message="tm-load-plugin-library" url={{!!url}} infoTitlePrefix="$:/temp/RemoteAssetInfo/"/>
{{$:/core/images/chevron-right}} open plugin library
</$button>
\end
\define display-server-assets(type)
Search: <$edit-text tiddler="""$:/temp/RemoteAssetSearch/$(currentTiddler)$""" default="" type="search" tag="input" focus="true"/>
<$reveal state="""$:/temp/RemoteAssetSearch/$(currentTiddler)$""" type="nomatch" text="">
<$button class="tc-btn-invisible">
<$action-setfield $tiddler="""$:/temp/RemoteAssetSearch/$(currentTiddler)$""" $field="text" $value=""/>
{{$:/core/images/close-button}}
</$button>
</$reveal>
<div class="tc-plugin-library-listing">
<$list filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[$type$]search{$:/temp/RemoteAssetSearch/$(currentTiddler)$}sort[description]]" variable="assetInfo">
<<display-plugin-info "$type$">>
</$list>
</div>
\end
\define display-server-connection()
<$list filter="[all[tiddlers+shadows]tag[$:/tags/ServerConnection]suffix{!!url}]" variable="connectionTiddler" emptyMessage=<<load-plugin-library-button>>>
<<tabs "[[$:/core/ui/ControlPanel/Plugins/Add/Plugins]] [[$:/core/ui/ControlPanel/Plugins/Add/Themes]] [[$:/core/ui/ControlPanel/Plugins/Add/Languages]]" "$:/core/ui/ControlPanel/Plugins/Add/Plugins">>
</$list>
\end
\define plugin-library-listing()
<$list filter="[all[tiddlers+shadows]tag[$:/tags/PluginLibrary]]">
<div class="tc-plugin-library">
!! <$link><$transclude field="caption"><$view field="title"/></$transclude></$link>
//<$view field="url"/>//
<$transclude/>
<<display-server-connection>>
</div>
</$list>
\end
<$importvariables filter="[[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]">
<div>
<<plugin-library-listing>>
</div>
</$importvariables>

Wyświetl plik

@ -1,7 +0,0 @@
title: $:/core/ui/ControlPanel/Plugins
tags: $:/tags/ControlPanel
caption: {{$:/language/ControlPanel/Plugins/Caption}}
<div class="tc-control-panel">
<<tabs "[all[shadows+tiddlers]tag[$:/tags/ControlPanel/Plugins]!has[draft.of]]" "$:/core/ui/ControlPanel/Plugins/Installed">>
</div>

Wyświetl plik

@ -0,0 +1,4 @@
title: $:/core/ui/ControlPanel/Plugins/Add/Languages
caption: {{$:/language/ControlPanel/Plugins/Languages/Caption}} (<$count filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[language]]"/>)
<<display-server-assets language>>

Wyświetl plik

@ -0,0 +1,4 @@
title: $:/core/ui/ControlPanel/Plugins/Add/Plugins
caption: {{$:/language/ControlPanel/Plugins/Plugins/Caption}} (<$count filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[plugin]]"/>)
<<display-server-assets plugin>>

Wyświetl plik

@ -0,0 +1,4 @@
title: $:/core/ui/ControlPanel/Plugins/Add/Themes
caption: {{$:/language/ControlPanel/Plugins/Themes/Caption}} (<$count filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[theme]]"/>)
<<display-server-assets theme>>

Wyświetl plik

@ -0,0 +1,4 @@
title: $:/core/ui/ControlPanel/Plugins/Installed/Languages
caption: {{$:/language/ControlPanel/Plugins/Languages/Caption}} (<$count filter="[!has[draft.of]plugin-type[language]]"/>)
<<plugin-table language>>

Wyświetl plik

@ -0,0 +1,4 @@
title: $:/core/ui/ControlPanel/Plugins/Installed/Plugins
caption: {{$:/language/ControlPanel/Plugins/Plugins/Caption}} (<$count filter="[!has[draft.of]plugin-type[plugin]]"/>)
<<plugin-table plugin>>

Wyświetl plik

@ -0,0 +1,4 @@
title: $:/core/ui/ControlPanel/Plugins/Installed/Themes
caption: {{$:/language/ControlPanel/Plugins/Themes/Caption}} (<$count filter="[!has[draft.of]plugin-type[theme]]"/>)
<<plugin-table theme>>

Wyświetl plik

@ -10,8 +10,8 @@
"build": {
"library": [
"--makelibrary","$:/UpgradeLibrary",
"--savelibrarytiddlers","$:/UpgradeLibrary","recipes/default/tiddlers/","$:/UpgradeLibrary/List",
"--savetiddler","$:/UpgradeLibrary/List","recipes/default/tiddlers.json",
"--savelibrarytiddlers","$:/UpgradeLibrary","[prefix[$:/]] -[[$:/plugins/tiddlywiki/upgrade]] -[[$:/plugins/tiddlywiki/translators]] -[[$:/plugins/tiddlywiki/pluginlibrary]] -[[$:/plugins/tiddlywiki/jasmine]]","recipes/library/tiddlers/","$:/UpgradeLibrary/List",
"--savetiddler","$:/UpgradeLibrary/List","recipes/library/tiddlers.json",
"--rendertiddler","$:/plugins/tiddlywiki/pluginlibrary/library.template.html","index.html","text/plain"]
}
}

Wyświetl plik

@ -18,8 +18,8 @@ window.addEventListener("message",function listener(event){
console.log("plugin library: Message content",event.data);
switch(event.data.verb) {
case "GET":
if(event.data.url === "recipes/default/tiddlers.json") {
// Route for recipes/default/tiddlers.json
if(event.data.url === "recipes/library/tiddlers.json") {
// Route for recipes/library/tiddlers.json
event.source.postMessage({
verb: "GET-RESPONSE",
status: "200",
@ -28,9 +28,9 @@ window.addEventListener("message",function listener(event){
type: "application/json",
body: JSON.stringify(assetList,null,4)
},"*");
} else if(event.data.url.indexOf("recipes/default/tiddlers/") === 0) {
var url = "recipes/default/tiddlers/" + encodeURIComponent(removePrefix(event.data.url,"recipes/default/tiddlers/"));
// Route for recipes/default/tiddlers/<uri-encoded-tiddler-title>.json
} else if(event.data.url.indexOf("recipes/library/tiddlers/") === 0) {
var url = "recipes/library/tiddlers/" + encodeURIComponent(removePrefix(event.data.url,"recipes/library/tiddlers/"));
// Route for recipes/library/tiddlers/<uri-encoded-tiddler-title>.json
httpGet(url,function(err,responseText) {
if(err) {
event.source.postMessage({

Wyświetl plik

@ -114,5 +114,5 @@ canvas.tc-edit-bitmapeditor {
}
.tc-plugin-info {
<<box-shadow "2px 2px 4px rgba(0,0,0,0.2)">>
<<box-shadow "1px 1px 3px rgba(0,0,0,0.5)">>
}

Wyświetl plik

@ -1110,6 +1110,11 @@ canvas.tc-edit-bitmapeditor {
line-height: 30px;
}
.tc-modal-header img, .tc-modal-header svg {
width: 1em;
height: 1em;
}
.tc-modal-body {
padding: 15px;
}
@ -1330,8 +1335,8 @@ canvas.tc-edit-bitmapeditor {
display: block;
border: 1px solid <<colour muted-foreground>>;
background-colour: <<colour background>>;
margin: 1em 0 1em 0;
padding: 8px;
margin: 0.5em 0 0.5em 0;
padding: 4px;
}
.tc-plugin-info-disabled {
@ -1360,16 +1365,46 @@ a.tc-tiddlylink.tc-plugin-info:hover svg {
vertical-align: middle;
}
a.tc-plugin-info img, a.tc-plugin-info svg {
.tc-plugin-info-chunk h1 {
font-size: 1em;
margin: 2px 0 2px 0;
}
.tc-plugin-info-chunk h2 {
font-size: 0.8em;
margin: 2px 0 2px 0;
}
.tc-plugin-info-chunk div {
font-size: 0.7em;
margin: 2px 0 2px 0;
}
.tc-plugin-info img, .tc-plugin-info svg {
width: 2em;
height: 2em;
fill: <<colour muted-foreground>>;
}
.tc-plugin-info.tc-small-icon img, .tc-plugin-info.tc-small-icon svg {
width: 1em;
height: 1em;
}
.tc-plugin-info-dropdown {
border: 1px solid <<colour muted-foreground>>;
margin-top: -8px;
}
.tc-plugin-info-dropdown-message {
background: <<colour message-background>>;
padding: 0.5em 1em 0.5em 1em;
font-weight: bold;
font-size: 0.8em;
}
.tc-plugin-info-dropdown-body {
padding: 1em 1em 1em 1em;
margin-top: -1em;
}
/*