Improve plugin tab layout

It’s still a bit of a mess, and the vertical alignment isn’t working
properly
This commit is contained in:
Jermolene 2014-08-08 10:01:21 +01:00
parent d01efe8698
commit bd92dc3692
2 changed files with 45 additions and 33 deletions

View File

@ -14,23 +14,10 @@ $(currentTiddler)$/icon
\end
\define plugin-table(type)
<$set name="qualified-state" value=<<qualify "$:/state/plugin-info">>>
<table>
<tbody>
<tr>
<th>
&nbsp;
</th>
<th>
<<lingo Fields/Description>>
</th>
<th>
<<lingo Fields/Version>>
</th>
</tr>
<$list filter="[!has[draft.of]plugin-type[$type$]sort[description]]">
<$set name="popup-state" value=<<popup-state-macro>>>
<tr>
<td>
<div class="tw-plugin-info">
<div class="tw-plugin-info-dropdown-button">
<$reveal type="nomatch" state=<<popup-state>> text="yes">
<$button class="btn-invisible btn-dropdown" set=<<popup-state>> setTo="yes">
{{$:/core/images/right-arrow}}
@ -41,34 +28,42 @@ $(currentTiddler)$/icon
{{$:/core/images/down-arrow}}
</$button>
</$reveal>
</td>
<td>
<$link to={{!!title}}>
<$transclude tiddler=<<currentTiddler>> subtiddler=<<plugin-icon-title>>/>
''<$view field="description"><$view field="title"/></$view>''<br>
<$view field="title"/>
</$link>
</td>
<td>
</div>
<$link to={{!!title}} class="tw-plugin-info-link">
<div>
<div style="display:inline-block;">
<$transclude tiddler=<<currentTiddler>> subtiddler=<<plugin-icon-title>>>
<$transclude tiddler="$:/core/images/plugin-generic-$type$"/>
</$transclude>
</div>
<div style="display:inline-block;">
<div>
''<$view field="description"><$view field="title"/></$view>''
</div>
<div>
<$view field="title"/><br>
</div>
<div>
<$view field="version"/>
</td>
</tr>
<tr>
<td colspan="3">
</div>
</div>
</div>
</$link>
<$reveal type="match" text="yes" state=<<popup-state>>>
<$reveal type="nomatch" text="" state="!!list">
<div class="tw-plugin-info-dropdown">
<$macrocall $name="tabs" state=<<tabs-state-macro>> tabsList={{!!list}} default="readme" template="$:/core/ui/PluginInfo"/>
</div>
</$reveal>
<$reveal type="match" text="" state="!!list">
<$transclude tiddler="$:/core/ui/TiddlerInfo/Advanced/PluginInfo"/>
<div class="tw-plugin-info-dropdown">
No information provided
</div>
</$reveal>
</$reveal>
</td>
</tr>
</div>
</$set>
</$list>
</tbody>
</table>
</$set>
\end

View File

@ -1238,6 +1238,23 @@ canvas.tw-edit-bitmapeditor {
width: 100%;
}
.tw-plugin-info {
vertical-align: middle;
border: 1px solid <<colour muted-foreground>>;
margin: 1em 0 1em 0;
padding: 8px;
}
.tw-plugin-info img, .tw-plugin-info svg {
width: 3em;
height: 3em;
}
.tw-plugin-info .tw-plugin-info-dropdown-button,
.tw-plugin-info .tw-tiddlylink {
display: inline-block;
}
/*
** Message boxes
*/