diff options
| author | Pekka Hyvönen <pekka@vaadin.com> | 2015-02-19 17:21:22 +0200 |
|---|---|---|
| committer | Pekka Hyvönen <pekka@vaadin.com> | 2015-02-23 15:02:39 +0200 |
| commit | bff2a3f558ea0416ae48b5595b59057a3475d6b6 (patch) | |
| tree | 978c92663379919221f55ed6bad4a88b4e1f20ff /WebContent/VAADIN | |
| parent | ad7bcdc7d22cedf30d76dd6d1ba7a1c9bcabdd53 (diff) | |
| download | vaadin-framework-bff2a3f558ea0416ae48b5595b59057a3475d6b6.tar.gz vaadin-framework-bff2a3f558ea0416ae48b5595b59057a3475d6b6.zip | |
Theming and UX for Grid column reordering. (#16643)
- Show sorting and focus on the dragged header.
- Keep the focused header/cell the same after drag.
- Make the drop marker get the same color as the grid selection.
- Make dragged header and the drag element theme customizable
- Valo related theming: little opacity, proper positioning
Change-Id: Ia1c6f72ef2c7b4333e64ac410e50ef3688461749
Diffstat (limited to 'WebContent/VAADIN')
| -rw-r--r-- | WebContent/VAADIN/themes/base/grid/grid.scss | 5 | ||||
| -rw-r--r-- | WebContent/VAADIN/themes/valo/components/_grid.scss | 9 |
2 files changed, 13 insertions, 1 deletions
diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss index d0bae911db..35024e27c0 100644 --- a/WebContent/VAADIN/themes/base/grid/grid.scss +++ b/WebContent/VAADIN/themes/base/grid/grid.scss @@ -14,6 +14,7 @@ $v-grid-row-focused-background-color: null !default; $v-grid-header-row-height: null !default; $v-grid-header-font-size: $v-font-size !default; $v-grid-header-background-color: $v-grid-row-background-color !default; +$v-grid-header-drag-marked-color: $v-grid-row-selected-background-color !default; $v-grid-footer-row-height: $v-grid-header-row-height !default; $v-grid-footer-font-size: $v-grid-header-font-size !default; @@ -61,12 +62,14 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default; > .#{$primaryStyleName}-cell { border: $v-grid-border; + margin-top: -10px; opacity: 0.9; filter: alpha(opacity=90); // IE8 + z-index: 30000; } > .#{$primaryStyleName}-drop-marker { - background-color: #197de1; + background-color: $v-grid-header-drag-marked-color; position: absolute; width: 3px; } diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss index 4cac9c5e43..0d6d2ff0a6 100644 --- a/WebContent/VAADIN/themes/valo/components/_grid.scss +++ b/WebContent/VAADIN/themes/valo/components/_grid.scss @@ -40,6 +40,15 @@ $v-grid-animations-enabled: $v-animations-enabled !default; text-shadow: valo-text-shadow($font-color: valo-font-color($v-grid-header-background-color), $background-color: $v-grid-header-background-color); } + .#{$primary-stylename}-header .#{$primary-stylename}-cell.dragged { + @include opacity(0.5, false); + @include transition (opacity .3s ease-in-out); + } + + .#{$primary-stylename}-header .#{$primary-stylename}-cell.dragged-column-header { + margin-top: round($v-grid-row-height/-2); + } + .#{$primary-stylename}-footer .#{$primary-stylename}-cell { @include valo-gradient($v-grid-footer-background-color); text-shadow: valo-text-shadow($font-color: valo-font-color($v-grid-footer-background-color), $background-color: $v-grid-footer-background-color); |