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
print-window-tiddler
Jermolene 2016-10-18 09:23:19 +01:00
rodzic 87fa7f972c
commit 7a6d7e2a15
13 zmienionych plików z 159 dodań i 94 usunięć

Wyświetl plik

@ -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>>/>

Wyświetl plik

@ -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

Wyświetl plik

@ -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">>

Wyświetl plik

@ -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}}/>

Wyświetl plik

@ -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}}>>/>

Wyświetl plik

@ -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}}/>

Wyświetl plik

@ -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>

Wyświetl plik

@ -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>

Wyświetl plik

@ -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>

Wyświetl plik

@ -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>

Wyświetl plik

@ -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]]

Wyświetl plik

@ -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%">>
}

Wyświetl plik

@ -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;
}