Polishing TIC: Suche

Closes #4933

Merge request studip/studip!3720

14 files changed, 208 insertions, 91 deletions

diff --git a/resources/assets/javascripts/lib/multi_person_search.js b/resources/assets/javascripts/lib/multi_person_search.js
index c50c508..2034d80 100644
--- a/resources/assets/javascripts/lib/multi_person_search.js
+++ b/resources/assets/javascripts/lib/multi_person_search.js
@@ -83,6 +83,7 @@ const MultiPersonSearch = {
     },
 
     search: function() {
+        $('#' + this.name + '_resetsearch').addClass('visible');
         const searchterm = $('#' + this.name + '_searchinput').val();
         const not_found_template = _.template(
             $gettext('Es wurden keine neuen Ergebnisse für "<%= needle %>" gefunden.')
@@ -132,6 +133,7 @@ const MultiPersonSearch = {
     },
 
     resetSearch: function() {
+        $('#' + this.name + '_resetsearch').removeClass('visible');
         $('#' + this.name + '_searchinput').val('');
         MultiPersonSearch.removeAllNotSelected();
     },
diff --git a/resources/assets/stylesheets/scss/coursewizard.scss b/resources/assets/stylesheets/scss/coursewizard.scss
index 2fe1783..2f9372e 100644
--- a/resources/assets/stylesheets/scss/coursewizard.scss
+++ b/resources/assets/stylesheets/scss/coursewizard.scss
@@ -25,6 +25,36 @@ div {
     float: left;
     padding-left: 10px;
     width: calc(50% - 20px);
+
+    #sem-tree-search-wrapper {
+      max-width: 25em;
+      border: solid thin var(--color--input-field-border);
+      border-radius: var(--border-radius-search);
+      margin-bottom: 1em;
+      padding: 0 0 0 5px;
+
+      &:focus-within {
+        border: solid 2px var(--black);
+      }
+  
+      #sem-tree-search {
+        border: none;
+        outline: none;
+      }
+  
+      #sem-tree-search-start {
+        height: 30px;
+        border-left: solid thin #ccc;
+        display: inline-block;
+        width: 30px;
+
+        input {
+          vertical-align: middle;
+          padding: 5px 7px;
+        }
+      }
+    }
+
   }
 }
 
diff --git a/resources/assets/stylesheets/scss/dashboard.scss b/resources/assets/stylesheets/scss/dashboard.scss
index 1ed90bd..3d19ba0 100644
--- a/resources/assets/stylesheets/scss/dashboard.scss
+++ b/resources/assets/stylesheets/scss/dashboard.scss
@@ -113,7 +113,9 @@
 #files_dashboard-index,
 #files_dashboard-search {
     form {
-        label, .input-group {
+        label,
+        input,
+        .input-group {
             margin-top: 0;
         }
     }
@@ -133,6 +135,8 @@ form div.files-search {
             line-height: 1.5;
             padding: .25em .5em;
             margin: 0;
+            border-top-left-radius: var(--border-radius-search);
+            border-bottom-left-radius: var(--border-radius-search);
         }
 
         .input-group-append {
@@ -142,11 +146,14 @@ form div.files-search {
             .button {
                 margin: 0;
                 line-height: 1.5;
-                background-color: var(--content-color-20);
+                background-color: var(--color--button-background);
                 color: var(--brand-color-dark);
                 min-width: auto;
                 border: 1px solid var(--light-gray-color-40);
                 border-left: none;
+                border-radius: 0;
+                border-top-right-radius: var(--border-radius-search);
+                border-bottom-right-radius: var(--border-radius-search);
             }
 
             img {
diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss
index 5f5e3fa..ce16092 100644
--- a/resources/assets/stylesheets/scss/globalsearch.scss
+++ b/resources/assets/stylesheets/scss/globalsearch.scss
@@ -4,51 +4,54 @@
     align-self: flex-start;
 }
 #globalsearch-searchbar {
-    $width: 423px;
-    $hidden-width: 215px;
-
-    position: relative;
-    top: 4px;
-    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    border: thin solid var(--color--font-inverted);
+    border-radius: var(--border-radius-search);
+    background-color: var(--color--brand-primary);
+    padding: 3px 5px 2px 5px;
+    margin-top: 6px;
+    width: 220px;
+    transition: width var(--transition-duration);
+
+    &:focus-within {
+        border-color: -webkit-focus-ring-color;
+    }
 
     // Reset alignments among browsers
     > * {
         box-sizing: border-box;
     }
 
-    // Defines the clear icon for the input
-    #globalsearch-clear {
-        @include square(var(--icon-size-default));
-        margin-left: -28px;
-        margin-top: -5px;
-        vertical-align: middle;
-    }
     &:not(.has-value) #globalsearch-clear {
         display: none;
     }
 
-    // The actual search input
     #globalsearch-input {
-        height: 29px;
-        padding-left: 5px;
-        width: $hidden-width;
-        transition: width var(--transition-duration);
-    }
-    &.is-visible #globalsearch-input {
-        width: $width;
+        flex: 1;
+        border: none;
+        outline: none;
+        margin-right: 5px;
+        color: var(--color--font-inverted);
+        background-color: var(--color--brand-primary);
+
+        &::placeholder {
+            color: var(--color--font-inverted);
+        }
     }
 
-    // Search icon
-    #globalsearch-icon {
-        margin-left: 5px;
-        position: relative;
-        top: 3px;
+    input[type=image] {
+        cursor: pointer;
+        border: none;
+        background: none;
+        padding: 0;
+        margin: 0 5px;
     }
 
     // Hint toggle text
     #globalsearch-togglehints {
         font-size: $font-size-small;
-        margin: 0;
+        margin: 0 10px;
 
        @include icon('before', 'arr_1right', 'clickable', $font-size-small, 2px);
 
@@ -69,6 +72,7 @@
             + #globalsearch-hints {
                 display: block;
                 white-space: normal !important;
+                margin: 0 10px;
             }
         }
     }
@@ -80,10 +84,13 @@
         color: var(--text-color);
         display: none;
         max-height: 90vh;
-        overflow: auto;
-        padding: 5px;
+        overflow: hidden;
+        padding: 10px 5px;
         position: absolute;
-        width: $width;
+        width: 410px;
+        top: 36px;
+        margin-left: -5px;
+        border-radius: var(--border-radius-default);
 
         a {
             color: var(--base-color);
@@ -97,7 +104,6 @@
             color: var(--text-color);
 
             header {
-                color: var(--base-color);
                 margin: 5px 5px 0;
             }
 
@@ -108,8 +114,27 @@
             }
         }
     }
-    &.is-visible #globalsearch-list {
-        display: block;
+
+    &.is-visible {
+        width: 400px;
+        background-color: var(--white);
+
+        #globalsearch-input {
+            background-color: var(--white);
+            color: var(--color--font-primary);
+    
+            &::placeholder {
+                color: var(--color--font-primary);
+            }
+        }
+
+        #globalsearch-icon {
+            filter: brightness(0) saturate(100%) invert(25%) sepia(7%) saturate(6410%) hue-rotate(181deg) brightness(95%) contrast(88%);
+        }
+
+        #globalsearch-list {
+            display: block;
+        }
     }
 
     // "Searching..." info
@@ -137,15 +162,17 @@
     }
 
     #globalsearch-results {
+        margin-top: 1em;
+        height: 50vh;
+        overflow: auto;
+
         &:empty {
             display: none;
         }
 
         article {
             border: 1px solid var(--content-color-40);
-            margin: 3px;
-            margin-bottom: 8px;
-            margin-top: 8px;
+            margin: 0 10px 10px 10px;
 
             > header {
                 background-color: var(--content-color-20);
diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss
index b4268cd..44d1951 100644
--- a/resources/assets/stylesheets/scss/header.scss
+++ b/resources/assets/stylesheets/scss/header.scss
@@ -207,7 +207,7 @@
     }
 
     #avatar-menu {
-        height: 26px;
+        height: 28px;
         margin: 0;
         z-index: 1003;
 
@@ -216,14 +216,14 @@
             padding: 1px 1px 1px 0;
 
             .action-menu-icon {
-                height: 24px;
+                height: 26px;
                 position: relative;
-                width: 24px;
+                width: 26px;
                 z-index: 1;
 
                 img {
-                    height: 24px;
-                    width: 24px;
+                    height: 26px;
+                    width: 26px;
                     border-top-right-radius: var(--border-radius-avatar-menu);
                     border-bottom-right-radius: var(--border-radius-avatar-menu);
                 }
diff --git a/resources/assets/stylesheets/scss/messages.scss b/resources/assets/stylesheets/scss/messages.scss
index a3849d6..8642fc7 100644
--- a/resources/assets/stylesheets/scss/messages.scss
+++ b/resources/assets/stylesheets/scss/messages.scss
@@ -85,6 +85,15 @@ form.default {
     > * {
         margin-right: 1em;
     }
+
+    .multi_person_search_link {
+        line-height: 30px;
+
+        img {
+            vertical-align: middle;
+            margin-top: -2px;
+        }
+    }
 }
 
 ul.message-options {
diff --git a/resources/assets/stylesheets/scss/multi_person_search.scss b/resources/assets/stylesheets/scss/multi_person_search.scss
index e1e6270..2b2efd1 100755
--- a/resources/assets/stylesheets/scss/multi_person_search.scss
+++ b/resources/assets/stylesheets/scss/multi_person_search.scss
@@ -6,3 +6,46 @@
         }
     }
 }
+
+.mpscontainer {
+    label.with-action {
+        .search-wrapper {
+            border: solid thin var(--color--input-field-border);
+            border-radius: var(--border-radius-search);
+            width: 290px;
+            padding: 0 5px;
+
+            &:focus-within {
+                border-color: var(--black);
+            }
+
+            input[type=text] {
+                border: none;
+                outline: none;
+                width: 220px;
+                vertical-align: text-bottom;
+                padding: 0 5px;
+                margin: 0;
+                line-height: $font-size-base;
+            }
+
+            .icon-button {
+                width: 30px;
+                height: 30px;
+                padding: 0 0 0 5px;
+
+                &.search {
+                    border-left: solid thin var(--color--input-field-border);
+                }
+            }
+
+            .reset-search {
+                visibility: hidden;
+                &.visible {
+                    visibility: visible;
+                }
+            }
+        }
+    }
+    
+}
\ No newline at end of file
diff --git a/resources/assets/stylesheets/scss/mvv.scss b/resources/assets/stylesheets/scss/mvv.scss
index 48b063b..a6c7275 100644
--- a/resources/assets/stylesheets/scss/mvv.scss
+++ b/resources/assets/stylesheets/scss/mvv.scss
@@ -1,26 +1,6 @@
 #index_filter {
-    label.mvv-name-search {
-        display: block;
-        input[type="text"] {
-            box-sizing: border-box;
-            border: 1px solid var(--base-color-60);
-            border-right-width: 30px;
-            float: left;
-            height: 22px;
-            width: 100%;
-        }
-
-        input[type="submit"] {
-            @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 {
+        margin-bottom: 0.5em;
     }
 }
 
diff --git a/resources/assets/stylesheets/scss/oer.scss b/resources/assets/stylesheets/scss/oer.scss
index 4d70adf..b8732e7 100644
--- a/resources/assets/stylesheets/scss/oer.scss
+++ b/resources/assets/stylesheets/scss/oer.scss
@@ -255,7 +255,6 @@ ul.reviews, ol.reviews {
         display: flex;
 
         .frame {
-            border: thin solid var(--content-color-40);
             display: flex;
             justify-content: space-between;
             align-items: stretch;
@@ -281,8 +280,6 @@ ul.reviews, ol.reviews {
 
             button {
                 border-right: none;
-                border-bottom: none;
-                border-top: none;
                 height: 35px;
                 &.active {
                     background-color: var(--base-color);
@@ -294,19 +291,28 @@ ul.reviews, ol.reviews {
             }
 
             input {
+                border: thin solid var(--color--input-field-border);
+                border-top-left-radius: var(--border-radius-search);
+                border-bottom-left-radius: var(--border-radius-search);
+                border-right: none;
                 padding-left: 10px;
-                border: none;
                 width: 100%;
             }
         }
 
         button {
-            border: thin solid var(--content-color-40);
-            background-color: var(--content-color-20);
+            border: thin solid var(--color--input-field-border);
+            background-color: var(--color--button-background);
             display: flex;
             align-items: center;
             justify-content: center;
             width: 35px;
+
+            &.button-search {
+                border-right: thin solid var(--color--input-field-border);
+                border-top-right-radius: var(--border-radius-search);
+                border-bottom-right-radius: var(--border-radius-search);
+            }
         }
 
         > button {
diff --git a/resources/assets/stylesheets/scss/personal-notifications.scss b/resources/assets/stylesheets/scss/personal-notifications.scss
index 610d626..ada6054 100644
--- a/resources/assets/stylesheets/scss/personal-notifications.scss
+++ b/resources/assets/stylesheets/scss/personal-notifications.scss
@@ -8,7 +8,7 @@
     font-size: 12px;
     color: var(--color--font-primary);
     text-align: center;
-    line-height: 26px;
+    line-height: 28px;
     border: none;
     border-radius: var(--border-radius-avatar-menu);
     background-color: var(--color--global-background);
@@ -19,8 +19,8 @@
     border-radius: var(--border-radius-avatar-menu);
     $list-width: 400px;
 
-    width: 26px;
-    height: 26px;
+    width: 28px;
+    height: 28px;
     color: var(--base-color);
     vertical-align: text-bottom;
     position: relative;
diff --git a/resources/assets/stylesheets/scss/quicksearch.scss b/resources/assets/stylesheets/scss/quicksearch.scss
index ef6c372..f91af93 100644
--- a/resources/assets/stylesheets/scss/quicksearch.scss
+++ b/resources/assets/stylesheets/scss/quicksearch.scss
@@ -16,13 +16,15 @@ input.quicksearchbox {
 
 div.quicksearch_frame {
     text-indent: 0;
+    flex-grow: 1;
 
     input[type="text"] {
         box-sizing: border-box;
-        border-width: 1px 30px 1px 1px;
+        border-width: 1px;
         border-style: solid;
-        border-color: var(--base-color-60);
+        border-color: var(--color--input-field-border);
         border-image: none;
+        border-radius: var(--border-radius-search);
         display: inline-block !important;
     }
 
@@ -37,14 +39,15 @@ div.quicksearch_frame {
         text-shadow: none;
         background-color: transparent;
         border: 0;
-        width: 29px;
-        height: 24px;
-        @include background-icon(search, info_alt);
+        width: 36px;
+        height: 30px;
+        @include background-icon(search);
         background-position: center;
         background-repeat: no-repeat;
         vertical-align: middle;
-        margin-left: -32px;
+        margin-left: -40px;
         margin-top: 1px;
+        border-left: solid thin var(--color--input-field-border);
     }
 }
 
diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss
index 2760549..1fcd1ce 100644
--- a/resources/assets/stylesheets/scss/sidebar.scss
+++ b/resources/assets/stylesheets/scss/sidebar.scss
@@ -341,24 +341,27 @@ select.sidebar-selectlist {
 
                 input[type=text] {
                     box-sizing: border-box;
-                    border: 1px solid var(--dark-gray-color-30);
+                    border: 1px solid var(--color--input-field-border);
                     border-right: none;
                     flex: 1;
                     padding: .25em .5em;
                     width: 100%;
                     order: 1;
+                    border-top-left-radius: var(--border-radius-search);
+                    border-bottom-left-radius: var(--border-radius-search);
                 }
 
                 .submit-search {
-                    background-color: var(--content-color-20);
-                    border: 1px solid var(--dark-gray-color-30);
-                    border-left-color: var(--light-gray-color-40);
+                    background-color: var(--color--button-background);
+                    border: 1px solid var(--color--input-field-border);
                     border-radius: 0;
                     color: transparent;
                     cursor: pointer;
                     font: 0/0 a;
                     text-shadow: none;
                     order: 3;
+                    border-top-right-radius: var(--border-radius-search);
+                    border-bottom-right-radius: var(--border-radius-search);
                 }
 
                 .reset-search {
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index 77de353..a31456e 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -60,6 +60,7 @@ $transition-duration-superslow: 1s;
 // Border radius:
 $border-radius: 4px;
 $border-radius-avatar-menu: 7px;
+$border-radius-search: 7px;
 
 // Layout
 $page-margin: 15px;
@@ -301,6 +302,7 @@ $grid-gap: 0;
 
     --border-radius-default: #{$border-radius};
     --border-radius-avatar-menu: #{$border-radius-avatar-menu};
+    --border-radius-search: #{$border-radius-search};
 
     @media (prefers-reduced-motion) {
         #{"--"}transition-duration: 0s;
diff --git a/resources/vue/components/StudipMultiPersonSearch.vue b/resources/vue/components/StudipMultiPersonSearch.vue
index 195a2ea..5a0cf9d 100644
--- a/resources/vue/components/StudipMultiPersonSearch.vue
+++ b/resources/vue/components/StudipMultiPersonSearch.vue
@@ -2,13 +2,15 @@
     <div class="mpscontainer studip-msp-vue">
         <form method="post" class="default" @submit.prevent="search">
             <label class="with-action">
-                <input type="text" ref="searchInputField" v-model="searchTerm" :placeholder="$gettext('Suchen')" style="width: 260px;">
-                <a href="#" class="msp-btn" @click.prevent="search" :title="$gettext('Suche starten')">
-                    <studip-icon shape="search" />
-                </a>
-                <a href="#" class="msp-btn" @click.prevent="resetSearch" :title="$gettext('Suche zurücksetzen')">
-                    <studip-icon shape="decline" />
-                </a>
+                <div class="search-wrapper">
+                    <input type="text" ref="searchInputField" v-model="searchTerm" :placeholder="$gettext('Suchen')" >
+                    <button :class="{ visible: showResetButton }" class="icon-button enter-accessible msp-btn reset-search" @click.prevent="resetSearch" :title="$gettext('Suche zurücksetzen')">
+                        <studip-icon shape="decline" class="text-bottom" />
+                    </button>
+                    <button class="icon-button enter-accessible msp-btn search" @click.prevent="search" :title="$gettext('Suche starten')">
+                        <studip-icon shape="search" class="text-bottom"/>
+                    </button>
+                </div>
             </label>
             <select multiple="multiple" :id="select_box_id" name="selectbox[]"></select>
         </form>
@@ -51,6 +53,9 @@ export default {
         select_box_id() {
             return this.id + '_selectbox';
         },
+        showResetButton() {
+            return this.searchTerm !== '';
+        }
     },
     methods: {
         init() {