added search filter info

Wikimedia-Austria · Jun 26, 2023 · 0310518 · 0310518
1 parent ee7644d
commit 0310518
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 83 deletions.
diff --git a/src/components/Dashboard/Sidebar/Filter/FilterTitle.jsx b/src/components/Dashboard/Sidebar/Filter/FilterTitle.jsx
@@ -1,17 +1,17 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { connect } from 'react-redux';
-import { toggleFilterMenu } from 'redux/actions/menu';
-import { FormattedMessage } from 'react-intl';
-import CategoryFilter from './CategoryFilter';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import { connect } from "react-redux";
+import { toggleFilterMenu } from "redux/actions/menu";
+import { FormattedMessage } from "react-intl";
+import CategoryFilter from "./CategoryFilter";
 
 class FilterTitle extends Component {
   static propTypes = {
     items: PropTypes.object,
     showFilterMenu: PropTypes.bool,
     filtersActive: PropTypes.bool,
-
+    searchFilter: PropTypes.string,
     dispatch: PropTypes.func,
   };
 
@@ -28,61 +28,77 @@ class FilterTitle extends Component {
   }
 
   render() {
-    const { items, showFilterMenu, filtersActive } = this.props;
+    const { items, showFilterMenu, filtersActive, searchFilter } = this.props;
 
     const ButtonClass = classNames({
-      'FilterButton': true,
-      'FilterButton--open': showFilterMenu,
-      'FilterButton--filtersActive': filtersActive,
+      FilterButton: true,
+      "FilterButton--open": showFilterMenu,
+      "FilterButton--filtersActive": filtersActive,
     });
 
     return (
-      <header className='FilterTitle'>
-        <h2>
-          <FormattedMessage
-            id='filter.itemCount'
-            description='Title of the Filter Menu'
-            defaultMessage='{itemCount, plural,
-                =0 {keine Objekte}
-                one {1 Objekte}
-                other {{itemCount} Objekte}
-            }'
-            values={ {
-              itemCount: items ? items.size : 0,
-            } }
-          />
-        </h2>
+      <header className="FilterTitle">
+        <div className="FilterTitle-Left">
+          <h2>
+            <FormattedMessage
+              id="filter.itemCount"
+              description="Title of the Filter Menu"
+              defaultMessage="{itemCount, plural,
+                  =0 {keine Objekte}
+                  one {1 Objekte}
+                  other {{itemCount} Objekte}
+              }"
+              values={{
+                itemCount: items ? items.size : 0,
+              }}
+            />
+          </h2>
+          {searchFilter && (
+            <span>
+              <strong>
+                <FormattedMessage
+                  id="filter.searchInfo"
+                  description="Title of the Search Message"
+                  defaultMessage="Suche:"
+                />
+              </strong>{" "}
+              {searchFilter}
+            </span>
+          )}
+        </div>
 
         <div className="FilterTitle-Right">
-          <CategoryFilter asIcons={ true } />
+          <CategoryFilter asIcons={true} />
 
-          <button
-            className={ ButtonClass }
-            onClick={ this.toggle }
-          >
+          <button className={ButtonClass} onClick={this.toggle}>
             <FormattedMessage
-              id='filter.filterButtonTitle'
-              description='Title of the Filter Menu Toggle-Button'
-              defaultMessage='Liste filtern'
+              id="filter.filterButtonTitle"
+              description="Title of the Filter Menu Toggle-Button"
+              defaultMessage="Liste filtern"
             />
           </button>
         </div>
       </header>
     );
   }
-
 }
 
-export default connect(state => {
-  let filtersActive = false;
-  const activeFilters = state.app.get('activeFilters');
-  const categories = state.app.get('categories');
+export default connect(
+  (state) => {
+    let filtersActive = false;
+    const activeFilters = state.app.get("activeFilters");
+    const searchFilter = state.app.get("searchFilter");
+    const categories = state.app.get("categories");
 
-  if (activeFilters.size > 0) filtersActive = true;
-  if (categories.find((c) => !c.get('show'))) filtersActive = true;
+    if (activeFilters.size > 0) filtersActive = true;
+    if (categories.find((c) => !c.get("show"))) filtersActive = true;
 
-  return {
-    showFilterMenu: state.menu.get('showFilterMenu'),
-    filtersActive,
-  };
-}, null, null)(FilterTitle);
+    return {
+      showFilterMenu: state.menu.get("showFilterMenu"),
+      filtersActive,
+      searchFilter,
+    };
+  },
+  null,
+  null
+)(FilterTitle);
diff --git a/src/components/Global/Header/LanguageSwitch.jsx b/src/components/Global/Header/LanguageSwitch.jsx
@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { setLanguage } from 'redux/actions/locale';
-import Dropdown from 'react-dropdown';
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import { setLanguage } from "redux/actions/locale";
+import Dropdown from "react-dropdown";
 
-import languages from 'translations/languages.json';
+import languages from "translations/languages.json";
 
 class LanguageSwitch extends Component {
   static propTypes = {
@@ -30,19 +30,17 @@ class LanguageSwitch extends Component {
 
     return (
       <Dropdown
-        value={ currentLanguage }
-        onChange={ this.handleChange }
-        placeholder="TEST"
-        options={ languages.map((l) => ({
+        value={currentLanguage}
+        onChange={this.handleChange}
+        options={languages.map((l) => ({
           value: l.locale,
           label: l.locale,
-        })) }
+        }))}
       />
     );
   }
-
 }
 
-export default connect(state => ({
-  currentLanguage: state.locale.get('language'),
+export default connect((state) => ({
+  currentLanguage: state.locale.get("language"),
 }))(LanguageSwitch);
diff --git a/src/scss/components/_dropdown.scss b/src/scss/components/_dropdown.scss
@@ -65,7 +65,7 @@
   display: block;
   padding: 1.5rem 1rem;
   font-size: 1.5rem;
-  font-weight: bold
+  font-weight: bold;
 }
 
 .Dropdown-option:last-child {

diff --git a/src/scss/components/_filters.scss b/src/scss/components/_filters.scss
@@ -9,24 +9,33 @@
   align-items: center;
   padding: 1rem 0.5rem 0.75rem;
 
-  h2 {
+  .FilterTitle-Left {
     flex: 1;
-    margin: 0;
     text-shadow:
-      2px 2px 0 rgba(255, 255, 255, 0.7),
-      0 2px 0 rgba(255, 255, 255, 0.7),
-      2px 0 0 rgba(255, 255, 255, 0.7),
-      -2px -2px 0 rgba(255, 255, 255, 0.7),
-      0 -2px 0 rgba(255, 255, 255, 0.7),
-      -2px 0 0 rgba(255, 255, 255, 0.7),
+      2px 2px 2px rgba(255, 255, 255, 0.7),
+      0 2px 2px rgba(255, 255, 255, 0.7),
+      2px 0 2px rgba(255, 255, 255, 0.7),
+      -2px -2px 2px rgba(255, 255, 255, 0.7),
+      0 -2px 2px rgba(255, 255, 255, 0.7),
+      -2px 0 2px rgba(255, 255, 255, 0.7);
+
+    h2, span {
+      margin: 0;
+      color: $primary-color;
+    }
+
+    span {
+      display: block;
+      font-size: 0.85rem;
+      margin-top: -.4em;
+    }
   }
 
   .FilterTitle-Right {
     display: flex;
     padding: 0.25rem;
     background-color: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(2px);
-    align-items: asdasd;
 
     @include shadow-box;
   }
@@ -188,10 +197,10 @@
       text-decoration: none;
       transition:opacity .2s, background-color .2s;
       text-align:left;
-      font-size: 1.2rem;
+      font-size: 0.95rem;
 
       @include md {
-        font-size: 1.3rem;
+        font-size: 1rem;
       }
     }
 
@@ -252,15 +261,15 @@
 
 .PropertyFilter {
   display:flex;
-  flex-wrap: wrap;
+  gap: 0.5rem;
 
   button.PropertyFilter-Item {
     position: relative;
-    width:100%;
+    flex: 1;
     background-color: $primary-color;
     color: $primary-color-contrast;
     text-align: left;
-    font-size: 1.3em;
+    font-size: 0.95em;
     padding: 0.5em 0 0.5em 0.5em;
     margin-bottom: .5em;
     transition: background-color .2s ease;

diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
@@ -69,11 +69,12 @@
 
         @include shadow-box;
       }
-      .Dropdown-placeholder {
-        font-size: .7em;
+      .Dropdown-placeholder,
+      .Dropdown-option {
+        font-size: 1.25rem;
 
         @include md {
-          font-size: 1em;
+          font-size: 1.5rem;
         }
       }
     }

diff --git a/src/translations/locales/de.json b/src/translations/locales/de.json
@@ -4,7 +4,7 @@
   "category.denkmalliste": "Denkmale",
   "category.kellergasse": "Kellergassen",
   "category.naturdenkmal": "Natur",
-  "category.publicart": "Public Art",
+  "category.publicart": "Public Art / Culture",
   "category.request": "Weiteres",
   "cityinfo.editWikiLink": "Wikipedia-Artikel bearbeiten",
   "cityinfo.editWikiLinkDescription": "Fehlende Abschnitte: {missingSectionsCount, plural, =0 {keine} other {}}",
@@ -27,13 +27,14 @@
   "filter.filterButtonTitle": "Liste filtern",
   "filter.finishedButton": "Fertig",
   "filter.itemCount": "{itemCount, plural, =0 {keine Objekte} one {1 Objekt} other {{itemCount} Objekte}}",
-  "filter.missingDescription": "Fehlende Beschreibung",
-  "filter.missingImages": "Fehlende Bilder",
+  "filter.missingDescription": "Beschreibung fehlt",
+  "filter.missingImages": "Bilder fehlen",
   "filter.noresults": "Kein Objekt entspricht deinen Kriteren. Versuche die Filtereinstellungen zu ändern.",
   "filter.propertyFilterTitle": "Eigenschaften",
   "filter.resultssorting": "Objekte werden analysiert...",
   "filter.title": "Filter",
   "filter.searchItem": "Objekt suchen...",
+  "filter.searchInfo": "Suche:",
   "gdpr.cookietext": "WikiDaheim verwendet Cookies. Mit dem verwenden der App stimmst du diesen zu.",
   "header.logoAlt": "WikiDaheim-Logo",
   "item.createArticle": "Artikel anlegen",

diff --git a/src/translations/locales/en.json b/src/translations/locales/en.json
@@ -4,7 +4,7 @@
   "category.denkmalliste": "Monuments",
   "category.kellergasse": "Cellar streets",
   "category.naturdenkmal": "Nature",
-  "category.publicart": "Public Art",
+  "category.publicart": "Public Art / Kultur",
   "category.request": "Point of Interest",
   "cityinfo.editWikiLink": "Edit article on Wikipedia",
   "cityinfo.editWikiLinkDescription": "Missing topics: {missingSectionsCount, plural, =0 {none} other {}}",
@@ -34,6 +34,7 @@
   "filter.resultssorting": "Objects are being analysed...",
   "filter.title": "Filter",
   "filter.searchItem": "Search item...",
+  "filter.searchInfo": "Search:",
   "gdpr.cookietext": "WikiDaheim uses cookies. By using the app you agree to this usage.",
   "header.logoAlt": "Logo of WikiDaheim",
   "item.createArticle": "create article",