Merge "[Enact Browser] Fix the end of pages gets cut when bookmarkbar is shown"

Author: SkylerBaek

samples/enact-based/src/views/BookmarkManager/BookmarkManager.js

@@ -15,6 +15,7 @@ import $L from '@enact/i18n/$L';
 import Button from '@enact/moonstone/Button';
 import {connect} from 'react-redux';
 import Notification from '@enact/moonstone/Notification';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import Scroller from '@enact/moonstone/Scroller';
@@ -27,6 +28,7 @@ import css from './BookmarkManager.module.less';
 class BookmarkManagerBase extends Component {
 
 	static propTypes = {
+		alwaysShowBookmarks: PropTypes.bool,
 		browser: PropTypes.object,
 		data: PropTypes.array,
 		selectedIndices: PropTypes.array,
@@ -85,7 +87,10 @@ class BookmarkManagerBase extends Component {
 	}
 
 	render () {
-		const {browser, data, hasSelection, ...rest} = this.props;
+		const
+			{alwaysShowBookmarks, browser, data, hasSelection, ...rest} = this.props,
+			scrollerClass = classNames(css.scroller, {[css.shrinkHeight]: alwaysShowBookmarks});
+
 		delete rest.selectedIndices;
 		delete rest.selectAllBookmarks;
 		delete rest.deselectAllBookmarks;
@@ -114,7 +119,7 @@ class BookmarkManagerBase extends Component {
 				</Notification>
 				{
 					(data.length > 0) ?
-					<Scroller horizontalScrollbar="hidden" className={css.list}>
+					<Scroller horizontalScrollbar="hidden" className={scrollerClass}>
 						<BookmarkList browser={browser}/>
 					</Scroller>
 					:

samples/enact-based/src/views/BookmarkManager/BookmarkManager.module.less

@@ -22,9 +22,13 @@
 	});
 }
 
-.list {
+.scroller {
 	height: ~"calc(100vh - " 200px + @moon-button-height + 36px ~")";
 	padding: 20px 10px 10px 10px;
+	&.shrinkHeight {
+		// shirnk as much as bookmarkbar height (84px)
+		height: ~"calc(100vh - " 200px + @moon-button-height + 36px + 84px ~")";
+	}
 }
 
 .noItem {

samples/enact-based/src/views/ContentView/ContentItem.js

@@ -74,12 +74,12 @@ const ContentItem = kind({
             case TabTypes.SITE_FILTERING:
                 return <SiteFiltering style={style} browser={browser} />;
             case TabTypes.BOOKMARKS:
-                return <BookmarkManager style={style} browser={browser} />;
+                return <BookmarkManager style={style} alwaysShowBookmarks={alwaysShowBookmarks} browser={browser} />;
             case TabTypes.HISTORY:
-                return <History style={style} browser={browser} isSelectedTab={isSelectedTab} />;
+                return <History style={style} alwaysShowBookmarks={alwaysShowBookmarks} browser={browser} isSelectedTab={isSelectedTab} />;
         }
     }
 });
 
 export default ContentItem;
-export {ContentItem};
+export {ContentItem};

samples/enact-based/src/views/History/History.js

@@ -15,6 +15,7 @@ import $L from '@enact/i18n/$L';
 import Button from '@enact/moonstone/Button';
 import {connect} from 'react-redux';
 import Notification from '@enact/moonstone/Notification';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import ri from '@enact/ui/resolution';
@@ -29,6 +30,7 @@ import css from './History.module.less';
 class HistoryBase extends Component {
 
 	static propTypes = {
+		alwaysShowBookmarks: PropTypes.bool,
 		browser: PropTypes.object,
 		data: PropTypes.array,
 		deselectAllHistory: PropTypes.func,
@@ -159,7 +161,10 @@ class HistoryBase extends Component {
 	}
 
 	render () {
-		const {data, hasSelection, ...rest} = this.props;
+		const
+			{alwaysShowBookmarks, data, hasSelection, ...rest} = this.props,
+			listClass = classNames(css.list, {[css.shrinkHeight]:alwaysShowBookmarks});
+
 
 		delete rest.browser;
 		delete rest.deselectAllHistory;
@@ -195,7 +200,7 @@ class HistoryBase extends Component {
 							dataSize={this.viewData.length}
 							focusableScrollbar
 							itemRenderer={this.renderItem}
-							className={css.list}
+							className={listClass}
 							itemSize={ri.scale(70)}
 						/>
 					: <div>{$L('There is no history.')}</div>

samples/enact-based/src/views/History/History.module.less

@@ -26,4 +26,8 @@
 	height: ~"calc(100vh - " 200px + @moon-button-height + 36px ~")";
 	padding: 10px;
 	margin-top: 20px;
+	&.shrinkHeight {
+		// shirnk as much as bookmarkbar height (84px)
+		height: ~"calc(100vh - " 200px + @moon-button-height + 36px + 84px ~")";
+	}
 }

samples/enact-based/src/views/Settings/Settings.js

@@ -163,16 +163,17 @@ class SettingsBase extends Component {
 				privateBrowsing,
 				...rest
 			} = this.props,
-			classes = classNames(className, css.settings),
+			scrollerClass = classNames(css.scroller, {[css.shrinkHeight]: alwaysShowBookmarks}),
+			settingContentsClass= classNames(className, css.settings),
 			startupOption = startupOptions.indexOf(startupPage);
 
 		delete rest.browser;
 		delete rest.dispatch;
 		delete rest.homePageUrl;
 
 		return (
-			<Scroller {...rest} className={css.scroller}>
-				<div className={classes}>
+			<Scroller {...rest} className={scrollerClass}>
+				<div className={settingContentsClass}>
 					<BodyText>{$L('On Startup')}</BodyText>
 					<div className={css.indent}>
 						<Group

samples/enact-based/src/views/Settings/Settings.module.less

@@ -4,6 +4,10 @@
 
 .scroller {
 	height: ~"calc(100vh - " 236px ~")";
+	&.shrinkHeight {
+		// shirnk as much as bookmarkbar height (84px)
+		height: ~"calc(100vh - " 238px + 84px ~")";
+	}
 }
 
 .settings {