From d91fcd990e24390e6c33ea6624812eee7efc9bf2 Mon Sep 17 00:00:00 2001 From: Jeremy Ruston Date: Thu, 19 Sep 2019 13:20:07 +0100 Subject: [PATCH] Improve appearance of plugin chooser --- core/ui/ControlPanel/Modals/AddPlugins.tid | 19 +++--- themes/tiddlywiki/vanilla/base.tid | 71 ++++++++++++++++------ 2 files changed, 64 insertions(+), 26 deletions(-) diff --git a/core/ui/ControlPanel/Modals/AddPlugins.tid b/core/ui/ControlPanel/Modals/AddPlugins.tid index 0fe8af20d..c1cb387d2 100644 --- a/core/ui/ControlPanel/Modals/AddPlugins.tid +++ b/core/ui/ControlPanel/Modals/AddPlugins.tid @@ -2,13 +2,18 @@ title: $:/core/ui/ControlPanel/Modals/AddPlugins subtitle: {{$:/core/images/download-button}} {{$:/language/ControlPanel/Plugins/Add/Caption}} \define install-plugin-button() -<$button> +
+<$button class={{{ [get[original-title]get[version]then[tc-reinstall]] tc-btn-invisible tc-install-plugin +[join[ ]] }}}> <$action-sendmessage $message="tm-load-plugin-from-library" url={{!!url}} title={{$(assetInfo)$!!original-title}}/> +{{$:/core/images/download-button}} <$list filter="[get[original-title]get[version]]" variable="installedVersion" emptyMessage="""{{$:/language/ControlPanel/Plugins/Install/Caption}}"""> {{$:/language/ControlPanel/Plugins/Reinstall/Caption}} -<$reveal stateTitle=<> stateField="contains-javascript" type="match" text="yes">{{$:/language/ControlPanel/Plugins/PluginWillRequireReload}} +
+
+<$reveal stateTitle=<> stateField="contains-javascript" type="match" text="yes">{{$:/language/ControlPanel/Plugins/PluginWillRequireReload}} +
\end \define popup-state-macro() @@ -18,7 +23,7 @@ $:/state/add-plugin-info/$(connectionTiddler)$/$(assetInfo)$ \define display-plugin-info(type) <$set name="popup-state" value=<>>
-
+
<$reveal type="nomatch" state=<> text="yes"> <$button class="tc-btn-invisible tc-btn-dropdown" set=<> setTo="yes"> {{$:/core/images/right-arrow}} @@ -30,17 +35,17 @@ $:/state/add-plugin-info/$(connectionTiddler)$/$(assetInfo)$
-
+
<$list filter="[has[icon]]" emptyMessage="""<$transclude tiddler="$:/core/images/plugin-generic-$type$"/>""">
-
+

<$text text={{{ [get[name]] ~[get[original-title]split[/]last[1]] }}}/>: <$view tiddler=<> field="description"/>

<$view tiddler=<> field="original-title"/>

<$view tiddler=<> field="version"/>
-
+
<>
@@ -77,7 +82,7 @@ $:/state/add-plugin-info/$(connectionTiddler)$/$(assetInfo)$
-<$list filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[$type$]search:author,description,original-title,readme,title{$:/temp/RemoteAssetSearch/$(currentTiddler)$}sort[description]]" variable="assetInfo"> +<$list filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[$type$]search:author,description,original-title,readme,title{$:/temp/RemoteAssetSearch/$(currentTiddler)$}sort[title]sort[name]]" variable="assetInfo"> <>
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index e6a19d013..6b4920637 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -2070,11 +2070,13 @@ html body.tc-body.tc-single-tiddler-window { } .tc-plugin-info { - display: block; + display: flex; border: 1px solid <>; + fill: <>; background-colour: <>; margin: 0.5em 0 0.5em 0; padding: 4px; + align-items: center; } .tc-plugin-info-disabled { @@ -2099,40 +2101,57 @@ a.tc-tiddlylink.tc-plugin-info:hover .tc-plugin-info > .tc-plugin-info-chunk > s } .tc-plugin-info-chunk { - display: inline-block; - vertical-align: middle; + margin: 2px; } -.tc-plugin-info-chunk h1 { - font-size: 1em; - margin: 2px 0 2px 0; +.tc-plugin-info-chunk.tc-plugin-info-toggle { + flex-grow: 0; + flex-shrink: 0; } -.tc-plugin-info-chunk h2 { +.tc-plugin-info-chunk.tc-plugin-info-icon { + flex-grow: 0; + flex-shrink: 0; +} + +.tc-plugin-info-chunk.tc-plugin-info-description { + flex-grow: 1; +} + +.tc-plugin-info-chunk.tc-plugin-info-buttons { font-size: 0.8em; + line-height: 1.2; + flex-grow: 0; + flex-shrink: 0; + text-align: right; +} + +.tc-plugin-info-chunk.tc-plugin-info-description h1 { + font-size: 1em; + line-height: 1.2; margin: 2px 0 2px 0; } -.tc-plugin-info-chunk div { +.tc-plugin-info-chunk.tc-plugin-info-description h2 { + font-size: 0.8em; + line-height: 1.2; + margin: 2px 0 2px 0; +} + +.tc-plugin-info-chunk.tc-plugin-info-description div { font-size: 0.7em; + line-height: 1.2; margin: 2px 0 2px 0; } -.tc-plugin-info:hover > .tc-plugin-info-chunk > img, .tc-plugin-info:hover > .tc-plugin-info-chunk > svg { - width: 2em; - height: 2em; - fill: <>; +.tc-plugin-info-chunk.tc-plugin-info-toggle img, .tc-plugin-info-chunk.tc-plugin-info-toggle svg { + width: 1.5em; + height: 1.5em; } -.tc-plugin-info > .tc-plugin-info-chunk > img, .tc-plugin-info > .tc-plugin-info-chunk > svg { +.tc-plugin-info-chunk.tc-plugin-info-icon img, .tc-plugin-info-chunk.tc-plugin-info-icon svg { width: 2em; height: 2em; - fill: <>; -} - -.tc-plugin-info.tc-small-icon > .tc-plugin-info-chunk > img, .tc-plugin-info.tc-small-icon > .tc-plugin-info-chunk > svg { - width: 1em; - height: 1em; } .tc-plugin-info-dropdown { @@ -2151,6 +2170,20 @@ a.tc-tiddlylink.tc-plugin-info:hover .tc-plugin-info > .tc-plugin-info-chunk > s padding: 1em 1em 1em 1em; } +.tc-plugin-library-listing .tc-install-plugin { + font-weight: bold; + background: green; + color: white; + fill: white; + border-radius: 4px; + padding: 3px; +} + +.tc-plugin-library-listing .tc-install-plugin.tc-reinstall { + background: blue; +} + + .tc-check-list { line-height: 2em; }