From 30bb4fdf5f276b719e197059eabc5d3333c91d58 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 28 Aug 2021 16:58:07 +0100
Subject: [PATCH] :globe_with_meridians: Adds note for web search

---
 src/assets/locales/en.json            |  3 +-
 src/components/Settings/SearchBar.vue | 45 +++++++++++++++++++++------
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 2fd79825..e5adcce1 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -6,7 +6,8 @@
   "search": {
     "search-label": "Search",
     "search-placeholder": "Start typing to filter",
-    "clear-search-tooltip": "Clear Search"
+    "clear-search-tooltip": "Clear Search",
+    "enter-to-search-web": "Press enter to search the web"
   },
   "login": {
     "title": "Dashy",
diff --git a/src/components/Settings/SearchBar.vue b/src/components/Settings/SearchBar.vue
index 8fbf4877..7979e3b3 100644
--- a/src/components/Settings/SearchBar.vue
+++ b/src/components/Settings/SearchBar.vue
@@ -1,13 +1,18 @@
 <template>
   <form @submit.prevent="searchSubmitted">
     <label for="filter-tiles">{{ $t('search.search-label') }}</label>
-    <input
-      id="filter-tiles"
-      v-model="input"
-      ref="filter"
-      :placeholder="$t('search.search-placeholder')"
-      v-on:input="userIsTypingSomething"
-      @keydown.esc="clearFilterInput" />
+    <div class="search-wrap">
+      <input
+        id="filter-tiles"
+        v-model="input"
+        ref="filter"
+        :placeholder="$t('search.search-placeholder')"
+        v-on:input="userIsTypingSomething"
+        @keydown.esc="clearFilterInput" />
+        <p v-if="webSearchEnabled && input.length > 0" class="web-search-note">
+          {{ $t('search.enter-to-search-web') }}
+        </p>
+      </div>
       <i v-if="input.length > 0"
         class="clear-search"
         :title="$t('search.clear-search-tooltip')"
@@ -35,6 +40,15 @@ export default {
       getCustomKeyShortcuts,
     };
   },
+  computed: {
+    webSearchEnabled() {
+      const { appConfig } = this.config;
+      if (appConfig && appConfig.webSearch) {
+        return !appConfig.webSearch.disableWebSearch;
+      }
+      return true;
+    },
+  },
   mounted() {
     window.addEventListener('keydown', (event) => {
       const currentElem = document.activeElement.id;
@@ -97,7 +111,7 @@ export default {
       // Get search preferences from appConfig
       const { appConfig } = this.config;
       const searchPrefs = appConfig.webSearch || {};
-      if (!searchPrefs.disableWebSearch) { // Only proceed if user hasn't disabled web search
+      if (this.webSearchEnabled) { // Only proceed if user hasn't disabled web search
         const openingMethod = searchPrefs.openingMethod || defaultSearchOpeningMethod;
         // Get search engine, and make URL
         const searchEngine = searchPrefs.searchEngine || defaultSearchEngine;
@@ -131,6 +145,17 @@ export default {
     border-radius: 0 0 var(--curve-factor-navbar) 0;
     padding: 0 0.2rem 0.2rem 0;
     background: var(--search-container-background);
+    .search-wrap {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      p.web-search-note {
+        margin: 0 0.5rem;
+        font-size: 0.8rem;
+        color: var(--minimal-view-search-color);
+        opacity: var(--dimming-factor);
+      }
+    }
     label {
         display: inline;
         color: var(--search-label-color);
@@ -157,7 +182,7 @@ export default {
     .clear-search {
       //position: absolute;
       color: var(--settings-text-color);
-      padding: 0 0.4rem;
+      padding: 0 0.3rem 0.1rem 0.3rem;
       font-style: normal;
       font-size: 1rem;
       opacity: var(--dimming-factor);
@@ -167,7 +192,7 @@ export default {
       top: 1rem;
       border: 1px solid var(--settings-text-color);
       font-size: 1rem;
-      margin: 0.5rem;
+      margin: 0.25rem;
       &:hover {
         opacity: 1;
         background: var(--background-darker);