style has beed added(box,circle,nobg,round)
authorhjnim.kim <hjnim.kim@samsung.com>
Mon, 17 Dec 2012 09:24:37 +0000 (18:24 +0900)
committerGerrit Code Review <gerrit2@kim11>
Thu, 20 Dec 2012 11:05:26 +0000 (20:05 +0900)
Change-Id: I5a53419f129bc05ebf6e39721ac8a46f6d56dd5b

demos/tizen-winsets/widgets/button/button.html
demos/tizen-winsets/widgets/button/buttonNolist.html
demos/tizen-winsets/widgets/naviframe/naviframe_footer_more_button.html
libs/patch/0010-JQM-Applied-Tizen-Button-Style.patch
src/themes/tizen/common/jquery.mobile.button.less
src/themes/tizen/common/jquery.mobile.tizen.less

index 123d847..40c766b 100755 (executable)
@@ -50,6 +50,8 @@
                        <li class="ui-li-1line-btn2">List item<div  data-role="button" data-inline="true" data-icon="forward" data-style="circle"></div></li>
                        <li class="ui-li-1line-btn2">List item<div  data-role="button" data-inline="true" data-icon="call" data-style="circle"></div></li>
                        <li class="ui-li-1line-btn2">List item<div  data-role="button" data-inline="true" data-icon="star" data-style="nobg"></div></li>
+                       <li class="ui-li-1line-btn2">List item<div  data-role="button" data-inline="true" data-style="round">Test</div></li>
+                       <li class="ui-li-1line-btn2">List item<div  data-role="button" data-inline="true" data-icon="star" data-style="box"></div></li>
                        <li data-role="list-divider">custom buttons</li>
                        <li><a href="buttonNolist.html">Buttons Pages(not in list) </a></li>
                </ul>
index 235f593..cace429 100644 (file)
                <div data-role="button" data-inline="true" data-icon="call" data-iconpos="right">Icon Text</div>
                <div data-role="button" data-inline="true" data-icon="call" data-iconpos="left">Icon Text</div>
                <div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg"></div>
-               <div data-role="button" data-inline="true" data-icon="send" data-style="circle"></div><br/>
+               <div data-role="button" data-inline="true" data-icon="rename" data-style="circle"></div><br/>
                 HTML Code:
                 <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><div data-role="button" data-inline="true">DataInline True</div>
 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="right">Icon Text</div>
 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="left">Icon Text</div>
 <div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg"></div>
-<div data-role="button" data-inline="true" data-icon="send" data-style="circle"></div></textarea><br/><br/>
+<div data-role="button" data-inline="true" data-icon="rename" data-style="circle"></div></textarea><br/><br/>
                *Default Button (A tag)
                <a href="#buttonTest" data-role="button">A Tag Button</a>
                HTML Code:
index 24db5c4..33e4a73 100755 (executable)
@@ -21,8 +21,8 @@
        <div data-role="footer">
                <a href="#pop_js" data-role="button"  data-icon="naviframe-more" data-rel="popupwindow"></a>
 
-               <div data-role="button" data-inline="true">Button1</div>
-               <div data-role="button" data-inline="true">Button2</div>
+               <div data-role="button" data-inline="true" data-style="round">Button1</div>
+               <div data-role="button" data-inline="true" data-style="round">Button2</div>
 
                <div id="pop_js" data-role="popupwindow" data-show-arrow="true">
                <ul data-role="listview">
index 8ae0f76..fc07173 100644 (file)
@@ -34,13 +34,13 @@ index 3d7d884..0be6999 100644
 +                      buttonClass += " ui-btn-icon_only";
 +              } else if ( buttonStyle == "edit" ) {
 +                      buttonClass += " ui-btn-edit";
++              } else if ( buttonStyle == "round" ) {
++                      buttonClass += " ui-btn-round";
 +              }
 +
++
 +              if ( o.icon ) {
 +                      if ( $(el).text().length > 0 ) {
-+                              /* o.iconpos == "right" ?
-+                                      textClass += " ui-btn-text-padding-right" :
-+                                      textClass += " ui-btn-text-padding-left"; */
 +
 +                              switch ( o.iconpos ) {
 +                              case "right" :
index 3528955..a89d564 100755 (executable)
@@ -21,7 +21,6 @@
 .ui-header .ui-btn-inner.ui-btn-icon-only , .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner.ui-btn-icon-only 
 {
        padding: .4em 8 * @unit_base .5em; 
-       .LESSborder-radius-all(1.2rem);
 }      /* wongi_1024 : Button text middle align */
 .ui-btn-icon-notext { width: 24 * @unit_base; height: 24 * @unit_base; }
 .ui-btn-icon-notext .ui-btn-inner { padding: 2 * @unit_base 1 * @unit_base 2 * @unit_base 3 * @unit_base; }
 {
        padding: 0.2em 0.5em;
 }
-
+.ui-btn-icon-nobg.ui-btn-down-s .ui-btn-inner
+{
+       background: transparent ! important;
+}
 .ui-btn.ui-btn-box-s.ui-btn-down-s .ui-btn-inner
 {
        .LESSbutton_inner_pressstyle;
        box-shadow: none;
 }
 
-.ui-header .ui-btn.ui-btn-corner-all,
-.ui-footer .ui-btn.ui-btn-corner-all
-{
-       .LESSborder-radius-all(1.2rem);
-       font-weight:bold;
-}
-
 .ui-scroll-jump-top-bg .ui-btn-icon-left .ui-btn-inner
 {
        padding-left: 0;
 }
-/* Circle Icon BG : data-iconbg = "circle" */
-.ui-btn.ui-btn-box-s.ui-btn-icon_only
-{
-/*     background: transparent;
-       border: 0px;*/
-}
-.ui-btn.ui-btn-box-s .ui-btn-inner.ui-btn-corner-all.ui-btn-icon-only
-{
-       .LESSborder-radius-all(1.0em);
-}
+
 .ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt
 {
-        padding-top: 52 * @unit_base;
+       padding-top: 52 * @unit_base;
 }
 .ui-btn-icon-bottom .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-bottom .ui-btn-inner.ui-btn-hastxt
 {
 .ui-icon-bg                    {.tizen-icon-common;    background-image: url(images/00_btn_circle_bg_normal.png);      z-index:0; }
 .ui-icon-arrow-l               {.tizen-icon-common;    background-image: url(images/controls/button/00_button_left.png);       }
 .ui-icon-arrow-r               {.tizen-icon-common;    background-image: url(images/controls/button/00_button_right.png);      }
-.ui-icon-arrow-u               {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_closed.png);       }
-.ui-icon-arrow-d               {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_opened.png);       }
+.ui-icon-arrow-u               {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_opened.png);       }
+.ui-icon-arrow-d               {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_closed.png);       }
 .ui-icon-delete                        {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_cancel.png);       }
 .ui-icon-plus                  {.tizen-icon-common;    background-image: url(images/controls/button/00_button_plus.png);        }
 .ui-icon-minus                 {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_minus.png);        }
 .ui-btn-down-s .ui-icon-bg, .ui-btn-down-s.ui-tizen-icon-bg    {.tizen-icon-common;    background-image: url(images/00_btn_circle_bg_press.png); z-index:0;     }
 .ui-btn-down-s .ui-icon-arrow-l                {.tizen-icon-common;    background-image: url(images/controls/button/00_button_left_press.png); }
 .ui-btn-down-s .ui-icon-arrow-r                {.tizen-icon-common;    background-image: url(images/controls/button/00_button_right_press.png);        }
-.ui-btn-down-s .ui-icon-arrow-u                {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_closed_press.png);         }
-.ui-btn-down-s .ui-icon-arrow-d                {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_opened_press.png);         }
+.ui-btn-down-s .ui-icon-arrow-u                {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_opened_press.png);         }
+.ui-btn-down-s .ui-icon-arrow-d                {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_closed_press.png);         }
 .ui-btn-down-s .ui-icon-delete                 {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_cancel_press.png);         }
 .ui-btn-down-s .ui-icon-plus                   {.tizen-icon-common;    background-image: url(images/controls/button/00_button_plus_press.png);  }
 .ui-btn-down-s .ui-icon-minus                  {.tizen-icon-common;    background-image: url(images/controls/button/00_button_expand_minus_press.png);  }
 {
        box-shadow: none;
 }
-.ui-btn.ui-btn-corner-all.ui-btn-icon_only
+
+.ui-btn-corner-circle
 {
-        .LESSborder-radius-all(1em);
+       .LESSborder-radius-allimportant( 1em );
+}
+.ui-btn-round
+{
+       .LESSborder-radius-allimportant( 1.2em );
+}
+.ui-btn-round .ui-btn-inner
+{
+       .LESSborder-radius-allimportant( 1.2em );
 }
-
 .ui-btn.ui-btn-icon-nobg, .ui-btn .ui-btn-icon-nobg
 {
        background: transparent;
 {
        .LESSbutton_edit_style;
 }
-/*
-.ui-btn.ui-btn-edit.ui-btn-down-s .ui-btn-text 
-{
-       color: @color_button_EditTextPress;
-}
 
-.ui-btn.ui-btn-edit.ui-btn-down-s
-{
-        .LESSbutton_editpress_style;
-}
-*/
 .ui-btn-box-s
 {
-        .LESSbutton_box_style;
+       .LESSbutton_box_style;
 }
 
index 930e3c4..135953a 100755 (executable)
        -webkit-border-radius:  @radius;
        border-radius:          @radius;
 }
-
+.LESSborder-radius-allimportant(@radius) {
+       -o-border-radius:       @radius ! important;
+       -ms-border-radius:      @radius ! important;
+       -moz-border-radius:     @radius ! important;
+       -webkit-border-radius:  @radius ! important;
+       border-radius:          @radius ! important;
+}
 // Mixin : box ***************************
 .LESSbox-shadow(@hshadow, @vshadow, @blur, @color) {
        -o-box-shadow: @hshadow @vshadow @blur @color;