Drag-n-drop related styles.

svn changeset:12056/svn branch:6.3

4 files changed, 259 insertions, 61 deletions

diff --git a/WebContent/VAADIN/themes/runo/common/common.css b/WebContent/VAADIN/themes/runo/common/common.css
index 7b8317c4f3..14dfbea2db 100644
--- a/WebContent/VAADIN/themes/runo/common/common.css
+++ b/WebContent/VAADIN/themes/runo/common/common.css
@@ -9,8 +9,10 @@
 	line-height: 18px;
 }
 /* Global font styles */
+.v-app,
 .v-window,
 .v-popupview-popup,
+.v-tooltip,
 .v-app input,
 .v-app select,
 .v-app button,
@@ -22,7 +24,13 @@
 .v-popupview-popup input,
 .v-popupview-popup select,
 .v-popupview-popup button,
-.v-popupview-popup textarea {
+.v-popupview-popup textarea,
+.v-filterselect-suggestpopup,
+.v-datefield-popup,
+.v-contextmenu,
+.v-Notification,
+.v-menubar-submenu,
+.v-drag-element {
 	font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
 	color: #464f52;
 	font-size: 13px;
diff --git a/WebContent/VAADIN/themes/runo/datefield/datefield.css b/WebContent/VAADIN/themes/runo/datefield/datefield.css
index 018b60dd4b..e845901273 100644
--- a/WebContent/VAADIN/themes/runo/datefield/datefield.css
+++ b/WebContent/VAADIN/themes/runo/datefield/datefield.css
@@ -117,12 +117,7 @@
 	padding: 1px 3px;

 	background: transparent url(img/selected-bg.png) no-repeat 50% 50%;

 	border: none;

-}
-
-.v-datefield-calendarpanel-weeknumber {
-	color: #f66;
-}
-

+}

 .v-datefield-time {

 	font-size: 11px;

 }

diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css
index 5e8bc99a9d..5d121cd9b7 100644
--- a/WebContent/VAADIN/themes/runo/styles.css
+++ b/WebContent/VAADIN/themes/runo/styles.css
@@ -450,37 +450,14 @@ div.v-app-loading {
 	padding: 2px;
 }
 
-/* TODO jouni: replace debug colors */
-
 .v-drag-element {
-	z-index:60000;
-	position:absolute;
+	z-index: 60000;
+	position: absolute;
     opacity: 0.5;
     filter: alpha(opacity=50);
     cursor: default;
 }
 
-.v-ddwrapper {
-	background-color: cyan;
-}
-
-.v-ddwrapper-over-middle,
-.v-ddwrapper-over-center {
-	background-color: LightGreen;
-}
-.v-ddwrapper-over-top {
-	border-top: 2px solid green;
-}
-.v-ddwrapper-over-bottom {
-	border-bottom: 2px solid green;
-}
-.v-ddwrapper-over-left {
-	border-left: 2px solid green;
-}
-.v-ddwrapper-over-right {
-	border-right: 2px solid green;
-}
-
 .v-csslayout {
 	overflow: hidden;
 }
@@ -532,6 +509,11 @@ div.v-app-loading {
 	text-align: center;
 	white-space: nowrap;
 }
+.v-datefield-calendarpanel-weeknumber {
+	color: #999;
+	border-right: 1px solid #ddd;
+	font-size: 0.9em;
+}
 .v-datefield-calendarpanel-day,
 .v-datefield-calendarpanel-day-today {
 	cursor: pointer;
@@ -583,6 +565,138 @@ div.v-app-loading {
 	filter: alpha(opacity=30);
 }
 
+.v-ddwrapper {
+	padding: 2px;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+}
+.v-ddwrapper-over {
+	border: 2px solid #1d9dff;
+	background-color: #bcdcff;
+	padding: 0;
+}
+.v-ddwrapper-over {
+	background-color: rgba(169,209,255,.6);
+}
+.no-box-drag-hints .v-ddwrapper-over {
+	border: none;
+	background-color: transparent;
+	padding: 2px;
+}
+.v-app .v-ddwrapper-over-top,
+.v-window .v-ddwrapper-over-top,
+.v-popupview-popup .v-ddwrapper-over-top {
+	border: none;
+	border-top: 2px solid #1d9dff;
+	background-color: transparent;
+	padding: 2px;
+	padding-top: 0;
+	-moz-border-radius: 0;
+	-webkit-border-radius: 0;
+	border-radius: 0;
+}
+.v-app .v-ddwrapper-over-bottom,
+.v-window .v-ddwrapper-over-bottom,
+.v-popupview-popup .v-ddwrapper-over-bottom {
+	border: none;
+	border-bottom: 2px solid #1d9dff;
+	background-color: transparent;
+	padding: 2px;
+	padding-bottom: 0;
+	-moz-border-radius: 0;
+	-webkit-border-radius: 0;
+	border-radius: 0;
+}
+.v-app .v-ddwrapper-over-left,
+.v-window .v-ddwrapper-over-left,
+.v-popupview-popup .v-ddwrapper-over-left {
+	border: none;
+	border-left: 2px solid #1d9dff;
+	background-color: transparent;
+	padding: 2px;
+	padding-left: 0;
+	-moz-border-radius: 0;
+	-webkit-border-radius: 0;
+	border-radius: 0;
+}
+.v-app .v-ddwrapper-over-right,
+.v-window .v-ddwrapper-over-right,
+.v-popupview-popup .v-ddwrapper-over-right {
+	border: none;
+	border-right: 2px solid #1d9dff;
+	background-color: transparent;
+	padding: 2px;
+	padding-right: 0;
+	-moz-border-radius: 0;
+	-webkit-border-radius: 0;
+	border-radius: 0;
+}
+.v-ddwrapper,
+.v-ddwrapper-over,
+.v-app .v-ddwrapper-over-top,
+.v-window .v-ddwrapper-over-top,
+.v-popupview-popup .v-ddwrapper-over-top,
+.v-app .v-ddwrapper-over-bottom,
+.v-window .v-ddwrapper-over-bottom,
+.v-popupview-popup .v-ddwrapper-over-bottom,
+.v-app .v-ddwrapper-over-left,
+.v-window .v-ddwrapper-over-left,
+.v-popupview-popup .v-ddwrapper-over-left,
+.v-app .v-ddwrapper-over-right,
+.v-window .v-ddwrapper-over-right,
+.v-popupview-popup .v-ddwrapper-over-right {
+	border-color: rgba(0,109,232,.6);
+}
+
+.v-ddwrapper-over-top:before,
+.v-ddwrapper-over-bottom:after,
+.v-ddwrapper-over-left:before,
+.v-ddwrapper-over-right:before {
+	display: block;
+	content: "";
+	position: absolute;
+	width: 6px;
+	height: 6px;
+	margin-top: -4px;
+	margin-left: -2px;
+	background: transparent url(../base/common/img/drag-slot-dot.png) no-repeat;
+}
+.v-ddwrapper-over-bottom:after {
+	margin-top: -2px;
+}
+.v-ddwrapper-over-left:before,
+.v-ddwrapper-over-right:before {
+	background-position: 0 -6px;
+	margin-top: -2px;
+	margin-left: -4px;
+}
+.v-ddwrapper-over-right:before {
+	position: relative;
+	margin-bottom: -4px;
+	margin-right: -4px;
+	margin-left: 0;
+	width: auto;
+	background-position: 100% -6px;
+}
+
+.no-horizontal-drag-hints .v-ddwrapper-over-left {
+	padding-left: 2px;
+	border-left: none;
+}
+.no-horizontal-drag-hints .v-ddwrapper-over-right {
+	padding-right: 2px;
+	border-right: none;
+}
+.no-vertical-drag-hints .v-ddwrapper-over-top {
+	padding-top: 2px;
+	border-top: none;
+}
+.no-vertical-drag-hints .v-ddwrapper-over-bottom {
+	padding-bottom: 2px;
+	border-bottom: none;
+}
+
 .v-formlayout-cell .v-errorindicator {
 	display: block;
 }
@@ -1428,25 +1542,42 @@ div.v-progressindicator-indeterminate-disabled {
 .v-off {
 	color: #ddd;
 }
-
+/*************************************
+ * Drag'n'drop styles
+ *************************************/
+.v-table-drag .v-table-body {
+	border-color: #1d9dff;
+}
 .v-table-row-drag-middle .v-table-cell-content {
-	background-color: cyan;
+	background-color: #bcdcff;
 }
 .v-table-row-drag-top .v-table-cell-content {
-	border-top: 1px solid cyan ;
+	border-top: 2px solid #1d9dff;
 }
 .v-table-row-drag-top .v-table-cell-wrapper {
-	margin-top: -1px; /* compensate the space consumed by border hint */
+	margin-top: -2px; /* compensate the space consumed by border hint */
 }
 .v-table-row-drag-bottom .v-table-cell-content {
-	border-bottom: 1px solid cyan;
+	border-bottom: 2px solid #1d9dff;
 }
 .v-table-row-drag-bottom .v-table-cell-wrapper {
-	margin-bottom: -1px; /* compensate the space consumed by border hint */
+	margin-bottom: -2px; /* compensate the space consumed by border hint */
+}
+.v-table-row-drag-top .v-table-cell-content:first-child:before,
+.v-table-row-drag-bottom .v-table-cell-content:first-child:after {
+	display: block;
+	content: "";
+	position: absolute;
+	width: 6px;
+	height: 6px;
+	margin-top: -4px;
+	margin-left: -6px;
+	background: transparent url(../base/common/img/drag-slot-dot.png);
+}
+.v-ff .v-table-row-drag-bottom .v-table-cell-content:first-child:after,
+.v-ie .v-table-row-drag-bottom .v-table-cell-content:first-child:after {
+	margin-top: -2px;
 }
-
-
-
 
 .v-tabsheet,
 .v-tabsheet-content,
@@ -1668,9 +1799,11 @@ textarea.v-textarea-prompt {
 .v-tree {
 	text-align: left; /* Force default alignment */
 	overflow: hidden;
+	padding: 1px 0;
 }
 .v-tree-node {
 	background: transparent url(../base/common/img/sprites.png) no-repeat 5px -37px;
+	padding: 1px 0;
 }
 .v-tree-node-expanded {
 	background-position: -5px -10px;
@@ -1691,24 +1824,10 @@ div.v-tree-node-leaf {
 .v-tree-node-caption .v-icon {
 	vertical-align: middle;
 }
-
 .v-tree-node-selected span {
 	background: #999;
 	color: #fff;
 }
-
-.v-tree-node-caption-drag-top {
-	border-top:2px solid green;
-	margin-top: -2px;
-}
-.v-tree-node-caption-drag-bottom {
-	border-bottom:2px solid green;
-	margin-bottom: -2px;
-}
-.v-tree-node-caption-drag-center {
-	background-color:green;
-}
-
 .v-tree-node-children {
 	padding-left: 1em;
 }
@@ -1733,6 +1852,65 @@ div.v-tree-node-leaf {
 .v-ie6 .v-tree-node-children {
 	clear: left;
 }
+/***************************************
+ * Drag'n'drop styles
+ ***************************************/
+.v-tree .v-tree-node-drag-top {
+	border-top: 2px solid #1d9dff;
+	margin-top: -1px;
+	padding-top: 0;
+}
+.v-tree .v-tree-node-drag-bottom {
+	border-bottom: 2px solid #1d9dff;
+	margin-bottom: -1px;
+	padding-bottom: 0;
+}
+.v-tree .v-tree-node-drag-top:before,
+.v-tree .v-tree-node-drag-bottom:after,
+.v-tree .v-tree-node-caption-drag-center:after {
+	display: block;
+	content: "";
+	position: absolute;
+	width: 6px;
+	height: 6px;
+	margin-top: -4px;
+	background: transparent url(../base/common/img/drag-slot-dot.png);
+}
+.v-tree .v-tree-node-drag-bottom:after {
+	margin-top: -2px;
+}
+.v-tree .v-tree-node-caption-drag-center:after {
+	margin-left: 14px;
+}
+.v-ff .v-tree .v-tree-node-caption-drag-center:after,
+.v-ie .v-tree .v-tree-node-caption-drag-center:after {
+	margin-top: -2px;
+}
+.v-tree .v-tree-node-drag-top {
+	background-position: 5px -38px;
+}
+.v-tree .v-tree-node-drag-top.v-tree-node-expanded {
+	background-position: -5px -11px;
+}
+.v-tree .v-tree-node-caption-drag-center div {
+	border: 2px solid #1d9dff;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+	margin: -2px 2px -2px -2px;
+	background-color: #bcdcff;
+}
+.v-ie6 .v-tree .v-tree-node-caption-drag-center div {
+	margin: -2px ;
+}
+.v-tree .v-tree-node-caption-drag-center div {
+	background-color: rgba(169,209,255,.6);
+}
+.v-tree .v-tree-node-caption-drag-center div,
+.v-tree .v-tree-node-drag-top,
+.v-tree .v-tree-node-drag-bottom {
+	border-color: rgba(0,109,232,.6);
+}
 
 .v-upload-immediate {
 	position: relative;
@@ -2056,8 +2234,10 @@ div.v-window-header {
 	line-height: 18px;
 }
 /* Global font styles */
+.v-app,
 .v-window,
 .v-popupview-popup,
+.v-tooltip,
 .v-app input,
 .v-app select,
 .v-app button,
@@ -2069,7 +2249,13 @@ div.v-window-header {
 .v-popupview-popup input,
 .v-popupview-popup select,
 .v-popupview-popup button,
-.v-popupview-popup textarea {
+.v-popupview-popup textarea,
+.v-filterselect-suggestpopup,
+.v-datefield-popup,
+.v-contextmenu,
+.v-Notification,
+.v-menubar-submenu,
+.v-drag-element {
 	font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
 	color: #464f52;
 	font-size: 13px;
@@ -2261,11 +2447,6 @@ div.v-window-header {
 	background: transparent url(datefield/img/selected-bg.png) no-repeat 50% 50%;
 	border: none;
 }
-
-.v-datefield-calendarpanel-weeknumber {
-	color: #f66;
-}
-
 .v-datefield-time {
 	font-size: 11px;
 }
@@ -3482,6 +3663,13 @@ textarea.v-textarea-prompt {
 	height: 10px;
 	padding: 1px;
 }
+/***************************************
+ * Drag'n'drop styles
+ ***************************************/
+.v-tree .v-tree-node-drag-top,
+.v-tree .v-tree-node-drag-top.v-tree-node-expanded {
+	background-position: 2px 0;
+}
 
 .v-window {
 	color: #464f52;
diff --git a/WebContent/VAADIN/themes/runo/tree/tree.css b/WebContent/VAADIN/themes/runo/tree/tree.css
index 9ac9957df1..bbbf9c55ad 100644
--- a/WebContent/VAADIN/themes/runo/tree/tree.css
+++ b/WebContent/VAADIN/themes/runo/tree/tree.css
@@ -23,4 +23,11 @@
 	width: 14px;
 	height: 10px;
 	padding: 1px;
+}
+/***************************************
+ * Drag'n'drop styles
+ ***************************************/
+.v-tree .v-tree-node-drag-top,
+.v-tree .v-tree-node-drag-top.v-tree-node-expanded {
+	background-position: 2px 0;
 }
\ No newline at end of file