(js) Zoomable custom avatar in card view
This commit is contained in:
parent
fecbd49541
commit
839384f77e
|
@ -50,10 +50,15 @@
|
||||||
*/
|
*/
|
||||||
sgAvatarImageController.$inject = ['$scope', '$element', '$http', '$q', 'Preferences', 'Gravatar'];
|
sgAvatarImageController.$inject = ['$scope', '$element', '$http', '$q', 'Preferences', 'Gravatar'];
|
||||||
function sgAvatarImageController($scope, $element, $http, $q, Preferences, Gravatar) {
|
function sgAvatarImageController($scope, $element, $http, $q, Preferences, Gravatar) {
|
||||||
var vm;
|
var vm, toggleZoomFcn;
|
||||||
|
|
||||||
vm = this;
|
vm = this;
|
||||||
|
|
||||||
|
$scope.$on('$destroy', function() {
|
||||||
|
if (toggleZoomFcn)
|
||||||
|
$element.off('click', toggleZoomFcn);
|
||||||
|
});
|
||||||
|
|
||||||
// Wait on user's defaults
|
// Wait on user's defaults
|
||||||
Preferences.ready().then(function() {
|
Preferences.ready().then(function() {
|
||||||
$scope.$watch(function() { return vm.email; }, function(email, old) {
|
$scope.$watch(function() { return vm.email; }, function(email, old) {
|
||||||
|
@ -75,6 +80,7 @@
|
||||||
// Set image URL and save the associated email address
|
// Set image URL and save the associated email address
|
||||||
vm.url = src;
|
vm.url = src;
|
||||||
vm.urlEmail = '' + vm.email;
|
vm.urlEmail = '' + vm.email;
|
||||||
|
configureZoomableAvatar();
|
||||||
hideGenericAvatar();
|
hideGenericAvatar();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -110,6 +116,15 @@
|
||||||
vm.genericImg.addClass('ng-hide');
|
vm.genericImg.addClass('ng-hide');
|
||||||
vm.img.removeClass('ng-hide');
|
vm.img.removeClass('ng-hide');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function configureZoomableAvatar() {
|
||||||
|
$element.addClass('sg-avatar-image--zoomable');
|
||||||
|
toggleZoomFcn = function() {
|
||||||
|
$element.toggleClass('sg-avatar-image--zoom');
|
||||||
|
};
|
||||||
|
$element.on('click', toggleZoomFcn);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
angular
|
angular
|
||||||
|
|
|
@ -0,0 +1,29 @@
|
||||||
|
/// avatarImage.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||||
|
|
||||||
|
$avatar-image-transition: $swift-ease-out;
|
||||||
|
|
||||||
|
.sg-avatar-image {
|
||||||
|
&--zoomable {
|
||||||
|
cursor: pointer;
|
||||||
|
img {
|
||||||
|
@extend .md-whiteframe-1dp;
|
||||||
|
transition: $avatar-image-transition;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
img {
|
||||||
|
@extend .md-whiteframe-3dp;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&--zoom {
|
||||||
|
height: auto;
|
||||||
|
max-width: 50%;
|
||||||
|
width: auto;
|
||||||
|
img {
|
||||||
|
border-radius: 0;
|
||||||
|
height: auto;
|
||||||
|
transition: $avatar-image-transition;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -63,6 +63,7 @@
|
||||||
@import 'components/whiteframe/whiteframe';
|
@import 'components/whiteframe/whiteframe';
|
||||||
|
|
||||||
// Inverse components
|
// Inverse components
|
||||||
|
@import 'components/avatarImage/avatarImage';
|
||||||
@import 'components/draggable-droppable/draggable';
|
@import 'components/draggable-droppable/draggable';
|
||||||
@import 'components/draggable-droppable/droppable';
|
@import 'components/draggable-droppable/droppable';
|
||||||
@import 'components/hotkeys/hotkeys';
|
@import 'components/hotkeys/hotkeys';
|
||||||
|
|
Loading…
Reference in a new issue