feat(ObjectPage): Added Hide Header Button (#28)

Added prop to show a button for hiding header content

Author: TobiasKoehler

packages/fiori3/__karma_snapshots__/ObjectPage.md

@@ -33,7 +33,6 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
         width: '70%',
         boxSizing: 'border-box',
         paddingTop: '1.5rem',
-        paddingBottom: '1.5rem',
         '& $title': {
           fontSize: '1.375rem',
           paddingRight: '1rem',
@@ -76,6 +75,12 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
       }
     },
     '& $headerContent': {
+      paddingTop: '1.5rem',
+      paddingBottom: '0.25rem',
+      transition: 'max-height 0.5s',
+      maxHeight: '500px',
+      overflow: 'hidden',
+
       paddingLeft: '2rem',
       position: 'relative',
       '& $headerImage': {
@@ -96,10 +101,18 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
       }
     }
   },
+  hideHeaderContent: {
+    paddingTop: '0.5rem',
+    marginBottom: '0.5rem',
+    boxShadow: `inset 0 -1px 0 0 ${parameters.sapUiShellBorderColor}`,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
   anchorBar: {
     paddingLeft: '2rem',
     backgroundColor: parameters.sapUiObjectHeaderBackground,
-    boxShadow: `inset 0 -0.125rem ${parameters.sapUiObjectHeaderBackground}`,
+    boxShadow: `inset 0 0.125rem ${parameters.sapUiObjectHeaderBackground}`,
     '& $anchorButtonContainer': {
       display: 'inline-flex',
       '& $anchorButton': {
@@ -156,7 +169,8 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
   headerCustomContent: {},
   anchorButtonContainer: {},
   anchorButton: {},
-  active: {}
+  active: {},
+  hiddenHeader: {}
 });
 
 export default styles;

packages/fiori3/src/components/ObjectPage/ObjectPage.jss.ts

@@ -29,6 +29,7 @@ const renderComponent = (mode = ObjectPageMode.Default) => (
     subTitle="Sub Title"
     headerActions={[<Button key="Actions">Action</Button>]}
     renderHeaderContent={renderHeaderContent}
+    showHideHeaderButton
     mode={mode}
   >
     <ObjectPageSection title="Test 1" id="1">

packages/fiori3/src/components/ObjectPage/ObjectPage.karma.tsx

@@ -40,6 +40,7 @@ const renderDemo = () => {
       renderHeaderContent={renderHeaderContent}
       mode={select('mode', ObjectPageMode, ObjectPageMode.Default)}
       imageShapeCircle={boolean('imageShapeCircle', false)}
+      showHideHeaderButton={boolean('showHideHeaderButton', true)}
       selectedSectionId={text('selectedSectionId', '1')}
       onSelectedSectionChanged={action('onSelectedSectionChanged')}
       style={{ height: '700px' }}

packages/fiori3/src/components/ObjectPage/demo.stories.tsx

@@ -8,6 +8,7 @@ import { scroller } from 'react-scroll';
 import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps';
 import styles from './ObjectPage.jss';
 import { ObjectPageAnchor } from './ObjectPageAnchor';
+import { Button } from '../../lib/Button';
 
 const objectPageContentStyles = ({ parameters }: JSSTheme) => ({
   sectionsContainer: {
@@ -53,6 +54,7 @@ export interface ObjectPagePropTypes extends Fiori3CommonProps {
   mode?: ObjectPageMode;
   selectedSectionId?: string;
   onSelectedSectionChanged?: (event: Event) => void;
+  showHideHeaderButton?: boolean;
 }
 
 interface ObjectPageInternalProps extends ObjectPagePropTypes, ClassProps {}
@@ -62,6 +64,7 @@ interface ObjectPageState {
   prevProps: {
     selectedSectionId: string;
   };
+  showHeader: boolean;
 }
 
 @withStyles(styles)
@@ -74,7 +77,8 @@ export class ObjectPage extends PureComponent<ObjectPagePropTypes, ObjectPageSta
     headerActions: [],
     renderHeaderContent: null,
     mode: ObjectPageMode.Default,
-    onSelectedSectionChanged: () => {}
+    onSelectedSectionChanged: () => {},
+    showHideHeaderButton: false
   };
 
   private objectPage: HTMLElement;
@@ -100,7 +104,8 @@ export class ObjectPage extends PureComponent<ObjectPagePropTypes, ObjectPageSta
     selectedSectionIndex: 0,
     prevProps: {
       selectedSectionId: ''
-    }
+    },
+    showHeader: true
   };
 
   private getFillerDivDomRef = (ref) => {
@@ -240,18 +245,31 @@ export class ObjectPage extends PureComponent<ObjectPagePropTypes, ObjectPageSta
             </span>
           </header>
           {/* Header Content */}
-          <div className={classes.headerContent}>
-            {image && (
-              <span
-                className={classes.headerImage}
-                style={{ borderRadius: imageShapeCircle ? '50%' : 0, overflow: 'hidden' }}
-              >
-                <img src={image} style={{ width: '100%', height: '100%' }} />
-              </span>
+          <div className={classes.headerContentWrapper}>
+            {this.state.showHeader && (
+              <div className={classes.headerContent}>
+                {image && (
+                  <span
+                    className={classes.headerImage}
+                    style={{ borderRadius: imageShapeCircle ? '50%' : 0, overflow: 'hidden' }}
+                  >
+                    <img src={image} style={{ width: '100%', height: '100%' }} />
+                  </span>
+                )}
+                {renderHeaderContent && <span className={classes.headerCustomContent}>{renderHeaderContent()}</span>}
+              </div>
             )}
-            {renderHeaderContent && <span className={classes.headerCustomContent}>{renderHeaderContent()}</span>}
-          </div>
 
+            <div className={classes.hideHeaderContent}>
+              {this.props.showHideHeaderButton && (
+                <Button
+                  style={{ position: 'absolute', '--_ui5_button_compact_height': '1rem', lineHeight: '1.25rem' }}
+                  icon={this.state.showHeader ? 'sap-icon://navigation-up-arrow' : 'sap-icon://navigation-down-arrow'}
+                  onPress={this.changeHeader}
+                />
+              )}
+            </div>
+          </div>
           <section className={classes.anchorBar} role="navigation">
             {Children.map(children, (section, index) => (
               <ObjectPageAnchor
@@ -267,12 +285,15 @@ export class ObjectPage extends PureComponent<ObjectPagePropTypes, ObjectPageSta
             ))}
           </section>
         </header>
-
         <ObjectPageContent getFillerDivDomRef={this.getFillerDivDomRef}>{content}</ObjectPageContent>
       </div>
     );
   }
 
+  private changeHeader = () => {
+    this.setState({ showHeader: !this.state.showHeader });
+  };
+
   private handleOnSubSectionSelected = (index) => (e) => {
     if (this.props.mode === ObjectPageMode.IconTabBar) {
       const scrollId = e.getParameter('props').id;

packages/fiori3/src/components/ObjectPage/index.tsx

@@ -29,7 +29,7 @@ export const sapColorSemanticNeutral = 'hsl(210, 3%, 42.7%)';
 /** The color which builds your brand */
 export const sapUiBrand = '#0a6ed1';
 /** The color which is used to highlight screen elements */
-export const sapUiHighlight = '#0a6ed1';
+export const sapUiHighlight = HSLColor.darken(sapUiBrand, 10).hsl;
 /** The color which is used to derive the most dominant background colors */
 export const sapUiBaseColor = '#ffffff';
 /** The color of the shell header bar */
@@ -133,7 +133,7 @@ export const sapUiButtonDisabledBorderColor = '#666666';
 /** The color of texts on buttons. */
 export const sapUiButtonDisabledTextColor = '#666666';
 /** The background color of buttons on hover. */
-export const sapUiButtonHoverBackground = '#fafafa';
+export const sapUiButtonHoverBackground = HSLColor.lighten(sapUiHighlight, 63).hsl;
 /** The color of a button's borders on hover. */
 export const sapUiButtonHoverBorderColor = '#0a6ed1';
 /** The color of texts on buttons on hover. */