From 80d473bae455bc33a73cfb4736386d8987cce641 Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Sat, 9 Apr 2022 06:08:08 +0200
Subject: [PATCH] bugfixes: fix duplicate panel action mode, empty folder and
style correctly pages in thumbnail panel of the viewer
---
app/components/commander/action_modes.hbs | 20 ++++++----
app/components/commander/empty_folder.hbs | 6 +++
app/components/commander/index.hbs | 48 ++++++++++++-----------
app/components/commander/index.js | 4 ++
app/components/panel_modes/index.hbs | 4 +-
app/controllers/authenticated/document.js | 47 ++++++++++++++++------
app/controllers/authenticated/nodes.js | 38 ++++++++++++++----
app/modifiers/tooltip.js | 14 +++++--
app/styles/app.scss | 4 ++
app/styles/document_version.scss | 5 +++
changelog.md | 18 +++++++++
11 files changed, 155 insertions(+), 53 deletions(-)
create mode 100644 app/components/commander/empty_folder.hbs
create mode 100644 changelog.md
diff --git a/app/components/commander/action_modes.hbs b/app/components/commander/action_modes.hbs
index 72e1277..fccb80d 100644
--- a/app/components/commander/action_modes.hbs
+++ b/app/components/commander/action_modes.hbs
@@ -11,14 +11,18 @@
@onDuplicatePanel={{@onDuplicatePanel}} />
<div class="panel-mode">
- <button type="button" class="btn btn-light mx-1"
- {{on "click" (fn @onPanelToggle @hint) }}>
- {{#if @dualPanelMode}}
- <i class="bi-x"></i>
- {{else}}
+ {{#if @dualPanelMode}}
+ <button type="button" class="btn btn-light mx-1"
+ {{tooltip title='Close panel' placement='bottom'}}
+ {{on "click" (fn @onPanelToggle @hint) }}>
+ <i class="bi-x"></i>
+ </button>
+ {{else}}
+ <button type="button" class="btn btn-light mx-1"
+ {{tooltip title='Split panel' placement='bottom'}}
+ {{on "click" (fn @onPanelToggle @hint) }}>
<i class="bi-layout-split"></i>
- {{/if}}
- </button>
+ </button>
+ {{/if}}
</div>
-
</div>
diff --git a/app/components/commander/empty_folder.hbs b/app/components/commander/empty_folder.hbs
new file mode 100644
index 0000000..0e626ea
--- /dev/null
+++ b/app/components/commander/empty_folder.hbs
@@ -0,0 +1,6 @@
+<div class='empty_folder text-muted'>
+ <div class="d-flex flex-column align-items-center">
+ <h1><i class="bi bi-folder"></i></h1>
+ <div>Folder is Empty</div>
+ </div>
+</div>
diff --git a/app/components/commander/index.hbs b/app/components/commander/index.hbs
index 5466867..4cd64da 100644
--- a/app/components/commander/index.hbs
+++ b/app/components/commander/index.hbs
@@ -74,28 +74,32 @@
@onNodeClicked={{this.onNodeClicked}}
@hint={{@hint}} />
- <div class="view-mode-{{this.view_mode}}">
-
- {{#each this.children as |node|}}
- {{#let (component node.nodeType) as |NodeType|}}
- {{! NodeType is either <Folder /> or <Document />}}
- <NodeType
- @model={{node}}
- @selectedNodes={{this.selected_nodes}}
- @onCheckboxChange={{this.onCheckboxChange}}
- @onDragendSuccess={{this.onDragendSuccess}}
- @onDragendCancel={{this.onDragendCancel}}>
- <DualLinkTo
- @node={{node}}
- @extranode={{@extranode}}
- @extradoc={{@extradoc}}
- @hint={{@hint}}
- {{on "click" this.onNodeClicked}} />
- </NodeType>
- {{/let}}
- {{/each}}
-
- </div>
+ {{#if this.is_empty_folder }}
+ <div class="view-mode-list">
+ <Commander::EmptyFolder />
+ </div>
+ {{else}}
+ <div class="view-mode-{{this.view_mode}}">
+ {{#each this.children as |node|}}
+ {{#let (component node.nodeType) as |NodeType|}}
+ {{! NodeType is either <Folder /> or <Document />}}
+ <NodeType
+ @model={{node}}
+ @selectedNodes={{this.selected_nodes}}
+ @onCheckboxChange={{this.onCheckboxChange}}
+ @onDragendSuccess={{this.onDragendSuccess}}
+ @onDragendCancel={{this.onDragendCancel}}>
+ <DualLinkTo
+ @node={{node}}
+ @extranode={{@extranode}}
+ @extradoc={{@extradoc}}
+ @hint={{@hint}}
+ {{on "click" this.onNodeClicked}} />
+ </NodeType>
+ {{/let}}
+ {{/each}}
+ </div>
+ {{/if}}
<!--
{{#if @pagination }}
diff --git a/app/components/commander/index.js b/app/components/commander/index.js
index 4261767..40b05e4 100644
--- a/app/components/commander/index.js
+++ b/app/components/commander/index.js
@@ -431,4 +431,8 @@ export default class CommanderComponent extends Component {
}
return children_copy;
}
+
+ get is_empty_folder() {
+ return this.children.length === 0;
+ }
}
diff --git a/app/components/panel_modes/index.hbs b/app/components/panel_modes/index.hbs
index 896a212..44e6e6f 100644
--- a/app/components/panel_modes/index.hbs
+++ b/app/components/panel_modes/index.hbs
@@ -3,7 +3,8 @@
<button
type="button"
class="btn btn-light mx-1"
- {{on 'click' @onDuplicatePanel}}>
+ {{tooltip title='Duplicate panel' placement='bottom'}}
+ {{on 'click' (fn @onDuplicatePanel @hint)}}>
{{#if (is_equal @hint "left")}}
<i class="bi-arrow-bar-right"></i>
{{else}}
@@ -13,6 +14,7 @@
<button type="button"
class="btn btn-light mx-1"
+ {{tooltip title='Swap panels' placement='bottom'}}
{{on 'click' @onSwapPanels}}>
<i class="bi-arrow-left-right"></i>
</button>
diff --git a/app/controllers/authenticated/document.js b/app/controllers/authenticated/document.js
index 162cb64..88e0602 100644
--- a/app/controllers/authenticated/document.js
+++ b/app/controllers/authenticated/document.js
@@ -87,22 +87,45 @@ export default class DocumentController extends DualPanelBaseController {
}
@action
- onDuplicatePanel() {
+ onDuplicatePanel(hint) {
let document_id = this.router.currentRoute.params['document_id'],
query_params;
- query_params = {
- 'queryParams': {
- 'extra_id': document_id,
- 'extra_type': 'doc'
+ if (hint === 'left') {
+ query_params = {
+ 'queryParams': {
+ 'extra_id': document_id,
+ 'extra_type': 'doc'
+ }
}
- }
- if (this.extra_id) {
- this.router.transitionTo(
- 'authenticated.document',
- document_id,
- query_params
- );
+ if (this.extra_id) {
+ this.router.transitionTo(
+ 'authenticated.document',
+ document_id,
+ query_params
+ );
+ }
+ } else { // hint == 'right'
+ query_params = {
+ 'queryParams': {
+ 'extra_id': this.extra_id,
+ 'extra_type': this.extra_type
+ }
+ }
+
+ if (this.extra_type == 'folder') {
+ this.router.transitionTo(
+ 'authenticated.nodes',
+ this.extra_id,
+ query_params
+ );
+ } else {
+ this.router.transitionTo(
+ 'authenticated.document',
+ this.extra_id,
+ query_params
+ );
+ } // this.extra_type
}
}
}
diff --git a/app/controllers/authenticated/nodes.js b/app/controllers/authenticated/nodes.js
index 4cd2e4b..1b06014 100644
--- a/app/controllers/authenticated/nodes.js
+++ b/app/controllers/authenticated/nodes.js
@@ -67,23 +67,47 @@ export default class NodesController extends DualPanelBaseController {
}
@action
- onDuplicatePanel() {
+ onDuplicatePanel(hint) {
let node_id = this.router.currentRoute.params['node_id'],
query_params;
- query_params = {
- 'queryParams': {
- 'extra_id': node_id,
- 'extra_type': 'folder'
+
+ if (hint === 'left') {
+ query_params = {
+ 'queryParams': {
+ 'extra_id': node_id,
+ 'extra_type': 'folder'
+ }
}
- }
- if (this.extra_id) {
+ if (this.extra_id) {
this.router.transitionTo(
'authenticated.nodes',
node_id,
query_params
);
+ }
+ } else { // hint == 'right'
+ query_params = {
+ 'queryParams': {
+ 'extra_id': this.extra_id,
+ 'extra_type': this.extra_type
+ }
+ }
+
+ if (this.extra_type == 'folder') {
+ this.router.transitionTo(
+ 'authenticated.nodes',
+ this.extra_id,
+ query_params
+ );
+ } else {
+ this.router.transitionTo(
+ 'authenticated.document',
+ this.extra_id,
+ query_params
+ );
+ } // this.extra_type
}
}
}
diff --git a/app/modifiers/tooltip.js b/app/modifiers/tooltip.js
index 64bf372..9c2ff94 100644
--- a/app/modifiers/tooltip.js
+++ b/app/modifiers/tooltip.js
@@ -5,15 +5,23 @@ import bootstrap from 'bootstrap';
export default class TooltipModifier extends Modifier {
didReceiveArguments() {
- let { title } = this.args.named;
+ let { title, placement } = this.args.named;
- return new bootstrap.Tooltip(
+ if (!placement) {
+ placement = 'right';
+ }
+
+ this.tooltip = new bootstrap.Tooltip(
this.element,
{
'title': title,
- 'placement': 'right',
+ 'placement': placement,
'trigger': 'hover'
}
);
}
+
+ willDestroy() {
+ this.tooltip.hide();
+ }
}
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 3db9bc5..62e279d 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -60,6 +60,10 @@ main {
.commander {
background-color: white;
+
+ .empty_folder {
+ margin: 2rem;
+ }
}
.viewer {
diff --git a/app/styles/document_version.scss b/app/styles/document_version.scss
index db9a087..d1baf3e 100644
--- a/app/styles/document_version.scss
+++ b/app/styles/document_version.scss
@@ -6,6 +6,11 @@
.thumbnail {
margin: 0.25rem;
+
+ svg {
+ border: 1px solid #ccc;
+ }
+
img {
width: 6rem;
}
diff --git a/changelog.md b/changelog.md
new file mode 100644
index 0000000..aeaf3e8
--- /dev/null
+++ b/changelog.md
@@ -0,0 +1,18 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+
+
+## [2.1.0-alpha-11] - work in progress
+
+### Added
+
+ - In commander, when empty folder is opened show 'Folder is Empty' placeholder instead of blank area
+ - Introduce tooltips for panel mode buttons (swap, duplicate, close)
+
+### Changed
+ - Bugfix: clicking 'duplicate' panel mode button duplicates wrong panel
+ - Bugfix: Blank pages without border in thumbnails panel of the document viewer (papermerge/papermerge.js#2)
\ No newline at end of file
--
GitLab