From a2430154b9f7e174da27f97a7efcc3edabd5e6c2 Mon Sep 17 00:00:00 2001
From: Marc Abonce Seguin <marc-abonce@mailbox.org>
Date: Thu, 27 Aug 2020 19:55:47 +0000
Subject: [PATCH] fix selects in preferences so they look consistent (#2150)

---
 .../themes/oscar/css/logicodev-dark.css       |   6 +++++-
 .../themes/oscar/css/logicodev-dark.min.css   | Bin 14914 -> 14977 bytes
 searx/static/themes/oscar/css/logicodev.css   |   6 +++++-
 .../static/themes/oscar/css/logicodev.min.css | Bin 11474 -> 11537 bytes
 .../themes/oscar/less/logicodev/search.less   |   6 +++++-
 searx/templates/oscar/languages.html          |   3 ++-
 searx/templates/oscar/macros.html             |   4 ++++
 searx/templates/oscar/preferences.html        |  20 +++++++++---------
 searx/templates/oscar/time-range.html         |   3 ++-
 9 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/searx/static/themes/oscar/css/logicodev-dark.css b/searx/static/themes/oscar/css/logicodev-dark.css
index 99e9c2a22..d3e61eaea 100644
--- a/searx/static/themes/oscar/css/logicodev-dark.css
+++ b/searx/static/themes/oscar/css/logicodev-dark.css
@@ -412,7 +412,8 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
   background-color: #068922;
   color: white;
 }
-.custom-select {
+.custom-select,
+.custom-select-rtl {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -430,6 +431,9 @@ ZQAyMDE2LTA3LTI0VDExOjU1OjU4KzAyOjAwRFqFOQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNi0w
 Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb
 7jwaAAAAAElFTkSuQmCC) 96% no-repeat;
 }
+.custom-select-rtl {
+  background-position-x: 4%;
+}
 .search-margin {
   margin-bottom: 0.6em;
 }
diff --git a/searx/static/themes/oscar/css/logicodev-dark.min.css b/searx/static/themes/oscar/css/logicodev-dark.min.css
index 04c3561b9a0fdc4e1083fe2e2b16bffa051bfc0d..6018b54ea49f536bce951a57e279cd242b1c105c 100644
GIT binary patch
delta 80
zcmX?9(pb8oOhQ;kFS)e1BtKWTI5j6VxkR_9BxiG(#1|$l4B_ge#N_PsqWsdl6y1XS
U;>?oF{5;(XD-+et8Pd1p011pAY5)KL

delta 17
ZcmZoHJyf!xOk#7V#22Q`E2VG90RT*~2qFLg

diff --git a/searx/static/themes/oscar/css/logicodev.css b/searx/static/themes/oscar/css/logicodev.css
index 5d0a223a6..45a2597ae 100644
--- a/searx/static/themes/oscar/css/logicodev.css
+++ b/searx/static/themes/oscar/css/logicodev.css
@@ -385,7 +385,8 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
   background-color: #068922;
   color: white;
 }
-.custom-select {
+.custom-select,
+.custom-select-rtl {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -403,6 +404,9 @@ ZQAyMDE2LTA3LTI0VDExOjU1OjU4KzAyOjAwRFqFOQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNi0w
 Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb
 7jwaAAAAAElFTkSuQmCC) 96% no-repeat;
 }
+.custom-select-rtl {
+  background-position-x: 4%;
+}
 .search-margin {
   margin-bottom: 0.6em;
 }
diff --git a/searx/static/themes/oscar/css/logicodev.min.css b/searx/static/themes/oscar/css/logicodev.min.css
index 8c2bcdc5b40d425b8380ca02e0823cce5450c9d3..dff693bd585e91f4a2128bd30e0fc1e2d1104e40 100644
GIT binary patch
delta 80
zcmcZ<IWcO(V@Y8hz2ws3lKfoV;?$hf<PzPYlAO(tCBHCfVF*_zB_?O57v-1crRWyq
V7iX4a=I7~FSedA9zAE#V9{@XcAhG}e

delta 17
ZcmbOjbt!VgW690mB)>3i7L)zW4**hp2x|ZU

diff --git a/searx/static/themes/oscar/less/logicodev/search.less b/searx/static/themes/oscar/less/logicodev/search.less
index a0cbe4d7d..01422873c 100644
--- a/searx/static/themes/oscar/less/logicodev/search.less
+++ b/searx/static/themes/oscar/less/logicodev/search.less
@@ -56,7 +56,7 @@
      color: white;
  }
 
-.custom-select {
+.custom-select, .custom-select-rtl {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -75,6 +75,10 @@ Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb
 7jwaAAAAAElFTkSuQmCC) 96% no-repeat;
 }
 
+.custom-select-rtl {
+    background-position-x: 4%;
+}
+
 .search-margin {
     margin-bottom: 0.6em;
 }
diff --git a/searx/templates/oscar/languages.html b/searx/templates/oscar/languages.html
index 9c00c9cea..0846caa96 100644
--- a/searx/templates/oscar/languages.html
+++ b/searx/templates/oscar/languages.html
@@ -1,5 +1,6 @@
+{% from 'oscar/macros.html' import custom_select_class %}
 <label class="visually-hidden" for="language">{{ _('Language') }}</label>
-<select class="language custom-select form-control" id="language" name="language" accesskey="l">
+<select class="language form-control {{ custom_select_class(rtl) }}" id="language" name="language" accesskey="l">
   <option value="all" {% if current_language == 'all' %}selected="selected"{% endif %}>{{ _('Default language') }}</option>
 {%- for lang_id,lang_name,country_name,english_name in language_codes | sort(attribute=1) -%}
   <option value="{{ lang_id }}" {% if lang_id == current_language %}selected="selected"{% endif %}>
diff --git a/searx/templates/oscar/macros.html b/searx/templates/oscar/macros.html
index 58f966997..f52d9713c 100644
--- a/searx/templates/oscar/macros.html
+++ b/searx/templates/oscar/macros.html
@@ -84,6 +84,10 @@
     {% endif %}
 {%- endmacro %}
 
+{% macro custom_select_class(rtl) -%}
+custom-select{% if rtl %}-rtl{% endif %}
+{%- endmacro %}
+
 {% macro checkbox_toggle(id, blocked) -%}
     <div class="onoffswitch">
         <input type="checkbox" id="{{ id }}" name="{{ id }}"{% if blocked %} checked="checked"{% endif %} class="onoffswitch-checkbox">
diff --git a/searx/templates/oscar/preferences.html b/searx/templates/oscar/preferences.html
index 89cc74ab7..8f67cbf93 100644
--- a/searx/templates/oscar/preferences.html
+++ b/searx/templates/oscar/preferences.html
@@ -1,4 +1,4 @@
-{% from 'oscar/macros.html' import preferences_item_header, preferences_item_header_rtl, preferences_item_footer, preferences_item_footer_rtl, checkbox_toggle, support_toggle %}
+{% 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" %}
 {% block title %}{{ _('preferences') }} - {% endblock %}
 {% block content %}
@@ -47,7 +47,7 @@
                     {% set locale_label = _('Interface language') %}
                     {% set locale_info = _('Change the language of the layout') %}
                     {{ preferences_item_header(locale_info, locale_label, rtl, 'locale') }}
-                        <select class="form-control" name="locale" id="locale">
+                        <select class="form-control {{ custom_select_class(rtl)}}" name="locale" id="locale">
                             {% for locale_id,locale_name in locales.items() | sort %}
                             <option value="{{ locale_id }}" {% if locale_id == current_locale %}selected="selected"{% endif %}>{{ locale_name }}</option>
                             {% endfor %}
@@ -57,7 +57,7 @@
                     {% set autocomplete_label = _('Autocomplete') %}
                     {% set autocomplete_info = _('Find stuff as you type') %}
                     {{ preferences_item_header(autocomplete_info, autocomplete_label, rtl, 'autocomplete') }}
-                        <select class="form-control" name="autocomplete" id="autocomplete">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="autocomplete" id="autocomplete">
                             <option value=""> - </option>
                             {% for backend in autocomplete_backends %}
                             <option value="{{ backend }}" {% if backend == autocomplete %}selected="selected"{% endif %}>{{ backend }}</option>
@@ -68,7 +68,7 @@
                     {% set image_proxy_label = _('Image proxy') %}
                     {% set image_proxy_info = _('Proxying image results through searx') %}
                     {{ preferences_item_header(image_proxy_info, image_proxy_label, rtl, 'image_proxy') }}
-                        <select class="form-control" name="image_proxy" id="image_proxy">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="image_proxy" id="image_proxy">
                             <option value="1" {% if image_proxy  %}selected="selected"{% endif %}>{{ _('Enabled') }}</option>
                             <option value="" {% if not image_proxy %}selected="selected"{% endif %}>{{ _('Disabled')}}</option>
                         </select>
@@ -77,7 +77,7 @@
                     {% set method_label = _('Method') %}
                     {% set method_info = _('Change how forms are submited, <a href="http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods" rel="external">learn more about request methods</a>') %}
                     {{ preferences_item_header(method_info, method_label, rtl, 'method') }}
-                        <select class="form-control" name="method" id="method">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="method" id="method">
                             <option value="POST" {% if method == 'POST' %}selected="selected"{% endif %}>POST</option>
                             <option value="GET" {% if method == 'GET' %}selected="selected"{% endif %}>GET</option>
                         </select>
@@ -86,7 +86,7 @@
                     {% set safesearch_label = _('SafeSearch') %}
                     {% set safesearch_info = _('Filter content') %}
                     {{ preferences_item_header(safesearch_info, safesearch_label, rtl, 'safesearch') }}
-                        <select class="form-control" name="safesearch" id="safesearch">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="safesearch" id="safesearch">
                             <option value="2" {% if safesearch == '2' %}selected="selected"{% endif %}>{{ _('Strict') }}</option>
                             <option value="1" {% if safesearch == '1' %}selected="selected"{% endif %}>{{ _('Moderate') }}</option>
                             <option value="0" {% if safesearch == '0' %}selected="selected"{% endif %}>{{ _('None') }}</option>
@@ -96,7 +96,7 @@
                     {% set theme_label = _('Themes') %}
                     {% set theme_info = _('Change searx layout') %}
                     {{ preferences_item_header(theme_info, theme_label, rtl, 'theme') }}
-                        <select class="form-control" name="theme" id="theme">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="theme" id="theme">
                             {% for name in themes %}
                             <option value="{{ name }}" {% if name == theme %}selected="selected"{% endif %}>{{ name }}</option>
                             {% endfor %}
@@ -104,7 +104,7 @@
                     {{ preferences_item_footer(theme_info, theme_label, rtl) }}
 
                     {{ preferences_item_header(_('Choose style for this theme'), _('Style'), rtl, 'oscar_style') }}
-                        <select class="form-control" name="oscar-style" id="oscar_style">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="oscar-style" id="oscar_style">
                             <option value="logicodev" >Logicodev</option>
                             <option value="pointhi" {% if preferences.get_value('oscar-style') == 'pointhi' %}selected="selected"{% endif %}>Pointhi</option>
                             <option value="logicodev-dark" {% if preferences.get_value('oscar-style') == 'logicodev-dark' %}selected="selected"{% endif %}>Logicodev dark</option>
@@ -114,7 +114,7 @@
                     {% set label = _('Results on new tabs') %}
                     {% set info = _('Open result links on new browser tabs') %}
                     {{ preferences_item_header(info, label, rtl, 'results_on_new_tab') }}
-                        <select class="form-control" name="results_on_new_tab" id="results_on_new_tab">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="results_on_new_tab" id="results_on_new_tab">
                             <option value="1" {% if results_on_new_tab %}selected="selected"{% endif %}>{{ _('On') }}</option>
                             <option value="0" {% if not results_on_new_tab %}selected="selected"{% endif %}>{{ _('Off')}}</option>
                         </select>
@@ -123,7 +123,7 @@
                     {% set label = _('Open Access DOI resolver') %}
                     {% set info = _('Redirect to open-access versions of publications when available (plugin required)') %}
                     {{ preferences_item_header(info, label, rtl, 'doi_resolver') }}
-                        <select class="form-control" name="doi_resolver" id="doi_resolver">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="doi_resolver" id="doi_resolver">
                             {% for doi_resolver_name,doi_resolver_url in doi_resolvers.items() %}
                             <option value="{{ doi_resolver_name }}" {% if doi_resolver_name == current_doi_resolver %}selected="selected"{% endif %}>
                                     {{ doi_resolver_name }} - {{ doi_resolver_url }}
diff --git a/searx/templates/oscar/time-range.html b/searx/templates/oscar/time-range.html
index 181b57681..6087dd417 100644
--- a/searx/templates/oscar/time-range.html
+++ b/searx/templates/oscar/time-range.html
@@ -1,5 +1,6 @@
+{% from 'oscar/macros.html' import custom_select_class %}
 <label class="visually-hidden" for="time-range">{{ _('Time range') }}</label>
-<select name="time_range" id="time-range" class="custom-select form-control" accesskey="t">{{- "" -}}
+<select name="time_range" id="time-range" class="{{ custom_select_class(rtl) }} form-control" accesskey="t">{{- "" -}}
     <option id="time-range-anytime" value="" {{ "selected" if time_range=="" or not time_range  else ""}}>
         {{- _('Anytime') -}}
     </option>{{- "" -}}