list : dialogue list demo change

align dialogue list (static/link)

Change-Id: I528573a1095f9b20ce881b78bbfe7519d920f188

diff --git a/demos/tizen-winsets/widgets/list/list-dialogue.html b/demos/tizen-winsets/widgets/list/list-dialogue.html
index 7f31894..00c2315 100755 (executable)
--- a/demos/tizen-winsets/widgets/list/list-dialogue.html
+++ b/demos/tizen-winsets/widgets/list/list-dialogue.html
@@ -4,33 +4,20 @@
        </div>
        <div class="content" data-role="content" data-scroll="y">
                <ul data-role="listview">
-
+                       <li data-role="list-divider" data-style="dialogue">Dialogue</li>
                        <li class="ui-li-dialogue">
                                1line
                        </li>
                        <li class="ui-li-dialogue">
-                               <a>1line (with link)</a>
-                       </li>
-                       <li class="ui-li-dialogue">
                                1line-sub
                                <span class="ui-li-text-sub">subtext</sub>
                        </li>
                        <li class="ui-li-dialogue">
-                               <a>
-                               1line-sub (with link)
-                               <span class="ui-li-text-sub">subtext</span>
-                               </a>
-                       </li>
-                       <li class="ui-li-dialogue">
-                               1line-setting
-                               <span class="ui-li-text-sub">Sub text</span>
-                       </li>
-                       <li class="ui-li-dialogue">
                                1line-btn1
-                               <div data-role="button" data-inline="true">Text Button</div>
+                               <div data-role="button" data-inline="true">Button</div>
                        </li>
                        <li class="ui-li-dialogue">
-                               1line-btn2
+                               1line-circle button
                                <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
                        </li>
                        <li class="ui-li-dialogue">
@@ -52,7 +39,7 @@
                        <li class="ui-li-dialogue">
                                1line-bigicon4
                                <img src="thumbnail.jpg" class="ui-li-bigicon">
-                               <div data-role="button" data-inline="true">Text Button</div>
+                               <div data-role="button" data-inline="true">Button</div>
                        </li>
                        <li class="ui-li-dialogue">
                                1line-bigicon5
@@ -67,286 +54,175 @@
                                        <option value="on"></option>
                                </select>
                        </li>
-                       <li class="ui-li-has-checkbox ui-li-dialogue">
-                               <form><input type="checkbox" data-style="check" name="c1line-check1" /></form>
-                               1line-check1
-                       </li>
-                       <li class="ui-li-has-checkbox ui-li-dialogue">
+                       <li class="ui-li-dialogue">
                                <form><input type="checkbox" data-style="check" name="c1line-check2" /></form>
-                               1line-check2
-                               <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
-                       </li>
-                       <li class="ui-li-has-checkbox ui-li-dialogue">
-                               <form><input type="checkbox" data-style="check" name="c1line-check3" /></form>
-                               1line-check3
-                               <img src="thumbnail.jpg" class="ui-li-bigicon">
-                       </li>
-                       <li class="ui-li-has-checkbox ui-li-dialogue">
-                               <form><input type="checkbox" data-style="check" name="c1line-check4" /></form>
-                               1line-check4
-                               <img src="thumbnail.jpg" class="ui-li-bigicon">
+                               1line-check1
                                <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
                        </li>
-                       <li class="ui-li-has-radio ui-li-dialogue">
-                               <form><input type="radio" /></form>
-                               1line-radio1
-                       </li>
-                       <li class="ui-li-has-radio ui-li-dialogue">
+                       <li class="ui-li-dialogue">
                                <form><input type="radio" /></form>
                                1line-radio3
                                <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
                        </li>
-                       <li class="ui-li-has-radio ui-li-dialogue">
-                               <form><input type="radio" /></form>
-                               <img src="thumbnail.jpg" class="ui-li-bigicon">
-                               1line-radio4
-                       </li>
-                       <li class="ui-li-has-radio ui-li-dialogue">
-                               <form><input type="radio" /></form>
-                               <img src="thumbnail.jpg" class="ui-li-bigicon">
-                               1line-radio5
-                               <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
-                       </li>
-
-                       <li class="ui-li-multiline ui-li-dialogue">
+                       <li class="ui-li-has-multiline ui-li-dialogue">
                                2line
                                <span class="ui-li-text-sub">Subtext</span>
                        </li>
-
-                       <li class="ui-li-multiline ui-li-dialogue">
-                               2line-sub-main
-                               <span class="ui-li-text-sub">Subtext</span>
-                       </li>
-
-                       <li class="ui-li-multiline ui-li-dialogue">
+                       <li class="ui-li-has-multiline ui-li-dialogue">
                                2line-2sub
                                <span class="ui-li-text-sub">Subtext</span>
                                <span class="ui-li-text-sub2">Subtext2</span>
                        </li>
-
-                       <li class="ui-li-multiline ui-li-dialogue">
+                       <li class="ui-li-has-multiline ui-li-dialogue">
                                2line-btn1
                                <span class="ui-li-text-sub">Subtext</span>
                                <div data-role="button" data-inline="true">button</div>
                        </li>
-
-                       <li class="ui-li-2line-btn1 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-btn1</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <div data-role="button" data-inline="true" data-icon="call"></div>
-                       </li>
-
-                       <li class="ui-li-2line-btn2 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-btn2</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
-                       </li>
-
-                       <li class="ui-li-2line-star1 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-star1</span>
-                       <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <span class="ui-li-text-sub2">Subtext2</span>
-                       </li>
-
-                       <li class="ui-li-2line-star2 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-star2</span>
-                       <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
-                       <span class="ui-li-text-sub"><img src="00_winset_icon_favorite_on.png">Subtext</span>
-                       <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
-                       </li>
-
-                       <li class="ui-li-2line-setting ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-setting</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       </li>
-
-                       <li class="ui-li-2line-toggle-setting ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-toggle-setting</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <select name="flip-11" id="flip-11" data-role="slider">
-                               <option value="off"></option>
-                               <option value="on"></option>
-                       </select>
-                       </li>
-
-                       <li class="ui-li-2line-btn-setting ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-btn-setting</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
-                       </li>
-
-                       <li class="ui-li-2line-bigicon0 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-bigicon0</span>
-                       <span class="ui-li-text-sub">Subtext<img src="00_winset_icon_favorite_on.png"></span>
-                       <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
-                       </li>
-
-                       <li class="ui-li-2line-bigicon1 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-bigicon1</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
-                       </li>
-
-                       <li class="ui-li-2line-bigicon2 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-bigicon2</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
-                       <span class="ui-li-text-sub2">Subtext2</span>
-                       </li>
-
-                       <li class="ui-li-2line-bigicon3 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-bigicon3</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
+                       <li class="ui-li-has-multiline ui-li-dialogue">
+                               <form><input type="checkbox"  name="c2line-check1" /></form>
+                               2line-check
+                               <span class="ui-li-text-sub">Subtext</span>
                        </li>
-
-                       <li class="ui-li-2line-bigicon4 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-bigicon4</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
+                       <li class="ui-li-has-multiline ui-li-dialogue">
+                               <form><input type="radio" /></form>
+                               2line-radio1
+                               <span class="ui-li-text-sub">Subtext</span>
                        </li>
-
-                       <li class="ui-li-2line-check1 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-check1</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <form><input type="checkbox" data-style="check" name="c2line-check1" /></form>
+                       <li class="ui-li-has-multiline ui-li-dialogue">
+                               2line-toggle-setting
+                               <span class="ui-li-text-sub">Subtext</span>
+                               <select name="flip-11" id="flip-11" data-role="slider">
+                                       <option value="off"></option>
+                                       <option value="on"></option>
+                               </select>
                        </li>
 
-                       <li class="ui-li-2line-check2 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-check2</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <form><input type="checkbox" data-style="check" name="c2line-check2" /></form>
-                       <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+                       <li data-role="list-divider" data-style="dialogue">Dialogue (with link)</li>
+                       <li class="ui-li-dialogue">
+                               <a>1line (with link)</a>
                        </li>
-
-                       <li class="ui-li-2line-check3 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-check3</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <form><input type="checkbox" data-style="check" name="c2line-check3" /></form>
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
+                       <li class="ui-li-dialogue">
+                               <a>
+                               1line-sub (with link)
+                               <span class="ui-li-text-sub">subtext</span>
+                               </a>
                        </li>
-
-
-                       <li class="ui-li-2line-radio1 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-radio1</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <form><input type="radio" /></form>
+                       <li class="ui-li-dialogue">
+                               <a>
+                                       1line-btn1 (with link)
+                                       <div data-role="button" data-inline="true">Button</div>
+                               </a>
                        </li>
-
-                       <li class="ui-li-2line-radio2 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-radio2</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <form><input type="radio" /></form>
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
+                       <li class="ui-li-dialogue">
+                               <a>
+                                       1line-circle button (with link)
+                                       <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+                               </a>
                        </li>
-
-
-                       <li class="ui-li-2line-colorbar1 ui-li-dialogue">
-                       <span class="ui-li-color-bar"></span>
-                       <span class="ui-li-text-main">2line-colorbar1</span>
-                       <span class="ui-li-text-sub">Subtext
-                               <img src="00_winset_icon_favorite_on.png">
-                               <img src="00_winset_icon_favorite_on.png">
-                               <img src="00_winset_icon_favorite_on.png">
-                       </span>
-                       <span class="ui-li-text-sub2">Subtext2</span>
-                       <div data-role="button" data-inline="true">button</div>
+                       <li class="ui-li-dialogue">
+                               <a>
+                                       1line-toggle (with link)
+                                       <select name="flip-11" id="flip-11" data-role="slider">
+                                               <option value="off"></option>
+                                               <option value="on"></option>
+                                       </select>
+                               </a>
                        </li>
-
-                       <li class="ui-li-2line-colorbar3 ui-li-dialogue">
-                       <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
-                       <span class="ui-li-text-main">2line-colorbar3<img src="00_winset_icon_favorite_on.png"></span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <div data-role="button" data-inline="true">button</div>
+                       <li class="ui-li-dialogue">
+                               <a> 
+                                       1line-bigicon1 (with link)
+                                       <img src="thumbnail.jpg" class="ui-li-bigicon">
+                               </a>
                        </li>
-
-                       <li class="ui-li-2line-colorbar3 ui-li-dialogue">
-                       <span class="ui-li-color-bar" style="background-color:rgba(204, 52, 52, 1);"></span>
-                       <span class="ui-li-text-main">2line-colorbar3<img src="00_winset_icon_favorite_on.png"></span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <div data-role="button" data-inline="true" data-icon="call"></div>
+                       <li class="ui-li-dialogue">
+                               <a> 
+                                       1line-bigicon2 (with link)
+                                       <img src="thumbnail.jpg" class="ui-li-bigicon">
+                                       <span class="ui-li-text-sub">Sub text</span>
+                               </a>
                        </li>
-
-                       <li class="ui-li-2line-colorbar3 ui-li-dialogue">
-                       <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
-                       <span class="ui-li-text-main">2line-colorbar3</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
+                       <li class="ui-li-dialogue">
+                               <a> 
+                                       1line-bigicon4 (with link)
+                                       <img src="thumbnail.jpg" class="ui-li-bigicon">
+                                       <div data-role="button" data-inline="true">Button</div>
+                               </a>
                        </li>
-
-                       <li class="ui-li-2line-bigicon8 ui-li-dialogue">
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
-                       <span class="ui-li-text-main">2line-bigicon8</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub">
+                       <li class="ui-li-dialogue">
+                               <a> 
+                                       1line-bigicon5 (with link)
+                                       <img src="thumbnail.jpg" class="ui-li-bigicon">
+                                       <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+                               </a>
                        </li>
-
-                       <li class="ui-li-2line-thumb1 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-thumb1</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
+                       <li class="ui-li-dialogue">
+                               <a> 
+                                       1line-bigicon5 (with link)
+                                       <img src="thumbnail.jpg" class="ui-li-bigicon">
+                                       <select name="flip-11" id="flip-11" data-role="slider">
+                                               <option value="off"></option>
+                                               <option value="on"></option>
+                                       </select>
+                               </a>
                        </li>
-
-                       <li class="ui-li-2line-thumb2 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-thumb2<img src="00_winset_icon_favorite_on.png"></span>
-                       <span class="ui-li-text-sub"><img src="00_winset_icon_favorite_on.png">Subtext</span>
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
+                       <li class="ui-li-dialogue">
+                               <a>
+                                       <form><input type="checkbox" data-style="check" name="c1line-check2" /></form>
+                                       1line-check1 (with link)
+                                       <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+                               </a>
                        </li>
-
-                       <li class="ui-li-2line-sub-main-bigicon1 ui-li-dialogue">
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <span class="ui-li-text-main">2line-sub-main-bigicon1</span>
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
+                       <li class="ui-li-dialogue">
+                               <a>
+                                       <form><input type="radio" /></form>
+                                       1line-radio3 (with link)
+                                       <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+                               </a>
                        </li>
-
-                       <li class="ui-li-2line-bigicon-pgbar1 ui-li-dialogue">
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
-                       <span class="ui-li-text-main">2line-bigicon-pgbar1</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <span class="ui-li-text-sub2">Subtext2</span>
-                       <div data-role="button" data-inline="true">Cancel</div>
-                       <div data-role="progressbar"></div>
+                       <li class="ui-li-has-multiline ui-li-dialogue">
+                               <a>
+                                       2line (with link)
+                                       <span class="ui-li-text-sub">Subtext</span>
+                               </a>
                        </li>
-
-                       <li class="ui-li-2line-bigicon-pgbar2 ui-li-dialogue">
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
-                       <span class="ui-li-text-main">2line-bigicon-pgbar2</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <div data-role="button" data-inline="true">button</div>
+                       <li class="ui-li-has-multiline ui-li-dialogue">
+                               <a>
+                                       2line-2sub (with link)
+                                       <span class="ui-li-text-sub">Subtext</span>
+                                       <span class="ui-li-text-sub2">Subtext2</span>
+                               </a>
                        </li>
-
-                       <li class="ui-li-2line-bigicon-pgbar2 ui-li-dialogue">
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
-                       <span class="ui-li-text-main">2line-bigicon-pgbar2</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <div data-role="button" data-inline="true" data-icon="call"></div>
+                       <li class="ui-li-has-multiline ui-li-dialogue">
+                               <a>
+                                       2line-btn1 (with link)
+                                       <span class="ui-li-text-sub">Subtext</span>
+                                       <div data-role="button" data-inline="true">button</div>
+                               </a>
                        </li>
-
-                       <li class="ui-li-2line-bigicon-pgbar3 ui-li-dialogue">
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
-                       <span class="ui-li-text-main">2line-bigicon-pgbar3</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <span class="ui-li-text-sub2">Subtext2</span>
-                       <div data-role="progressbar"></div>
+                       <li class="ui-li-has-multiline ui-li-dialogue">
+                               <a>
+                                       <form><input type="checkbox"  name="c2line-check1" /></form>
+                                       2line-check (with link)
+                                       <span class="ui-li-text-sub">Subtext</span>
+                               </a>
                        </li>
-
-                       <li class="ui-li-2line-icon-bigicon-btn ui-li-dialogue">
-                       <form><input type="checkbox" data-style="check" name="c2line-icon-bigicon-btn" /></form>
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
-                       <span class="ui-li-text-main">2line-icon-bigicon-btn</span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div>
+                       <li class="ui-li-has-multiline ui-li-dialogue">
+                               <a>
+                                       <form><input type="radio" /></form>
+                                       2line-radio1 (with link)
+                                       <span class="ui-li-text-sub">Subtext</span>
+                               </a>
                        </li>
-
-                       <li class="ui-li-2line-thumb3 ui-li-dialogue">
-                       <span class="ui-li-text-main">2line-thumb3<img src="00_winset_icon_favorite_on.png"></span>
-                       <span class="ui-li-text-sub">Subtext</span>
-                       <img src="thumbnail.jpg" class="ui-li-bigicon">
+                       <li class="ui-li-has-multiline ui-li-dialogue">
+                               <a>
+                                       2line-toggle-setting (with link)
+                                       <span class="ui-li-text-sub">Subtext</span>
+                                       <select name="flip-11" id="flip-11" data-role="slider">
+                                               <option value="off"></option>
+                                               <option value="on"></option>
+                                       </select>
+                               </a>
                        </li>
-
                </ul>
        </div>
        <div data-role="footer">

diff --git a/src/themes/tizen/common/jquery.mobile.listview.less b/src/themes/tizen/common/jquery.mobile.listview.less
index 1e4e239..dc0e946 100755 (executable)
--- a/src/themes/tizen/common/jquery.mobile.listview.less
+++ b/src/themes/tizen/common/jquery.mobile.listview.less
@@ -707,7 +707,7 @@ li:not(.ui-li-has-multiline) .ui-li-text-sub {
                > .ui-btn-inner {
                        margin-left : 0px;
                        margin-right : 0px;
-               
+                       border-bottom-width : 0px;
                }
 
                &:first-child {
@@ -727,6 +727,39 @@ li:not(.ui-li-has-multiline) .ui-li-text-sub {
                [data-role="button"]:last-child {
                        margin-right : 10 * @unit_base;
                }
+
+               .ui-link-inherit {
+                       >.ui-btn {
+                               margin-right : 0px;
+                       }
+               }
+
+               &.ui-li-static {
+                       .ui-li-text-sub, .ui-toggle-switch {
+                               right : 10 * @unit_base;
+                       }
+                       &.ui-li-has-checkbox,
+                       &.ui-li-has-radio {
+                               padding-left : 36 * @unit_base;
+                       }
+                       .ui-checkbox, .ui-radio {
+                               left : 0px;
+                       }
+               }
+               &.ui-li-has-multiline.ui-li-static {
+                       .ui-li-text-sub {
+                               padding-left : 10 * @unit_base;
+                       }
+                       .ui-li-text-sub2 {
+                               padding-right : 10 * @unit_base;
+                       }
+                       &.ui-li-has-checkbox,
+                       &.ui-li-has-radio {
+                               .ui-li-text-sub {
+                                       padding-left : 42 * @unit_base;
+                               }
+                       }
+               }
        }
 
        &> li.ui-li-dialogue.ui-body-s,