gh-4135 Add ColourSwatchCell, fix focus and tabIndex issues

gchq · Mar 14, 2024 · 613f93a · 613f93a
1 parent fc0429c
commit 613f93a
Show file tree

Hide file tree

Showing 18 changed files with 350 additions and 120 deletions.
diff --git a/stroom-app/src/main/resources/ui/css/ColourSwatchCell.css b/stroom-app/src/main/resources/ui/css/ColourSwatchCell.css
@@ -0,0 +1,30 @@
+.colourSwatchCell {
+
+}
+
+.colourSwatchCell-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.2em;
+}
+
+.colourSwatchCell-swatch {
+    min-width: 14px;
+    min-height: 14px;
+    max-width: 14px;
+    max-height: 14px;
+    width: 14px;
+    height: 14px;
+    margin: 0.1em;
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--text-color);
+}
+
+.colourSwatchCell-text {
+}
+
+.dataGridDisabledCell .colourSwatchCell-swatch {
+    opacity: 0.3;
+}
diff --git a/stroom-app/src/main/resources/ui/css/app.css b/stroom-app/src/main/resources/ui/css/app.css
@@ -70,3 +70,4 @@
 @import url("prismjs/prismjs-light.css");
 @import url("markdown.css");
 @import url("icon-colours.css");
+@import url("ColourSwatchCell.css");
diff --git a/stroom-app/src/main/resources/ui/css/celltable/DataGrid.css b/stroom-app/src/main/resources/ui/css/celltable/DataGrid.css
@@ -178,12 +178,18 @@
 }
 
 .dataGridDisabledCell {
-	color: var(--text-color--disabled);
+    color: var(--text-color--disabled);
+}
+
+.dataGridDisabledCell .tickBox {
+    cursor: default;
+    color: #000;
+    opacity: 0.3;
 }
 
 .dataGridSelectedRow {
-	background-color: var(--row__background-color--selected);
-	color: var(--row__text-color--selected);
+    background-color: var(--row__background-color--selected);
+    color: var(--row__text-color--selected);
 }
 
 .dataGridOddRow:hover,

diff --git a/stroom-core-client-widget/src/main/java/stroom/cell/info/client/ColourSwatchCell.java b/stroom-core-client-widget/src/main/java/stroom/cell/info/client/ColourSwatchCell.java
@@ -0,0 +1,36 @@
+package stroom.cell.info.client;
+
+import stroom.util.shared.GwtNullSafe;
+
+import com.google.gwt.cell.client.AbstractCell;
+import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
+import com.google.gwt.safehtml.shared.SafeHtmlUtils;
+
+public class ColourSwatchCell extends AbstractCell<String> {
+
+    public ColourSwatchCell() {
+    }
+
+    @Override
+    public void render(final Context context,
+                       final String cssColour,
+                       final SafeHtmlBuilder sb) {
+
+        if (GwtNullSafe.isBlankString(cssColour)) {
+            sb.append(SafeHtmlUtils.EMPTY_SAFE_HTML);
+        } else {
+            sb.appendHtmlConstant("<div class=\"colourSwatchCell colourSwatchCell-container\">");
+
+            sb.appendHtmlConstant("<div class=\"colourSwatchCell-swatch\" style=\"background-color:");
+            sb.appendEscaped(cssColour);
+            sb.appendHtmlConstant("\">");
+            sb.appendHtmlConstant("</div>");
+
+            sb.appendHtmlConstant("<div class=\"colourSwatchCell-text\">");
+            sb.appendEscaped(cssColour);
+            sb.appendHtmlConstant("</div>");
+
+            sb.appendHtmlConstant("</div>");
+        }
+    }
+}
diff --git a/stroom-core-client-widget/src/main/java/stroom/widget/form/client/FormGroup.java b/stroom-core-client-widget/src/main/java/stroom/widget/form/client/FormGroup.java
@@ -7,17 +7,18 @@
 
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.LabelElement;
+import com.google.gwt.dom.client.NativeEvent;
 import com.google.gwt.dom.client.Node;
 import com.google.gwt.dom.client.Style.Display;
 import com.google.gwt.event.dom.client.KeyCodes;
+import com.google.gwt.event.dom.client.KeyDownEvent;
 import com.google.gwt.safehtml.shared.SafeHtml;
 import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.FlowPanel;
 import com.google.gwt.user.client.ui.HTMLPanel;
 import com.google.gwt.user.client.ui.HasWidgets;
 import com.google.gwt.user.client.ui.Label;
-import com.google.gwt.user.client.ui.PopupPanel;
 import com.google.gwt.user.client.ui.Widget;
 
 import java.util.Collections;
@@ -33,7 +34,6 @@ public class FormGroup extends Composite implements HasWidgets {
 
     private String id;
     private Widget widget;
-    private String description = null;
     private String helpText = null;
     private boolean isHelpShowing = false;
     private String labelText = null;
@@ -46,24 +46,42 @@ public FormGroup() {
         formLabel.addStyleName("form-group-label");
 
         helpButton.addStyleName("form-group-help info");
-        helpButton.addClickHandler(event -> showHelpPopup(event.getRelativeElement()));
+        helpButton.addClickHandler(event -> showHelpPopup());
         helpButton.addKeyDownHandler(event -> {
             if (KeyCodes.KEY_SPACE == event.getNativeKeyCode()) {
-                showHelpPopup(event.getRelativeElement());
+                showHelpPopup();
             }
         });
+        // Accessible using F1
+        helpButton.getElement().setTabIndex(-2);
         helpButton.setVisible(false);
 
         labelPanel.add(formLabel);
         labelPanel.add(helpButton);
 
         initWidget(formGroup);
+
+        formGroup.addDomHandler(
+                event ->
+                        handleKeyEvent(event.getNativeEvent()),
+                KeyDownEvent.getType());
+    }
+
+    private void handleKeyEvent(final NativeEvent nativeEvent) {
+        if (KeyCodes.KEY_F1 == nativeEvent.getKeyCode()) {
+            showHelpPopup();
+            nativeEvent.preventDefault();
+        }
     }
 
     private boolean isHelpShowing() {
         return isHelpShowing;
     }
 
+    private void showHelpPopup() {
+        showHelpPopup(helpButton.getElement());
+    }
+
     private void showHelpPopup(final Element element) {
         if (!isHelpShowing()) {
             final SafeHtmlBuilder builder = new SafeHtmlBuilder();
@@ -100,7 +118,7 @@ public void setLabel(final String label) {
         }
     }
 
-    public void setDescription(final String description) {
+//    public void setDescription(final String description) {
 //        this.description = description;
 //        if (GwtNullSafe.isBlankString(description)) {
 //            this.description = null;
@@ -109,7 +127,7 @@ public void setDescription(final String description) {
 //            this.description = description.trim();
 //            helpButton.setVisible(true);
 //        }
-    }
+//    }
 
     public void setHelpText(final String helpText) {
         this.helpText = helpText;
@@ -191,18 +209,22 @@ public boolean remove(final Widget w) {
         }
     }
 
-    private static class HelpPopup extends PopupPanel {
 
-        public HelpPopup(final SafeHtml content) {
-//        public HelpPopup(final Supplier<String> popupTextSupplier) {
-            // PopupPanel's constructor takes 'auto-hide' as its boolean parameter.
-            // If this is set, the panel closes itself automatically when the user
-            // clicks outside of it.
-            super(true);
+    // --------------------------------------------------------------------------------
 
-//            setWidget(new Label(popupTextSupplier.get(), true));
-            setWidget(new HTMLPanel(content));
-//            setWidget(new HTMLPanel(SafeHtmlUtils.fromTrustedString("<b>hello</b>")));
-        }
-    }
+
+//    private static class HelpPopup extends PopupPanel {
+//
+//        public HelpPopup(final SafeHtml content) {
+////        public HelpPopup(final Supplier<String> popupTextSupplier) {
+//            // PopupPanel's constructor takes 'auto-hide' as its boolean parameter.
+//            // If this is set, the panel closes itself automatically when the user
+//            // clicks outside of it.
+//            super(true);
+//
+////            setWidget(new Label(popupTextSupplier.get(), true));
+//            setWidget(new HTMLPanel(content));
+////            setWidget(new HTMLPanel(SafeHtmlUtils.fromTrustedString("<b>hello</b>")));
+//        }
+//    }
 }
diff --git a/stroom-core-client-widget/src/main/java/stroom/widget/popup/client/event/ShowPopupEvent.java b/stroom-core-client-widget/src/main/java/stroom/widget/popup/client/event/ShowPopupEvent.java
@@ -16,6 +16,7 @@
 
 package stroom.widget.popup.client.event;
 
+import stroom.util.shared.GwtNullSafe;
 import stroom.widget.popup.client.presenter.PopupPosition;
 import stroom.widget.popup.client.presenter.PopupSize;
 import stroom.widget.popup.client.presenter.PopupType;
@@ -126,6 +127,10 @@ public Element[] getAutoHidePartners() {
         return autoHidePartners;
     }
 
+
+    // --------------------------------------------------------------------------------
+
+
     public interface Handler extends EventHandler {
 
         void onShow(ShowPopupEvent event);
@@ -194,11 +199,8 @@ public Builder modeless() {
         }
 
         public Builder addAutoHidePartner(final Element... autoHidePartner) {
-            if (autoHidePartner != null) {
-                for (final Element element : autoHidePartner) {
-                    this.autoHidePartners.add(element);
-                }
-            }
+
+            this.autoHidePartners.addAll(GwtNullSafe.asList(autoHidePartner));
             return this;
         }
 
@@ -218,7 +220,7 @@ public Builder onHide(final HidePopupEvent.Handler handler) {
         }
 
         public void fire() {
-            // By default we will automatically hide popups unless they have a handler that alters the behaviour.
+            // By default, we will automatically hide popups unless they have a handler that alters the behaviour.
             if (hideRequestHandler == null) {
                 hideRequestHandler = e -> HidePopupEvent.builder(presenterWidget)
                         .autoClose(e.isAutoClose())
@@ -227,7 +229,7 @@ public void fire() {
             }
 
             Element[] elements = null;
-            if (autoHidePartners.size() > 0) {
+            if (GwtNullSafe.hasItems(autoHidePartners)) {
                 elements = autoHidePartners.toArray(new Element[0]);
             }
 

diff --git a/...om-core-client-widget/src/main/java/stroom/widget/popup/client/presenter/HelpManager.java b/...om-core-client-widget/src/main/java/stroom/widget/popup/client/presenter/HelpManager.java
@@ -1,13 +1,13 @@
 package stroom.widget.popup.client.presenter;
 
+import stroom.widget.popup.client.view.AbstractPopupPanel;
 import stroom.widget.popup.client.view.Popup;
 import stroom.widget.popup.client.view.PopupUtil;
 import stroom.widget.tooltip.client.event.ShowHelpEvent;
 
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.safehtml.shared.SafeHtml;
 import com.google.gwt.user.client.ui.HTMLPanel;
-import com.google.gwt.user.client.ui.PopupPanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.google.inject.Inject;
 import com.google.web.bindery.event.shared.EventBus;
@@ -73,15 +73,13 @@ private static String elementToUniqueId(final Element element) {
     // --------------------------------------------------------------------------------
 
 
-    private static class HelpPopup extends PopupPanel implements Popup {
-
-        private String caption = null;
+    private static class HelpPopup extends AbstractPopupPanel implements Popup {
 
         public HelpPopup(final SafeHtml content) {
             // PopupPanel's constructor takes 'auto-hide' as its boolean parameter.
             // If this is set, the panel closes itself automatically when the user
             // clicks outside of it.
-            super(true);
+            super(true, false, PopupType.POPUP);
 
             setWidget(new HTMLPanel(content));
         }
@@ -98,7 +96,12 @@ public void forceHide(final boolean autoClose) {
 
         @Override
         public void setCaption(final String caption) {
-            this.caption = caption;
+            // No caption
+        }
+
+        @Override
+        protected void onCloseAction() {
+            super.hide(true);
         }
     }
 }
diff --git a/...-core-client-widget/src/main/java/stroom/widget/popup/client/view/AbstractPopupPanel.java b/...-core-client-widget/src/main/java/stroom/widget/popup/client/view/AbstractPopupPanel.java
@@ -73,9 +73,13 @@ protected void onPreviewNativeEvent(final NativePreviewEvent event) {
                 if (action != null) {
                     switch (action) {
                         case CLOSE:
+                            // Cancel the event so ancestors don't also handle it
+                            event.cancel();
                             onCloseAction();
                             break;
                         case OK:
+                            // Cancel the event so ancestors don't also handle it
+                            event.cancel();
                             onOkAction();
                             break;
                     }
@@ -85,8 +89,10 @@ protected void onPreviewNativeEvent(final NativePreviewEvent event) {
     }
 
     protected void onCloseAction() {
+
     }
 
     protected void onOkAction() {
+
     }
 }