Elastic: Replace properties sidebar with a dialog on the attachment preview page (#7635)

CHANGELOG

@@ -37,6 +37,7 @@ CHANGELOG Roundcube Webmail
 - Plugin API: Added 'preferences' parameter to 'user_create' hook (#7692)
 - Elastic: Dark mode (#6709)
 - Elastic: Display email size on the list of messages (#7162)
+- Elastic: Replace properties sidebar with a dialog on the attachment preview page (#7635)
 - Elastic: Minimize forms/colors blink on page load
 - Elastic: Improve mail header "detailed mode" (#7224)
 - Elastic: Moving single recipients between recipient inputs with drag-n-drop (#5069)

skins/elastic/styles/widgets/lists.less

@@ -279,6 +279,7 @@ html.touch {
     &.enigma.keys > a:before {
         content: @fa-var-key;
     }
+    &.info > a:before,
     &.userinfo > a:before {
         content: @fa-var-info-circle;
     }
@@ -798,6 +799,7 @@ html.touch {
             top: .25rem;
             right: 0;
             bottom: 0;
+            background-color: transparent;
 
             .flag {
                 visibility: hidden;

skins/elastic/styles/widgets/menu.less

@@ -691,6 +691,9 @@ a.toolbar-button {
     &.submit:before {
         content: @fa-var-check;
     }
+    &.info:before {
+        content: @fa-var-info-circle;
+    }
     &.threads:before {
         content: @fa-var-comments;
     }

skins/elastic/templates/messagepart.html

@@ -2,25 +2,13 @@
 
 <h1 class="voice"><roundcube:var name="env:filename" /></h1>
 
-<div id="layout-sidebar" class="listbox">
-	<div class="header">
-		<a class="button icon back-content-button" href="#content" data-hidden="big"><span class="inner"><roundcube:label name="back" /></span></a>
-		<span class="header-title" id="aria-label-contentinfo"><roundcube:label name="properties" /></span>
-	</div>
-	<div class="scroller">
-		<roundcube:object name="messagePartControls" class="listing props-table" role="contentinfo"
-			aria-labelledby="aria-label-contentinfo" />
-	</div>
-</div>
-
 <div id="layout-content" class="selected">
 	<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
 	<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
-		<a class="button icon properties" id="properties-button" href="#properties" onclick="UI.show_sidebar()" data-hidden="big">
-			<span class="inner"><roundcube:label name="properties"></span>
-		</a>
 		<span class="header-title constant"><roundcube:var name="env:filename" /></span>
 		<div id="messagetoolbar" class="toolbar menu">
+			<roundcube:button type="link" name="info" label="properties" title="properties"
+				class="info" innerclass="inner" onclick="UI.props_dialog()" />
 			<roundcube:button command="download" type="link" label="download" title="download"
 				class="download disabled" classAct="download" innerclass="inner" />
 			<roundcube:button command="print" type="link" label="print" title="print"
@@ -50,6 +38,7 @@
 					innerclass="inner" data-hidden="small" />
 			<roundcube:endif />
 			<roundcube:if condition="stripos(env:mimetype, 'image/') === 0" />
+				<span class="spacer"></span>
 				<roundcube:button command="image-scale" type="link" prop="+" data-hidden="small"
 					class="zoomin disabled" classAct="zoomin"
 					label="zoomin" title="increaseimage" innerclass="inner" />
@@ -118,4 +107,13 @@
 	</div>
 <roundcube:endif />
 
+<roundcube:add_label name="properties" />
+<div id="properties-menu" class="popupmenu" role="dialog" aria-labelledby="aria-label-contentinfo">
+	<h3 id="aria-label-contentinfo" class="voice"><roundcube:label name="properties" /></h3>
+	<div class="scroller">
+		<roundcube:object name="messagePartControls" class="listing props-table" role="contentinfo"
+			aria-labelledby="aria-label-contentinfo" />
+	</div>
+</div>
+
 <roundcube:include file="includes/footer.html" />

skins/elastic/ui.js

@@ -63,6 +63,7 @@ function rcube_elastic_ui()
     this.about_dialog = about_dialog;
     this.headers_dialog = headers_dialog;
     this.import_dialog = import_dialog;
+    this.props_dialog = props_dialog;
     this.headers_show = headers_show;
     this.spellmenu = spellmenu;
     this.searchmenu = searchmenu;
@@ -2746,6 +2747,19 @@ function rcube_elastic_ui()
         });
     };
 
+    /**
+     * Attachment properties dialog
+     */
+    function props_dialog()
+    {
+        var dialog = $('#properties-menu').clone();
+
+        rcmail.simple_dialog(dialog, rcmail.gettext('properties'), null, {
+            cancel_button: 'close',
+            height: 400
+        });
+    };
+
     /**
      * Mail import dialog
      */
@@ -4115,11 +4129,17 @@ function rcube_elastic_ui()
      * Wrapper for rcmail.open_window to intercept window opening
      * and display a dialog with an iframe instead of a real window.
      */
-    function window_open(url)
+    function window_open(url, small, toolbar, force_window)
     {
         // Use 4th argument to bypass the dialog-mode e.g. for external windows
-        if (!is_mobile() || arguments[3] === true) {
-            return env.open_window.apply(rcmail, arguments);
+        if (!is_mobile() || force_window === true) {
+            // On attachment preview page we do not display the properties sidebar
+            // so we can use a smaller window, as we do for print pages
+            if (/_task=mail/.test(url) && /_action=get/.test(url)) {
+                small = true;
+            }
+
+            return env.open_window.call(rcmail, url, small, toolbar);
         }
 
         // _extwin=1, _framed=1 are required to display attachment preview