Pull Down Refresh: added new template

[Issue] Samsung#1561 [Problem] Pull down refresh needs implemented [Solution] - added new template in UIComponentes - added new Page option: data-pull-down-refresh=true|false Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
TomaszLukawskiSam · Feb 2, 2021 · 2c2588f · 2c2588f
1 parent 9dab648
commit 2c2588f
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 1 deletion.
diff --git a/examples/mobile/UIComponents/components/progress/index.html b/examples/mobile/UIComponents/components/progress/index.html
@@ -42,6 +42,9 @@ <h1>Progress</h1>
 			<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="pull-down-refresh.html">Pull Down Refresh</a>
+			</li>
 		</ul>
 	</div>
 </div>

diff --git a/examples/mobile/UIComponents/components/progress/pull-down-refresh.html b/examples/mobile/UIComponents/components/progress/pull-down-refresh.html
@@ -0,0 +1,28 @@
+<!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="pull-down-refresh" data-pull-down-refresh="true">
+		<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>
+			</div>
+			<h1>
+				Pull down refresh
+			</h1>
+		</header>
+		<div class="ui-content"></div>
+		<!-- /content -->
+	</div>
+	<!-- /page -->
+</body>
+
+</html>
diff --git a/src/css/profile/mobile/common/oneui-common.less b/src/css/profile/mobile/common/oneui-common.less
@@ -93,6 +93,10 @@
     --holder-reoder-background: @holder-reoder-background;
     --holder-reoder-border: @holder-reoder-border;
 
+    --pull-down-refresh-bg-color: @pull-down-refresh-bg-color;
+    --pull-down-refresh-shadow-1-color: @pull-down-refresh-shadow-1-color;
+    --pull-down-refresh-shadow-2-color: @pull-down-refresh-shadow-2-color;
+
     --spin-item-opacity: @spin-item-opacity;
     --grid-selection-color: fade(@_black, 30%);
     --calendar-weekend-day-color: @calendar-weekend-day-color;

diff --git a/src/css/profile/mobile/common/pull-down-refresh.less b/src/css/profile/mobile/common/pull-down-refresh.less
@@ -0,0 +1,25 @@
+.ui-pull-down-refresh {
+    position: absolute;
+    display: block;
+    top: (62 + 56) * @px_base; /* 56px below header */
+    width: 40 * @px_base;
+    height: 40 * @px_base;
+    left: calc(~"50% - "28 * @px_base);
+    border-radius: 100%;
+    margin: 5 * @px_base 8 * @px_base 10 * @px_base;
+    background-color: var(--pull-down-refresh-bg-color);
+    box-shadow: 0 2.5 * @px_base 8 * @px_base 0 var(--pull-down-refresh-shadow-1-color), 0 0 2 * @px_base 0 var(--pull-down-refresh-shadow-2-color);
+
+    &:after {
+        content: "";
+        width: 24 * @px_base;
+        height: 24 * @px_base;
+        position: absolute;
+        mask-image: url(images/9_Progress/tw_ic_progress_refresh_mtrl.svg);
+        mask-size: 24 * @px_base;
+        background-color: var(--primary-color);
+        mask-repeat: no-repeat;
+        mask-position: center;
+        padding: 8 * @px_base;
+    }
+}
diff --git a/src/css/profile/mobile/mobile.less b/src/css/profile/mobile/mobile.less
@@ -75,4 +75,5 @@
 @import "common/datetimepicker.less";
 @import "common/valuepicker.less";
 @import "common/chip.less";
-@import "common/badge.less";
+@import "common/badge.less";
+@import "common/pull-down-refresh.less";
diff --git a/src/css/profile/mobile/themes/dark.variables.less b/src/css/profile/mobile/themes/dark.variables.less
@@ -79,6 +79,10 @@
     @holder-reoder-background: @background-area-color;
     @holder-reoder-border: @primary-dark-color;
 
+    @pull-down-refresh-bg-color: @background-area-color;
+    @pull-down-refresh-shadow-1-color: fade(@_black, 35%);
+    @pull-down-refresh-shadow-2-color: fade(@_black, 10%);
+
     @spin-item-opacity: 0.2;
     @calendar-weekend-color: #993d3d;
     @calendar-text-color: #cccccc;

diff --git a/src/css/profile/mobile/themes/light.variables.less b/src/css/profile/mobile/themes/light.variables.less
@@ -77,6 +77,10 @@
     @holder-reoder-background: @background-area-color;
     @holder-reoder-border: @primary-dark-color;
 
+    @pull-down-refresh-bg-color: @color-white;
+    @pull-down-refresh-shadow-1-color: fade(@_black, 15%);
+    @pull-down-refresh-shadow-2-color: fade(@_black, 4%);
+
     @spin-item-opacity: 0.1;
     @calendar-weekend-color: #d77e7e;
     @calendar-text-color: #454545;

diff --git a/src/js/core/widget/core/Page.js b/src/js/core/widget/core/Page.js
@@ -430,6 +430,7 @@
 				 * @property {Object} options
 				 * @property {boolean|string|null} [options.header=false] Sets content of header.
 				 * @property {boolean|string|null} [options.footer=false] Sets content of footer.
+				 * @property {boolean} [options.pullDownRefresh=false] enable / disable pull down refresh
 				 * @property {boolean} [options.autoBuildWidgets=false] Automatically build widgets inside page.
 				 * @property {boolean} [options.goToTopButton=false] Shows go to top button at the bottom of the page.
 				 * @property {string} [options.content=null] Sets content of popup.
@@ -441,6 +442,7 @@
 				options.header = null;
 				options.footer = null;
 				options.content = null;
+				options.pullDownRefresh = false;
 				options.goToTopButton = ns.getConfig("goToTopButton");
 				options.enablePageScroll = ns.getConfig("enablePageScroll");
 				options.autoBuildWidgets = ns.getConfig("autoBuildOnPageChange");
@@ -757,6 +759,28 @@
 					null;
 			};
 
+			function createPullDownRefresh() {
+				var pullDown =document.createElement("div");
+
+				pullDown.classList.add("ui-pull-down-refresh");
+				return pullDown;
+			}
+
+			prototype._setPullDownRefresh = function (element, enabled) {
+				var self = this,
+					pullDownRefresh = self._ui.pullDownRefresh;
+
+				if (enabled && !pullDownRefresh) {
+					pullDownRefresh = createPullDownRefresh();
+					element.appendChild(pullDownRefresh);
+					self._ui.pullDownRefresh = pullDownRefresh;
+				} else if (!enabled && pullDownRefresh) {
+					element.removeChild(pullDownRefresh);
+					self._ui.pullDownRefresh = null;
+				}
+
+			};
+
 			prototype._buildGoToTopButton = function (element) {
 				var self = this,
 					ui = self._ui;
@@ -915,6 +939,7 @@
 				self._buildContent(element);
 				self._buildGoToTopButton(element);
 				self._setTitle(element);
+				self._setPullDownRefresh(element, self.options.pullDownRefresh);
 				self._setAria();
 
 				//it means that we are in wearable profile and we want to make a scrollview on page element (not content)