[Document Editor] Add missing preview features

[markus-moser]

• Device specific preview
• Preview in combination with scheduled blocks

[MSchinwaldEl]

Hi @idaiv,

I found the following design for the preview feature: https://www.figma.com/design/pg65AmcoU5iVtQeroHK4iF/Full-Screens?node-id=11219-224103&m=dev
Although it's called "Data Objects - Preview" the bar containing the different view buttons (Desktop, Tablet, ...) seems to work perfectly for documents.
Is this the correct design to implement?

There's one more thing: If the document contains a Scheduled Block Editable (https://docs.pimcore.com/platform/Pimcore/Documents/Editables/Scheduled_Block/) the preview in Classic UI contains a time slider at the bottom of the preview frame. (In the Classic UI of studionightly or the pimcore demo (https://studionightly.pimcore.app/admin/) it can be achieved by adding a "Time Slider Featurette" area to a document)

I suggest to stick to the implementation of the Scheduled Block Editable in edit mode and keep the UI similar. So we don't need a separate design and the implementation will probably be efficient.

[idaiv]

Hi @MSchinwaldEl!
Regarding the screen - yes, thats the one. I will update it and rename it appropriately.

And the time slider - sure, that would mean that from the Scheduled Block you would take the date input + the slider itself as in the Classic UI?

Im placing it all together and will comment here as a reference on your task.

[idaiv]

Hi @MSchinwaldEl!
Here is the screen: https://www.figma.com/design/pg65AmcoU5iVtQeroHK4iF/Full-Screens?node-id=11219-224103&t=2GXxn7FEbD1lJsM3-4

I have placed the responsive breakpoints with the devices on left and the slider right next to them.

[markus-moser]

@idaiv @MSchinwaldEl Can we just use a date time field instead of the slider approach for the preview? In the new editable this slider is not a real slideable slider (the approach is slightly different then in the classic UI). It's in general a bit of an overcomplicated component for what we would like to achieve. Please let's keep it simple - at the end all what you want to do is to see how the page looks like at a certain date/time -> so a date time picker should be fine for this :)

[markus-moser]

[idaiv]

@markus-moser @MSchinwaldEl sure, even better!