Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

  1. Index
  2. » Core development
  3. » Dev news

#61 2019-12-07 09:54:20

etc
Developer
Registered: 2010-11-11
Posts: 5,134
Website GitHub

Re: Dev news

phiw13 wrote #320388:

Those mini-tabs at the top of the page will finally disappear, maybe to be replaced with a plain link, similar to the Pages & Forms tabs?

I’m not a UX guy, will do what users prefer.

But live preview ? Hmm, something for users with large screens and wide browser windows. Can’t imagine that being useable on my MBA. But interesting nonetheless.

It would in no way be mandatory, rather an opt-in ‘live’ checkbox in preview modal.

Offline

#62 2019-12-07 21:52:21

etc
Developer
Registered: 2010-11-11
Posts: 5,134
Website GitHub

Re: Dev news

Quick’n‘dirty live article preview has landed in dev. Please test it on Pete’s demo site before it’s too late :-)

Offline

#63 2019-12-08 01:20:12

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,138
Website

Re: Dev news

Nice, it works quite smoothly, I think – both the HTML and Text preview.

By “being useable on my MBA” above I means mostly having the Preview dialog open while typing is cumbersome on smaller screens / narrower windows as the dialog window then overlaps the textarea (after moving it to the side of the window). Of course the user could make the dialog window narrow(er), but then ends up with a very narrow thingie that barely tolerates a few shorter words per line.

PS – left you a note in the GitHub thread about this:

Article not saved. [username] modified the article while you were editing it. If you’re sure, press the ‘Save’ button once more.

PS 2 – there should be a (non-breaking) space between checkbox and label I think.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#64 2019-12-08 10:18:10

etc
Developer
Registered: 2010-11-11
Posts: 5,134
Website GitHub

Re: Dev news

Thanks for testing. The main purpose of modal preview is not leaving the editor tab, so you don’t loose the cursor position nor undo history. Live preview is just a bonus for wide-screen owners. With some CSS-fu the preview window can be made transparent and passing the clicks through, so usable even on small screens. But I leave it with you UX guys.

PS – not necessary related to live preview.

PS2 – UI is just a draft atm. We’ll probably add more controls, like preview timeout.

Offline

#65 2019-12-08 12:28:13

dos
Member
From: de
Registered: 2014-05-17
Posts: 54
Website Mastodon

Re: Dev news

Definitely a handy addition 👍

My thoughts:

  • the tab navigation seems to be a confusing ui-element for opening a new window
  • the preview window should be “sticky”, so it follows the viewport?!
  • Perhaps as a further development: A proper two-column editor?

“HaHa. Your medium is dying.” –Nelson Muntz, Springfield.

Offline

#66 2019-12-08 14:03:28

etc
Developer
Registered: 2010-11-11
Posts: 5,134
Website GitHub

Re: Dev news

dos wrote #320406:

Definitely a handy addition 👍

Thanks, glad you like it.

My thoughts:

  • the tab navigation seems to be a confusing ui-element for opening a new window
  • the preview window should be “sticky”, so it follows the viewport?!
  • Perhaps as a further development: A proper two-column editor?

Makes sense for me, though it belongs to our UX designer-in-chief to decide :-)

  • Tabs will most probably be replaced with just `Preview` link/button. We might move `HTML/Preview` selector to the modal chrome itself.
  • Yes for me, though dunno how it will behave on drag, needs testing.
  • It’s not a problem to target any area, say the sidebar, for preview. But we are going to revise the layout for future custom fields release, so it is not yet clear what it will become.

Offline

#67 2019-12-09 09:25:15

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Dev news

This is great, thanks Oleg.

There are definitely UI/UX changes we can make to polish this up (the tabs concept will need to be rethought, as we discussed previously).

One thing that might or might not be handy is making the ‘live_preview’ state persistent (i.e. the setting remembered in local storage between article edits. Something to discuss anyway.

Also, how this works on smaller screens and when scrolling, again as mentioned above.

But overall, I like it a lot and I’m sure we can hammer out any major usage issues over time.

Offline

#68 2019-12-09 12:04:30

etc
Developer
Registered: 2010-11-11
Posts: 5,134
Website GitHub

Re: Dev news

philwareham wrote #320409:

This is great, thanks Oleg.

There are definitely UI/UX changes we can make to polish this up (the tabs concept will need to be rethought, as we discussed previously).

Thanks Phil, your turn now :-) I would suggest that we move most of it to the modal itself, kinda sticky status bar with tabs and other controls (‘live’ checkbox, timeout etc).

One thing that might or might not be handy is making the ‘live_preview’ state persistent (i.e. the setting remembered in local storage between article edits. Something to discuss anyway.

For the background, previews are generated server-side. This yields periodic requests (one second after you stop typing by default) to the server in ‘live_preview’ mode. We should avoid these as much as possible, so I would rather keep ‘live’ opt-in atm. This could change if we find an up-to-date JS Textile parser to generate previews client-side, but even the most recent one I’m aware of is not synced with php-textile. Probably not a big difference, but I prefer previews to match exactly the final output.

Offline

#69 2019-12-10 11:53:19

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,138
Website

Re: Dev news

etc wrote #320301:

Global yield attribute for short-tags users: instead of

<txp:tag a='<txp:yield name="a" />' b='<txp:yield name="b" default="B" />' />...

you can type just

<txp:tag yield="a,b" b="B" />...

inside forms.

Could you clarify a little what this brings to the table?

Currently, I have a form to insert images in an article

<txp:images id='<txp:yield name="id" />' break=''>
  <figure class="article-img <txp:if_yield name='class'><txp:yield name='class' /></txp:if_yield>" 
...

insert the image in the article:

<txp::pw_image_hero id="31" class="screenshot" />

Does those improvements offer me anything in such a case? I have other short forms which follow similar pattern although a bit more complicated.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#70 2019-12-10 12:07:21

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,138
Website

Re: Dev news

etc wrote #320410:

I would suggest that we move most of it to the modal itself, kinda sticky status bar with tabs and other controls (‘live’ checkbox, timeout etc).

I had been thinking along the same line yesterday. One button/ link (next to the Title field?) to trigger the dialog, and inside the dialog a mini-tab style thing (“HTML” | ”Text” – with “Text” meaning actual parsed Textile, current “Preview”). And add the Live preview under it.

etc wrote #320404:

[…]vWith some CSS-fu the preview window can be made transparent and passing the clicks through, so usable even on small screens. But I leave it with you UX guys.

Uh……… (shudder).
I think I leave that one to you…

—~—
Is there sometimes a (visible) gap or delay between what I type and what is rendered in the preview thingie? As far as I understand there is a round trip to the server to parse Textile, which may account for some (although I test on localhost, sometimes it s not necessarily faster than a closely live server, esp with a good fiber connection).

(that is not a huge problem for me as I do most if not all of my writing in a real text editor – BBEdit still doesn’t s**k and can handle preview of Textile)


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#71 2019-12-10 18:17:10

etc
Developer
Registered: 2010-11-11
Posts: 5,134
Website GitHub

Re: Dev news

phiw13 wrote #320415:

Currently, I have a form to insert images in an article

<txp:images id='<txp:yield name="id" />' break=''>...

Does those improvements offer me anything in such a case? I have other short forms which follow similar pattern although a bit more complicated.

You can replace id='<txp:yield name="id" />' with yield="id". Not big save in this case, but when using multiple attributes, yield="author, category, etc" becomes much shorter and more readable than

author='<txp:yield name="author" />' category='<txp:yield name="category" />' etc='<txp:yield name="etc" />'

Not related, but you also don’t really need if_yield check in your code.

Offline

#72 2019-12-10 18:26:06

etc
Developer
Registered: 2010-11-11
Posts: 5,134
Website GitHub

Re: Dev news

phiw13 wrote #320416:

One button/ link (next to the Title field?) to trigger the dialog, and inside the dialog a mini-tab style thing (“HTML” | ”Text” – with “Text” meaning actual parsed Textile, current “Preview”). And add the Live preview under it.

Yep, along these lines. Templates welcome.

Is there sometimes a (visible) gap or delay between what I type and what is rendered in the preview thingie? As far as I understand there is a round trip to the server to parse Textile, which may account for some (although I test on localhost, sometimes it s not necessarily faster than a closely live server, esp with a good fiber connection).

Yes, the preview is generated 1s after you stop typing (the delay will be customizable). You’d certainly hate stressing your server on each keystroke, even on a fiber connection. And what waist of energy it would be!

(that is not a huge problem for me as I do most if not all of my writing in a real text editor – BBEdit still doesn’t s**k and can handle preview of Textile)

Unfortunately, BBEdit is not up to date with php-textile, so you get a biased output.

Offline

  1. Index
  2. » Core development
  3. » Dev news

Board footer

Powered by FluxBB