Expandable button: added implementation and examples

[Issue] #1336 [Problem] Expandable button: Card type - not implemented, no example [Solution] - new example - extend styles for ui-content-area Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
Samsung · Jul 29, 2020 · a833615 · a833615
1 parent 75b5fcc
commit a833615
Show file tree

Hide file tree

Showing 7 changed files with 160 additions and 48 deletions.
diff --git a/examples/mobile/UIComponents/components/controllers/expand-button.html b/examples/mobile/UIComponents/components/controllers/expand-button.html
@@ -27,6 +27,11 @@ <h1>
 						Expand button on list
 					</a>
 				</li>
+				<li class="ui-li-anchor">
+					<a href="expandable-card.html">
+						Expand button on card
+					</a>
+				</li>
 			</ul>
 		</div>
 		<!-- /content -->

diff --git a/examples/mobile/UIComponents/components/controllers/expandable-card.html b/examples/mobile/UIComponents/components/controllers/expandable-card.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>Expandable Card</title>
+	<meta content="width=device-width, user-scalable=no" name="viewport" />
+	<link href="../../lib/tau/mobile/theme/default/tau.css" rel="stylesheet" />
+	<link href="../../css/style.css" rel="stylesheet" />
+	<script data-build-remove="false" src="../../lib/tau/mobile/js/tau.js">
+	</script>
+</head>
+
+<body>
+	<div class="ui-page">
+		<div class="ui-header" data-position="fixed">
+			<div class="ui-appbar-left-icons-container">
+				<a href="#" class="ui-btn ui-btn-icon ui-btn-icon-back" data-style="flat" data-rel="back"></a>
+			</div>
+			<div class="ui-appbar-title-container">
+				<span class="ui-appbar-title">Expand button on card</span>
+			</div>
+			<div class="ui-appbar-action-buttons-container">
+				<button class="ui-btn ui-btn-icon ui-btn-icon-more" data-style="flat"></button>
+			</div>
+		</div>
+		<div class="ui-content">
+			<div class="ui-content-area">
+				<div class="ui-expandable">
+					<h2>
+						Subtitle 1
+					</h2>
+					<div class="app-content-example">
+						Contents area
+					</div>
+				</div>
+			</div>
+			<div class="ui-content-area">
+				<div class="ui-expandable" data-expander="button">
+					<h2>Subtitle 2
+						<button class="ui-btn ui-btn-icon" class="ui-expandable-toggle" data-icon="up" data-style="flat"></button>
+					</h2>
+					<div class="app-content-example">
+						Contents
+					</div>
+					<div class="ui-expandable-content app-content-example-expanded">
+						Contents area
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
+
+</html>
diff --git a/examples/mobile/UIComponents/css/style.css b/examples/mobile/UIComponents/css/style.css
@@ -1,6 +1,6 @@
 /* Header */
 .btn-icon-back::after {
-	 -webkit-mask-image: url(./images/core_icon_back.png);
+	-webkit-mask-image: url(./images/core_icon_back.png);
 	mask-image: url(./images/core_icon_back.png);
 }
 
@@ -460,15 +460,15 @@
 }
 
 /**************************************
-			Virtual List
+		Virtual List
 ***************************************/
 .virtual-icon {
 	width: 35px;
 	height: 35px;
 }
 
 /**************************************
-            Slider
+		Slider
 ***************************************/
 #slider-demo .ui-slider-vertical {
 	left: 50%;
@@ -477,7 +477,7 @@
 }
 
 /**************************************
-			Button Text
+		Button Text
 ***************************************/
 #button-page {
 	color: white;
@@ -624,14 +624,14 @@
 }
 
 /**************************************
-            text input with buttons
+		text input with buttons
 ***************************************/
 #textinputwithbuttons-demo .ui-content {
 	top: 80px;
 	background: white;
 }
 /******************************************************
-            List Styles - sliders
+		List Styles - sliders
 ******************************************************/
 
 #slider-description{
@@ -671,7 +671,7 @@
 }
 
 /******************************************************
-        Indexscrollbar with search floating button
+		Indexscrollbar with search floating button
 ******************************************************/
 
 #indexscrollbarPage .ui-header.search-active h1 {
@@ -704,4 +704,26 @@
 }
 .sample-unit-lines p {
 	margin-bottom: 2px;
+}
+
+/* Expand button example */
+.app-content-example {
+	height: 150px;
+	width: 100%;
+	background-color: #ddd;
+	display: flex;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 15px;
+}
+.app-content-example-expanded {
+	height: 150px;
+	width: 100%;
+	background-color: #ddd;
+	display: flex;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 15px;
 }
diff --git a/src/css/profile/mobile/common/core.less b/src/css/profile/mobile/common/core.less
@@ -160,13 +160,16 @@
 		overflow: hidden;
 		box-sizing: border-box;
 		box-shadow: 0 0 0 0.25 * @px_base var(--content-area-line-color) inset;
-		margin: auto;
+		margin: auto auto 16 * @px_base auto;
 
 		&-disabled-top-rounding {
 			border-top-left-radius: 0;
 			border-top-right-radius: 0;
 			mask-border-width: 0 26 * @px_base 26 * @px_base;
 		}
+		~ .ui-content-subheader {
+			margin-top: -16 * @px_base; // margin compensation from content area
+		}
 	}
 
 	.ui-content-subheader {

diff --git a/src/css/profile/mobile/common/expandable.less b/src/css/profile/mobile/common/expandable.less
@@ -1,7 +1,9 @@
-.ui-listview .ui-expandable {
+.ui-listview .ui-expandable,
+.ui-content-area .ui-expandable {
 	padding: 0 24 * @px_base;
 	user-select: none;
 	flex-direction: column;
+	display: flex;
 
 	.ui-expandable-heading {
 		color: var(--text-color);
@@ -13,10 +15,6 @@
 		margin: 0;
 		position: relative;
 
-		&:not(.ui-expandable-heading-collapsed) {
-			color: var(--primary-dark-color);
-		}
-
 		.ui-expandable-heading-toggle {
 			position: relative;
 			display: block;
@@ -25,14 +23,10 @@
 				outline: 0;
 			}
 
-			&:active {
-				color: @color_list_divider_text_expandable_press;
-			}
-
 			&::after {
 				content: "";
 				position: absolute;
-				right: 0;
+				right: -8 * @px_base;
 				top: calc(~"50% - "16 * @px_base);
 				mask-image: url("images/6_Lists/tw_expander_close_mtrl.svg");
 				mask-repeat: no-repeat;
@@ -45,9 +39,26 @@
 				transform: rotate(0);
 			}
 		}
-		&.ui-expandable-heading-active {
-			.ui-expandable-heading-toggle::after {
-				background-color: @color_expandable_heading_arrow_pressed;
+		.ui-btn {
+			width: 32 * @px_base;
+			height: 32 * @px_base;
+			min-height: auto;
+			position: absolute;
+			right: -8 * @px_base;
+			top: calc(~"50% - "16 * @px_base);
+
+			&::before {
+				width: 32 * @px_base;
+				height: 32 * @px_base;
+				display: none;
+			}
+			&::after {
+				width: 32 * @px_base;
+				height: 32 * @px_base;
+				mask-size: 32 * @px_base;
+				background-color: var(--expander-color);
+				transition: all 330ms ease;
+				transform: translate(-50%, -50%) rotate(0);
 			}
 		}
 	}
@@ -61,10 +72,19 @@
 			}
 		}
 	}
+	&.ui-expandable-collapsed {
+		.ui-expandable-heading {
+			.ui-btn {
+				&::after {
+					transform: translate(-50%, -50%) rotate(180deg);
+				}
+			}
+		}
+	}
 
 	.ui-expandable-content {
-		display: block;
 		transition: all 330ms ease;
+		overflow: auto;
 		.ui-listview {
 			padding: 0;
 			margin-left: 18 * @px_base;

diff --git a/src/css/profile/mobile/theme-changeable/theme.color.less b/src/css/profile/mobile/theme-changeable/theme.color.less
@@ -40,7 +40,6 @@
 @color_list_sub_text_3_normal: var(--text-secondary-color); // #[color] sub text color
 
 @color_list_divider_text: var(--text-secondary-color); // #[color] divider text color
-@color_list_divider_text_expandable_press: var(--active); // #[color] divider text color
 
 @color_list_divider_bg_press: var(--on-background); // #[color] divider background press color
 @color_list_divider_text_press: var(--active); // #[color] divider text press color
@@ -59,7 +58,6 @@
 //						Expandable
 //***************************************************************************
 @color_expandable_heading_arrow: var(--on-background); // #[color] expandable arrow color
-@color_expandable_heading_arrow_pressed: var(--active); // #[color] expandable arrow color pressed
 @color_expandable_heading_arrow_dim: var(--control-background);
 
 //***************************************************************************