1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-02-10 16:10:02 +00:00

move styles for editor and preview into stylesheet

This commit is contained in:
BurningTreeC 2024-11-10 15:51:43 +01:00
parent 91af04dc3c
commit 936df822c6
4 changed files with 18 additions and 24 deletions

View File

@ -8,14 +8,6 @@ title: $:/core/ui/EditTemplate/body/default
\function get.tc-tiddler-preview-preview.class() tc-tiddler-preview-preview [<identifier>addprefix[tc-tiddler-preview-preview-identified-]] +[join[ ]]
\function get.preview.width() [<sidebarWidthTiddler>get[text]]
\function get.style.grid-template-columns()
[<get.edit-preview-state>!match[yes]then[1fr]]
:else[<sidebarWidthTiddler>is[tiddler]then[calc(100% - ]addsuffix<get.preview.width>addsuffix[) ]addsuffix[calc(]addsuffix<get.preview.width>addsuffix[)]]
:else[[repeat(2, minmax(0px, 1fr))]]
\end
\function get.slider.condition() [<get.edit-preview-state>match[yes]] :else[[no]]
\define config-visibility-title()
@ -28,8 +20,7 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
\procedure tp-tiddler-editor-preview()
<div
class={{{ [<get.edit-preview-state>match[yes]then[tc-tiddler-preview]else[tc-tiddler-preview-hidden]] [[tc-tiddler-editor]] +[join[ ]] }}}
style.grid-template-columns=<<get.style.grid-template-columns>>>
class={{{ [<get.edit-preview-state>match[yes]then[tc-tiddler-preview]else[tc-tiddler-preview-hidden]] [<get.edit-preview-state>match[yes]then[tc-tiddler-preview-identified-]addsuffix<identifier>] [[tc-tiddler-editor]] +[join[ ]] }}}>
<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>

View File

@ -195,7 +195,7 @@ title: $:/core/procedures/sidebar-resizer
storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<storyMinWidthTiddler>!is[blank]is[missing]then<get.left.minwidth>] :else[<get.theme.metric storyminwidth>] }}}
storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>] }}}
sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarMinWidthTiddler>!is[blank]is[missing]then<get.right.minwidth>] :else[<get.theme.metric sidebarminwidth>] }}}
storyLeftValue={{{ [<storyLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyLeftTiddler>!is[blank]is[missing]then<get.sidebar.minwidth>] :else[<get.theme.metric storyleft>] }}}
storyLeftValue={{{ [<storyLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyLeftTiddler>!is[blank]is[missing]then<get.story.left>] :else[<get.theme.metric storyleft>] }}}
storyLeft={{{ [convert.to.pixels.locally<storyLeftValue>] }}}
sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}}
storySidebarOffset={{{ [convert.to.pixels.locally<get.story-sidebar.overlap>] :else[[0]] }}}
@ -353,7 +353,7 @@ title: $:/core/procedures/sidebar-resizer
<% endif %>
\end
\function get.resizer.class() tc-sidebar-resizer [<get.resizer.state>is[tiddler]then[tc-resizer-active]] [<resizer.class>] [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[tc-sidebar-resizer-]] +[join[ ]]
\function get.resizer.class() tc-sidebar-resizer [<get.resizer.state>is[tiddler]then[tc-resizer-active]] [<resizer.class>] [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[tc-sidebar-resizer-identified-]] +[join[ ]]
\function get.active.class(class) [<class>] [<resizer.class>] [<eventCatcherClass>] [<get.resizer.state>is[tiddler]then[tc-resizer-active]] +[join[ ]]
@ -520,9 +520,6 @@ title: $:/core/procedures/sidebar-resizer
<div
class=<<get.resizer.class>>
style.position=<<get.resizer.style.position>>
style.left=<<get.resizer.style.left>>
style.width=<<get.resizer.style.width>>
/>
<% endif %>

View File

@ -4,11 +4,7 @@ code-body: yes
\procedure editor-preview-slider(class:"",width:"100%",minHeight:"10px",template:"",mode:"block",sliderWidth:"12px",padding:"12px",sliderCondition:"yes",leftMinWidth:"0%",rightMinWidth:"0%")
\import $:/core/procedures/sidebar-resizer
\function get.resizer.style.position() absolute
\function get.template-right.width() [<sidebarWidthTiddler>get[text]] :else[[50%]]
\function get.resizer.style.left() [[calc(100% - ]addsuffix<get.template-right.width>addsuffix[ - ]addsuffix<get.resizer.style.width>addsuffix[)]]
\function get.resizer.style.width() [<sliderWidth>]
\function set.throttling() no
\function set.throttling() yes
\function get.template.left()
\function get.preview.slider.class() [<class>]
\function get.left.minwidth() [<leftMinWidth>]
@ -91,7 +87,3 @@ code-body: yes
</div>
\end
\procedure table-slider()
\end

View File

@ -177,12 +177,26 @@ code-body: yes
min-width: 0px;
}
div[class*="tc-sidebar-resizer-identified-"]:not(.tc-main-sidebar-resizer) {
position: absolute;
left: calc(50% - <<get.theme.metric previewsliderwidth>>);
width: <<get.theme.metric previewsliderwidth>>;
}
<$list filter="[all[tiddlers]prefix[$:/state/resizer/previewwidth-]]" variable="previewWidthTiddler">
<$let
identifier={{{ [<previewWidthTiddler>removeprefix[$:/state/resizer/previewwidth-]] }}}
width={{{ [<previewWidthTiddler>get[text]] }}}>
.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview.tc-tiddler-preview-identified-<<identifier>> {
grid-template-columns: calc(100% - <<width>>) <<width>>;
}
.tc-sidebar-resizer.tc-sidebar-resizer-identified-<<identifier>> {
left: calc(100% - <<width>> - <<get.theme.metric previewsliderwidth>>);
}
<%if [<width>compare:number:lteq[1]] %>
.tc-tiddler-preview-preview-identified-<<identifier>> {