From 993410e101ebc5b138dc3470c8a25d969f26fdd1 Mon Sep 17 00:00:00 2001
From: Jinhyuk Jun <jinhyuk.jun@samsung.com>
Date: Thu, 3 Jan 2013 11:25:54 +0900
Subject: [PATCH] toggleswitch : text switch bug fix

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

Change-Id: Iefaceb351797dc1b40323ec0650ba898118ce7a2
---
 demos/tizen-winsets/index.html                     |  1 +
 .../tizen-winsets/widgets/switch/toggleswitch.css  |  3 ++
 .../tizen-winsets/widgets/switch/toggleswitch.html | 46 +++++++++++-----------
 .../common/jquery.mobile.tizen.toggleswitch.less   | 36 ++++++++++++++---
 4 files changed, 57 insertions(+), 29 deletions(-)
 create mode 100755 demos/tizen-winsets/widgets/switch/toggleswitch.css

diff --git a/demos/tizen-winsets/index.html b/demos/tizen-winsets/index.html
index 1af25f2..260572d 100755
--- 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
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
--- 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
--- 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
+}
-- 
2.7.4