[#3862] Fixed icons and improved animations (#3863)

airyhq · Oct 20, 2022 · 88128aa · 88128aa
1 parent c5770c5
commit 88128aa
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 94 deletions.
diff --git a/frontend/control-center/src/components/TopBar/index.module.scss b/frontend/control-center/src/components/TopBar/index.module.scss
@@ -269,5 +269,5 @@
 }
 
 .animateOut {
-  animation: topbarDropdownOut 300ms ease;
+  animation: topbarDropdownOut 300ms forwards;
 }
diff --git a/frontend/control-center/src/pages/Catalog/CatalogSearchBar/CatalogSearchBar.module.scss b/frontend/control-center/src/pages/Catalog/CatalogSearchBar/CatalogSearchBar.module.scss
@@ -1,5 +1,6 @@
 @import 'assets/scss/fonts.scss';
 @import 'assets/scss/colors.scss';
+@import 'assets/scss/animations.scss';
 
 .container {
   display: flex;
@@ -32,39 +33,17 @@
 }
 
 .searchField {
-  width: 200px;
+  width: 300px;
   background: var(--color-background-white);
   border: 1px solid var(--color-airy-blue);
   border-radius: 4px;
+  height: 32px;
 
   svg {
     color: black;
   }
 }
 
-@keyframes animateFilterModalIn {
-  0% {
-    transform: translateX(200px);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateX(0px);
-    opacity: 1;
-  }
-}
-
-@keyframes animateFilterModalOut {
-  0% {
-    transform: translateX(0px);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(200px);
-    opacity: 0;
-  }
-}
-
 .filterModal {
   position: absolute;
   top: 170px;
@@ -75,5 +54,13 @@
   animation: animateFilterModalIn 500ms ease;
 }
 .filterModalAnimOut {
-  animation: animateFilterModalOut 500ms ease;
+  animation: animateFilterModalOut 500ms forwards;
+}
+
+.animateIn {
+  animation: searchfieldAnimIn 300ms ease;
+}
+
+.animateOut {
+  animation: searchfieldAnimOut 300ms forwards;
 }
diff --git a/frontend/control-center/src/pages/Catalog/CatalogSearchBar/CatalogSearchBar.tsx b/frontend/control-center/src/pages/Catalog/CatalogSearchBar/CatalogSearchBar.tsx
@@ -20,24 +20,30 @@ export const CatalogSearchBar = (props: CatalogSearchBarProps) => {
   const [showSearchField, setShowingSearchField] = useState(false);
   const [showFilter, setShowFilter] = useState(false);
   const [animationAction, setAnimationAction] = useState(false);
+  const [animationActionSearchfield, setAnimationActionSearchfield] = useState(false);
 
   const toggleShowFilter = useCallback(() => {
     useAnimation(showFilter, setShowFilter, setAnimationAction, 500);
   }, [showFilter, setShowFilter]);
 
+  const showSearchFieldToggle = useCallback(() => {
+    useAnimation(showSearchField, setShowingSearchField, setAnimationActionSearchfield, 300);
+    setQuery('');
+    props.setQuery('');
+  }, [showSearchField, setShowingSearchField]);
+
   useEffect(() => {
     props.setCurrentFilter(currentFilter);
   }, [currentFilter]);
 
-  const handleSearchClick = () => setShowingSearchField(!showSearchField);
-
   return (
     <div className={styles.container}>
       <div className={styles.iconContainer}>
         {showSearchField ? (
-          <ListenOutsideClick onOuterClick={showSearchField && handleSearchClick}>
+          <ListenOutsideClick onOuterClick={showSearchFieldToggle}>
             <SearchField
               autoFocus
+              animation={animationActionSearchfield ? styles.animateIn : styles.animateOut}
               className={styles.searchField}
               placeholder={t('searchByNamePlaceholder')}
               value={query}
@@ -47,7 +53,7 @@ export const CatalogSearchBar = (props: CatalogSearchBarProps) => {
             />
           </ListenOutsideClick>
         ) : (
-          <SearchIcon height={20} width={20} className={styles.searchIcon} onClick={handleSearchClick} />
+          <SearchIcon height={20} width={20} className={styles.searchIcon} onClick={showSearchFieldToggle} />
         )}
         <FilterIcon
           height={24}

diff --git a/frontend/control-center/src/pages/Connectors/ConnectedChannelsList/index.module.scss b/frontend/control-center/src/pages/Connectors/ConnectedChannelsList/index.module.scss
@@ -170,10 +170,11 @@
 }
 
 .searchField {
-  min-width: 300px;
-  animation: searchFieldAnimation 300ms ease;
+  width: 300px;
   height: 32px;
-  border-radius: 32px;
+  background: var(--color-background-white);
+  border: 1px solid var(--color-airy-blue);
+  border-radius: 4px;
 }
 
 .connectChannelModalHeader {
@@ -226,16 +227,10 @@
   color: var(--color-dark-elements-gray);
 }
 
-.searchInput {
-  background: var(--color-background-white);
-  border: 1px solid var(--color-airy-blue);
-  border-radius: 4px;
-}
-
 .animateIn {
   animation: searchfieldAnimIn 300ms ease;
 }
 
 .animateOut {
-  animation: searchfieldAnimOut 300ms ease;
+  animation: searchfieldAnimOut 300ms forwards;
 }
diff --git a/frontend/control-center/src/pages/Connectors/ConnectedChannelsList/index.tsx b/frontend/control-center/src/pages/Connectors/ConnectedChannelsList/index.tsx
@@ -110,18 +110,17 @@ const ConnectedChannelsList = (props: ConnectedChannelsListProps) => {
     <div className={styles.wrapper}>
       <div className={styles.searchFieldContainer}>
         <div className={styles.searchFieldButtons}>
-          <div className={styles.searchField}>
-            {showingSearchField && (
-              <SearchField
-                className={`${styles.searchInput} ${animationAction ? styles.animateIn : styles.animateOut}`}
-                placeholder={t('search')}
-                value={searchText}
-                setValue={(value: string) => setSearchText(value)}
-                autoFocus={true}
-                resetClicked={() => setSearchText('')}
-              />
-            )}
-          </div>
+          {showingSearchField && (
+            <SearchField
+              className={styles.searchField}
+              animation={animationAction ? styles.animateIn : styles.animateOut}
+              placeholder={t('search')}
+              value={searchText}
+              setValue={(value: string) => setSearchText(value)}
+              autoFocus={true}
+              resetClicked={() => setSearchText('')}
+            />
+          )}
         </div>
         <div className={styles.buttons}>
           <button onClick={showSearchFieldToggle}>

diff --git a/frontend/inbox/src/components/TopBar/index.module.scss b/frontend/inbox/src/components/TopBar/index.module.scss
@@ -263,5 +263,5 @@
 }
 
 .animateOut {
-  animation: topbarDropdownOut 300ms ease;
+  animation: topbarDropdownOut 300ms forwards;
 }
diff --git a/frontend/inbox/src/pages/Contacts/ContactInformation/index.module.scss b/frontend/inbox/src/pages/Contacts/ContactInformation/index.module.scss
@@ -170,7 +170,7 @@
 }
 
 .fadeOutAnimation {
-  animation: fadeOutTranslateXLeft 500ms ease;
+  animation: fadeOutTranslateXLeft 500ms forwards;
 }
 
 .editIcon {

diff --git a/frontend/inbox/src/pages/Inbox/ConversationListHeader/index.module.scss b/frontend/inbox/src/pages/Inbox/ConversationListHeader/index.module.scss
@@ -1,3 +1,5 @@
+@import 'assets/scss/animations.scss';
+
 .containerSearch {
   display: flex;
   width: 100%;
@@ -27,15 +29,6 @@
   animation-fill-mode: forwards;
 }
 
-@keyframes searchFieldAnimation {
-  0% {
-    width: 0%;
-  }
-  100% {
-    width: 100%;
-  }
-}
-
 .backIcon {
   cursor: pointer;
   height: 13px;
@@ -53,10 +46,18 @@
   padding-right: 14px;
 }
 
-.searchFieldWidth {
+.searchField {
   width: 100%;
 }
 
+.animateIn {
+  animation: searchfieldAnimIn 400ms ease;
+}
+
+.animateOut {
+  animation: searchfieldAnimOut 400ms forwards;
+}
+
 .searchBox {
   color: black;
   background: var(--color-background-white);
@@ -106,6 +107,7 @@
   height: 24px;
   width: 24px;
   margin-left: 12px;
+  color: var(--color-text-gray);
   &:hover {
     svg {
       path {

diff --git a/frontend/inbox/src/pages/Inbox/ConversationListHeader/index.tsx b/frontend/inbox/src/pages/Inbox/ConversationListHeader/index.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {connect, ConnectedProps} from 'react-redux';
 
 import {SearchField} from 'components';
@@ -16,6 +16,7 @@ import {cySearchButton, cySearchField, cySearchFieldBackButton} from 'handles';
 import Popup from '../QuickFilter/Popup';
 import {formatConversationCount} from '../../../services/format/numbers';
 import {useTranslation} from 'react-i18next';
+import {useAnimation} from 'render';
 
 const mapDispatchToProps = {
   setSearch,
@@ -37,25 +38,19 @@ const ConversationListHeader = (props: ConversationListHeaderProps) => {
   const {t} = useTranslation();
 
   const [isShowingSearchInput, setIsShowingSearchInput] = useState(false);
+  const [animationAction, setAnimationAction] = useState(false);
   const [searchText, setSearchText] = useState('');
   const [isFilterOpen, setIsFilterOpen] = useState(false);
 
   useEffect(() => {
     resetFilteredConversationAction();
   }, [resetFilteredConversationAction]);
 
-  const onClickSearch = () => {
-    if (isShowingSearchInput) {
-      setSearch(currentFilter, null);
-    }
-    setIsShowingSearchInput(!isShowingSearchInput);
-  };
-
-  const onClickBack = () => {
-    setSearch(currentFilter, null);
-    setIsShowingSearchInput(!isShowingSearchInput);
+  const showSearchFieldToggle = useCallback(() => {
+    useAnimation(isShowingSearchInput, setIsShowingSearchInput, setAnimationAction, 400);
     setSearchText('');
-  };
+    setSearch(currentFilter, null);
+  }, [isShowingSearchInput, setIsShowingSearchInput]);
 
   const handleSearch = (value: string) => {
     setSearch(currentFilter, value);
@@ -86,25 +81,30 @@ const ConversationListHeader = (props: ConversationListHeaderProps) => {
 
   const renderSearchInput = isShowingSearchInput ? (
     <div className={styles.containerSearchField}>
-      <button type="button" className={styles.backButton} onClick={onClickBack} data-cy={cySearchFieldBackButton}>
+      <button
+        type="button"
+        className={styles.backButton}
+        onClick={showSearchFieldToggle}
+        data-cy={cySearchFieldBackButton}
+      >
         <BackIcon className={styles.backIcon} />
       </button>
-      <div className={styles.searchFieldWidth}>
-        <SearchField
-          placeholder={t('search')}
-          value={searchText}
-          setValue={setValue}
-          resetClicked={onClickSearch}
-          autoFocus={true}
-          dataCy={cySearchField}
-        />
-      </div>
+      <SearchField
+        className={styles.searchField}
+        animation={animationAction ? styles.animateIn : styles.animateOut}
+        placeholder={t('search')}
+        value={searchText}
+        setValue={setValue}
+        resetClicked={() => setSearchText('')}
+        autoFocus={true}
+        dataCy={cySearchField}
+      />
     </div>
   ) : (
     <div className={styles.containerSearchHeadline}>
       <InboxConversationCount />
       <div className={styles.searchBox}>
-        <button type="button" className={styles.searchButton} onClick={onClickSearch} data-cy={cySearchButton}>
+        <button type="button" className={styles.searchButton} onClick={showSearchFieldToggle} data-cy={cySearchButton}>
           <IconSearch className={styles.searchIcon} title={t('search')} />
         </button>
         <button

diff --git a/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.module.scss b/frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.module.scss
@@ -165,7 +165,7 @@
 }
 
 .fadeOutAnimation {
-  animation: fadeOutTranslateXLeft 500ms ease;
+  animation: fadeOutTranslateXLeft 500ms forwards;
 }
 
 .editIcon {

diff --git a/lib/typescript/assets/scss/animations.scss b/lib/typescript/assets/scss/animations.scss
@@ -41,25 +41,21 @@
 @keyframes searchfieldAnimIn {
   from {
     opacity: 0;
-    transform: translateX(300px);
     width: 0px;
   }
   to {
     opacity: 1;
-    transform: translateX(0px);
     width: 300px;
   }
 }
 
 @keyframes searchfieldAnimOut {
   from {
     opacity: 1;
-    transform: translateX(0px);
     width: 300px;
   }
   to {
     opacity: 0;
-    transform: translateX(300px);
     width: 0px;
   }
 }
@@ -112,3 +108,26 @@
     width: 0;
   }
 }
+
+@keyframes animateFilterModalIn {
+  0% {
+    transform: translateX(200px);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+}
+
+@keyframes animateFilterModalOut {
+  0% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(200px);
+    opacity: 0;
+  }
+}