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

Have 3 explicit avatar options

Browse Source 
custom image, gravatar or none
This commit is contained in:
Johannes Zellner
2021-07-07 14:39:17 +02:00
parent 2caac75dbd
commit d292d5d419
4 changed files with 192 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/profile.html
+21 -14
View File
@@ -7,32 +7,39 @@
<h4 class="modal-title">{{ 'profile.changeAvatar.title' | tr }}</h4>
</div>
<div class="modal-body settings-avatar-selector">
<div class="radio">
<label>
<input type="radio" name="useGravatar" ng-model="avatarChange.useGravatar" value="true_string">
<span ng-bind-html="'profile.changeAvatar.useGravatar' | tr:{ gravatarLink: 'https://gravatar.com/' }"></span>
</label>
<div style="margin: auto; text-align: left">
<div class="radio">
<label>
<input type="radio" name="avatarType" ng-model="avatarChange.type" value="">
{{ 'profile.changeAvatar.noAvatar' | tr }}
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="avatarType" ng-model="avatarChange.type" value="gravatar">
<span ng-bind-html="'profile.changeAvatar.useGravatar' | tr:{ gravatarLink: 'https://gravatar.com/' }"></span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="avatarType" ng-model="avatarChange.type" value="custom">
{{ 'profile.changeAvatar.useCustomPicture' | tr }}
</label>
</div>
</div>
<div class="radio">
<label>
<input type="radio" name="useGravatar" ng-model="avatarChange.useGravatar" value="">
{{ 'profile.changeAvatar.useCustomPicture' | tr }}
</label>
</div>
<div ng-hide="avatarChange.useGravatar" class="preview-avatar">
<div ng-show="avatarChange.type === 'custom'" class="preview-avatar">
<img id="previewAvatar" width="128" height="128" class="copy" ng-click="avatarChange.showCustomAvatarSelector()"/>
<input type="file" id="avatarFileInput" style="display: none" accept="image/*"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
<button type="button" class="btn btn-success" ng-click="avatarChange.doChangeAvatar()" ng-disabled="avatarChange.busy || (avatarChange.useGravatarOrig === avatarChange.useGravatar && avatarChange.useGravatar) || (!avatarChange.useGravatar && !avatarChange.pictureChanged)"><i class="fa fa-circle-notch fa-spin" ng-show="avatarChange.busy"></i> {{ 'main.dialog.save' | tr }}</button>
<button type="button" class="btn btn-success" ng-click="avatarChange.doChangeAvatar()" ng-disabled="avatarChange.busy || (avatarChange.typeOrig === avatarChange.type && !avatarChange.pictureChanged) || (avatarChange.type === 'custom' && !avatarChange.pictureChanged)"><i class="fa fa-circle-notch fa-spin" ng-show="avatarChange.busy"></i> {{ 'main.dialog.save' | tr }}</button>
</div>
</div>
</div>
</div>
<!-- Modal change password -->
<div class="modal fade" id="passwordChangeModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
src/views/profile.js
+17 -11
View File
@@ -122,8 +122,8 @@ angular.module('Application').controller('ProfileController', ['$scope', '$trans
busy: false,
error: {},
avatar: null,
useGravatar: '',
useGravatarOrig: '',
type: '',
typeOrig: '',
pictureChanged: false,
getBlobFromImg: function (img, callback) {
@@ -176,13 +176,13 @@ angular.module('Application').controller('ProfileController', ['$scope', '$trans
});
}
if ($scope.avatarChange.useGravatar) {
Client.clearAvatar(done);
} else {
if ($scope.avatarChange.type === 'custom') {
var img = document.getElementById('previewAvatar');
$scope.avatarChange.getBlobFromImg(img, function (blob) {
Client.changeAvatar(blob, done);
});
} else {
Client.changeAvatar($scope.avatarChange.type, done);
}
},
@@ -194,13 +194,19 @@ angular.module('Application').controller('ProfileController', ['$scope', '$trans
avatarChangeReset: function () {
$scope.avatarChange.error.avatar = null;
$scope.avatarChange.useGravatar = $scope.user.avatarUrl.indexOf('https://www.gravatar.com') === 0 ? 'true_string' : '';
$scope.avatarChange.useGravatarOrig = $scope.avatarChange.useGravatar;
if ($scope.user.avatarUrl.indexOf('/api/v1/profile/avatar') !== -1) {
$scope.avatarChange.type = 'custom';
} else if ($scope.user.avatarUrl.indexOf('https://www.gravatar.com') === 0) {
$scope.avatarChange.type = 'gravatar';
} else {
$scope.avatarChange.type = '';
}
$scope.avatarChange.typeOrig = $scope.avatarChange.type;
document.getElementById('previewAvatar').src = $scope.avatarChange.type === 'custom' ? $scope.user.avatarUrl : '';
$scope.avatarChange.pictureChanged = false;
document.getElementById('previewAvatar').src = $scope.avatarChange.useGravatar ? '' : $scope.user.avatarUrl;
$scope.avatarChange.avatar = $scope.avatarChange.useGravatar ? {} : {
url: $scope.user.avatarUrl
};
$scope.avatarChange.avatar = null;
$scope.avatarChange.busy = false;
},