MID-8895 - Remastered layout and style, MID-9123 - Updated width of s…

…earch bar input, Opaque badges update
Evolveum · Sep 27, 2023 · 50de97f · 50de97f
1 parent e1fd28c
commit 50de97f
Show file tree

Hide file tree

Showing 30 changed files with 153 additions and 132 deletions.
diff --git a/gui/admin-gui/src/frontend/js/midpoint-theme.js b/gui/admin-gui/src/frontend/js/midpoint-theme.js
@@ -157,25 +157,21 @@ export default class MidPointTheme {
         });
     }
 
-    breakLongerTextInTableCell(cellId) {
-        $("#" + cellId).css("word-break", function (index, origValue) {
-            var textOfColumn = document.getElementById(cellId).innerText.trim();
-            var permittedChars = "@" //Just add other permitted chars to string if needed
-            if (textOfColumn != '' && textOfColumn != ' ' && !Array.from(permittedChars).some(char => textOfColumn.includes(char)))
-            {
-                var numberOfChars = 16;
-
-                if (textOfColumn.length >= numberOfChars) {
-                    var indexOfSpace = textOfColumn.indexOf(' ');
-
-                    if (indexOfSpace === -1 || indexOfSpace >= numberOfChars) {
-                        return "break-all";
-                    }
-                }
+breakLongerTextInTableCell(cellId) {
+    $("#" + cellId).css("word-break", function (index, origValue) {
+        var textOfColumn = document.getElementById(cellId).innerText.trim();
+        if (textOfColumn != '' && textOfColumn != ' ') {
+            var numberOfChars = 15;
+            var regex = new RegExp(`[^\\s]{${numberOfChars}}`);
+
+            // Check if there are 15 consecutive non-whitespace characters anywhere in the string
+            if (regex.test(textOfColumn)) {
+                return "break-all";
             }
-            return "inherit";
-        });
-    }
+        }
+        return "inherit";
+    });
+}
 
     // I'm not sure why sidebar has 15px padding -> and why I had to use 10px constant here [lazyman]
     fixContentHeight() {

diff --git a/gui/admin-gui/src/frontend/scss/_admin-lte-overrides.scss b/gui/admin-gui/src/frontend/scss/_admin-lte-overrides.scss
@@ -50,3 +50,6 @@
   padding: 0 20px 10px;
 }
 
+.popover {
+  z-index:1040;
+}
diff --git a/gui/admin-gui/src/frontend/scss/midpoint.scss b/gui/admin-gui/src/frontend/scss/midpoint.scss
@@ -1599,7 +1599,7 @@ fieldset.objectButtons {
   order: 2;
   flex-basis: 83%;
   max-width: 83%;
-  padding: 5px 20px 5px 20px;
+  padding: 20px; //5px 20px 5px 20px;
 }
 
 .messagePanel ::-moz-selection { /* Code for Firefox */
@@ -1929,13 +1929,13 @@ th.debug-list-buttons {
       color: $value;
       background-color: mix(#ffffff, $value, 85%);
       border-color: $value;
+      border:1px solid;
 
       option {
         background: $white;
         color: $dark;
       }
-    }
-
+  }
 }
 
 #toastsContainerTopRight.toasts-top-right {

diff --git a/.../java/com/evolveum/midpoint/gui/impl/component/button/SelectableItemListPopoverPanel.html b/.../java/com/evolveum/midpoint/gui/impl/component/button/SelectableItemListPopoverPanel.html
@@ -7,7 +7,7 @@
   -->
 <wicket:panel xmlns:wicket="http://wicket.apache.org">
     <div wicket:id="popover">
-        <div class="search-popover">
+        <div class="search-popover popover-body">
             <input wicket:id="searchText" type="text" class="form-control form-control-sm mt-1 mb-2" style="width: auto;" size="20">
 
             <dl class="border-bottom mb-2" wicket:id="itemList">

diff --git a/.../java/com/evolveum/midpoint/gui/impl/component/data/column/LifecycleStateBadgeColumn.java b/.../java/com/evolveum/midpoint/gui/impl/component/data/column/LifecycleStateBadgeColumn.java
@@ -7,9 +7,20 @@
 
 package com.evolveum.midpoint.gui.impl.component.data.column;
 
+import java.util.List;
+import java.util.Optional;
+
+import org.apache.commons.lang3.StringUtils;
+import org.apache.wicket.Component;
+import org.apache.wicket.behavior.AttributeAppender;
+import org.apache.wicket.extensions.markup.html.repeater.data.grid.ICellPopulator;
+import org.apache.wicket.extensions.markup.html.repeater.data.table.AbstractColumn;
+import org.apache.wicket.markup.html.basic.Label;
+import org.apache.wicket.markup.repeater.Item;
+import org.apache.wicket.model.IModel;
+
 import com.evolveum.midpoint.gui.api.component.Badge;
 import com.evolveum.midpoint.gui.api.component.BadgeListPanel;
-import com.evolveum.midpoint.gui.api.component.BadgePanel;
 import com.evolveum.midpoint.gui.api.page.PageBase;
 import com.evolveum.midpoint.gui.api.util.DisplayForLifecycleState;
 import com.evolveum.midpoint.gui.api.util.LocalizationUtil;
@@ -19,26 +30,11 @@
 import com.evolveum.midpoint.prism.PrismProperty;
 import com.evolveum.midpoint.schema.constants.SchemaConstants;
 import com.evolveum.midpoint.web.component.util.SelectableBean;
-
 import com.evolveum.midpoint.xml.ns._public.common.common_3.LookupTableRowType;
 import com.evolveum.midpoint.xml.ns._public.common.common_3.LookupTableType;
 import com.evolveum.midpoint.xml.ns._public.common.common_3.ObjectType;
-
 import com.evolveum.midpoint.xml.ns._public.common.common_3.SystemObjectsType;
 
-import org.apache.commons.lang3.StringUtils;
-import org.apache.wicket.Component;
-import org.apache.wicket.behavior.AttributeAppender;
-import org.apache.wicket.extensions.markup.html.repeater.data.grid.ICellPopulator;
-import org.apache.wicket.extensions.markup.html.repeater.data.table.AbstractColumn;
-import org.apache.wicket.markup.html.WebMarkupContainer;
-import org.apache.wicket.markup.html.basic.Label;
-import org.apache.wicket.markup.repeater.Item;
-import org.apache.wicket.model.IModel;
-
-import java.util.List;
-import java.util.Optional;
-
 public class LifecycleStateBadgeColumn<C extends Containerable> extends AbstractColumn<SelectableBean<C>, String> {
 
     private final IModel<? extends PrismContainerDefinition<C>> mainModel;
@@ -97,7 +93,8 @@ public void populateItem(Item<ICellPopulator<SelectableBean<C>>> item, String co
                 new BadgeListPanel(
                         componentId,
                         () -> List.of(new Badge(
-                                state.getCssClass() + " alert px-1 py-0 m-0",
+                                state.getCssClass() +
+                                " badge my-1",
                                 LocalizationUtil.translatePolyString(rowBean.getLabel())))));
 
         item.add(AttributeAppender.remove("class"));

diff --git a/...n/java/com/evolveum/midpoint/gui/impl/component/search/panel/DateIntervalSearchPanel.java b/...n/java/com/evolveum/midpoint/gui/impl/component/search/panel/DateIntervalSearchPanel.java
@@ -32,8 +32,8 @@ public DateIntervalSearchPanel(String id, IModel<XMLGregorianCalendar> fromDateM
     }
 
     @Override
-    protected PopoverSearchPopupPanel createPopupPopoverPanel() {
-        return new DateIntervalSearchPopupPanel(PopoverSearchPanel.ID_POPOVER_PANEL, fromDateModel, toDateModel) {
+    protected PopoverSearchPopupPanel createPopupPopoverPanel(Popover popover) {
+        return new DateIntervalSearchPopupPanel(PopoverSearchPanel.ID_POPOVER_PANEL, popover, fromDateModel, toDateModel) {
 
             @Serial private static final long serialVersionUID = 1L;
 

diff --git a/...a/com/evolveum/midpoint/gui/impl/component/search/panel/DateIntervalSearchPopupPanel.java b/...a/com/evolveum/midpoint/gui/impl/component/search/panel/DateIntervalSearchPopupPanel.java
@@ -6,22 +6,21 @@
  */
 package com.evolveum.midpoint.gui.impl.component.search.panel;
 
+import javax.xml.datatype.XMLGregorianCalendar;
+
+import org.apache.wicket.behavior.AttributeAppender;
+import org.apache.wicket.extensions.yui.calendar.DateTimeField;
+import org.apache.wicket.markup.html.WebMarkupContainer;
+import org.apache.wicket.model.IModel;
+
 import com.evolveum.midpoint.gui.api.util.WebComponentUtil;
 import com.evolveum.midpoint.schema.constants.SchemaConstants;
 import com.evolveum.midpoint.web.component.form.MidpointForm;
 import com.evolveum.midpoint.web.component.input.DatePanel;
 import com.evolveum.midpoint.web.component.util.VisibleBehaviour;
 import com.evolveum.midpoint.web.page.admin.configuration.component.EmptyOnBlurAjaxFormUpdatingBehaviour;
-
 import com.evolveum.midpoint.web.util.DateValidator;
 
-import org.apache.wicket.behavior.AttributeAppender;
-import org.apache.wicket.extensions.yui.calendar.DateTimeField;
-import org.apache.wicket.markup.html.WebMarkupContainer;
-import org.apache.wicket.model.IModel;
-
-import javax.xml.datatype.XMLGregorianCalendar;
-
 public class DateIntervalSearchPopupPanel extends PopoverSearchPopupPanel {
 
     private static final long serialVersionUID = 1L;
@@ -35,8 +34,8 @@ public class DateIntervalSearchPopupPanel extends PopoverSearchPopupPanel {
     private IModel<XMLGregorianCalendar> fromDateModel;
     private IModel<XMLGregorianCalendar> toDateModel;
 
-    public DateIntervalSearchPopupPanel(String id, IModel<XMLGregorianCalendar> fromDateModel, IModel<XMLGregorianCalendar> toDateModel) {
-        super(id);
+    public DateIntervalSearchPopupPanel(String id, Popover popover, IModel<XMLGregorianCalendar> fromDateModel, IModel<XMLGregorianCalendar> toDateModel) {
+        super(id, popover);
         this.fromDateModel = fromDateModel;
         this.toDateModel = toDateModel;
     }

diff --git a/.../main/java/com/evolveum/midpoint/gui/impl/component/search/panel/FulltextSearchPanel.html b/.../main/java/com/evolveum/midpoint/gui/impl/component/search/panel/FulltextSearchPanel.html
@@ -9,8 +9,8 @@
 <head/>
 <body>
 <wicket:panel>
-        <div wicket:id="fullTextContainer">
-                <input wicket:id="fullTextField" type="text" class="form-control form-control-sm" style="width: 150px; min-width: 150px;"/>
+        <div wicket:id="fullTextContainer" style="width: 100%; max-width: 275px;">
+                <input wicket:id="fullTextField" type="text" class="form-control form-control-sm"/>
         </div>
 </wicket:panel>
 </body>

diff --git a/.../main/java/com/evolveum/midpoint/gui/impl/component/search/panel/ItemPathSearchPanel.java b/.../main/java/com/evolveum/midpoint/gui/impl/component/search/panel/ItemPathSearchPanel.java
@@ -6,12 +6,12 @@
  */
 package com.evolveum.midpoint.gui.impl.component.search.panel;
 
-import com.evolveum.prism.xml.ns._public.types_3.ItemPathType;
+import java.io.Serial;
 
 import org.apache.wicket.ajax.AjaxRequestTarget;
 import org.apache.wicket.model.IModel;
 
-import java.io.Serial;
+import com.evolveum.prism.xml.ns._public.types_3.ItemPathType;
 
 /**
  * @author honchar
@@ -25,8 +25,8 @@ public ItemPathSearchPanel(String id, IModel<ItemPathType> itemPathModel) {
     }
 
     @Override
-    protected PopoverSearchPopupPanel createPopupPopoverPanel() {
-        return new ItemPathSearchPopupPanel(PopoverSearchPanel.ID_POPOVER_PANEL, getModel()) {
+    protected PopoverSearchPopupPanel createPopupPopoverPanel(Popover popover) {
+        return new ItemPathSearchPopupPanel(PopoverSearchPanel.ID_POPOVER_PANEL, popover, getModel()) {
 
             @Serial private static final long serialVersionUID = 1L;
 

diff --git a/.../java/com/evolveum/midpoint/gui/impl/component/search/panel/ItemPathSearchPopupPanel.java b/.../java/com/evolveum/midpoint/gui/impl/component/search/panel/ItemPathSearchPopupPanel.java
@@ -6,15 +6,14 @@
  */
 package com.evolveum.midpoint.gui.impl.component.search.panel;
 
+import org.apache.wicket.model.IModel;
+import org.apache.wicket.model.Model;
+
 import com.evolveum.midpoint.gui.api.component.path.ItemPathDto;
 import com.evolveum.midpoint.gui.api.component.path.ItemPathPanel;
 import com.evolveum.midpoint.web.component.form.MidpointForm;
-
 import com.evolveum.prism.xml.ns._public.types_3.ItemPathType;
 
-import org.apache.wicket.model.IModel;
-import org.apache.wicket.model.Model;
-
 public class ItemPathSearchPopupPanel extends PopoverSearchPopupPanel {
 
     private static final long serialVersionUID = 1L;
@@ -23,8 +22,8 @@ public class ItemPathSearchPopupPanel extends PopoverSearchPopupPanel {
 
     IModel<ItemPathType> itemPathModel;
 
-    public ItemPathSearchPopupPanel(String id, IModel<ItemPathType> itemPathModel) {
-        super(id);
+    public ItemPathSearchPopupPanel(String id, Popover popover, IModel<ItemPathType> itemPathModel) {
+        super(id, popover);
         this.itemPathModel = itemPathModel;
     }
 

diff --git a/...rc/main/java/com/evolveum/midpoint/gui/impl/component/search/panel/MemberSearchPanel.java b/...rc/main/java/com/evolveum/midpoint/gui/impl/component/search/panel/MemberSearchPanel.java
@@ -1,13 +1,13 @@
 package com.evolveum.midpoint.gui.impl.component.search.panel;
 
-import com.evolveum.midpoint.gui.impl.component.search.wrapper.AbstractRoleSearchItemWrapper;
-import com.evolveum.midpoint.web.component.util.VisibleBehaviour;
-
 import org.apache.wicket.ajax.AjaxRequestTarget;
 import org.apache.wicket.behavior.AttributeAppender;
 import org.apache.wicket.model.IModel;
 import org.apache.wicket.model.PropertyModel;
 
+import com.evolveum.midpoint.gui.impl.component.search.wrapper.AbstractRoleSearchItemWrapper;
+import com.evolveum.midpoint.web.component.util.VisibleBehaviour;
+
 public class MemberSearchPanel extends AbstractSearchItemPanel<AbstractRoleSearchItemWrapper> {
 
     private static final String ID_MEMBER_SEARCH = "memberSearch";
@@ -27,7 +27,7 @@ protected void onInitialize() {
         initLayout();
         setOutputMarkupId(true);
         add(AttributeAppender.append("style", "display: contents !important; background-color: white!important;"));
-        add(AttributeAppender.append("class", "d-flex gap-1 pl-1 bg-light rounded-sm align-items-center"));
+        add(AttributeAppender.append("class", "d-flex gap-2 px-2 bg-light rounded-sm align-items-center"));
     }
 
     private void initLayout() {

diff --git a/...om/evolveum/midpoint/gui/impl/component/search/panel/ObjectCollectionSearchItemPanel.html b/...om/evolveum/midpoint/gui/impl/component/search/panel/ObjectCollectionSearchItemPanel.html
@@ -9,12 +9,12 @@
 <head/>
 <body>
 <wicket:panel>
-    <div class="d-flex gap-1 pl-1 bg-light rounded-sm align-items-center"  wicket:id="searchItemContainer">
-        <div class="search-item-label" wicket:id="searchItemField"/>
+    <div class="d-flex gap-2 pl-2 pr-1 bg-light rounded-sm align-items-center" style="min-height:31px"  wicket:id="searchItemContainer">
         <div class="search-item-label" wicket:id="searchItemLabel"/>
-        <i wicket:id="help"/>
-        <a wicket:id="removeButton" class="btn btn-sm ml-n1 px-1">
-            <i class="fa fa-times"/>
+        <div class="search-item-label" wicket:id="searchItemField"/>
+        <i wicket:id="help" class="lh-n"/>
+        <a wicket:id="removeButton" class="btn btn-xs px-1">
+            <i class="fa fa-times fa-lg"/>
         </a>
     </div>
 </wicket:panel>

diff --git a/...dmin-gui/src/main/java/com/evolveum/midpoint/gui/impl/component/search/panel/Popover.html b/...dmin-gui/src/main/java/com/evolveum/midpoint/gui/impl/component/search/panel/Popover.html
@@ -8,7 +8,7 @@
 <wicket:border xmlns:wicket="http://wicket.apache.org">
     <div wicket:id="arrow" class="arrow" ></div>
     <h3 class="popover-title" wicket:id="title"></h3>
-    <div class="popover-body" style="min-width: 200px;">
+    <div class="popover-body p-0">
         <wicket:body/>
     </div>
 </wicket:border>
diff --git a/...dmin-gui/src/main/java/com/evolveum/midpoint/gui/impl/component/search/panel/Popover.java b/...dmin-gui/src/main/java/com/evolveum/midpoint/gui/impl/component/search/panel/Popover.java
@@ -47,7 +47,7 @@ public Popover(String id, IModel<String> title) {
 
     private void initLayout() {
         setOutputMarkupId(true);
-        add(AttributeAppender.prepend("class", "popover bs-popover-bottom"));
+        add(AttributeAppender.prepend("class", "popover bs-popover-bottom mb-0"));
         add(AttributeAppender.append("style", "display: none;"));
 
         Label title = new Label(ID_TITLE, this.title);

diff --git a/...c/main/java/com/evolveum/midpoint/gui/impl/component/search/panel/PopoverSearchPanel.html b/...c/main/java/com/evolveum/midpoint/gui/impl/component/search/panel/PopoverSearchPanel.html
@@ -9,8 +9,8 @@
 <html xmlns:wicket="http://wicket.apache.org">
 <wicket:panel>
     <div class="search-item-field" wicket:id="valueTextField" />
-    <div class="d-flex">
-        <a wicket:id="configure" class="btn btn-xs border-0" wicket:message="title:PopoverSearchPanel.removeValue">
+    <div class="d-flex search-item-controls">
+        <a wicket:id="configure" class="btn btn-xs border-0 px-1" wicket:message="title:PopoverSearchPanel.adjustProperty">
             <i class="fa fa-cog"/>
         </a>
         <wicket:child />

diff --git a/...c/main/java/com/evolveum/midpoint/gui/impl/component/search/panel/PopoverSearchPanel.java b/...c/main/java/com/evolveum/midpoint/gui/impl/component/search/panel/PopoverSearchPanel.java
@@ -47,7 +47,7 @@ protected void onInitialize() {
 
     private void initLayout() {
         setOutputMarkupId(true);
-        add(AttributeAppender.append("class", "d-flex align-items-center"));
+        add(AttributeAppender.append("class", "d-flex align-items-center gap-1"));
 
         TextPanel<String> textField = new TextPanel<>(ID_TEXT_FIELD, getTextValue());
         textField.setOutputMarkupId(true);
@@ -77,13 +77,13 @@ public void onClick(AjaxRequestTarget target) {
         add(edit);
 
 
-        WebMarkupContainer searchPopupPanel = createPopupPopoverPanel();
+        WebMarkupContainer searchPopupPanel = createPopupPopoverPanel(popover);
         popover.add(searchPopupPanel);
     }
 
     protected abstract IModel<String> getTextValue();
 
-    protected abstract PopoverSearchPopupPanel createPopupPopoverPanel();
+    protected abstract PopoverSearchPopupPanel createPopupPopoverPanel(Popover popover);
 
     public void togglePopover(AjaxRequestTarget target, Component button, Component popover, int paddingRight) {
         String script = "MidPointTheme.toggleSearchPopover('"

diff --git a/...n/java/com/evolveum/midpoint/gui/impl/component/search/panel/PopoverSearchPopupPanel.html b/...n/java/com/evolveum/midpoint/gui/impl/component/search/panel/PopoverSearchPopupPanel.html
@@ -10,15 +10,19 @@
 <head/>
 <body>
 <wicket:panel>
-    <form class="my-1" wicket:id="popoverForm" style="width: 400px;">
-        <wicket:child/>
-        <div class="row form-group mb-0">
-            <div class="col">
-                <a wicket:id="confirmButton" class="btn btn-sm btn-default pull-right"/>
-            </div>
-            <div class="col">
-                <a wicket:id="remove" class="btn btn-sm btn-default pull-right"/>
-            </div>
+    <form class="" wicket:id="popoverForm" style="width: 400px;">
+        <div class="modal-header px-3 d-flex align-items-center justify-content-between">
+            <h3 class="card-title flex-grow-1 m-0">
+                <wicket:message key="PopoverSearchPanel.title"></wicket:message>
+            </h3>
+            <a wicket:id="remove" class="card-link"/>
+        </div>
+        <div class="modal-body">
+            <wicket:child/>
+        </div>
+        <div class="modal-footer justify-content-between px-3 py-3">
+            <a wicket:id="cancelButton" class="btn btn-sm btn-default m-0"/>
+            <a wicket:id="confirmButton" class="btn btn-sm btn-primary m-0"/>
         </div>
     </form>
 </wicket:panel>