1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 10:07:19 +00:00

Add a top-left and top-right menu

This commit is contained in:
Jermolene 2014-03-25 21:54:06 +00:00
parent 7dede861e1
commit 80b65b1651
9 changed files with 57 additions and 6 deletions

View File

@ -0,0 +1,4 @@
title: $:/core/images/home-button
tags: $:/tags/Image
<svg class="tw-image-home-button tw-image-button" viewBox="81 513 64 54" width="22pt" height="22pt"><g><path d="M 97.04536 522.62083 L 81.364685 531.49067 L 87.85863 531.49067 L 87.85863 566.9699 L 107.49902 566.9699 L 107.49902 552.99265 L 117.95268 552.99265 L 117.95268 566.9699 L 137.59307 566.9699 L 137.59307 531.49067 L 144.086885 531.49067 L 112.72591 513.751 L 107.49902 516.70758 L 107.49902 513.751 L 97.04536 513.751 Z M 94.669443 534.17844 L 103.222493 534.17844 L 103.222493 545.19854 L 94.669443 545.19854 Z M 108.449266 534.17844 L 117.002435 534.17844 L 117.002435 545.19854 L 108.449266 545.19854 Z M 122.387575 534.17844 L 130.9405 534.17844 L 130.9405 545.19854 L 122.387575 545.19854 Z"/></g></svg>

View File

@ -0,0 +1,4 @@
title: $:/core/images/menu-button
tags: $:/tags/Image
<svg class="tw-image-menu-button tw-image-button" viewBox="216 585 63 45" width="22pt" height="22pt"><g><path d="M 274.5 585 L 229.5 585 C 227.01472 585 225 587.01472 225 589.5 L 225 589.5 C 225 591.98528 227.01472 594 229.5 594 L 274.5 594 C 276.98528 594 279 591.98528 279 589.5 L 279 589.5 C 279 587.01472 276.98528 585 274.5 585 Z"/><path d="M 274.5 603 L 229.5 603 C 227.01472 603 225 605.01472 225 607.5 L 225 607.5 C 225 609.98528 227.01472 612 229.5 612 L 274.5 612 C 276.98528 612 279 609.98528 279 607.5 L 279 607.5 C 279 605.01472 276.98528 603 274.5 603 Z"/><path d="M 274.5 621 L 229.5 621 C 227.01472 621 225 623.01472 225 625.5 L 225 625.5 C 225 627.9853 227.01472 630 229.5 630 L 274.5 630 C 276.98528 630 279 627.9853 279 625.5 L 279 625.5 C 279 623.01472 276.98528 621 274.5 621 Z"/></g></svg>

View File

@ -0,0 +1,6 @@
title: $:/core/ui/PageTemplate/topleftbar
tags: $:/tags/PageTemplate
<span class="tw-topbar tw-topbar-left">
<$list filter="[is[shadow]!has[draft.of]tag[$:/tags/TopLeftBar]] [!is[shadow]!has[draft.of]tag[$:/tags/TopLeftBar]] +[tag[$:/tags/TopLeftBar]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
</span>

View File

@ -0,0 +1,6 @@
title: $:/core/ui/PageTemplate/toprightbar
tags: $:/tags/PageTemplate
<span class="tw-topbar tw-topbar-right">
<$list filter="[is[shadow]!has[draft.of]tag[$:/tags/TopRightBar]] [!is[shadow]!has[draft.of]tag[$:/tags/TopRightBar]] +[tag[$:/tags/TopRightBar]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
</span>

View File

@ -0,0 +1,4 @@
title: $:/core/ui/TopBar/home
tags: $:/tags/TopLeftBar
<$button message="tw-home" class="btn-invisible">{{$:/core/images/home-button}}</$button>

View File

@ -0,0 +1,4 @@
title: $:/core/ui/TopBar/menu
tags: $:/tags/TopRightBar
<$button message="tw-new-tiddler" class="btn-invisible">{{$:/core/images/menu-button}}</$button>

View File

@ -1,3 +1,3 @@
title: $:/tags/PageTemplate
list: [[$:/core/ui/PageTemplate/sidebar]] [[$:/core/ui/PageTemplate/story]] [[$:/core/ui/PageTemplate/alerts]]
list: [[$:/core/ui/PageTemplate/sidebar]] [[$:/core/ui/PageTemplate/story]] [[$:/core/ui/PageTemplate/alerts]] [[$:/core/ui/PageTemplate/topleftbar]] [[$:/core/ui/PageTemplate/toprightbar]]

View File

@ -7,10 +7,6 @@ tags: [[$:/tags/stylesheet]]
text-shadow: 0 1px 0 <<colour sidebar-foreground-shadow>>;
}
.tw-page-controls svg {
<<transition "fill 150ms ease-in-out">>
}
.tw-tiddler-info {
<<box-shadow "inset 1px 2px 3px rgba(0,0,0,0.1)">>
}
@ -27,7 +23,7 @@ tags: [[$:/tags/stylesheet]]
}
}
.tw-tiddler-controls button svg {
.tw-page-controls button svg, .tw-tiddler-controls button svg, .tw-topbar button svg {
<<transition "fill 150ms ease-in-out">>
}

View File

@ -316,6 +316,33 @@ a.tw-tiddlylink-external:hover {
** Page layout
*/
.tw-topbar {
position: fixed;
z-index: 1200;
}
.tw-topbar-left {
left: 0;
top: 0;
}
.tw-topbar-right {
top: 0;
right: 0;
}
.tw-topbar button {
padding: 8px;
}
.tw-topbar svg {
fill: <<colour muted-foreground>>;
}
.tw-topbar svg:hover {
fill: <<colour foreground>>;
}
.sidebar-header {
color: <<colour sidebar-foreground>>;
}