From 99066a5f40085d7145b3f2709af73772634c742a Mon Sep 17 00:00:00 2001
From: Eugen Ciur <eugen@papermerge.com>
Date: Tue, 22 Feb 2022 22:39:46 +0100
Subject: [PATCH] add pinned tags on the sidebar
---
app/components/breadcrumb/index.hbs | 3 ++-
app/components/commander/index.hbs | 6 +++---
app/components/commander/index.js | 12 ++++++++++-
app/components/nav/sidebar.hbs | 17 +++++++++++++++
app/components/nav/sidebar.js | 13 ++++++++++++
app/controllers/authenticated.js | 2 +-
app/routes/application.js | 5 +++++
app/services/preferences.js | 2 +-
app/styles/button.scss | 33 +++++++++++++++++++++++++++++
app/templates/authenticated.hbs | 1 +
10 files changed, 87 insertions(+), 7 deletions(-)
create mode 100644 app/components/nav/sidebar.js
diff --git a/app/components/breadcrumb/index.hbs b/app/components/breadcrumb/index.hbs
index badd252..aa761e2 100644
--- a/app/components/breadcrumb/index.hbs
+++ b/app/components/breadcrumb/index.hbs
@@ -6,7 +6,8 @@
@node={{node}}
@extranode={{@extranode}}
@extradoc={{@extradoc}}
- @hint={{@hint}}>
+ @hint={{@hint}}
+ {{on "click" @onNodeClicked}} >
{{#if (is_equal node.title ".inbox")}}
<i class="bi-inbox-fill me-2"></i>Inbox
{{else if (is_equal node.title ".home")}}
diff --git a/app/components/commander/index.hbs b/app/components/commander/index.hbs
index fc80a2a..24a93d7 100644
--- a/app/components/commander/index.hbs
+++ b/app/components/commander/index.hbs
@@ -57,6 +57,7 @@
@node={{@node}}
@extranode={{@extranode}}
@extradoc={{@extradoc}}
+ @onNodeClicked={{this.onNodeClicked}}
@hint={{@hint}} />
<div class="view-mode-{{this.view_mode}}">
@@ -74,7 +75,8 @@
@node={{node}}
@extranode={{@extranode}}
@extradoc={{@extradoc}}
- @hint={{@hint}} />
+ @hint={{@hint}}
+ {{on "click" this.onNodeClicked}} />
</NodeType>
{{/let}}
{{/each}}
@@ -87,6 +89,4 @@
@node={{@node}}
@hint={{@hint}} />
{{/if}}
-
-
</div>
diff --git a/app/components/commander/index.js b/app/components/commander/index.js
index eea132a..2ddcf09 100644
--- a/app/components/commander/index.js
+++ b/app/components/commander/index.js
@@ -131,9 +131,19 @@ export default class CommanderComponent extends Component {
this.__new_record = doc;
}
+ @action
+ onNodeClicked() {
+ /**
+ * Whenever a folder is clicked reset selected node list
+ *
+ * Otherwise user will see (newly opened) folder with no
+ * selected nodes - but with visible action buttons (delete, download...)!
+ * */
+ this.selected_nodes = A([]);
+ }
+
@action
openNewFolderModal() {
- console.log('on new folder');
this.show_new_folder_modal = true;
}
diff --git a/app/components/nav/sidebar.hbs b/app/components/nav/sidebar.hbs
index b382bf4..ce0abdb 100644
--- a/app/components/nav/sidebar.hbs
+++ b/app/components/nav/sidebar.hbs
@@ -20,6 +20,23 @@
<i class="fa fa-home me-2"></i>Home
</LinkTo>
</li>
+ <li>
+ <button class="btn btn-toggle rounded align-items-center text-white" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false">
+ Pinned tags
+ </button>
+ <div id="home-collapse" class="collapse">
+ <ul class="list-unstyled px-3 mx-3 my-1">
+ {{#each @pinned_tags as |pinned_tag|}}
+ <li class="mb-2 pb-1">
+ <Tag::Item
+ @name={{pinned_tag.name}}
+ @fg_color={{pinned_tag.fg_color}}
+ @bg_color={{pinned_tag.bg_color}} />
+ </li>
+ {{/each}}
+ </ul>
+ </div>
+ </li>
<li>
<LinkTo
@route="authenticated.nodes"
diff --git a/app/components/nav/sidebar.js b/app/components/nav/sidebar.js
new file mode 100644
index 0000000..ec91ffe
--- /dev/null
+++ b/app/components/nav/sidebar.js
@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+
+
+export default class SidebarComponent extends Component {
+ @service store;
+
+ get pinned_tags() {
+ return this.store.findAll('tag').then((tags) => {
+ return tags.filter(tag => tag.pinned);
+ });
+ }
+}
diff --git a/app/controllers/authenticated.js b/app/controllers/authenticated.js
index 516dc6f..15f5236 100644
--- a/app/controllers/authenticated.js
+++ b/app/controllers/authenticated.js
@@ -1,6 +1,6 @@
import { action } from '@ember/object';
import Controller from '@ember/controller';
-import { tracked } from '@glimmer/tracking'
+import { tracked } from '@glimmer/tracking';
export default class AuthenticatedController extends Controller {
diff --git a/app/routes/application.js b/app/routes/application.js
index 6734f7b..5d98cac 100644
--- a/app/routes/application.js
+++ b/app/routes/application.js
@@ -3,4 +3,9 @@ import BaseRoute from 'papermerge/routes/base';
export default class ApplicationRoute extends BaseRoute {
+ async model() {
+ return this.store.findAll('tag').then((tags) => {
+ return tags.filter(tag => tag.pinned);
+ });
+ }
}
diff --git a/app/services/preferences.js b/app/services/preferences.js
index d509b03..68411f5 100644
--- a/app/services/preferences.js
+++ b/app/services/preferences.js
@@ -12,7 +12,7 @@ export default class Preferences extends Service {
prefs = this.store.peekAll('preferences');
- found_item = prefs.filterBy('identifier',key);
+ found_item = prefs.filterBy('identifier', key);
if (found_item && found_item.length == 1) {
return found_item[0]['value'];
diff --git a/app/styles/button.scss b/app/styles/button.scss
index a3faba5..287fdca 100644
--- a/app/styles/button.scss
+++ b/app/styles/button.scss
@@ -4,4 +4,37 @@ button {
a.btn {
border-radius: 0px !important;
+}
+
+.btn-toggle::before {
+ width: 1.25em;
+ line-height: 0;
+ content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.8%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+ transition: transform .35s ease;
+ transform-origin: .5em 50%;
+}
+
+.btn-toggle[aria-expanded="true"]::before {
+ transform: rotate(90deg);
+}
+
+.btn-toggle-nav a {
+ display: inline-flex;
+ padding: .1875rem .5rem;
+ margin-top: .125rem;
+ margin-left: 1.25rem;
+ text-decoration: none;
+}
+.btn-toggle-nav a:hover,
+.btn-toggle-nav a:focus {
+ background-color: #d2f4ea;
+}
+
+.btn-toggle {
+ display: inline-flex;
+ align-items: center;
+ padding: .25rem .5rem;
+ color: rgba(0, 0, 0, .65);
+ background-color: transparent;
+ border: 0;
}
\ No newline at end of file
diff --git a/app/templates/authenticated.hbs b/app/templates/authenticated.hbs
index 6f5d721..b65611e 100644
--- a/app/templates/authenticated.hbs
+++ b/app/templates/authenticated.hbs
@@ -2,6 +2,7 @@
<Nav::Sidebar
@home_folder={{this.home_folder}}
@inbox_folder={{this.inbox_folder}}
+ @pinned_tags={{@model}}
@expanded={{this.expanded}} />
<div class="w-100 central-bar">
<Nav::Topbar
--
GitLab