Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rework the front end preview #989

Merged
merged 30 commits into from Jan 6, 2020
Merged

Rework the front end preview #989

merged 30 commits into from Jan 6, 2020

Conversation

@richardhj
Copy link
Member

richardhj commented Nov 15, 2019

This PR injects the back end preview bar and replaces the preview frameset.

How this works:

The preview bar is injected into the DOM on kernel.response event.
When the user wants to view the page as a member, an Ajax request is triggered in which the preview authentication will be handled. The Ajax endpoint logs in the user, returns an HTTP OK and finally, a page reload is done.

TODO:

  • CSS (rudimental CSS at the moment)
  • make the preview bar collapsible
  • restore contao/core#6546

Impressions:
Screen Shot 2019-11-24 at 16 09 40


Outlook:
I already worked on an enhanced version of the preview. Once this PR is approved and merged, I add a framework for 3rd parties to add content to the preview toolbar.
So-called "preview providers" (class must implementing an interface and tag the service with contao.preview_provider) can add arbitrary content to the toolbar.
In the end, the great advantage of the preview is the back end scope in the front end.
The toolbar should be either horizontally (as we know it) or left-aligned when the content requires it.

Use case: theme switch or changing CSS variables on runtime.

Screen Shot 2019-11-24 at 20 52 19

Copy link
Member

Toflar left a comment

Awesome!! Really looking forward to this!

@leofeyer leofeyer added the feature label Nov 15, 2019
@leofeyer leofeyer added this to the 4.9 milestone Nov 15, 2019
Copy link
Contributor

aschempp left a comment

Very nice! Can we maybe add an image to see what the toolbar will look like?

Any particular reason why the user list is loaded with ajax?

@richardhj richardhj changed the title Injected back end preview toolbar [WIP] Injected back end preview toolbar Nov 22, 2019
@richardhj richardhj requested a review from aschempp Nov 22, 2019
@richardhj richardhj changed the title [WIP] Injected back end preview toolbar [WIP] Rework front end preview Nov 24, 2019
@richardhj richardhj force-pushed the richardhj:feature/preview branch from a426da7 to aaf3052 Nov 25, 2019
@richardhj richardhj force-pushed the richardhj:feature/preview branch from aaf3052 to 414b966 Nov 25, 2019
@richardhj richardhj changed the title [WIP] Rework front end preview [RFC] Rework front end preview Nov 25, 2019
Copy link
Member

Toflar left a comment

Looks excellent to me. Imho, this can be extended with unit tests and merged as is!

Polishing CSS and adding more toolbar functionality such as JS can still be done afterwards. At least we got rid of the iframe now and the preview bar is shown consistently everywhere :) Great work!

richardhj added 2 commits Nov 25, 2019
richardhj and others added 3 commits Nov 25, 2019
Co-Authored-By: Martin Auswöger <martin@auswoeger.com>
…/preview
richardhj added 4 commits Nov 26, 2019
@richardhj richardhj force-pushed the richardhj:feature/preview branch from 9434896 to 6fae43a Nov 29, 2019
@richardhj richardhj changed the title [RFC] Rework front end preview Rework front end preview Nov 30, 2019
@richardhj richardhj requested a review from Toflar Nov 30, 2019
Copy link
Contributor

aschempp left a comment

As discussed in the Mumble call yesterday, $user->amg is the correct implementation, but it should be in the BackendUser class instead.

@leofeyer

This comment has been minimized.

Copy link
Member

leofeyer commented Dec 20, 2019

$user->amg is the correct implementation, but it should be in the BackendUser class instead.

#1120 has been merged, so this can be added now. 👍

@leofeyer leofeyer changed the title Rework front end preview Rework the front end preview Dec 23, 2019
richardhj added 4 commits Dec 30, 2019
# Conflicts:
#	calendar-bundle/tests/DependencyInjection/ContaoCalendarExtensionTest.php
#	calendar-bundle/tests/EventListener/PreviewUrlConverterListenerTest.php
#	core-bundle/src/Resources/contao/library/Contao/User.php
#	news-bundle/tests/DependencyInjection/ContaoNewsExtensionTest.php
#	news-bundle/tests/EventListener/PreviewUrlConverterListenerTest.php
@richardhj richardhj force-pushed the richardhj:feature/preview branch from 2e6aa15 to 2c1c97d Dec 30, 2019
@richardhj

This comment has been minimized.

Copy link
Member Author

richardhj commented Dec 30, 2019

I addressed the changes and merged against master to resolve conflicts.

Copy link
Contributor

aschempp left a comment

Looks all good to me! Unfortunately, the coverage seems to decrease quite a lot, are we missing tests on new classes?

Copy link
Member

leofeyer left a comment

The PR looks very good to me. 👍 We cannot merge it with the decreasing test coverage though.

@leofeyer leofeyer force-pushed the richardhj:feature/preview branch from 06899aa to 1371041 Jan 6, 2020
@richardhj richardhj force-pushed the richardhj:feature/preview branch from ae12b74 to b225e1d Jan 6, 2020
@leofeyer leofeyer merged commit c87c6a2 into contao:master Jan 6, 2020
8 checks passed
8 checks passed
Coverage
Details
Coding Style
Details
PHP 7.2
Details
PHP 7.3
Details
PHP 7.4
Details
Prefer Lowest
Details
Bundles
Details
Windows
Details
@leofeyer

This comment has been minimized.

Copy link
Member

leofeyer commented Jan 6, 2020

Thank you @richardhj. 🎉

@Toflar

This comment has been minimized.

Copy link
Member

Toflar commented Jan 6, 2020

🎉 thanks, Richard! ❤️

Tastaturberuf pushed a commit to Tastaturberuf/contao that referenced this pull request Jan 13, 2020
Description
-----------

This PR injects the back end preview bar and replaces the preview frameset.

**How this works:**

The preview bar is injected into the DOM on `kernel.response` event.
When the user wants to view the page as a member, an Ajax request is triggered in which the preview authentication will be handled. The Ajax endpoint logs in the user, returns an HTTP OK  and finally, a page reload is done.

**TODO:**
- [x] CSS (rudimental CSS at the moment)
- [x] make the preview bar collapsible
- [x] restore contao/core#6546

**Impressions:**
<img width="1411" alt="Screen Shot 2019-11-24 at 16 09 40" src="https://user-images.githubusercontent.com/1284725/69491274-38fb3980-0ed6-11ea-97b6-625b730c9505.png">

____

**Outlook:**
I already worked on an enhanced version of the preview. Once this PR is approved and merged, I add a framework for 3rd parties to add content to the preview toolbar.
So-called "preview providers" (class must implementing an interface and tag the service with `contao.preview_provider`) can add arbitrary content to the toolbar.
In the end, the great advantage of the preview is the back end scope in the front end.
The toolbar should be either horizontally (as we know it) or left-aligned when the content requires it.

Use case: theme switch or changing CSS variables on runtime.

<img width="1509" alt="Screen Shot 2019-11-24 at 20 52 19" src="https://user-images.githubusercontent.com/1284725/69494228-57742b80-0efc-11ea-9254-0a1848112b65.png">

Commits
-------

414b966 Rework frontend preview
4bad3d6 Collapse toolbar
2b856c1 Check for frontend request
a3a5630 Apply suggestions from code review
2098eba Remove the contao_backend_switch route
8eacd71 Merge remote-tracking branch 'richardhj/feature/preview' into feature/preview
3315cc9 Apply suggestions from code review
b04c925 Inject js before </body>
9ebe83d Remove non-present route
6fae43a Move logic to PreviewUrlConvertEvent
280d16a Add tests
2336e22 Apply suggestions from code review
2974a20 Do not inject preview bar if no preview entrypoint defined
dfe0d2a Add ROLE_ALLOWED_TO_SWITCH_MEMBER
519124d Further styling of toolbar
0732765 Fix safari incompatibilites
cfd83d9 Merge branch 'master' into feature/preview
80d06fd Fix QS
f2f36f4 Fix the coding style
0e3ae2e Merge remote-tracking branch 'upstream/master' into feature/preview
4a969b2 Serialize amg in BackendUser.php
206d929 Remove CDATA as we use HTML
2c1c97d Do not initialize framework.
550a561 Test service registration.
836d3c3 Fix the coding style
1371041 Fix the CSS code
8cbf016 Simplify event listener registration.
7666ac6 Remove legacy preview script code.
b225e1d Add BackendPreviewSwitchControllerTest.php
973a979 Adjust the test method names
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.