iOS should work slightly better now

bagus-stimata · Apr 9, 2014 · 28b3883 · 28b3883
1 parent 817ff2d
commit 28b3883
Show file tree

Hide file tree

Showing 12 changed files with 30 additions and 10 deletions.
diff --git a/WebContent/VAADIN/themes/valo-test/styles.scss b/WebContent/VAADIN/themes/valo-test/styles.scss
@@ -17,6 +17,7 @@
 //$v-overlay-shadow-style: 0 0 0 1px shade;
 //$v-window-shadow-style: none;
 //$v-font-weight--header: bold;
+//$v-table-background-color: #fff;
 
 //$v-bevel-style: inset 0 4px 1px hilite, inset 0 -4px 1px shade;
 

diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -33,9 +33,7 @@ $v-button-disabled-opacity: $v-disabled-opacity !default;
 
 
 @mixin v-valo-button-common-properties {
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-  -webkit-touch-callout: none;
-  @include user-select(none);
+  @include v-valo-tappable;
   cursor: $v-button-cursor;
   font-weight: $v-button-font-weight;
   position: relative;

diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
@@ -32,7 +32,7 @@
     top: .2em;
     z-index: 0;
     margin: 0;
-    
+
     &:focus ~ label:before {
       @include v-valo-button-focus-style($background-color: $background-color);
       box-shadow: v-valo-button-box-shadow($background-color), v-valo-focus-box-shadow();

diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -126,7 +126,8 @@ $v-combobox-hover-style-enabled: $v-hover-styles-enabled !default;
 
 @mixin v-valo-combobox-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
 																		 $background-color: $v-textfield-background-color) {
-	position: absolute;
+	@include v-valo-tappable;
+  position: absolute;
 	top: $v-textfield-border-width;
 	right: $v-textfield-border-width;
 	width: $unit-size;

diff --git a/WebContent/VAADIN/themes/valo/components/_csslayout.scss b/WebContent/VAADIN/themes/valo/components/_csslayout.scss
@@ -28,6 +28,8 @@
 		// Assume most components have borders. 
 		// This is just a best-guess, will need fine-tuning if border-widths vary from widget-to-widget
 		.v-widget {
+			vertical-align: middle;
+
 			@if $v-border-width > 0 {
 				margin-left: -$v-border-width;
 			} @else {

diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -101,9 +101,11 @@ $v-datefield-hover-style-enabled: $v-hover-styles-enabled !default;
 
 @mixin v-valo-datefield-button-style ($unit-size: $v-unit-size, $bevel-style: $v-bevel-style, $bevel-depth: $v-bevel-depth,
 																		  $background-color: $v-textfield-background-color) {
-	-webkit-appearance: none;
+  @include v-valo-tappable;
+  -webkit-appearance: none;
 	background: transparent;
 	border: none;
+  padding: 0;
 	position: absolute;
 	top: $v-textfield-border-width;
 	left: $v-textfield-border-width;

diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -53,7 +53,10 @@ $v-table-background-color: null !default;
 
 
 @function v-valo-table-background-color($context: $v-app-background-color) {
-	@return $context;
+	@if is-dark-color($context) {
+		@return darken($context, 2%);
+	}
+	@return lighten($context, 2%);
 }
 
 
@@ -389,7 +392,7 @@ $v-table-background-color: null !default;
 		height: $v-table-row-height + $v-table-border-width;
 		left: 0;
 		right: 0;
-		background: v-valo-focus-color($context: $background-color);
+		background: v-valo-focus-color();
 		@include opacity(.2);
 	}
 

diff --git a/WebContent/VAADIN/themes/valo/components/_twincolselect.scss b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss
@@ -41,6 +41,7 @@
       right: round($v-unit-size/4);
       top: $v-unit-size - $v-button-border-width;
       padding: 0;
+      text-align: center;
 
       &:first-child {
         top: 0;

diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss
@@ -23,6 +23,8 @@ $v-valo-global-included: false !default;
 
     .v-app {
       height: 100%;
+      // Cancel tap highlight from all elements inside the app
+      -webkit-tap-highlight-color: rgba(0,0,0,0);
     }
 
     .v-ui {

diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
@@ -207,4 +207,7 @@ $v-selection-item-font-weight: max(400, $v-font-weight);
 	border-radius: $v-border-radius;
 	overflow: hidden;
 	@include opacity(.5);
+
+	// This has the unfortunate side-effect of selecting an the table row where the drag is dropped
+	//pointer-events: none;
 }
diff --git a/WebContent/VAADIN/themes/valo/util/_util.scss b/WebContent/VAADIN/themes/valo/util/_util.scss
@@ -33,4 +33,13 @@
 
 @mixin v-valo-round {
   border-radius: 50%;
+}
+
+
+
+
+@mixin v-valo-tappable {
+  @include user-select(none);
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-touch-callout: none;
 }
diff --git a/src/com/vaadin/theme/valo/test/ValoThemeUI.java b/src/com/vaadin/theme/valo/test/ValoThemeUI.java
@@ -17,7 +17,6 @@
 import org.vaadin.risto.mockupcontainer.MockupDataSet;
 import org.vaadin.risto.mockupcontainer.MockupFactory;
 
-import com.vaadin.annotations.JavaScript;
 import com.vaadin.annotations.Theme;
 import com.vaadin.annotations.Title;
 import com.vaadin.data.Property.ValueChangeEvent;
@@ -86,7 +85,6 @@
 @SuppressWarnings("serial")
 @Theme("valo-test")
 @Title("Valo Theme Test")
-@JavaScript("fastclick.js")
 public class ValoThemeUI extends UI implements Handler {
 
     CssLayout root = new CssLayout();