Vaadin 7 compatible ColorPicker (#9201)

Change-Id: I44962ceedd5ef607e2fbe2af0d96808e0aef9cc5

15 files changed, 289 insertions, 1 deletions

diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss
index a16b063ba8..640978d316 100644
--- a/WebContent/VAADIN/themes/base/base.scss
+++ b/WebContent/VAADIN/themes/base/base.scss
@@ -5,6 +5,7 @@
 @import "button/checkbox.scss";
 @import "layout/layout.scss";
 @import "caption/caption.scss";
+@import "colorpicker/colorpicker.scss";
 @import "common/common.scss";
 @import "csslayout/csslayout.scss";
 @import "customcomponent/customcomponent.scss";
@@ -61,6 +62,7 @@
 	@include base-nativebutton;
 	@include base-checkbox;
 	@include base-caption;
+	@include base-colorpicker;
 	
 	// here for now to preserve old semantics
 	@include base-common;
diff --git a/WebContent/VAADIN/themes/base/colorpicker/colorpicker.scss b/WebContent/VAADIN/themes/base/colorpicker/colorpicker.scss
new file mode 100644
index 0000000000..bd4420b55b
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/colorpicker/colorpicker.scss
@@ -0,0 +1,209 @@
+@mixin base-colorpicker($name : v-colorpicker) {
+
+.#{$name} {
+	text-align: center;
+}
+
+.#{$name}-button-color {
+	border: 1px solid silver;
+	float: left;
+	width: 10px;
+	height: 10px;
+	margin-top: 2px;
+	margin-right: 5px;
+}
+
+.#{$name}-area {
+	border: 1px solid silver;
+	margin: 1px auto;
+}
+
+
+/***************** COLOR HISTORY COMPONENT *****************************/
+.#{$name}-history {
+	margin: 5px;
+}
+
+.#{$name}-history td {
+	border: 1px solid silver !important;
+}
+
+.#{$name}-history td {
+	line-height: 15px;
+}
+/***********************************************************************/
+
+
+/**************** COLOR POPUP COMPONENT ********************************/
+.#{$name}-popup {
+	width: 244px;
+}
+
+.#{$name}-popup .v-scrollable {
+	background-color: #dddddd;
+}
+
+.#{$name}-popup .v-tabsheet-content .v-scrollable {
+	background-color: #eaeaea;
+}
+
+.#{$name}-popup .v-tabsheet-content .v-tabsheet-tabsheetpanel {
+	background: transparent;
+}
+
+.#{$name}-popup .resize-button {
+	border: 0px solid silver;
+	background: url(images/resizebg.png);
+	margin-top: 5px;
+}
+
+.#{$name}-popup .resize-button-caption {
+	display: none;
+}
+
+.#{$name}-popup .resize-button:hover {
+	background: url(images/resizebg-selected.png);
+}
+
+.#{$name}-popup .resize-button:focus {
+	outline: none;
+}
+
+/***********************************************************************/
+
+
+/*********************** COLOR GRADIENT *******************************/
+.#{$name}-gradient {
+	width: 220px;
+	height: 220px;
+	padding-left: 10px;
+	margin-top: 0px;
+}
+
+.#{$name}-gradient .#{$name}-gradient-clicklayer {
+	background-color: white;
+	filter: alpha(opacity = 0);
+	opacity: 0;
+}
+
+.#{$name}-popup #rgb-gradient .#{$name}-gradient-background {
+	width: 220px;
+	height: 220px;
+	background: url(images/gradient2.png);
+}
+
+.#{$name}-popup #hsv-gradient .#{$name}-gradient-foreground {
+	background: url(images/gradient.png);
+}
+
+.#{$name}-popup .#{$name}-gradient-lowerbox {
+	border-right: 1px solid white;
+	border-top: 1px solid white;
+}
+
+.#{$name}-popup .#{$name}-gradient-higherbox {
+	border-left: 1px solid white;
+	border-bottom: 1px solid white;
+}
+/**********************************************************************/
+
+
+/************************ COLOR SLIDER ********************************/
+.#{$name}-popup .rgb-sliders {
+	width: 227px;
+	padding-left: 10px;
+	color: #444444;
+	text-shadow: 0 1px 0 #FFFFFF;
+}
+
+.#{$name}-popup .rgb-sliders .red .v-slider-base {
+	background-color: red;
+}
+
+.#{$name}-popup .rgb-sliders .green .v-slider-base {
+	background-color: green;
+}
+
+.#{$name}-popup .rgb-sliders .blue .v-slider-base {
+	background-color: blue;
+}
+
+.#{$name}-popup .hsv-sliders {
+	padding-left: 10px;
+	color: #444444;
+	text-shadow: 0 1px 0 #FFFFFF;
+}
+
+.#{$name}-popup .hue-slider {
+	height: 10px;
+	border: 0px solid silver;
+	background-image: url(images/slider_hue_bg.png);
+	background-color: transparent;
+	background-repeat: no-repeat;
+	background-position: 0 3px;
+	margin-top: 0px;
+}
+
+.#{$name}-popup .hue-slider .v-slider-handle {
+	margin-top: -2px;
+}
+
+.#{$name}-popup .hue-slider .v-slider-base {
+	border: 0px none;
+	height: 0px;
+	background-color: transparent;
+}
+/****************************************************************/
+
+
+/****************** COLOR PREVIEW *******************************/
+.#{$name}-popup .#{$name}-preview {
+	margin-top: 5px;
+	padding-left: 11px;
+	padding-right: 10px;
+	margin-bottom: 0px;
+}
+
+.#{$name}-popup .v-absolutelayout-wrapper {
+	width: 100%;
+	height: 100%;
+}
+
+.#{$name}-popup .#{$name}-preview-textfield {
+	background: none;
+	overflow: hidden;
+	overflow-y: hidden;
+	overflow-x: hidden;
+}
+
+.#{$name}-popup .v-textfield-dark {
+	color: #FFFFFF;
+}
+
+.#{$name}-popup .v-textfield-light {
+	color: #000000;
+}
+/****************************************************************/
+
+
+/*************** COLOR SELECT ***********************************/
+.#{$name}-popup .colorselect {
+	margin-top: 5px;
+	padding-left: 10px;
+	padding-right: 10px;
+}
+
+.#{$name}-popup .v-tabsheet .#{$name}-grid {
+	height: 319px;
+}
+
+.#{$name}-popup .colorselect td {
+	line-height: 15px;
+}
+
+.#{$name}-popup .v-filterselect {
+	padding-right: 16px;
+}
+/****************************************************************/
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/colorpicker/images/gradient.png b/WebContent/VAADIN/themes/base/colorpicker/images/gradient.png
new file mode 100644
index 0000000000..def063a8ab
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/colorpicker/images/gradient.png
diff --git a/WebContent/VAADIN/themes/base/colorpicker/images/gradient2.png b/WebContent/VAADIN/themes/base/colorpicker/images/gradient2.png
new file mode 100644
index 0000000000..f51ed752a7
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/colorpicker/images/gradient2.png
diff --git a/WebContent/VAADIN/themes/base/colorpicker/images/resizebg-selected.png b/WebContent/VAADIN/themes/base/colorpicker/images/resizebg-selected.png
new file mode 100644
index 0000000000..6e56ec0cc7
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/colorpicker/images/resizebg-selected.png
diff --git a/WebContent/VAADIN/themes/base/colorpicker/images/resizebg.png b/WebContent/VAADIN/themes/base/colorpicker/images/resizebg.png
new file mode 100644
index 0000000000..b6e3532713
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/colorpicker/images/resizebg.png
diff --git a/WebContent/VAADIN/themes/base/colorpicker/images/slider_hue_bg.png b/WebContent/VAADIN/themes/base/colorpicker/images/slider_hue_bg.png
new file mode 100644
index 0000000000..bcef2c5575
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/colorpicker/images/slider_hue_bg.png
diff --git a/WebContent/VAADIN/themes/chameleon/components/colorpicker/colorpicker.scss b/WebContent/VAADIN/themes/chameleon/components/colorpicker/colorpicker.scss
new file mode 100644
index 0000000000..98f00f0626
--- /dev/null
+++ b/WebContent/VAADIN/themes/chameleon/components/colorpicker/colorpicker.scss
@@ -0,0 +1,15 @@
+@mixin chameleon-colorpicker($name : v-colorpicker) {
+
+.#{$name}-button-color {
+	border: 1px solid #8B8B8B;
+}
+
+.#{$name}-popup {
+	width: 248px;
+}
+
+.#{$name}-popup .v-tabsheet .#{$name}-grid {
+	height: 308px;
+}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/chameleon/components/components.scss b/WebContent/VAADIN/themes/chameleon/components/components.scss
index 79b5a2d468..9f29827de0 100644
--- a/WebContent/VAADIN/themes/chameleon/components/components.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/components.scss
@@ -1,5 +1,6 @@
 @import "accordion/accordion.scss";
 @import "button/button.scss";
+@import "colorpicker/colorpicker.scss";
 @import "label/label.scss";
 @import "menubar/menubar.scss";
 @import "notification/notification.scss";
@@ -22,6 +23,7 @@
 
 	@include chameleon-accordion;
 	@include chameleon-button;
+	@include chameleon-colorpicker;
 	@include chameleon-label;
 	@include chameleon-menubar;
 	@include chameleon-notification;
diff --git a/WebContent/VAADIN/themes/liferay/colorpicker/colorpicker.scss b/WebContent/VAADIN/themes/liferay/colorpicker/colorpicker.scss
new file mode 100644
index 0000000000..fc50297388
--- /dev/null
+++ b/WebContent/VAADIN/themes/liferay/colorpicker/colorpicker.scss
@@ -0,0 +1,19 @@
+@mixin liferay-colorpicker($name : v-colorpicker) {
+
+.#{$name}-button-color {
+	border: 1px solid #999999;
+}
+
+.#{$name}-popup {
+	width: 252px;
+}
+
+.#{$name}-popup .v-tabsheet .#{$name}-grid {
+	height: 312px;
+}
+
+.#{$name}-popup .v-filterselect {
+	padding-right: 24px;
+}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/liferay/liferay.scss b/WebContent/VAADIN/themes/liferay/liferay.scss
index 3128e48c76..299542fea0 100644
--- a/WebContent/VAADIN/themes/liferay/liferay.scss
+++ b/WebContent/VAADIN/themes/liferay/liferay.scss
@@ -2,6 +2,7 @@
 
 @import "accordion/accordion.scss";
 @import "button/button.scss";
+@import "colorpicker/colorpicker.scss";
 
 @import "common/common.scss";
 
@@ -29,6 +30,7 @@
 	// TODO @each
 	@include liferay-accordion;
 	@include liferay-button;
+	@include liferay-colorpicker;
 	
 	@include liferay-common;
 	@include liferay-contextmenu;
diff --git a/WebContent/VAADIN/themes/reindeer/colorpicker/colorpicker.scss b/WebContent/VAADIN/themes/reindeer/colorpicker/colorpicker.scss
new file mode 100644
index 0000000000..4224691d12
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/colorpicker/colorpicker.scss
@@ -0,0 +1,15 @@
+@mixin reindeer-colorpicker($name : v-colorpicker) {
+
+.#{$name}-popup {
+	width: 246px;
+}
+
+.#{$name}-popup .v-tabsheet .#{$name}-grid {
+	height: 284px;
+}
+
+.#{$name}-popup .v-filterselect {
+	padding-right: 25px;
+}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/reindeer.scss b/WebContent/VAADIN/themes/reindeer/reindeer.scss
index ce6b54610e..f02fcf18a8 100644
--- a/WebContent/VAADIN/themes/reindeer/reindeer.scss
+++ b/WebContent/VAADIN/themes/reindeer/reindeer.scss
@@ -5,6 +5,7 @@
 @import "a-sprite-definitions/a-sprite-definitions.scss";
 @import "button/button.scss";
 @import "button/nativebutton.scss";
+@import "colorpicker/colorpicker.scss";
 
 @import "common/common.scss";
 
@@ -42,6 +43,7 @@
 	// TODO @include a-sprite-definitions;
 	@include reindeer-button;
 	@include reindeer-nativebutton;
+	@include reindeer-colorpicker;
 	@include reindeer-common;
 	@include reindeer-datefield;
 	@include reindeer-inlinedatefield;
diff --git a/WebContent/VAADIN/themes/runo/colorpicker/colorpicker.scss b/WebContent/VAADIN/themes/runo/colorpicker/colorpicker.scss
new file mode 100644
index 0000000000..df48c10a86
--- /dev/null
+++ b/WebContent/VAADIN/themes/runo/colorpicker/colorpicker.scss
@@ -0,0 +1,20 @@
+@mixin runo-colorpicker($name : v-colorpicker) {
+
+.#{$name}-popup {
+	width: 248px;
+}
+
+.#{$name}-popup .v-tabsheet .#{$name}-grid {
+	height: 305px;
+}
+
+.#{$name}-popup .v-tabsheet-deco {
+	background: none;
+	height: 0;
+}
+
+.#{$name}-popup .v-filterselect {
+	padding-right: 25px;
+}
+
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/runo.scss b/WebContent/VAADIN/themes/runo/runo.scss
index de4d2b3bbd..395f4d0b1b 100644
--- a/WebContent/VAADIN/themes/runo/runo.scss
+++ b/WebContent/VAADIN/themes/runo/runo.scss
@@ -4,6 +4,7 @@
 @import "accordion/accordion.scss";
 @import "button/button.scss";
 @import "caption/caption.scss";
+@import "colorpicker/colorpicker.scss";
 @import "common/common.scss";
 @import "datefield/datefield.scss";
 @import "inlinedatefield/inlinedatefield.scss";
@@ -39,6 +40,7 @@
 	@include runo-accordion;
 	@include runo-button;
 	@include runo-caption;
+	@include runo-colorpicker;
 	
 	@include runo-common;
 	
@@ -63,4 +65,4 @@
 	@include runo-textfield;
 	@include runo-tree;
 	@include runo-window;
-}
\ No newline at end of file
+}