EZP-26322: Provide a "preview" link in the UDW selected view

Resources/config/css.yml

@@ -14,6 +14,7 @@ system:
             # layout stylesheets
                 - 'bundles/ezplatformui/css/layout.css'
                 - 'bundles/ezplatformui/css/views/navigationhub.css'
+                - 'bundles/ezplatformui/css/views/contentpeek.css'
                 - 'bundles/ezplatformui/css/views/confirmbox.css'
                 - 'bundles/ezplatformui/css/views/languageselectionbox.css'
                 - 'bundles/ezplatformui/css/views/notificationhub.css'
@@ -115,6 +116,7 @@ system:
                 - 'bundles/ezplatformui/css/theme/views/error.css'
                 - 'bundles/ezplatformui/css/theme/views/loginform.css'
                 - 'bundles/ezplatformui/css/theme/views/bar.css'
+                - 'bundles/ezplatformui/css/theme/views/contentpeek.css'
                 - 'bundles/ezplatformui/css/theme/views/confirmbox.css'
                 - 'bundles/ezplatformui/css/theme/views/languageselectionbox.css'
                 - 'bundles/ezplatformui/css/theme/views/notificationhub.css'

Resources/config/yui.yml

@@ -194,6 +194,8 @@ system:
                         - 'ez-discoverybarview'
                         - 'ez-universaldiscoveryviewservice'
                         - 'ez-universaldiscoveryview'
+                        - 'ez-contentpeekviewservice'
+                        - 'ez-contentpeekview'
                         - 'ez-confirmboxviewservice'
                         - 'ez-confirmboxview'
                         - 'ez-languageselectionboxviewservice'
@@ -206,6 +208,7 @@ system:
                         - 'ez-registerlanguagehelpersplugin'
                         - 'ez-domstateplugin'
                         - 'ez-universaldiscoveryplugin'
+                        - 'ez-contentpeekplugin'
                         - 'ez-confirmboxplugin'
                         - 'ez-languageselectionboxplugin'
                         - 'ez-notificationhubplugin'
@@ -298,6 +301,9 @@ system:
                 ez-universaldiscoveryviewservice:
                     requires: ['ez-viewservice', 'ez-sideviewservice', 'ez-imagevariationloadplugin', 'ez-universaldiscoverycontenttreeplugin']
                     path: "%ez_platformui.public_dir%/js/views/services/ez-universaldiscoveryviewservice.js"
+                ez-contentpeekviewservice:
+                    requires: ['ez-viewservice', 'ez-sideviewservice']
+                    path: "%ez_platformui.public_dir%/js/views/services/ez-contentpeekviewservice.js"
                 ez-confirmboxviewservice:
                     requires: ['ez-viewservice', 'ez-sideviewservice']
                     path: "%ez_platformui.public_dir%/js/views/services/ez-confirmboxviewservice.js"
@@ -575,6 +581,12 @@ system:
                 universaldiscoveryselectedview-ez-template:
                     type: 'template'
                     path: "%ez_platformui.public_dir%/templates/universaldiscovery/selected.hbt"
+                ez-contentpeekview:
+                    requires: ['ez-templatebasedview', 'ez-rawcontentview', 'contentpeekview-ez-template']
+                    path: "%ez_platformui.public_dir%/js/views/ez-contentpeekview.js"
+                contentpeekview-ez-template:
+                    type: 'template'
+                    path: "%ez_platformui.public_dir%/templates/contentpeek.hbt"
                 ez-confirmboxview:
                     requires: ['ez-templatebasedview', 'confirmboxview-ez-template']
                     path: "%ez_platformui.public_dir%/js/views/ez-confirmboxview.js"
@@ -1235,6 +1247,9 @@ system:
                 ez-notificationhubplugin:
                     requires: ['plugin', 'base', 'ez-pluginregistry']
                     path: "%ez_platformui.public_dir%/js/apps/plugins/ez-notificationhubplugin.js"
+                ez-contentpeekplugin:
+                    requires: ['plugin', 'base', 'ez-pluginregistry']
+                    path: "%ez_platformui.public_dir%/js/apps/plugins/ez-contentpeekplugin.js"
                 ez-confirmboxplugin:
                     requires: ['plugin', 'base', 'ez-pluginregistry']
                     path: "%ez_platformui.public_dir%/js/apps/plugins/ez-confirmboxplugin.js"

Resources/public/css/theme/views/contentpeek.css

@@ -0,0 +1,51 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+
+.is-contentpeek-hidden .ez-contentpeek-container {
+    display: flex;
+
+    background: rgba(0, 0, 0, 0);
+    -webkit-transform: translateY(-110%);
+            transform: translateY(-110%);
+}
+
+.ez-contentpeek-container {
+    background: rgba(0, 0, 0, 0.6);
+
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
+    -webkit-transition: all 0.3s;
+            transition: all 0.3s;
+}
+
+.ez-view-contentpeekview {
+    background: #fafafa;
+    border: 1px solid #aaa;
+}
+
+.ez-view-contentpeekview .ez-contentpeek-header {
+    font-size: 2em;
+}
+
+.ez-view-contentpeekview .ez-contentpeek-header:before {
+    float: left;
+    width: 2.4rem;
+}
+
+.ez-view-contentpeekview .ez-contentpeek-close {
+    color: #aaa;
+    cursor: pointer;
+}
+
+.ez-view-contentpeekview .ez-contentpeek-name {
+    font-size: 1em;
+    font-weight: bold;
+}
+
+.ez-view-contentpeekview .ez-contentpeek-contenttype {
+    color: #737373;
+    margin-left: 2.4rem;
+    font-size: 55%;
+}

Resources/public/css/theme/views/languageswitcher.css

@@ -16,10 +16,15 @@
     vertical-align: bottom;
 }
 
-.ez-view-languageswitcherview .ez-expandable-area {
+
+.ez-view-languageswitcherview .ez-language-list {
+    list-style: none;
     border: 1px solid #ccc;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
     background: #fff;
+}
+
+.ez-view-languageswitcherview .ez-expandable-area {
     display: block;
             transform: scaleY(0);
     -webkit-transform: scaleY(0);
@@ -30,8 +35,8 @@
 }
 
 .ez-view-languageswitcherview.is-expanded .ez-expandable-area {
-            transform: scaleY(1);
     -webkit-transform: scaleY(1);
+            transform: scaleY(1);
 }
 
 .ez-view-languageswitcherview .ez-content-translation .ez-language-switch-link {

Resources/public/css/theme/views/universaldiscovery/selected.css

@@ -39,6 +39,8 @@
 
 .ez-view-universaldiscoveryselectedview .ez-ud-selected-visual {
     font-size: 4em;
+    background: #fff;
+    transition: background ease 0.3s;
 }
 
 .ez-view-universaldiscoveryselectedview.is-state-no-image .ez-ud-selected-visual:before,
@@ -48,6 +50,31 @@
     line-height: 7rem;
 }
 
+.ez-view-universaldiscoveryselectedview .ez-ud-selected-visual:after {
+    text-align: center;
+    opacity: 0;
+    transition: all ease 0.3s;
+    color: #fff;
+    content: "\e607";
+}
+
+.ez-view-universaldiscoveryselectedview .ez-ud-selected-visual:hover {
+    background: rgba(50, 50, 50, 0.4);
+}
+
+.ez-view-universaldiscoveryselectedview .ez-ud-selected-visual .ez-ud-selected-image {
+    opacity: 1;
+    transition: opacity ease 0.3s;
+}
+
+.ez-view-universaldiscoveryselectedview .ez-ud-selected-visual:hover .ez-ud-selected-image {
+    opacity: 0.5;
+}
+
+.ez-view-universaldiscoveryselectedview .ez-ud-selected-visual:hover:after {
+    opacity: 1;
+}
+
 .ez-view-universaldiscoveryselectedview.is-state-image-loading .ez-ud-selected-visual:before {
     content: "\e61c";
     color: #ddd;

Resources/public/css/views/contentpeek.css

@@ -0,0 +1,58 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+
+.ez-contentpeek-container {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 21000;
+    padding: 2% 5%;
+    box-sizing: border-box;
+}
+
+.is-contentpeek-hidden .ez-contentpeek-container {
+    display: none;
+}
+
+.ez-contentpeek-container .ez-view-contentpeekview {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: 2em;
+}
+
+.ez-view-contentpeekview {
+    display: flex;
+    flex-direction: column;
+}
+
+.ez-view-contentpeekview .ez-contentpeek-header {
+    flex: 0;
+}
+
+.ez-view-contentpeekview .ez-rawcontentview-container {
+    overflow: auto;
+    flex: 1;
+    margin-top: 1em;
+}
+
+.ez-view-contentpeekview .ez-view-rawcontentview {
+    margin-top: 0;
+}
+
+.ez-view-contentpeekview .ez-contentpeek-close {
+    display: block;
+    float: right;
+}
+
+.ez-view-contentpeekview .ez-contentpeek-name {
+    margin: 0;
+}
+
+.ez-view-contentpeekview .ez-contentpeek-contenttype {
+    margin: 0;
+}

Resources/public/css/views/languageswitcher.css

@@ -8,19 +8,18 @@
     top: 0;
     right: 1em;
     line-height: 2.5em;
-    padding: 0 1em;
 }
 
-.ez-view-languageswitcherview .ez-expandable-area {
+.ez-view-languageswitcherview .ez-language-list {
     position: absolute;
-    top: 2.3em;
-    left: 0.5em;
-    overflow-y: auto;
+    top: 2.5em;
+    overflow: hidden;
+    text-overflow: ellipsis;
     display: none;
     line-height: 1em;
     margin: 0;
     padding: 0;
-    list-style: none;
+    width: 100%;
 }
 
 .ez-view-languageswitcherview.is-expanded .ez-expandable-area {

Resources/public/css/views/universaldiscovery/selected.css

@@ -72,6 +72,22 @@
     display: none;
 }
 
+.ez-view-universaldiscoveryselectedview .ez-ud-selected-visual {
+    cursor: pointer;
+    position: relative;
+}
+
+.ez-view-universaldiscoveryselectedview .ez-ud-selected-visual:after {
+    content: "";
+    display: block;
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    width: 100%;
+}
+
 .ez-view-universaldiscoveryselectedview.is-state-image-error .ez-asynchronousview-error {
     display: block;
 }

Resources/public/js/alloyeditor/buttons/mixins/embedimage.js

@@ -54,7 +54,7 @@ YUI.add('ez-alloyeditor-button-mixin-embedimage', function (Y) {
         _getImageField: function(contentType, content) {
             var imageIdentifier = contentType.getFieldDefinitionIdentifiers('ezimage');
 
-            return content.get('fields')[imageIdentifier[0]];
+            return content.getField(imageIdentifier[0], content.get('mainLanguageCode'));
         },
     };
 });

Resources/public/js/apps/ez-platformuiapp.js

@@ -30,10 +30,14 @@ YUI.add('ez-platformuiapp', function (Y) {
          * hash which contains the following properties:
          *
          *   * `type`: a reference to the constructor of a view
+         *   * `service`: a reference to the constructor of a view service
          *   * `container`: a selector to the node that will receive the
          *      rendered view
          *   * `hideClass`: a class to add on the application container to hide
          *     the rendered side view when it's not needed.
+         *   * `forceRendering`: if set to true, the side view will be rendered
+         *      each time time it becomes visible. Otherwise, it is rendered
+         *      only after its creation.
          *
          * The lifecycle of the side views is handled by the `handleSideViews`
          * method based on the meta information available in the route.
@@ -60,6 +64,13 @@ YUI.add('ez-platformuiapp', function (Y) {
                 container: '.ez-universaldiscovery-container',
                 hideClass: 'is-universaldiscovery-hidden',
             },
+            contentPeek: {
+                type: Y.eZ.ContentPeekView,
+                service: Y.eZ.ContentPeekViewService,
+                container: '.ez-contentpeek-container',
+                hideClass: 'is-contentpeek-hidden',
+                forceRendering: true,
+            },
             confirmBox: {
                 type: Y.eZ.ConfirmBoxView,
                 service: Y.eZ.ConfirmBoxViewService,
@@ -607,7 +618,7 @@ YUI.add('ez-platformuiapp', function (Y) {
             service.addTarget(this);
             service.load(function () {
                 view.setAttrs(service.getViewParameters());
-                if ( createView ) {
+                if ( createView || viewInfo.forceRendering ) {
                     view.render();
                     container.one(viewInfo.container).append(
                         view.get('container')
@@ -1184,7 +1195,7 @@ YUI.add('ez-platformuiapp', function (Y) {
                 readOnly: true,
                 value: ['en'],
             },
-            
+
             /**
              * Boolean that determine if the app routing is enabled
              *

Resources/public/js/apps/plugins/ez-contentpeekplugin.js

@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+YUI.add('ez-contentpeekplugin', function (Y) {
+    "use strict";
+    /**
+     * Provides the content peek plugin
+     *
+     * @module ez-contentpeekplugin
+     */
+    Y.namespace('eZ.Plugin');
+
+    /**
+     * The content peek plugin. It's a plugin for the application to set up the
+     * `contentPeekOpen` and `contentPeekClose` event handlers.
+     *
+     * @namespace eZ.Plugin
+     * @class ContentPeek
+     * @constructor
+     * @extends Plugin.Base
+     */
+    Y.eZ.Plugin.ContentPeek = Y.Base.create('contentPeekPlugin', Y.Plugin.Base, [], {
+        initializer: function () {
+            var app = this.get('host');
+
+            app.on('*:contentPeekOpen', function (e) {
+                var config = e.config;
+
+                if ( !config.languageCode ) {
+                    config.languageCode = config.content.get('mainLanguageCode');
+                }
+                app.showSideView('contentPeek', e.config);
+            });
+
+            app.on('*:contentPeekClose', function (e) {
+                app.hideSideView('contentPeek');
+            });
+        },
+    }, {
+        NS: 'contentPeek',
+    });
+
+    Y.eZ.PluginRegistry.registerPlugin(
+        Y.eZ.Plugin.ContentPeek, ['platformuiApp']
+    );
+});