mirror of https://github.com/nextcloud/contacts
Add avatar download and remove
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
parent
b301734c06
commit
09ac3b5a19
|
|
@ -71,18 +71,18 @@
|
|||
opacity: .8;
|
||||
}
|
||||
|
||||
.contactdetails__header .icon-delete-white,
|
||||
.contactdetails__header #contact-export-link {
|
||||
.contactdetails__header #details-actions .icon-delete-white,
|
||||
.contactdetails__header #details-actions #contact-export-link {
|
||||
padding: 15px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
opacity: .5;
|
||||
margin: 3px;
|
||||
}
|
||||
.contactdetails__header .icon-delete-white:hover,
|
||||
.contactdetails__header #details-actions .icon-delete-white:hover,
|
||||
.contactdetails__header .icon-delete-white:focus,
|
||||
.contactdetails__header #contact-export-link:hover,
|
||||
.contactdetails__header #contact-export-link:focus {
|
||||
.contactdetails__header #details-actions #contact-export-link:hover,
|
||||
.contactdetails__header #details-actions #contact-export-link:focus {
|
||||
opacity: .7
|
||||
}
|
||||
|
||||
|
|
@ -95,35 +95,37 @@ avatar {
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-upload {
|
||||
.avatar-options {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
font-size: 2.5em;
|
||||
line-height: 75px;
|
||||
|
||||
display: none;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.avatar-upload > .icon-upload-white {
|
||||
.avatar-options > [class^="icon-"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
}
|
||||
.avatar-upload:hover > .icon-upload-white {
|
||||
.avatar-options:hover > [class^="icon-"] {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.avatar-options> [class^="icon-"]:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
avatar:hover .avatar-upload,
|
||||
avatar.avatar--missing .avatar-upload {
|
||||
display: block;
|
||||
avatar:hover .avatar-options,
|
||||
avatar.avatar--missing .avatar-options {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.contactdetails__logo {
|
||||
|
|
|
|||
|
|
@ -4,4 +4,42 @@ angular.module('contactsApp')
|
|||
|
||||
ctrl.import = ContactService.import.bind(ContactService);
|
||||
|
||||
ctrl.removePhoto = function() {
|
||||
ctrl.contact.removeProperty('photo', ctrl.contact.getProperty('photo'));
|
||||
ContactService.update(ctrl.contact);
|
||||
};
|
||||
|
||||
ctrl.downloadPhoto = function() {
|
||||
/* globals ArrayBuffer, Uint8Array */
|
||||
var img = document.getElementById('contact-avatar');
|
||||
// atob to base64_decode the data-URI
|
||||
var imageSplit = img.src.split(',');
|
||||
// "data:image/png;base64" -> "png"
|
||||
var extension = '.' + imageSplit[0].split(';')[0].split('/')[1];
|
||||
var imageData = atob(imageSplit[1]);
|
||||
// Use typed arrays to convert the binary data to a Blob
|
||||
var arrayBuffer = new ArrayBuffer(imageData.length);
|
||||
var view = new Uint8Array(arrayBuffer);
|
||||
for (var i=0; i<imageData.length; i++) {
|
||||
view[i] = imageData.charCodeAt(i) & 0xff;
|
||||
}
|
||||
var blob = new Blob([arrayBuffer], {type: 'application/octet-stream'});
|
||||
|
||||
// Use the URL object to create a temporary URL
|
||||
var url = (window.webkitURL || window.URL).createObjectURL(blob);
|
||||
|
||||
var a = document.createElement('a');
|
||||
document.body.appendChild(a);
|
||||
a.style = 'display: none';
|
||||
a.href = url;
|
||||
a.download = ctrl.contact.uid() + extension;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
a.remove();
|
||||
};
|
||||
|
||||
ctrl.openPhoto = function() {
|
||||
|
||||
};
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,6 +4,11 @@ angular.module('contactsApp')
|
|||
scope: {
|
||||
contact: '=data'
|
||||
},
|
||||
controller: 'avatarCtrl',
|
||||
controllerAs: 'ctrl',
|
||||
bindToController: {
|
||||
contact: '=data'
|
||||
},
|
||||
link: function(scope, element) {
|
||||
var importText = t('contacts', 'Import');
|
||||
scope.importText = importText;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<img ng-show="contact.photo()!==undefined" class="contactdetails__logo avatar" data-ng-src="{{contact.photo()}}" />
|
||||
<div class="avatar-upload">
|
||||
<img ng-show="contact.photo()!==undefined" class="contactdetails__logo avatar" id="contact-avatar" data-ng-src="{{contact.photo()}}" />
|
||||
<div class="avatar-options">
|
||||
<input type="file" id="avatar-upload" class="hidden-visually"/>
|
||||
<label for="avatar-upload" class="icon-upload-white"></label>
|
||||
<div class="icon-delete-white" ng-show="contact.photo()!==undefined" ng-click="ctrl.removePhoto()"></div>
|
||||
<div class="icon-fullscreen-white" ng-show="contact.photo()!==undefined" ng-click="ctrl.openPhoto()"></div>
|
||||
<div class="icon-download-white" ng-show="contact.photo()!==undefined" ng-click="ctrl.downloadPhoto()"></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue