(js) New images viewer for Mail module
parent
0a990ff66b
commit
555b7303d1
2
NEWS
2
NEWS
|
@ -2,7 +2,7 @@
|
|||
------------------
|
||||
|
||||
New features
|
||||
-
|
||||
- [web] new images viewer in Mail module
|
||||
|
||||
Enhancements
|
||||
- [core] now possible to {un}subscribe to folders using sogo-tool
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
xmlns:label="OGo:label">
|
||||
<md-card>
|
||||
<md-card-content>
|
||||
<p class="md-caption" var:title="filenameForDisplay">
|
||||
<p class="md-caption sg-attachment-name" var:title="filenameForDisplay">
|
||||
<var:if condition="preferredPathExtension.length"><span class="sg-label-outline"><var:string value="preferredPathExtension"/></span></var:if>
|
||||
<var:string value="filenameForDisplay"/>
|
||||
</p>
|
||||
|
|
|
@ -267,7 +267,7 @@
|
|||
<div class="md-flex sg-mail-part"
|
||||
ng-if="::part.compile"
|
||||
sg-compile="part.content"
|
||||
sg-zoomable-image="sg-zoomable-image"><!-- angular-friendly msg --></div>
|
||||
sg-zoomable-image="$index"><!-- angular-friendly msg --></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -6,13 +6,16 @@
|
|||
/**
|
||||
* @ngInject
|
||||
*/
|
||||
MessageController.$inject = ['$window', '$scope', '$state', '$mdMedia', '$mdDialog', 'sgConstant', 'stateAccounts', 'stateAccount', 'stateMailbox', 'stateMessage', 'sgHotkeys', 'encodeUriFilter', 'sgSettings', 'sgFocus', 'Dialog', 'Calendar', 'Component', 'Account', 'Mailbox', 'Message'];
|
||||
function MessageController($window, $scope, $state, $mdMedia, $mdDialog, sgConstant, stateAccounts, stateAccount, stateMailbox, stateMessage, sgHotkeys, encodeUriFilter, sgSettings, focus, Dialog, Calendar, Component, Account, Mailbox, Message) {
|
||||
MessageController.$inject = ['$window', '$scope', '$state', '$mdMedia', '$mdDialog', 'sgConstant', 'stateAccounts', 'stateAccount', 'stateMailbox', 'stateMessage', 'sgHotkeys', 'encodeUriFilter', 'sgSettings', 'ImageGallery', 'sgFocus', 'Dialog', 'Calendar', 'Component', 'Account', 'Mailbox', 'Message'];
|
||||
function MessageController($window, $scope, $state, $mdMedia, $mdDialog, sgConstant, stateAccounts, stateAccount, stateMailbox, stateMessage, sgHotkeys, encodeUriFilter, sgSettings, ImageGallery, focus, Dialog, Calendar, Component, Account, Mailbox, Message) {
|
||||
var vm = this, popupWindow = null, hotkeys = [];
|
||||
|
||||
// Expose controller
|
||||
$window.$messageController = vm;
|
||||
|
||||
// Initialize image gallery service
|
||||
ImageGallery.setMessage(stateMessage);
|
||||
|
||||
vm.$state = $state;
|
||||
vm.accounts = stateAccounts;
|
||||
vm.account = stateAccount;
|
||||
|
@ -424,8 +427,8 @@
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
angular
|
||||
.module('SOGo.MailerUI')
|
||||
.controller('MessageController', MessageController);
|
||||
.module('SOGo.MailerUI')
|
||||
.controller('MessageController', MessageController);
|
||||
})();
|
||||
|
|
|
@ -1,16 +1,17 @@
|
|||
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
||||
|
||||
(function() {
|
||||
/* jshint validthis: true */
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
* sgZoomableImage - Toggle the 'sg-zoom' class when clicking on the image inside the container.
|
||||
* sgZoomableImage - Show the image fullscreen when clicking on the image inside the container.
|
||||
* @memberof SOGo.MailerUI
|
||||
* @restrict attribute
|
||||
* @ngInject
|
||||
* @example:
|
||||
|
||||
<div sg-zoomable-image="sg-zoomable-image">
|
||||
<div sg-zoomable-image="$index">
|
||||
<md-card>
|
||||
<img src="foo.png">
|
||||
</md-card>
|
||||
|
@ -19,22 +20,53 @@
|
|||
function sgZoomableImage() {
|
||||
return {
|
||||
restrict: 'A',
|
||||
link: link
|
||||
bindToController: {
|
||||
partIndex: '=sgZoomableImage'
|
||||
},
|
||||
controller: sgZoomableImageController
|
||||
};
|
||||
|
||||
function link(scope, iElement, attrs, ctrl) {
|
||||
var parentNode = iElement.parent(),
|
||||
toggleClass;
|
||||
imgElement, showImage, toggleClass;
|
||||
|
||||
imgElement = iElement.find('img');
|
||||
|
||||
toggleClass = function(event) {
|
||||
if (event.target.tagName == 'IMG')
|
||||
parentNode.toggleClass('sg-zoom');
|
||||
};
|
||||
|
||||
iElement.on('click', toggleClass);
|
||||
showImage = function(event) {
|
||||
if (event.target.tagName == 'IMG')
|
||||
ctrl.showGallery(event, imgElement[0].src);
|
||||
};
|
||||
|
||||
if (imgElement.length)
|
||||
ctrl.addImage(imgElement[0].src);
|
||||
|
||||
iElement.on('click', showImage);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @ngInject
|
||||
*/
|
||||
sgZoomableImageController.$inject = ['$element', 'ImageGallery'];
|
||||
function sgZoomableImageController($element, ImageGallery) {
|
||||
var $ctrl = this;
|
||||
|
||||
this.$postLink = function() {
|
||||
ImageGallery.registerImage($element);
|
||||
$element.on('click', this.showImage);
|
||||
};
|
||||
|
||||
this.showImage = function($event) {
|
||||
if ($event.target.tagName == 'IMG')
|
||||
ImageGallery.showGallery($event, $ctrl.partIndex);
|
||||
};
|
||||
}
|
||||
|
||||
angular
|
||||
.module('SOGo.MailerUI')
|
||||
.directive('sgZoomableImage', sgZoomableImage);
|
||||
|
|
|
@ -0,0 +1,63 @@
|
|||
/// imagegallery.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
$imagegallery_thumbnail_size: 100px;
|
||||
|
||||
body.sg-image-gallery-backdrop .md-panel._md-opaque-enter {
|
||||
opacity: .88;
|
||||
}
|
||||
|
||||
sg-image-gallery,
|
||||
sg-image-gallery md-icon {
|
||||
color: white;
|
||||
}
|
||||
|
||||
sg-image-gallery {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.sg-image {
|
||||
max-height: 80vh;
|
||||
max-width: 90vh;
|
||||
}
|
||||
.sg-image-thumbnails {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.sg-image-thumbnail {
|
||||
position: relative;
|
||||
width: $imagegallery_thumbnail_size;
|
||||
height: $imagegallery_thumbnail_size;
|
||||
margin: 1em 2em 1em 0;
|
||||
min-width: $imagegallery_thumbnail_size;
|
||||
overflow: hidden;
|
||||
img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
opacity: 0.8;
|
||||
top: 50%;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
transform: translate(-50%,-50%);
|
||||
transition: opacity $material-enter-duration $material-enter-timing-function;
|
||||
&:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
&.portrait {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
&.sg-hide {
|
||||
opacity: 0;
|
||||
transition: opacity $material-enter-duration $material-enter-timing-function;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -3,4 +3,8 @@
|
|||
// ngCloak directive
|
||||
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sg-hide {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
@ -69,6 +69,7 @@
|
|||
@import 'components/draggable-droppable/draggable';
|
||||
@import 'components/draggable-droppable/droppable';
|
||||
@import 'components/hotkeys/hotkeys';
|
||||
@import 'components/imagegallery/imagegallery';
|
||||
@import 'components/ripple/ripple';
|
||||
@import 'components/timepicker/timepicker';
|
||||
@import 'components/pseudo-input/pseudo-input';
|
||||
|
|
|
@ -211,6 +211,10 @@ md-sidenav {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.sg-attachment-name {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.sg-attachment-size {
|
||||
@extend .md-caption;
|
||||
padding-left: $baseline-grid;
|
||||
|
|
Loading…
Reference in New Issue