From b3032d452f5b811d631b2eb257a4db04fd02af3c Mon Sep 17 00:00:00 2001 From: Jermolene Date: Sun, 11 May 2014 18:47:14 +0100 Subject: [PATCH] Refactor vertical tabs for reusability MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In practice, if you look at TabsMacro you’ll see that the width of the tab content is wrong, and will usually overflow the container. Next step is to fix that by using flexbox… --- core/ui/PageMacros.tid | 10 +-- core/ui/SideBar/More.tid | 2 +- .../tw5.com/tiddlers/macros/TabsMacro.tid | 8 +- themes/tiddlywiki/vanilla/base.tid | 79 +++++++++---------- 4 files changed, 49 insertions(+), 50 deletions(-) diff --git a/core/ui/PageMacros.tid b/core/ui/PageMacros.tid index 1b624a25b..56d18f782 100644 --- a/core/ui/PageMacros.tid +++ b/core/ui/PageMacros.tid @@ -8,8 +8,9 @@ title: $:/core/ui/PageMacros <> \end -\define tabs(tabsList,default,state:"$:/state/tab") -
+\define tabs(tabsList,default,state:"$:/state/tab",class) +
+
<$list filter="$tabsList$" variable="currentTab"> <$button set=<> setTo=<> default="$default$" selectedClass="tw-tab-selected"> <$transclude tiddler=<> field="caption"> @@ -17,15 +18,14 @@ title: $:/core/ui/PageMacros -
-
-
+
<$list filter="$tabsList$" variable="currentTab"> <$reveal type="match" state=<> text=<> default="$default$"> <$transclude tiddler=<> mode="block"/>
+
\end \define wikitext-example(src) diff --git a/core/ui/SideBar/More.tid b/core/ui/SideBar/More.tid index 53362c478..29c212bd7 100644 --- a/core/ui/SideBar/More.tid +++ b/core/ui/SideBar/More.tid @@ -3,5 +3,5 @@ tags: $:/tags/SideBar caption: {{$:/language/SideBar/More/Caption}}
-<> +<>
diff --git a/editions/tw5.com/tiddlers/macros/TabsMacro.tid b/editions/tw5.com/tiddlers/macros/TabsMacro.tid index d0999659f..9da4f78ca 100644 --- a/editions/tw5.com/tiddlers/macros/TabsMacro.tid +++ b/editions/tw5.com/tiddlers/macros/TabsMacro.tid @@ -1,17 +1,20 @@ created: 20131228162203521 -modified: 20140225223527667 +modified: 20140509223527667 tags: macros title: TabsMacro type: text/vnd.tiddlywiki The tabs macro displays a list of tiddlers as a tab control. The user can switch between tabs by clicking on them. The tabs are labelled with the title of the corresponding tiddler, unless there is a `caption` field present in which case it is used instead. +By default the tab control arranges the tabs horizontally with the content underneath. You can also choose to have the tabs arranged vertically by passing the class `tw-vertical`. + ! Parameters |!Position |!Name |!Description |!Default | |1st |tabsList |Filter giving the tiddlers to be displayed | | |2nd |default |Name of the tiddler containing the default tab | | |3rd |state |String to distinguish multiple tabs within the same tiddler (use of the system tiddler prefix is recommended) |''$:/state/tab'' | +|4th |class |Additional CSS classes for the three wrappers DIV of the tab | | ! Examples @@ -23,5 +26,4 @@ Here is an example of the tabs macro: <> -<> - +<> diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid index bd13ea888..6af8f06ca 100644 --- a/themes/tiddlywiki/vanilla/base.tid +++ b/themes/tiddlywiki/vanilla/base.tid @@ -959,7 +959,8 @@ canvas.tw-edit-bitmapeditor { ** Tabs */ -.tw-tab-set { +.tw-tab-set.tw-vertical { + white-space: nowrap; } .tw-tab-buttons { @@ -968,6 +969,15 @@ canvas.tw-edit-bitmapeditor { margin-bottom: -1px; } +.tw-tab-buttons.tw-vertical { + display: inline-block; + padding-top: inherit; + vertical-align: top; + text-align: right; + margin-bottom: inherit; + margin-right: -1px; +} + .tw-tab-buttons button.tw-tab-selected { color: <>; background-color: <>; @@ -978,9 +988,6 @@ canvas.tw-edit-bitmapeditor { .tw-tab-buttons button { color: <>; - padding: 2px 4px 4px 4px; - margin-left: 2px; - margin-right: 2px; font-weight: 300; border: none; background: inherit; @@ -990,16 +997,40 @@ canvas.tw-edit-bitmapeditor { border-right: 1px solid <>; } +.tw-tab-buttons.tw-vertical button { + display: block; + width: 100%; + margin-top: 3px; + text-align: right; + background-color: <>; + border-left: 1px solid <>; + border-bottom: 1px solid <>; + border-right: none; +} + +.tw-tab-buttons.tw-vertical button.tw-tab-selected { + background-color: <>; + border-right: 1px solid <>; +} + .tw-tab-divider { border-top: 1px solid <>; } +.tw-tab-divider.tw-vertical { + display: none; +} + .tw-tab-content { padding-top: 14px; } -.tw-sidebar-lists .tw-tab-buttons { - padding-top: 15px; +.tw-tab-content.tw-vertical { + white-space: normal; + display: inline-block; + vertical-align: top; + padding-left: 14px; + border-left: 1px solid <>; } .tw-sidebar-lists .tw-tab-buttons button.tw-tab-selected { @@ -1022,47 +1053,13 @@ canvas.tw-edit-bitmapeditor { border-top: 1px solid <>; } -.tw-more-sidebar { - white-space: nowrap; -} - -@media (min-width: 770px) { - .tw-more-sidebar { - margin-left: -14px; - } -} - -.tw-more-sidebar .tw-tab-buttons { - display: inline-block; - vertical-align: top; - text-align: right; - padding-top: 0; - padding-left: 0; -} - -.tw-more-sidebar .tw-tab-buttons button { - display: block; - width: 100%; - text-align: right; -} - -.tw-sidebar-lists .tw-more-sidebar .tw-tab-divider { - display: none; -} - -.tw-more-sidebar .tw-tab-content { - display: inline-block; - vertical-align: top; - padding-top: 0; - padding-left: 14px; -} - .tw-more-sidebar .tw-tab-buttons button { background-color: <>; border-top: none; border-left: none; border-bottom: none; border-right: 1px solid #ccc; + margin-bottom: inherit; } .tw-more-sidebar .tw-tab-buttons button.tw-tab-selected {