-
Notifications
You must be signed in to change notification settings - Fork 42
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[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
1 parent
52a9bc2
commit 9cc8391
Showing
7 changed files
with
288 additions
and
70 deletions.
There are no files selected for viewing
46 changes: 46 additions & 0 deletions
46
examples/mobile/UIComponents/components/scrolling/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
182
examples/mobile/UIComponents/components/scrolling/scroll-bar.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.