Skip to content
Snippets Groups Projects
Commit e134e9d1 authored by Aria Givi's avatar Aria Givi
Browse files

Merge branch 'Searchbar-Button-Redesign' into 'MetaGer-Redesign' 

Searchbar button redesign

See merge request !1105
parents 4dbafc7b 2c472b63
No related branches found
No related tags found
1 merge request!1365Resolve "Filter Options for MetaGer"
Hide whitespace changes
Inline Side-by-side
public/js/searchbar.js
+ 25
− 0
View file @ e134e9d1
...@@ -22,6 +22,7 @@ function setSearchbarActionListeners () { ...@@ -22,6 +22,7 @@ function setSearchbarActionListeners () {
$('.focusCheckbox').click(checkboxCheckListener); $('.focusCheckbox').click(checkboxCheckListener);
$('#addFocusBtn').click(() => showFocusCreateDialog('')); $('#addFocusBtn').click(() => showFocusCreateDialog(''));
$('#editFocusBtn').click(editCurrentFocus); $('#editFocusBtn').click(editCurrentFocus);
$('#toggleOptBtn').click(toggleOptionsDialog);
$('.save-focus-btn').click(saveFocus); $('.save-focus-btn').click(saveFocus);
$('.delete-focus-btn').click(deleteFocus); $('.delete-focus-btn').click(deleteFocus);
$('#focus-select').change(focusChanged); $('#focus-select').change(focusChanged);
...@@ -377,6 +378,30 @@ function getFocusInUrl () { ...@@ -377,6 +378,30 @@ function getFocusInUrl () {
} }
} }
function toggleOptionsDialog() {
var btnMode = $('#toggleOptBtn').attr('data-mode');
if (btnMode == 'o') {
openOptionsDialog();
} else {
closeOptionsDialog();
}
}
function openOptionsDialog() {
$('#toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
$('#toggleOptBtn').attr('data-mode', 'c');
$('.search-option-frame').css('display', 'flex');
}
function closeOptionsDialog() {
$('#toggleOptBtn').html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
$('#toggleOptBtn').attr('data-mode', 'o');
$('.search-option-frame').css('display', 'none');
}
function checkboxCheckListener (event) { function checkboxCheckListener (event) {
toggleDeleteButton(); toggleDeleteButton();
var elem = event.target; var elem = event.target;
......
resources/assets/js/searchbar.js
+ 25
− 0
View file @ e134e9d1
...@@ -22,6 +22,7 @@ function setSearchbarActionListeners () { ...@@ -22,6 +22,7 @@ function setSearchbarActionListeners () {
$('.focusCheckbox').click(checkboxCheckListener); $('.focusCheckbox').click(checkboxCheckListener);
$('#addFocusBtn').click(() => showFocusCreateDialog('')); $('#addFocusBtn').click(() => showFocusCreateDialog(''));
$('#editFocusBtn').click(editCurrentFocus); $('#editFocusBtn').click(editCurrentFocus);
$('#toggleOptBtn').click(toggleOptionsDialog);
$('.save-focus-btn').click(saveFocus); $('.save-focus-btn').click(saveFocus);
$('.delete-focus-btn').click(deleteFocus); $('.delete-focus-btn').click(deleteFocus);
$('#focus-select').change(focusChanged); $('#focus-select').change(focusChanged);
...@@ -377,6 +378,30 @@ function getFocusInUrl () { ...@@ -377,6 +378,30 @@ function getFocusInUrl () {
} }
} }
function toggleOptionsDialog() {
var btnMode = $('#toggleOptBtn').attr('data-mode');
if (btnMode == 'o') {
openOptionsDialog();
} else {
closeOptionsDialog();
}
}
function openOptionsDialog() {
$('#toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
$('#toggleOptBtn').attr('data-mode', 'c');
$('.search-option-frame').css('display', 'flex');
}
function closeOptionsDialog() {
$('#toggleOptBtn').html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
$('#toggleOptBtn').attr('data-mode', 'o');
$('.search-option-frame').css('display', 'none');
}
function checkboxCheckListener (event) { function checkboxCheckListener (event) {
toggleDeleteButton(); toggleDeleteButton();
var elem = event.target; var elem = event.target;
......
resources/assets/less/metager/searchbar.less
+ 71
− 14
View file @ e134e9d1
...@@ -9,10 +9,17 @@ ...@@ -9,10 +9,17 @@
color: #333; color: #333;
.search-focus-selector { .search-focus-selector {
border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px;
background-color: white;
position: relative;
text-overflow: ellipsis;
display: flex; display: flex;
align-items: center;
position: relative;
&>button {
border: none;
border-right: 1px solid rgb(170, 170, 170);
background-color: white;
margin: 5px;
}
select { select {
width: 100%; width: 100%;
-webkit-appearance: none; -webkit-appearance: none;
...@@ -38,8 +45,36 @@ ...@@ -38,8 +45,36 @@
pointer-events: none; pointer-events: none;
} }
} }
.search-add-focus {
.search-option-frame {
display: none;
position: absolute;
background-color: white;
top: 50px;
padding: 10px;
border: 1px solid rgb(175, 175, 175);
border-radius: 4px;
.searchbar-options-arrow {
width: 0;
height: 0;
top: -5px;
position: absolute;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid rgb(175, 175, 175);
margin-left: 3%;
}
}
.search-button-container {
display: flex; display: flex;
margin-top: 3%;
}
.search-add-focus {
//display: flex;
position: relative;
button { button {
background-color: white; background-color: white;
border: none; border: none;
...@@ -51,7 +86,8 @@ ...@@ -51,7 +86,8 @@
} }
} }
.search-edit-focus { .search-edit-focus {
display: flex; //display: flex;
position: relative;
button { button {
background-color: white; background-color: white;
border: none; border: none;
...@@ -63,15 +99,17 @@ ...@@ -63,15 +99,17 @@
} }
} }
.search-settings { .search-settings {
display: flex; //display: flex;
position: relative;
a.btn { a.btn {
border: none; border: none;
padding: 0px 8px; padding: 0px 8px;
display: flex; display: block;
align-items: center; align-items: center;
font-size: 16px; font-size: 16px;
} }
} }
.search-input-submit { .search-input-submit {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
...@@ -178,7 +216,7 @@ div:hover>.searchbar-tooltip { ...@@ -178,7 +216,7 @@ div:hover>.searchbar-tooltip {
border-left: 1px solid #aaa; border-left: 1px solid #aaa;
} }
} }
*:not(.search-submit) { *:not(.search-submit, .searchbar-options-arrow) {
width: 100%; width: 100%;
} }
} }
...@@ -213,13 +251,32 @@ div:hover>.searchbar-tooltip { ...@@ -213,13 +251,32 @@ div:hover>.searchbar-tooltip {
} }
} }
@media (min-width: @screen-sm-min) { .searchbar-tooltip {
#research-bar { display: none;
position: fixed; position: absolute;
width: 100%; top: 45px;
left: -10px;
&>.searchbar-tooltip-arrow {
position: absolute;
top: -4px;
left: 20px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #ff8000;
} }
#research-bar-placeholder { &>.searchbar-tooltip-content {
height: 60px; position: relative;
&>p {
display: inline-block;
background: #ff8000;
border-radius: .25em;
font-size: 16px;
color: white;
padding: 5px 10px;
white-space: nowrap;
}
} }
} }
......
resources/views/parts/searchbar.blade.php
+ 51
− 26
View file @ e134e9d1
...@@ -4,6 +4,25 @@ ...@@ -4,6 +4,25 @@
<form id="searchForm" method={{ $request }} action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3 ") }}" accept-charset="UTF-8"> <form id="searchForm" method={{ $request }} action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3 ") }}" accept-charset="UTF-8">
<div class="searchbar {{$class or ''}}"> <div class="searchbar {{$class or ''}}">
<div class="search-focus-selector"> <div class="search-focus-selector">
<button type="button" id="toggleOptBtn" data-mode="o">
<i class="fa fa-chevron-down"></i>
</button>
<noscript>
<style>
#toggleOptBtn {
display: none;
}
.search-settings {
padding: 5px;
border-right: solid 1px #ccc;
}
</style>
<div class="search-settings">
<a id="settings-btn" class="mutelink btn btn-default" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "settings ") }}">
<i class="fa fa-cog" aria-hidden="true"></i>
</a>
</div>
</noscript>
<select id="focus-select" name="focus" style="font-family: FontAwesome, sans-serif;"> <select id="focus-select" name="focus" style="font-family: FontAwesome, sans-serif;">
<option value="web" style="font-family: FontAwesome, sans-serif;" selected>&#xf0ac; Websuche</option> <option value="web" style="font-family: FontAwesome, sans-serif;" selected>&#xf0ac; Websuche</option>
<option value="nachrichten" style="font-family: FontAwesome, sans-serif;">&#xf0a1; Nachrichtensuche</option> <option value="nachrichten" style="font-family: FontAwesome, sans-serif;">&#xf0a1; Nachrichtensuche</option>
...@@ -11,36 +30,42 @@ ...@@ -11,36 +30,42 @@
<option value="produktsuche" style="font-family: FontAwesome, sans-serif;">&#xf07a; Produktsuche</option> <option value="produktsuche" style="font-family: FontAwesome, sans-serif;">&#xf07a; Produktsuche</option>
<option value="maps" style="font-family: FontAwesome, sans-serif;">&#xf279; Kartensuche</option> <option value="maps" style="font-family: FontAwesome, sans-serif;">&#xf279; Kartensuche</option>
</select> </select>
</div> <div class="search-option-frame" style="display:none;">
<div class="search-add-focus js-only"> <div class="searchbar-options-arrow">
<button type="button" id="addFocusBtn">
<i class="fa fa-plus"></i>
</button>
<div class="searchbar-tooltip">
<div class="searchbar-tooltip-arrow">
</div>
<div class="searchbar-tooltip-content">
<p>{{{ trans('index.add-focus') }}}</p>
</div> </div>
</div> <div class="search-button-container">
</div> <div class="search-add-focus js-only">
<div class="search-edit-focus js-only"> <button type="button" id="addFocusBtn">
<button type="button" id="editFocusBtn" title="@lang('index.edit-focus')"> <i class="fa fa-plus"></i>
<i class="fa fa-wrench"></i> </button>
</button> <div class="searchbar-tooltip">
<div class="searchbar-tooltip"> <div class="searchbar-tooltip-arrow">
<div class="searchbar-tooltip-arrow"> </div>
</div> <div class="searchbar-tooltip-content">
<div class="searchbar-tooltip-content"> <p>{{{ trans('index.add-focus') }}}</p>
<p>{{{ trans('index.edit-focus') }}}</p> </div>
</div>
</div>
<div class="search-edit-focus js-only">
<button type="button" id="editFocusBtn" title="@lang('index.edit-focus')">
<i class="fa fa-wrench"></i>
</button>
<div class="searchbar-tooltip">
<div class="searchbar-tooltip-arrow">
</div>
<div class="searchbar-tooltip-content">
<p>{{{ trans('index.edit-focus') }}}</p>
</div>
</div>
</div>
<div class="search-settings">
<a id="settings-btn" class="mutelink btn btn-default" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "settings ") }}">
<i class="fa fa-cog" aria-hidden="true"></i>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="search-settings">
<a id="settings-btn" class="mutelink btn btn-default" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "settings ") }}">
<i class="fa fa-cog" aria-hidden="true"></i>
</a>
</div>
<div class="search-input-submit"> <div class="search-input-submit">
<div class="search-input"> <div class="search-input">
<input type="text" name="eingabe" required="" autofocus="" autocomplete="{{$autocomplete or 'off'}}" class="form-control"placeholder="{{ trans('index.placeholder') }}"> <input type="text" name="eingabe" required="" autofocus="" autocomplete="{{$autocomplete or 'off'}}" class="form-control"placeholder="{{ trans('index.placeholder') }}">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment