Fix for sidemenu image behaviour when atypical image uploaded

Evolveum · Jan 18, 2024 · 72a48e1 · 72a48e1
1 parent 9895963
commit 72a48e1
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 9 deletions.
diff --git a/gui/admin-gui/src/frontend/scss/_admin-lte-overrides.scss b/gui/admin-gui/src/frontend/scss/_admin-lte-overrides.scss
@@ -5,6 +5,27 @@
  * and European Union Public License. See LICENSE file for details.
  */
 
+.main-sidebar .sidebar > .user-panel {
+  & > .image {
+    padding-left: 0.8rem;
+    position: relative;
+    width: 100%;
+    min-width: 2.85rem;
+    max-width: 3.5rem;
+    transition: all ease 0.08s !important;
+    -webkit-transition: all ease 0.08s !important;
+
+    & > .user-image {
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      position: relative;
+      height: 0;
+      padding-bottom: 100%;
+    }
+  }
+}
+
 .user-panel {
   border-bottom: 0 !important;
 

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/menu/SideBarMenuPanel.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/menu/SideBarMenuPanel.html
@@ -9,7 +9,7 @@
 <wicket:panel>
     <div class="user-panel pb-2 pt-3 d-flex align-items-center">
         <div class="image">
-            <img wicket:id="menuPhoto" class="user-image img-circle elevation-1" wicket:message="alt:SideBarMenuPanel.loginUserPhoto"/>
+            <div wicket:id="menuPhoto" class="user-image img-circle elevation-1" wicket:message="alt:SideBarMenuPanel.loginUserPhoto"/>
         </div>
         <div class="info" tabindex="0" role="region">
             <div class="sr-only"><wicket:message key="SideBarMenuPanel.loginUser"/></div>

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/menu/SideBarMenuPanel.java b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/menu/SideBarMenuPanel.java
@@ -8,6 +8,7 @@
 
 import java.io.IOException;
 import java.net.URL;
+import java.util.Base64;
 import java.util.List;
 import java.util.Map;
 
@@ -20,14 +21,11 @@
 import org.apache.wicket.behavior.Behavior;
 import org.apache.wicket.markup.html.WebMarkupContainer;
 import org.apache.wicket.markup.html.basic.Label;
-import org.apache.wicket.markup.html.image.NonCachingImage;
 import org.apache.wicket.markup.html.list.ListItem;
 import org.apache.wicket.markup.html.list.ListView;
 import org.apache.wicket.model.IModel;
 import org.apache.wicket.model.Model;
 import org.apache.wicket.model.PropertyModel;
-import org.apache.wicket.request.resource.AbstractResource;
-import org.apache.wicket.request.resource.ByteArrayResource;
 import org.springframework.security.core.context.SecurityContextHolder;
 
 import com.evolveum.midpoint.authentication.api.util.AuthUtil;
@@ -72,8 +70,13 @@ protected void onInitialize() {
     }
 
     protected void initLayout() {
-        NonCachingImage img = new NonCachingImage(ID_MENU_PHOTO, loadJpegPhotoModel());
-        add(img);
+        //NonCachingImage img = new NonCachingImage(ID_MENU_PHOTO, loadJpegPhotoUrlModel());
+        //add(img);
+        IModel<String> photoUrlModel = loadJpegPhotoUrlModel();
+        WebMarkupContainer photoContainer = new WebMarkupContainer("menuPhoto");
+        photoContainer.add(AttributeAppender.append("style", "background-image: url('" + photoUrlModel.getObject() + "');"));
+        add(photoContainer);
+
 
         Label username = new Label(ID_USERNAME, () -> getShortUserName());
         add(username);
@@ -125,7 +128,7 @@ private String getShortUserName() {
         return principal.toString();
     }
 
-    private IModel<AbstractResource> loadJpegPhotoModel() {
+    private IModel<String> loadJpegPhotoUrlModel() {
         return () -> {
             GuiProfiledPrincipal principal = AuthUtil.getPrincipalUser();
             if (principal == null) {
@@ -146,8 +149,8 @@ private IModel<AbstractResource> loadJpegPhotoModel() {
                     return null;
                 }
             }
-
-            return new ByteArrayResource("image/jpeg", jpegPhoto);
+            String base64Encoded = Base64.getEncoder().encodeToString(jpegPhoto);
+            return "data:image/jpeg;base64," + base64Encoded;
         };
     }