[DDW] Improve "Settings" screen scrolling actions (#2302)

* [DDW-496]: Update scroll view layout of modal dialog component * [DDW-496]: Update changelog * [DDW-496] Merges develop * [DDW-496]: Adjust wallet create modal styles * [DDW-496]: Adjust dialog scrollbar styles * [DDW-496]: Adjust wallet restore dialog styles * [DDW-496]: Adjust wallet delegation dialog styles * [DDW-496]: Adjust change password dialog styles * [DDW-496]: Update translations * [DDW-496] Fix scrollbar issues * [DDW] Fix minor UI/UX issues * [DDW] Adds CHANGELOG Co-authored-by: Yakov Karavelov <yakov.karavelov@iohk.io> Co-authored-by: Aleksandar Djordjevic <aca_eliminator@hotmail.com>
input-output-hk · Jan 14, 2021 · 1214984 · 1214984
1 parent 0a7fe82
commit 1214984
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ Changelog
 
 ### Chores
 
+- Improved "Settings" screen scrolling actions ([PR 2302](https://github.com/input-output-hk/daedalus/pull/2302))
 - Improved scrollable dialogs ([PR 2285](https://github.com/input-output-hk/daedalus/pull/2285))
 - Disabled and hid copy and paste context menu items on some scenarios ([PR 2300](https://github.com/input-output-hk/daedalus/pull/2300))
 - Applied validation to spending password to be not longer than 255 characters ([PR 2287](https://github.com/input-output-hk/daedalus/pull/2287))

diff --git a/source/renderer/app/components/settings/SettingsLayout.js b/source/renderer/app/components/settings/SettingsLayout.js
@@ -7,10 +7,29 @@ import styles from './SettingsLayout.scss';
 type Props = {
   children: Node,
   menu: Node,
+  activePage: string,
 };
 
 @observer
 export default class SettingsLayout extends Component<Props> {
+  scrollableDomElement: ?HTMLElement = null;
+
+  componentDidMount() {
+    this.scrollableDomElement = document.querySelector(
+      '.SettingsLayout_settingsPaneWrapper'
+    );
+  }
+
+  componentDidUpdate(prevProps) {
+    const didActivePageChange = this.props.activePage !== prevProps.activePage;
+    if (
+      this.scrollableDomElement instanceof HTMLElement &&
+      didActivePageChange
+    ) {
+      this.scrollableDomElement.scrollTop = 0;
+    }
+  }
+
   render() {
     const { menu, children } = this.props;
     return (

diff --git a/source/renderer/app/components/wallet/transactions/WalletTransactionsList.scss b/source/renderer/app/components/wallet/transactions/WalletTransactionsList.scss
@@ -67,5 +67,5 @@
 
 .showMoreTransactionsButton {
   display: block !important;
-  margin: 30px auto;
+  margin: 30px auto 20px;
 }
diff --git a/source/renderer/app/containers/settings/Settings.js b/source/renderer/app/containers/settings/Settings.js
@@ -27,7 +27,8 @@ export default class Settings extends Component<InjectedContainerProps> {
 
   render() {
     const { isFlight } = global;
-    const { actions, children } = this.props;
+    const { actions, children, stores } = this.props;
+    const { location } = stores.router;
     const menu = (
       <SettingsMenu
         isFlight={isFlight}
@@ -37,7 +38,9 @@ export default class Settings extends Component<InjectedContainerProps> {
     );
     return (
       <Layout>
-        <SettingsLayout menu={menu}>{children}</SettingsLayout>
+        <SettingsLayout menu={menu} activePage={location.pathname}>
+          {children}
+        </SettingsLayout>
       </Layout>
     );
   }

diff --git a/storybook/stories/settings/utils/SettingsWrapper.js b/storybook/stories/settings/utils/SettingsWrapper.js
@@ -38,7 +38,9 @@ export default (story: Object, context: Object) => {
     <StoryDecorator>
       <StoryProvider>
         <StoryLayout activeSidebarCategory="/settings" {...context}>
-          <SettingsLayout menu={menu}>{storyWithKnobs}</SettingsLayout>
+          <SettingsLayout menu={menu} activePage="/settings">
+            {storyWithKnobs}
+          </SettingsLayout>
         </StoryLayout>
       </StoryProvider>
     </StoryDecorator>