Merge pull request #38 from FlexConfirmMail/shrink-dialog-size

Shrink dialog size
FlexConfirmMail · Oct 21, 2024 · 7d6dae5 · 7d6dae5
2 parents 16476d7 + d753120
commit 7d6dae5
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 118 deletions.
diff --git a/src/web/app.js b/src/web/app.js
@@ -201,6 +201,11 @@ async function openDialog({ url, data, asyncContext, promptBeforeOpen, ...params
   });
 }
 
+function charsToPercentage(chars, maxSize) {
+  const bodyFontSize = parseInt(window.getComputedStyle(document.body).fontSize);
+  return Math.floor(((bodyFontSize * chars) / maxSize) * 100);
+}
+
 async function tryConfirm(data, asyncContext) {
   const { to, cc, bcc } = data.target;
   const { trustedDomains, unsafeDomains } = data.config;
@@ -220,11 +225,11 @@ async function tryConfirm(data, asyncContext) {
   }
 
   const { status, asyncContext: updatedAsyncContext } = await openDialog({
-    url: window.location.origin + "/dialog.html",
+    url: window.location.origin + "/confirm.html",
     data,
     asyncContext,
-    height: 60,
-    width: 60,
+    height: Math.min(60, charsToPercentage(50, screen.availHeight)),
+    width: Math.min(80, charsToPercentage(45, screen.availWidth)),
   });
   console.debug("status: ", status);
 
@@ -263,8 +268,8 @@ async function tryCountDown(data, asyncContext) {
     url: window.location.origin + "/count-down.html",
     data,
     asyncContext,
-    height: 60,
-    width: 60,
+    height: Math.min(20, charsToPercentage(15, screen.availHeight)),
+    width: Math.min(20, charsToPercentage(25, screen.availWidth)),
   });
   console.debug("status: ", status);
 

diff --git a/src/web/confirm.css b/src/web/confirm.css
@@ -0,0 +1,69 @@
+.heading-container {
+  display: flex;
+  align-items: center;
+}
+
+.heading-container fluent-button {
+  margin-left: 10px;
+}
+
+.check-target {
+  margin-left: 20px;
+  display: flex;
+  margin-bottom: 10px;
+}
+
+#untrusted-domains fluent-checkbox::part(label) {
+  color: red;
+}
+
+#attachment-and-others fluent-checkbox.warning::part(label) {
+  color:red;
+}
+
+/* fluent-dialog {
+  --dialog-background-color: red;
+  background: red !important;
+  padding: 1.5em;
+  color: white !important;
+  font-size: x-large !important;
+  font-weight: bold !important;
+  text-align: center;
+} */
+
+fluent-dialog::part(control) {
+  color: white;
+  background-color: red;
+  padding: 0 1.5em 1.5em 1.5em;
+  text-align: center;
+  --dialog-width: fit-content;
+  --dialog-height: fit-content;
+}
+
+fluent-dialog::part(control) .newly-added-domain-content {
+  background-color: white;
+  background: var(--bg-color) !important;
+}
+
+fluent-dialog .newly-added-domain-content {
+  color: black;
+  padding: 2em;
+  text-align: left;
+}
+
+fluent-dialog .newly-added-domain-content strong {
+  font-size: large;
+  font-weight: bold;
+}
+
+#newly-added-domain-address-list {
+  margin: 1em 0;
+}
+
+#cancel-new-domain-button {
+  margin-left: 10px;
+}
+
+.new-domain-button-container {
+  margin-top: 20px;
+}
diff --git a/src/web/dialog.html → src/web/confirm.html b/src/web/dialog.html → src/web/confirm.html
@@ -7,29 +7,32 @@
     <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"  crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
     <link href="dialog.css" rel="stylesheet">
+    <link href="confirm.css" rel="stylesheet">
 </head>
 <body>
     <div class="card-container">
-        <fluent-card>
-            <div class="heading-container">
-                <h3 data-l10n-text-content="confirmation_trustedCaption"></h3>
-                <fluent-button onclick="onCheckAllTrusted()"
-                               data-l10n-text-content="confirmation_trustedCheckAllButtonLabel"></fluent-button>
-            </div>
-            <fluent-divider></fluent-divider>
-            <div id="trusted-domains">
-            </div>
-        </fluent-card>
-        <fluent-card>
-            <h3 data-l10n-text-content="confirmation_untrustedCaption"></h3>
-            <fluent-divider></fluent-divider>
-            <div id="untrusted-domains"></div>
-        </fluent-card>
-        <fluent-card>
-            <h3 data-l10n-text-content="confirmation_miscCaption"></h3>
-            <fluent-divider></fluent-divider>
-            <div id="attachment-and-others"></div>
-        </fluent-card>
+        <div class="cards">
+            <fluent-card>
+                <div class="heading-container">
+                    <h3 data-l10n-text-content="confirmation_trustedCaption"></h3>
+                    <fluent-button onclick="onCheckAllTrusted()"
+                                   data-l10n-text-content="confirmation_trustedCheckAllButtonLabel"></fluent-button>
+                </div>
+                <fluent-divider></fluent-divider>
+                <div id="trusted-domains">
+                </div>
+            </fluent-card>
+            <fluent-card>
+                <h3 data-l10n-text-content="confirmation_untrustedCaption"></h3>
+                <fluent-divider></fluent-divider>
+                <div id="untrusted-domains"></div>
+            </fluent-card>
+            <fluent-card>
+                <h3 data-l10n-text-content="confirmation_miscCaption"></h3>
+                <fluent-divider></fluent-divider>
+                <div id="attachment-and-others"></div>
+            </fluent-card>
+        </div>
         <div class="button-container">
             <fluent-button id="send-button" onclick="onSend()" disabled
                            data-l10n-text-content="confirmation_sendButtonLabel"></fluent-button>

diff --git a/src/web/dialog.js → src/web/confirm.js b/src/web/dialog.js → src/web/confirm.js
@@ -2,6 +2,7 @@ import { L10n } from "./l10n.mjs";
 import { SafeBccConfirmation } from "./safe-bcc-confirmation.mjs";
 import { AddedDomainsReconfirmation } from "./added-domains-reconfirmation.mjs";
 import { AttachmentsConfirmation } from "./attachments-confirmation.mjs";
+import * as Dialog from "./dialog.mjs";
 
 let l10n;
 let safeBccConfirmation;
@@ -174,6 +175,8 @@ async function onMessageFromParent(arg) {
     )
   );
 
+  Dialog.resizeToContent();
+
   addedDomainsReconfirmation.init(data);
   addedDomainsReconfirmation.initUI(sendStatusToParent);
 

diff --git a/src/web/count-down.css b/src/web/count-down.css
@@ -1,19 +1,3 @@
-fluent-card {
-  margin-top: 20px;
-  padding-bottom: 20px;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
 #count {
   font-size: x-large;
 }
-
-.button-container {
-  margin-top: 20px;
-  text-align: right;
-}
-
-#cancel-button {
-  margin-left: 10px;
-}
diff --git a/src/web/count-down.html b/src/web/count-down.html
@@ -6,16 +6,19 @@
     <script src="https://unpkg.com/@fluentui/web-components" type="module"></script>
     <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"  crossorigin="anonymous"></script>
     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <link href="dialog.css" rel="stylesheet">
     <link href="count-down.css" rel="stylesheet">
 </head>
 <body>
     <div class="card-container">
-        <fluent-card>
-            <p id="message" hidden>
-              <span data-l10n-text-content="countDown_messageBefore"></span>
-              <span id="count"></span>
-              <span data-l10n-text-content="countDown_messageAfter"></span></p>
-        </fluent-card>
+        <div class="cards">
+            <fluent-card>
+                <p id="message" hidden>
+                  <span data-l10n-text-content="countDown_messageBefore"></span>
+                  <span id="count"></span>
+                  <span data-l10n-text-content="countDown_messageAfter"></span></p>
+            </fluent-card>
+        </div>
         <div class="button-container">
             <fluent-button id="send-button" onclick="onSend()"
                            data-l10n-text-content="countDown_sendButtonLabel"></fluent-button>

diff --git a/src/web/count-down.js b/src/web/count-down.js
@@ -1,4 +1,5 @@
 import { L10n } from "./l10n.mjs";
+import * as Dialog from "./dialog.mjs";
 
 let l10n;
 
@@ -44,6 +45,8 @@ async function onMessageFromParent(arg) {
   $("#count").text(data.config.common.CountSeconds);
   $("#message").show();
 
+  Dialog.resizeToContent();
+
   const start = Date.now();
   const timer = window.setInterval(() => {
     const rest = Math.ceil(data.config.common.CountSeconds - (Date.now() - start) / 1000);

diff --git a/src/web/dialog.css b/src/web/dialog.css
@@ -9,86 +9,36 @@ fluent-divider {
   margin: 1em 0;
 }
 
-.heading-container {
-  display: flex;
-  align-items: center;
-}
-
 .card-container {
-  margin-left: 20px; 
-  margin-right: 20px;
-}
-
-.heading-container fluent-button {
-  margin-left: 10px;
-}
-
-.check-target {
-  margin-left: 20px;
   display: flex;
-  margin-bottom: 10px;
+  flex-direction: column;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
 }
 
-#untrusted-domains fluent-checkbox::part(label) {
-  color: red;
+.cards,
+.button-container {
+  padding-left: 20px; 
+  padding-right: 20px;
 }
 
-#attachment-and-others fluent-checkbox.warning::part(label) {
-  color:red;
+.cards {
+  align-items: stretch;
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+  overflow: auto;
 }
 
 .button-container {
+  padding-bottom: 10px;
   margin-top: 20px;
   text-align: right;
 }
 
 #cancel-button {
   margin-left: 10px;
 }
-
-/* fluent-dialog {
-  --dialog-background-color: red;
-  background: red !important;
-  padding: 1.5em;
-  color: white !important;
-  font-size: x-large !important;
-  font-weight: bold !important;
-  text-align: center;
-} */
-
-fluent-dialog::part(control) {
-  color: white;
-  background-color: red;
-  padding: 0 1.5em 1.5em 1.5em;
-  text-align: center;
-  --dialog-width: fit-content;
-  --dialog-height: fit-content;
-}
-
-fluent-dialog::part(control) .newly-added-domain-content {
-  background-color: white;
-  background: var(--bg-color) !important;
-}
-
-fluent-dialog .newly-added-domain-content {
-  color: black;
-  padding: 2em;
-  text-align: left;
-}
-
-fluent-dialog .newly-added-domain-content strong {
-  font-size: large;
-  font-weight: bold;
-}
-
-#newly-added-domain-address-list {
-  margin: 1em 0;
-}
-
-#cancel-new-domain-button {
-  margin-left: 10px;
-}
-
-.new-domain-button-container {
-  margin-top: 20px;
-}
diff --git a/src/web/dialog.mjs b/src/web/dialog.mjs
@@ -0,0 +1,16 @@
+/*
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+*/
+"use strict";
+
+export function resizeToContent() {
+  const range = document.createRange();
+  range.selectNodeContents(document.querySelector(".card-container"));
+  const contentsRect = range.getBoundingClientRect();
+
+  const widthDelta = contentsRect.width - window.innerWidth;
+  const heightDelta = contentsRect.height - window.innerHeight;
+  window.resizeBy(Math.min(0, widthDelta), Math.min(0, heightDelta));
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -19,7 +19,7 @@ module.exports = async (env, options) => {
     entry: {
       polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
       app: ["./src/web/app.js"],
-      dialog: ["./src/web/dialog.js"],
+      confirm: ["./src/web/confirm.js"],
       "count-down": ["./src/web/count-down.js"],
     },
     output: {
@@ -83,9 +83,9 @@ module.exports = async (env, options) => {
         ],
       }),
       new HtmlWebpackPlugin({
-        filename: "dialog.html",
-        template: "./src/web/dialog.html",
-        chunks: ["polyfill", "dialog"],
+        filename: "confirm.html",
+        template: "./src/web/confirm.html",
+        chunks: ["polyfill", "confirm"],
       }),
       new HtmlWebpackPlugin({
         filename: "count-down.html",