Improve avatar settings dialog

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

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>