Vaadin 7 compatible ColorPicker (#9201)

Change-Id: I44962ceedd5ef607e2fbe2af0d96808e0aef9cc5

7 files changed, 211 insertions, 0 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