From e8c55263ce5856f5c2192cf19b90fa3fca4cf419 Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Thu, 3 Mar 2022 21:53:11 +0100
Subject: [PATCH] add zoom in/zoom out
---
app/components/viewer/document/index.hbs | 17 ++++++++++----
app/components/viewer/document/index.js | 26 +++++++++++++++++++++
app/components/viewer/index.hbs | 4 +++-
app/components/viewer/page.hbs | 3 ++-
app/components/viewer/pages.hbs | 18 ++++++++------
app/components/viewer/thumbnails_switch.hbs | 7 ++++++
app/components/viewer/zoom.hbs | 11 +++++++++
app/modifiers/adjust_element_height.js | 9 -------
app/modifiers/zoom_factor.js | 11 +++++++++
app/styles/app.scss | 1 +
app/styles/document_version.scss | 10 ++++++++
app/styles/zoom.scss | 8 +++++++
12 files changed, 103 insertions(+), 22 deletions(-)
create mode 100644 app/components/viewer/thumbnails_switch.hbs
create mode 100644 app/components/viewer/zoom.hbs
create mode 100644 app/modifiers/zoom_factor.js
create mode 100644 app/styles/zoom.scss
diff --git a/app/components/viewer/document/index.hbs b/app/components/viewer/document/index.hbs
index f3128a6..bd599a2 100644
--- a/app/components/viewer/document/index.hbs
+++ b/app/components/viewer/document/index.hbs
@@ -1,8 +1,17 @@
<div class="d-flex">
- <Viewer::Thumbnails
- @pages={{@pages}}
- @onDblClick={{this.onThumbnailDblClick}} />
+ {{#if this.thumbnails_visible}}
+ <Viewer::Thumbnails
+ @pages={{@pages}}
+ @onDblClick={{this.onThumbnailDblClick}} />
+ {{/if}}
+ <Viewer::ThumbnailsSwitch
+ @onThumbnailsToggle={{this.onThumbnailsToggle}}
+ @thumbnails_visible={{this.thumbnails_visible}} />
<Viewer::Pages
@pages={{@pages}}
- @scroll_to_page={{this.scroll_to_page}} />
+ @scroll_to_page={{this.scroll_to_page}}
+ @onZoomIn={{this.onZoomIn}}
+ @onZoomOut={{this.onZoomOut}}
+ @onZoomFit={{this.onZoomFit}}
+ @zoom_factor={{this.zoom_factor}} />
</div>
\ No newline at end of file
diff --git a/app/components/viewer/document/index.js b/app/components/viewer/document/index.js
index e22025e..d4ff90b 100644
--- a/app/components/viewer/document/index.js
+++ b/app/components/viewer/document/index.js
@@ -5,9 +5,35 @@ import { action } from '@ember/object';
export default class ViewerDocumentComponent extends Component {
@tracked scroll_to_page;
+ @tracked thumbnails_visible = true;
+ @tracked zoom_factor = 100;
@action
onThumbnailDblClick(page) {
this.scroll_to_page = page;
}
+
+ @action
+ onThumbnailsToggle() {
+ this.thumbnails_visible = !this.thumbnails_visible;
+ }
+
+ @action
+ onZoomIn() {
+ if (this.zoom_factor < 300) {
+ this.zoom_factor += 10;
+ }
+ }
+
+ @action
+ onZoomOut() {
+ if (this.zoom_factor > 20) {
+ this.zoom_factor -= 10;
+ }
+ }
+
+ @action
+ onZoomFit() {
+ this.zoom_factor = 100;
+ }
}
\ No newline at end of file
diff --git a/app/components/viewer/index.hbs b/app/components/viewer/index.hbs
index 030d77d..e3f3342 100644
--- a/app/components/viewer/index.hbs
+++ b/app/components/viewer/index.hbs
@@ -20,6 +20,8 @@
@hint={{@hint}} />
<Viewer::Document
- @pages={{this.pages}} />
+ @pages={{this.pages}}
+ @thumbnails_visible={{this.thumbnails_visible}}
+ @onThumbnailsToggle={{this.onThumbnailsToggle}} />
</div>
diff --git a/app/components/viewer/page.hbs b/app/components/viewer/page.hbs
index f32dab0..ffbba07 100644
--- a/app/components/viewer/page.hbs
+++ b/app/components/viewer/page.hbs
@@ -1,6 +1,7 @@
<div
class="page d-flex flex-column align-items-center"
- {{scrollIntoView page=@page scroll_to_page=@scroll_to_page}}>
+ {{scrollIntoView page=@page scroll_to_page=@scroll_to_page}}
+ {{zoomFactor @zoom_factor}}>
{{#if @page.svg_image}}
{{{@page.svg_image}}}
diff --git a/app/components/viewer/pages.hbs b/app/components/viewer/pages.hbs
index 3d1fee9..8c6e361 100644
--- a/app/components/viewer/pages.hbs
+++ b/app/components/viewer/pages.hbs
@@ -1,9 +1,13 @@
-<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}}
+ {{#each @pages as |page|}}
+ <Viewer::Page
+ @page={{page}}
+ @scroll_to_page={{@scroll_to_page}}
+ @zoom_factor={{@zoom_factor}} />
+ {{/each}}
+ <Viewer::Zoom
+ @onZoomIn={{@onZoomIn}}
+ @onZoomOut={{@onZoomOut}}
+ @onZoomFit={{@onZoomFit}} />
</div>
diff --git a/app/components/viewer/thumbnails_switch.hbs b/app/components/viewer/thumbnails_switch.hbs
new file mode 100644
index 0000000..68b85fc
--- /dev/null
+++ b/app/components/viewer/thumbnails_switch.hbs
@@ -0,0 +1,7 @@
+<div class="thumbnails-switch" {{on "click" @onThumbnailsToggle}}>
+ {{#if @thumbnails_visible}}
+ <i class="bi bi-arrow-left-square fs-5"></i>
+ {{else}}
+ <i class="bi bi-arrow-right-square fs-5"></i>
+ {{/if}}
+</div>
\ No newline at end of file
diff --git a/app/components/viewer/zoom.hbs b/app/components/viewer/zoom.hbs
new file mode 100644
index 0000000..ef8170c
--- /dev/null
+++ b/app/components/viewer/zoom.hbs
@@ -0,0 +1,11 @@
+<div class="zoom d-flex justify-content-center">
+ <div>
+ <i class="bi bi-zoom-in px-1" {{on "click" @onZoomIn}}></i>
+ </div>
+ <div>
+ <i class="bi bi-zoom-out px-1" {{on "click" @onZoomOut}}></i>
+ </div>
+ <div class="px-1" {{on "click" @onZoomFit}}>
+ Fit
+ </div>
+</div>
\ No newline at end of file
diff --git a/app/modifiers/adjust_element_height.js b/app/modifiers/adjust_element_height.js
index 18975f9..488afc5 100644
--- a/app/modifiers/adjust_element_height.js
+++ b/app/modifiers/adjust_element_height.js
@@ -55,15 +55,6 @@ export default class AdjustElementHeightModifier extends Modifier {
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;
}
diff --git a/app/modifiers/zoom_factor.js b/app/modifiers/zoom_factor.js
new file mode 100644
index 0000000..fe2cf76
--- /dev/null
+++ b/app/modifiers/zoom_factor.js
@@ -0,0 +1,11 @@
+import Modifier from 'ember-modifier';
+
+
+export default class ZoomFactorModifier extends Modifier {
+ didReceiveArguments() {
+ let zoom_factor = this.args.positional[0];
+
+ this.element.style.width = `${zoom_factor}%`;
+ }
+
+}
\ No newline at end of file
diff --git a/app/styles/app.scss b/app/styles/app.scss
index ceac81d..3db9bc5 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -10,6 +10,7 @@
@import "./preferences.scss";
@import "./ui_select.scss";
@import "./context_menu.scss";
+@import "./zoom.scss";
body {
diff --git a/app/styles/document_version.scss b/app/styles/document_version.scss
index b5f4690..7e2c22e 100644
--- a/app/styles/document_version.scss
+++ b/app/styles/document_version.scss
@@ -12,10 +12,20 @@
}
}
+.thumbnails-switch {
+ background-color: #666;
+ color: white;
+}
+
.pages {
overflow: scroll;
+ position: relative;
width: 100%;
+ background-color: #666;
+
.page {
+ margin: auto;
+ color: white;
img {
width: 100%;
}
diff --git a/app/styles/zoom.scss b/app/styles/zoom.scss
new file mode 100644
index 0000000..17d835a
--- /dev/null
+++ b/app/styles/zoom.scss
@@ -0,0 +1,8 @@
+.zoom {
+ position: sticky;
+ bottom: 0;
+ background-color: #d4d4d47d;
+ padding: 0.5rem;
+ width: 40%;
+ margin: auto;
+}
\ No newline at end of file
--
GitLab