Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Rework the front end preview #989
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
Use case: theme switch or changing CSS variables on runtime.
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!
# 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
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