From 3ab74db8d846b822356b3511044657182b6dd140 Mon Sep 17 00:00:00 2001
From: Bryan Brancotte <bryan.brancotte@pasteur.fr>
Date: Thu, 6 May 2021 08:50:28 +0200
Subject: [PATCH] configurable tooltip in tree controls, WIP #167

---
 css/index.css | 14 ++++++++++++++
 index.html    | 22 ++++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/css/index.css b/css/index.css
index 59b364ed..388c12eb 100644
--- a/css/index.css
+++ b/css/index.css
@@ -171,6 +171,20 @@ a:before {
 .tree-controls .tree-control-element a:hover {
     color: #5c9ad1;
 }
+.tree-control-element input[type="checkbox"]{
+    display:none;
+}
+.tree-control-element input[type="checkbox"]:checked+span:before{
+    content: "\f205";
+}
+.tree-control-element input[type="checkbox"]+span:before{
+    content: "\f204";
+    font-family: 'Font Awesome 5 Free';
+}
+.tree-control-element label{
+    cursor: pointer;
+    margin-bottom:0;
+}
 body {
   overflow-x: hidden;
 }
diff --git a/index.html b/index.html
index 567cdd63..3ce391dc 100644
--- a/index.html
+++ b/index.html
@@ -182,6 +182,28 @@ <h1 id="pageTitle">EDAM ontology</h1>
                     onclick="toggleFullscreen();" ><i class="fas fa-compress" aria-hidden="true"></i><span class="on-controls-hover" >Exit Full Screen</span>
                     </button>
                     </div>
+                    <div class="tree-controls-group">
+                        <div>
+                            <div class="tree-control-element text-left">
+                                <i class="fas fa-cogs"></i><span class="on-controls-hover p-0"><b> Settings</b><br/></span>
+                                <label class="on-controls-hover p-0">
+                                    <input type="checkbox" name="show-tooltip-only-full-screen" checked="checked"/>
+                                    <span></span>
+                                    <span title="Always show tooltips otherwise">Show tooltips only in full screen</span><br/>
+                                </label>
+                                <label class="on-controls-hover p-0">
+                                    <input type="checkbox" name="show-detail" checked="checked"/>
+                                    <span></span>
+                                    Show details in tooltip<br/>
+                                </label>
+                                <label class="on-controls-hover p-0">
+                                    <input type="checkbox" name="show-community-usage"/>
+                                    <span></span>
+                                    Show community usage in tooltip<br/>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
                 </div>
                 <div class="tree-controls tree-controls-right-bottom">
                     <div class="tree-control-element meta-info">