Side Preview?

[amreus]

This is related to Mat's SideEditor, but I thought not on-topic so I started a new topic.

So would it be possible to make a "Side Preview" plugin? So instead of floating a side editor, the normal editor is used but a small (tiny?), live preview window is floated over the sidebar when the tiddler is being edited? Sort of like the preview when you hover over the Windows taskbar.

[Saq Imtiaz]

Are you familiar with the preview option in the default editor?

[Mat]

I'm thinking it might be possible to split out the editor preview div outside of the tiddler frame.

Not sure how to make it appear smaller. I doubt it's possible to merely "shrink evertyhing with 50%" and get a representative visual result.

<:-)

[_Phi / hpx1]

a quick hack by overruling the css :

/* =========== text editor size ===========*/

.tc-tiddler-preview {
    overflow: visible; /* to make the preview-preview on top of the sidebar */
}
.tc-edit-texteditor {
    max-height: 55vh; /* max height of text editor */
    overflow-y: auto;
}
.tc-tiddler-frame .tc-tiddler-preview .tc-edit-texteditor {
    width: 480px;  /* or try another value 50%-54% */
      border: 1px solid #000000;
}
.tc-edit-texteditor tc-edit-texteditor-body {
    height: 275px;
}
/*======    the actual preview block on the right =======*/
! .tc-tiddler-preview-preview {
  transform: scale(0.8); /* definbes the zoom scale */
    float: right;
    position: absolute;  /* changed from relative */
    top : 178px; /* tweak this ! try 246 px or 29% ; relative -27.5rem*/
    left :  66% ; /* if relative 30% */
    overflow : auto;
    width: 80%;
    max-width : 720px;
    max-height: 463px;
    border: 1px solid #000000;
    margin: 4px 0px 3px 3px;
    padding: 3px 3px 3px 3px;
    z-index: 1000;        
    background : white; /* change to your theme */
}

save this in a tiddler with tag `$:/tags/StyleSheet` and type to `text/css`

it should make the preview block look as a `floating` window on top of the sidebar.

the values should be tweaked depending on your theme, I'm just fiddling with css, I didn't try to make this work in all situations.

_Ph

On Tuesday, July 14, 2020 at 11:28:38 PM UTC+2, amreus wrote:

[Jeffrey Denison]

Can somebody tell me how to turn off receiving daily emails from the
group? I prefer to read them on the website. I'm getting flooded with
messages. jd

> *the values should be tweaked depending on your theme*, I'm just fiddling

> with css, I didn't try to make this work in all situations.
>
> _Ph
>
>
>
> On Tuesday, July 14, 2020 at 11:28:38 PM UTC+2, amreus wrote:
>>
>> This is related to Mat's SideEditor, but I thought not on-topic so I
>> started a new topic.
>>
>> So would it be possible to make a "Side Preview" plugin? So instead of
>> floating a side editor, the normal editor is used but a small (tiny?),
>> live
>> preview window is floated over the sidebar when the tiddler is being
>> edited? Sort of like the preview when you hover over the Windows taskbar.
>>
>>
>>
>>
>>
>

> --
> 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+...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/tiddlywiki/5c0719cc-22ff-4937-8ae5-d461e49cc1d4o%40googlegroups.com.
>

[Birthe C]

Looking at the website, you will see two buttons at the upper right corner. Click on your  settings, change your preferences for mail.

And please, this was a change of subject for this thread, sorry!

Birthe

[amreus]

Yes.

[_Phi / hpx1]

So it's definitely possible with css, see images and code below. I didn't try to calc the sizes, so you'll need to tinker with the values a bit (adjust top/left/width/height according to the zoom scale you choose).

the "side preview" with small zoom :

and the variant that I use : bigger preview & shadows to fit my theme :

the CSS code

/* ========== the text editor (on the left) ===========*/
.tc-tiddler-preview {
    overflow: visible; /* block preview will overlap the sidebar */
}
.tc-editor-toolbar {
    margin-top: 2px;
    width: 80%; /* reduced toolbar width for the preview block */
}
.tc-edit-texteditor {
    max-height: 55vh;
    overflow-y: auto;
}
.tc-tiddler-frame .tc-tiddler-preview .tc-edit-texteditor {
    width: 620px;  /* width of the editor block on the left*/
    border: 1px solid <<colour tiddler-editor-border>>;
}
.tc-edit-texteditor tc-edit-texteditor-body {
    height: 275px;
}
.tc-tiddler-frame .tc-edit-texteditor {
    margin: 1px 0 1px 0;
}
/*====== the preview block on the right =======*/
.tc-tiddler-preview-preview {
    transform: scale(0.62);/* defines the zoom scale */
    float: right;
    position: absolute;
    top : 9em;  /* sets where the preview appears */
    left : 550px; /* setswhere the preview appears */
    overflow-x: auto;
    overflow-y:auto;
    width: 100%;
    height:100%;
    max-width : 500px;  
    max-height: 560px;
    margin: 4px 0px 3px 3px;
    padding: 3px 16px 3px 16px;
    z-index: 1000;  
     border: 1px solid <<colour table-border>>;
    background : <<colour background>>;
}

On Tuesday, July 14, 2020 at 11:28:38 PM UTC+2, amreus wrote:

[amreus]

Thank you for taking your time to create this.

I have not been able to get it to work. 

Is this the correct way to use?

1. Create a new tiddler, and paste in the css text.
2. Add a tag to the new tiddler of  $:/tags/Stylesheet

Is there some step I am missing? I start with a new (5.1.22) empty.html to avoid possible interference and still see nothing.  Also there is a recent topic of floating toolbar buttons which also does not appear to do anything for me.

Thanks again.

[_Phi / hpx1]

yes, that looks correct. Its working for me on an empty.html tiddlywiki, so I can only suggest some troubleshooting steps :

• maybe double check the tag $:/tags/Stylesheet  (no trailing space) ?
  
• make sure the tiddler type is default (click the trash con near the `type`) and save your tiddler first. The, open/edit a tiddler to check if it works.
• try to save the wiki then refresh (although it shouldn't be necessary).
• maybe run it under TiddlyDesktop to confirm that it's not related to your browser settings.

good luck

[amreus]

Yeah I double-checked everything you mentioned.  I can't get it to work in Firefox & timimi, nor in TiddlyDesktop. Both using empty.html v 5.1.22. It's odd.  I'll keep digging although I don't know exactly where to look at the moment.

Thanks.

[amreus]

Oh geez I just realized I need to have the built-in Preview (eye) enabled..  lol. 

[TW Tones]

Amerus,

If you are using a multi-screen laptop/desktop the open in new window button does display the content of a tiddler, but only the body part. I have made two new open in new window buttons, just in a beta state now that I have attached that may be another approach to the functionality you are after, drop these on tiddlywiki.com to see how it works.

Regards

Tony