Progress in Appbar: add new styles and template

[Issue] #1558 [Problem] Progress in AppBar needs implemented [Solution] - added new template to UIComponents - added new styles Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
Samsung · Feb 1, 2021 · 54be953 · 54be953
1 parent 9dab648
commit 54be953
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 11 deletions.
diff --git a/examples/mobile/UIComponents/components/progress/index.html b/examples/mobile/UIComponents/components/progress/index.html
@@ -31,17 +31,23 @@ <h1>Progress</h1>
 	<div class="ui-content">
 		<ul class="ui-listview ui-content-area">
 			<li class="ui-li-anchor">
-				<a href="progress-bar/progressbar.html">Progress bar</a>
+				<a href="progress-bar/progress-bar.html">Progress bar</a>
 			</li>
 			<li class="ui-li-anchor">
 				<a href="progress-bar-indeterminate/progress-bar-indeterminate.html">Progress bar Indeterminate</a>
 			</li>
 			<li class="ui-li-anchor">
-				<a href="progress-circle/progresscircle.html">Progress Circle</a>
+				<a href="progress-circle/progress-circle.html">Progress Circle</a>
 			</li>
 			<li class="ui-li-anchor">
 				<a href="progress-circle-indeterminate/progress-circle-indeterminate.html">Progress Circle Indeterminate</a>
 			</li>
+			<li class="ui-li-anchor">
+				<a href="progress-bar-appbar/progress-bar.html">Progress Bar AppBar</a>
+			</li>
+			<li class="ui-li-anchor">
+				<a href="progress-circle-appbar/progress-circle.html">Progress Circle AppBar</a>
+			</li>
 		</ul>
 	</div>
 </div>

diff --git a/examples/mobile/UIComponents/components/progress/progress-bar-appbar/progress-bar.html b/examples/mobile/UIComponents/components/progress/progress-bar-appbar/progress-bar.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<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>
+	<title>Progress Bar</title>
+</head>
+
+<body>
+	<div class="ui-page" id="progress-bar-appbar-page">
+		<header>
+			<div class="ui-appbar-controls-container">
+				<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-progress" data-type="bar" data-value="50" id="progress-bar-appbar"></div>
+			</div>
+			<h1>
+				Progress Bar in AppBar
+			</h1>
+		</header>
+		<div class="ui-content"></div>
+		<!-- /content -->
+		<script src="progress-bar.js"></script>
+	</div>
+	<!-- /page -->
+</body>
+
+</html>
diff --git a/examples/mobile/UIComponents/components/progress/progress-bar-appbar/progress-bar.js b/examples/mobile/UIComponents/components/progress/progress-bar-appbar/progress-bar.js
@@ -0,0 +1,22 @@
+(function (tau) {
+	"use strict";
+	var page = document.getElementById("progress-bar-appbar-page"),
+		progressbar = document.getElementById("progress-bar-appbar"),
+		timer,
+
+		pageBeforeShowHandler = function () {
+			var progressbarWidget = new tau.widget.Progress(progressbar);
+
+			timer = setTimeout(function () {
+				progressbarWidget.value(100);
+			}, 3000);
+		},
+
+		pageBeforeHideHandler = function () {
+			clearTimeout(timer);
+		};
+
+	page.addEventListener("pagebeforeshow", pageBeforeShowHandler);
+	page.addEventListener("pagebeforehide", pageBeforeHideHandler);
+
+}(window.tau));
diff --git a/...ts/progress/progress-bar/progressbar.html → ...s/progress/progress-bar/progress-bar.html b/...ts/progress/progress-bar/progressbar.html → ...s/progress/progress-bar/progress-bar.html
@@ -10,7 +10,7 @@
 </head>
 
 <body>
-	<div class="ui-page" id="progressbar-demo">
+	<div class="ui-page" id="progress-bar-page">
 		<header>
 			<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>
@@ -21,12 +21,12 @@ <h1>
 		</header>
 		<div class="ui-content">
 			<div class="ui-progress-container">
-				<div class="ui-progress" data-type="bar" data-value="50" id="progressbar"></div>
+				<div class="ui-progress" data-type="bar" data-value="50" id="progress-bar"></div>
 				<span class="ui-progress-text">Text text text text...</span>
 			</div>
 		</div>
 		<!-- /content -->
-		<script src="progressbar.js"></script>
+		<script src="progress-bar.js"></script>
 	</div>
 	<!-- /page -->
 </body>

diff --git a/...ents/progress/progress-bar/progressbar.js → ...nts/progress/progress-bar/progress-bar.js b/...ents/progress/progress-bar/progressbar.js → ...nts/progress/progress-bar/progress-bar.js
@@ -1,7 +1,7 @@
 (function (tau) {
 	"use strict";
-	var page = document.getElementById("progressbar-demo"),
-		progressbar = document.getElementById("progressbar"),
+	var page = document.getElementById("progress-bar-page"),
+		progressbar = document.getElementById("progress-bar"),
 		timer,
 
 		pageBeforeShowHandler = function () {

diff --git a/examples/mobile/UIComponents/components/progress/progress-circle-appbar/progress-circle.html b/examples/mobile/UIComponents/components/progress/progress-circle-appbar/progress-circle.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<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>
+	<title>Progress Bar</title>
+</head>
+
+<body>
+	<div class="ui-page" id="progress-circle-appbar-page">
+		<header>
+			<div class="ui-appbar-controls-container">
+				<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-progress" data-type="indeterminatecircle"></div>
+			</div>
+			<h1>
+				Progress Circle in AppBar
+			</h1>
+		</header>
+		<div class="ui-content"></div>
+	</div>
+	<!-- /page -->
+</body>
+
+</html>
diff --git a/...gress/progress-circle/progresscircle.html → ...ress/progress-circle/progress-circle.html b/...gress/progress-circle/progresscircle.html → ...ress/progress-circle/progress-circle.html
@@ -10,7 +10,7 @@
 </head>
 
 <body>
-	<div class="ui-page" id="progresscircle-demo">
+	<div class="ui-page" id="progress-circle-page">
 		<header>
 			<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>
@@ -38,7 +38,7 @@ <h1>
 				+10%
 			</button>
 		</div>
-		<script src="progresscircle.js">
+		<script src="progress-circle.js">
 		</script>
 	</div>
 </body>

diff --git a/...rogress/progress-circle/progresscircle.js → ...ogress/progress-circle/progress-circle.js b/...rogress/progress-circle/progresscircle.js → ...ogress/progress-circle/progress-circle.js
@@ -11,7 +11,7 @@
 	 * pageBeforeShowHandler - pagebeforeshow event handler
 	 * pageHideHandler - pagehide event handler
 	 */
-	var page = document.getElementById("progresscircle-demo"),
+	var page = document.getElementById("progress-circle-page"),
 		progressBar = document.getElementById("circle"),
 		minusBtn = document.getElementById("minus"),
 		plusBtn = document.getElementById("plus"),

diff --git a/src/css/profile/mobile/common/progress.less b/src/css/profile/mobile/common/progress.less
@@ -277,7 +277,7 @@ tau-progress {
 	box-sizing: border-box;
 	margin: auto;
 	animation: rotating 2s linear infinite;
-	
+
 	&::before {
 		content:"";
 		border-top-style: solid;
@@ -398,3 +398,43 @@ tau-progress {
 	padding-left: 56 * @px_base;
 	padding-right: 56 * @px_base;
 }
+
+/** Progress Bar / Circle in AppBar */
+.ui-appbar {
+	.ui-progress-bar {
+		height: 3 * @px_base;
+	}
+	.ui-indeterminate-circle {
+		width: 24 * @px_base;
+		height: 24 * @px_base;
+		margin-right: 24 * @px_base;
+		margin-bottom: 16 * @px_base;
+		transition: margin-right 200ms ease-in;
+	}
+	.ui-indeterminate-circle-medium {
+		&::before, &::after {
+			width: (24/2 - 3) * @px_base;
+			height: (24/2 - 3) * @px_base;
+		}
+
+		&::before {
+			border-top-width: 3 * @px_base;
+			border-left-width: 3 * @px_base;
+		}
+
+		&::after {
+			border-right-width: 3 * @px_base;
+			border-bottom-width: 3 * @px_base;
+		}
+	}
+	&.ui-appbar-expanded {
+		.ui-indeterminate-circle {
+			margin-right: calc(~"50% - "24/2 * @px_base);
+		}
+		&.ui-appbar-dragging {
+			.ui-indeterminate-circle {
+				margin-right: 24 * @px_base;
+			}
+		}
+	}
+}