Bottom Sticky EditorToolbar

,
#1

Hello all,

So one of the things I’ve been using TW for is to keep notes whereever whenever, and often times I do that using my phone.

One of the issues I’ve run into in the past is having the editor toolbar at the top of a tiddler and having to scroll up to use it.

I’ve tried a few solutions to this, from setting a max height of the editor tiddler, to making the toolbar position:sticky at the top below the tiddler title, but now, I have a fun little new idea that I wouldn’t mind a bit of help on.

So one of the things I noticed on Reddit is their editor for comments has a bottom sticky toolbar, and I went poking around in the inspector to find out how.

I figured out the nifty way they got that to work, and I think it would be absolutely perfect for a mobile layout for TW.

If you’d like to see it in action, you can copy this bit of text below, and you’ll see it in action.

<style>
.tester-top {
  position: sticky;
  z-index: 101;
}
.tester-bot {
  bottom: 0;
  position: sticky;
  z-index: 100;
  background-color: yellow;
}
</style>

<$vars text="<tr>
<td>Goodbye</td>
</tr><tr>
<td>Goodbye</td>
</tr><tr>
<td>Goodbye</td>
</tr>">

<table style="width:100%;">
<tr>
  <th class="tester-top">Wow!</th>
</tr>
<<text>><<text>><<text>><<text>><<text>><<text>><<text>><<text>><<text>><<text>><<text>><<text>>
<tr>
  <td class="tester-bot">Goodbye</td>
</tr>
</table>

The part I’m asking for help on, is moving the editor toolbar to this bottom sticky area, as in the past I’ve noticed that the toolbar itself is a bit tricky to rearrange, at least in my experience.

I’m going to be working on this when I get the chance, but for anyone a bit more experienced, I’d love to see if you manage to get it to work before I fumble my way into getting it haha

#2

Install this package on tiddlywiki.com and see how both the view toolbar and Editor Toolbar stay in view.

If that looks good we can try and set a bottom one?

sticky-toolbars.json (2.5 KB)

2 Likes
#3

You can try out this code in a stylesheet tiddler, seems to work well enough on tiddlywiki.com

.tc-tiddler-edit-frame .tc-dropzone-editor > .tc-reveal {
   display: flex;
   flex-direction: column;
}

.tc-tiddler-edit-frame .tc-dropzone-editor .tc-editor-toolbar {
   order: 1;
   position: sticky;
   bottom: 0;
}

StickyBottomToolbar
StickyBottomToolbar723×550 64.4 KB

3 Likes
#4

This is also compatible with the package I shared.

1 Like
#5

@TW_Tones, I brought in your sitcky-toolbars json tiddlers and noticed some odd behaviors.

unfortunately the title was sticky’d but the toolbars were unaffected, I’m currently using tiddlywiki.com/empty to test things out, so let me know if I’m missing something.

@Brian_Radspinner this works fantastically! I’m going to mod it a little bit and give it the same background as the tiddler editor, just so it doesn’t look like floating blocks above the text.

.tc-tiddler-edit-frame .tc-dropzone-editor > .tc-reveal {
   display: flex;
   flex-direction: column;
}

.tc-tiddler-edit-frame .tc-dropzone-editor .tc-editor-toolbar {
   order: 1;
   position: sticky;
   bottom: 0;
   background-color: <<color tiddler-editor-background>>;
   border: solid 1px <<color tiddler-editor-border>>;
}

Edit: Strangely, I can’t seem to get it to stay on the bottom when using the preview option.

#6

I have used it on wikis with the menu bar and so some of its parameters are set for that. It works on tiddlywiki.com but the tiddler buttons go under the editor toolbar buttons, which maximises editor space.

If you adjust the top values found in $:/PSaT/sticky-toolbars/styles you adjust it to your circumstances. I used the following style tiddler on an empty.html

sticky-toolbar-styles-on-empty.json (805 Bytes)

I would like to remove the transparent background on the tiddler toolbar.

#7

Ah, I gotcha, I didn’t realize that was the case.

Something a bit troublesome with position sticky is the need for set top/bottom values. It’s actually something that was a headscratcher when I was asking JeremyRuston about using sticky tiddler titles and the menubar plugin.

It would be nice to have a tiddler field with a top height set value for the menubar for the sticky tiddler titles to reference and go off of, but that’s just me rambling off ideas. I’m still looking into making the menubar sidescrolling for multiple buttons, so I’ll have to put that idea on the back burner for now.

Anyways! Lemme know if this works as you had in mind @TW_Tones,

.tc-tiddler-preview {
  overflow: visible;
}
.tc-editor-toolbar {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -o-sticky;
	position: -ms-sticky;
	position: sticky;
	top: 45px;
	background: <<colour tiddler-editor-background>>;
    border: solid 1px <<colour tiddler-editor-border>>;
	z-index: 500;
}
.sticky-footer {
   position: sticky;
   bottom: 0;
   padding: 0 5px 5px 0;
   background: white;
	z-index: 500;
}
.tc-tiddler-title {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -o-sticky;
	position: -ms-sticky;
	position: sticky;
	top: 5px;
	background: <<colour tiddler-background>>;
	z-index: 500;
}

I’ve changed it to text/vnd.tiddlywiki to allow wikitext, such as the colour macro!

Edit: we can actually combine these together and create a sticky editortoolbar for mobile and desktop use where one is on the top and the other on the bottom using the @media query.

I’ll tinker with that right quick and post my final product in a bit.

#8

So I sort of forgot to come back and post the final product, but here is the combination of the two suggestions with some minor tweaks, lemme know if there is any improvements that can be made :grin:

<$vars sticky="position: -webkit-sticky;
	position: -moz-sticky;
	position: -o-sticky;
	position: -ms-sticky;
	position: sticky;">

@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
.tc-tiddler-preview {
  overflow: visible;
}
.tc-editor-toolbar {
	<<sticky>>
	top: 39px;
	background: <<colour tiddler-editor-background>>;
    border: solid 1px <<colour tiddler-editor-border>>;
	z-index: 500;
}
.sticky-footer {
   <<sticky>>
   bottom: 0;
   padding: 0 5px 5px 0;
   background: white;
	z-index: 500;
}
.tc-tiddler-title {
	<<sticky>>
	top: 0px;
	background: <<colour tiddler-background>>;
	z-index: 500;
}
}
@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
.tc-tiddler-edit-frame .tc-dropzone-editor > .tc-reveal {
   display: flex;
   flex-direction: column;
}
.tc-tiddler-title {
	<<sticky>>
	top: -1px;
	background: <<colour tiddler-background>>;
	z-index: 500;
}
.tc-tiddler-edit-frame .tc-dropzone-editor .tc-editor-toolbar {
   order: 1;
   <<sticky>>;
   bottom: 0;
   background-color: <<color tiddler-editor-background>>;
   border: solid 1px <<color tiddler-editor-border>>;
   margin-top: -10px;
}
}
</$vars>

Edit: One small problem I’m trying to figure out how to fix is with using flex column when using the preview option in mobile mode.

#9

This is pretty slick; thanks!

Any idea how to prevent this issue in Muuri StoryView — a gridded layout for TiddlyWiki5 ?

The titles past the first row all get offset weirdly…

image
image1530×756 160 KB

#10

Other than maybe it is tied to the top value of 40px, you can try and set it to 0px but if that doesnt work, removing the tiddler title css might remove the issue, though you wont have sticky titles.

You can use the browser inspect tool by right clicking the tiddlers and see if you can tinker with it to make it work, sadly Im away from my pc, so I can’t test it atm.

#11

The sticky view toolbar was made for standard tiddlywiki not the advanced layouts of Muuri or MCL which redefine a lot about the presentation. It would be wise to look into the way these layouts handle their titles and develop a seperate solution.

If you do so please share back.

#12

I would be willing to donate USD 50 to the Open Collective TW Core for a solution to this problem :slight_smile:

2 Likes
#13

Perhaps define it a little more such as which features, which layouts, what should be customisable etc…

#14

Fair enough @TW_Tones; pretty simply: sticky titles working reliably with this plugin would fulfill my needs. The editor toolbar sticky above is a nice to have - and probably useful to some, but as I am a heavy Streams user, I rarely lose track of the editor toolbar. I would be grateful for a relatively simple explanation how that was solved.

It may sound like a simplish item to solve for USD 50, but software development is not cheap and TW core is something I really want to contribute towards…

How about this break down then:

  • Sticky titles working reliably with this plugin using multiple column counts for USD 20
  • another USD 20 if the sticky editor toolbar also works with the muuri plugin
  • another USD 10 for a brief technical write up how the problem was solved

The donation will be made through TiddlyWikiDotOrg - Open Collective as custom donation (I don’t know that it can be directed at TW Core if not a monthly donation)

1 Like
#15

I suggest also specifying whether the sticky editor toolbar also needs to work with the editor preview activated.

#16

I would be willing to add 20 USD to the collective for a bottom sticky toolbar that works with the perview open. I’ve tinkered with it and unfortunately I cannot get it to work with my level of TW experience.

Ideally I aim to have something akin to JD’s mobile app, but with the sticky bottom editor-toolbar just above the button bottom bar in the mobile layout

1 Like
#17

Can we post our solutions on this thread or do you want it in your inbox ?

#18

This thread is fine, yes…
Cheers

#19

The reason why this happen is because all the tiddlers are translated, and when an element is translated, it define a new coordinate system so the sticky element position itself relative to the element rather than relative to the scrollable parent - the viewport: html - 'transform3d' not working with position: fixed children - Stack Overflow

The solution would be to use javascript to offset the sticky title by the amount translated on Y, e.g:

Your plugin seem to add a translate3D to the tiddlers so you could fix the sticky title issue by setting the Y translate in CSS variables in order to be reused in our css :

<div class="tc-tiddler-frame .." data-tiddler-title=".." style="left: 0px; top: 0px; transform: translate3d(574.333px, 371.833px, 0px); touch-action: none; user-select: none;">

Would become

<div class="tc-tiddler-frame .." data-tiddler-title=".." style="left: 0px; top: 0px; touch-action: none; user-select: none;--transform-X:574.333px;--transform-Y:371.833px;--transform-Z:0px">

Then you could write in a stylesheet

.tc-tiddler-frame{
transform: translate3d(var(--transform-X), var(--transform-Y), var(--transform-Z));
}

.tc-tiddler-title{
position:sticky;
top:calc(var(--transform-Y) * -1);
z-index:1000;
background:<<color background>>;

}

I’ll post my solution if I manage to do that or find an alternative.

1 Like
#20

While this isn’t something that might help with my own toolbar bounty or the muuri fix request, I did feel like sharing in case it helps anyone.

I borrowed the code presented earlier here, and using the same trick for using css depending on if the sidebar is open, I created this:

\define if-sticky-title(text)
<$reveal state="$:/themes/tiddlywiki/vanilla/options/stickytitles" type="match" text="yes" default="no">$text$</$reveal>
\end

\define if-no-sticky-title(text)
<$reveal state="$:/themes/tiddlywiki/vanilla/options/stickytitles" type="nomatch" text="yes" default="no">$text$</$reveal>
\end

\define position-sticky(text)
position: -webkit-sticky;
	position: -moz-sticky;
	position: -o-sticky;
	position: -ms-sticky;
	position: sticky;
\end

<<if-sticky-title """
.tc-tiddler-preview {
	overflow: visible;
}
.tc-editor-toolbar {
	top: 46px;
	<<position-sticky>>
	background: <<colour tiddler-editor-background>>;
	border: solid 1px <<colour tiddler-editor-border>>;
	z-index: 500;
}
.tc-tiddler-title {
	top: 0px;
	<<position-sticky>>
	background: <<colour tiddler-background>>;
	z-index: 500;
}
""">>

<<if-no-sticky-title """
.tc-tiddler-preview {
	overflow: visible;
}
.tc-editor-toolbar {
	top: 0px;
	<<position-sticky>>
	background: <<colour tiddler-editor-background>>;
	 border: solid 1px <<colour tiddler-editor-border>>;
	z-index: 500;
}
""">>

Which moves the sticky toolbar depending on if sticky titles is set to ‘yes’

It doesn’t solve the issue of how sticky titles act with muuri, but for those who aren’t using muuri and want the option of sticky titles or no sticky titles, this is a good option.

(Still working on moving it to the bottom without messing up the preview :sweat_smile: haha)