-runAnchestorsLayout -> runAncestorsLayout (grammar-fix).
-IPanel stylename conventions changed (again). Now all additional stylenames are added to the panel, e.g. addStyleName("red") + addStyleName("green") -> .i-panel .i-panel-red .i-panel-green
- ^ same for ITabsheet.
-Layout padding convention changed (again). Now by default only Panels and TabSheets have padding, and they can remove that padding by using a constant stylename (Panel.STYLE_NO_PADDING and same for TabSheet).
-IWindow styles altered a bit (now able to move Window in IE6 also :)).
svn changeset:2527/svn branch:trunk
// Layout
setCaption("Properties");
addComponent(formsLayout);
+ addStyleName(Panel.STYLE_NO_PADDING);
setWidth(100);
setWidthUnits(Table.UNITS_PERCENTAGE);
appUri = getAppUri();
if (isDebugMode()) {
- console = new DebugConsole();
+ console = new DebugConsole(this);
} else {
console = new NullConsole();
}
return true;
component.setStyleName(component.getStylePrimaryName());
- // add additional styles as css classes
+ // add additional styles as css classes, prefixed with component default
+ // stylename
if (uidl.hasAttribute("style")) {
- component.addStyleName(uidl.getStringAttribute("style"));
+ String[] styles = uidl.getStringAttribute("style").split(" ");
+ for (int i = 0; i < styles.length; i++)
+ component.addStyleDependentName(styles[i]);
}
return false;
private Panel panel;
- public DebugConsole() {
+ public DebugConsole(ApplicationConnection client) {
super();
+ this.client = client;
panel = new FlowPanel();
ScrollPanel p = new ScrollPanel();
p.add(panel);
private void minimize() {
// TODO stack to bottom (create window manager of some sort)
setPixelSize(60, 60);
- setPopupPosition(Window.getClientWidth() - 80,
- Window.getClientHeight() - 80);
+ setPopupPosition(Window.getClientWidth()
+ - (60 + IWindow.BORDER_WIDTH_HORIZONTAL), Window
+ .getClientHeight()
+ - (80 + IWindow.BORDER_WIDTH_VERTICAL));
}
/*
*
* @param container
*/
- public static void runAnchestorsLayout(HasWidgets container) {
+ public static void runAncestorsLayout(HasWidgets container) {
Iterator childWidgets = container.iterator();
while (childWidgets.hasNext()) {
Widget child = (Widget) childWidgets.next();
((ContainerResizedListener) child).iLayout();
} else if (child instanceof HasWidgets) {
HasWidgets childContainer = (HasWidgets) child;
- runAnchestorsLayout(childContainer);
+ runAncestorsLayout(childContainer);
}
}
}
public void iLayout() {
if (!iLayoutJS(DOM.getFirstChild(getElement()))) {
- Util.runAnchestorsLayout(this);
+ Util.runAncestorsLayout(this);
}
}
* containers in custom layout he/she can notify children after resize.
*/
public void notifyChildrenOfSizeChange() {
- Util.runAnchestorsLayout(this);
+ Util.runAncestorsLayout(this);
}
public void onDetach() {
DOM.removeChild(childContainer, meter);
// TODO save previous size and only propagate if really changed
- Util.runAnchestorsLayout(this);
+ Util.runAncestorsLayout(this);
}
}
DOM.appendChild(getElement(), captionNode);
DOM.appendChild(getElement(), contentNode);
DOM.appendChild(getElement(), bottomDecoration);
+ setStyleName(CLASSNAME);
+ DOM.setElementProperty(captionNode, "className", CLASSNAME + "-caption");
+ DOM.setElementProperty(contentNode, "className", CLASSNAME + "-content");
+ DOM.setElementProperty(bottomDecoration, "className", CLASSNAME
+ + "-deco");
}
protected Element getContainerElement() {
if (getWidget() != null) {
clear();
}
-
- // Add proper style name for root element
- // TODO refactor to support additional styles set from server-side
- String className = CLASSNAME;
- if (uidl.hasAttribute("style"))
- className += "-" + uidl.getStringAttribute("style");
- setStyleName(className);
- DOM.setElementProperty(contentNode, "className", className + "-content");
- DOM.setElementProperty(bottomDecoration, "className", className
- + "-deco");
-
// Handle caption displaying
+ boolean hasCaption = false;
if (uidl.hasAttribute("caption")
&& !uidl.getStringAttribute("caption").equals("")) {
DOM.setInnerText(captionNode, uidl.getStringAttribute("caption"));
- DOM.setElementProperty(captionNode, "className", className
- + "-caption");
- } else {
- // Theme needs this to work around different styling
- DOM.setElementProperty(captionNode, "className", className
- + "-nocaption");
+ hasCaption = true;
+ } else
DOM.setInnerText(captionNode, "");
+
+ // Add proper stylenames for all elements
+ if (uidl.hasAttribute("style")) {
+ String[] styles = uidl.getStringAttribute("style").split(" ");
+ String captionBaseClass = CLASSNAME
+ + (hasCaption ? "-caption" : "-nocaption");
+ String contentBaseClass = CLASSNAME + "-content";
+ String decoBaseClass = CLASSNAME + "-deco";
+ String captionClass = captionBaseClass;
+ String contentClass = contentBaseClass;
+ String decoClass = decoBaseClass;
+ for (int i = 0; i < styles.length; i++) {
+ captionClass += " " + captionBaseClass + "-" + styles[i];
+ contentClass += " " + contentBaseClass + "-" + styles[i];
+ decoClass += " " + decoBaseClass + "-" + styles[i];
+ }
+ DOM.setElementProperty(captionNode, "className", captionClass);
+ DOM.setElementProperty(contentNode, "className", contentClass);
+ DOM.setElementProperty(bottomDecoration, "className", decoClass);
}
// Height adjustment
} else {
DOM.setStyleAttribute(contentNode, "overflow", "hidden");
}
- Util.runAnchestorsLayout(this);
+ Util.runAncestorsLayout(this);
}
}
break;
}
- Util.runAnchestorsLayout(this);
+ Util.runAncestorsLayout(this);
}
private void setFirstWidget(Widget w) {
if (client.updateComponent(this, uidl, false))
return;
+
+ // Add proper stylenames for all elements
+ if (uidl.hasAttribute("style")) {
+ String[] styles = uidl.getStringAttribute("style").split(" ");
+ String tabsBaseClass = CLASSNAME + "-tabs";
+ String contentBaseClass = CLASSNAME + "-content";
+ String decoBaseClass = CLASSNAME + "-deco";
+ String tabsClass = tabsBaseClass;
+ String contentClass = contentBaseClass;
+ String decoClass = decoBaseClass;
+ for (int i = 0; i < styles.length; i++) {
+ tabsClass += " " + tabsBaseClass + "-" + styles[i];
+ contentClass += " " + contentBaseClass + "-" + styles[i];
+ decoClass += " " + decoBaseClass + "-" + styles[i];
+ }
+ tp.setStyleName(contentClass);
+ tb.setStyleName(tabsClass);
+ DOM.setElementProperty(deco, "className", decoClass);
+ }
// Adjust width and height
String h = uidl.hasAttribute("height") ? uidl
.getStringAttribute("width") : null;
setWidth(w != null ? w : "auto");
- // Try to calculate the height as close as possible
+ // Height calculations
if (h != null) {
setHeight(h);
} else {
DOM.setStyleAttribute(tp.getElement(), "overflow", "hidden");
}
+ // Render content
UIDL tabs = uidl.getChildUIDL(0);
boolean keepCurrentTabs = tabKeys.size() == tabs.getNumberOfChildren();
for (int i = 0; keepCurrentTabs && i < tabKeys.size(); i++)
tp.setHeight(neededHeight - pixelHeight + "px");
DOM.setStyleAttribute(tp.getElement(), "overflow", "");
}
- Util.runAnchestorsLayout(this);
+ Util.runAncestorsLayout(this);
}
}
}
public void onWindowResized(int width, int height) {
- Util.runAnchestorsLayout(this);
+ Util.runAncestorsLayout(this);
}
}
private Element closeBox;
- private ApplicationConnection client;
+ protected ApplicationConnection client;
private String id;
public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
this.id = uidl.getId();
this.client = client;
-
- if(client.updateComponent(this, uidl, false))
+
+ if (client.updateComponent(this, uidl, false))
return;
if (uidl.hasAttribute("invisible")) {
}
public void setCaption(String c) {
- DOM.setInnerHTML(header, c);
+ DOM.setInnerText(header, c);
}
protected Element getContainerElement() {
}
.i-view {
- height:100%;
+ height: 100%;
}
-input, select, textarea, button {
+#itmtk-ajax-window input,
+#itmtk-ajax-window select,
+#itmtk-ajax-window textarea,
+#itmtk-ajax-window button {
font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
color: #464f52;
}
-select {
+#itmtk-ajax-window select {
padding: 0;
margin: 0;
}
filter: Alpha(opacity=30);
}
-/**
- * Layout styles
- */
-.i-orderedlayout {
- padding: 15px 18px;
-}
/**
* Context menu styles
border-bottom: none;\r
background-color: #fff;\r
overflow: auto;\r
- /*padding: 15px 18px 6px 18px;*/\r
+ padding: 15px 18px 6px 18px;\r
}\r
\r
.i-panel-deco {\r
\r
/* Light panel style */\r
\r
-.i-panel-light-caption {\r
+.i-panel-light:before {\r
+ display: none;\r
+}\r
+\r
+.i-panel-caption-light {\r
border-left: none;\r
border-right: none;\r
background: transparent;\r
padding-top: 14px;\r
}\r
\r
-.i-panel-light-content {\r
+.i-panel-caption-light:before {\r
+ display: none;\r
+}\r
+\r
+.i-panel-content-light {\r
border: none;\r
background: transparent;\r
+ padding: 15px 18px;\r
}\r
\r
-.i-panel-light-deco {\r
+.i-panel-deco-light {\r
height: 0;\r
overflow: hidden;\r
}\r
\r
\r
\r
+/* Panel without padding (NO_PADDING style) */\r
+\r
+.i-panel-content-nopad {\r
+ padding: 0;\r
+}\r
+\r
+\r
+\r
+\r
\r
/* Light panel contained within another panel or a tabsheet */\r
/* Use more precise selector to override IE specific rules automatically */\r
\r
-.i-panel .i-panel-light-caption,\r
-.i-tabsheet .i-panel-light-caption {\r
+.i-panel .i-panel-caption-light,\r
+.i-tabsheet .i-panel-caption-light {\r
margin-top: -1px;\r
padding-top: 14px;\r
border-top: 1px solid #babfc0;\r
padding-top: 14px;\r
}\r
\r
+* html .i-panel-caption-light {\r
+ border-left: none;\r
+ border-right: none;\r
+}\r
+*+html .i-panel-caption-light {\r
+ border-left: none;\r
+ border-right: none;\r
+}\r
+\r
* html .i-panel-content {\r
border-bottom: 1px solid #babfc0;\r
- /*padding: 15px 18px;*/\r
+ padding: 15px 18px;\r
}\r
*+html .i-panel-content {\r
border-bottom: 1px solid #babfc0;\r
- /*padding: 15px 18px;*/\r
+ padding: 15px 18px;\r
}\r
\r
* html .i-panel-deco {\r
overflow: hidden;\r
background: #c1c6cc;\r
border: none;\r
+}\r
+\r
+/* Without padding */\r
+* html .i-panel-content-nopad {\r
+ padding: 0;\r
+}\r
+*+html .i-panel-content-nopad {\r
+ padding: 0;\r
}
\ No newline at end of file
border-bottom: none;\r
background-color: #fff;\r
overflow: auto;\r
- /*padding: 15px 18px 6px 18px;*/\r
+ padding: 15px 18px 6px 18px;\r
}\r
\r
.i-tabsheet-deco {\r
\r
\r
\r
+/* Tabsheet without padding (NO_PADDING style) */\r
+\r
+.i-tabsheet-content-nopad {\r
+ padding: 0;\r
+}\r
\r
\r
\r
/* IE specific styles */\r
* html .i-tabsheet-content {\r
border-bottom: 1px solid #babfc0;\r
+ padding: 15px 18px;\r
}\r
*+html .i-tabsheet-content {\r
border-bottom: 1px solid #babfc0;\r
+ padding: 15px 18px;\r
}\r
\r
* html .i-tabsheet-tabs {\r
}\r
\r
* html .i-tabsheet-deco {\r
- display: none;\r
+ height: 0;\r
+ overflow: hidden;\r
}\r
*+html .i-tabsheet-deco {\r
- display: none;\r
+ height: 0;\r
+ overflow: hidden;\r
+}\r
+\r
+/* Without padding */\r
+\r
+* html .i-tabsheet-content-nopad {\r
+ padding: 0;\r
+}\r
+*+html .i-tabsheet-content-nopad {\r
+ padding: 0;\r
}
\ No newline at end of file
color: #f14c1a;
white-space: nowrap;
height: 18px;
- padding: 6px 18px 14px 18px;
+ padding: 6px 18px 14px 12px;
background: #fff;
cursor: move;
}
content: "";
width: 21px;
height: 21px;
- margin: -27px 0 6px -38px;
+ margin: -27px 0 6px -32px;
background: transparent url(img/top-left.png);
}
* html .i-window-wrap {
padding: 12px;
border: 1px solid #e8e9e9;
- background: transparent;
- filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/widgetsets/com.itmill.toolkit.terminal.gwt.DefaultWidgetSet/default/window/img/bg-color.png", sizingMethod="scale");
- zoom: 1; /* to gain hasLayout, IE won't apply filter otherwise */
+ background: #d8dee0;
+ /*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/widgetsets/com.itmill.toolkit.terminal.gwt.DefaultWidgetSet/default/window/img/bg-color.png", sizingMethod="scale");*/
+ /*zoom: 1; to gain hasLayout, IE won't apply filter otherwise */
}
*+html .i-window-wrap {
padding: 12px;
* html .i-window-resizebox {
bottom: 0;
- background-position: 3px 3px;
+ width: 22px;
+ height: 18px;
+ background: transparent;
+ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../ITMILL/widgetsets/com.itmill.toolkit.terminal.gwt.DefaultWidgetSet/default/window/img/resize.png", sizingMethod="crop");
}
*+html .i-window-resizebox {
bottom: 0;
Panel p = new Panel("Accordion Panel");\r
p.setHeight(100);\r
p.setHeightUnits(Panel.UNITS_PERCENTAGE);\r
+ p.addStyleName(Panel.STYLE_NO_PADDING);\r
\r
tab = new TabSheet();\r
tab.setWidth(100);\r
tab.setWidthUnits(Sizeable.UNITS_PERCENTAGE);\r
tab.setHeight(740);\r
tab.setHeightUnits(Sizeable.UNITS_PIXELS);\r
+ tab.addStyleName(TabSheet.STYLE_NO_PADDING);\r
\r
Panel report = new Panel("Monthly Program Runs", new ExpandLayout());\r
OrderedLayout controls = new OrderedLayout();\r
Scrollable, ComponentContainer.ComponentAttachListener,
ComponentContainer.ComponentDetachListener, Action.Container {
+ public static final String STYLE_LIGHT = "light";
+
+ public static final String STYLE_EMPHASIZE = "emphasize";
+
+ /**
+ * Use this stylename with {@link #addStyleName(String)} to remove padding
+ * between Panel borders and content. The actual client-side implementation
+ * will determine which stylenames it implements.
+ */
+ public static final String STYLE_NO_PADDING = "nopad";
+
/**
* Layout of the panel.
*/
*/
public class TabSheet extends AbstractComponentContainer implements Sizeable {
+ /**
+ * Use this stylename with {@link #addStyleName(String)} to remove padding
+ * between TabSheet borders and content. The actual client-side implementation
+ * will determine which stylenames it implements.
+ */
+ public static final String STYLE_NO_PADDING = "nopad";
+
/**
* Linked list of component tabs.
*/
setScrollTop(top < 0 ? 0 : top);
}
Integer scrollleft = (Integer) variables.get("scrollleft");
- if (positiony != null) {
+ if (scrollleft != null) {
int left = scrollleft.intValue();
setScrollLeft(left < 0 ? 0 : left);
}