Merge pull request #5645 from kianamcc/SWC-7189

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

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" />

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

@@ -11,7 +11,7 @@
     dataBackdrop="STATIC"
     dataKeyboard="false"
     size="LARGE"
-    addStyleNames="newFolderDialog"
+    addStyleNames="newFolderDialog full-size-modal-xs-only"
   >
     <b:ModalBody>
       <b:FormGroup>

src/main/webapp/sass/_core.scss

@@ -2090,6 +2090,22 @@ input[type='text'].padding-0 {
     flex-flow: inherit;
   }
 
+  @media (max-width: 768px) {
+    .full-size-modal-xs-only .modal-dialog {
+      width: 95%;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      margin: auto;
+      max-height: 90vh;
+    }
+
+    .full-size-modal-xs-only .modal-content {
+      max-height: 90vh;
+    }
+  }
+
   .glyphicon {
     display: inline-block;
     font: normal normal normal 14px/1 FontAwesome;

src/test/java/org/sagebionetworks/web/unitclient/widget/entity/MarkdownEditorWidgetTest.java

@@ -271,24 +271,35 @@ public void testResizeMarkdown() {
     String markdown = "";
 
     when(mockView.getClientHeight()).thenReturn(0);
+    when(mockView.getClientWidth()).thenReturn(1000);
     presenter.resizeMarkdownTextArea();
     verify(mockView)
       .setMarkdownTextAreaHeight(MarkdownEditorWidget.MIN_TEXTAREA_HEIGHT);
 
     reset(mockView);
+    when(mockView.getClientWidth()).thenReturn(1000);
     when(mockView.getClientHeight())
       .thenReturn(MarkdownEditorWidget.MIN_TEXTAREA_HEIGHT);
     presenter.resizeMarkdownTextArea();
     verify(mockView)
       .setMarkdownTextAreaHeight(MarkdownEditorWidget.MIN_TEXTAREA_HEIGHT);
 
     reset(mockView);
+    when(mockView.getClientWidth()).thenReturn(1000);
     when(mockView.getClientHeight()).thenReturn(1000);
     presenter.resizeMarkdownTextArea();
     verify(mockView)
       .setMarkdownTextAreaHeight(
         1000 - MarkdownEditorWidget.OTHER_EDITOR_COMPONENTS_HEIGHT
       );
+
+    // For mobile screen sizes (below XS_BREAKPOINT), set height to 40% of client height
+    reset(mockView);
+    when(mockView.getClientWidth())
+      .thenReturn(MarkdownEditorWidget.XS_BREAKPOINT - 100);
+    when(mockView.getClientHeight()).thenReturn(1000);
+    presenter.resizeMarkdownTextArea();
+    verify(mockView).setMarkdownTextAreaHeight(400);
   }
 
   @Test