jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Improve avatar settings dialog

Browse Source
This commit is contained in:
Johannes Zellner
2019-12-12 15:34:26 +01:00
parent fd528edfed
commit 2eeb99e869
4 changed files with 48 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/profile.html
+17 -4
View File
@@ -7,13 +7,26 @@
<h4 class="modal-title">Change your Avatar</h4>
</div>
<div class="modal-body settings-avatar-selector">
<img id="previewAvatar" width="128" height="128" class="hand" ng-src="{{avatarChange.avatar.data || avatarChange.avatar.url}}" ng-click="avatarChange.showCustomAvatarSelector()"/>
<input type="file" id="avatarFileInput" style="display: none" accept="image/png"/>
<div class="radio">
<label>
<input type="radio" name="useGravatar" ng-model="avatarChange.useGravatar" value="true_string">
Use Gravatar
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="useGravatar" ng-model="avatarChange.useGravatar" value="">
Use Custom Picture
</label>
</div>
<div ng-hide="avatarChange.useGravatar" class="preview-avatar">
<img id="previewAvatar" width="128" height="128" class="copy" ng-src="{{avatarChange.avatar.data || avatarChange.avatar.url}}" ng-click="avatarChange.showCustomAvatarSelector()"/>
<input type="file" id="avatarFileInput" style="display: none" accept="image/png"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" ng-click="avatarChange.clearAvatar()">Use Gravatar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" ng-click="avatarChange.doChangeAvatar()" ng-disabled="avatarChange.busy"><i class="fa fa-circle-notch fa-spin" ng-show="avatarChange.busy"></i> Change</button>
<button type="button" class="btn btn-success" ng-click="avatarChange.doChangeAvatar()" ng-disabled="avatarChange.busy || (avatarChange.useGravatarOrig === avatarChange.useGravatar && (avatarChange.useGravatar || !avatarChange.pictureChanged))"><i class="fa fa-circle-notch fa-spin" ng-show="avatarChange.busy"></i> Save</button>
</div>
</div>
</div>
src/views/profile.js
+22 -22
View File
@@ -101,6 +101,9 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
busy: false,
error: {},
avatar: null,
useGravatar: '',
useGravatarOrig: '',
pictureChanged: false,
getBlobFromImg: function (img, callback) {
var size = 256;
@@ -137,9 +140,12 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
canvas.toBlob(callback);
},
clearAvatar: function () {
Client.clearAvatar(function (error) {
if (error) return console.error(error);
doChangeAvatar: function () {
$scope.avatarChange.error.avatar = null;
$scope.avatarChange.busy = true;
function done(error) {
if (error) return console.error('Unable to change avatar.', error);
Client.refreshUserInfo(function (error) {
if (error) return console.error(error);
@@ -147,35 +153,29 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
$('#avatarChangeModal').modal('hide');
$scope.avatarChange.avatarChangeReset();
});
});
},
}
doChangeAvatar: function () {
$scope.avatarChange.error.avatar = null;
$scope.avatarChange.busy = true;
var img = document.getElementById('previewAvatar');
$scope.avatarChange.avatar.file = $scope.avatarChange.getBlobFromImg(img, function (blob) {
Client.changeAvatar(blob, function (error) {
if (error) return console.error('Unable to change cloudron avatar.', error);
Client.refreshUserInfo(function (error) {
if (error) return console.error(error);
$('#avatarChangeModal').modal('hide');
$scope.avatarChange.avatarChangeReset();
});
if ($scope.avatarChange.useGravatar) {
Client.clearAvatar(done);
} else {
var img = document.getElementById('previewAvatar');
$scope.avatarChange.getBlobFromImg(img, function (blob) {
Client.changeAvatar(blob, done);
});
});
}
},
setPreviewAvatar: function (avatar) {
$scope.avatarChange.pictureChanged = true;
$scope.avatarChange.avatar = avatar;
},
avatarChangeReset: function () {
$scope.avatarChange.error.avatar = null;
$scope.avatarChange.avatar = {
$scope.avatarChange.useGravatar = $scope.user.avatarUrl.indexOf('https://www.gravatar.com') === 0 ? 'true_string' : '';
$scope.avatarChange.useGravatarOrig = $scope.avatarChange.useGravatar;
$scope.avatarChange.pictureChanged = false;
$scope.avatarChange.avatar = $scope.avatarChange.useGravatar ? {} : {
url: $scope.user.avatarUrl
};
$scope.avatarChange.busy = false;