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

dashboard: add UI to change background image

Browse Source
This commit is contained in:
Johannes Zellner
2024-04-05 16:26:59 +02:00
parent 2515b032d0
commit 544b8180b2
4 changed files with 50 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/branding.html
+4 -3
View File
@@ -55,12 +55,13 @@
<div class="form-group">
<div>
<label class="control-label">{{ 'branding.background' | tr }}</label>
<div class="branding-background">
<input id="userBackgroundInput" type="checkbox" ng-model="background.enabled">
<label for="userBackgroundInput" class="control-label">Use background image</label>
<div class="branding-background" ng-show="background.enabled" ng-click="background.selectNew()">
<img ng-src="{{ background.url() }}"/>
<div class="overlay"></div>
</div>
<input type="file" id="backgroundFileInput" style="display: block" accept="image/*"/>
<input type="file" id="backgroundFileInput" style="display: none" accept="image/*"/>
</div>
</div>
dashboard/src/views/branding.js
+34 -14
View File
@@ -135,21 +135,33 @@ angular.module('Application').controller('BrandingController', ['$scope', '$loca
};
$scope.background = {
enabled: false,
file: null,
src: null,
newImageFile: null,
cacheBusting: Date.now(),
url: function () {
if ($scope.background.src) {
return $scope.background.src;
url() {
if ($scope.background.src) return $scope.background.src;
else return `${Client.apiOrigin}/api/v1/cloudron/background?${$scope.background.cacheBusting}`;
},
selectNew() {
document.getElementById('backgroundFileInput').click();
},
submit(callback) {
if ($scope.background.enabled) {
if ($scope.background.newImageFile) Client.changeCloudronBackground($scope.background.newImageFile, callback);
else callback();
} else {
return `${Client.apiOrigin}/api/v1/cloudron/background`;
Client.changeCloudronBackground(null, callback);
}
}
};
$('#backgroundFileInput').get(0).onchange = function (event) {
var fr = new FileReader();
document.getElementById('backgroundFileInput').onchange = function (event) {
const fr = new FileReader();
fr.onload = function () {
const image = new Image();
image.onload = function () {
@@ -191,7 +203,7 @@ angular.module('Application').controller('BrandingController', ['$scope', '$loca
avatar: null,
avatarBlob: null,
avatarUrl: function () {
avatarUrl() {
if ($scope.about.avatar) {
return $scope.about.avatar.data || $scope.about.avatar.url;
} else {
@@ -199,13 +211,22 @@ angular.module('Application').controller('BrandingController', ['$scope', '$loca
}
},
refresh: function () {
refresh() {
$scope.about.cloudronName = $scope.config.cloudronName;
$scope.about.avatar = null;
$scope.about.background = null;
Client.hasCloudronBackground(function (error, result) {
if (error) return console.error('Failed to get background state.', error);
$scope.background.enabled = result;
$scope.background.file = null;
$scope.background.src = null;
$scope.background.newImageFile = null;
$scope.background.cacheBusting = Date.now();
});
},
submit: function () {
submit() {
$scope.about.error.name = null;
$scope.about.busy = true;
@@ -233,8 +254,7 @@ angular.module('Application').controller('BrandingController', ['$scope', '$loca
return;
}
var changeBackground = $scope.background.newImageFile ? Client.changeCloudronBackground.bind(null, $scope.background.newImageFile) : NOOP;
changeBackground(function (error) {
$scope.background.submit(function (error) {
if (error) {
$scope.about.busy = false;
console.error('Unable to change background.', error);
@@ -246,8 +266,8 @@ angular.module('Application').controller('BrandingController', ['$scope', '$loca
$scope.aboutForm.$setPristine();
$scope.about.avatar = null;
$scope.background.file = null;
$scope.background.newImageFile = null;
$scope.about.refresh();
$scope.about.busy = false;
});
});