diff --git a/UI/Templates/MailPartViewers/UIxMailPartImageViewer.wox b/UI/Templates/MailPartViewers/UIxMailPartImageViewer.wox
index b8d8471b7..45fc3e847 100644
--- a/UI/Templates/MailPartViewers/UIxMailPartImageViewer.wox
+++ b/UI/Templates/MailPartViewers/UIxMailPartImageViewer.wox
@@ -11,12 +11,14 @@
var:title="filenameForDisplay"
class="md-card-image">
-
-
-
+
+
-
+
+
+
+
save
diff --git a/UI/Templates/MailPartViewers/UIxMailPartLinkViewer.wox b/UI/Templates/MailPartViewers/UIxMailPartLinkViewer.wox
index 64fc23ae4..031795595 100644
--- a/UI/Templates/MailPartViewers/UIxMailPartLinkViewer.wox
+++ b/UI/Templates/MailPartViewers/UIxMailPartLinkViewer.wox
@@ -1,18 +1,20 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
open_in_browser
@@ -43,4 +45,4 @@
-->
-
+
diff --git a/UI/WebServerResources/js/Mailer/Message.service.js b/UI/WebServerResources/js/Mailer/Message.service.js
index d77c36642..cf0235c05 100644
--- a/UI/WebServerResources/js/Mailer/Message.service.js
+++ b/UI/WebServerResources/js/Mailer/Message.service.js
@@ -325,6 +325,8 @@
if (part.type == 'UIxMailPartImageViewer')
part.msgclass = 'msg-attachment-image';
+ else if (part.type == 'UIxMailPartLinkViewer')
+ part.msgclass = 'msg-attachment-link';
// Trusted content that can be compiled (Angularly-speaking)
part.compile = true;
diff --git a/UI/WebServerResources/js/Mailer/sgZoomableImage.directive.js b/UI/WebServerResources/js/Mailer/sgZoomableImage.directive.js
new file mode 100644
index 000000000..56c533779
--- /dev/null
+++ b/UI/WebServerResources/js/Mailer/sgZoomableImage.directive.js
@@ -0,0 +1,41 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+ 'use strict';
+
+ /*
+ * sgZoomableImage - Toggle the 'sg-zoom' class when clicking on the image inside the container.
+ * @memberof SOGo.MailerUI
+ * @restrict attribute
+ * @ngInject
+ * @example:
+
+
+
+
+
+
+ */
+ function sgZoomableImage() {
+ return {
+ restrict: 'A',
+ link: link
+ };
+
+ function link(scope, iElement, attrs, ctrl) {
+ var parentNode = iElement.parent(),
+ toggleClass;
+
+ toggleClass = function(event) {
+ if (event.target.tagName == 'IMG')
+ parentNode.toggleClass('sg-zoom');
+ };
+
+ iElement.on('click', toggleClass);
+ }
+ }
+
+ angular
+ .module('SOGo.MailerUI')
+ .directive('sgZoomableImage', sgZoomableImage);
+})();
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index c60a009c0..fd550dc4e 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -45,48 +45,69 @@
// margin-bottom: ($mg/2);
}
-md-sidenav md-checkbox {
- &.sg-folder {
- // Show checkbox as a "closed" folder when unchecked and "opened" folder when checked
- .md-container:after {
- color: rgba(0,0,0,0.54);
- font-family: 'Material Icons';
- font-size: 24px;
- content: "\e2c7";
- top: -4px;
- left: -2px;
- width: 1em;
- height: 1em;
- }
- .md-icon {
- border-width: 0;
- }
- &.md-checked {
+md-sidenav {
+ md-checkbox {
+ &.sg-folder {
+ // Show checkbox as a "closed" folder when unchecked and "opened" folder when checked
.md-container:after {
- content: "\e2c8";
+ color: rgba(0,0,0,0.54);
+ font-family: 'Material Icons';
+ font-size: 24px;
+ content: "\e2c7";
+ top: -4px;
+ left: -2px;
+ width: 1em;
+ height: 1em;
}
.md-icon {
- background-color: initial;
- &:after {
- border-style: none;
+ border-width: 0;
+ }
+ &.md-checked {
+ .md-container:after {
+ content: "\e2c8";
+ }
+ .md-icon {
+ background-color: initial;
+ &:after {
+ border-style: none;
+ }
}
}
}
}
+ .sg-item-name {
+ line-height: 6 * $baseline-grid; // $list-item-height, 48px
+ }
}
-
-.msg-attachment-image {
- @media (min-width: $layout-breakpoint-sm) {
+.msg-attachment-image,
+.msg-attachment-link {
+ @media (min-width: $layout-breakpoint-xs) {
flex: 0 0 100%;
- max-width: 100%;
+ }
+ @media (min-width: $layout-breakpoint-sm) {
+ flex: 0 0 50%;
}
@media (min-width: $layout-breakpoint-md) {
- flex: 0 0 66.66%;
- max-width: 66%;
- }
- @media (min-width: $layout-breakpoint-lg) {
flex: 0 0 33.33%;
- max-width: 33%;
+ }
+ > div {
+ max-width: 100%;
+ width: 100%;
+ }
+}
+
+// sgZoomableImage directive
+.msg-attachment-image {
+ transition: flex-basis $swift-ease-out-duration $swift-ease-out-timing-function;
+ &.sg-zoom {
+ flex-basis: 100%;
+ order: -1;
+ }
+ &:not(.sg-zoom):hover md-card {
+ @extend .md-whiteframe-3dp;
+ }
+ [sg-zoomable-image] img {
+ cursor: pointer;
}
}
@@ -95,7 +116,13 @@ md-sidenav md-checkbox {
max-width: 100%;
}
-// sg-md title don't fit in message headers
+.sg-attachment-size {
+ @extend .md-caption;
+ padding-left: $baseline-grid;
+ color: $colorGrey800;
+}
+
+// sg-md title doesn't fit in message headers
.sg-md-title-msg {
@extend .sg-md-title;
margin: 0;
@@ -106,7 +133,17 @@ md-sidenav md-checkbox {
.mailer_mailcontent {
@extend .sg-md-body-multi;
+ md-card {
+ md-card-content {
+ padding: $baseline-grid;
+ p {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ }
}
+
//$total-columns: 13;
//$column-gutter: 0;