From 2b2cff6405acc9cff5e79aec88754283d3796b92 Mon Sep 17 00:00:00 2001
From: Aria <aria@suma-ev.de>
Date: Mon, 27 Nov 2017 09:51:58 +0100
Subject: [PATCH] Dialog laesst sich oeffnen
---
public/js/searchbar.js | 26 +++++--
resources/assets/js/searchbar.js | 26 +++++--
resources/assets/less/metager/searchbar.less | 76 +++++++++++---------
resources/views/parts/searchbar.blade.php | 56 +++++++--------
4 files changed, 108 insertions(+), 76 deletions(-)
diff --git a/public/js/searchbar.js b/public/js/searchbar.js
index a28acba37..e5e38aa0c 100644
--- a/public/js/searchbar.js
+++ b/public/js/searchbar.js
@@ -22,9 +22,9 @@ function setSearchbarActionListeners () {
$('.focusCheckbox').click(checkboxCheckListener);
$('#addFocusBtn').click(() => showFocusCreateDialog(''));
$('#editFocusBtn').click(editCurrentFocus);
+ $('#toggleOptBtn').click(toggleOptionsDialog);
$('.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) {
@@ -379,16 +379,28 @@ 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>');
+ var btnMode = $('#toggleOptBtn').attr('data-mode');
+ if (btnMode == 'o') {
+ openOptionsDialog();
} else {
- $('.toggleOptBtn').attr('data-mode', 'open');
- $('.toggleOptBtn').html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
+ 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', '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) {
toggleDeleteButton();
diff --git a/resources/assets/js/searchbar.js b/resources/assets/js/searchbar.js
index d9346d2de..cc1d7f9eb 100644
--- a/resources/assets/js/searchbar.js
+++ b/resources/assets/js/searchbar.js
@@ -22,9 +22,9 @@ function setSearchbarActionListeners () {
$('.focusCheckbox').click(checkboxCheckListener);
$('#addFocusBtn').click(() => showFocusCreateDialog(''));
$('#editFocusBtn').click(editCurrentFocus);
+ $('#toggleOptBtn').click(toggleOptionsDialog);
$('.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) {
@@ -379,16 +379,28 @@ 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>');
+ var btnMode = $('#toggleOptBtn').attr('data-mode');
+ if (btnMode == 'o') {
+ openOptionsDialog();
} else {
- $('.toggleOptBtn').attr('data-mode', 'open');
- $('.toggleOptBtn').html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
+ 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', '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) {
toggleDeleteButton();
diff --git a/resources/assets/less/metager/searchbar.less b/resources/assets/less/metager/searchbar.less
index 4b90240dc..698ed28e9 100644
--- a/resources/assets/less/metager/searchbar.less
+++ b/resources/assets/less/metager/searchbar.less
@@ -12,6 +12,7 @@
&>button {
border: none;
+ background-color: white;
margin: 5px;
}
@@ -23,47 +24,59 @@
appearance: none;
background-color: transparent;
padding-right: 35px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
}
}
- .search-button-container {
+ .search-option-frame {
display: none;
+ position: absolute;
+ margin-top: 145px;
+ padding: 1%;
+ border: 1px solid #ccc;
+ border-radius: 4px;
}
- .search-add-focus {
- //display: flex;
- button {
- background-color: white;
- border: none;
- padding: 0px 8px;
- font-size: 16px;
- &:hover {
- background-color: #e6e6e6;
+ .search-button-container {
+ display: flex;
+
+ .search-add-focus {
+ //display: flex;
+ button {
+ background-color: white;
+ border: none;
+ padding: 0px 8px;
+ font-size: 16px;
+ &:hover {
+ background-color: #e6e6e6;
+ }
}
}
- }
- .search-edit-focus {
- //display: flex;
- button {
- background-color: white;
- border: none;
- padding: 0px 8px;
- font-size: 16px;
- &:hover {
- background-color: #e6e6e6;
+ .search-edit-focus {
+ //display: flex;
+ button {
+ background-color: white;
+ border: none;
+ padding: 0px 8px;
+ font-size: 16px;
+ &:hover {
+ background-color: #e6e6e6;
+ }
}
}
- }
- .search-settings {
- //display: flex;
- a.btn {
- border: none;
- padding: 0px 8px;
- display: flex;
- align-items: center;
- font-size: 16px;
+ .search-settings {
+ //display: flex;
+ a.btn {
+ border: none;
+ padding: 0px 8px;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ }
}
}
+
.search-input-submit {
flex-grow: 1;
display: flex;
@@ -103,11 +116,6 @@
}
}
-.search-focus-selector {
- background-color: white;
- position: relative;
- text-overflow: ellipsis;
-}
.searchform-bonus {
li {
diff --git a/resources/views/parts/searchbar.blade.php b/resources/views/parts/searchbar.blade.php
index 0bcddf827..720a8c4fe 100644
--- a/resources/views/parts/searchbar.blade.php
+++ b/resources/views/parts/searchbar.blade.php
@@ -4,7 +4,7 @@
<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">
- <button type="button" class="toggleOptBtn" data-mode="open">
+ <button type="button" id="toggleOptBtn" data-mode="o">
<i class="fa fa-chevron-down"></i>
</button>
<div class="search-option-frame" style="display:none;">
@@ -15,38 +15,38 @@
<option value="produktsuche" style="font-family: FontAwesome, sans-serif;"> Produktsuche</option>
<option value="maps" style="font-family: FontAwesome, sans-serif;"> Kartensuche</option>
</select>
- </div>
- </div>
- <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 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>
- </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-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="searchbar-tooltip-content">
- <p>{{{ trans('index.edit-focus') }}}</p>
+ <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-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">
--
GitLab