Skip to content

Commit

Permalink
MainTab: implementation of widget based on TabBar widget
Browse files Browse the repository at this point in the history 
[Issue] #878
[Problem] Main Tab widget is not implemented
[Solution]
 - added example in UIComponents
 - added new MainTab widget based on TabBar
 - added new route for support data-rel="maintab"
 - changes in tests
 - added new task 'test:karma-single-test' to package.json
 - README update

Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
  • Loading branch information
@TomaszLukawskiSam @HunseopJeong
TomaszLukawskiSam authored and HunseopJeong committed Apr 24, 2020
1 parent 192b8aa commit 3b4b24c
Show file tree
Hide file tree
Showing 31 changed files with 961 additions and 25 deletions.
8 changes: 8 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,14 @@ TAU has automated tests. To run tests execute command:

`npm run test`

Part of tests are run in Karma. To run tests in Karma execute command:

`npm run test:karma`

If you need to run one particular test in Karma you have to modify file `tests/karma/single.conf.path.js` and execute command:

`npm run test:karma-single-test`

## Debuggging

In order to set additional logging in TAU you need to build TAU with --tau-debug option
Expand Down
5 changes: 5 additions & 0 deletions examples/mobile/UIComponents/components/view-controls/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@
Dropdown list
</a>
</li>
<li class="ui-li-anchor">
<a href="main-tab/index.html">
Main Tab
</a>
</li>
</ul>
</div>
</div>
Expand Down
22 changes: 22 additions & 0 deletions examples/mobile/UIComponents/components/view-controls/main-tab/five.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!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">
<link href="./main-tab-sample.css" rel="stylesheet" />
<div class="ui-content">
<div class="ui-content-area app-full-height">
</div>
</div>
</div>
</body>

</html>
22 changes: 22 additions & 0 deletions examples/mobile/UIComponents/components/view-controls/main-tab/four.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!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">
<link href="./main-tab-sample.css" rel="stylesheet" />
<div class="ui-content">
<div class="ui-content-area app-full-height">
</div>
</div>
</div>
</body>

</html>
54 changes: 54 additions & 0 deletions examples/mobile/UIComponents/components/view-controls/main-tab/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!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">Main Tab</span>
</div>
</header>
<div class="ui-content">
<ul class="ui-listview ui-content-area">
<li class="ui-li-anchor">
<a href="./main-tab-2-items.html">
2 elements
</a>
</li>
<li class="ui-li-anchor">
<a href="./main-tab-3-items.html">
3 elements
</a>
</li>
<li class="ui-li-anchor">
<a href="./main-tab-4-items.html">
4 elements
</a>
</li>
<li class="ui-li-anchor">
<a href="./main-tab-5-items.html">
5 elements
</a>
</li>
<li class="ui-li-anchor">
<a href="./main-tab-2-with-appbar.html">
2 elements with App Bar
</a>
</li>
</ul>
</div>
</div>
</body>

</html>
37 changes: 37 additions & 0 deletions examples/mobile/UIComponents/components/view-controls/main-tab/main-tab-2-items.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!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">
<link href="./main-tab-sample.css" rel="stylesheet" />

<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="./one.html">
One
</a>
</li>
<li class="ui-li-anchor">
<a href="./two.html">
Two
</a>
</li>
</ul>
</div>
</div>

</body>

</html>
37 changes: 37 additions & 0 deletions examples/mobile/UIComponents/components/view-controls/main-tab/main-tab-2-with-appbar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!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">
<link href="./main-tab-sample.css" rel="stylesheet" />

<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="./one-appbar.html">
One
</a>
</li>
<li class="ui-li-anchor">
<a href="./two-appbar.html">
Two
</a>
</li>
</ul>
</div>
</div>

</body>

</html>
40 changes: 40 additions & 0 deletions examples/mobile/UIComponents/components/view-controls/main-tab/main-tab-3-items.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!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">
<link href="./main-tab-sample.css" rel="stylesheet" />
<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 href="./one.html">
One
</a>
</li>
<li class="ui-li-anchor">
<a class="ui-tab-active" href="./two.html">
Two
</a>
</li>
<li class="ui-li-anchor">
<a href="./three.html">
Three
</a>
</li>
</ul>
</div>
</div>
</body>

</html>
45 changes: 45 additions & 0 deletions examples/mobile/UIComponents/components/view-controls/main-tab/main-tab-4-items.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!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">
<link href="./main-tab-sample.css" rel="stylesheet" />
<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 href="./one.html">
One
</a>
</li>
<li class="ui-li-anchor">
<a href="./two.html">
Two
</a>
</li>
<li class="ui-li-anchor">
<a class="ui-tab-active" href="./three.html">
Three
</a>
</li>
<li class="ui-li-anchor">
<a href="./four.html">
Four
</a>
</li>
</ul>
</div>
</div>
</body>

</html>
50 changes: 50 additions & 0 deletions examples/mobile/UIComponents/components/view-controls/main-tab/main-tab-5-items.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!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">
<link href="./main-tab-sample.css" rel="stylesheet" />
<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 href="./one.html">
One
</a>
</li>
<li class="ui-li-anchor">
<a href="./two.html">
Two
</a>
</li>
<li class="ui-li-anchor">
<a href="./three.html">
Three
</a>
</li>
<li class="ui-li-anchor">
<a href="./four.html">
Four
</a>
</li>
<li class="ui-li-anchor">
<a class="ui-tab-active" href="./five.html">
Five
</a>
</li>
</ul>
</div>
</div>
</body>

</html>
4 changes: 4 additions & 0 deletions examples/mobile/UIComponents/components/view-controls/main-tab/main-tab-sample.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.app-full-height {
display: flex;
height: -webkit-fill-available;
}
27 changes: 27 additions & 0 deletions examples/mobile/UIComponents/components/view-controls/main-tab/one-appbar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!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">
<link href="./main-tab-sample.css" rel="stylesheet" />
<header>
<div class="ui-appbar-title-container">
<span class="ui-appbar-title">One</span>
</div>
</header>
<div class="ui-content">
<div class="ui-content-area app-full-height">
</div>
</div>
</div>
</body>

</html>
Loading

0 comments on commit 3b4b24c

Please sign in to comment.