From 230602cb6641ca1608b4779ac4b28a96670d0f22 Mon Sep 17 00:00:00 2001
From: Albert Graef <aggraef@gmail.com>
Date: Thu, 17 Sep 2020 08:24:08 +0200
Subject: [PATCH] Add a clickable bookmark indicator.
This takes the form of a little bookmark icon to the right of the file
browser icon. Just the plain icon indicates that the current directory
hasn't been bookmarked yet, and that clicking on it will bookmark it.
If you do this, a little red cross appears on the icon, which reminds
you that the directory has been bookmarked, and that clicking on the
icon will remove the bookmark again.
Note that in general a directory may have been bookmarked multiple
times, by using the keyboard shortcut (Ctrl-D). In this case the red
cross will stick until the last instance of the bookmark has been
removed.
The icons come from the Manjaro KDE Breath theme (a variation of the
KDE Breeze theme), and we also replaced the folder icon with a matching
icon from the same theme. Thanks are due to the Manjaro and KDE teams!
While we were at it, we also fixed the vertical alignment of the icons
with respect to the search field, they are properly aligned to the
middle now.
---
pd/nw/bookmark.svg | 13 +++++++
pd/nw/bookmark2.svg | 22 +++++++++++
pd/nw/dialog_search.html | 64 +++++++++++++++++++++++++++++--
pd/nw/folder.svg | 14 ++++++-
pd/nw/locales/de/translation.json | 1 +
pd/nw/locales/en/translation.json | 1 +
pd/nw/locales/fr/translation.json | 1 +
7 files changed, 112 insertions(+), 4 deletions(-)
create mode 100644 pd/nw/bookmark.svg
create mode 100644 pd/nw/bookmark2.svg
diff --git a/pd/nw/bookmark.svg b/pd/nw/bookmark.svg
new file mode 100644
index 000000000..ddc28c52f
--- /dev/null
+++ b/pd/nw/bookmark.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 16 16">
+ <defs id="defs3051">
+ <style type="text/css" id="current-color-scheme">
+ .ColorScheme-Text {
+ color:#4d4d4d;
+ }
+ </style>
+ </defs>
+ <path style="fill:currentColor;fill-opacity:1;stroke:none"
+ d="m4 2v12l4-1.594 4 1.594v-12h-7zm1 1h6v9.594l-3-1.188-3 1.188v-2.594z"
+ class="ColorScheme-Text"
+ />
+</svg>
diff --git a/pd/nw/bookmark2.svg b/pd/nw/bookmark2.svg
new file mode 100644
index 000000000..4bfd3faca
--- /dev/null
+++ b/pd/nw/bookmark2.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 16 16">
+ <defs id="defs3051">
+ <style type="text/css" id="current-color-scheme">
+ .ColorScheme-Text {
+ color:#4d4d4d;
+ }
+ .ColorScheme-NegativeText {
+ color:#da4453;
+ }
+ </style>
+ </defs>
+ <g transform="translate(-421.71-531.79)">
+ <path
+ style="fill:currentColor;fill-opacity:1;stroke:none"
+ d="m425.71 533.79v12l4-1.594v-1l-3 1.188v-9.594h6v5h1v-6h-7z"
+ class="ColorScheme-Text"/>
+<path style="fill:currentColor;fill-opacity:1;stroke:none"
+ class="ColorScheme-NegativeText"
+ d="m431.42 540.82l-.707.707 1.793 1.793-1.793 1.793.707.707 1.793-1.793 1.793 1.793.707-.707-1.793-1.793 1.793-1.793-.707-.707-1.793 1.793z"
+ />
+</g>
+</svg>
diff --git a/pd/nw/dialog_search.html b/pd/nw/dialog_search.html
index 5861f992b..27e096430 100644
--- a/pd/nw/dialog_search.html
+++ b/pd/nw/dialog_search.html
@@ -283,6 +283,29 @@ function toc_delete_bookmark(id, title)
toc_save();
}
+function toc_is_bookmarked(id)
+{
+ var i = toc_bookmarks();
+ if (i >= 0) {
+ var l = toc.length;
+ while (i < l && toc[i].id !== id) {
+ i++;
+ }
+ return i<l;
+ } else {
+ // no bookmarks
+ return false;
+ }
+}
+
+function toc_bookmark_update(dir)
+{
+ var bookmark = document.getElementById("bookmark_indicator");
+ var rel = path.relative(pdgui.get_lib_dir(), dir);
+ var id = dir.length <= rel.length ? dir : rel;
+ bookmark.src = toc_is_bookmarked(id) ? "bookmark2.svg" : "bookmark.svg";
+}
+
// Stop-gap translator
function translate_form() {
var elements = document.querySelectorAll("[data-i18n]"),
@@ -329,6 +352,7 @@ function display_toc() {
text_node;
// reset current_dir to doc
current_dir = path.join(pdgui.get_lib_dir(), "doc");
+ toc_bookmark_update(current_dir);
toc.forEach(function(doc, i, a) {
div = document.createElement("div");
if (doc.id) {
@@ -397,6 +421,7 @@ function display_directory(dir) {
current_dir = dir;
clear_results();
fs.readdir(dir, display_directory_callback);
+ toc_bookmark_update(dir);
}
function file_browser_click() {
@@ -407,6 +432,10 @@ function file_browser_click() {
document.getElementById("file_browser").click();
}
+function bookmark_indicator_click() {
+ toggle_bookmark(current_dir);
+}
+
function file_browser_callback(elem) {
var doc = elem.value;
if (doc !== "") {
@@ -621,6 +650,20 @@ function do_bookmark(dirname, del)
toc_delete_bookmark(id, name);
else
toc_add_bookmark(id, name, meta_descr);
+ if (current_dir === path.join(pdgui.get_lib_dir(), "doc"))
+ // need to redisplay the toc which is currently shown
+ display_toc();
+ else
+ toc_bookmark_update(dirname);
+}
+
+// Toggle bookmark for the given directory. This is invoked by clicking on
+// the bookmark indicator to the right of the search field.
+function toggle_bookmark(dir)
+{
+ var rel = path.relative(pdgui.get_lib_dir(), dir);
+ var id = dir.length <= rel.length ? dir : rel;
+ do_bookmark(dir, toc_is_bookmarked(id));
}
function add_events() {
@@ -661,13 +704,22 @@ function add_events() {
}
});
+ document.getElementById("bookmark_indicator").addEventListener("click",
+ function(evt) {
+ if (evt.currentTarget === document.activeElement) {
+ bookmark_indicator_click();
+ }
+ });
+
// Keydown in the document
document.body.addEventListener("keydown", function(evt) {
var input_elem = document.getElementById("search_text"),
- button_elem = document.getElementById("file_browser_button");
+ button_elem = document.getElementById("file_browser_button"),
+ button_elem2 = document.getElementById("bookmark_indicator");
if (find_bar_shortcut(evt)) {
toggle_find_bar();
- } else if (evt.target === button_elem &&
+ } else if ((evt.target === button_elem ||
+ evt.target === button_elem2) &&
evt.keyCode === 10 || evt.keyCode === 13) {
} else if (evt.target !== input_elem) {
input_elem.focus();
@@ -712,6 +764,7 @@ function register_window_id(id, attrs) {
function display_no_results() {
document.getElementById("results").textContent = l("search.no_results");
+ toc_bookmark_update(current_dir);
}
function display_doc(doc) {
@@ -734,6 +787,7 @@ function display_doc(doc) {
div.appendChild(text_node);
}
results_elem.appendChild(div);
+ toc_bookmark_update(current_dir);
}
function doc_search() {
@@ -790,10 +844,14 @@ function doc_search() {
name="search_text"
id="search_text"
data-i18n="[title]search.search">
- <input type="image"
+ <input type="image" style="vertical-align:middle;"
src="folder.svg"
id="file_browser_button"
data-i18n="[title]search.browse">
+ <input type="image" style="vertical-align:middle;"
+ src="bookmark.svg"
+ id="bookmark_indicator"
+ data-i18n="[title]search.bookmark">
</form>
<div id="results">
</div>
diff --git a/pd/nw/folder.svg b/pd/nw/folder.svg
index 6d9ea6e9f..337ef4b71 100644
--- a/pd/nw/folder.svg
+++ b/pd/nw/folder.svg
@@ -1 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 32 32"><defs><clipPath><path d="m69.63 12.145h-.052c-22.727-.292-46.47 4.077-46.709 4.122-2.424.451-4.946 2.974-5.397 5.397-.044.237-4.414 23.983-4.122 46.71-.292 22.777 4.078 46.523 4.122 46.761.451 2.423 2.974 4.945 5.398 5.398.237.044 23.982 4.413 46.709 4.121 22.779.292 46.524-4.077 46.761-4.121 2.423-.452 4.946-2.976 5.398-5.399.044-.236 4.413-23.981 4.121-46.709.292-22.777-4.077-46.523-4.121-46.761-.453-2.423-2.976-4.946-5.398-5.397-.238-.045-23.984-4.414-46.71-4.122"/></clipPath><linearGradient gradientUnits="userSpaceOnUse" y2="352.98" x2="-601.15" y1="663.95" x1="-591.02" id="2"><stop stop-color="#a0a0a0"/><stop offset="1" stop-color="#aaa"/></linearGradient><linearGradient gradientUnits="userSpaceOnUse" y2="354.29" x2="-704.05" y1="647.77" x1="-701.19" id="1"><stop stop-color="#acabab"/><stop offset="1" stop-color="#d4d4d4"/></linearGradient><linearGradient id="0" x1="59.12" y1="-19.888" x2="59.15" y2="-37.783" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.17478 0 0 4.16765-1069.7 447.73)"><stop stop-color="#a0a0a0"/><stop offset="1" stop-color="#bdbdbd"/></linearGradient></defs><g transform="matrix(.07089 0 0 .07017 23.295-40.67)" fill="#60aae5"><path transform="matrix(.7872 0 0 .79524 415.34 430.11)" d="m-884.1 294.78c-4.626 0-8.349 3.718-8.349 8.335v161.41l468.19 1v-121.2c0-4.618-3.724-8.335-8.35-8.335h-272.65c-8.51.751-9.607-.377-13.812-5.981-5.964-7.968-14.969-21.443-20.84-29.21-4.712-6.805-5.477-6.02-13.292-6.02z" fill="url(#0)" color="#000"/><rect transform="matrix(.7872 0 0 .79524 415.34 430.11)" y="356.85" x="-890.28" height="295.13" width="463.85" fill="url(#1)" stroke="url(#1)" stroke-width="2.378" rx="9.63"/><rect width="463.85" height="295.13" x="-890.28" y="356.85" transform="matrix(.7872 0 0 .79524 415.34 430.11)" fill="none" stroke="url(#2)" stroke-linejoin="round" stroke-linecap="round" stroke-width="5.376" rx="9.63"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 16 16">
+ <defs id="defs3051">
+ <style type="text/css" id="current-color-scheme">
+ .ColorScheme-Text {
+ color:#4d4d4d;
+ }
+ </style>
+ </defs>
+ <path style="fill:currentColor;fill-opacity:1;stroke:none"
+ d="M 2 2 L 2 3 L 2 6 L 2 7 L 2 13 L 2 14 L 14 14 L 14 13 L 14 6 L 14 5 L 14 4 L 9.0078125 4 L 7.0078125 2 L 7 2.0078125 L 7 2 L 3 2 L 2 2 z M 3 3 L 6.5917969 3 L 7.59375 4 L 7 4 L 7 4.0078125 L 6.9921875 4 L 4.9921875 6 L 3 6 L 3 3 z M 3 7 L 13 7 L 13 13 L 3 13 L 3 7 z "
+ class="ColorScheme-Text"
+ />
+</svg>
diff --git a/pd/nw/locales/de/translation.json b/pd/nw/locales/de/translation.json
index 798fc5cb9..6a43d138c 100644
--- a/pd/nw/locales/de/translation.json
+++ b/pd/nw/locales/de/translation.json
@@ -499,6 +499,7 @@
},
"search": {
"browse": "Durchsuche die Dokumentation",
+ "bookmark": "Lesezeichen hinzufügen oder entfernen",
"search": "Suche",
"building_index": "Erstelle Index...",
"no_results": "Keine Resultate gefunden.",
diff --git a/pd/nw/locales/en/translation.json b/pd/nw/locales/en/translation.json
index 2a24c5494..b54d90c99 100644
--- a/pd/nw/locales/en/translation.json
+++ b/pd/nw/locales/en/translation.json
@@ -499,6 +499,7 @@
},
"search": {
"browse": "browse the documentation",
+ "bookmark": "add or remove a bookmark",
"search": "search",
"building_index": "Building index...",
"no_results": "No results found.",
diff --git a/pd/nw/locales/fr/translation.json b/pd/nw/locales/fr/translation.json
index 6e476f33b..59099097f 100644
--- a/pd/nw/locales/fr/translation.json
+++ b/pd/nw/locales/fr/translation.json
@@ -499,6 +499,7 @@
},
"search": {
"browse": "Parcourir la documentation",
+ "bookmark": "Ajouter ou enlever un favori",
"search": "Chercher",
"building_index": "Construction de l'index...",
"no_results": "Aucun résultat trouvé !",
--
GitLab