scanning: Update how scanned images are displayed

Instead of displaying scanned images in a preview area with a fixed height, let the scanned images extend to the bottom of the app window. Bug: 1059779 Change-Id: I0b004a9d758fa5a164dab43148d46df3fd3400ed Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2553024 Commit-Queue: Jesse Schettler <jschettler@chromium.org> Commit-Queue: Zentaro Kavanagh <zentaro@chromium.org> Auto-Submit: Jesse Schettler <jschettler@chromium.org> Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org> Cr-Commit-Position: refs/heads/master@{#829890}

scanning: Update how scanned images are displayed
Instead of displaying scanned images in a preview area with a fixed height, let the scanned images extend to the bottom of the app window. Bug: 1059779 Change-Id: I0b004a9d758fa5a164dab43148d46df3fd3400ed Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2553024 Commit-Queue: Jesse Schettler <jschettler@chromium.org> Commit-Queue: Zentaro Kavanagh <zentaro@chromium.org> Auto-Submit: Jesse Schettler <jschettler@chromium.org> Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org> Cr-Commit-Position: refs/heads/master@{#829890}
c6adebc9 · Jesse Schettler · Commit Bot · ec15b409 · c6adebc9 · c6adebc9
Commit c6adebc9 authored Nov 21, 2020 by Jesse Schettler Committed by Commit Bot Nov 21, 2020
4 changed files
--- a/chromeos/components/scanning/resources/index.html
+++ b/chromeos/components/scanning/resources/index.html
@@ -7,6 +7,13 @@
    <meta charset="utf-8">
    <title>$i18n{appTitle}</title>
  </head>
+  <style>
+    body {
+      height: 100vh;
+      margin: 0;
+      overflow: hidden;
+    }
+  </style>
  <body>
    <scanning-app></scanning-app>


--- a/chromeos/components/scanning/resources/scan_preview.html
+++ b/chromeos/components/scanning/resources/scan_preview.html
@@ -12,6 +12,12 @@
    width: 60%;
  }

+  #helpOrProgress {
+    display: flex;
+    /* Calculate a height that results in a Letter aspect ratio (1:1.2941). */
+    height: calc(1.2941 * var(--left-panel-width));
+  }
+
  #progressText {
    @apply --scanning-progress-text-font;
    color: var(--scanning-progress-text-color);
@@ -24,19 +30,15 @@
  }

  .preview {
-    border: 1px solid var(--google-grey-200);
-    border-radius: 4px;
-    display: flex;
-    /* TODO(michaelcheco): Replace with correct height for
-     * preview container. */
-    height: 420px;
+    max-height: calc(100vh - var(--panel-container-margin-top));
    overflow-y: scroll;
  }

-  /* TODO(jschettler): Check with UX about adding a border around each image. */
-  .scanned-image {
+  .preview-item {
+    border: 1px solid var(--google-grey-200);
    border-radius: 4px;
-    width: 100%;
+    /* Subtract 2px for the border. */
+    width: calc(100% - 2px);
  }

  /* Add top margin to all but the first scanned image. */
@@ -54,16 +56,19 @@
  }
 </style>
 <div class="preview">
-  <div id="helperText" hidden$="[[shouldHideHelperText_(appState)]]">
-    <span inner-h-t-m-l="[[getHelperTextHtml_()]]"></span>
-  </div>
-  <div id="scanProgress" hidden$="[[shouldHideProgress_(appState)]]">
-    <span id="progressText">[[getProgressTextString_(pageNumber)]]</span>
-    <paper-progress value="[[progressPercent]]"></paper-progress>
+  <div id="helpOrProgress" class="preview-item"
+      hidden$="[[shouldShowScannedImages_(appState)]]">
+    <div id="helperText" hidden$="[[shouldHideHelperText_(appState)]]">
+      <span inner-h-t-m-l="[[getHelperTextHtml_()]]"></span>
+    </div>
+    <div id="scanProgress" hidden$="[[shouldHideProgress_(appState)]]">
+      <span id="progressText">[[getProgressTextString_(pageNumber)]]</span>
+      <paper-progress value="[[progressPercent]]"></paper-progress>
+    </div>
  </div>
  <div id="scannedImages" hidden$="[[!shouldShowScannedImages_(appState)]]">
    <template is="dom-repeat" items="[[objectUrls]]" as="url">
-      <img class="scanned-image" src="[[url]]">
+      <img class="preview-item scanned-image" src="[[url]]">
    </template>
  </div>
 </div>
--- a/chromeos/components/scanning/resources/scanning_app.html
+++ b/chromeos/components/scanning/resources/scanning_app.html
@@ -60,11 +60,11 @@

  .panel-container {
    display: flex;
-    margin-bottom: var(--panel-container-margin-bottom);
    margin-top: var(--panel-container-margin-top);
  }

  .right-panel {
+    margin-bottom: var(--right-panel-margin-bottom);
    padding-inline-end: var(--right-panel-padding-end);
    padding-inline-start: var(--right-panel-padding-start);
    width: var(--right-panel-width);

--- a/chromeos/components/scanning/resources/scanning_shared_css.html
+++ b/chromeos/components/scanning/resources/scanning_shared_css.html
@@ -17,8 +17,8 @@
        --left-panel-padding-end: 32px;
        --left-panel-padding-start: 32px;
        --left-panel-width: 288px;
-        --panel-container-margin-bottom: 20px;
        --panel-container-margin-top: 20px;
+        --right-panel-margin-bottom: 20px;
        --right-panel-padding-end: 32px;
        --right-panel-padding-start: 0px;
        --right-panel-width: 384px;
@@ -31,8 +31,8 @@
        --left-panel-padding-end: 48px;
        --left-panel-padding-start: 48px;
        --left-panel-width: 384px;
-        --panel-container-margin-bottom: 32px;
        --panel-container-margin-top: 20px;
+        --right-panel-margin-bottom: 32px;
        --right-panel-padding-end: 48px;
        --right-panel-padding-start: 48px;
        --right-panel-width: 384px;
@@ -45,8 +45,8 @@
        --left-panel-padding-end: 60px;
        --left-panel-padding-start: 164px;
        --left-panel-width: 416px;
-        --panel-container-margin-bottom: 64px;
        --panel-container-margin-top: 64px;
+        --right-panel-margin-bottom: 64px;
        --right-panel-padding-end: 164px;
        --right-panel-padding-start: 60px;
        --right-panel-width: 416px;