Feature #10642

Implement workspace preview

Added by Steffen Gebert over 10 years ago. Updated over 7 years ago.

Status:
Closed
Priority:
Must have
Category:
Workspaces
Target version:
-
Start date:
2010-11-05
Due date:
% Done:

90%

Estimated time:
PHP Version:
Tags:
Complexity:
Sprint Focus:

Description

#9472 presents a new design for the workspace preview window. We need a CSS styling for it.

Thumbnail

Purpose: This screen is shown, when you preview changes made in a workspace, which aren't "live", yet. It is shown as an iframe above your Frontend website.

  • Please use the attached ws_preview.html file
  • Create an ExtJS skin for it to adjust the styling

This doesn't require changes to the TYPO3 source itself, just reference the CSS file in ws_preview.html.

Presenting intermediate results is very welcome!


Files

entwurf_4.5-workspaces_03-vergleichsscreens.psd (1.62 MB) entwurf_4.5-workspaces_03-vergleichsscreens.psd Lars Zimmermann, 2010-11-05 11:53
workspace-preview.jpg (23.5 KB) workspace-preview.jpg Screenshot Steffen Gebert, 2010-11-05 12:06
workspace-preview-thumb.jpg (6.76 KB) workspace-preview-thumb.jpg Thumbnail Steffen Gebert, 2010-11-05 12:08
ws_preview.html (2.8 KB) ws_preview.html Tolleiv Nietsch, 2010-11-08 21:32
ws_preview_rev9480.html (3 KB) ws_preview_rev9480.html Tolleiv Nietsch, 2010-11-29 16:44
xtheme-t3skin.diff (49.9 KB) xtheme-t3skin.diff CSS Diff File José Padilla, 2010-12-01 04:07
workspace-styles-thumb.png (7.32 KB) workspace-styles-thumb.png Screenshot José Padilla, 2010-12-01 04:07
f10642-skin.css (49.9 KB) f10642-skin.css New FE skin, containing rules which are not really needed Steffen Gebert, 2010-12-01 10:47
f10642-skin.diff (2.87 KB) f10642-skin.diff Changes made for the WS preview Steffen Gebert, 2010-12-01 10:47
ws-comparison.png (32.6 KB) ws-comparison.png Screenshot Steffen Gebert, 2010-12-18 00:27
f10642-v2.diff (4.05 KB) f10642-v2.diff Patch (against sysext/workspaces/ Steffen Gebert, 2010-12-18 00:27
f10642-v2.zip (1 KB) f10642-v2.zip Images Steffen Gebert, 2010-12-18 00:28
f10642-v3.diff (4.47 KB) f10642-v3.diff Tolleiv Nietsch, 2010-12-19 11:04
f10642_v4.png (49.8 KB) f10642_v4.png Screenshot Steffen Gebert, 2010-12-20 11:43
f10642_v4.diff (10.9 KB) f10642_v4.diff Diff Steffen Gebert, 2010-12-20 11:43
f10642_v4.zip (5.04 KB) f10642_v4.zip Binaries Steffen Gebert, 2010-12-20 11:43
f10642_v5.diff (11.9 KB) f10642_v5.diff Steffen Gebert, 2010-12-21 14:01

Related issues

Related to TYPO3 Core - Task #12527: Split View Improvements: Divider for split views & CSS distinctionClosed2011-01-25

Actions
#4

Updated by Tolleiv Nietsch over 10 years ago

ws_review.html is a first draft made by Steffen Kamper and me - demonstrates the slider functionality.

Problem at the moment is that the scrollbars within the preview-iFrames can't be harmonized because this might/will raise security warnings (due to XSS) ... feel free to contact me if you've any questions for this.

Just place the attached file in the root of any TYPO3 installation (which uses typo3-trunk) and you'll see the magic ;)

#5

Updated by Steffen Gebert over 10 years ago

  • Priority changed from Should have to Must have
#6

Updated by Steffen Gebert over 10 years ago

  • Assignee set to Jose Padilla
#7

Updated by José Padilla over 10 years ago

Couple Notes about the progress on this task:

I'm currently working on thecontainer with class "x-toolbar-ct" I have a question about this:

  • Currently I see the buttons: "live Maximum","Workspace Maximum" and the slider, In the PSD file attached I see the buttons Publish, Reject Drop, Changes and Help which I believe belong to the table with class "x-toolbar-right..." I can't see these 4 right buttons in the provided html file, should I focus for now in the 2 left buttons and the slider? or there is a newer version of the ws_preview.html file?

Let me know
Thanks!

#8

Updated by Steffen Gebert over 10 years ago

Thanks, José! I've pointed Tolleiv Nietsch to this issue, hope he can help you!

Steffen

#9

Updated by Tolleiv Nietsch over 10 years ago

Hi,

basicially the screenshot is where we're planning to go with 4.5. Except that we will not have the "Publish", "Reject" and "Drop changes" buttons - these will hopefully be added in 4.6.

Besides that the ws_preview.html was only meant as a proof of concept, to show how we're planning to work with the slider.

The current implementation for the workspace-preview which we have in TYPO3 trunk can be found in typo3/sysext/workspaces/Resources/Public/JavaScript/preview.js (attached ws_preview_rev9480.html to have an easy start ;) ...). It's rather simple and does not include the slider yet. But the slider will be included as soon as we have a working version which is able to handle multiple domains as well.

As you see our setup is not final yet and you're also free to make suggestions for a better structure - hope that answered your questions..

#10

Updated by José Padilla over 10 years ago

Hi Everyone, Attached here is the diff file with a screenshot fof the current status of this task, let me know if there are fixes and of course comment that helps to improve this.

Thanks

#11

Updated by Steffen Gebert over 10 years ago

Hi José,

so you started your work based on the xtheme-t3skin.css of the TYPO3 backend?
As pointed out, it should have better been started from a clean state and only add the rules neccessarry for the toolbar (as it would be the beginning of a TYPO3 Frontend skin). Nevermind, we will get this managed ;)

workspaces team:
I would suppose to include the attached css file and use it as skin for the moment. I've only made a little adjustment. If you want to see the differences, I've attached a diff file.

jose:
could you try just using the changes you made (by using the lines, which get added by the .diff file, somewhen the next days) and add the missing rules, which are still needed after throwing the rest from the original xtheme-t3skin.css away?

I'm handling this issue over to the WS tracker. Please give feedback!

Thanks to all of you for you contributions!
Steffen

#12

Updated by Steffen Gebert over 10 years ago

  • Tracker changed from Task to Feature
  • Project changed from 1522 to 624
  • Status changed from New to Needs Feedback
#13

Updated by Tolleiv Nietsch over 10 years ago

  • Assignee changed from Jose Padilla to Steffen Gebert

Hi - it seems that the attached files still work on the wrong base.

Our official Javascripts now include the slider and but the attached CSS does not work with it (or at least I'm not able to get them to work)

@SteffenG - how about a Skype meeting to clarify how to proceed?

#14

Updated by Tolleiv Nietsch over 10 years ago

  • Target version set to 4.5 Beta 3
#15

Updated by Steffen Gebert over 10 years ago

The current status:

Screenshot

Open issues:
  • Somehow place the slider next to the tabs.
  • Place the TYPO3 logo inside
#17

Updated by Tolleiv Nietsch over 10 years ago

Hi - I made a few changes on my own - v3 attached.

In addition the typo3logo_mini.png also needs to be placed in our Resources/Public/Images folder - as we can't reference the original one.

I guess I'll try to get in contact with Steffen Kamper to find out how we can move the slider up into the top-bar.

#18

Updated by Steffen Gebert over 10 years ago

Ah, sorry Tolleiv, forgot to incorporate your update. What did you change?

Attached a (maybe last) version, which looks pretty much like the screen shot. SteffenK made the positioning possible. I think, if we want, we could also move the Help button to the right.

Screenshot

#19

Updated by Tolleiv Nietsch over 10 years ago

ah great no problem - you already included most of my stuff - going to check your stuff this evening - great work :)

#20

Updated by Tolleiv Nietsch over 10 years ago

wow looks great - so moving the "Help" tab to the left is no big issue (visiual tab gets the 140px as margin-left and help floats right) - but moving the slider behind the tabs can't be done properly without Javascript - right?

#21

Updated by Steffen Gebert over 10 years ago

Attached v5, which adds styles for other browsers.

SteffenK meant it should be possible, to move it to the right.

#23

Updated by Tolleiv Nietsch over 10 years ago

v5 looks fine for me too (even in other browsers Chrome, Opera, IE) - when do you plan to commit it?

#24

Updated by Steffen Gebert over 10 years ago

  • Status changed from Needs Feedback to Resolved
  • % Done changed from 0 to 100

rev. 3532

#25

Updated by Jens Hoffmann over 10 years ago

  • Status changed from Resolved to New
  • Assignee changed from Steffen Gebert to Lars Zimmermann
  • Target version changed from 4.5 Beta 3 to 4.5 RC1
  • % Done changed from 100 to 90

Looks very nice, beside the "red separator" ..
I will contact Lars to find a better solution. :)

Greez Jens

#26

Updated by Steffen Gebert over 10 years ago

ACK, but please keep it simple ;)

#27

Updated by Tolleiv Nietsch over 10 years ago

  • Status changed from New to Needs Feedback

Any news?

#28

Updated by Tolleiv Nietsch over 10 years ago

Hi - actually we need some nice visual divider for all three modes, because even in the vertical or horizontal layouts it's hard to separate both views (see #12527)

#29

Updated by Sonja Schubert over 10 years ago

  • Status changed from Needs Feedback to Closed
#30

Updated by Michael Stucki over 7 years ago

  • Category set to Workspaces
#31

Updated by Michael Stucki over 7 years ago

  • Project changed from 624 to TYPO3 Core
  • Category changed from Workspaces to Workspaces
  • Target version deleted (4.5 RC1)

Also available in: Atom PDF