Merge pull request #654 from kvch/toggle-button

new toggle button - closes #284, #625

searx/static/themes/oscar/less/logicodev/onoff.less

@@ -0,0 +1,57 @@
+.onoff-checkbox {
+    width:15%;
+}
+.onoffswitch {
+    position: relative;
+    width: 110px;
+    -webkit-user-select:none;
+    -moz-user-select:none;
+    -ms-user-select: none;
+}
+.onoffswitch-checkbox {
+    display: none;
+}
+.onoffswitch-label {
+    display: block;
+    overflow: hidden;
+    cursor: pointer;
+    border: 2px solid #FFFFFF !important;
+    border-radius: 50px !important;
+}
+.onoffswitch-inner {
+    display: block;
+    transition: margin 0.3s ease-in 0s;
+}
+
+.onoffswitch-inner:before, .onoffswitch-inner:after {
+    display: block;
+    float: left;
+    width: 50%;
+    height: 30px;
+    padding: 0;
+    line-height: 40px;
+    font-size: 20px;
+    box-sizing: border-box;
+    content: "";
+    background-color: #EEEEEE;
+}
+
+.onoffswitch-switch {
+    display: block;
+    width: 37px;
+    background-color: @light-green;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0px;
+    border: 2px solid #FFFFFF !important;
+    border-radius: 50px !important;
+    transition: all 0.3s ease-in 0s;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+    margin-right: 0;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+    right: 71px;
+    background-color: #A1A1A1;
+}

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

@@ -6,6 +6,8 @@
 
 @import "checkbox.less";
 
+@import "onoff.less";
+
 @import "results.less";
 
 @import "infobox.less";

searx/static/themes/oscar/less/pointhi/onoff.less

@@ -0,0 +1,57 @@
+.onoff-checkbox {
+    width:15%;
+}
+.onoffswitch {
+    position: relative;
+    width: 110px;
+    -webkit-user-select:none;
+    -moz-user-select:none;
+    -ms-user-select: none;
+}
+.onoffswitch-checkbox {
+    display: none;
+}
+.onoffswitch-label {
+    display: block;
+    overflow: hidden;
+    cursor: pointer;
+    border: 2px solid #FFFFFF !important;
+    border-radius: 50px !important;
+}
+.onoffswitch-inner {
+    display: block;
+    transition: margin 0.3s ease-in 0s;
+}
+
+.onoffswitch-inner:before, .onoffswitch-inner:after {
+    display: block;
+    float: left;
+    width: 50%;
+    height: 30px;
+    padding: 0;
+    line-height: 40px;
+    font-size: 20px;
+    box-sizing: border-box;
+    content: "";
+    background-color: #EEEEEE;
+}
+
+.onoffswitch-switch {
+    display: block;
+    width: 37px;
+    background-color: #00CC00;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0px;
+    border: 2px solid #FFFFFF !important;
+    border-radius: 50px !important;
+    transition: all 0.3s ease-in 0s;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+    margin-right: 0;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+    right: 71px;
+    background-color: #A1A1A1;
+}

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

@@ -2,6 +2,8 @@
 
 @import "checkbox.less";
 
+@import "onoff.less";
+
 @import "results.less";
 
 @import "infobox.less";

searx/templates/oscar/macros.html

@@ -68,9 +68,11 @@
 {%- endmacro %}
 
 {% macro checkbox_toggle(id, blocked) -%}
-    <div class="checkbox">
+    <div class="onoffswitch">
-        <input class="hidden" type="checkbox" id="{{ id }}" name="{{ id }}"{% if blocked %} checked="checked"{% endif %} />
+        <input type="checkbox" id="{{ id }}" name="{{ id }}"{% if blocked %} checked="checked"{% endif %} class="onoffswitch-checkbox">
-        <label class="btn btn-success label_hide_if_checked" for="{{ id }}">{{ _('Block') }}</label>
+        <label class="onoffswitch-label" for="{{ id }}">
-        <label class="btn btn-danger label_hide_if_not_checked" for="{{ id }}">{{ _('Allow') }}</label>
+            <span class="onoffswitch-inner"></span>
+            <span class="onoffswitch-switch"></span>
+        </label>
     </div>
 {%- endmacro %}

searx/templates/oscar/preferences.html

@@ -164,7 +164,9 @@
                             {% if not search_engine.private %}
                                 <tr>
                                     {% if not rtl %}
-                                    <td>{{ checkbox_toggle('engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_'), (search_engine.name, categ) in disabled_engines) }}</td>
+                                    <td class="onoff-checkbox">
+                                        {{ checkbox_toggle('engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_'), (search_engine.name, categ) in disabled_engines) }}
+                                    </td>
                                     <th>{{ search_engine.name }}</th>
 				    <td>{{ shortcuts[search_engine.name] }}</td>
 				    <td><input type="checkbox" {{ "checked" if search_engine.safesearch==True else ""}} readonly="readonly" disabled="disabled"></td>
@@ -176,7 +178,9 @@
 				    <td><input type="checkbox" {{ "checked" if search_engine.safesearch==True else ""}} readonly="readonly" disabled="disabled"></td>
 				    <td>{{ shortcuts[search_engine.name] }}</td>
                                     <th>{{ search_engine.name }}</th>
-                                    <td>{{ checkbox_toggle('engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_'), (search_engine.name, categ) in disabled_engines) }}</td>
+                                    <td class="onoff-checkbox">
+                                        {{ checkbox_toggle('engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_'), (search_engine.name, categ) in disabled_engines) }}
+                                    </td>
                                     {% endif %}
                                 </tr>
                             {% endif %}
@@ -203,10 +207,12 @@
                             <div class="panel-body">
                                 <div class="col-xs-6 col-sm-4 col-md-6">{{ _(plugin.description) }}</div>
                                 <div class="col-xs-6 col-sm-4 col-md-6">
+                                    <div class="onoff-checkbox">
                                     {{ checkbox_toggle('plugin_' + plugin.id, plugin.id not in allowed_plugins) }}
                                     </div>
                                 </div>
                             </div>
+                        </div>
                         {% endfor %}
                     </div>
                 </fieldset>