AppBar: added instant containers

[Issue] #1449 [Problem] POC Sticked Instant Control [Solution] - added instant containers in header - added examples in HomeTVApp - tests has been modified for new impelementation Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
Samsung · Oct 14, 2020 · 2ee6b6b · 2ee6b6b
1 parent 907fee7
commit 2ee6b6b
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 20 deletions.
diff --git a/examples/mobile/HomeApp/images/icon.png b/examples/mobile/HomeApp/images/icon.png
diff --git a/examples/mobile/HomeApp/index.html b/examples/mobile/HomeApp/index.html
@@ -14,7 +14,7 @@
 </head>
 <body>
 	<div class="ui-page ui-page-active" id="main">
-		<header data-expanding-enabled="false">
+		<header>
 			<div class="ui-appbar-title-container">
 				<span class="ui-appbar-title">HomeTV App</span>
 			</div>
@@ -33,19 +33,23 @@
 					</option>
 				</select>
 			</div>
+			<div class="ui-appbar-container ui-content-area">
+				<div class="ui-icon">
+					<img src="images/icon.png"/>
+				</div>
+				<span class="ui-title">Control card 1</span>
+				<a href="#open-control-app-1" class="ui-btn" styl="flat" data-inline="true" data-icon="next"></a>
+			</div>
+			<div class="ui-appbar-container ui-content-area">
+				<div class="ui-icon">
+					<img src="images/icon.png"/>
+				</div>
+				<span class="ui-title">Control card 2</span>
+				<a href="#open-control-app-2" class="ui-btn" styl="flat" data-inline="true" data-icon="next"></a>
+			</div>
 		</header>
 		<div class="ui-content">
 			<div id="web-clips"></div>
-			<!-- Home App Plugins -->
-			<!--
-			<div class="ui-card" data-src="webclip/weather/index.html"></div>
-			<div class="ui-card" data-src="webclip/restaurant/index.html"></div>
-			<div class="ui-card" data-src="webclip/tv-remote-control/"></div>
-			<div class="ui-card" data-src="webclip/apps-on-tv/index.html"></div>
-			<div class="ui-card" data-src="webclip/latest-news/index.html"></div>
-			<div class="ui-card" data-src="webclip/now-on-tv/"></div>
-			-->
-			<!-- Home App Plugins (end) -->
 
 			<div class="ui-drawer" data-position="left" id="leftDrawer" data-drag-edge="0">
 				<div class="ui-drawer-header">

diff --git a/src/css/profile/mobile/common/appbar.less b/src/css/profile/mobile/common/appbar.less
@@ -259,11 +259,47 @@
 		line-height: 14 * @px_base;
 		margin-left: 18 * @px_base;
 		margin-right: 18 * @px_base;
-		
+
 		input[type="checkbox"].ui-checkbox {
 			margin: 0 0 -3px 0;
 		}
 	}
+
+	.ui-appbar-container {
+		height: 60 * @px_base;
+		display: flex;
+		align-items: center;
+		order: 10;
+		background-color: var(--background-area-color);
+		border-radius: 26 * @px_base;
+		overflow: hidden;
+		box-sizing: border-box;
+		box-shadow: 0 0 0 0.25 * @px_base var(--content-area-line-color) inset;
+
+		> :first-child {
+			margin-left: 24 * @px_base;
+		}
+		.ui-title {
+			flex: 1;
+		}
+
+		.ui-icon {
+			width: 32 * @px_base;
+			height: 32 * @px_base;
+			overflow: hidden;
+			margin-right: 4 * @px_base;
+
+			img {
+				width: 100%;
+			}
+		}
+
+		.ui-btn.ui-btn-icon.ui-btn-icon-only {
+			height: 48 * @px_base;
+			max-width: 48 * @px_base;
+		}
+	}
+
 }
 
 @media all and (min-height: 580px) and (orientation: landscape) {

diff --git a/src/css/profile/mobile/common/icon.less b/src/css/profile/mobile/common/icon.less
@@ -43,6 +43,18 @@
 	}
 	&-right::after {
 		mask-image: url("images/3_Controllers/tw_expander_open_mtrl.svg");
-		transform: translate(-50%, -50%) rotateZ(-90deg);
+	}
+	&-next::after {
+		mask-image: url(images/3_Controllers/tw_expander_close_mtrl.svg);
 	}
 }
+.ui-btn {
+	&.ui-icon {
+		&-next::after, &-right::after {
+			transform: translate(-50%, -50%) rotateZ(90deg);
+		}
+		&-left::after {
+			transform: translate(-50%, -50%) rotateZ(-90deg);
+		}
+	}
+}
diff --git a/src/js/core/widget/core/Appbar.js b/src/js/core/widget/core/Appbar.js
@@ -63,12 +63,14 @@
 						actionButtonsContainer: null,
 						page: null,
 						selectAll: null,
-						bottomBar: null
+						bottomBar: null,
+						instantContainers: []
 					};
 					self._expandedHeight = nominalHeights.EXPANDED;
 					self._appbarState = states.COLLAPSED;
 					self._dragStartingHeight = 0;
 					self._currentHeight = 0;
+					self._instantContainersHeight = 0;
 					self._scrolledToTop = true;
 					self._lockExpanding = false;
 					self._calculateExtendedHight();
@@ -80,6 +82,7 @@
 					title: classPrefix + "-title",
 					leftIconsContainer: classPrefix + "-left-icons-container",
 					actionButtonsContainer: classPrefix + "-action-buttons-container",
+					instantContainer: classPrefix + "-container",
 					titleContainer: classPrefix + "-title-container",
 					hasMultilineTitle: classPrefix + "-has-multiline",
 					hasSubtitle: classPrefix + "-has-subtitle",
@@ -148,11 +151,46 @@
 				var self = this;
 
 				self._createContainers(element);
+				self._findInstantContainers(element);
 				self._readTitleType(element);
 				self._setTitleType(element, self.options.titleType);
 				return element;
 			};
 
+			/**
+			 * Method set new height of appbar if instant container exists
+			 * @param {HTMLElement} element
+			 * @method _findInstantContainers
+			 * @member ns.widget.core.Appbar
+			 * @protected
+			 */
+			prototype._findInstantContainers = function (element) {
+				var self = this,
+					instantContainersHeight = 0,
+					controlsContainer = self._ui.controlsContainer;
+
+				self._ui.instantContainers = [].slice.call(element.querySelectorAll("." + classes.instantContainer));
+
+				// calculate instant containers height
+				element.style.height = "auto";
+				self._ui.instantContainers.forEach(function (container) {
+					instantContainersHeight += container.offsetHeight;
+				});
+
+				// increase height of appbar and change bottom possition of control container
+				if (instantContainersHeight > 0) {
+					self._expandedHeight += instantContainersHeight;
+					self._currentHeight += instantContainersHeight;
+					if (controlsContainer) {
+						controlsContainer.style.bottom = instantContainersHeight + "px";
+					}
+					self._instantContainersHeight = instantContainersHeight
+				}
+
+				// set initial height of collapsed appbar
+				element.style.height = nominalHeights.COLLAPSED + self._instantContainersHeight + "px";
+			};
+
 			/**
 			 * Refresh the widget
 			 * @method _refresh
@@ -181,7 +219,7 @@
 
 				if (screenHeight >= 580 && screenHeight < 960 && screenWidth > screenHeight) { // lanscape
 					self._expandedHeight = screenHeight * 0.3 - bottomMarginHeight;
-				} else if (screenHeight >= 580 && screenHeight < 960 && screenWidth < screenHeight) { // portrait
+				} else if (screenHeight >= 580 && screenHeight < 960 && screenWidth <= screenHeight) { // portrait
 					self._expandedHeight = screenHeight * 0.3967 - bottomMarginHeight;
 				} else if (screenHeight >= 960) {
 					self._expandedHeight = screenHeight * 0.25 - bottomMarginHeight;
@@ -429,7 +467,7 @@
 				var self = this,
 					element = self.element;
 
-				element.style.height = "";
+				element.style.height = self._expandedHeight + "px";
 				element.classList.add(classes.expanded);
 				self._appbarState = states.EXPANDED;
 				self._setTitlesOpacity(1);
@@ -462,8 +500,9 @@
 				var self = this,
 					element = self.element;
 
-				element.style.height = "";
-				self._currentHeight = 0;
+				self._currentHeight = self._instantContainersHeight;
+				element.style.height = nominalHeights.COLLAPSED + self._instantContainersHeight + "px";
+
 				element.classList.remove(classes.expanded);
 				self._appbarState = states.COLLAPSED;
 				self._setTitlesOpacity(0);

diff --git a/tests/js/core/widget/core/Appbar/Appbar.js b/tests/js/core/widget/core/Appbar/Appbar.js
@@ -205,7 +205,7 @@
 
 			widget.collapse();
 
-			assert.equal(widget.element.style.height, "", "collapse: element height has been changed");
+			assert.equal(widget.element.style.height, "56px", "collapse: element height has been changed");
 			assert.equal(widget._currentHeight, 0, "_currentHeight equals 0");
 			assert.ok(!widget.element.classList.contains("ui-appbar-expanded"), "element doesn't contain expanded class");
 			assert.equal(widget._appbarState, "COLLAPSED", "_appbar state is collapsed");
@@ -225,7 +225,7 @@
 
 			widget.expand();
 
-			assert.equal(widget.element.style.height, "", "expand: element height has been changed");
+			assert.notEqual(widget.element.style.height, "56px", "expand: element height has been changed");
 			assert.ok(widget.element.classList.contains("ui-appbar-expanded"), "element contains expanded class");
 			assert.equal(widget._appbarState, "EXPANDED", "_appbar state is expanded");
 		});