AddPlugins: Add a clearer prompt for plugins that have subplugins

core/language/en-GB/ControlPanel.multids

@@ -87,6 +87,7 @@ Plugins/Plugins/Hint: Plugins
 Plugins/Reinstall/Caption: reinstall
 Plugins/Themes/Caption: Themes
 Plugins/Themes/Hint: Theme plugins
+Plugins/SubPluginPrompt: With <<count>> sub-plugins available
 Saving/Caption: Saving
 Saving/DownloadSaver/AutoSave/Description: Permit automatic saving for the download saver
 Saving/DownloadSaver/AutoSave/Hint: Enable Autosave for Download Saver

core/ui/ControlPanel/Modals/AddPlugins.tid

@@ -1,9 +1,7 @@
 title: $:/core/ui/ControlPanel/Modals/AddPlugins
 subtitle: {{$:/core/images/download-button}} {{$:/language/ControlPanel/Plugins/Add/Caption}}
 
-\define install-plugin-button()
+\define install-plugin-actions()
-<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}}/>
 <$set name="url" value={{!!url}}>
 <$set name="currentTiddler" value=<<assetInfo>>>
@@ -12,6 +10,11 @@ subtitle: {{$:/core/images/download-button}} {{$:/language/ControlPanel/Plugins/
 </$list>
 </$set>
 </$set>
+\end
+
+\define install-plugin-button()
+<div>
+<$button actions=<<install-plugin-actions>> class={{{ [<assetInfo>get[original-title]get[version]then[tc-reinstall]] tc-btn-invisible tc-install-plugin +[join[ ]] }}}>
 {{$:/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}}
@@ -56,6 +59,7 @@ $:/state/add-plugin-info/$(connectionTiddler)$/$(assetInfo)$
 <<install-plugin-button>>
 </div>
 </div>
+<$set name="original-title" value={{{ [<assetInfo>get[original-title]] }}}>
 <$reveal type="match" text="yes" state=<<popup-state>>>
 <div class="tc-plugin-info-dropdown">
 <div class="tc-plugin-info-dropdown-message">
@@ -78,7 +82,6 @@ $:/state/add-plugin-info/$(connectionTiddler)$/$(assetInfo)$
 <div class="tc-plugin-info-dropdown-body">
 <$transclude tiddler=<<assetInfo>> field="readme" mode="block"/>
 </div>
-<$set name="original-title" value={{{ [<assetInfo>get[original-title]] }}}>
 <$list filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[$type$]has[parent-plugin]parent-plugin<original-title>limit[1]]" variable="ignore">
 <div class="tc-plugin-info-sub-plugins">
 <$list filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[$type$]has[parent-plugin]parent-plugin<original-title>sort[title]]" variable="assetInfo">
@@ -86,9 +89,18 @@ $:/state/add-plugin-info/$(connectionTiddler)$/$(assetInfo)$
 </$list>
 </div>
 </$list>
-</$set>
 </div>
 </$reveal>
+<$list filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[$type$]has[parent-plugin]parent-plugin<original-title>limit[1]]" variable="ignore">
+<$reveal type="nomatch" text="yes" state=<<popup-state>> tag="div" class="tc-plugin-info-sub-plugin-indicator">
+<$wikify name="count" text="""<$count filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[$type$]has[parent-plugin]parent-plugin<original-title>]"/>""">
+<$button class="tc-btn-invisible" set=<<popup-state>> setTo="yes">
+{{$:/language/ControlPanel/Plugins/SubPluginPrompt}}
+</$button>
+</$wikify>
+</$reveal>
+</$list>
+</$set>
 </$set>
 \end
 

themes/tiddlywiki/vanilla/base.tid

@@ -2106,8 +2106,20 @@ html body.tc-body.tc-single-tiddler-window {
 }
 
 .tc-plugin-info-sub-plugins .tc-plugin-info {
-	margin: 0.5em 1em 0.5em 1em;
+    margin: 0.5em;
-	background: rgba(255,255,0,0.05);
+	background: <<colour background>>;
+}
+
+.tc-plugin-info-sub-plugin-indicator {
+	margin: -16px 1em 0 2em;
+}
+
+.tc-plugin-info-sub-plugin-indicator button {
+	color: <<colour background>>;
+	background: <<colour foreground>>;
+	border-radius: 8px;
+    padding: 2px 7px;
+    font-size: 0.75em;
 }
 
 .tc-plugin-info-sub-plugins .tc-plugin-info-dropdown {
@@ -2211,11 +2223,12 @@ a.tc-tiddlylink.tc-plugin-info:hover .tc-plugin-info > .tc-plugin-info-chunk > s
 }
 
 .tc-plugin-info-sub-plugins {
-	padding-top: 0.5em;
+	padding: 0.5em;
-	background: <<colour message-background>>;
+    margin: 0 1em 1em 1em;
+	background: <<colour notification-background>>;
 }
 
-.tc-plugin-library-listing .tc-install-plugin {
+.tc-install-plugin {
 	font-weight: bold;
 	background: green;
 	color: white;
@@ -2224,7 +2237,7 @@ a.tc-tiddlylink.tc-plugin-info:hover .tc-plugin-info > .tc-plugin-info-chunk > s
 	padding: 3px;
 }
 
-.tc-plugin-library-listing .tc-install-plugin.tc-reinstall {
+.tc-install-plugin.tc-reinstall {
 	background: blue;
 }