diff --git a/packages/fiori3/__karma_snapshots__/ObjectPage.md b/packages/fiori3/__karma_snapshots__/ObjectPage.md index 9029703b356..1619f9de348 100644 --- a/packages/fiori3/__karma_snapshots__/ObjectPage.md +++ b/packages/fiori3/__karma_snapshots__/ObjectPage.md @@ -5,9 +5,9 @@ ``` - - - + + +
@@ -29,45 +29,54 @@
-
- -
- - - - www.myurl.com - - - - - - - - Address 1 - - - - - - - - - Address 2 - - - - - - - - - Address 3 - - - - -
- +
+
+ +
+ + + + www.myurl.com + + + + + + + + Address 1 + + + + + + + + + Address 2 + + + + + + + + + Address 3 + + + + +
+ +
+
+ +
@@ -460,9 +469,9 @@ ``` - - - + + +
@@ -484,45 +493,48 @@
-
- -
- - - - www.myurl.com - - - - - - - - Address 1 - - - - - - - - - Address 2 - - - - - - - - - Address 3 - - - - -
- +
+
+ +
+ + + + www.myurl.com + + + + + + + + Address 1 + + + + + + + + + Address 2 + + + + + + + + + Address 3 + + + + +
+ +
+
@@ -672,9 +684,9 @@ ``` - - - + + +
@@ -696,45 +708,54 @@
-
- -
- - - - www.myurl.com - - - - - - - - Address 1 - - - - - - - - - Address 2 - - - - - - - - - Address 3 - - - - -
- +
+
+ +
+ + + + www.myurl.com + + + + + + + + Address 1 + + + + + + + + + Address 2 + + + + + + + + + Address 3 + + + + +
+ +
+
+ +
@@ -956,7 +977,7 @@ #### `Just Some Sections` ``` -

Test
+

Test
``` #### `Not crashing with 1 section` @@ -964,9 +985,9 @@ ``` - - - + + +
@@ -976,7 +997,10 @@
-
+
+
+
+
@@ -1027,9 +1051,9 @@ ``` - - - + + +
@@ -1039,7 +1063,10 @@
-
+
+
+
+
@@ -1064,9 +1091,9 @@ ``` - - - + + +
@@ -1076,7 +1103,10 @@
-
+
+
+
+
diff --git a/packages/fiori3/src/components/ObjectPage/ObjectPage.jss.ts b/packages/fiori3/src/components/ObjectPage/ObjectPage.jss.ts index 6c938502acf..cf9b293c091 100644 --- a/packages/fiori3/src/components/ObjectPage/ObjectPage.jss.ts +++ b/packages/fiori3/src/components/ObjectPage/ObjectPage.jss.ts @@ -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; diff --git a/packages/fiori3/src/components/ObjectPage/ObjectPage.karma.tsx b/packages/fiori3/src/components/ObjectPage/ObjectPage.karma.tsx index 91d5661b771..129e1f4150e 100644 --- a/packages/fiori3/src/components/ObjectPage/ObjectPage.karma.tsx +++ b/packages/fiori3/src/components/ObjectPage/ObjectPage.karma.tsx @@ -29,6 +29,7 @@ const renderComponent = (mode = ObjectPageMode.Default) => ( subTitle="Sub Title" headerActions={[]} renderHeaderContent={renderHeaderContent} + showHideHeaderButton mode={mode} > diff --git a/packages/fiori3/src/components/ObjectPage/demo.stories.tsx b/packages/fiori3/src/components/ObjectPage/demo.stories.tsx index ced2af78ffc..f2920245f8f 100644 --- a/packages/fiori3/src/components/ObjectPage/demo.stories.tsx +++ b/packages/fiori3/src/components/ObjectPage/demo.stories.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' }} diff --git a/packages/fiori3/src/components/ObjectPage/index.tsx b/packages/fiori3/src/components/ObjectPage/index.tsx index b0979dc334e..c2f8cf06e6d 100644 --- a/packages/fiori3/src/components/ObjectPage/index.tsx +++ b/packages/fiori3/src/components/ObjectPage/index.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 {} + onSelectedSectionChanged: () => {}, + showHideHeaderButton: false }; private objectPage: HTMLElement; @@ -100,7 +104,8 @@ export class ObjectPage extends PureComponent { @@ -240,18 +245,31 @@ export class ObjectPage extends PureComponent
{/* Header Content */} -
- {image && ( - - - +
+ {this.state.showHeader && ( +
+ {image && ( + + + + )} + {renderHeaderContent && {renderHeaderContent()}} +
)} - {renderHeaderContent && {renderHeaderContent()}} -
+
+ {this.props.showHideHeaderButton && ( +
+
{Children.map(children, (section, index) => (
- {content}
); } + private changeHeader = () => { + this.setState({ showHeader: !this.state.showHeader }); + }; + private handleOnSubSectionSelected = (index) => (e) => { if (this.props.mode === ObjectPageMode.IconTabBar) { const scrollId = e.getParameter('props').id; diff --git a/packages/styles/src/sap_fiori3_light.ts b/packages/styles/src/sap_fiori3_light.ts index fd19943ace1..f2e3dc3e8d1 100644 --- a/packages/styles/src/sap_fiori3_light.ts +++ b/packages/styles/src/sap_fiori3_light.ts @@ -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. */