Merge pull request #2661 from dalf/pref-engine-tooltip

[mod] preferences: a tooltip is shown when the mouse is over the engine names

searx/static/themes/oscar/css/logicodev-dark.css

@@ -888,3 +888,18 @@ p {
 input.cursor-text {
   margin: 10px 0;
 }
+.engine-tooltip {
+  display: none;
+  position: absolute;
+  padding: 0.5rem 1rem;
+  margin: 0rem 0 0 2rem;
+  border: 1px solid #ddd;
+  background: white;
+  font-size: 14px;
+  font-weight: normal;
+  z-index: 1000000;
+}
+th:hover .engine-tooltip,
+.engine-tooltip:hover {
+  display: inline-block;
+}

searx/static/themes/oscar/css/logicodev.css

@@ -861,6 +861,21 @@ p {
 input.cursor-text {
   margin: 10px 0;
 }
+.engine-tooltip {
+  display: none;
+  position: absolute;
+  padding: 0.5rem 1rem;
+  margin: 0rem 0 0 2rem;
+  border: 1px solid #ddd;
+  background: white;
+  font-size: 14px;
+  font-weight: normal;
+  z-index: 1000000;
+}
+th:hover .engine-tooltip,
+.engine-tooltip:hover {
+  display: inline-block;
+}
 /*Global*/
 body {
   background: #1d1f21 none !important;
@@ -1084,3 +1099,8 @@ p.btn.btn-default {
 .highlight {
   background-color: transparent !important;
 }
+/* engine tooltip */
+.engine-tooltip {
+  border: 1px solid #3d3f43;
+  background: #1d1f21;
+}

searx/static/themes/oscar/css/pointhi.css

@@ -676,3 +676,18 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
 .table > tbody > tr > th {
   vertical-align: middle !important;
 }
+.engine-tooltip {
+  display: none;
+  position: absolute;
+  padding: 0.5rem 1rem;
+  margin: 0rem 0 0 2rem;
+  border: 1px solid #ddd;
+  background: white;
+  font-size: 14px;
+  font-weight: normal;
+  z-index: 1000000;
+}
+th:hover .engine-tooltip,
+.engine-tooltip:hover {
+  display: inline-block;
+}

searx/static/themes/oscar/src/less/logicodev-dark/oscar.less

@@ -239,3 +239,9 @@ p.btn.btn-default{
 .highlight {
   background-color: transparent !important;
 }
+
+/* engine tooltip */
+.engine-tooltip {
+  border: 1px solid #3d3f43;
+  background: #1d1f21 ;
+}

searx/static/themes/oscar/src/less/logicodev/preferences.less

@@ -13,3 +13,19 @@ p {
 input.cursor-text {
     margin: 10px 0;
 }
+
+.engine-tooltip {
+    display: none;
+    position: absolute;
+    padding: 0.5rem 1rem;
+    margin: 0rem 0 0 2rem;
+    border: 1px solid #ddd;
+    background: white;
+    font-size: 14px;
+    font-weight: normal;
+    z-index: 1000000; 
+}
+
+th:hover .engine-tooltip, .engine-tooltip:hover {
+    display: inline-block;
+}

searx/static/themes/oscar/src/less/pointhi/preferences.less

@@ -1,3 +1,19 @@
 .table > tbody > tr > td, .table > tbody > tr > th {
     vertical-align: middle !important;
 }
+
+.engine-tooltip {
+    display: none;
+    position: absolute;
+    padding: 0.5rem 1rem;
+    margin: 0rem 0 0 2rem;
+    border: 1px solid #ddd;
+    background: white;
+    font-size: 14px;
+    font-weight: normal;
+    z-index: 1000000; 
+}
+
+th:hover .engine-tooltip, .engine-tooltip:hover {
+    display: inline-block;
+}

searx/static/themes/simple/css/searx-rtl.css

@@ -1425,6 +1425,21 @@ select:focus {
 #main_preferences div.selectable_url pre {
   width: 100%;
 }
+#main_preferences .engine-tooltip {
+  display: none;
+  position: absolute;
+  padding: 0.5rem 1rem;
+  margin: 0rem 0 0 2rem;
+  border: 1px solid #ddd;
+  background: white;
+  font-size: 14px;
+  font-weight: normal;
+  z-index: 1000000;
+}
+#main_preferences th:hover .engine-tooltip,
+#main_preferences .engine-tooltip:hover {
+  display: inline-block;
+}
 @media screen and (max-width: 75em) {
   .preferences_back {
     clear: both;

searx/static/themes/simple/css/searx.css

@@ -1425,6 +1425,21 @@ select:focus {
 #main_preferences div.selectable_url pre {
   width: 100%;
 }
+#main_preferences .engine-tooltip {
+  display: none;
+  position: absolute;
+  padding: 0.5rem 1rem;
+  margin: 0rem 0 0 2rem;
+  border: 1px solid #ddd;
+  background: white;
+  font-size: 14px;
+  font-weight: normal;
+  z-index: 1000000;
+}
+#main_preferences th:hover .engine-tooltip,
+#main_preferences .engine-tooltip:hover {
+  display: inline-block;
+}
 @media screen and (max-width: 75em) {
   .preferences_back {
     clear: both;

searx/static/themes/simple/less/preferences.less

@@ -93,6 +93,23 @@
       width: 100%;
     }
   }
+
+
+  .engine-tooltip {
+    display: none;
+    position: absolute;
+    padding: 0.5rem 1rem;
+    margin: 0rem 0 0 2rem;
+    border: 1px solid #ddd;
+    background: white;
+    font-size: 14px;
+    font-weight: normal;
+    z-index: 1000000; 
+  }
+
+  th:hover .engine-tooltip, .engine-tooltip:hover {
+    display: inline-block;
+  }
   
 }
 

searx/templates/oscar/preferences.html

@@ -1,5 +1,15 @@
 {% from 'oscar/macros.html' import preferences_item_header, preferences_item_header_rtl, preferences_item_footer, preferences_item_footer_rtl, checkbox_toggle, support_toggle, custom_select_class %}
 {% extends "oscar/base.html" %}
+{% macro engine_about(search_engine, id) -%}
+{% if search_engine.about is defined %}
+{% set about = search_engine.about %}
+<div class="engine-tooltip" role="tooltip" id="{{ id }}">{{- "" -}}
+    <h5><a href="{{about.website}}" rel="noreferrer">{{about.website}}</a></h5>
+    {%- if about.wikidata_id -%}<p><a href="https://www.wikidata.org/wiki/{{about.wikidata_id}}" rel="noreferrer">wikidata.org/wiki/{{about.wikidata_id}}</a></p>{%- endif -%}
+    {%- if search_engine.enable_http %}<p>{{ icon('exclamation-sign', 'No HTTPS') }}{{ _('No HTTPS')}}</p>{% endif -%}
+</div>
+{%- endif -%}
+{%- endmacro %}
 {% block title %}{{ _('preferences') }} - {% endblock %}
 {% block content %}
 
@@ -227,11 +237,15 @@
                             {% if not search_engine.private %}
                                 <tr>
                                     {% if not rtl %}
-                                    <td class="onoff-checkbox">
-                                        {{ checkbox_toggle('engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_'), (search_engine.name, categ) in disabled_engines) }}
-                                    </td>
-                                    <th scope="row">{% if search_engine.enable_http %}{{ icon('exclamation-sign', 'No HTTPS') }}{% endif %} {{ search_engine.name }}</td></th>
-                                    <td class="name">{{ shortcuts[search_engine.name] }}
+                                        <td class="onoff-checkbox">
+                                        {{- checkbox_toggle('engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_'), (search_engine.name, categ) in disabled_engines) -}}
+                                        </td>
+                                        <th scope="row"><span aria-labelledby="{{ 'tooltip_' + categ + '_' + search_engine.name }}">
+                                            {%- if search_engine.enable_http %}{{ icon('exclamation-sign', 'No HTTPS') }}{% endif -%}
+                                            {{- search_engine.name -}}</span>
+                                            {{- engine_about(search_engine, 'tooltip_' + categ + '_' + search_engine.name) -}}
+                                        </th>
+                                        <td class="name">{{ shortcuts[search_engine.name] }}</td>
                                         <td>{{ support_toggle(stats[search_engine.name].supports_selected_language) }}</td>
                                         <td>{{ support_toggle(search_engine.safesearch==True) }}</td>
                                         <td>{{ support_toggle(search_engine.time_range_support==True) }}</td>
@@ -244,10 +258,10 @@
                                         <td>{{ support_toggle(search_engine.safesearch==True) }}</td>
                                         <td>{{ support_toggle(stats[search_engine.name].supports_selected_language) }}</td>
                                         <td>{{ shortcuts[search_engine.name] }}</td>
-                                    <th scope="row">{{ search_engine.name }}</th>
-                                    <td class="onoff-checkbox">
+                                        <th scope="row"><span>{% if search_engine.enable_http %}{{ icon('exclamation-sign', 'No HTTPS') }}{% endif %}{{ search_engine.name }}</span>{{ engine_about(search_engine) }}</th>
+                                        <td class="onoff-checkbox">
                                         {{ checkbox_toggle('engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_'), (search_engine.name, categ) in disabled_engines) }}
-                                    </td>
+                                        </td>
                                     {% endif %}
                                 </tr>
                             {% endif %}

searx/templates/simple/preferences.html

@@ -18,6 +18,17 @@
 {%- endfor -%}
 {%- endmacro -%}
 
+{% macro engine_about(search_engine) -%}
+{% if search_engine.about is defined %}
+{% set about = search_engine.about %}
+<div class="engine-tooltip" role="tooltip">{{- "" -}}
+    <p><a href="{{about.website}}" rel="noreferrer">{{about.website}}</a></p>
+    {%- if about.wikidata_id -%}<p><a href="https://www.wikidata.org/wiki/{{about.wikidata_id}}" rel="noreferrer">wikidata.org/wiki/{{about.wikidata_id}}</a></p>{%- endif -%}
+    {%- if search_engine.enable_http %}<p>{{ icon('exclamation-sign', 'No HTTPS') }}{{ _('No HTTPS')}}</p>{% endif -%}
+</div>
+{%- endif -%}
+{%- endmacro %}
+
 {% block head %} {% endblock %}
 {% block content %}
 
@@ -121,7 +132,7 @@
       {% set engine_id = 'engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_') %}
       <tr>
         <td class="engine_checkbox">{{ checkbox_onoff(engine_id, (search_engine.name, categ) in disabled_engines) }}</td>
-        <th class="name">{% if search_engine.enable_http %}{{ icon('warning', 'No HTTPS') }}{% endif %} {{ search_engine.name }}</th>
+        <th class="name">{% if search_engine.enable_http %}{{ icon('warning', 'No HTTPS') }}{% endif %} {{ search_engine.name }} {{ engine_about(search_engine) }}</th>
         <td class="shortcut">{{ shortcuts[search_engine.name] }}</td>
         <td>{{ checkbox(engine_id + '_supported_languages', current_language == 'all' or current_language in search_engine.supported_languages or current_language.split('-')[0] in search_engine.supported_languages, true, true) }}</td>
         <td>{{ checkbox(engine_id + '_safesearch', search_engine.safesearch==True, true, true) }}</td>

searx/webapp.py

@@ -853,7 +853,6 @@ def preferences():
             if e.timeout > settings['outgoing']['request_timeout']:
                 stats[e.name]['warn_timeout'] = True
             stats[e.name]['supports_selected_language'] = _is_selected_language_supported(e, request.preferences)
-
             engines_by_category[c].append(e)
 
     # get first element [0], the engine time,