ImagePicker fixes and use it also in app icon settings

dashboard/src/views/BrandingView.vue

@@ -11,8 +11,8 @@ import DashboardModel from '../models/DashboardModel.js';
 const brandingModel = BrandingModel.create();
 const dashboardModel = DashboardModel.create();
 
-let newBackgroundDataUrl = null;
-let newAvatarDataUrl = null;
+let newBackground = null;
+let newAvatar = null;
 
 const busy = ref(false);
 const name = ref('');
@@ -31,8 +31,8 @@ async function onSubmit() {
   [error] = await brandingModel.setFooter(footer.value);
   if (error) return console.error(error);
 
-  if (newBackgroundDataUrl) {
-    const [error] = await brandingModel.setBackground(newBackgroundDataUrl);
+  if (newBackground) {
+    const [error] = await brandingModel.setBackground(newBackground);
     if (error) {
       // TODO fetch() returns no proper status if entity is too large ??
       // if (error.status === 413) {
@@ -45,20 +45,20 @@ async function onSubmit() {
     }
   }
 
-  if (newAvatarDataUrl) {
-    const [error] = await brandingModel.setAvatar(newAvatarDataUrl);
+  if (newAvatar) {
+    const [error] = await brandingModel.setAvatar(newAvatar);
     if (error) return console.error(error);
   }
 
   busy.value = false;
 }
 
-function onAvatarChanged(dataUrl) {
-  newAvatarDataUrl = dataUrl;
+function onAvatarChanged(file) {
+  newAvatar = file;
 }
 
-function onBackgroundChanged(dataUrl) {
-  newBackgroundDataUrl = dataUrl;
+function onBackgroundChanged(file) {
+  newBackground = file;
 }
 
 onMounted(async () => {
@@ -108,74 +108,3 @@ onMounted(async () => {
     </Section>
   </div>
 </template>
-
-<style scoped>
-
-.cloudron-logo {
-  position: relative;
-  cursor: pointer;
-  width: 128px;
-  height: 128px;
-  background-position: center;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  border: 1px solid gray;
-  border-radius: 3px;
-  margin-bottom: 10px;
-}
-
-.cloudron-logo-edit-indicator {
-  position: absolute;
-  bottom: -4px;
-  right: -4px;
-  border-radius: 20px;
-  padding: 5px;
-  color: var(--pankow-text-color);
-  background-color: var(--pankow-input-background-color);
-  transition: all 250ms;
-}
-
-.cloudron-logo:hover .cloudron-logo-edit-indicator {
-  color: white;
-  background: var(--pankow-color-primary);
-  transform: scale(1.2);
-}
-
-.cloudron-background {
-  position: relative;
-  cursor: pointer;
-/*  width: 1280px;*/
-  width: auto;
-  height: 256px;
-  margin-bottom: 5px;
-  background-position: center;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  border: 1px solid gray;
-  border-radius: 3px;
-}
-
-.cloudron-background > img {
-  display: block;
-/*  width: 100%;*/
-  height: 100%;
-}
-
-.cloudron-background-edit-indicator {
-  position: absolute;
-  bottom: -4px;
-  right: -4px;
-  border-radius: 20px;
-  padding: 5px;
-  color: var(--pankow-text-color);
-  background-color: var(--pankow-input-background-color);
-  transition: all 250ms;
-}
-
-.cloudron-background:hover > .cloudron-background-edit-indicator {
-  color: white;
-  background: var(--pankow-color-primary);
-  transform: scale(1.2);
-}
-
-</style>