Merge pull request #5645 from kianamcc/SWC-7189

SWC-7189: SWC <b:Modal> updates on mobile (inside PromptForValuesModalViewImpl for example)

Author: kianamcc

src/main/java/org/sagebionetworks/web/client/widget/entity/MarkdownEditorWidget.java

@@ -75,6 +75,7 @@ public class MarkdownEditorWidget
   // units are px
   public static final int MIN_TEXTAREA_HEIGHT = 100;
   public static final int OTHER_EDITOR_COMPONENTS_HEIGHT = 270;
+  public static final int XS_BREAKPOINT = 796;
 
   private SynapseClientAsync synapseClient;
   private CookieProvider cookies;
@@ -203,9 +204,15 @@ private void setMarkdownTextAreaHandlers() {
   }
 
   public void resizeMarkdownTextArea() {
+    int viewportWidth = view.getClientWidth();
+    int clientHeight = view.getClientHeight();
     int newHeight = view.getClientHeight() - OTHER_EDITOR_COMPONENTS_HEIGHT;
-    newHeight =
-      newHeight > MIN_TEXTAREA_HEIGHT ? newHeight : MIN_TEXTAREA_HEIGHT;
+    if (viewportWidth < XS_BREAKPOINT) {
+      newHeight = (int) (clientHeight * 0.4);
+    } else {
+      newHeight =
+        newHeight > MIN_TEXTAREA_HEIGHT ? newHeight : MIN_TEXTAREA_HEIGHT;
+    }
     view.setMarkdownTextAreaHeight(newHeight);
   }
 

src/main/java/org/sagebionetworks/web/client/widget/entity/MarkdownEditorWidgetView.java

@@ -41,6 +41,8 @@ public interface MarkdownEditorWidgetView extends IsWidget, SynapseView {
 
   int getClientHeight();
 
+  int getClientWidth();
+
   void setMarkdownTextAreaHeight(int heightPx);
 
   void setFocus(boolean focused);

src/main/java/org/sagebionetworks/web/client/widget/entity/MarkdownEditorWidgetViewImpl.java

@@ -564,6 +564,11 @@ public int getClientHeight() {
     return Window.getClientHeight();
   }
 
+  @Override
+  public int getClientWidth() {
+    return Window.getClientWidth();
+  }
+
   @Override
   public void setMarkdownTextAreaHeight(int heightPx) {
     lazyConstruct();

src/main/java/org/sagebionetworks/web/client/widget/table/modal/upload/UploadTableModalWidgetImpl.java

@@ -27,6 +27,7 @@ public UploadTableModalWidgetImpl(
     this.modalWizarWidget.setModalSize(ModalSize.LARGE);
     this.uploadCSVFileWidget = uploadCSVFileWidget;
     this.modalWizarWidget.configure(this.uploadCSVFileWidget);
+    this.modalWizarWidget.asWidget().addStyleName("full-size-modal-xs-only");
   }
 
   @Override

src/main/resources/org/sagebionetworks/web/client/widget/discussion/SubscribersWidgetViewImpl.ui.xml

@@ -11,6 +11,7 @@
     </g:FocusPanel>
     <b:Modal
       ui:field="modal"
+      addStyleNames="full-size-modal-xs-only"
       closable="true"
       dataBackdrop="STATIC"
       dataKeyboard="true"

src/main/resources/org/sagebionetworks/web/client/widget/discussion/modal/DiscussionThreadModalViewImpl.ui.xml

@@ -9,7 +9,7 @@
     closable="true"
     dataBackdrop="STATIC"
     dataKeyboard="false"
-    addStyleNames="modal-fullscreen"
+    addStyleNames="modal-fullscreen full-size-modal-xs-only"
   >
     <b:ModalBody>
       <b:TextBox

src/main/resources/org/sagebionetworks/web/client/widget/docker/modal/AddExternalRepoModalViewImpl.ui.xml

@@ -9,7 +9,7 @@
     closable="true"
     dataBackdrop="STATIC"
     dataKeyboard="true"
-    addStyleNames="modal"
+    addStyleNames="modal-fullscreen full-size-modal-xs-only"
   >
     <b:ModalBody>
       <bh:Span addStyleNames="font-size-18">Repository Name</bh:Span>

src/main/resources/org/sagebionetworks/web/client/widget/entity/PromptForValuesModalViewImpl.ui.xml

@@ -10,6 +10,7 @@
     closable="true"
     dataBackdrop="STATIC"
     dataKeyboard="true"
+    addStyleNames="full-size-modal-xs-only"
   >
     <b:ModalHeader closable="true">
       <b:Heading

src/main/resources/org/sagebionetworks/web/client/widget/entity/WikiMarkdownEditorViewImpl.ui.xml

@@ -7,7 +7,7 @@
   <bh:Div>
     <b:Modal
       ui:field="editorDialog"
-      addStyleNames="modal-fullscreen"
+      addStyleNames="modal-fullscreen full-size-modal-xs-only"
       closable="true"
       dataBackdrop="STATIC"
       dataKeyboard="false"

src/main/resources/org/sagebionetworks/web/client/widget/entity/controller/EntityActionControllerViewImpl.ui.xml

@@ -10,7 +10,7 @@
       closable="true"
       dataBackdrop="STATIC"
       dataKeyboard="true"
-      addStyleNames="modal-fullscreen"
+      addStyleNames="modal-fullscreen full-size-modal-xs-only"
     >
       <b:ModalBody>
         <b:Pre ui:field="infoDialogText" />