Group Index Content Page (Wearable): add example and style

[Issue] #683 [Problem] No support for Group Index on Content Page [Solution] Share implementation from listview, add example and adjust style. Signed-off-by: Grzegorz Czajkowski <g.czajkowski@samsung.com>
Samsung · Jun 5, 2020 · 2f8bb77 · 2f8bb77
1 parent 6d30852
commit 2f8bb77
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 27 deletions.
diff --git a/...es/wearable/UIComponents/contents/presentation-views/list/group-index/content-center.html b/...es/wearable/UIComponents/contents/presentation-views/list/group-index/content-center.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport" />
+	<title>
+		Wearable UI
+	</title>
+	<link href="../../../../lib/tau/wearable/theme/default/tau.css" rel="stylesheet" />
+	<link href="../../../../lib/tau/wearable/theme/default/tau.circle.css" rel="stylesheet" />
+	<link href="../../../../css/style.css" rel="stylesheet" />
+	<link href="../../../../css/style.circle.css" rel="stylesheet" />
+	<script src="../../../../js/circle-helper.js">
+	</script>
+	<script src="../../../../lib/tau/wearable/js/tau.js">
+	</script>
+</head>
+
+<body>
+	<div class="ui-page">
+		<header class="ui-header">
+			<h2 class="ui-title">
+				Title
+			</h2>
+		</header>
+		<div class="ui-content">
+			<div class="ui-group-index">
+				Group index
+			</div>
+			<div class="ui-group-content">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+			</div>
+			<div class="ui-group-index">
+				Group index 2
+			</div>
+			<div class="ui-group-content">
+				message. Your mobile network is not currently available on your mobile device. Check your network status on your mobile device
+			</div>
+		</div>
+	</div>
+	<script src="../../../../js/app.js">
+	</script>
+	<script src="../../../../js/lowBatteryCheck.js">
+	</script>
+</body>
+
+</html>
diff --git a/examples/wearable/UIComponents/contents/presentation-views/list/group-index/index.html b/examples/wearable/UIComponents/contents/presentation-views/list/group-index/index.html
@@ -33,6 +33,11 @@ <h2 class="ui-title">
 						Multi Center
 					</a>
 				</li>
+				<li>
+					<a href="content-center.html">
+						Content Center
+					</a>
+				</li>
 			</ul>
 		</div>
 	</div>

diff --git a/src/css/profile/wearable/changeable/theme-circle/layout.less b/src/css/profile/wearable/changeable/theme-circle/layout.less
@@ -192,17 +192,35 @@ body {
 	}
 
 	background: @color_bg;
+
+	.content-padding {
+		font-stretch: ultra-condensed;
+		padding-left: 24 * @px_base;
+		padding-right: 24 * @px_base;
+	}
+
 	.ui-content {
 		text-align: center;
 		font-size: 32 * @px_base;
 		line-height: 42 * @unit_base;
 
 		&.ui-content-padding {
-			font-stretch: ultra-condensed;
-			padding-left: 33 * @unit_base;
-			padding-right: 33 * @unit_base;
+			.content-padding;
 		}
+
+		.ui-group-index {
+			.group-index;
+
+			&:not(:first-of-type) {
+				margin-top: 16 * @px_base;
+			}
+		}
+
+		.ui-group-content {
+			.content-padding;
+		};
 	}
+
 	.ui-footer.ui-bottom-button {
 		position: fixed !important;
 		bottom: 6 * @unit_base;
@@ -299,3 +317,35 @@ body {
 		margin-top: -85 * @unit_base;
 	}
 }
+
+/***************************************************************************
+                  Group Index (common for listview and content)
+***************************************************************************/
+.group-index() {
+	min-height: 32 * @px_base;
+	max-height: 32 * @px_base;
+	font-size : 24 * @px_base;
+	margin-bottom: 16 * @px_base;
+	padding: 0;
+	color: @color_list_divider_text;
+	text-align: center;
+	background-color: transparent;
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+
+	&::before, &::after {
+		content: "";
+		height: 1 * @px_base;
+		width: auto;
+		background: @color_list_divider_bg;
+		flex: 1
+	}
+	&::before {
+		margin-right: 10 * @px_base;
+	}
+	&::after {
+		margin-left: 10 * @px_base;
+	}
+}
+
diff --git a/src/css/profile/wearable/changeable/theme-circle/listview.less b/src/css/profile/wearable/changeable/theme-circle/listview.less
@@ -53,30 +53,7 @@
 		align-items: center;
 
 		&.ui-listview-divider, &.ui-li-group-index {
-			min-height: 32 * @px_base;
-			max-height: 32 * @px_base;
-			font-size: 24 * @px_base;
-			margin-bottom: 16 * @px_base;
-			padding: 0;
-			color: @color_list_divider_text;
-			text-align: center;
-			background-color: transparent;
-			display: flex;
-			flex-direction: row;
-
-			&::before, &::after {
-				content: "";
-				height: 1 * @px_base;
-				width: auto;
-				background: @color_list_divider_bg;
-				flex: 1
-			}
-			&::before {
-				margin-right: 10 * @px_base;
-			}
-			&::after {
-				margin-left: 10 * @px_base;
-			}
+			.group-index;
 		}
 
 		&.ui-li-btn {