toggleswitch : text switch bug fix

change text toggleswitch view to jQM style(UX doesn't exist)

Change-Id: Iefaceb351797dc1b40323ec0650ba898118ce7a2

diff --git a/demos/tizen-winsets/index.html b/demos/tizen-winsets/index.html
index 1af25f2..260572d 100755 (executable)
--- a/demos/tizen-winsets/index.html
+++ b/demos/tizen-winsets/index.html
@@ -296,5 +296,6 @@
        <script src="widgets/list/list-edit.js"></script>
 
        <link rel="stylesheet" href="./widgets/tabbar/tabbar.css" />
+       <link rel="stylesheet" href="./widgets/switch/toggleswitch.css" />
 </body>
 </html>

diff --git a/demos/tizen-winsets/widgets/switch/toggleswitch.css b/demos/tizen-winsets/widgets/switch/toggleswitch.css
new file mode 100755 (executable)
index 0000000..a31faef
--- /dev/null
+++ b/demos/tizen-winsets/widgets/switch/toggleswitch.css
@@ -0,0 +1,3 @@
+.containing-element .ui-slider-switch {
+       width : 9em;
+}
\ No newline at end of file

diff --git a/demos/tizen-winsets/widgets/switch/toggleswitch.html b/demos/tizen-winsets/widgets/switch/toggleswitch.html
index 17539db..cd4bb9b 100755 (executable)
--- a/demos/tizen-winsets/widgets/switch/toggleswitch.html
+++ b/demos/tizen-winsets/widgets/switch/toggleswitch.html
@@ -3,38 +3,36 @@
                <h1>ToggleSwitch</h1>
        </div>
        <div class="content" data-role="content">
+               <label for="flip-1">1. Tizen normal switch:</label>
                <select name="flip-11" id="flip-11" data-role="slider">
                        <option value="off"></option>
                        <option value="on"></option>
-               </select> 
-               <br><br>
-
-               <label for="flip-1">Tizen switch:</label>
-               <select name="flip-1" id="flip-1" data-role="slider">
-                       <option value="off"></option>
-                       <option value="on"></option>
-               </select> 
-
-               <br><br>
-
-
-
-               <label for="flip-2">Flip switch:</label>
-               <select name="flip-2" id="flip-2" data-role="slider">
-                       <option value="offoffoffoffoffoffoffoffoffoffoffoff">OffOffOffOffOffOffOffOffOffOffOffOffOff</option>
-                       <option value="on">On</option>
-               </select> 
-
+               </select>
                <br><br>
 
                <div data-role="fieldcontain">
-               <label for="flip-3">Flip switch test:</label>
+               <label for="flip-3">2. Text toggle switch:<br>
+                       (support when webDev. write text to option tag)</label>
                        <select name="flip-3" id="flip-3" data-role="slider">
-                               <option value="nope">NopeNopeNopeNope</option>
-                               <option value="yep">YepYepYepYep</option>
-                       </select> 
-               </div>
+                               <option value="nope">Nope</option>
+                               <option value="yep">Yep</option>
+                       </select>
+               <div>
+               <br><br>
 
+               <div class ="containing-element">
+                       <label for="flip-2">Text toggle switch: set element width</label>
+                       <select name="flip-2" id="flip-2" data-role="slider">
+                               <option value="off">Long toggle off</option>
+                               <option value="on">Long toggle on</option>
+                       </select>
+               </div>
+               <p style="width:100%; padding:1em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+                        add element's width to css file <br>
+                       &nbsp;.containing-element .ui-slider-switch { <br>
+                       &nbsp&nbsp;width : 9em;<br>
+                       &nbsp;}<br>
+               </p>
 
        </div> <!-- /content -->
        <div data-role="footer">

diff --git a/src/themes/tizen/common/jquery.mobile.tizen.toggleswitch.less b/src/themes/tizen/common/jquery.mobile.tizen.toggleswitch.less
index 784ae08..344e4e8 100755 (executable)
--- a/src/themes/tizen/common/jquery.mobile.tizen.toggleswitch.less
+++ b/src/themes/tizen/common/jquery.mobile.tizen.toggleswitch.less
@@ -31,34 +31,60 @@ div.ui-slider.ui-toggle-switch {
                }
        }
 }
+.ui-slider-switch:not(.ui-toggle-switch) {
+       width : 92 * @unit_base;
+}
 
 div.ui-slider.ui-slider-switch:not(.ui-toggle-switch) {
        position : relative;
-       width : 5.5em;
+
        height : 32 * @unit_base;
+       border-radius : 15 * @unit_base;
+
+       .ui-slider-inneroffset {
+               position : relative;
+               margin : -1px 16 * @unit_base;
+               z-index : 1;
+       }
 
        a.ui-slider-handle {
                position : absolute;
                background : rgba(255, 255, 255, 1);
-               top : -34 * @unit_base;
-               margin-top : 30 * @unit_base;
+               top : 50%;
+               margin : 1px 0 0 -15 * @unit_base;
                border-radius : 15 * @unit_base;
                border : 2px solid gray;
+
+               width : 28 * @unit_base;
+               height : 28 * @unit_base;
        }
+
+       a.ui-slider-handle-snapping {
+               -webkit-transition : left 70ms linear;
+       }
+
        span {
                position : absolute;
                overflow : hidden;
                text-align : center;
                height :  32 * @unit_base;
                font-weight : bold;
-               border-radius : 10 * @unit_base;
+               font-size : 16 * @unit_base;
+               border-radius : 15 * @unit_base;
+               white-space : nowrap;
+               line-height : 2;
+
                &.ui-slider-label-a {
                        left : 0px;
                        color : white;
+                       z-index : 1;
+                       text-indent : -1.5em;
                }
                &.ui-slider-label-b {
                        right : 0px;
                        color : black;
+                       z-index : 0;
+                       text-indent : 1.5em;
                }
        }
-}
\ No newline at end of file
+}