No-item: template

[Issue] #1581 [Problem] No-item template is not implemented [Solution] Template implemented according to guideline Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
Samsung · Mar 2, 2021 · 9fa39a4 · 9fa39a4
1 parent f3a0042
commit 9fa39a4
Show file tree

Hide file tree

Showing 11 changed files with 244 additions and 2 deletions.
diff --git a/examples/mobile/UIComponents/components/no-item/appbar-no-item-description.html b/examples/mobile/UIComponents/components/no-item/appbar-no-item-description.html
@@ -0,0 +1,33 @@
+<!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>
+</head>
+
+<body>
+	<div class="ui-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>
+			</div>
+			<div class="ui-appbar-title-container">
+				<span class="ui-appbar-title">App name</span>
+			</div>
+			<div class="ui-appbar-action-buttons-container">
+					<button class="ui-btn ui-btn-icon ui-btn-icon-add" data-style="flat"></button>
+					<button class="ui-btn ui-btn-icon ui-btn-icon-more" data-style="flat"></button>
+			</div>
+		</header>
+		<div class="ui-content ui-no-item-content">
+			<div class="ui-no-item">No item</div>
+			<div class="ui-no-item-description">After you purchase items, they will appear here.</div>
+		</div>
+	</div>
+</body>
+
+</html>
diff --git a/examples/mobile/UIComponents/components/no-item/appbar-no-item.html b/examples/mobile/UIComponents/components/no-item/appbar-no-item.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>
+</head>
+
+<body>
+	<div class="ui-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>
+			</div>
+			<div class="ui-appbar-title-container">
+				<span class="ui-appbar-title">App name</span>
+			</div>
+			<div class="ui-appbar-action-buttons-container">
+					<button class="ui-btn ui-btn-icon ui-btn-icon-add" data-style="flat"></button>
+					<button class="ui-btn ui-btn-icon ui-btn-icon-more" data-style="flat"></button>
+			</div>
+		</header>
+		<div class="ui-content ui-no-item-content">
+			<div class="ui-no-item">No item</div>
+		</div>
+	</div>
+</body>
+
+</html>
diff --git a/examples/mobile/UIComponents/components/no-item/index.html b/examples/mobile/UIComponents/components/no-item/index.html
@@ -0,0 +1,51 @@
+<!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>
+</head>
+
+<body>
+	<div class="ui-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>
+			</div>
+			<h1>
+				No item
+			</h1>
+			<div class="ui-appbar-action-buttons-container">
+				<button class="ui-btn ui-btn-icon ui-btn-icon-more" data-style="flat"></button>
+				<select class="theme-changer" data-native-menu="false" style="display: none">
+					<option value="light">
+						Light Theme
+					</option>
+					<option value="dark" class="ui-dropdown-two-lines">
+						Dark Theme
+					</option>
+				</select>
+			</div>
+		</header>
+		<div class="ui-content">
+			<ul class="ui-listview ui-content-area">
+				<li class="ui-li-anchor">
+					<a href="no-item-main-tab.html">
+						Appbar no item
+					</a>
+				</li>
+				<li class="ui-li-anchor">
+					<a href="no-item-desc-main-tab.html">
+						Appbar no item + description
+					</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+	<script src="../../js/app.js"></script>
+</body>
+
+</html>
diff --git a/examples/mobile/UIComponents/components/no-item/no-item-desc-main-tab.html b/examples/mobile/UIComponents/components/no-item/no-item-desc-main-tab.html
@@ -0,0 +1,44 @@
+<!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>
+</head>
+
+<body>
+	<div class="ui-page">
+		<div class="ui-content">
+			<!-- this page will be replaced by page from link target of active tab -->
+		</div>
+		<div class="ui-main-tab ui-active">
+			<ul>
+				<li class="ui-li-anchor">
+					<a class="ui-tab-active" href="./appbar-no-item-description.html">
+						One
+					</a>
+				</li>
+				<li class="ui-li-anchor">
+					<a href="#">
+						Two
+					</a>
+				</li>
+				<li class="ui-li-anchor">
+					<a href="#">
+						Three
+					</a>
+				</li>
+				<li class="ui-li-anchor">
+					<a href="#">
+						Four
+					</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</body>
+
+</html>
diff --git a/examples/mobile/UIComponents/components/no-item/no-item-main-tab.html b/examples/mobile/UIComponents/components/no-item/no-item-main-tab.html
@@ -0,0 +1,44 @@
+<!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>
+</head>
+
+<body>
+	<div class="ui-page">
+		<div class="ui-content">
+			<!-- this page will be replaced by page from link target of active tab -->
+		</div>
+		<div class="ui-main-tab ui-active">
+			<ul>
+				<li class="ui-li-anchor">
+					<a class="ui-tab-active" href="./appbar-no-item.html">
+						One
+					</a>
+				</li>
+				<li class="ui-li-anchor">
+					<a href="#">
+						Two
+					</a>
+				</li>
+				<li class="ui-li-anchor">
+					<a href="#">
+						Three
+					</a>
+				</li>
+				<li class="ui-li-anchor">
+					<a href="#">
+						Four
+					</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</body>
+
+</html>
diff --git a/examples/mobile/UIComponents/index.html b/examples/mobile/UIComponents/index.html
@@ -62,6 +62,11 @@
 						Lists
 					</a>
 				</li>
+				<li class="ui-li-anchor">
+					<a href="components/no-item/index.html">
+						No item
+					</a>
+				</li>
 				<li class="ui-li-anchor">
 					<a href="components/search/index.html">
 						Search

diff --git a/src/css/profile/mobile/common/no-item.less b/src/css/profile/mobile/common/no-item.less
@@ -0,0 +1,23 @@
+.ui-no-item {
+    .font(regular);
+    font-size: 19 * @sp_base;
+    color: var(--text-no-item-color);
+    max-width: 75%;
+
+    &-content {
+        .ui-scrollview-view {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+    &-description {
+        font-size: 14 * @sp_base;
+        line-height: 17 * @px_base;
+        color: var(--text-no-item-desc-color);
+        margin-top: 13 * @px_base;
+        max-width: 75%;
+    }
+}
diff --git a/src/css/profile/mobile/common/oneui-common.less b/src/css/profile/mobile/common/oneui-common.less
@@ -46,6 +46,9 @@
     --sub-tab-active-text-color: @sub-tab-active-text-color;
     --sub-tab-border-color: fade(@sub-tab-border-color, @sub-tab-border-opacity);
 
+    --text-no-item-color: @text-no-item-color;
+    --text-no-item-desc-color: @text-no-item-desc-color;
+
     --progress-bar-color: @primary-color;
     --progress-bar-bg-color: fade(@primary-color, 30%);
     --button-text-color-disabled: fade(@primary-color, 40%);

diff --git a/src/css/profile/mobile/mobile.less b/src/css/profile/mobile/mobile.less
@@ -76,4 +76,5 @@
 @import "common/valuepicker.less";
 @import "common/chip.less";
 @import "common/badge.less";
-@import "common/pull-down-refresh.less";
+@import "common/pull-down-refresh.less";
+@import "common/no-item.less";
diff --git a/src/css/profile/mobile/themes/dark.variables.less b/src/css/profile/mobile/themes/dark.variables.less
@@ -71,9 +71,12 @@
     @divider-opacity: 15%;
     @subheader-divider-color: @color-white;
 
+    @text-no-item-color: fade(@text-secondary-color, 68%);
+    @text-no-item-desc-color: fade(@text-secondary-color, 64%);
+
     @grid-border-color: fade(@color-white, 25%);
     @grid-label-color: @color-white;
-    @grid-label-secondary-color: #999999;
+    @grid-label-secondary-color: @text-secondary-color;
 
     @expander-color: #808080;
     @reorder-color: #808080;

diff --git a/src/css/profile/mobile/themes/light.variables.less b/src/css/profile/mobile/themes/light.variables.less
@@ -70,6 +70,9 @@
     @divider-opacity: 100%;
     @subheader-divider-color: #979797;
 
+    @text-no-item-color: fade(@text-color, 68%);
+    @text-no-item-desc-color: fade(#333333, 64%);
+
     @grid-border-color: fade(@color-black, 12%);
     @grid-label-color: @text-color;
     @grid-label-secondary-color: #666666;