Skip to content

GitLab

Commit fda55a2c authored by Aria Givi's avatar Aria Givi
Browse files
Options

Dropdown Pfeil togglet

parent 5e8b671a
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 45 deletions
public/js/searchbar.js
View file @ fda55a2c
......@@ -24,6 +24,7 @@ function setSearchbarActionListeners () {
$('#editFocusBtn').click(editCurrentFocus);
$('.save-focus-btn').click(saveFocus);
$('.delete-focus-btn').click(deleteFocus);
$('.search-focus-selector').click(toggleOptionsDialog);
$('#focus-select').change(focusChanged);
// Save Focus on clicking enter while in the focus name input
$('#focus-name').keyup(function (event) {
......@@ -377,6 +378,17 @@ function getFocusInUrl () {
}
}
function toggleOptionsDialog() {
var btnMode = $('.toggleOptBtn').attr('data-mode');
if (btnMode == "open") {
$('.toggleOptBtn').attr('data-mode', 'close');
$('.toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
} else {
$('.toggleOptBtn').attr('data-mode', 'open');
$('.toggleOptBtn').html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
}
}
function checkboxCheckListener (event) {
toggleDeleteButton();
var elem = event.target;
......
resources/assets/js/searchbar.js
View file @ fda55a2c
......@@ -24,6 +24,7 @@ function setSearchbarActionListeners () {
$('#editFocusBtn').click(editCurrentFocus);
$('.save-focus-btn').click(saveFocus);
$('.delete-focus-btn').click(deleteFocus);
$('.search-focus-selector').click(showOptionsDialog);
$('#focus-select').change(focusChanged);
// Save Focus on clicking enter while in the focus name input
$('#focus-name').keyup(function (event) {
......@@ -377,6 +378,10 @@ function getFocusInUrl () {
}
}
function showOptionsDialog() {
$('.search-focus-selector:after').css('content', '"\f077"');
}
function checkboxCheckListener (event) {
toggleDeleteButton();
var elem = event.target;
......
resources/assets/less/metager/searchbar.less
View file @ fda55a2c
......@@ -3,9 +3,12 @@
align-items: stretch;
font-size: 16px;
background-color: white;
.search-focus-selector {
background-color: transparent;
border-radius: 5px 0px 0px 5px;
display: flex;
align-items: center;
select {
width: 100%;
color: #777;
......@@ -16,8 +19,13 @@
padding-right: 35px;
}
}
.search-button-container {
display: none;
}
.search-add-focus {
display: flex;
//display: flex;
button {
background-color: white;
border: none;
......@@ -29,7 +37,7 @@
}
}
.search-edit-focus {
display: flex;
//display: flex;
button {
background-color: white;
border: none;
......@@ -41,7 +49,7 @@
}
}
.search-settings {
display: flex;
//display: flex;
a.btn {
border: none;
padding: 0px 8px;
......@@ -89,22 +97,16 @@
}
}
.toggleOptBtn {
border: none;
background-color: white;
}
.search-focus-selector {
background-color: white;
position: relative;
text-overflow: ellipsis;
&:after {
content: "\f078";
font: 15px "FontAwesome", sans-serif; //text-align: center;
line-height: 30px;
color: #aaa;
background-color: transparent;
right: 8px;
top: 2px;
padding: 2px 2px 2px 5px;
position: absolute;
pointer-events: none;
}
}
.searchform-bonus {
......
resources/views/parts/searchbar.blade.php
View file @ fda55a2c
......@@ -4,42 +4,49 @@
<form id="searchForm" method={{ $request }} action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3 ") }}" accept-charset="UTF-8">
<div class="searchbar {{$class or ''}}">
<div class="search-focus-selector">
<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="nachrichten" style="font-family: FontAwesome, sans-serif;">&#xf0a1; Nachrichtensuche</option>
<option value="wissenschaft" style="font-family: FontAwesome, sans-serif;">&#xf15c; Wissenschaftssuche</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>
</select>
</div>
<div class="search-add-focus js-only">
<button type="button" id="addFocusBtn">
<i class="fa fa-plus"></i>
<button type="button" data-mode="open">
<i class="fa fa-chevron-down"></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 class="search-option-frame" style="display:none;">
<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="nachrichten" style="font-family: FontAwesome, sans-serif;">&#xf0a1; Nachrichtensuche</option>
<option value="wissenschaft" style="font-family: FontAwesome, sans-serif;">&#xf15c; Wissenschaftssuche</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>
</select>
</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 class="search-button-container">
<div class="search-add-focus js-only">
<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 class="searchbar-tooltip-content">
<p>{{{ trans('index.edit-focus') }}}</p>
</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>
<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 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 class="search-input-submit">
<div class="search-input">
......
Markdown is supported
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