$v-table-border-color: null !default;
$v-table-border-radius: 0 !default;
$v-table-cell-padding-horizontal: round($v-unit-size/3) !default;
-//$v-table-cell-padding-horizontal-edge: round($v-unit-size/2.5) !default;
$v-table-resizer-width: round($v-unit-size/4.5) !default;
$v-table-sort-indicator-width: round($v-unit-size/2) !default;
$v-table-header-font-size: round($v-font-size * 0.86) !default;
.#{$primary-stylename}-cell-wrapper {
line-height: 1;
- min-height: $v-table-row-height;
- $vertical-padding: round(($v-table-row-height - $v-font-size)/2);
- padding: $vertical-padding $v-table-cell-padding-horizontal;
+ padding: 0 $v-table-cell-padding-horizontal;
@include box-sizing(border-box);
margin-right: 0 !important;
> .v-widget {
- margin: round($vertical-padding / -2) round($v-table-cell-padding-horizontal / -2);
+ // Leave some breathing room around the table cell and the widget
+ margin: round($v-table-cell-padding-horizontal / 4) round($v-table-cell-padding-horizontal / -2);
+
+ &.v-label,
+ &.v-checkbox,
+ &.v-select-optiongroup {
+ margin: 0;
+ }
+ &.v-progressbar {
+ margin-left: 0;
+ margin-right: 0;
+ }
}
}
@include valo-gradient($v-selection-color);
background-origin: border-box;
- color: valo-font-color($v-selection-color, 0.9);
+ $font-color: valo-font-color($v-selection-color, 0.9);
+ color: $font-color;
+ text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color);
+ .v-selected {
$gradient-end: first(last(valo-gradient-color-stops($v-selection-color)));
.#{$primary-stylename}-compact,
.#{$primary-stylename}-small {
- @include valo-table-spacing-style($row-height: round($v-table-row-height * $v-scaling-factor--small), $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2));
+ @include valo-table-spacing-style($row-height: $v-unit-size--small, $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2));
}
.#{$primary-stylename}-small {
}
.#{$primary-stylename}-cell-wrapper {
- padding: $vertical-padding $cell-padding-horizontal;
- min-height: $row-height;
+ padding-left: $cell-padding-horizontal;
+ padding-right: $cell-padding-horizontal;
> .v-widget {
- margin: round($vertical-padding / -2) round($cell-padding-horizontal / -2);
+ margin: round($cell-padding-horizontal / 4) round($cell-padding-horizontal / -2);
+
+ &.v-label,
+ &.v-checkbox,
+ &.v-select-optiongroup {
+ margin: 0;
+ }
+ &.v-progressbar {
+ margin-left: 0;
+ margin-right: 0;
+ }
}
}
font-size: $v-font-size--tiny;
}
+ .#{$primary-stylename}-compact,
.#{$primary-stylename}-small {
@include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
+ }
+
+ .#{$primary-stylename}-small {
font-size: $v-font-size--small;
}
@include valo-textfield-inline-icon($stylenames: inline-icon);
@include valo-textfield-inline-icon($stylenames: inline-icon tiny, $unit-size: $v-unit-size--tiny, $font-size: $v-font-size--tiny);
+ @include valo-textfield-inline-icon($stylenames: inline-icon compact, $unit-size: $v-unit-size--small);
@include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
@include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large);
@include valo-textfield-inline-icon($stylenames: inline-icon huge, $unit-size: $v-unit-size--huge, $font-size: $v-font-size--huge);
@mixin valo-textfield-prompt-style ($background-color: $v-textfield-background-color) {
- @if type-of($background-color) == color {
+ @if $background-color == transparent {
+ color: inherit;
+ @include opacity(.5);
+ } @else if type-of($background-color) == color {
$font-color: valo-font-color($background-color);
$font-color: mix($background-color, $font-color);
@if is-dark-color($background-color) and saturation($background-color) > 50% {
border-radius: 0;
background: $background-color;
@include box-shadow(none);
- @if $background-color == transparent {
- color: inherit;
- } @else if type-of($background-color) == color {
- color: valo-font-color($background-color);
+
+ $font-color: inherit;
+ @if $background-color != transparent and type-of($background-color) == color {
+ $font-color: valo-font-color($background-color);
}
+ color: $font-color;
&:focus {
@include box-shadow(none);
}
+
+ &[class*="prompt"] {
+ @include valo-textfield-prompt-style($background-color);
+ }
}
import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
import com.vaadin.ui.Button;
import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.DateField;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
+import com.vaadin.ui.OptionGroup;
+import com.vaadin.ui.ProgressBar;
+import com.vaadin.ui.Slider;
import com.vaadin.ui.Table;
import com.vaadin.ui.Table.Align;
import com.vaadin.ui.Table.ColumnGenerator;
CheckBox compact = new CheckBox("Compact");
CheckBox small = new CheckBox("Small");
CheckBox rowIndex = new CheckBox("Row index", false);
- CheckBox rowIcon = new CheckBox("Row icon", true);
+ CheckBox rowIcon = new CheckBox("Row icon", false);
CheckBox rowCaption = new CheckBox("Row caption", false);
+ CheckBox componentsInCells = new CheckBox("Components in Cells", false);
Table table;
wrap.addComponents(hierarchical, footer, sized, expandRatios, stripes,
verticalLines, horizontalLines, borderless, headers, compact,
- small, rowIndex, rowCaption, rowIcon);
+ small, rowIndex, rowCaption, rowIcon, componentsInCells);
ValueChangeListener update = new ValueChangeListener() {
@Override
borderless.getValue(), headers.getValue(),
compact.getValue(), small.getValue(),
rowIndex.getValue(), rowCaption.getValue(),
- rowIcon.getValue());
+ rowIcon.getValue(), componentsInCells.getValue());
}
};
rowIndex.addValueChangeListener(update);
rowCaption.addValueChangeListener(update);
rowIcon.addValueChangeListener(update);
+ componentsInCells.addValueChangeListener(update);
footer.setValue(false);
boolean expandRatios, boolean stripes, boolean verticalLines,
boolean horizontalLines, boolean borderless, boolean headers,
boolean compact, boolean small, boolean rowIndex,
- boolean rowCaption, boolean rowIcon) {
+ boolean rowCaption, boolean rowIcon, boolean componentsInRows) {
table.setSelectable(true);
table.setMultiSelect(true);
table.setSortEnabled(true);
table.setColumnAlignment(ValoThemeUI.INDEX_PROPERTY, Align.CENTER);
table.removeContainerProperty("textfield");
- table.addContainerProperty("textfield", TextField.class, null);
-
table.removeGeneratedColumn("textfield");
- table.addGeneratedColumn("textfield", new ColumnGenerator() {
- @Override
- public Object generateCell(Table source, Object itemId,
- Object columnId) {
- TextField tf = new TextField();
- tf.setInputPrompt("Type here…");
- return tf;
- }
- });
-
table.removeContainerProperty("button");
- table.addContainerProperty("button", Button.class, null);
-
table.removeGeneratedColumn("button");
- table.addGeneratedColumn("button", new ColumnGenerator() {
- @Override
- public Object generateCell(Table source, Object itemId,
- Object columnId) {
- Button b = new Button("Button");
- return b;
- }
- });
-
+ table.removeContainerProperty("label");
+ table.removeGeneratedColumn("label");
+ table.removeContainerProperty("checkbox");
+ table.removeGeneratedColumn("checkbox");
+ table.removeContainerProperty("datefield");
+ table.removeGeneratedColumn("datefield");
+ table.removeContainerProperty("combobox");
+ table.removeGeneratedColumn("combobox");
+ table.removeContainerProperty("optiongroup");
+ table.removeGeneratedColumn("optiongroup");
+ table.removeContainerProperty("slider");
+ table.removeGeneratedColumn("slider");
+ table.removeContainerProperty("progress");
+ table.removeGeneratedColumn("progress");
+
+ if (componentsInRows) {
+ table.addContainerProperty("textfield", TextField.class, null);
+ table.addGeneratedColumn("textfield", new ColumnGenerator() {
+ @Override
+ public Object generateCell(Table source, Object itemId,
+ Object columnId) {
+ TextField tf = new TextField();
+ tf.setInputPrompt("Type here…");
+ // tf.addStyleName("compact");
+ if ((Integer) itemId % 2 == 0) {
+ tf.addStyleName("borderless");
+ }
+ return tf;
+ }
+ });
+
+ table.addContainerProperty("datefield", TextField.class, null);
+ table.addGeneratedColumn("datefield", new ColumnGenerator() {
+ @Override
+ public Object generateCell(Table source, Object itemId,
+ Object columnId) {
+ DateField tf = new DateField();
+ tf.addStyleName("compact");
+ if ((Integer) itemId % 2 == 0) {
+ tf.addStyleName("borderless");
+ }
+ return tf;
+ }
+ });
+
+ table.addContainerProperty("combobox", TextField.class, null);
+ table.addGeneratedColumn("combobox", new ColumnGenerator() {
+ @Override
+ public Object generateCell(Table source, Object itemId,
+ Object columnId) {
+ ComboBox tf = new ComboBox();
+ tf.setInputPrompt("Select");
+ tf.addStyleName("compact");
+ if ((Integer) itemId % 2 == 0) {
+ tf.addStyleName("borderless");
+ }
+ return tf;
+ }
+ });
+
+ table.addContainerProperty("button", Button.class, null);
+ table.addGeneratedColumn("button", new ColumnGenerator() {
+ @Override
+ public Object generateCell(Table source, Object itemId,
+ Object columnId) {
+ Button b = new Button("Button");
+ b.addStyleName("small");
+ return b;
+ }
+ });
+
+ table.addContainerProperty("label", TextField.class, null);
+ table.addGeneratedColumn("label", new ColumnGenerator() {
+ @Override
+ public Object generateCell(Table source, Object itemId,
+ Object columnId) {
+ Label label = new Label("Label component");
+ label.setSizeUndefined();
+ label.addStyleName("bold");
+ return label;
+ }
+ });
+
+ table.addContainerProperty("checkbox", TextField.class, null);
+ table.addGeneratedColumn("checkbox", new ColumnGenerator() {
+ @Override
+ public Object generateCell(Table source, Object itemId,
+ Object columnId) {
+ CheckBox cb = new CheckBox(null, true);
+ return cb;
+ }
+ });
+
+ table.addContainerProperty("optiongroup", TextField.class, null);
+ table.addGeneratedColumn("optiongroup", new ColumnGenerator() {
+ @Override
+ public Object generateCell(Table source, Object itemId,
+ Object columnId) {
+ OptionGroup op = new OptionGroup();
+ op.addItem("Male");
+ op.addItem("Female");
+ op.addStyleName("horizontal");
+ return op;
+ }
+ });
+
+ table.addContainerProperty("slider", TextField.class, null);
+ table.addGeneratedColumn("slider", new ColumnGenerator() {
+ @Override
+ public Object generateCell(Table source, Object itemId,
+ Object columnId) {
+ Slider s = new Slider();
+ s.setValue(30.0);
+ return s;
+ }
+ });
+
+ table.addContainerProperty("progress", TextField.class, null);
+ table.addGeneratedColumn("progress", new ColumnGenerator() {
+ @Override
+ public Object generateCell(Table source, Object itemId,
+ Object columnId) {
+ ProgressBar bar = new ProgressBar();
+ bar.setValue(0.7f);
+ return bar;
+ }
+ });
+ }
table.setFooterVisible(footer);
if (footer) {
table.setColumnFooter(ValoThemeUI.CAPTION_PROPERTY, "caption");
projects / vaadin-framework.git / commitdiff