Improve display of message attachments
Images are now "zoomable" by clicking on them.pull/101/head^2
Francis Lachapelle
parent
b02de72e57
commit
8635eab502
|
|
@ -11,12 +11,14 @@
|
|||
var:title="filenameForDisplay"
|
||||
class="md-card-image"></img>
|
||||
<md-card-content>
|
||||
<p class="md-caption">
|
||||
<var:string value="filenameForDisplay" /><br/>
|
||||
<var:string value="bodyInfo.size" formatter="sizeFormatter"/>
|
||||
<p class="md-caption" var:title="filenameForDisplay">
|
||||
<var:string value="filenameForDisplay" />
|
||||
</p>
|
||||
</md-card-content>
|
||||
<md-dialog-actions layout="row" layout-align="end center">
|
||||
<md-dialog-actions layout="row" layout-align="start center">
|
||||
<div class="md-flex sg-attachment-size">
|
||||
<var:string value="bodyInfo.size" formatter="sizeFormatter"/>
|
||||
</div>
|
||||
<md-button class="sg-icon-button" var:href="pathForDownload">
|
||||
<md-tooltip md-direction="left"><var:string label:value="Save Attachment"/></md-tooltip>
|
||||
<md-icon>save</md-icon>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
<?xml version="1.0" standalone="yes"?>
|
||||
<!DOCTYPE div>
|
||||
<div xmlns="http://www.w3.org/1999/xhtml"
|
||||
<container xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:var="http://www.skyrix.com/od/binding"
|
||||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:label="OGo:label">
|
||||
<md-card>
|
||||
<md-card-content>
|
||||
<img var:src="mimeImageURL"/>
|
||||
<p class="md-caption">
|
||||
<var:string value="filenameForDisplay"/><br/>
|
||||
<var:string value="bodyInfo.size" formatter="sizeFormatter"/>
|
||||
</p>
|
||||
</md-card-content>
|
||||
<md-card-content>
|
||||
<img var:src="mimeImageURL"/>
|
||||
<p class="md-caption">
|
||||
<var:string value="filenameForDisplay"/>
|
||||
</p>
|
||||
</md-card-content>
|
||||
<md-dialog-actions layout="row" layout-align="end center">
|
||||
<div class="md-flex sg-attachment-size">
|
||||
<var:string value="bodyInfo.size" formatter="sizeFormatter"/>
|
||||
</div>
|
||||
<md-button class="sg-icon-button" var:href="pathToAttachment" target="_blank">
|
||||
<md-tooltip md-direction="left"><var:string label:value="View Attachment"/></md-tooltip>
|
||||
<md-icon>open_in_browser</md-icon>
|
||||
|
|
@ -43,4 +45,4 @@
|
|||
-->
|
||||
|
||||
</md-card>
|
||||
</div>
|
||||
</container>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
<div sg-zoomable-image="sg-zoomable-image">
|
||||
<md-card>
|
||||
<img src="foo.png">
|
||||
</md-card>
|
||||
</div>
|
||||
*/
|
||||
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);
|
||||
})();
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue