mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-23 10:07:19 +00:00
Refactor user interface for plugin tiddlers
* Refactored control panel “Plugins” tab to make the elements more reusable * Refactored the display of plugin tiddlers to use the same format as the control panel (as suggested, I think by @danielo515), adding the shadow tiddler listing as an overridable extension tab * Added a new tab in the “More” sidebar providing quick access to all installed plugins
This commit is contained in:
Jermolene
parent
87fa7f972c
commit
7a6d7e2a15
95
core/ui/Components/plugin-info.tid
Normal file
95
core/ui/Components/plugin-info.tid
Normal file
@ -0,0 +1,95 @@
|
||||
title: $:/core/ui/Components/plugin-info
|
||||
|
||||
\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,default-popup-state)
|
||||
<div class="tc-plugin-info-chunk tc-small-icon">
|
||||
<$reveal type="nomatch" state=<<popup-state>> text="yes" default="""$default-popup-state$""">
|
||||
<$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" default="""$default-popup-state$""">
|
||||
<$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">
|
||||
<h1>
|
||||
''<$view field="description"><$view field="title"/></$view>'' $disabledMessage$
|
||||
</h1>
|
||||
<h2>
|
||||
<$view field="title"/>
|
||||
</h2>
|
||||
<h2>
|
||||
<div><em><$view field="version"/></em></div>
|
||||
</h2>
|
||||
</div>
|
||||
\end
|
||||
|
||||
\define plugin-info(type,default-popup-state)
|
||||
<$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$" default-popup-state:"""$default-popup-state$""">>
|
||||
</$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$" default-popup-state:"""$default-popup-state$""" disabledMessage:"<$macrocall $name='lingo' title='Disabled/Status'/>">>
|
||||
</$link>
|
||||
</$reveal>
|
||||
<$reveal type="match" text="yes" state=<<popup-state>> default="""$default-popup-state$""">
|
||||
<div class="tc-plugin-info-dropdown">
|
||||
<div class="tc-plugin-info-dropdown-body">
|
||||
<$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">
|
||||
<$set name="tabsList" filter="[<currentTiddler>list[]] contents">
|
||||
<$macrocall $name="tabs" state=<<tabs-state-macro>> tabsList=<<tabsList>> default="readme" template="$:/core/ui/PluginInfo"/>
|
||||
</$set>
|
||||
</$reveal>
|
||||
<$reveal type="match" text="" state="!!list">
|
||||
<<lingo NoInformation/Hint>>
|
||||
</$reveal>
|
||||
</div>
|
||||
</div>
|
||||
</$reveal>
|
||||
</$set>
|
||||
\end
|
||||
|
||||
<$macrocall $name="plugin-info" type=<<plugin-type>> default-popup-state=<<default-popup-state>>/>
|
||||
@ -4,95 +4,11 @@ caption: {{$:/language/ControlPanel/Plugins/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 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">
|
||||
<$transclude tiddler=<<currentTiddler>> subtiddler=<<plugin-icon-title>>>
|
||||
<$transclude tiddler="$:/core/images/plugin-generic-$type$"/>
|
||||
</$transclude>
|
||||
</div>
|
||||
<div class="tc-plugin-info-chunk">
|
||||
<h1>
|
||||
''<$view field="description"><$view field="title"/></$view>'' $disabledMessage$
|
||||
</h1>
|
||||
<h2>
|
||||
<$view field="title"/>
|
||||
</h2>
|
||||
<h2>
|
||||
<div><em><$view field="version"/></em></div>
|
||||
</h2>
|
||||
</div>
|
||||
\end
|
||||
|
||||
\define plugin-table(type)
|
||||
<$set name="plugin-type" value="""$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">
|
||||
<div class="tc-plugin-info-dropdown-body">
|
||||
<$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">
|
||||
<<lingo NoInformation/Hint>>
|
||||
</$reveal>
|
||||
</div>
|
||||
</div>
|
||||
</$reveal>
|
||||
<$list filter="[!has[draft.of]plugin-type[$type$]sort[description]]" emptyMessage=<<lingo "Empty/Hint">> template="$:/core/ui/Components/plugin-info"/>
|
||||
</$set>
|
||||
</$list>
|
||||
</$set>
|
||||
\end
|
||||
|
||||
|
||||
8
core/ui/MoreSideBar/Plugins.tid
Normal file
8
core/ui/MoreSideBar/Plugins.tid
Normal file
@ -0,0 +1,8 @@
|
||||
title: $:/core/ui/MoreSideBar/Plugins
|
||||
tags: $:/tags/MoreSideBar
|
||||
caption: {{$:/language/ControlPanel/Plugins/Caption}}
|
||||
|
||||
|
||||
{{$:/language/ControlPanel/Plugins/Installed/Hint}}
|
||||
|
||||
<<tabs "[all[shadows+tiddlers]tag[$:/tags/MoreSideBar/Plugins]!has[draft.of]]" "$:/core/ui/MoreSideBar/Plugins/Plugins">>
|
||||
5
core/ui/MoreSideBar/plugins/Languages.tid
Normal file
5
core/ui/MoreSideBar/plugins/Languages.tid
Normal file
@ -0,0 +1,5 @@
|
||||
title: $:/core/ui/MoreSideBar/Plugins/Languages
|
||||
tags: $:/tags/MoreSideBar/Plugins
|
||||
caption: {{$:/language/ControlPanel/Plugins/Languages/Caption}}
|
||||
|
||||
<$list filter="[!has[draft.of]plugin-type[language]sort[description]]" template="$:/core/ui/PluginListItemTemplate" emptyMessage={{$:/language/ControlPanel/Plugins/Empty/Hint}}/>
|
||||
5
core/ui/MoreSideBar/plugins/Plugins.tid
Normal file
5
core/ui/MoreSideBar/plugins/Plugins.tid
Normal file
@ -0,0 +1,5 @@
|
||||
title: $:/core/ui/MoreSideBar/Plugins/Plugins
|
||||
tags: $:/tags/MoreSideBar/Plugins
|
||||
caption: {{$:/language/ControlPanel/Plugins/Plugins/Caption}}
|
||||
|
||||
<$list filter="[!has[draft.of]plugin-type[plugin]sort[description]]" template="$:/core/ui/PluginListItemTemplate" emptyMessage={{$:/language/ControlPanel/Plugins/Empty/Hint}}>>/>
|
||||
5
core/ui/MoreSideBar/plugins/Theme.tid
Normal file
5
core/ui/MoreSideBar/plugins/Theme.tid
Normal file
@ -0,0 +1,5 @@
|
||||
title: $:/core/ui/MoreSideBar/Plugins/Theme
|
||||
tags: $:/tags/MoreSideBar/Plugins
|
||||
caption: {{$:/language/ControlPanel/Plugins/Themes/Caption}}
|
||||
|
||||
<$list filter="[!has[draft.of]plugin-type[theme]sort[description]]" template="$:/core/ui/PluginListItemTemplate" emptyMessage={{$:/language/ControlPanel/Plugins/Empty/Hint}}/>
|
||||
@ -6,10 +6,15 @@ $(currentTiddler)$/$(languageTitle)$/$(currentTab)$
|
||||
\define info-tiddler-title()
|
||||
$(currentTiddler)$/$(currentTab)$
|
||||
\end
|
||||
\define default-tiddler-title()
|
||||
$:/core/ui/PluginInfo/Default/$(currentTab)$
|
||||
\end
|
||||
<$transclude tiddler=<<localised-info-tiddler-title>> mode="block">
|
||||
<$transclude tiddler=<<currentTiddler>> subtiddler=<<localised-info-tiddler-title>> mode="block">
|
||||
<$transclude tiddler=<<currentTiddler>> subtiddler=<<info-tiddler-title>> mode="block">
|
||||
<$transclude tiddler=<<default-tiddler-title>> mode="block">
|
||||
{{$:/language/ControlPanel/Plugin/NoInfoFound/Hint}}
|
||||
</$transclude>
|
||||
</$transclude>
|
||||
</$transclude>
|
||||
</$transclude>
|
||||
|
||||
13
core/ui/PluginInfoDefaultContents.tid
Normal file
13
core/ui/PluginInfoDefaultContents.tid
Normal file
@ -0,0 +1,13 @@
|
||||
title: $:/core/ui/PluginInfo/Default/contents
|
||||
|
||||
\define lingo-base() $:/language/TiddlerInfo/Advanced/PluginInfo/
|
||||
<<lingo Hint>>
|
||||
<ul>
|
||||
<$list filter="[all[current]plugintiddlers[]sort[title]]" emptyMessage=<<lingo Empty/Hint>>>
|
||||
<li>
|
||||
<$link to={{!!title}}>
|
||||
<$view field="title"/>
|
||||
</$link>
|
||||
</li>
|
||||
</$list>
|
||||
</ul>
|
||||
9
core/ui/PluginListItemTemplate.tid
Normal file
9
core/ui/PluginListItemTemplate.tid
Normal file
@ -0,0 +1,9 @@
|
||||
title: $:/core/ui/PluginListItemTemplate
|
||||
|
||||
<div class="tc-menu-list-item">
|
||||
<$link to={{!!title}}>
|
||||
<$view field="description">
|
||||
<$view field="title"/>
|
||||
</$view>
|
||||
</$link>
|
||||
</div>
|
||||
@ -2,7 +2,11 @@ title: $:/core/ui/ViewTemplate/plugin
|
||||
tags: $:/tags/ViewTemplate
|
||||
|
||||
<$list filter="[all[current]has[plugin-type]] -[all[current]field:plugin-type[import]]">
|
||||
|
||||
{{||$:/core/ui/TiddlerInfo/Advanced/PluginInfo}}
|
||||
|
||||
<$set name="plugin-type" value={{!!plugin-type}}>
|
||||
<$set name="default-popup-state" value="yes">
|
||||
<$set name="qualified-state" value=<<qualify "$:/state/plugin-info">>>
|
||||
{{||$:/core/ui/Components/plugin-info}}
|
||||
</$set>
|
||||
</$set>
|
||||
</$set>
|
||||
</$list>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
title: $:/tags/MoreSideBar
|
||||
list: [[$:/core/ui/MoreSideBar/All]] [[$:/core/ui/MoreSideBar/Recent]] [[$:/core/ui/MoreSideBar/Tags]] [[$:/core/ui/MoreSideBar/Missing]] [[$:/core/ui/MoreSideBar/Drafts]] [[$:/core/ui/MoreSideBar/Orphans]] [[$:/core/ui/MoreSideBar/Types]] [[$:/core/ui/MoreSideBar/System]] [[$:/core/ui/MoreSideBar/Shadows]]
|
||||
list: [[$:/core/ui/MoreSideBar/All]] [[$:/core/ui/MoreSideBar/Recent]] [[$:/core/ui/MoreSideBar/Tags]] [[$:/core/ui/MoreSideBar/Missing]] [[$:/core/ui/MoreSideBar/Drafts]] [[$:/core/ui/MoreSideBar/Orphans]] [[$:/core/ui/MoreSideBar/Types]] [[$:/core/ui/MoreSideBar/System]] [[$:/core/ui/MoreSideBar/Shadows]] [[$:/core/ui/MoreSideBar/Plugins]]
|
||||
|
||||
|
||||
@ -88,11 +88,11 @@ canvas.tc-edit-bitmapeditor {
|
||||
<<background-linear-gradient "left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%">>
|
||||
}
|
||||
|
||||
.tc-more-sidebar .tc-tab-buttons button {
|
||||
.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {
|
||||
<<background-linear-gradient "left, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.1) 100%">>
|
||||
}
|
||||
|
||||
.tc-more-sidebar .tc-tab-buttons button.tc-tab-selected {
|
||||
.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button.tc-tab-selected {
|
||||
<<background-linear-gradient "left, rgba(0,0,0,0.05) 0%, rgba(255,255,255,0.05) 100%">>
|
||||
}
|
||||
|
||||
|
||||
@ -1707,7 +1707,7 @@ html body.tc-body.tc-single-tiddler-window {
|
||||
border-top: 1px solid <<colour sidebar-tab-divider>>;
|
||||
}
|
||||
|
||||
.tc-more-sidebar .tc-tab-buttons button {
|
||||
.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: <<colour sidebar-tab-background>>;
|
||||
@ -1718,7 +1718,7 @@ html body.tc-body.tc-single-tiddler-window {
|
||||
margin-bottom: inherit;
|
||||
}
|
||||
|
||||
.tc-more-sidebar .tc-tab-buttons button.tc-tab-selected {
|
||||
.tc-more-sidebar > .tc-tab-set > .tc-tab-buttons > button.tc-tab-selected {
|
||||
background-color: <<colour sidebar-tab-background-selected>>;
|
||||
border: none;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user