From 0fc9ca30313d8f12a09e1857da7303f11056e8ca Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Mon, 23 Apr 2018 14:41:46 +0000
Subject: [PATCH] Elastic: Better alignment of video/audio preview

---
 .../skins/elastic/templates/filepreview.html       |  2 +-
 plugins/kolab_files/skins/elastic/ui.js            |  6 ++++--
 .../skins/elastic/include/kolab_files.less         | 14 ++++++++++++++
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/plugins/kolab_files/skins/elastic/templates/filepreview.html b/plugins/kolab_files/skins/elastic/templates/filepreview.html
index 7f0242f6..7ee9b446 100644
--- a/plugins/kolab_files/skins/elastic/templates/filepreview.html
+++ b/plugins/kolab_files/skins/elastic/templates/filepreview.html
@@ -47,7 +47,7 @@
 		</div>
 	</div>
 	<h2 id="aria-label-filecontent" class="voice"><roundcube:label name="kolab_files.arialabelfilecontent" /></h2>
-	<div class="iframe-wrapper">
+	<div class="iframe-wrapper file-preview">
 		<roundcube:object name="filepreviewframe" id="fileframe" role="main" aria-labelledby="aria-label-filecontent" />
 	</div>
 <roundcube:if condition="stripos(env:mimetype, 'image/') === 0" />
diff --git a/plugins/kolab_files/skins/elastic/ui.js b/plugins/kolab_files/skins/elastic/ui.js
index a1907c95..e7d0f54d 100644
--- a/plugins/kolab_files/skins/elastic/ui.js
+++ b/plugins/kolab_files/skins/elastic/ui.js
@@ -72,8 +72,6 @@ function kolab_files_members_list(link)
 if (rcmail.env.action == 'open') {
     rcmail.addEventListener('enable-command', kolab_files_enable_command);
 
-    $('#toolbar-menu a.button.save').parent().hide();
-
     // center and scale the image in preview frame
     if (rcmail.env.mimetype.startsWith('image/')) {
         $('#fileframe').on('load', function() {
@@ -99,6 +97,10 @@ else {
 }
 
 $(document).ready(function() {
+    if (rcmail.env.action == 'open') {
+        $('#toolbar-menu a.button.save').parent().hide();
+    }
+
     if ($('#dragfilemenu').length) {
         rcmail.gui_object('file_dragmenu', 'dragfilemenu');
     }
diff --git a/plugins/libkolab/skins/elastic/include/kolab_files.less b/plugins/libkolab/skins/elastic/include/kolab_files.less
index f802c33b..a586e767 100644
--- a/plugins/libkolab/skins/elastic/include/kolab_files.less
+++ b/plugins/libkolab/skins/elastic/include/kolab_files.less
@@ -461,3 +461,17 @@ a.button.saveas:before {
 button.participant.add:before {
     content: @fa-var-user-plus;
 }
+
+.iframe-wrapper.file-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @media screen and (min-width: (@screen-width-small + 1px)) {
+        padding: 1em;
+    }
+
+    & + .footer.toolbar {
+        display: none !important;
+    }
+}