Commit 2b2cff64 authored by Aria Givi's avatar Aria Givi
Browse files

Dialog laesst sich oeffnen

parent f73c3b19
...@@ -22,9 +22,9 @@ function setSearchbarActionListeners () { ...@@ -22,9 +22,9 @@ 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);
$('.search-focus-selector').click(toggleOptionsDialog);
$('#focus-select').change(focusChanged); $('#focus-select').change(focusChanged);
// Save Focus on clicking enter while in the focus name input // Save Focus on clicking enter while in the focus name input
$('#focus-name').keyup(function (event) { $('#focus-name').keyup(function (event) {
...@@ -379,16 +379,28 @@ function getFocusInUrl () { ...@@ -379,16 +379,28 @@ function getFocusInUrl () {
} }
function toggleOptionsDialog() { function toggleOptionsDialog() {
var btnMode = $('.toggleOptBtn').attr('data-mode'); var btnMode = $('#toggleOptBtn').attr('data-mode');
if (btnMode == 'open') { if (btnMode == 'o') {
$('.toggleOptBtn').attr('data-mode', 'close'); openOptionsDialog();
$('.toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
} else { } else {
$('.toggleOptBtn').attr('data-mode', 'open'); closeOptionsDialog();
$('.toggleOptBtn').html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
} }
} }
function openOptionsDialog() {
$('#toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
$('#toggleOptBtn').attr('data-mode', 'c');
$('.search-option-frame').css('display', 'inline-block');
}
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();
......
...@@ -22,9 +22,9 @@ function setSearchbarActionListeners () { ...@@ -22,9 +22,9 @@ 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);
$('.search-focus-selector').click(toggleOptionsDialog);
$('#focus-select').change(focusChanged); $('#focus-select').change(focusChanged);
// Save Focus on clicking enter while in the focus name input // Save Focus on clicking enter while in the focus name input
$('#focus-name').keyup(function (event) { $('#focus-name').keyup(function (event) {
...@@ -379,16 +379,28 @@ function getFocusInUrl () { ...@@ -379,16 +379,28 @@ function getFocusInUrl () {
} }
function toggleOptionsDialog() { function toggleOptionsDialog() {
var btnMode = $('.toggleOptBtn').attr('data-mode'); var btnMode = $('#toggleOptBtn').attr('data-mode');
if (btnMode == 'open') { if (btnMode == 'o') {
$('.toggleOptBtn').attr('data-mode', 'close'); openOptionsDialog();
$('.toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
} else { } else {
$('.toggleOptBtn').attr('data-mode', 'open'); closeOptionsDialog();
$('.toggleOptBtn').html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
} }
} }
function openOptionsDialog() {
$('#toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
$('#toggleOptBtn').attr('data-mode', 'c');
$('.search-option-frame').css('display', 'inline-block');
}
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();
......
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
&>button { &>button {
border: none; border: none;
background-color: white;
margin: 5px; margin: 5px;
} }
...@@ -23,47 +24,59 @@ ...@@ -23,47 +24,59 @@
appearance: none; appearance: none;
background-color: transparent; background-color: transparent;
padding-right: 35px; padding-right: 35px;
border: 1px solid #ccc;
border-radius: 4px;
} }
} }
.search-button-container { .search-option-frame {
display: none; display: none;
position: absolute;
margin-top: 145px;
padding: 1%;
border: 1px solid #ccc;
border-radius: 4px;
} }
.search-add-focus { .search-button-container {
//display: flex; display: flex;
button {
background-color: white; .search-add-focus {
border: none; //display: flex;
padding: 0px 8px; button {
font-size: 16px; background-color: white;
&:hover { border: none;
background-color: #e6e6e6; padding: 0px 8px;
font-size: 16px;
&:hover {
background-color: #e6e6e6;
}
} }
} }
} .search-edit-focus {
.search-edit-focus { //display: flex;
//display: flex; button {
button { background-color: white;
background-color: white; border: none;
border: none; padding: 0px 8px;
padding: 0px 8px; font-size: 16px;
font-size: 16px; &:hover {
&:hover { background-color: #e6e6e6;
background-color: #e6e6e6; }
} }
} }
} .search-settings {
.search-settings { //display: flex;
//display: flex; a.btn {
a.btn { border: none;
border: none; padding: 0px 8px;
padding: 0px 8px; display: flex;
display: flex; 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;
...@@ -103,11 +116,6 @@ ...@@ -103,11 +116,6 @@
} }
} }
.search-focus-selector {
background-color: white;
position: relative;
text-overflow: ellipsis;
}
.searchform-bonus { .searchform-bonus {
li { li {
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<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" class="toggleOptBtn" data-mode="open"> <button type="button" id="toggleOptBtn" data-mode="o">
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down"></i>
</button> </button>
<div class="search-option-frame" style="display:none;"> <div class="search-option-frame" style="display:none;">
...@@ -15,38 +15,38 @@ ...@@ -15,38 +15,38 @@
<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-button-container">
</div> <div class="search-add-focus js-only">
<div class="search-button-container"> <button type="button" id="addFocusBtn">
<div class="search-add-focus js-only"> <i class="fa fa-plus"></i>
<button type="button" id="addFocusBtn"> </button>
<i class="fa fa-plus"></i> <div class="searchbar-tooltip">
</button> <div class="searchbar-tooltip-arrow">
<div class="searchbar-tooltip"> </div>
<div class="searchbar-tooltip-arrow"> <div class="searchbar-tooltip-content">
</div> <p>{{{ trans('index.add-focus') }}}</p>
<div class="searchbar-tooltip-content"> </div>
<p>{{{ trans('index.add-focus') }}}</p> </div>
</div> </div>
</div> <div class="search-edit-focus js-only">
</div> <button type="button" id="editFocusBtn" title="@lang('index.edit-focus')">
<div class="search-edit-focus js-only"> <i class="fa fa-wrench"></i>
<button type="button" id="editFocusBtn" title="@lang('index.edit-focus')"> </button>
<i class="fa fa-wrench"></i> <div class="searchbar-tooltip">
</button> <div class="searchbar-tooltip-arrow">
<div class="searchbar-tooltip"> </div>
<div class="searchbar-tooltip-arrow"> <div class="searchbar-tooltip-content">
<p>{{{ trans('index.edit-focus') }}}</p>
</div>
</div>
</div> </div>
<div class="searchbar-tooltip-content"> <div class="search-settings">
<p>{{{ trans('index.edit-focus') }}}</p> <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 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 class="search-input-submit"> <div class="search-input-submit">
<div class="search-input"> <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