Commit 230602cb authored by Albert Gräf's avatar Albert Gräf
Browse files

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.
parent c049be4f
<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>
<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>
......@@ -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>
......
<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>
......@@ -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.",
......
......@@ -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.",
......
......@@ -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é !",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment