Skip to content

Commit

Permalink
Dialog: Value picker
Browse files Browse the repository at this point in the history 
[Issue] #1542
[Problem] Dialog: Value picker has not implemented yet
[Solution]
  - fixes for Spin widget with step option as float number
  - added examples

Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
  • Loading branch information
@TomaszLukawskiSam @HunseopJeong
TomaszLukawskiSam authored and HunseopJeong committed Dec 30, 2020
1 parent 21c7890 commit 29163bd
Show file tree
Hide file tree
Showing 7 changed files with 149 additions and 77 deletions.
55 changes: 39 additions & 16 deletions examples/mobile/UIComponents/components/dialogs/picker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@

<body>
<div class="ui-page" id="demo-picker-page">
<link href="../../css/disable-page-reload-on-drag-down.css" rel="stylesheet" />
<div class="ui-header" data-position="fixed">
<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>
Expand All @@ -22,17 +23,17 @@ <h1>
<div data-role="content">
<ul class="ui-listview ui-content-area">
<li class="ui-li-anchor">
<a data-position-to="window" data-rel="popup" href="date-picker-calendar-dialog">
<a data-position-to="window" data-rel="popup" href="#date-picker-calendar-dialog">
Date picker Dialog (Calendar view)
</a>
</li>
<li class="ui-li-anchor">
<a data-position-to="window" data-rel="popup" href="time-picker-dialog-12h">
<a data-position-to="window" data-rel="popup" href="#time-picker-dialog-12h">
Time picker Dialog (12h)
</a>
</li>
<li class="ui-li-anchor">
<a data-position-to="window" data-rel="popup" href="time-picker-dialog-24h">
<a data-position-to="window" data-rel="popup" href="#time-picker-dialog-24h">
Time picker Dialog (24h)
</a>
</li>
Expand All @@ -42,15 +43,20 @@ <h1>
</a>
</li>
<li class="ui-li-anchor">
<a data-position-to="window" data-rel="popup" href="date-picker-wheel">
<a data-position-to="window" data-rel="popup" href="#date-picker-wheel">
Date picker (Wheel view)
</a>
</li>
<li class="ui-li-anchor">
<a data-position-to="window" data-rel="popup" href="date-time-picker-wheel">
<a data-position-to="window" data-rel="popup" href="#date-time-picker-wheel">
Date Time picker
</a>
</li>
<li class="ui-li-anchor">
<a data-position-to="window" data-rel="popup" href="#value-picker">
Value picker
</a>
</li>
</ul>
<div class="ui-popup" id="date-picker-calendar-dialog">
<div class="ui-popup-header">
Expand All @@ -60,9 +66,9 @@ <h1>
<div class="ui-calendar" data-past-selection="true"></div>
</div>
<div class="ui-popup-footer">
<button class="ui-btn" data-style="flat">Cancel</button>
<a class="ui-btn" data-style="flat" data-rel="back">Cancel</a>
<div class="ui-li-divider"></div>
<button class="ui-btn" data-style="flat">Done</button>
<a class="ui-btn" data-style="flat" data-rel="back">Done</a>
</div>
</div>
<div class="ui-popup" id="time-picker-dialog-12h">
Expand All @@ -73,9 +79,9 @@ <h1>
<div class="ui-time-picker"></div>
</div>
<div class="ui-popup-footer">
<button class="ui-btn" data-style="flat">Cancel</button>
<a class="ui-btn" data-style="flat" data-rel="back">Cancel</a>
<div class="ui-li-divider"></div>
<button class="ui-btn" data-style="flat">Done</button>
<a class="ui-btn" data-style="flat" data-rel="back">Done</a>
</div>
</div>
<div class="ui-popup" id="time-picker-dialog-24h">
Expand All @@ -86,33 +92,50 @@ <h1>
<div class="ui-time-picker" data-format="24"></div>
</div>
<div class="ui-popup-footer">
<button class="ui-btn" data-style="flat">Cancel</button>
<a class="ui-btn" data-style="flat" data-rel="back">Cancel</a>
<div class="ui-li-divider"></div>
<button class="ui-btn" data-style="flat">Done</button>
<a class="ui-btn" data-style="flat" data-rel="back">Done</a>
</div>
</div>
<div class="ui-popup" id="date-picker-wheel">
<div class="ui-popup-content ui-popup-has-date-picker">
<div class="ui-date-picker" data-view="wheel"></div>
</div>
<div class="ui-popup-footer">
<button class="ui-btn" data-style="flat">Cancel</button>
<a class="ui-btn" data-style="flat" data-rel="back">Cancel</a>
<div class="ui-li-divider"></div>
<button class="ui-btn" data-style="flat">Done</button>
<a class="ui-btn" data-style="flat" data-rel="back">Done</a>
</div>
</div>
<div class="ui-popup" id="date-time-picker-wheel">
<div class="ui-popup-content ui-popup-has-date-picker">
<div class="ui-datetime-picker" data-view="wheel" data-format="12" data-value="2020-03-12 14:46:20"></div>
</div>
<div class="ui-popup-footer">
<button class="ui-btn" data-style="flat">Cancel</button>
<a class="ui-btn" data-style="flat" data-rel="back">Cancel</a>
<div class="ui-li-divider"></div>
<a class="ui-btn" data-style="flat" data-rel="back">Done</a>
</div>
</div>
<div class="ui-popup" id="value-picker">
<div class="ui-popup-header">
Temperature
</div>
<div class="ui-popup-content">
<div class="ui-value-picker">
<div class="ui-spin ui-value-picker-value" style="width: 32%;" data-min="5" data-max="25" data-step="0.5" data-value="11"
data-loop="disabled" data-momentum-duration="400" data-momentum-level="1"></div>
<div class="ui-spin ui-value-picker-unit" data-min="0" data-max="1" data-value="0" data-labels="&#176;C,&#176;F"
data-loop="disabled"></div>
</div>
</div>
<div class="ui-popup-footer">
<a class="ui-btn" data-style="flat" data-rel="back">Cancel</a>
<div class="ui-li-divider"></div>
<button class="ui-btn" data-style="flat">Done</button>
<a class="ui-btn" data-style="flat" data-rel="back">Done</a>
</div>
</div>
</div>
<script src="./picker.js"></script>
</div>
</body>

Expand Down
25 changes: 0 additions & 25 deletions examples/mobile/UIComponents/components/dialogs/picker.js
View file

This file was deleted.

26 changes: 26 additions & 0 deletions examples/mobile/UIComponents/css/disable-page-reload-on-drag-down.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
body,
.ui-page {
/* Break the flow */
position: absolute;
top: 0px;

/* Give them all the available space */
width: 100%;
height: 100%;

/* Remove the margins if any */
margin: 0;

/* Allow them to scroll down the document */
overflow-y: hidden;
}

body {
/* Sending body at the bottom of the stack */
z-index: 1;
}

.ui-page {
/* Making the wrapper stack above the body */
z-index: 2;
}
9 changes: 6 additions & 3 deletions src/css/profile/mobile/common/popup.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@
color: var(--popup-text-color);
font-size: 14 * @sp_base;
.font(regular);

.text-left {
float: left;
}
Expand Down Expand Up @@ -215,6 +215,9 @@
max-width: 248 * @px_base;
&.ui-btn-flat {
font-size: 16 * @sp_base;
display: flex;
justify-content: center;
align-items: center;
}
}

Expand All @@ -234,7 +237,7 @@
margin-bottom: 0;
}
}

.ui-li-action {
width: 50%;
}
Expand Down Expand Up @@ -271,7 +274,7 @@
padding-right: 12 * @px_base;
}


.ui-listview {
li.ui-li-flex.ui-li-multilines {
.ui-li-area-a {
Expand Down
33 changes: 33 additions & 0 deletions src/css/profile/mobile/common/valuepicker.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.ui-value-picker {
display: flex;
padding-left: 36%;
padding-top: 19 * @px_base;
padding-bottom: 24 * @px_base;

/*disable-pull-to-refresh-effect*/
overscroll-behavior: contain;

.ui-spin-item {
line-height: 56 * @px_base;
}

.ui-value-picker-value {
width: 28%;
font-size: 32 * @px_base;
}

.ui-spin ~ .ui-spin {
margin-left: 4%;
}

.ui-value-picker-unit {
width: 25%;
font-size: 24 * @px_base;
align-items: flex-start;
}

@media (orientation: landscape) {
padding-top: 8 * @px_base;
padding-bottom: 11 * @px_base;
}
}
1 change: 1 addition & 0 deletions src/css/profile/mobile/mobile.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,5 +73,6 @@
@import "common/datepicker.less";
@import "common/datetimepickerwheel.less";
@import "common/datetimepicker.less";
@import "common/valuepicker.less";
@import "common/chip.less";
@import "common/badge.less";
Loading

0 comments on commit 29163bd

Please sign in to comment.