Improve appearance of plugin chooser

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>
+<div>
+<$button class={{{ [<assetInfo>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="[<assetInfo>get[original-title]get[version]]" variable="installedVersion" emptyMessage="""{{$:/language/ControlPanel/Plugins/Install/Caption}}""">
 {{$:/language/ControlPanel/Plugins/Reinstall/Caption}}
 </$list>
-<$reveal stateTitle=<<assetInfo>> stateField="contains-javascript" type="match" text="yes">{{$:/language/ControlPanel/Plugins/PluginWillRequireReload}}</$reveal>
 </$button>
+<div>
+</div>
+<$reveal stateTitle=<<assetInfo>> stateField="contains-javascript" type="match" text="yes">{{$:/language/ControlPanel/Plugins/PluginWillRequireReload}}</$reveal>
+</div>
 \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=<<popup-state-macro>>>
 <div class="tc-plugin-info">
-<div class="tc-plugin-info-chunk tc-small-icon">
+<div class="tc-plugin-info-chunk tc-plugin-info-toggle">
 <$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}}
@@ -30,17 +35,17 @@ $:/state/add-plugin-info/$(connectionTiddler)$/$(assetInfo)$
 </$button>
 </$reveal>
 </div>
-<div class="tc-plugin-info-chunk">
+<div class="tc-plugin-info-chunk tc-plugin-info-icon">
 <$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">
+<div class="tc-plugin-info-chunk tc-plugin-info-description">
 <h1><strong><$text text={{{ [<assetInfo>get[name]] ~[<assetInfo>get[original-title]split[/]last[1]] }}}/></strong>: <$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">
+<div class="tc-plugin-info-chunk tc-plugin-info-buttons">
 <<install-plugin-button>>
 </div>
 </div>
@@ -77,7 +82,7 @@ $:/state/add-plugin-info/$(connectionTiddler)$/$(assetInfo)$
 </$button>
 </$reveal>
 <div class="tc-plugin-library-listing">
-<$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">
 <<display-plugin-info "$type$">>
 </$list>
 </div>

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 <<colour muted-foreground>>;
+	fill: <<colour muted-foreground>>;
 	background-colour: <<colour background>>;
 	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: <<colour foreground>>;
+.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: <<colour muted-foreground>>;
-}
-
-.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;
 }