Updated details-menu item alignment of badges (first solution), updat…

…ed details-menu panel
Evolveum · Sep 18, 2023 · 419f42c · 419f42c
1 parent 4ebf4d4
commit 419f42c
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 13 deletions.
diff --git a/gui/admin-gui/src/frontend/scss/details-menu.scss b/gui/admin-gui/src/frontend/scss/details-menu.scss
@@ -17,11 +17,44 @@
   //top: 0;
   right: 0;
   overflow-x: hidden;
-  padding-top: 16px;
+  //padding-top: 16px;
+  margin: 0;
+
+  & a > div > i.fas,
+  a > div > i.far,
+  a > div > i.fa,
+  a > div > i.fe {
+    min-width: 24px;
+    text-align: center;
+  }
+
+  & a > div > div {
+    min-width: 9rem;
+    max-width: 14rem;
+    padding-right: 0.75rem;
+    padding-left: 0.5rem;
+  }
+
+  & a .details-menu-items {
+    align-items: center;
+    //min-width: 42px;
+    justify-content: end;
+  }
+
+  & a .details-menu-items .details-caret {
+    width: 1.15rem;
+    line-height:normal;
+  }
 
   & > li.navigation-details {
     list-style: none;
-    margin: 0px 10px 0px 5px;
+    border-radius: 0.25rem;
+    overflow: hidden;
+    //margin: 0px 10px 0px 5px;
+
+    &:not(:last-child){
+      margin-bottom: 0.2rem;
+    }
 
     .navigation-details {
       display: none;
@@ -49,12 +82,15 @@
         display: block;
       }
 
-      > a > .fa-angle-left {
+      & > a .fa-angle-left {
         transform: rotate(270deg);
       }
     }
   }
 
+//.details-menu a>i.fa,.details-menu a>i.fe{width:20px}
+
+
   .details-menu {
     padding-top: 0px;
     background-color: $sidebar-light-submenu-bg;
@@ -169,12 +205,13 @@
 
 
 .details-menu a {
-  padding: 6px 8px 6px 5px;
   text-decoration: none;
   font-size: 15px;
   color: $sidebar-light-color;
   display: block;
   cursor: pointer;
+  padding: 8px 8px 8px 10px;
+  border-radius: 0.25rem;
 
   & > i {
     padding-right: 5px;
@@ -187,6 +224,10 @@
       width: 20px;
     }
   }
+  & .details-caret i {
+    width: 100%;
+    text-align: center;
+  }
 }
 
 .details-menu a:hover {
@@ -195,5 +236,9 @@
 }
 
 ul.details-menu {
-  padding-inline-start: 13px;
+  padding-inline-start: 0px;
+
+  & ul {
+    padding-inline-start: 13px;
+  }
 }
diff --git a/gui/admin-gui/src/frontend/scss/midpoint.scss b/gui/admin-gui/src/frontend/scss/midpoint.scss
@@ -1578,6 +1578,8 @@ fieldset.objectButtons {
   flex-direction: row;
   align-items: stretch;
   background-color: $white;
+  overflow: hidden;
+  box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
 }
 
 .details-panel-navigation {
@@ -1944,3 +1946,12 @@ th.debug-list-buttons {
 .lh-2 {
   line-height: 1.5;
 }
+
+//Grouped classes with smooth-transition function
+.details-menu a,
+.details-menu a:hover,
+.nav-sidebar .nav-item > .nav-link,
+.nav-sidebar .nav-item > .nav-link:hover
+{
+  @include smooth-transition(0.08s);
+}
diff --git a/...i/src/main/java/com/evolveum/midpoint/gui/impl/component/menu/DetailsNavigationPanel.html b/...i/src/main/java/com/evolveum/midpoint/gui/impl/component/menu/DetailsNavigationPanel.html
@@ -12,13 +12,17 @@
         <ul class="details-menu">
             <wicket:container wicket:id="menu">
                 <li class="navigation-details" wicket:id="navLinkStyle">
-                    <a wicket:id="navItemLink" class="d-flex align-items-center" >
-                        <i class="mr-1" wicket:id="navItemIcon"></i>
-                        <span class="flex-grow-1 details-menu-label" wicket:id="navItem"></span>
-                        <span class="d-flex">
+                    <a wicket:id="navItemLink" class="d-flex align-items-center">
+                        <div class="d-flex flex-grow-1 mr-auto align-items-center">
+                            <i wicket:id="navItemIcon"></i>
+                            <div class="text-truncate" wicket:id="navItem"></div>
+                        </div>
+                        <div class="d-flex gap-1 flex-grow-1 details-menu-items align-items-center">
                             <span class="badge bg-blue" wicket:id="count"></span>
-                            <i class="fa fa-fw fa-angle-left" wicket:id="submenuLink"></i>
-                        </span>
+                            <span class="details-caret">
+                                <i class="fa fa-angle-left" wicket:id="submenuLink"></i>
+                            </span>
+                        </div>
                     </a>
                     <div wicket:id="subNavigation"/>
                 </li>

diff --git a/...i/src/main/java/com/evolveum/midpoint/gui/impl/component/menu/DetailsNavigationPanel.java b/...i/src/main/java/com/evolveum/midpoint/gui/impl/component/menu/DetailsNavigationPanel.java
@@ -140,7 +140,7 @@ protected void onError(AjaxRequestTarget target) {
                 target.add(getPageBase().getFeedbackPanel());
             }
         };
-
+        link.add(AttributeAppender.append("title", createButtonLabel(item.getModel())));
         addIcon(link, item);
         addLabel(link, item);
         addCount(link, item);

diff --git a/...ui/src/main/java/com/evolveum/midpoint/gui/impl/page/admin/AbstractPageObjectDetails.html b/...ui/src/main/java/com/evolveum/midpoint/gui/impl/page/admin/AbstractPageObjectDetails.html
@@ -20,7 +20,7 @@
 
                 <div class="details-panel">
                     <wicket:enclosure child="navigation">
-                        <div class="details-panel-navigation" wicket:id="navigation"/>
+                        <div class="details-panel-navigation p-2" wicket:id="navigation"/>
                     </wicket:enclosure>
                     <div class="details-panel-details-form" wicket:id="mainPanel"/>
                 </div>