Add UI bits for setting backgroundImage

This commit is contained in:
Johannes Zellner
2022-05-14 19:41:47 +02:00
parent 41e2f7006f
commit ae0b5f010b
6 changed files with 109 additions and 1 deletions

View File

@@ -40,6 +40,28 @@
</div>
</div>
<!-- Modal change backgroundImage -->
<div class="modal fade" id="backgroundImageChangeModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{ 'profile.changeBackgroundImage.title' | tr }}</h4>
</div>
<div class="modal-body settings-avatar-selector">
<div class="preview-avatar">
<img id="previewBackgroundImage" width="100%" height="400px" class="copy" style="object-fit: cover;" ng-click="backgroundImageChange.showCustomBackgroundImageSelector()"/>
<input type="file" id="backgroundImageFileInput" style="display: none" accept="image/*"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger pull-left" ng-click="backgroundImageChange.unset()" ng-disabled="backgroundImageChange.busy"><i class="fa fa-circle-notch fa-spin" ng-show="backgroundImageChange.busy"></i> Remove Background Image</button>
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
<button type="button" class="btn btn-success" ng-click="backgroundImageChange.submit()" ng-disabled="backgroundImageChange.busy || !backgroundImageChange.pictureChanged"><i class="fa fa-circle-notch fa-spin" ng-show="backgroundImageChange.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">
@@ -390,6 +412,7 @@
<tr>
<td class="text-right" colspan="2" style="vertical-align: top;">
<br/>
<button class="btn btn-default" ng-click="backgroundImageChange.show()">Set Background Image</button>
<button class="btn" ng-class="user.twoFactorAuthenticationEnabled ? 'btn-danger' : 'btn-success'" ng-click="twoFactorAuthentication.show()">{{ user.twoFactorAuthenticationEnabled ? 'profile.disable2FAAction' : 'profile.enable2FAAction' | tr }}</button>
<button class="btn btn-primary" ng-click="passwordchange.show()" ng-hide="user.source">{{ 'profile.changePasswordAction' | tr }}</button>
</td>