From 2167eb75a29b0ae0f8199652fae85b273ec627e5 Mon Sep 17 00:00:00 2001
From: Thomas Hackl <hackl@data-quest.de>
Date: Wed, 19 Oct 2022 14:29:53 +0000
Subject: [PATCH] Resolve "Styling des Sidebar-Suchwidgets an das
Erscheinungsbild der globalen Suche anpassen"
Closes #1103
Merge request studip/studip!656
---
app/views/search/globalsearch/index.php | 8 +--
lib/classes/sidebar/SearchWidget.php | 19 +++--
resources/assets/stylesheets/scss/search.scss | 6 +-
.../assets/stylesheets/scss/sidebar.scss | 71 +++++++++++--------
.../courseware/CoursewareSearchWidget.vue | 41 +++++++----
templates/sidebar/search-widget.php | 41 ++++++-----
6 files changed, 111 insertions(+), 75 deletions(-)
diff --git a/app/views/search/globalsearch/index.php b/app/views/search/globalsearch/index.php
index 637873e20bf..d0846e90e91 100644
--- a/app/views/search/globalsearch/index.php
+++ b/app/views/search/globalsearch/index.php
@@ -5,14 +5,14 @@
placeholder="<?= _('Was suchen Sie?') ?>">
<span class="input-group-append">
- <button type="submit" class="button" id="search-btn">
- <?= Icon::create('search')->asImg(['title' => _('Suche starten')]) ?>
- </button>
-
<button type="submit" class="button" id="reset-search">
<?= Icon::create('decline')->asImg(['title' => _('Suche zurücksetzen')]) ?>
</button>
+ <button type="submit" class="button" id="search-btn">
+ <?= Icon::create('search')->asImg(['title' => _('Suche starten')]) ?>
+ </button>
+
</span>
</div>
</form>
diff --git a/lib/classes/sidebar/SearchWidget.php b/lib/classes/sidebar/SearchWidget.php
index f7dcdc18453..71677fb3ae4 100644
--- a/lib/classes/sidebar/SearchWidget.php
+++ b/lib/classes/sidebar/SearchWidget.php
@@ -145,15 +145,20 @@ class SearchWidget extends SidebarWidget
$reset_params = $query_params;
foreach ($this->needles as $needle) {
unset($reset_params[$needle['name']]);
+
+ // Search view in Wiki must be cleared.
+ if ($reset_params['view'] == 'search') {
+ $reset_params['view'] = 'show';
+ }
+ // Search view in Forum must be cleared.
+ if ($reset_params['backend'] == 'search') {
+ unset($reset_params['backend']);
+ $this->url = str_replace('index/search', 'index', $this->url);
+ }
}
- $reset_link = sprintf(
- '<a href="%s">%s %s</a>',
- URLHelper::getLink($this->url, array_merge($reset_params, ['reset-search' => 1])),
- Icon::create('decline')->asImg(['class' => 'text-top']),
- _('Zurücksetzen')
- );
- $this->template_variables['reset_search'] = $reset_link;
+ $reset_link = URLHelper::getLink($this->url, array_merge($reset_params, ['reset-search' => 1]));
+ $this->template_variables['reset_link'] = $reset_link;
}
$this->template_variables['needles'] = $this->needles;
diff --git a/resources/assets/stylesheets/scss/search.scss b/resources/assets/stylesheets/scss/search.scss
index 5b7107ea39e..8d6b37046de 100644
--- a/resources/assets/stylesheets/scss/search.scss
+++ b/resources/assets/stylesheets/scss/search.scss
@@ -191,8 +191,10 @@ div#div-search-input {
// visual adjustments for the reset button
button#reset-search {
- background-color: transparent;
- border: 0;
+ background-color: $white;
+ border-bottom: 1px solid $light-gray-color-40;
+ border-top: 1px solid $light-gray-color-40;
+ margin-left: -1px;
padding-left: 10px;
}
diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss
index 0b9393380db..a520f3bfa4b 100644
--- a/resources/assets/stylesheets/scss/sidebar.scss
+++ b/resources/assets/stylesheets/scss/sidebar.scss
@@ -298,45 +298,58 @@ select.sidebar-selectlist {
}
.sidebar-search {
- .needles input[type=text] {
- box-sizing: border-box;
- border: 1px solid $base-color-60;
- border-right-width: 30px;
- float: left;
- height: 22px;
- width: 100%;
- }
- input[type=submit] {
- font: 0/0 a;
- color: transparent;
- text-shadow: none;
- background-color: transparent;
- border: 0;
-
- // Activate when twitter-mixins is included as scss and remove the above rules
- // @include hide-text();
-
- width: 29px;
- height: 20px;
- @include background-icon(search, info_alt);
- float: left;
- background-position: center 3px;
- background-repeat: no-repeat;
- vertical-align: top;
- margin-left: -30px;
- }
- ul.needles {
+ .needles {
list-style: none;
margin: 0;
padding: 0;
+
li {
- @include clearfix();
+ display: flex;
margin-bottom: 0.5em;
+
&:last-child {
margin-bottom: 0;
}
+
+ .input-group {
+ margin-bottom: 0;
+ margin-top: 0;
+
+ input[type=text] {
+ box-sizing: border-box;
+ border: 1px solid $base-color-60;
+ border-right: none;
+ flex: 1;
+ padding: .375rem .75rem;
+ width: 100%;
+ }
+
+ button {
+ background-color: $content-color-20;
+ border: 1px solid $base-color-60;
+ border-left-color: $light-gray-color-40;
+ border-radius: 0;
+ color: transparent;
+ cursor: pointer;
+ font: 0/0 a;
+ height: 30px;
+ text-shadow: none;
+ }
+
+ .reset-search {
+ border: 1px solid $base-color-60;
+ border-left: 0;
+ border-right: 0;
+ display: inline-block;
+ padding-right: 5px;
+ padding-top: 4px;
+ cursor: pointer;
+ }
+
+ }
}
}
+
ul.filters {
list-style: none;
margin: 0;
diff --git a/resources/vue/components/courseware/CoursewareSearchWidget.vue b/resources/vue/components/courseware/CoursewareSearchWidget.vue
index c8445f926e1..99826a42f7d 100644
--- a/resources/vue/components/courseware/CoursewareSearchWidget.vue
+++ b/resources/vue/components/courseware/CoursewareSearchWidget.vue
@@ -2,19 +2,25 @@
<form class="sidebar-search" @submit.prevent="">
<ul class="needles">
<li>
- <form @submit.prevent="">
- <input
- type="text"
- v-model="searchTerm"
- :aria-label="$gettext('Geben Sie einen Suchbegriff mit mindestens 3 Zeichen ein.')"
- />
- <input
- type="submit"
- :value="$gettext('Suchen')"
- aria-controls="search"
- @click="loadResults"
- />
- </form>
+ <div class="input-group files-search">
+ <input
+ type="text"
+ v-model="searchTerm"
+ :aria-label="$gettext('Geben Sie einen Suchbegriff mit mindestens 3 Zeichen ein.')"
+ />
+ <a v-if="searched" @click.prevent="setShowSearchResults(false)" class="reset-search">
+ <studip-icon shape="decline" size="20"></studip-icon>
+ </a>
+ <button
+ type="submit"
+ :value="$gettext('Suchen')"
+ aria-controls="search"
+ class="submit-search"
+ @click="loadResults"
+ >
+ <studip-icon shape="search" size="20"></studip-icon>
+ </button>
+ </div>
</li>
</ul>
</form>
@@ -23,12 +29,14 @@
<script>
import axios from 'axios';
import { mapActions, mapGetters } from 'vuex';
+import StudipIcon from '../StudipIcon.vue';
export default {
name: 'courseware-search-widget',
+ components: { StudipIcon },
data() {
return {
- searchTerm: '',
+ searchTerm: ''
}
},
computed: {
@@ -36,6 +44,9 @@ export default {
courseware: 'courseware',
context: 'context',
}),
+ searched() {
+ return this.$store.state.courseware.showSearchResults
+ }
},
methods: {
...mapActions({
@@ -70,7 +81,7 @@ export default {
});
}
}
-
+
}
</script>
diff --git a/templates/sidebar/search-widget.php b/templates/sidebar/search-widget.php
index 597e574154f..df4a1dd1a07 100644
--- a/templates/sidebar/search-widget.php
+++ b/templates/sidebar/search-widget.php
@@ -1,8 +1,3 @@
-<? if ($reset_search): ?>
-<div style="text-align: right;">
- <?= $reset_search ?>
-</div>
-<? endif; ?>
<form action="<?= URLHelper::getLink($url) ?>" method="<?= $method ?>" <? if (isset($id)) printf('id="%s"', htmlReady($id)); ?> class="sidebar-search">
<? foreach ($url_params as $key => $value): ?>
<?=addHiddenFields($key,$value)?>
@@ -10,19 +5,29 @@
<ul class="needles">
<? foreach ($needles as $needle): ?>
<li <? if ($needle['quick_search'] && $needle['quick_search']->hasExtendedLayout()) echo 'class="extendedLayout" id="' . $needle['quick_search']->getId() . '_frame"'; ?>>
- <label for="needle-<?= $hash = md5($url . '|' . $needle['name']) ?>" <? if ($needle['placeholder']) echo 'style="display:none;"'; ?>>
- <?= htmlReady($needle['label']) ?>
- </label>
- <? if ($needle['quick_search']): ?>
- <?= $needle['quick_search']->render() ?>
- <? else: ?>
- <input type="text" id="needle-<?= $hash ?>"
- name="<?= htmlReady($needle['name']) ?>"
- value="<?= htmlReady($needle['value']) ?>"
- <? if ($needle['placeholder']) printf('placeholder="%s"', htmlReady($needle['label'])); ?>
- <?= arrayToHtmlAttributes($needle['attributes']) ?>>
- <? endif; ?>
- <input type="submit" value="<?= _('Suchen') ?>">
+ <div class="input-group files-search">
+ <label for="needle-<?= $hash = md5($url . '|' . $needle['name']) ?>" <? if ($needle['placeholder']) echo 'style="display:none;"'; ?>>
+ <?= htmlReady($needle['label']) ?>
+ </label>
+ <? if ($needle['quick_search']): ?>
+ <?= $needle['quick_search']->render() ?>
+ <? else: ?>
+ <input type="text" id="needle-<?= $hash ?>"
+ name="<?= htmlReady($needle['name']) ?>"
+ value="<?= htmlReady($needle['value']) ?>"
+ <? if ($needle['placeholder']) printf('placeholder="%s"', htmlReady($needle['label'])); ?>
+ <?= arrayToHtmlAttributes($needle['attributes']) ?>>
+ <? endif; ?>
+ <? if ($reset_link): ?>
+ <a class="reset-search" href="<?= $reset_link ?>" tabindex="0"
+ title="<?= _('Suche zurücksetzen') ?>">
+ <?= Icon::create('decline')->asImg(20) ?>
+ </a>
+ <? endif; ?>
+ <button type="submit" class="submit-search<?= $reset_link ? ' is-executed' : '' ?>"
+ title="<?= _('Suche ausführen') ?>">
+ <?= Icon::create('search')->asImg(20) ?>
+ </button>
</li>
<? endforeach; ?>
</ul>
--
GitLab