From 24b8882007046a97a9279d232000145b1bbc6886 Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Wed, 2 Mar 2022 21:20:57 +0100
Subject: [PATCH] correct adjust height of the viewer
---
app/components/breadcrumb/index.hbs | 2 +-
app/components/nav/topbar.hbs | 2 +-
app/components/viewer/index.hbs | 3 +-
app/components/viewer/pages.hbs | 6 +-
app/components/viewer/thumbnails.hbs | 6 +-
app/modifiers/adjust_element_height.js | 90 ++++++++++++++++++++++++++
app/styles/document_version.scss | 7 +-
7 files changed, 105 insertions(+), 11 deletions(-)
create mode 100644 app/modifiers/adjust_element_height.js
diff --git a/app/components/breadcrumb/index.hbs b/app/components/breadcrumb/index.hbs
index aa761e2..0146708 100644
--- a/app/components/breadcrumb/index.hbs
+++ b/app/components/breadcrumb/index.hbs
@@ -1,4 +1,4 @@
-<nav aria-label="breadcrumb" class="m-2">
+<nav aria-label="breadcrumb" class="m-2 nav-breadcrumb">
<ol class="breadcrumb">
{{#each this.nodes as |node|}}
<li class="breadcrumb-item">
diff --git a/app/components/nav/topbar.hbs b/app/components/nav/topbar.hbs
index 299cb94..72a3ce0 100644
--- a/app/components/nav/topbar.hbs
+++ b/app/components/nav/topbar.hbs
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand nav-topbar">
+<nav id='nav-topbar' class="navbar navbar-expand nav-topbar">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
diff --git a/app/components/viewer/index.hbs b/app/components/viewer/index.hbs
index 97a21d6..030d77d 100644
--- a/app/components/viewer/index.hbs
+++ b/app/components/viewer/index.hbs
@@ -1,5 +1,5 @@
<div class="panel viewer col m-2 p-2">
- <div class="d-flex justify-content-between">
+ <div class="d-flex justify-content-between action-buttons">
<Viewer::ActionButtons
@document_versions={{this.document_versions}}
@isLocked={{this.isLocked}}
@@ -19,7 +19,6 @@
@onNodeClicked={{this.onNodeClicked}}
@hint={{@hint}} />
-
<Viewer::Document
@pages={{this.pages}} />
diff --git a/app/components/viewer/pages.hbs b/app/components/viewer/pages.hbs
index dca9a51..3d1fee9 100644
--- a/app/components/viewer/pages.hbs
+++ b/app/components/viewer/pages.hbs
@@ -1,7 +1,9 @@
-<div class="d-flex flex-column pages">
+<div
+ class="d-flex flex-column pages"
+ {{adjust_element_height}}>
{{#each @pages as |page|}}
<Viewer::Page
@page={{page}}
@scroll_to_page={{@scroll_to_page}} />
{{/each}}
-</div>
\ No newline at end of file
+</div>
diff --git a/app/components/viewer/thumbnails.hbs b/app/components/viewer/thumbnails.hbs
index 7c0a4b8..c3e5aa9 100644
--- a/app/components/viewer/thumbnails.hbs
+++ b/app/components/viewer/thumbnails.hbs
@@ -1,7 +1,9 @@
-<div class="d-flex flex-column thumbnails">
+<div
+ class="d-flex flex-column thumbnails"
+ {{adjust_element_height}}>
{{#each @pages as |page|}}
<Viewer::Thumbnail
@page={{page}}
@onDblClick={{@onDblClick}} />
{{/each}}
-</div>
\ No newline at end of file
+</div>
diff --git a/app/modifiers/adjust_element_height.js b/app/modifiers/adjust_element_height.js
new file mode 100644
index 0000000..18975f9
--- /dev/null
+++ b/app/modifiers/adjust_element_height.js
@@ -0,0 +1,90 @@
+import Modifier from 'ember-modifier';
+
+
+export default class AdjustElementHeightModifier extends Modifier {
+ /*
+ This modifier will calculate height of the element so the element
+ will fit in visible area without overflows.
+
+ This modifier was written having in mind '.pages' and '.thumbnails'
+ components of viewer. The '.pages' and '.thumbnails' heights (i.e.
+ elements' height) must be so that '.pages' and '.thumbnails' will
+ ocupy whole visible screen area without overflowing it.
+ */
+ didInstall() {
+ let height = this._getCorrectHeight();
+
+ this.element.style.height = `${height}px`;
+ }
+
+ _getCorrectHeight() {
+ let ret;
+
+ ret = window.innerHeight;
+ ret -= this._getNavbarHeight();
+ ret -= this._getBreadcrumbHeight();
+ ret -= this._getActionButtonsHeight();
+ ret -= 60; // guessing here, in theory this value should be
+ // calculeted based on padding/margin of various dom elements
+
+ return ret;
+ }
+
+ _getComputedHeight({element_id, element_class, default_value}) {
+ let el, styles, height;
+
+ if (element_id) {
+ el = document.getElementById(element_id);
+ } else if (element_class) {
+ el = document.getElementsByClassName(element_class)[0];
+ }
+
+ if (!el) {
+ if (element_id) {
+ console.error(`Element with ID ${element_id} not found`);
+ }
+ if (element_class) {
+ console.error(`Element with class name ${element_class} not found`);
+ }
+ return default_value; // blunt guess of element height
+ }
+
+ styles = window.getComputedStyle(el);
+
+ height = parseInt(styles.height);
+ height += parseInt(styles.marginTop);
+ height += parseInt(styles.marginBottom);
+
+ if (element_id) {
+ console.log(`ID=${element_id}: height=${styles.height}`);
+ console.log(`ID=${element_id}: marginTop=${styles.marginTop}`);
+ console.log(`ID=${element_id}: marginBottom=${styles.marginBottom}`);
+ } else {
+ console.log(`element_class=${element_class}: height=${styles.height}`);
+ console.log(`element_class=${element_class}: marginTop=${styles.marginTop}`);
+ console.log(`element_class=${element_class}: marginBottom=${styles.marginBottom}`);
+ }
+ return height;
+ }
+
+ _getNavbarHeight() {
+ return this._getComputedHeight({
+ element_id: 'nav-topbar',
+ default_value: 56
+ });
+ }
+
+ _getBreadcrumbHeight() {
+ return this._getComputedHeight({
+ element_class: 'nav-breadcrumb',
+ default_value: 40
+ });
+ }
+
+ _getActionButtonsHeight() {
+ return this._getComputedHeight({
+ element_class: 'action-buttons',
+ default_value: 40
+ });
+ }
+}
\ No newline at end of file
diff --git a/app/styles/document_version.scss b/app/styles/document_version.scss
index dd37d4b..b5f4690 100644
--- a/app/styles/document_version.scss
+++ b/app/styles/document_version.scss
@@ -1,6 +1,8 @@
.thumbnails {
- max-width: 8rem;
+ max-width: 10rem;
+ width: 10rem;
+ overflow: scroll;
.thumbnail {
margin: 1rem;
@@ -12,8 +14,7 @@
.pages {
overflow: scroll;
- height: 100vh;
-
+ width: 100%;
.page {
img {
width: 100%;
--
GitLab