MID-8097 better behaviour for role catalog menu

Evolveum · Sep 14, 2022 · c83d80a · c83d80a
1 parent 65fa3f8
commit c83d80a
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 57 deletions.
diff --git a/gui/admin-gui/src/frontend/scss/_list-group-menu.scss b/gui/admin-gui/src/frontend/scss/_list-group-menu.scss
@@ -35,14 +35,38 @@ $list-group-item-padding-sm-x: 1rem;
   color: $list-group-color;
   background-color: $list-group-bg;
 
-  & > a.item-link {
+  & > .item {
     display: flex;
+    flex-direction: row;
     flex-wrap: nowrap;
-    align-items: center;
-    // todo for "sm" version 0.5rem 1rem
     padding: $list-group-item-padding-y $list-group-item-padding-x;
     color: inherit;
 
+    & > .item-link {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      flex-grow: 1;
+      color: inherit;
+      overflow: hidden;
+
+      & > i.icon {
+        margin-right: 1rem;
+      }
+
+      & > span.label {
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    & > .chevron {
+      margin-left: 10px;
+      color: inherit;
+    }
+
     @include hover-focus() {
       z-index: 1; // Place hover/focus items above their siblings for proper border styling
       color: $list-group-action-hover-color;
@@ -69,21 +93,6 @@ $list-group-item-padding-sm-x: 1rem;
       color: $list-group-action-active-color;
       background-color: $list-group-action-active-bg;
     }
-
-    & > i.icon {
-      margin-right: 1rem;
-    }
-
-    & > span.label {
-      flex-grow: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    & > i.chevron {
-      margin-left: 10px;
-    }
   }
 
   & > .form-control {
@@ -104,15 +113,15 @@ $list-group-item-padding-sm-x: 1rem;
   &:first-child {
     @include border-top-radius(inherit);
 
-    & > a.item-link {
+    & > div.item {
       @include border-top-radius(inherit);
     }
   }
 
   &:last-child {
     @include border-bottom-radius(inherit);
 
-    & > a.item-link:last-child {
+    & > div.item:last-child {
       @include border-bottom-radius(inherit);
     }
   }
@@ -126,7 +135,7 @@ $list-group-item-padding-sm-x: 1rem;
     }
   }
 
-  &.open > .item-link > .chevron {
+  &.open > .item-link > .chevron > i {
     transform: rotate(270deg);
   }
 }
@@ -140,12 +149,12 @@ $list-group-item-padding-sm-x: 1rem;
   border-radius: inherit;
 
   // 3rd level padding
-  & .list-group-submenu > .list-group-submenu-item > a {
+  & .list-group-submenu > .list-group-submenu-item > div {
     padding-left: 3.25rem;
   }
 
   // 2nd level padding
-  & > a.item-link {
+  & > div.item {
     padding-left: 2rem;
   }
 }
@@ -156,12 +165,13 @@ a.item-link > .form-control {
 
 .list-group-menu-sm {
 
-  & a.item-link {
+  & .item {
     padding: $list-group-item-padding-sm-y $list-group-item-padding-sm-x;
   }
 
   & .list-group-menu-item,
   & .list-group-submenu-item {
+    & > .input-group,
     & > .form-control {
       margin: 0.5rem;
       width: auto;

diff --git a/...i/src/main/java/com/evolveum/midpoint/gui/impl/page/self/requestAccess/ListGroupMenu.java b/...i/src/main/java/com/evolveum/midpoint/gui/impl/page/self/requestAccess/ListGroupMenu.java
@@ -29,17 +29,21 @@ public void setItems(List<ListGroupMenuItem<T>> items) {
         this.items = items;
     }
 
-    public void onItemClickPerformed(ListGroupMenuItem item) {
+    public void onItemChevronClickPerformed(ListGroupMenuItem item) {
         if (item.isEmpty()) {
-            getItems().forEach(this::deactivateItem);
-            item.setActive(true);
-
             return;
         }
 
         item.setOpen(!item.isOpen());
     }
 
+    public void onItemClickPerformed(ListGroupMenuItem item) {
+        onItemChevronClickPerformed(item);
+
+        getItems().forEach(this::deactivateItem);
+        item.setActive(true);
+    }
+
     public void activateFirstAvailableItem() {
         for (ListGroupMenuItem i : getItems()) {
             if (activateFirstAvailableItem(i)) {

diff --git a/...n/java/com/evolveum/midpoint/gui/impl/page/self/requestAccess/ListGroupMenuItemPanel.java b/...n/java/com/evolveum/midpoint/gui/impl/page/self/requestAccess/ListGroupMenuItemPanel.java
@@ -54,6 +54,11 @@ private void initLayout() {
             protected void onClickPerformed(AjaxRequestTarget target, ListGroupMenuItem item) {
                 ListGroupMenuItemPanel.this.onClickPerformed(target, item);
             }
+
+            @Override
+            protected void onChevronClickPerformed(AjaxRequestTarget target, ListGroupMenuItem item) {
+                ListGroupMenuItemPanel.this.onChevronClickPerformed(target, item);
+            }
         };
         add(link);
 
@@ -81,6 +86,11 @@ protected void populateItem(ListItem<ListGroupMenuItem<T>> item) {
                     protected void onClickPerformed(AjaxRequestTarget target, ListGroupMenuItem item) {
                         ListGroupMenuItemPanel.this.onClickPerformed(target, item);
                     }
+
+                    @Override
+                    protected void onChevronClickPerformed(AjaxRequestTarget target, ListGroupMenuItem item) {
+                        ListGroupMenuItemPanel.this.onChevronClickPerformed(target, item);
+                    }
                 });
             }
         };
@@ -90,4 +100,8 @@ protected void onClickPerformed(AjaxRequestTarget target, ListGroupMenuItem item
     protected void onClickPerformed(AjaxRequestTarget target, ListGroupMenuItem item) {
 
     }
+
+    protected void onChevronClickPerformed(AjaxRequestTarget target, ListGroupMenuItem item) {
+
+    }
 }
diff --git a/.../main/java/com/evolveum/midpoint/gui/impl/page/self/requestAccess/ListGroupMenuPanel.java b/.../main/java/com/evolveum/midpoint/gui/impl/page/self/requestAccess/ListGroupMenuPanel.java
@@ -64,6 +64,11 @@ protected void populateItem(ListItem<ListGroupMenuItem<T>> item) {
                     protected void onClickPerformed(AjaxRequestTarget target, ListGroupMenuItem item) {
                         ListGroupMenuPanel.this.onMenuClickPerformed(target, item);
                     }
+
+                    @Override
+                    protected void onChevronClickPerformed(AjaxRequestTarget target, ListGroupMenuItem item) {
+                        ListGroupMenuPanel.this.onChevronClickPerformed(target, item);
+                    }
                 };
                 item.add(menu);
             }
@@ -76,4 +81,10 @@ protected void onMenuClickPerformed(AjaxRequestTarget target, ListGroupMenuItem<
 
         target.add(this);
     }
+
+    protected void onChevronClickPerformed(AjaxRequestTarget target, ListGroupMenuItem<T> item) {
+        getModelObject().onItemChevronClickPerformed(item);
+
+        target.add(this);
+    }
 }
diff --git a/...c/main/java/com/evolveum/midpoint/gui/impl/page/self/requestAccess/MenuItemLinkPanel.html b/...c/main/java/com/evolveum/midpoint/gui/impl/page/self/requestAccess/MenuItemLinkPanel.html
@@ -11,7 +11,9 @@
         <i class="icon" wicket:id="icon"></i>
         <span class="label" wicket:id="label">All roles</span>
         <span class="badge badge-primary badge-pill" wicket:id="badge">14</span>
-        <i class="chevron" wicket:id="chevron"></i>
+    </a>
+    <a href="#" class="chevron" wicket:id="chevronLink">
+        <i wicket:id="chevron"></i>
     </a>
 </wicket:panel>
 </html>
diff --git a/...c/main/java/com/evolveum/midpoint/gui/impl/page/self/requestAccess/MenuItemLinkPanel.java b/...c/main/java/com/evolveum/midpoint/gui/impl/page/self/requestAccess/MenuItemLinkPanel.java
@@ -33,6 +33,7 @@ public abstract class MenuItemLinkPanel<T extends Serializable> extends BasePane
     private static final String ID_LABEL = "label";
     private static final String ID_BADGE = "badge";
     private static final String ID_CHEVRON = "chevron";
+    private static final String ID_CHEVRON_LINK = "chevronLink";
 
     public MenuItemLinkPanel(String id, IModel<ListGroupMenuItem<T>> model) {
         super(id, model);
@@ -41,17 +42,16 @@ public MenuItemLinkPanel(String id, IModel<ListGroupMenuItem<T>> model) {
     }
 
     private void initLayout() {
-        setRenderBodyOnly(true);
-
+        add(AttributeAppender.append("class", "item"));
+        add(AttributeAppender.append("class", () -> getModelObject().isActive() ? "active" : null));
+        add(AttributeAppender.append("class", () -> getModelObject().isDisabled() ? "disabled" : null));
         AjaxLink link = new AjaxLink<>(ID_LINK) {
 
             @Override
             public void onClick(AjaxRequestTarget target) {
                 onClickPerformed(target, MenuItemLinkPanel.this.getModelObject());
             }
         };
-        link.add(AttributeAppender.append("class", () -> getModelObject().isActive() ? "active" : null));
-        link.add(AttributeAppender.append("class", () -> getModelObject().isDisabled() ? "disabled" : null));
         link.setOutputMarkupId(true);
         add(link);
 
@@ -70,14 +70,23 @@ public void onClick(AjaxRequestTarget target) {
         badge.add(new VisibleBehaviour(() -> StringUtils.isNotEmpty(getModelObject().getBadge())));
         link.add(badge);
 
-        WebMarkupContainer chevron = new WebMarkupContainer(ID_CHEVRON);
-        chevron.add(AttributeAppender.append("class",
-                () -> getModelObject().isActive() ? "fa fa-chevron-down" : "fa fa-chevron-left"));
-        chevron.add(new VisibleBehaviour(() -> {
+        AjaxLink chevronLink = new AjaxLink<>(ID_CHEVRON_LINK) {
+            @Override
+            public void onClick(AjaxRequestTarget target) {
+                onChevronClickPerformed(target, MenuItemLinkPanel.this.getModelObject());
+            }
+        };
+        chevronLink.add(new VisibleBehaviour(() -> {
             ListGroupMenuItem item = getModelObject();
             return StringUtils.isEmpty(item.getBadge()) && !item.isEmpty();
         }));
-        link.add(chevron);
+        add(chevronLink);
+
+        WebMarkupContainer chevron = new WebMarkupContainer(ID_CHEVRON);
+        chevron.add(AttributeAppender.append("class",
+                () -> getModelObject().isOpen() ? "fa fa-chevron-down" : "fa fa-chevron-left"));
+
+        chevronLink.add(chevron);
     }
 
     private IModel<String> createLabelModel() {
@@ -90,4 +99,8 @@ private IModel<String> createLabelModel() {
     protected void onClickPerformed(AjaxRequestTarget target, ListGroupMenuItem item) {
 
     }
+
+    protected void onChevronClickPerformed(AjaxRequestTarget target, ListGroupMenuItem item) {
+
+    }
 }
diff --git a/.../java/com/evolveum/midpoint/gui/impl/page/self/requestAccess/RoleOfTeammateMenuPanel.java b/.../java/com/evolveum/midpoint/gui/impl/page/self/requestAccess/RoleOfTeammateMenuPanel.java
@@ -7,8 +7,23 @@
 
 package com.evolveum.midpoint.gui.impl.page.self.requestAccess;
 
-import com.evolveum.midpoint.gui.api.component.BasePanel;
+import java.io.Serializable;
+import java.util.Collection;
+import java.util.List;
+import java.util.stream.Collectors;
+
+import org.apache.wicket.ajax.AjaxRequestTarget;
+import org.apache.wicket.ajax.form.AjaxFormComponentUpdatingBehavior;
+import org.apache.wicket.ajax.markup.html.AjaxLink;
+import org.apache.wicket.behavior.AttributeAppender;
+import org.apache.wicket.markup.html.WebMarkupContainer;
+import org.apache.wicket.model.IModel;
+import org.apache.wicket.model.Model;
+import org.wicketstuff.select2.ChoiceProvider;
+import org.wicketstuff.select2.Response;
+import org.wicketstuff.select2.Select2Choice;
 
+import com.evolveum.midpoint.gui.api.component.BasePanel;
 import com.evolveum.midpoint.gui.api.util.WebComponentUtil;
 import com.evolveum.midpoint.gui.api.util.WebModelServiceUtils;
 import com.evolveum.midpoint.prism.PrismObject;
@@ -19,27 +34,9 @@
 import com.evolveum.midpoint.util.logging.Trace;
 import com.evolveum.midpoint.util.logging.TraceManager;
 import com.evolveum.midpoint.web.component.util.VisibleBehaviour;
-
 import com.evolveum.midpoint.xml.ns._public.common.common_3.ObjectReferenceType;
-
 import com.evolveum.midpoint.xml.ns._public.common.common_3.UserType;
 
-import org.apache.wicket.ajax.AjaxRequestTarget;
-import org.apache.wicket.ajax.form.AjaxFormComponentUpdatingBehavior;
-import org.apache.wicket.ajax.markup.html.AjaxLink;
-import org.apache.wicket.behavior.AttributeAppender;
-import org.apache.wicket.markup.html.WebMarkupContainer;
-import org.apache.wicket.model.IModel;
-import org.apache.wicket.model.Model;
-import org.wicketstuff.select2.ChoiceProvider;
-import org.wicketstuff.select2.Response;
-import org.wicketstuff.select2.Select2Choice;
-
-import java.io.Serializable;
-import java.util.Collection;
-import java.util.List;
-import java.util.stream.Collectors;
-
 /**
  * Created by Viliam Repan (lazyman).
  */