Merge pull request desktop#15500 from desktop/dynamic-size-pr-dialog

PR View: Dynamic Dialogs
Alex2289-king-designs-com · Oct 26, 2022 · 064af16 · 064af16
2 parents 364fe06 + ab2f0bf
commit 064af16
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 8 deletions.
diff --git a/app/src/ui/dialog/dialog.tsx b/app/src/ui/dialog/dialog.tsx
@@ -214,6 +214,13 @@ export class Dialog extends React.Component<IDialogProps, IDialogState> {
 
   private onDismissGraceTimer = () => {
     this.setState({ isAppearing: false })
+
+    this.dialogElement?.dispatchEvent(
+      new CustomEvent('dialog-appeared', {
+        bubbles: true,
+        cancelable: false,
+      })
+    )
   }
 
   private isDismissable() {

diff --git a/app/src/ui/diff/code-mirror-host.tsx b/app/src/ui/diff/code-mirror-host.tsx
@@ -164,6 +164,14 @@ export class CodeMirrorHost extends React.Component<ICodeMirrorHostProps, {}> {
 
     CodeMirrorHost.updateDoc(this.codeMirror, this.props.value)
     this.resizeObserver.observe(this.codeMirror.getWrapperElement())
+
+    if (this.wrapper !== null && this.wrapper.closest('dialog') !== null) {
+      document.addEventListener('dialog-appeared', this.onDialogAppeared)
+    }
+  }
+
+  private onDialogAppeared = () => {
+    requestAnimationFrame(this.onResized)
   }
 
   private onSwapDoc = (cm: Editor, oldDoc: Doc) => {
@@ -199,6 +207,7 @@ export class CodeMirrorHost extends React.Component<ICodeMirrorHostProps, {}> {
     }
 
     this.resizeObserver.disconnect()
+    document.removeEventListener('dialog-show', this.onDialogAppeared)
   }
 
   public componentDidUpdate(prevProps: ICodeMirrorHostProps) {

diff --git a/app/styles/ui/_dialog.scss b/app/styles/ui/_dialog.scss
@@ -27,6 +27,9 @@
 // allow easy layout using generalized components and elements such as <Row>
 // and <p>.
 dialog {
+  display: flex;
+  flex-direction: column;
+
   overflow: unset;
   // These are the 24px versions of the alert and stop octicons
   // from oction v10.0.0
@@ -128,11 +131,21 @@ dialog {
   // The dialog embeds a fieldset as the first child of the form element
   // in order to be able to disable all form elements and buttons in one
   // swoop. This resets all styles for that fieldset.
-  & > form > fieldset {
-    border: 0;
-    margin: 0;
-    padding: 0;
-    min-width: 0;
+  & > form {
+    min-height: 0;
+    height: 100%;
+    & > fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+      min-width: 0;
+      min-height: 0;
+      max-height: 100%;
+      height: 100%;
+
+      display: flex;
+      flex-direction: column;
+    }
   }
 
   .dialog-header {

diff --git a/app/styles/ui/_pull-request-files-changed.scss b/app/styles/ui/_pull-request-files-changed.scss
@@ -1,4 +1,9 @@
 .pull-request-files-changed {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex-grow: 1;
+
   border: var(--base-border);
   border-radius: var(--border-radius);
 
@@ -13,8 +18,9 @@
   }
 
   .files-diff-viewer {
-    height: 500px;
     display: flex;
+    min-height: 0;
+    flex-grow: 1;
   }
 
   .file-list {

diff --git a/app/styles/ui/dialogs/_open-pull-request.scss b/app/styles/ui/dialogs/_open-pull-request.scss
@@ -1,6 +1,8 @@
 .open-pull-request {
-  width: 850px;
-  max-width: none;
+  width: 100%;
+  height: 100%;
+  max-width: calc(100% - var(--spacing-double) * 4);
+  max-height: calc(100% - var(--spacing-double) * 4);
 
   header.dialog-header {
     padding-bottom: var(--spacing);
@@ -21,6 +23,10 @@
 
   .open-pull-request-content {
     padding: var(--spacing);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex-grow: 1;
   }
 
   .open-pull-request-no-changes {