feat: Show "more button" disabled instead of hiding it (#323)

* Disable "show more" button instead of hiding it * Update snapshot * Update styles according to the latest specs
dhis2 · May 22, 2019 · 28396c3 · 28396c3
1 parent 875e9ec
commit 28396c3
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 28 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2019-05-07T10:46:49.139Z\n"
-"PO-Revision-Date: 2019-05-07T10:46:49.139Z\n"
+"POT-Creation-Date: 2019-05-22T08:39:03.062Z\n"
+"PO-Revision-Date: 2019-05-22T08:39:03.062Z\n"
 
 msgid "Dashboard"
 msgstr ""
@@ -41,10 +41,10 @@ msgstr ""
 msgid "Search for a dashboard"
 msgstr ""
 
-msgid "Show less"
+msgid "Show more"
 msgstr ""
 
-msgid "Show more"
+msgid "Show less"
 msgstr ""
 
 msgid "No access"

diff --git a/src/components/ControlBar/DashboardsBar.js b/src/components/ControlBar/DashboardsBar.js
@@ -124,12 +124,11 @@ export class DashboardsBar extends Component {
                         />
                     ))}
                 </div>
-                {this.props.userRows !== MAX_ROW_COUNT ? (
-                    <ShowMoreButton
-                        onClick={this.onToggleMaxHeight}
-                        isMaxHeight={this.state.isMaxHeight}
-                    />
-                ) : null}
+                <ShowMoreButton
+                    onClick={this.onToggleMaxHeight}
+                    isMaxHeight={this.state.isMaxHeight}
+                    disabled={this.props.userRows === MAX_ROW_COUNT}
+                />
             </ControlBar>
         );
     }

diff --git a/src/components/ControlBar/ShowMoreButton.js b/src/components/ControlBar/ShowMoreButton.js
@@ -1,30 +1,40 @@
 import React from 'react';
 import i18n from '@dhis2/d2-i18n';
+import { colors } from '@dhis2/ui-core';
 import { withStyles } from '@material-ui/core/styles';
 
-import { colors } from '../../modules/colors';
-
 export const SHOWMORE_BAR_HEIGHT = 16;
 
 const styles = {
     showMore: {
-        color: colors.royalBlue,
+        color: colors.grey700,
         cursor: 'pointer',
         fontSize: 11,
-        fontWeight: 700,
-        height: SHOWMORE_BAR_HEIGHT,
         paddingTop: 5,
-        textTransform: 'uppercase',
-        visibility: 'visible',
+        '&:hover': {
+            textDecoration: 'underline',
+        },
+    },
+    disabled: {
+        paddingTop: 5,
+        color: colors.grey500,
+        fontSize: 11,
+        cursor: 'not-allowed',
     },
 };
 
-export const ShowMoreButton = ({ onClick, isMaxHeight, classes }) => (
-    <div style={{ textAlign: 'center' }}>
-        <div className={classes.showMore} onClick={onClick}>
-            {isMaxHeight ? i18n.t('Show less') : i18n.t('Show more')}
+export const ShowMoreButton = ({ onClick, isMaxHeight, classes, disabled }) => {
+    return (
+        <div style={{ textAlign: 'center' }}>
+            {disabled ? (
+                <div className={classes.disabled}>{i18n.t('Show more')}</div>
+            ) : (
+                <div className={classes.showMore} onClick={onClick}>
+                    {isMaxHeight ? i18n.t('Show less') : i18n.t('Show more')}
+                </div>
+            )}
         </div>
-    </div>
-);
+    );
+};
 
 export default withStyles(styles)(ShowMoreButton);
diff --git a/src/components/ControlBar/__tests__/ConfirmDeleteDialog.spec.js b/src/components/ControlBar/__tests__/ConfirmDeleteDialog.spec.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Button } from '@dhis2/ui-core';
 import DialogActions from '@material-ui/core/DialogActions';
 import { ConfirmDeleteDialog } from '../ConfirmDeleteDialog';
 import { getStubContext } from '../../../setupTests';

diff --git a/src/components/ControlBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap b/src/components/ControlBar/__tests__/__snapshots__/DashboardsBar.spec.js.snap
@@ -52,7 +52,11 @@ ShallowWrapper {
             />
           </div>
         </div>,
-        null,
+        <WithStyles(ShowMoreButton)
+          disabled={true}
+          isMaxHeight={true}
+          onClick={[Function]}
+        />,
       ],
       "editMode": false,
       "height": 424,
@@ -169,7 +173,19 @@ ShallowWrapper {
         ],
         "type": "div",
       },
-      null,
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "disabled": true,
+          "isMaxHeight": true,
+          "onClick": [Function],
+        },
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
+      },
     ],
     "type": [Function],
   },
@@ -210,7 +226,11 @@ ShallowWrapper {
               />
             </div>
           </div>,
-          null,
+          <WithStyles(ShowMoreButton)
+            disabled={true}
+            isMaxHeight={true}
+            onClick={[Function]}
+          />,
         ],
         "editMode": false,
         "height": 424,
@@ -327,7 +347,19 @@ ShallowWrapper {
           ],
           "type": "div",
         },
-        null,
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "disabled": true,
+            "isMaxHeight": true,
+            "onClick": [Function],
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
       ],
       "type": [Function],
     },
@@ -426,6 +458,7 @@ ShallowWrapper {
           </div>
         </div>,
         <WithStyles(ShowMoreButton)
+          disabled={false}
           isMaxHeight={false}
           onClick={[Function]}
         />,
@@ -550,6 +583,7 @@ ShallowWrapper {
         "key": undefined,
         "nodeType": "class",
         "props": Object {
+          "disabled": false,
           "isMaxHeight": false,
           "onClick": [Function],
         },
@@ -598,6 +632,7 @@ ShallowWrapper {
             </div>
           </div>,
           <WithStyles(ShowMoreButton)
+            disabled={false}
             isMaxHeight={false}
             onClick={[Function]}
           />,
@@ -722,6 +757,7 @@ ShallowWrapper {
           "key": undefined,
           "nodeType": "class",
           "props": Object {
+            "disabled": false,
             "isMaxHeight": false,
             "onClick": [Function],
           },
@@ -827,6 +863,7 @@ ShallowWrapper {
           </div>
         </div>,
         <WithStyles(ShowMoreButton)
+          disabled={false}
           isMaxHeight={false}
           onClick={[Function]}
         />,
@@ -951,6 +988,7 @@ ShallowWrapper {
         "key": undefined,
         "nodeType": "class",
         "props": Object {
+          "disabled": false,
           "isMaxHeight": false,
           "onClick": [Function],
         },
@@ -999,6 +1037,7 @@ ShallowWrapper {
             </div>
           </div>,
           <WithStyles(ShowMoreButton)
+            disabled={false}
             isMaxHeight={false}
             onClick={[Function]}
           />,
@@ -1123,6 +1162,7 @@ ShallowWrapper {
           "key": undefined,
           "nodeType": "class",
           "props": Object {
+            "disabled": false,
             "isMaxHeight": false,
             "onClick": [Function],
           },
@@ -1254,6 +1294,7 @@ ShallowWrapper {
           />
         </div>,
         <WithStyles(ShowMoreButton)
+          disabled={false}
           isMaxHeight={false}
           onClick={[Function]}
         />,
@@ -1419,6 +1460,7 @@ ShallowWrapper {
         "key": undefined,
         "nodeType": "class",
         "props": Object {
+          "disabled": false,
           "isMaxHeight": false,
           "onClick": [Function],
         },
@@ -1479,6 +1521,7 @@ ShallowWrapper {
             />
           </div>,
           <WithStyles(ShowMoreButton)
+            disabled={false}
             isMaxHeight={false}
             onClick={[Function]}
           />,
@@ -1644,6 +1687,7 @@ ShallowWrapper {
           "key": undefined,
           "nodeType": "class",
           "props": Object {
+            "disabled": false,
             "isMaxHeight": false,
             "onClick": [Function],
           },