Pentaho GWT Dialog Hacking With Outside Margins

by duarteleao

HTML

<div tabindex="0" class="glasspane" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"></div>

<div class="safe-margins-layer">
  <div class="safe-margin safe-top-margin"><p>top safe margin</p></div>
  <div class="safe-margin safe-bottom-margin">bottom safe margin</div>
  <div class="safe-margin safe-left-margin"><p>left safe margin</p></div>
  <div class="safe-margin safe-right-margin">right safe margin</div>
</div>

<!-- 
  overflow-y: auto;
  overflow-x: hidden;
-->
<div class="pentaho-dialog pentaho-gwt responsive" 
     style="position: absolute; overflow: visible;">
  <div>
    <table cellspacing="0" cellpadding="0">
      <tbody>
        <tr class="dialogTop">
          <td class="dialogTopLeft">
            <div class="dialogTopLeftInner"></div>
          </td>
          <td class="dialogTopCenter">
            <div class="dialogTopCenterInner">
              <div class="Caption">Open</div>
            </div>
          </td>
          <td class="dialogTopRight">
            <div class="dialogTopRightInner"></div>
          </td>
        </tr>
        <tr class="dialogMiddle">
          <td class="dialogMiddleLeft">
            <div class="dialogMiddleLeftInner"></div>
          </td>
          <td class="dialogMiddleCenter">
          
            <div class="dialogMiddleCenterInner dialogContent">
              <table class="prompt-dialog-body-table" 
                     cellpadding="0" 
                     cellspacing="0" 
                     style="width: 100%;">
                <tbody>
                  <tr class="prompt-dialog-content-row">
                    <td class="dialog-content" 
                        align="center" 
                        style="vertical-align: middle; 
                               padding: 5px 10px 10px;">
                        
                      <!-- SAMPLE CONTENT BEGIN -->
                      <div id="sample-content">
                        <div id="sample-message">
             ...

CSS

:root {
  --dialog-padding: 20px;
  --dialog-border-width: 1px;
  
  /* Safe vertical margin, on each side. 
     4% of the viewport width; minimum of 4px; maximum of 80px.
     */
  --dialog-safe-vertical-margin: clamp(4px, 4vh, 80px);
  
  /* Safe horizontal margin, on each side.
     1/12 = 8.3(3)%; miminum of 4px */
  --dialog-safe-horizontal-margin: max(4px, calc(100vw / 12));
  
  --action-button-gap: 8px;
  --text-block-max-width: 75ch;
  --action-button-min-width: 10ch;
}

html, 
body {
  height: 100%;
  font-family: sans-serif;
  font-size: 14px;
}

body {
  position: relative;
}

html, body, h2, p {
  margin: 0;
  padding: 0;
}

/* BASE Pentaho Styles */

.glasspane {
  position: absolute;
  z-index: 300;
  
  background-color: #000; /*#809eab;*/
  opacity: 0.6;
  
  margin: 0;
  padding: 0;
  border: 0;
  inset: 0;
}

.pentaho-dialog .Caption {
    background: none;
    font-size: 24px;
    line-height: 30px;
    color: #333;
    padding-bottom: 20px;
}

.pentaho-dialog .button-panel .pentaho-button {
  margin-left: 10px;
}

button.pentaho-button,
button.pentaho-button:link,
button.pentaho-button:visited,
button.pentaho-button:hover,
button.pentaho-button:active,
button.pentaho-button:focus,
span.button-add-condition {
  background: white;
  filter: none;
  font-size: 14px;
  line-height: 20px;
  color: #cc0000;
  padding: 9px 14px;
  font-family: opensansregular, Helvetica, Arial, "Sans serif";
  border-radius: 4px;
  border: 0 none;
  box-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  margin: 0;
  outline: 0 none;
  border: 1px solid #cc0000;
}

.pentaho-dialog .button-panel button,
.pentaho-dialog .button-panel button:link,
.pentaho-dialog .button-panel button:visited,
.pentaho-dialog .button-panel button:hover,
.pentaho-dialog .button-panel button:active,
.pentaho-dialog .button-panel button:focus {
  background: transparent;
  color: #cc0000;
  border-radius: 4px;
  box-shadow: none;
  border: 1px solid #cc0000;
  padding: 8px 20px;
 ...

JavaScript

[].forEach.call(document.querySelectorAll("*"), function(a) {
  //a.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

addEventListener("load", centerDialog);
addEventListener("resize", centerDialog);

function centerDialog() {
  var dialog = document.querySelector(".pentaho-dialog");

  dialog.style.top = ((window.innerHeight - dialog.offsetHeight) / 2 + window.pageYOffset) + "px";

  dialog.style.left = ((window.innerWidth - dialog.offsetWidth) / 2 + window.pageXOffset) + "px";
}