forked from zaclys/searxng
Merge pull request #654 from kvch/toggle-button
new toggle button - closes #284, #625
This commit is contained in:
commit
49403dbbda
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||
}
|
|
@ -6,6 +6,8 @@
|
|||
|
||||
@import "checkbox.less";
|
||||
|
||||
@import "onoff.less";
|
||||
|
||||
@import "results.less";
|
||||
|
||||
@import "infobox.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;
|
||||
}
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
@import "checkbox.less";
|
||||
|
||||
@import "onoff.less";
|
||||
|
||||
@import "results.less";
|
||||
|
||||
@import "infobox.less";
|
||||
|
|
|
@ -68,9 +68,11 @@
|
|||
{%- endmacro %}
|
||||
|
||||
{% macro checkbox_toggle(id, blocked) -%}
|
||||
<div class="checkbox">
|
||||
<input class="hidden" type="checkbox" id="{{ id }}" name="{{ id }}"{% if blocked %} checked="checked"{% endif %} />
|
||||
<label class="btn btn-success label_hide_if_checked" for="{{ id }}">{{ _('Block') }}</label>
|
||||
<label class="btn btn-danger label_hide_if_not_checked" for="{{ id }}">{{ _('Allow') }}</label>
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" id="{{ id }}" name="{{ id }}"{% if blocked %} checked="checked"{% endif %} class="onoffswitch-checkbox">
|
||||
<label class="onoffswitch-label" for="{{ id }}">
|
||||
<span class="onoffswitch-inner"></span>
|
||||
<span class="onoffswitch-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
|
|
@ -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,7 +207,9 @@
|
|||
<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>
|
||||
|
|
Loading…
Reference in New Issue