1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-23 13:53:15 +00:00

Replace spaces with margins in editor toolbar (#2429) (#2435)

This commit is contained in:
nameanyone 2016-05-11 10:09:54 -07:00 committed by Jeremy Ruston
parent 6ee90880df
commit 2a4a3d9fe9
3 changed files with 127 additions and 48 deletions

View File

@ -1,11 +1,30 @@
title: $:/core/ui/EditTemplate/body/editor
<$edit field="text" class="tc-edit-texteditor" placeholder={{$:/language/EditTemplate/Body/Placeholder}}>
<$set name="targetTiddler" value=<<currentTiddler>>>
<$list filter="[all[shadows+tiddlers]tag[$:/tags/EditorToolbar]!has[draft.of]]">
<$reveal type="nomatch" state=<<config-visibility-title>> text="hide" class="tc-text-editor-toolbar-item-wrapper">
<$transclude tiddler="$:/core/ui/EditTemplate/body/toolbar/button" mode="inline"/>
</$reveal>
</$list>
</$set>
</$edit>
<$edit
field="text"
class="tc-edit-texteditor"
placeholder={{$:/language/EditTemplate/Body/Placeholder}}
><$set
name="targetTiddler"
value=<<currentTiddler>>
><$list
filter="[all[shadows+tiddlers]tag[$:/tags/EditorToolbar]!has[draft.of]]"
><$reveal
type="nomatch"
state=<<config-visibility-title>>
text="hide"
class="tc-text-editor-toolbar-item-wrapper"
><$transclude
tiddler="$:/core/ui/EditTemplate/body/toolbar/button"
mode="inline"
/></$reveal></$list></$set></$edit>

View File

@ -1,9 +1,16 @@
title: $:/core/ui/EditTemplate/body/toolbar/button
\define toolbar-button-icon()
<$list filter="[all[current]!has[custom-icon]]" variable="no-custom-icon">
<$transclude tiddler={{!!icon}}/>
</$list>
<$list
filter="[all[current]!has[custom-icon]]"
variable="no-custom-icon"
><$transclude
tiddler={{!!icon}}
/></$list>
\end
\define toolbar-button-tooltip()
@ -11,37 +18,90 @@ title: $:/core/ui/EditTemplate/body/toolbar/button
\end
\define toolbar-button()
<$list filter={{!!condition}} variable="list-condition">
<$wikify name="tooltip-text" text=<<toolbar-button-tooltip>> mode="inline" output="text">
<$list filter="[all[current]!has[dropdown]]" variable="no-dropdown">
<$button class="tc-btn-invisible $(buttonClasses)$" tooltip=<<tooltip-text>>>
<span data-tw-keyboard-shortcut={{!!shortcuts}}/>
<<toolbar-button-icon>>
<$transclude tiddler=<<currentTiddler>> field="text"/>
</$button>
</$list>
<$list filter="[all[current]has[dropdown]]" variable="dropdown">
<$set name="dropdown-state" value=<<qualify "$:/state/EditorToolbarDropdown">>>
<$button popup=<<dropdown-state>> class="tc-popup-keep tc-btn-invisible $(buttonClasses)$" selectedClass="tc-selected" tooltip=<<tooltip-text>>>
<span data-tw-keyboard-shortcut={{!!shortcuts}}/>
<<toolbar-button-icon>>
<$transclude tiddler=<<currentTiddler>> field="text"/>
</$button>
<$reveal state=<<dropdown-state>> type="popup" position="below" animate="yes" tag="span">
<div class="tc-drop-down tc-popup-keep">
<$transclude tiddler={{!!dropdown}} mode="block"/>
</div>
</$reveal>
</$set>
</$list>
</$wikify>
</$list>
<$list
filter={{!!condition}}
variable="list-condition"
><$wikify
name="tooltip-text"
text=<<toolbar-button-tooltip>>
mode="inline"
output="text"
><$list
filter="[all[current]!has[dropdown]]"
variable="no-dropdown"
><$button
class="tc-btn-invisible $(buttonClasses)$"
tooltip=<<tooltip-text>>
><span
data-tw-keyboard-shortcut={{!!shortcuts}}
/><<toolbar-button-icon>><$transclude
tiddler=<<currentTiddler>>
field="text"
/></$button></$list><$list
filter="[all[current]has[dropdown]]"
variable="dropdown"
><$set
name="dropdown-state"
value=<<qualify "$:/state/EditorToolbarDropdown">>
><$button
popup=<<dropdown-state>>
class="tc-popup-keep tc-btn-invisible $(buttonClasses)$"
selectedClass="tc-selected"
tooltip=<<tooltip-text>>
><span
data-tw-keyboard-shortcut={{!!shortcuts}}
/><<toolbar-button-icon>><$transclude
tiddler=<<currentTiddler>>
field="text"
/></$button><$reveal
state=<<dropdown-state>>
type="popup"
position="below"
animate="yes"
tag="span"
><div
class="tc-drop-down tc-popup-keep"
><$transclude
tiddler={{!!dropdown}}
mode="block"
/></div></$reveal></$set></$list></$wikify></$list>
\end
\define toolbar-button-outer()
<$set name="buttonClasses" value={{!!button-classes}}>
<<toolbar-button>>
</$set>
<$set
name="buttonClasses"
value={{!!button-classes}}
><<toolbar-button>></$set>
\end
<<toolbar-button-outer>>
<<toolbar-button-outer>>

View File

@ -479,7 +479,7 @@ button svg.tc-image-button, button .tc-image-button img {
}
@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
.tc-unfold-banner {
position: static;
width: calc(100% + 59px);
@ -969,7 +969,7 @@ html body.tc-body.tc-single-tiddler-window {
*/
.tc-editor-toolbar {
margin-top: 8px;
margin-top: 8px;
}
.tc-editor-toolbar button {
@ -978,17 +978,17 @@ html body.tc-body.tc-single-tiddler-window {
fill: <<colour tiddler-controls-foreground-selected>>;
border-radius: 4px;
padding: 3px;
margin: 2px 0;
margin: 2px 0 2px 4px;
}
.tc-editor-toolbar button.tc-text-editor-toolbar-item-adjunct {
margin-left: -3px;
margin-left: 1px;
width: 1em;
border-radius: 8px;
border-radius: 8px;
}
.tc-editor-toolbar button.tc-text-editor-toolbar-item-start-group {
margin-left: 7px;
margin-left: 11px;
}
.tc-editor-toolbar button.tc-selected {
@ -1312,7 +1312,7 @@ html body.tc-body.tc-single-tiddler-window {
}
.tc-drop-down .tc-prompt {
padding: 0 14px;
padding: 0 14px;
}
.tc-drop-down .tc-chooser {