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

35
src/views/profile.html
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">