MID-6271 polystring panel html/css fixes

Evolveum · May 9, 2022 · 834b78d · 834b78d
1 parent 4622842
commit 834b78d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 31 deletions.
diff --git a/...n-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PolyStringEditorPanel.html b/...n-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PolyStringEditorPanel.html
@@ -8,46 +8,58 @@
 
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org">
 <wicket:panel>
-    <div wicket:id="localizedValueContainer" class="row">
-        <div class="col-3" wicket:id="localizedValueLabel" />
-        <div wicket:id="localizedValueWithButton" class="input-group">
-            <div class="col-12" wicket:id="localizedValue"/>
-            <div style="position: absolute; right: 40px; top: 8px; z-index: 5;">
-                <i class="fa fa-language" style="float:right;cursor: pointer; color: #555555;" wicket:id="showHideLanguagesLocalized"/>
+    <div class="property-stripe" wicket:id="localizedValueContainer">
+        <div class="row no-gutters">
+            <div class="col-3" wicket:id="localizedValueLabel" />
+            <div wicket:id="localizedValueWithButton" class="input-group">
+                <div class="w-100" wicket:id="localizedValue"/>
+                <div style="position: absolute; right: 10px; top: 8px; z-index: 5;">
+                    <i class="fa fa-language" style="float:right;cursor: pointer; color: #555555;" wicket:id="showHideLanguagesLocalized"/>
+                </div>
             </div>
         </div>
     </div>
-    <div wicket:id="originValueContainer" class="row">
-        <div class="col-3" wicket:id="originValueLabel" />
-        <div wicket:id="origValueWithButton" class="input-group">
-            <div class="col-12" wicket:id="origValue"/>
-            <div style="position: absolute; right: 40px; top: 8px; z-index: 5;">
-                <i class="fa fa-language" style="float:right;cursor: pointer; color: #555555;" wicket:id="showHideLanguagesOrig"/>
+    <div wicket:id="originValueContainer">
+        <div class="row no-gutters">
+            <div class="col-3" wicket:id="originValueLabel" />
+            <div wicket:id="origValueWithButton" class="input-group">
+                <div class="w-100" wicket:id="origValue"/>
+                <div style="position: absolute; right: 10px; top: 8px; z-index: 5;">
+                    <i class="fa fa-language" style="float:right;cursor: pointer; color: #555555;" wicket:id="showHideLanguagesOrig"/>
+                </div>
             </div>
         </div>
     </div>
-    <div wicket:id="fullDataContainer">
-       <div class="row prism-property">
-             <div class="col-3"><wicket:message key="PolyStringEditorPanel.keyLabel" /></div>
-             <div class="col-9" wicket:id="keyValue"/>
-         </div>
-        <div class="row prism-property">
-            <div class="col-3"><wicket:message key="PolyStringEditorPanel.languagesList" /></div>
+    <wicket:container wicket:id="fullDataContainer">
+        <div class="property-stripe">
+            <div class="row no-gutters prism-property">
+                <div class="col-3"><wicket:message key="PolyStringEditorPanel.keyLabel"/></div>
+                <div class="col-9" wicket:id="keyValue"/>
+            </div>
         </div>
-        <div wicket:id="languageEditor" class="row prism-property">
-            <div class="col-3" wicket:id="languagesList" />
-            <div class="col-8" wicket:id="valueToAdd"/>
-            <div class="col-1">
-                <a class="btn btn-tool" wicket:id="addLanguageValue"><i class="fa fa-plus-circle"/></a>
+        <div class="property-stripe">
+            <div class="row no-gutters prism-property">
+                <div class="col-3"><wicket:message key="PolyStringEditorPanel.languagesList"/></div>
             </div>
         </div>
-        <div wicket:id="languagesRepeater" class="row prism-property">
-             <div class="col-3" wicket:id="languageName" />
-             <div class="col-8" wicket:id="translation"/>
-            <div class="col-1">
-                <a class="btn btn-box-tool" wicket:id="removeLanguageButton"><i class="fa fa-minus-circle"/></a>
+        <div class="property-stripe" wicket:id="languageEditor">
+            <div class="row no-gutters prism-property">
+                <div class="col-3 pr-2" wicket:id="languagesList"/>
+                <div class="col-8 pr-2" wicket:id="valueToAdd"/>
+                <div class="col-1">
+                    <a class="btn btn-tool" wicket:id="addLanguageValue"><i class="fa fa-plus-circle"/></a>
+                </div>
             </div>
         </div>
-    </div>
+        <div class="property-stripe" wicket:id="languagesRepeater">
+            <div class="row no-gutters prism-property">
+                <div class="col-3 pr-2" wicket:id="languageName"/>
+                <div class="col-8 pr-2" wicket:id="translation"/>
+                <div class="col-1">
+                    <a class="btn btn-tool" wicket:id="removeLanguageButton"><i class="fa fa-minus-circle"/></a>
+                </div>
+            </div>
+        </div>
+    </wicket:container>
 </wicket:panel>
 </html>
diff --git a/...n-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PolyStringEditorPanel.java b/...n-gui/src/main/java/com/evolveum/midpoint/gui/impl/prism/panel/PolyStringEditorPanel.java
@@ -130,6 +130,7 @@ public void onClick(AjaxRequestTarget target) {
 
         WebMarkupContainer originValueContainer = new WebMarkupContainer(ID_ORIGIN_VALUE_CONTAINER);
         originValueContainer.setOutputMarkupId(true);
+        originValueContainer.add(AttributeAppender.prepend("class", () -> showFullData ? "property-stripe" : null));
         originValueContainer.add(getInputFieldClassAppenderForContainer());
         originValueContainer.add(new VisibleBehaviour(() -> showFullData || StringUtils.isEmpty(localizedValue)));
         add(originValueContainer);
@@ -187,7 +188,6 @@ public Iterator<String> getIterator(String input) {
         origValueWithButton.add(origValuePanel);
 
         WebMarkupContainer fullDataContainer = new WebMarkupContainer(ID_FULL_DATA_CONTAINER);
-        fullDataContainer.setOutputMarkupId(true);
         fullDataContainer.add(new VisibleBehaviour(() -> showFullData));
         add(fullDataContainer);