Skip to content

Commit

Permalink
(mobile) Scrolling: Scroll bar
Browse files Browse the repository at this point in the history 
[Issue] #1584
[Problem] Scrolling: Scroll bar needs update of implementation
[Solution]
 - added example in UIComponents
 - update css styles according to guideline

Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
  • Loading branch information
@TomaszLukawskiSam
TomaszLukawskiSam committed Mar 3, 2021
1 parent 52a9bc2 commit 9cc8391
Show file tree
Hide file tree
Showing 7 changed files with 288 additions and 70 deletions.
46 changes: 46 additions & 0 deletions examples/mobile/UIComponents/components/scrolling/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!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>
Scrolling
</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="scroll-bar.html">
Scroll Bar
</a>
</li>
</ul>
</div>
</div>
<script src="../../js/app.js"></script>
</body>

</html>
182 changes: 182 additions & 0 deletions examples/mobile/UIComponents/components/scrolling/scroll-bar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
<!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-header" data-expanding-enabled="false">
<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">Scroll Bar</span>
</div>
<div class="ui-appbar-action-buttons-container">
<button class="ui-btn ui-btn-icon ui-btn-icon-more" data-style="flat"></button>
</div>
</div>
<div class="ui-content ui-scrollhandler">
<ul class="ui-listview ui-content-area">
<li class="ui-li-divider">
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 01
</span>
<span class="ui-li-text-sub ui-li-text-value">
Value text
</span>
</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 02
</span>
</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 03
</span>
<span class="ui-li-text-sub">
This is the second line for descriptive phrases. Chunking background color is #fcfcfc.
</span>
</div>
</li>
<li>
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 04
</span>
</div>
</li>
</ul>
<div class="ui-content-subheader">Subheader</div>
<ul class="ui-listview ui-content-area">
<li class="ui-li-divider">
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 01
</span>
<span class="ui-li-text-sub">
This psd is just a sample. I believe in your possibility. This screen will help.
</span>
</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 02
</span>
<span class="ui-li-text-sub">
This is the second line for descriptive phrases. This text color is #909090.
</span>
</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 03
</span>
<span class="ui-li-text-sub">
This is the second line for descriptive phrases. This text color is #909090.
</span>
</div>
</li>
<li>
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 04
</span>
<span class="ui-li-text-sub">
This psd is just a sample. I believe in your possibility. This screen will help.
</span>
</div>
</li>
</ul>
<div class="ui-content-subheader">Subheader</div>
<ul class="ui-listview ui-content-area">
<li class="ui-li-divider">
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 01
</span>
<span class="ui-li-text-sub">
This psd is just a sample. I believe in your possibility. This screen will help.
</span>
</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 02
</span>
<span class="ui-li-text-sub">
This is the second line for descriptive phrases. This text color is #909090.
</span>
</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 03
</span>
<span class="ui-li-text-sub">
This is the second line for descriptive phrases. This text color is #909090.
</span>
</div>
</li>
<li>
<div class="ui-li-text">
<span class="ui-li-text-title">
Main text 04
</span>
<span class="ui-li-text-sub">
This psd is just a sample. I believe in your possibility. This screen will help.
</span>
</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">Text</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">Text</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">Text</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">Text</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">Text</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">Text</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">Text</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">Text</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">Text</div>
</li>
<li class="ui-li-divider">
<div class="ui-li-text">Text</div>
</li>
</ul>
</div>
</div>
</body>

</html>
5 changes: 5 additions & 0 deletions examples/mobile/UIComponents/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,11 @@
Progress
</a>
</li>
<li class="ui-li-anchor">
<a href="components/scrolling/index.html">
Scrolling
</a>
</li>
<li class="ui-li-anchor">
<a href="components/textfields/index.html">
Text fields
Expand Down
2 changes: 2 additions & 0 deletions src/css/profile/mobile/common/oneui-common.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@
--text-no-item-color: @text-no-item-color;
--text-no-item-desc-color: @text-no-item-desc-color;

--scroll-handler-color: @scroll-handler-color;

--progress-bar-color: @primary-color;
--progress-bar-bg-color: fade(@primary-color, 30%);
--button-text-color-disabled: fade(@primary-color, 40%);
Expand Down
Loading

0 comments on commit 9cc8391

Please sign in to comment.