PL-8319 Refactor GroupBox layout process

This commit is contained in:
Yuriy Artamonov 2016-12-07 19:58:01 +04:00
parent 7afc907619
commit e17a691ff1
6 changed files with 36 additions and 66 deletions

View File

@ -18,6 +18,7 @@
package com.haulmont.cuba.web.toolkit.ui.client.groupbox;
import com.google.gwt.dom.client.Style;
import com.google.gwt.dom.client.Style.Unit;
import com.haulmont.cuba.web.toolkit.ui.CubaGroupBox;
import com.haulmont.cuba.web.toolkit.ui.client.Tools;
import com.vaadin.client.*;
@ -38,19 +39,9 @@ public class CubaGroupBoxConnector extends PanelConnector {
@Override
public void init() {
super.init();
CubaGroupBoxWidget widget = getWidget();
widget.expandHandler = new CubaGroupBoxWidget.ExpandHandler() {
@Override
public void expand() {
getRpcProxy(CubaGroupBoxServerRpc.class).expand();
}
@Override
public void collapse() {
getRpcProxy(CubaGroupBoxServerRpc.class).collapse();
}
};
getWidget().expandHandler = expanded ->
getRpcProxy(CubaGroupBoxServerRpc.class).expandStateChanged(expanded);
}
@Override
@ -99,34 +90,19 @@ public class CubaGroupBoxConnector extends PanelConnector {
protected void layoutGroupBox() {
CubaGroupBoxWidget panel = getWidget();
boolean bordersVisible = panel.captionStartDeco.getOffsetWidth() > 0 || panel.captionEndDeco.getOffsetWidth() > 0;
LayoutManager layoutManager = getLayoutManager();
Style captionWrapStyle = panel.captionWrap.getStyle();
if (bordersVisible) {
if (isUndefinedWidth()) {
// do not set width: 100% for captionEndDeco in CSS
// it breaks layout with width: AUTO
captionWrapStyle.setWidth(WidgetUtil.getRequiredWidth(panel.contentNode), Style.Unit.PX);
} else {
captionWrapStyle.setWidth(100, Style.Unit.PCT);
}
if (isBordersVisible()) {
int captionWidth = layoutManager.getOuterWidth(panel.captionNode);
int captionStartWidth = layoutManager.getInnerWidth(panel.captionStartDeco);
int totalMargin = captionWidth + captionStartWidth;
panel.captionEndDeco.getStyle().setWidth(100, Style.Unit.PCT);
panel.captionNode.getStyle().clearWidth();
int captionWidth = WidgetUtil.getRequiredWidth(panel.captionNode);
int captionStartWidth = WidgetUtil.getRequiredWidth(panel.captionStartDeco);
// Fix caption width to avoid problems with fractional width of caption text
panel.captionNode.getStyle().setWidth(captionWidth, Style.Unit.PX);
captionWrapStyle.setPaddingLeft(captionWidth + captionStartWidth, Style.Unit.PX);
panel.captionStartDeco.getStyle().setMarginLeft(-captionStartWidth - captionWidth, Style.Unit.PX);
panel.captionNode.getStyle().setWidth(captionWidth, Unit.PX);
panel.captionWrap.getStyle().setPaddingLeft(totalMargin, Unit.PX);
panel.captionStartDeco.getStyle().setMarginLeft(0 - totalMargin, Unit.PX);
}
LayoutManager layoutManager = getLayoutManager();
Profiler.enter("PanelConnector.layout getHeights");
Profiler.enter("CubaGroupBoxConnector.layout getHeights");
// Haulmont API get max height of caption components
int top = layoutManager.getOuterHeight(panel.captionNode);
top = Math.max(layoutManager.getOuterHeight(panel.captionStartDeco), top);
@ -137,7 +113,7 @@ public class CubaGroupBoxConnector extends PanelConnector {
Profiler.enter("PanelConnector.layout modify style");
Style style = panel.getElement().getStyle();
captionWrapStyle.setMarginTop(-top, Style.Unit.PX);
panel.captionWrap.getStyle().setMarginTop(-top, Style.Unit.PX);
panel.bottomDecoration.getStyle().setMarginBottom(-bottom, Style.Unit.PX);
style.setPaddingTop(top, Style.Unit.PX);
style.setPaddingBottom(bottom, Style.Unit.PX);
@ -179,7 +155,13 @@ public class CubaGroupBoxConnector extends PanelConnector {
widget.setShowAsPanel(getState().showAsPanel);
if (stateChangeEvent.hasPropertyChanged("caption")) {
widget.captionNode.getStyle().clearWidth();
getLayoutManager().setNeedsMeasure(this);
}
}
protected boolean isBordersVisible() {
CubaGroupBoxWidget panel = getWidget();
return panel.captionStartDeco.getOffsetWidth() > 0 || panel.captionEndDeco.getOffsetWidth() > 0;
}
}

View File

@ -31,17 +31,14 @@ public class CubaGroupBoxWidget extends VPanel implements HasEnabled {
public static final String CLASSNAME = "c-groupbox";
protected boolean expanded = true;
protected boolean collapsable = false;
protected boolean showAsPanel = false;
private boolean enabled = true;
protected boolean enabled = true;
protected ExpandHandler expandHandler;
public Element captionWrap;
public Element expander = DOM.createSpan();
public Element captionStartDeco = DOM.createDiv();
@ -162,11 +159,7 @@ public class CubaGroupBoxWidget extends VPanel implements HasEnabled {
setExpanded(!expanded);
if (collapsable && expandHandler != null) {
if (expanded) {
expandHandler.expand();
} else {
expandHandler.collapse();
}
expandHandler.expandStateChanged(expanded);
}
DOM.eventCancelBubble(event, true);
}
@ -182,9 +175,7 @@ public class CubaGroupBoxWidget extends VPanel implements HasEnabled {
}
public interface ExpandHandler {
void expand();
void collapse();
void expandStateChanged(boolean expanded);
}
@Override

View File

@ -27,22 +27,14 @@ import com.vaadin.ui.Panel;
import java.util.Iterator;
public class CubaGroupBox extends Panel implements ComponentContainer {
private ExpandChangeHandler expandChangeHandler = null;
protected ExpandChangeHandler expandChangeHandler = null;
public CubaGroupBox() {
CubaGroupBoxServerRpc rpc = new CubaGroupBoxServerRpc() {
@Override
public void expand() {
setExpanded(true);
registerRpc((CubaGroupBoxServerRpc) expanded -> {
if (getState().collapsable) {
setExpanded(expanded);
}
@Override
public void collapse() {
if (getState().collapsable)
setExpanded(false);
}
};
registerRpc(rpc);
});
Layout content = new CubaVerticalActionsLayout();
setContent(content);

View File

@ -20,8 +20,5 @@ package com.haulmont.cuba.web.toolkit.ui.client.groupbox;
import com.vaadin.shared.communication.ServerRpc;
public interface CubaGroupBoxServerRpc extends ServerRpc {
void expand();
void collapse();
void expandStateChanged(boolean expanded);
}

View File

@ -62,6 +62,8 @@
.#{$primary-stylename}-captionwrap {
display: block;
font-size: 0;
height: round(2*$v-unit-size/3 + $v-unit-size/10);
width: 100%;
}
.#{$primary-stylename}-caption-start-deco {
@ -117,6 +119,8 @@
height: round(2*$v-unit-size/3 + $v-unit-size/10);
border: 0;
padding-top: round($v-unit-size/3);
min-width: round($v-unit-size/3);
width: 100%;
div {
width: 100%;

View File

@ -45,6 +45,8 @@
.#{$primary-stylename}-captionwrap {
display: block;
font-size: 0;
height: 20px;
width: 100%;
}
.#{$primary-stylename}-caption-start-deco {
@ -84,6 +86,8 @@
height: 20px;
border: 0;
padding-top: 10px;
min-width: 10px;
width: 100%;
div {
width: 100%;