[tw] Re: anchor top when editing tiddler
Hello,
@Eric Shulman:
You wrote:
1) create a tiddler, e.g., "MyStyles", tagged with $:/tags/Stylesheet
2) enter the following CSS into that tiddler:
.tc-edit-texteditor, .tc-tiddler-preview-preview { max-height:80vh; overflow
-y:auto; }
I like that a lot :-)
But one question I still have.
With this solution both, editor & preview, are scrolling separately.
Without that solution they scroll together, so that I can immediately see,
what I will get with my editing on the left. But the editor bar isn't
visible in a long note.
Is it possible to combine both?
So, with this .tc-edit-texteditor, .tc-tiddler-preview-preview { max-height:
80vh; overflow-y:auto; }
But that the editor and the preview scroll together?
Thanks in advance for helping :-)
Bettina
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/4f7d4a33-fa3f-4cfa-b081-78d625c06919%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw] Re: anchor top when editing tiddler
Thanks Mat, I ended up using a subset of this and it works like a charm. I
wasn't happy with the tool bar jostling the edit box so I took that part
out as best as I could. THanks, this totally does the trick! Here is the
subset of Mat's css I used:
.tc-editor-toolbar {
position:sticky;
position: -webkit-sticky;
position: sticky;
top: 0px; /* distance to stick from top, e.g if you use top bar */
left:0;
width:100%;
font-size:.74em;
padding:0;
border:5px solid transparent;
}
On Thursday, June 22, 2017 at 4:48:51 AM UTC-10, Mat wrote:
>
> Doh! I forgot the OP question by Rich:
>
> The following adds position sticky. I added a blue outline so you can see
> it. Just remove it to... remove it.
>
> <:-)
>
> .tc-edit-tags {
> margin-bottom:12px
> }
> .tc-editor-toolbar {
> position:sticky;
> position: -webkit-sticky;
> position: sticky;
> top: 0px; /* distance to stick from top, e.g if you use top bar */
> left:0;
> width:100%;
> font-size:0;
> line-height:0;
> padding:0;
> border:5px solid transparent;
> margin-top:-11px; /* pull it up */
> outline:1px solid blue; /* remove the X to peek where it all resides */
> }
> .tc-editor-toolbar:hover {
> font-size:1em;
> border-color:white;
> background:white;
> }
> .tc-editor-toolbar button {
> display:none;
> padding:0px;
> }
> .tc-editor-toolbar:hover button {
> display:inline-block;
> }
>
>
>
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/622f973f-6c7b-453e-85c1-55c840a7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw] Re: anchor top when editing tiddler
Hi all, thanks a lot for addressing this. I am having trouble installing it. I made a tiddler called ToolbarFloat and tagged it $:/tags/Stylesheet , but don't see any changes. What else do I need to do or do differently? Thanks! On Thursday, June 22, 2017 at 7:11:12 AM UTC-10, @TiddlyTweeter wrote: > > Things that come up for me in this thread are questions like ... > > 1 - WHAT is an Editor for? > 2 - HOW should it be best displayed? > 3 - Do different types of TW (with functionally different aims) need > DIFFERENT Editor Manifestations? > > For instance, at the moment, the default editor enters the stream and when > you have edited and saved the Tiddler created it is added to the stream. It > seems to me that that behaviour is optimal for only some cases, not all. > > IMO, a FLOATED Editor that, on save also EXITS the Tiddler could be good. > This approach would serve apps well where the purpose was to add content, > but not display it as a fragment. Rather, its part of a larger project in > which the underlying plan places it appropriately. > > The work done in TiddlyMap I think is very instructive on this kind of > thing. I believe it uses adapted Modals for Editing. > > BTB, I suspect some of the layout issues would work differently if the > orientation towards what "Editing" is for were played with. > > Just thoughts. > > Best wishes > Josiah > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f0238d01-ceb6-431e-8322-dd47d9db1d2c%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw] Re: anchor top when editing tiddler
Things that come up for me in this thread are questions like ... 1 - WHAT is an Editor for? 2 - HOW should it be best displayed? 3 - Do different types of TW (with functionally different aims) need DIFFERENT Editor Manifestations? For instance, at the moment, the default editor enters the stream and when you have edited and saved the Tiddler created it is added to the stream. It seems to me that that behaviour is optimal for only some cases, not all. IMO, a FLOATED Editor that, on save also EXITS the Tiddler could be good. This approach would serve apps well where the purpose was to add content, but not display it as a fragment. Rather, its part of a larger project in which the underlying plan places it appropriately. The work done in TiddlyMap I think is very instructive on this kind of thing. I believe it uses adapted Modals for Editing. BTB, I suspect some of the layout issues would work differently if the orientation towards what "Editing" is for were played with. Just thoughts. Best wishes Josiah -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f01c9e46-c1c3-4415-a144-eb0d8e8efb0d%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw] Re: anchor top when editing tiddler
Doh! I forgot the OP question by Rich:
The following adds position sticky;
<:-)
.tc-edit-tags {
margin-bottom:12px
}
.tc-editor-toolbar {
position:sticky;
position: -webkit-sticky;
position: sticky;
top: 0px; /* distance to stick from top, e.g if you use top bar */
left:0;
width:100%;
font-size:0;
line-height:0;
padding:0;
border:5px solid transparent;
margin-top:-11px; /* pull it up */
outline:1px solid blue; /* remove the X to peek where it all resides */
}
.tc-editor-toolbar:hover {
font-size:1em;
border-color:white;
background:white;
}
.tc-editor-toolbar button {
display:none;
padding:0px;
}
.tc-editor-toolbar:hover button {
display:inline-block;
}
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/c5c4c706-f63a-4fe8-873e-f78a5e0cf5de%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw] Re: anchor top when editing tiddler
Good idea to hide the toolbar.
I made this to have it show-on-hover (or, if touch screen, show-on-tap!).
In order to have an area on which to hover, I attempted to increase the
margin above the editor field... but I fail to do so. Instead I increased
the margin below the tags field but this is of course only OK if there is
no other custom field appearing between the tags and the editor.
Other than that there is some styling applied that I think works well or
even better than in the native layout.
<:-)
tag: $:/tags/Stylesheet
.tc-edit-tags {
margin-bottom:12px
}
.tc-editor-toolbar {
position:absolute;
left:0;
width:100%;
font-size:0;
line-height:0;
padding:0;
border:5px solid transparent;
margin-top:-11px; /* pull it up */
Xoutline:1px solid blue; /* remove the X to peek where it all resides */
}
.tc-editor-toolbar:hover {
font-size:1em;
border-color:white;
background:white;
}
.tc-editor-toolbar button {
display:none;
padding:0px;
}
.tc-editor-toolbar:hover button {
display:inline-block;
}
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/ab2588be-71ef-42e2-a7d6-56f53b26528f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw] Re: anchor top when editing tiddler
Hi Thomas,
That's an interesting approach. I had to lower the toolbar 20 pixels to get
out from under my bookmarks bar. Is it supposed to "popup" as you hover
over? In my case the active toolbar pops down a few pixels. It would be
more ideal if the popping didn't appear to move at all (i.e. it 'pops' in
the same place as the original fixed toolbar).
If you are editing more than one tiddler, it may apply changes to the wrong
tiddler. It appears to want to act on the draft tiddler at the bottom of
the story river.
Thanks,
Mark
On Wednesday, June 21, 2017 at 3:06:16 PM UTC-7, Thomas Elmiger wrote:
>
> Hi Mark
>
> I have tried to fix the toolbar to the bottom via CSS. But there are
> dropdown elements that get lost this way.
>
> So now I fixed it to the top and let it pop down on hover. Seems to work
> on my desktop.
>
> I put this in a tiddler tagged $:/tags/Stylesheet
>
> .tc-editor-toolbar {
> position: fixed;
> z-index: 99;
> background-color: rgba(200,200,200,0.3);
> padding: 10px 7px 14px 7px;
> margin: 0;
> bottom: calc(100vh - 24px);
> }
>
> .tc-editor-toolbar:hover, .tc-editor-toolbar:focus {
> top: 0;
> bottom: auto;
> }
>
>
> All the best,
> Thomas
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/e5db60d7-f64b-4623-a551-709b0e225cc1%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw] Re: anchor top when editing tiddler
Hi Mark
I have tried to fix the toolbar to the bottom via CSS. But there are
dropdown elements that get lost this way.
So now I fixed it to the top and let it pop down on hover. Seems to work on
my desktop.
I put this in a tiddler tagged $:/tags/Stylesheet
.tc-editor-toolbar {
position: fixed;
z-index: 99;
background-color: rgba(200,200,200,0.3);
padding: 10px 7px 14px 7px;
margin: 0;
bottom: calc(100vh - 24px);
}
.tc-editor-toolbar:hover, .tc-editor-toolbar:focus {
top: 0;
bottom: auto;
}
All the best,
Thomas
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/829e568f-a023-4d3f-a7b2-f0952fc86c78%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw] Re: anchor top when editing tiddler
That's great -- maybe even the way it should be by default.
I don't suppose there's any way to make the toolbar sit at the BOTTOM of
the editor? All the "action" in editing occurs there if you work from top
to bottom. It appeared to me that the only way to change it was in
factory.js, but maybe there is some CSS magic that would do?
Thanks!
Mark
On Tuesday, June 20, 2017 at 8:44:53 PM UTC-7, Eric Shulman wrote:
>
> On Monday, June 19, 2017 at 6:31:00 PM UTC-7, Rich wrote:
>>
>> I often times find myself writing long sets of notes, say to a book, and
>> the editing toolbar gets far away. Is there a way for the editing toolbar
>> to float, so that as I scroll down the tool bar stays within view. I know
>> the easier answer is to break up the text into smaller tiddlers, but That
>> is not how I work when taking book notes. I might break it up after I take
>> the notes, but until I get everything in, I don't always know what goes
>> where. Thus the long notes just to get the thing in TW5 are a necessary
>> part of my workflow.
>>
>
> Perhaps instead of making the toolbar float, you could limit the length of
> the edit/preview panels and make them scrollable, so that the toolbar that
> sits above them won't scroll out of view even when you scroll the content.
> It's not quite the same as what you were after, but it still may be a
> workflow improvement nonetheless.
>
> Try this:
>
> 1) create a tiddler, e.g., "MyStyles", tagged with $:/tags/Stylesheet
> 2) enter the following CSS into that tiddler:
>
> .tc-edit-texteditor, .tc-tiddler-preview-preview { max-height:80vh;
> overflow-y:auto; }
>
> Let me know how it goes...
>
> enjoy,
> -e
> Eric Shulman
> TiddlyTools.com: "Small Tools for Big Ideas!" (tm)
> InsideTiddlyWiki: The Missing Manuals
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/94dff677-59a9-4d61-9faa-54eba4871aaf%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw] Re: anchor top when editing tiddler
Eric, even limiting the size of the edit area, if he is using the preview the body of the tiddler will be longer than the screen -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/77ea1d67-740c-4c13-b99c-982e6ff4c57b%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw] Re: anchor top when editing tiddler
Oh, you have included the preview container too. Then it's fine I thing -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/c3c05309-9363-4739-9f2a-9cf6aa7785ae%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw] Re: anchor top when editing tiddler
On Monday, June 19, 2017 at 6:31:00 PM UTC-7, Rich wrote:
>
> I often times find myself writing long sets of notes, say to a book, and
> the editing toolbar gets far away. Is there a way for the editing toolbar
> to float, so that as I scroll down the tool bar stays within view. I know
> the easier answer is to break up the text into smaller tiddlers, but That
> is not how I work when taking book notes. I might break it up after I take
> the notes, but until I get everything in, I don't always know what goes
> where. Thus the long notes just to get the thing in TW5 are a necessary
> part of my workflow.
>
Perhaps instead of making the toolbar float, you could limit the length of
the edit/preview panels and make them scrollable, so that the toolbar that
sits above them won't scroll out of view even when you scroll the content.
It's not quite the same as what you were after, but it still may be a
workflow improvement nonetheless.
Try this:
1) create a tiddler, e.g., "MyStyles", tagged with $:/tags/Stylesheet
2) enter the following CSS into that tiddler:
.tc-edit-texteditor, .tc-tiddler-preview-preview { max-height:80vh; overflow
-y:auto; }
Let me know how it goes...
enjoy,
-e
Eric Shulman
TiddlyTools.com: "Small Tools for Big Ideas!" (tm)
InsideTiddlyWiki: The Missing Manuals
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/1b21230e-3c7c-41b4-9977-bc6603c7dc0f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
[tw] Re: anchor top when editing tiddler
THanks Ton, Unfortunately, I rely on the preview mode extensively when writing, so I don't think this will work for me, and I don't have the coding skills to try and work around it. On Monday, June 19, 2017 at 7:57:00 PM UTC-10, Ton Gerner wrote: > > Hi Rich, > > See > https://github.com/Jermolene/TiddlyWiki5/issues/2748#issuecomment-301750938 > and note that a sticky editor toolbar does *not* work correctly in preview > mode. > > Cheers, > > Ton > > > On Tuesday, June 20, 2017 at 3:31:00 AM UTC+2, Rich wrote: >> >> I often times find myself writing long sets of notes, say to a book, and >> the editing toolbar gets far away. Is there a way for the editing toolbar >> to float, so that as I scroll down the tool bar stays within view. I know >> the easier answer is to break up the text into smaller tiddlers, but That >> is not how I work when taking book notes. I might break it up after I take >> the notes, but until I get everything in, I don't always know what goes >> where. Thus the long notes just to get the thing in TW5 are a necessary >> part of my workflow. Any help on this would be greatly appreciated. >> Thanks, >> Rich >> > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/49b55d53-dcad-462f-8346-93e5dc94517f%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
[tw] Re: anchor top when editing tiddler
Hi Rich, See https://github.com/Jermolene/TiddlyWiki5/issues/2748#issuecomment-301750938 and note that a sticky editor toolbar does *not* work correctly in preview mode. Cheers, Ton On Tuesday, June 20, 2017 at 3:31:00 AM UTC+2, Rich wrote: > > I often times find myself writing long sets of notes, say to a book, and > the editing toolbar gets far away. Is there a way for the editing toolbar > to float, so that as I scroll down the tool bar stays within view. I know > the easier answer is to break up the text into smaller tiddlers, but That > is not how I work when taking book notes. I might break it up after I take > the notes, but until I get everything in, I don't always know what goes > where. Thus the long notes just to get the thing in TW5 are a necessary > part of my workflow. Any help on this would be greatly appreciated. > Thanks, > Rich > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscr...@googlegroups.com. To post to this group, send email to tiddlywiki@googlegroups.com. Visit this group at https://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9ca5a2ef-85d6-4a32-854e-0354eb120768%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
