[DDW] Fix Stake pools screen UI/UX issues

input-output-hk · Oct 26, 2020 · b1a78d5 · b1a78d5
1 parent 3fa6bcd
commit b1a78d5
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 262 deletions.
diff --git a/source/renderer/app/components/staking/stake-pools/StakePools.js b/source/renderer/app/components/staking/stake-pools/StakePools.js
@@ -65,14 +65,15 @@ type State = {
   selectedList?: ?string,
   isGridView: boolean,
   isListView: boolean,
-  isFixed: boolean,
-  isHeaderFixed: boolean,
-  isScrolled: boolean,
-  maintainFixed: boolean,
+  isTableHeaderHovered: boolean,
 };
 
 const initialState = {
+  search: '',
   selectedList: null,
+  isGridView: true,
+  isListView: false,
+  isTableHeaderHovered: false,
 };
 
 @observer
@@ -83,64 +84,33 @@ export default class StakePools extends Component<Props, State> {
     intl: intlShape.isRequired,
   };
 
-  state = {
-    search: '',
-    isGridView: true,
-    isListView: false,
-    isFixed: false,
-    isHeaderFixed: false,
-    isScrolled: false,
-    maintainFixed: false,
-    ...initialState,
-  };
+  state = { ...initialState };
+
+  handleSearch = (search: string) => this.setState({ search });
+
+  handleClearSearch = () => this.setState({ search: '' });
 
-  handleSearch = (search: string) =>
-    this.setState((prevState) => ({
-      search,
-      maintainFixed: prevState.isFixed,
-    }));
-  handleClearSearch = () =>
-    this.setState({ search: '', maintainFixed: false, isFixed: false });
   handleGridView = () =>
     this.setState({
       isGridView: true,
       isListView: false,
-      isFixed: false,
-      maintainFixed: false,
-      isScrolled: false,
-      isHeaderFixed: false,
     });
+
   handleListView = () =>
     this.setState({
       isGridView: false,
       isListView: true,
-      isFixed: false,
-      maintainFixed: false,
-      isScrolled: false,
-      isHeaderFixed: false,
     });
-  handleSearchComponentScrollView = (
-    isScrolled: boolean,
-    isHeaderFixed: boolean
-  ) => {
-    if (isHeaderFixed) {
-      this.setState((prevState) => ({
-        isFixed: !prevState.isFixed,
-        isScrolled,
-        isHeaderFixed,
-      }));
-    } else {
-      this.setState(() => ({
-        isFixed: !(!isScrolled && !isHeaderFixed),
-        isScrolled,
-        isHeaderFixed: false,
-      }));
-    }
-  };
 
   handleSetListActive = (selectedList: string) =>
     this.setState({ selectedList });
 
+  handleTableHeaderMouseEnter = () =>
+    this.setState({ isTableHeaderHovered: true });
+
+  handleTableHeaderMouseLeave = () =>
+    this.setState({ isTableHeaderHovered: false });
+
   onDelegate = (poolId: string) => {
     const { onDelegate } = this.props;
     onDelegate(poolId);
@@ -168,10 +138,7 @@ export default class StakePools extends Component<Props, State> {
       selectedList,
       isListView,
       isGridView,
-      isFixed,
-      isHeaderFixed,
-      maintainFixed,
-      isScrolled,
+      isTableHeaderHovered,
     } = this.state;
 
     const filteredStakePoolsList: Array<StakePool> = getFilteredStakePoolsList(
@@ -202,14 +169,6 @@ export default class StakePools extends Component<Props, State> {
       isLoading ? styles.isLoading : null,
     ]);
 
-    const tableHeadingClasses = classnames([
-      styles.tableHeading,
-      isFixed && filteredStakePoolsList.length
-        ? styles.tableHeadingFixed
-        : null,
-      isHeaderFixed ? styles.tableHeadingFixedPosition : null,
-    ]);
-
     return (
       <div className={componentClasses}>
         {isLoading ? (
@@ -221,7 +180,9 @@ export default class StakePools extends Component<Props, State> {
           <Fragment>
             <BackToTopButton
               scrollableElementClassName="StakingWithNavigation_page"
+              scrollTopToActivate={isListView ? 400 : 340}
               buttonTopPosition={isListView ? 184 : 144}
+              isForceHidden={isTableHeaderHovered}
             />
             <StakePoolsRanking
               wallets={wallets}
@@ -244,11 +205,7 @@ export default class StakePools extends Component<Props, State> {
               onListView={this.handleListView}
               isListView={isListView}
               isGridView={isGridView}
-              isFixed={
-                (isFixed || maintainFixed) && !!filteredStakePoolsList.length
-              }
               isClearTooltipOpeningDownward
-              isScrolled={isScrolled}
             />
             {stakePoolsDelegatingList.length > 0 && (
               <Fragment>
@@ -271,7 +228,7 @@ export default class StakePools extends Component<Props, State> {
             )}
             {isListView && (
               <Fragment>
-                <h2 className={tableHeadingClasses}>
+                <h2>
                   <FormattedMessage
                     {...listTitleMessage}
                     values={{
@@ -291,11 +248,8 @@ export default class StakePools extends Component<Props, State> {
                   onSelect={this.onDelegate}
                   numberOfRankedStakePools={numberOfRankedStakePools}
                   showWithSelectButton
-                  onScrollView={this.handleSearchComponentScrollView}
-                  maintainFixed={
-                    maintainFixed && !!filteredStakePoolsList.length
-                  }
-                  isScrolled={isScrolled}
+                  onTableHeaderMouseEnter={this.handleTableHeaderMouseEnter}
+                  onTableHeaderMouseLeave={this.handleTableHeaderMouseLeave}
                 />
               </Fragment>
             )}

diff --git a/source/renderer/app/components/staking/stake-pools/StakePools.scss b/source/renderer/app/components/staking/stake-pools/StakePools.scss
@@ -31,15 +31,5 @@
     margin: 20px 0 10px;
     opacity: 0.5;
     padding-left: 20px;
-
-    &.tableHeading {
-      &.tableHeadingFixed {
-        margin-top: 91px;
-      }
-
-      &.tableHeadingFixedPosition {
-        margin-top: 131px;
-      }
-    }
   }
 }
diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsList.js b/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
@@ -57,9 +57,7 @@ export class StakePoolsList extends Component<Props, State> {
     window.addEventListener('resize', this.handleResize);
   }
 
-  state = {
-    ...initialState,
-  };
+  state = { ...initialState };
 
   // We need to track the mounted state in order to avoid calling
   // setState promise handling code after the component was already unmounted:

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
@@ -42,8 +42,6 @@ type Props = {
   onGridView?: Function,
   onListView?: Function,
   search: string,
-  isFixed?: boolean,
-  isScrolled?: boolean,
 };
 
 export class StakePoolsSearch extends Component<Props> {
@@ -73,25 +71,8 @@ export class StakePoolsSearch extends Component<Props> {
       isListView,
       isGridView,
       isClearTooltipOpeningDownward,
-      isFixed,
-      isScrolled,
     } = this.props;
 
-    let componentClasses: string = '';
-    if (isScrolled) {
-      componentClasses = classnames([
-        styles.component,
-        isListView && isScrolled ? styles.componentFixedPosition : null,
-      ]);
-    } else {
-      componentClasses = classnames([
-        styles.component,
-        isScrolled && isListView && isFixed
-          ? styles.componentFixedPosition
-          : null,
-      ]);
-    }
-
     const gridButtonClasses = classnames([
       styles.gridView,
       isGridView ? styles.selected : null,
@@ -110,7 +91,7 @@ export class StakePoolsSearch extends Component<Props> {
     ]);
 
     return (
-      <div className={componentClasses}>
+      <div className={styles.component}>
         <div className={styles.container}>
           <SVGInline svg={searchIcon} className={styles.searchIcon} />
           <Input

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss
@@ -4,19 +4,6 @@
   position: initial;
   transition: position 1s ease-out, top 1s ease-out;
   width: 100%;
-
-  &.componentFixedPosition {
-    background-color: var(--theme-main-body-background-color);
-    box-shadow: 0 2.5px 10px 0
-      var(--theme-staking-stake-pool-tooltip-shadow-color);
-    height: 70px;
-    margin-left: -20px;
-    margin-right: -20px;
-    padding: 10px 20px;
-    position: fixed;
-    width: calc(100% - 84px);
-    z-index: 100;
-  }
 }
 
 .container {

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.js b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.js
@@ -149,29 +149,21 @@ type Props = {
   numberOfRankedStakePools: number,
   selectedPoolId?: ?number,
   onOpenExternalLink: Function,
-  maintainFixed?: boolean,
-  isScrolled?: boolean,
   currentLocale: string,
+  onTableHeaderMouseEnter: Function,
+  onTableHeaderMouseLeave: Function,
 };
 
 type State = {
   isPreloading: boolean,
   stakePoolsOrder: string,
   stakePoolsSortBy: string,
-  isFixedTableHeaderActive: boolean,
-  isFixedSearchBarActive: boolean,
-  fixedTableHeaderPosition: number,
-  fixedSearchBarPosition: number,
 };
 
 const initialState = {
   isPreloading: true,
   stakePoolsOrder: 'asc',
   stakePoolsSortBy: 'ranking',
-  isFixedTableHeaderActive: false,
-  isFixedSearchBarActive: false,
-  fixedTableHeaderPosition: 250,
-  fixedSearchBarPosition: 186,
 };
 
 @observer
@@ -185,9 +177,7 @@ export class StakePoolsTable extends Component<Props, State> {
     showWithSelectButton: false,
   };
 
-  state = {
-    ...initialState,
-  };
+  state = { ...initialState };
 
   scrollableDomElement: ?HTMLElement = null;
 
@@ -230,20 +220,15 @@ export class StakePoolsTable extends Component<Props, State> {
       containerClassName,
       numberOfRankedStakePools,
       listName,
-      maintainFixed,
-      isScrolled,
       onSelect,
       selectedPoolId,
       setListActive,
       isListActive,
       currentLocale,
+      onTableHeaderMouseEnter,
+      onTableHeaderMouseLeave,
     } = this.props;
-    const {
-      isPreloading,
-      stakePoolsSortBy,
-      stakePoolsOrder,
-      isFixedTableHeaderActive,
-    } = this.state;
+    const { isPreloading, stakePoolsSortBy, stakePoolsOrder } = this.state;
     const { intl } = this.context;
     const componentClasses = classNames([styles.component, listName]);
 
@@ -253,20 +238,6 @@ export class StakePoolsTable extends Component<Props, State> {
           <LoadingSpinner big />
         </div>
       );
-    let tableHeaderClasses: string = '';
-    if (isScrolled) {
-      tableHeaderClasses = classNames([
-        styles.tableHeader,
-        isScrolled && isFixedTableHeaderActive ? styles.fixedTableHeader : null,
-      ]);
-    } else {
-      tableHeaderClasses = classNames([
-        styles.tableHeader,
-        isScrolled && (isFixedTableHeaderActive || maintainFixed)
-          ? styles.fixedTableHeader
-          : null,
-      ]);
-    }
 
     const sortedStakePoolList = orderBy(
       stakePoolsList.map((stakePool) => {
@@ -414,7 +385,10 @@ export class StakePoolsTable extends Component<Props, State> {
           {sortedStakePoolList.length > 0 && (
             <BorderedBox>
               <table>
-                <thead className={tableHeaderClasses}>
+                <thead
+                  onMouseEnter={onTableHeaderMouseEnter}
+                  onMouseLeave={onTableHeaderMouseLeave}
+                >
                   <tr>
                     <StakePoolsTableHeader
                       availableTableHeaders={availableTableHeaders}