feat: add #143

src/components/modals/main/settings/sections/Search.jsx

@@ -78,6 +78,7 @@ export default class SearchSettings extends PureComponent {
         {(navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined') ? 
           <Checkbox name='voiceSearch' text={search.voice_search} category='search'/> 
         : null}
+        <Checkbox name='searchDropdown' text={search.dropdown} category='search' element='.other'/>
         <Dropdown label={search.search_engine} name='searchEngine' onChange={(value) => this.setSearchEngine(value)}>
           {searchEngines.map((engine) => (
             <option key={engine.name} value={engine.settingsName}>{engine.name}</option>

src/components/widgets/search/Search.jsx

@@ -21,7 +21,8 @@ export default class Search extends PureComponent {
       autocompleteQuery: '',
       autocompleteCallback: '',
       microphone: null,
-      suggestions: []
+      suggestions: [],
+      searchDropdown: 'none'
     };
     this.language = window.language.widgets.search;
   }
@@ -112,7 +113,40 @@ export default class Search extends PureComponent {
       autocompleteURL: autocompleteURL,
       autocompleteQuery: autocompleteQuery,
       autocompleteCallback: autocompleteCallback,
-      microphone: microphone
+      microphone: microphone,
+      currentSearch: info.name
+    });
+  }
+
+  toggleDropdown() {
+    if (this.state.searchDropdown === 'none') {
+      this.setState({
+        searchDropdown: 'block'
+      });
+    } else {
+      this.setState({
+        searchDropdown: 'none'
+      });
+    }
+  }
+
+  setSearch(name) {
+    let url;
+    let query = 'q';
+    const info = searchEngines.find((i) => i.name === name);
+
+    if (info !== undefined) {
+      url = info.url;
+      if (info.query) {
+        query = info.query;
+      }
+    }
+
+    this.setState({
+      url: url,
+      query: query,
+      currentSearch: name,
+      searchDropdown: 'none'
     });
   }
 
@@ -133,6 +167,23 @@ export default class Search extends PureComponent {
   render() {
     return (
       <form onSubmit={this.searchButton} className='searchBar'>
+        {localStorage.getItem('searchDropdown') === 'true' ? 
+        <div className='searchDropdown'>
+          <span className='searchSelected' onClick={() => this.toggleDropdown()}>{this.state.currentSearch}</span>
+          <div className='searchOptions' style={{ display: this.state.searchDropdown }}>
+            {searchEngines.map((engine) => {
+              if (engine.name === this.state.currentSearch) {
+                return null;
+              }
+              return (
+                <>
+                  <span className='searchSelected' onClick={() => this.setSearch(engine.name)}>{engine.name}</span>
+                  <br/>
+                </>
+              );
+            })}
+          </div>
+        </div> : null}
         {this.state.microphone}
         <SearchIcon onClick={this.searchButton}/>
         <AutocompleteInput placeholder={this.language} id='searchtext' suggestions={this.state.suggestions} onChange={(e) => this.getSuggestions(e)} onClick={this.searchButton}/>

src/components/widgets/search/search.scss

@@ -49,6 +49,15 @@
   }
 }
 
+.searchDropdown {
+  display: inline-block;
+  font-size: calc(5px + 1.2vmin);
+
+  .searchSelected {
+    cursor: pointer;
+  }
+}
+
 .micIcon {
   margin-right: 10px;
   position: relative !important;

src/translations/de_DE.json

@@ -193,7 +193,8 @@
             "custom": "Abfrage-URL",
             "autocomplete": "Autocomplete",
             "autocomplete_provider": "Autocomplete Provider",
-            "voice_search": "Sprachsuche"
+            "voice_search": "Sprachsuche",
+            "dropdown": "Search dropdown"
           },
           "weather": {
             "title": "Wetter",

src/translations/en_GB.json

@@ -193,7 +193,8 @@
             "custom": "Custom search URL",
             "autocomplete": "Autocomplete",
             "autocomplete_provider": "Autocomplete Provider",
-            "voice_search": "Voice search"
+            "voice_search": "Voice search",
+            "dropdown": "Search dropdown"
           },
           "weather": {
             "title": "Weather",

src/translations/en_US.json

@@ -193,7 +193,8 @@
             "custom": "Custom search URL",
             "autocomplete": "Autocomplete",
             "autocomplete_provider": "Autocomplete Provider",
-            "voice_search": "Voice search"
+            "voice_search": "Voice search",
+            "dropdown": "Search dropdown"
           },
           "weather": {
             "title": "Weather",

src/translations/es.json

@@ -193,7 +193,8 @@
             "custom": "URL de búsqueda personalizada",
             "autocomplete": "Autocompletado",
             "autocomplete_provider": "Proveedor del autocompletado",
-            "voice_search": "Búsqueda por voz"
+            "voice_search": "Búsqueda por voz",
+            "dropdown": "Search dropdown"
           },
           "weather": {
             "title": "Clima",

src/translations/fr.json

@@ -193,7 +193,8 @@
             "custom": "URL de recherche personnalisée",
             "autocomplete": "Autocomplete",
             "autocomplete_provider": "Autocomplete Provider",
-            "voice_search": "Recherche vocale"
+            "voice_search": "Recherche vocale",
+            "dropdown": "Search dropdown"
           },
           "weather": {
             "title": "Météo",

src/translations/nl.json

@@ -193,7 +193,8 @@
             "custom": "Aangepaste zoekmachine-url",
             "autocomplete": "Autocomplete",
             "autocomplete_provider": "Autocomplete Provider",
-            "voice_search": "Spraakgestuurd zoeken gebruiken"
+            "voice_search": "Spraakgestuurd zoeken gebruiken",
+            "dropdown": "Search dropdown"
           },
           "weather": {
             "title": "Weather",

src/translations/no.json

@@ -193,7 +193,8 @@
             "custom": "Custom search URL",
             "autocomplete": "Autocomplete",
             "autocomplete_provider": "Autocomplete Provider",
-            "voice_search": "Voice search"
+            "voice_search": "Voice search",
+            "dropdown": "Search dropdown"
           },
           "weather": {
             "title": "Weather",

src/translations/ru.json

@@ -193,7 +193,8 @@
             "custom": "Пользовательский поисковый движок",
             "autocomplete": "Autocomplete",
             "autocomplete_provider": "Autocomplete Provider",
-            "voice_search": "Поиск голосом"
+            "voice_search": "Поиск голосом",
+            "dropdown": "Search dropdown"
           },
           "weather": {
             "title": "Weather",

src/translations/zh_CN.json

@@ -193,7 +193,8 @@
             "custom": "自定义搜索链接",
             "autocomplete": "Autocomplete",
             "autocomplete_provider": "Autocomplete Provider",
-            "voice_search": "语音搜索"
+            "voice_search": "语音搜索",
+            "dropdown": "Search dropdown"
           },
           "weather": {
             "title": "天气",