Permalink
Browse files

[BUG #6054] Implement own mobile select box

- Fixed layout problem with gradients on dialog.
- Made Select Box better clickable in Android.
  • Loading branch information...
1 parent ac13417 commit 39acdd9a366dd4e0e51dd23770ab96fa3d16f451 Christopher Zuendorf committed with thron7 Mar 23, 2012
@@ -110,7 +110,7 @@ qx.Class.define("mobileshowcase.page.Form",
this.__info = new qx.ui.mobile.form.TextArea().set({placeholder:"Terms of Service"});
form.add(this.__info,"Terms of Service: ");
- this.__info.setValue("qooxdoo Licensing Information\n=============================\n\nqooxdoo may be used under the terms of either the\n\n * GNU Lesser General Public License (LGPL)\n http://www.gnu.org/licenses/lgpl.html\n\nor the\n\n * Eclipse Public License (EPL)\n http://www.eclipse.org/org/documents/epl-v10.php\n\nAs a recipient of qooxdoo, you may choose which license to receive the code \nunder. Certain files or entire directories may not be covered by this \ndual license, but are subject to licenses compatible to both LGPL and EPL.\nLicense exceptions are explicitly declared in all relevant files or in a \n\nLICENSE file in the relevant directories.");
+ this.__info.setValue("qooxdoo Licensing Information\n=============================\n\nqooxdoo may be used under the terms of GPL. \n");
this.__save = new qx.ui.mobile.form.ToggleButton();
this.__save.addListener("changeValue", this._enableFormSubmitting, this);
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8" />
+ <title>Mobile Showcase</title>
+
+ <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+ <meta name="format-detection" content="telephone=no" />
+
+ <!-- Comment the following block when using less.js (see below) -->
+ <link rel="stylesheet" type="text/css" media="screen" href="../../../framework/source/resource/qx/mobile/css/android.css">
+ <link rel="stylesheet" type="text/css" media="screen" href="resource/mobileshowcase/css/styles.css">
+
+ <!-- Uncomment the following block to use less.js -->
+ <!-- <link rel="stylesheet/less" type="text/css" media="screen" href="../../../framework/source/resource/qx/mobile/less/android.less">
+ <link rel="stylesheet/less" type="text/css" media="screen" href="resource/mobileshowcase/css/styles.css">
+ <script type="text/javascript" src="https://raw.github.com/cloudhead/less.js/master/dist/less-1.1.6.min.js"></script> -->
+
+ <script type="text/javascript" src="script/mobileshowcase.js"></script>
+ <script type="text/javascript" src="http://172.17.12.250:8081/target/target-script-min.js"></script>
+</head>
+<body>
+</body>
+</html>
@@ -201,7 +201,6 @@ qx.Class.define("qx.ui.mobile.form.SelectBox",
* @param title {String} the title to set on selection dialog.
*/
setDialogTitle : function(title) {
- console.log(title);
if(this.__selectionDialog){
this.__selectionDialog.setTitle(title);
}
Oops, something went wrong.
@@ -353,7 +353,7 @@ input[type="checkbox"]:checked {
.dialogTitleUnderline:after {
#gradient > .horizontal-four(#424242, #ffffff, #ffffff, #424242, 30%, 70%);
- line-height: 1px;
+ line-height: 10px;
content: ' ';
height: 1px;
width: 100%;
@@ -362,14 +362,6 @@ input[type="checkbox"]:checked {
padding: 0;
}
-//
-// SELECTBOX
-//
-
-.selectbox {
- margin-left:2px;
-}
-
//
// TOGGLEBUTTON
//
@@ -429,9 +421,12 @@ div.checked .toggleButtonSwitch:before {
.hbox();
.border-radius(4px);
.boxAlignCenter();
+
+ margin-left:2px;
+ padding-left:1px;
vertical-align:middle;
- height:25px;
+ height:35px;
cursor:pointer;
@@ -205,7 +205,15 @@
}
// From left to right with two intermediate colors
.horizontal-four(@begin, @mid1, @mid2, @end, @stop1: 33%, @stop2: 66%) {
- background-image: -webkit-gradient(linear, center left, center right, from(@begin), color-stop(@stop1, @mid1), color-stop(@stop2, @mid2), to(@end));
+ background-image: -webkit-gradient(
+ linear,
+ left bottom,
+ right top,
+ from(@begin),
+ color-stop(@stop1, @mid1),
+ color-stop(@stop2, @mid2),
+ to(@end)
+ );
background-image: -webkit-linear-gradient(left, @begin, @mid1 @stop1, @mid2 @stop2, @end);
background-image: -moz-linear-gradient(left, @begin, @mid1 @stop1, @mid2 @stop2, @end);
background-image: linear-gradient(to right, @begin, @mid1 @stop1, @mid2 @stop2, @end);

0 comments on commit 39acdd9

Please sign in to comment.