From f17fcfbd9efb712f99ef63b77cb8c9d7b8723998 Mon Sep 17 00:00:00 2001 From: Jayrok94 Date: Wed, 26 Oct 2016 15:35:23 -0400 Subject: [PATCH] Addresses Issues #13 #12 #10 --- .../responsivelayout/ResponsiveColumn.java | 40 ++++-- .../responsivelayout/ResponsiveLayout.java | 27 ++-- .../responsivelayout/ResponsiveRow.java | 116 ++++++++++++++++-- .../com/jarektoro/responsivelayout/styles.css | 61 ++++++++- .../responsivelayout/BasicFullPageUI.java | 66 ++++++++-- 5 files changed, 274 insertions(+), 36 deletions(-) diff --git a/src/main/java/com/jarektoro/responsivelayout/ResponsiveColumn.java b/src/main/java/com/jarektoro/responsivelayout/ResponsiveColumn.java index e0ce621..6ea50f0 100644 --- a/src/main/java/com/jarektoro/responsivelayout/ResponsiveColumn.java +++ b/src/main/java/com/jarektoro/responsivelayout/ResponsiveColumn.java @@ -35,6 +35,10 @@ public enum DisplaySize { XS, SM, MD, LG } + public enum ColumnComponentAlignment { + LEFT, CENTER, RIGHT + } + private void convenienceInIt() { @@ -44,11 +48,11 @@ private void convenienceInIt() { setPrimaryStyleName("col"); + setSizeUndefined(); rules = new HashSet<>(4); visibilityRules = new HashSet<>(4); root = new CssLayout(); root.setStyleName("col-container"); - root.setSizeFull(); setCompositionRoot(root); } @@ -299,15 +303,31 @@ public void setOffset(DisplaySize displaySize, int width) { } - public void centerContent(boolean shouldCenter) { - if (shouldCenter) { - addStyleName("content-center"); - } else { - removeStyleName("content-center"); + public void setAlignment(ColumnComponentAlignment componentAlignment) { + removeStyleName("content-center"); + removeStyleName("content-right"); + + + switch (componentAlignment) { + + + case CENTER: + addStyleName("content-center"); + break; + case LEFT: + break; + case RIGHT: + addStyleName("content-right"); + break; + default: + break; } } + + + public void setComponent(Component component) { root.removeAllComponents(); root.addComponent(component); @@ -348,7 +368,13 @@ public ResponsiveColumn withComponent(Component component) { } public ResponsiveColumn withCenteredComponent(Component component) { - centerContent(true); + setAlignment(ColumnComponentAlignment.CENTER); + setComponent(component); + return this; + } + + public ResponsiveColumn withRightAlignedComponent(Component component) { + setAlignment(ColumnComponentAlignment.RIGHT); setComponent(component); return this; } diff --git a/src/main/java/com/jarektoro/responsivelayout/ResponsiveLayout.java b/src/main/java/com/jarektoro/responsivelayout/ResponsiveLayout.java index 1f98a1d..458c2c7 100644 --- a/src/main/java/com/jarektoro/responsivelayout/ResponsiveLayout.java +++ b/src/main/java/com/jarektoro/responsivelayout/ResponsiveLayout.java @@ -10,27 +10,38 @@ @StyleSheet("styles.css") public class ResponsiveLayout extends CssLayout { + public enum ContainerType { + FIXED, FLUID + } + + + public ResponsiveLayout(ContainerType containerType) { + super(); + setHeightUndefined(); + setContainerType(containerType); + } - // just about the same as a StyleAdpterCssLayout - // mainly syntax diffs. public ResponsiveLayout() { super(); setHeightUndefined(); - setWidth("100%"); } + public void setContainerType(ContainerType containerType) { + if (containerType == ContainerType.FLUID) { + setStyleName("container-fluid"); + } else if (containerType == ContainerType.FIXED) { + setStyleName("container"); - //when size is set to full. It sets the css property 'overflow' to 'hidden' - // this inhibits scrolling to counter act that you can set a boolean var to add scrolling - public void setSizeFull(boolean scrollable) { - super.setSizeFull(); + } + } + + public void setScrollable(boolean scrollable) { if (scrollable) { addStyleName("scrollable-anyway"); } else { removeStyleName("scrollable-anyway"); } - } /** diff --git a/src/main/java/com/jarektoro/responsivelayout/ResponsiveRow.java b/src/main/java/com/jarektoro/responsivelayout/ResponsiveRow.java index cebc7ef..6a784d8 100644 --- a/src/main/java/com/jarektoro/responsivelayout/ResponsiveRow.java +++ b/src/main/java/com/jarektoro/responsivelayout/ResponsiveRow.java @@ -2,6 +2,7 @@ import com.vaadin.ui.Alignment; +import com.vaadin.ui.Component; import com.vaadin.ui.CssLayout; import com.vaadin.ui.VerticalLayout; @@ -12,6 +13,14 @@ public class ResponsiveRow extends CssLayout { + public enum MarginSize { + NORMAL, SMALL + } + + public enum SpacingSize { + NORMAL, SMALL + } + public ResponsiveRow() { setPrimaryStyleName("row"); @@ -33,7 +42,7 @@ public void addColumn(ResponsiveColumn col) { //add ResponsiveColumn to Component List then recalulates the margin and spacing to match - addComponent(col); + super.addComponent(col); } @@ -50,23 +59,38 @@ public void setMargin(boolean margin) { } - public void setMarginSmall(boolean small) { + public void setMargin(MarginSize marginSize, boolean margin) { - if (small) { - addStyleName("margin-small"); - } else { + if (margin){ + removeStyleName("margin"); + removeStyleName("margin-small"); + if (marginSize == MarginSize.NORMAL) { + addStyleName("margin"); + + } else if (marginSize == MarginSize.SMALL) { + addStyleName("margin"); + addStyleName("margin-small"); + } + }else{ + removeStyleName("margin"); removeStyleName("margin-small"); } } + public void setSpacing(boolean spacing) { setVerticalSpacing(spacing); setHorizontalSpacing(spacing); } + public void setSpacing(SpacingSize spacingSize, boolean spacing) { + setVerticalSpacing(spacingSize,spacing); + setHorizontalSpacing(spacingSize, spacing); + } + public void setVerticalSpacing(boolean verticalSpacing) { @@ -88,6 +112,62 @@ public void setHorizontalSpacing(boolean horizontalSpacing) { } + } + + public void setVerticalSpacing(SpacingSize spacingSize, boolean verticalSpacing) { + + + + + if (verticalSpacing) { + removeStyleName("v-col-spacing"); + removeStyleName("v-col-spacing-small"); + + if (spacingSize == SpacingSize.NORMAL) { + addStyleName("v-col-spacing"); + + + } else if (spacingSize == SpacingSize.SMALL) { + addStyleName("v-col-spacing"); + addStyleName("v-col-spacing-small"); + } + + + } else { + + removeStyleName("v-col-spacing"); + removeStyleName("v-col-spacing-small"); + + } + + } + + public void setHorizontalSpacing(SpacingSize spacingSize, boolean horizontalSpacing) { + + + + if (horizontalSpacing) { + removeStyleName("h-col-spacing"); + removeStyleName("h-col-spacing-small"); + + if (spacingSize == SpacingSize.NORMAL) { + addStyleName("h-col-spacing"); + + + } else if (spacingSize == SpacingSize.SMALL) { + addStyleName("h-col-spacing"); + addStyleName("h-col-spacing-small"); + } + + + } else { + + removeStyleName("h-col-spacing"); + removeStyleName("h-col-spacing-small"); + + } + + } public void setDefaultComponentAlignment(Alignment defaultAlignment) { @@ -139,6 +219,22 @@ public void setDefaultComponentAlignment(Alignment defaultAlignment) { } + @Override public void addComponents(Component... components){ + + for (Component component:components) { + ResponsiveColumn col = new ResponsiveColumn().withComponent(component); + col.setSizeUndefined(); + addColumn(col); + } + + } + @Override public void addComponent(Component component){ + + ResponsiveColumn col = new ResponsiveColumn().withComponent(component); + col.setSizeUndefined(); + addColumn(col); + + } // Convenience API public ResponsiveColumn addColumn() { @@ -147,6 +243,11 @@ public ResponsiveColumn addColumn() { return column; } + public ResponsiveRow withComponents(Component... components) { + addComponents(components); + return this; + } + public ResponsiveRow withAlignment(Alignment alignment) { setDefaultComponentAlignment(alignment); return this; @@ -158,8 +259,7 @@ public ResponsiveRow withMargin(boolean margin) { } public ResponsiveRow withSmallMargin(boolean margin) { - setMargin(margin); - setMarginSmall(margin); + setMargin(MarginSize.SMALL,margin);; return this; } @@ -179,4 +279,6 @@ public ResponsiveRow withHorizontalSpacing(boolean spacing) { return this; } + + } diff --git a/src/main/resources/com/jarektoro/responsivelayout/styles.css b/src/main/resources/com/jarektoro/responsivelayout/styles.css index 8c2338e..457dc74 100644 --- a/src/main/resources/com/jarektoro/responsivelayout/styles.css +++ b/src/main/resources/com/jarektoro/responsivelayout/styles.css @@ -1,15 +1,28 @@ +.container-fluid, +.container { + margin-right: auto; + margin-left: auto; + display: block; +} .col-container .v-caption { padding-left: 3px; padding-right: 10px; width: 100%; } - +.col-container { + width: 100%; +} .col-content-center > .col-container{ display: flex !important; justify-content: center; align-items: center; } +.col-content-right > .col-container{ + display: flex !important; + justify-content: flex-end; + align-items: flex-end; +} .scrollable-anyway { overflow: visible !important; @@ -63,6 +76,50 @@ padding-bottom: 1rem; } + +.row-margin.margin-small.v-col-spacing.v-col-spacing-small { + margin-top: 0rem !important; + margin-bottom: 0rem !important; +} + +.row-margin.margin-small.h-col-spacing.h-col-spacing-small { + margin-right: 0rem !important; + margin-left: 0rem !important; +} + +.row-margin.v-col-spacing.v-col-spacing-small { + margin-top: .3rem !important; + margin-bottom: .3rem !important; +} + +.row-margin.h-col-spacing.h-col-spacing-small { + margin-right: .3rem !important; + margin-left: .3rem !important; +} + +.row.v-col-spacing.v-col-spacing-small { + margin-top: -.3rem; + margin-bottom: -.3rem; +} + +.row.h-col-spacing.h-col-spacing-small { + margin-right: -.3rem; + margin-left: -.3rem; +} + +.row.h-col-spacing.h-col-spacing-small > .col { + padding-left: .3rem; + padding-right: .3rem; +} + +.row.v-col-spacing.v-col-spacing-small > .col { + padding-top: .3rem; + padding-bottom: .3rem; +} + + + + /*NOT REPONSIVE RELATED ENDED*/ .visible-xs, .visible-sm, @@ -273,8 +330,6 @@ .container-fluid { margin-right: auto; margin-left: auto; - padding-right: 2rem; - padding-left: 2rem; } .row { diff --git a/src/test/java/com/jarektoro/responsivelayout/BasicFullPageUI.java b/src/test/java/com/jarektoro/responsivelayout/BasicFullPageUI.java index 4a99eda..ec6d87e 100644 --- a/src/test/java/com/jarektoro/responsivelayout/BasicFullPageUI.java +++ b/src/test/java/com/jarektoro/responsivelayout/BasicFullPageUI.java @@ -20,13 +20,13 @@ protected void init(VaadinRequest request) { super.init(request); setSizeFull(); - Page.getCurrent().getStyles().add(".img-rounded { border-radius: 50%; } .bg-dark-grey { background-color: #F0F0F0;}"); + Page.getCurrent().getStyles().add(".img-rounded { border-radius: 50%; width:100% } .bg-dark-grey { background-color: #F0F0F0;}"); - ResponsiveLayout responsiveLayout = new ResponsiveLayout(); + ResponsiveLayout responsiveLayout = new ResponsiveLayout(ResponsiveLayout.ContainerType.FLUID); - - responsiveLayout.setSizeFull(true); + responsiveLayout.setScrollable(true); + responsiveLayout.setSizeFull(); ResponsiveRow rootResponsiveRow = responsiveLayout.addRow(); @@ -58,7 +58,7 @@ protected void init(VaadinRequest request) { ResponsiveColumn profileCol = sideMenu.addColumn() .withDisplayRules(12, 12, 12, 12) - .withCenteredComponent(image).withVisibilityRules(true,true,true,true); + .withRightAlignedComponent(image).withVisibilityRules(true,true,true,true); Button logoButton = getButtonofSize("LOGO", "100%", "100%", FontAwesome.APPLE); @@ -117,13 +117,56 @@ protected void init(VaadinRequest request) { TextField tf = new TextField("caption"); - teamResponsiveRow.addColumn().withDisplayRules(12, 6, 4, 3).withComponent(tf); + teamResponsiveRow.addColumn().withDisplayRules(12, 6, 4, 3).withComponent(teamMemberView); } setContent(responsiveLayout); + + + ResponsiveLayout responsiveLayout1 = new ResponsiveLayout(); + ResponsiveRow row = responsiveLayout1.addRow(); + + + row.addColumn().withDisplayRules(12, 12, 12, 12).withComponent(createNestedLayout()); + + + //setContent(responsiveLayout1); + + + } + + public ResponsiveLayout createNestedLayout() { + ResponsiveLayout nestedLayout = new ResponsiveLayout(); + ResponsiveRow nestedLayoutRow = nestedLayout.addRow().withSpacing(true); + nestedLayoutRow.setSpacing(ResponsiveRow.SpacingSize.SMALL,true); + nestedLayoutRow.setMargin(ResponsiveRow.MarginSize.SMALL,true); + Label label = new Label("Title!"); + label.setSizeUndefined(); + + Button button = new Button("", FontAwesome.ANCHOR); + button.addStyleName(ValoTheme.BUTTON_PRIMARY); + + TextField field = new TextField(); + field.setInputPrompt("Description"); + + Button button1 = new Button("", FontAwesome.ANCHOR); + button1.addStyleName(ValoTheme.BUTTON_FRIENDLY); + + + nestedLayoutRow.addComponents(button,label,field,button1); + + + return nestedLayout; } + public ResponsiveColumn wrapInColumn(Component component) { + + ResponsiveColumn col = new ResponsiveColumn().withComponent(component); + col.setSizeUndefined(); + return col; + + } public Button getButtonofSize(String title, String h, String w, FontIcon icon) { Button button = new Button(title); @@ -173,14 +216,16 @@ public TeamMemberView() { // not part of responsiveLayout lib setWidth("100%"); - +setHeightUndefined(); ResponsiveLayout responsiveLayout = new ResponsiveLayout(); ResponsiveRow responsiveRow = new ResponsiveRow(); - responsiveRow.setMargin(true); - responsiveRow.setMarginSmall(true); + + responsiveRow.setMargin(ResponsiveRow.MarginSize.SMALL,true); + responsiveRow.setSpacing(ResponsiveRow.SpacingSize.SMALL,true); + ResponsiveColumn imageCol = new ResponsiveColumn(4, 4, 4, 4); imageCol.setComponent(getRandomTeamMember()); ResponsiveColumn titleCol = new ResponsiveColumn(4, 4, 4, 4); @@ -189,7 +234,6 @@ public TeamMemberView() { responsiveRow.addColumn(imageCol); responsiveRow.addColumn(titleCol); - responsiveRow.setHorizontalSpacing(true); responsiveRow.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT); responsiveLayout.addRow(responsiveRow); @@ -210,7 +254,7 @@ private Image getRandomTeamMember() { // Display the image without caption Image image = new Image(null, res); image.setStyleName("img-rounded"); - image.setSizeFull(); + image.setWidth("100%"); return image;