@qooxdoo/framework
Version:
The JS Framework for Coders
2,055 lines (1,761 loc) • 63.3 kB
JavaScript
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2004-2008 1&1 Internet AG, Germany, http://www.1und1.de
2006 STZ-IDA, Germany, http://www.stz-ida.de
License:
MIT: https://opensource.org/licenses/MIT
See the LICENSE file in the project's top-level directory for details.
Authors:
* Sebastian Werner (wpbasti)
* Andreas Ecker (ecker)
* Fabian Jakobs (fjakobs)
* Alexander Steitz (aback)
* Martin Wittemann (martinwittemann)
************************************************************************* */
/* ************************************************************************
************************************************************************* */
/**
* The modern appearance theme.
*
* @asset(qx/icon/${qx.icontheme}/16/places/folder-open.png)
* @asset(qx/icon/${qx.icontheme}/16/places/folder.png)
* @asset(qx/icon/${qx.icontheme}/16/mimetypes/office-document.png)
* @asset(qx/icon/${qx.icontheme}/16/actions/window-close.png)
* @asset(qx/icon/${qx.icontheme}/22/places/folder-open.png)
* @asset(qx/icon/${qx.icontheme}/22/places/folder.png)
* @asset(qx/icon/${qx.icontheme}/22/mimetypes/office-document.png)
* @asset(qx/icon/${qx.icontheme}/32/places/folder-open.png)
* @asset(qx/icon/${qx.icontheme}/32/places/folder.png)
* @asset(qx/icon/${qx.icontheme}/32/mimetypes/office-document.png)
* @asset(qx/icon/${qx.icontheme}/16/apps/office-calendar.png)
* @asset(qx/icon/${qx.icontheme}/16/apps/utilities-color-chooser.png)
* @asset(qx/icon/${qx.icontheme}/16/actions/view-refresh.png)
* @asset(qx/icon/${qx.icontheme}/16/actions/dialog-cancel.png)
* @asset(qx/icon/${qx.icontheme}/16/actions/dialog-ok.png)
* @asset(qx/decoration/Modern/cursors/*)
*
* @asset(qx/decoration/Modern/scrollbar/scrollbar-left.png)
* @asset(qx/decoration/Modern/scrollbar/scrollbar-right.png)
* @asset(qx/decoration/Modern/scrollbar/scrollbar-up.png)
* @asset(qx/decoration/Modern/scrollbar/scrollbar-down.png)
*
* @asset(qx/decoration/Modern/toolbar/toolbar-handle-knob.gif)
*
* @asset(qx/decoration/Modern/tree/open-selected.png)
* @asset(qx/decoration/Modern/tree/closed-selected.png)
* @asset(qx/decoration/Modern/tree/open.png)
* @asset(qx/decoration/Modern/tree/closed.png)
*
* @asset(qx/decoration/Modern/form/checked.png)
* @asset(qx/decoration/Modern/form/undetermined.png)
* @asset(qx/decoration/Modern/form/tooltip-error-arrow-right.png)
* @asset(qx/decoration/Modern/form/tooltip-error-arrow.png)
*
* @asset(qx/decoration/Modern/window/minimize-active-hovered.png)
* @asset(qx/decoration/Modern/window/minimize-active.png)
* @asset(qx/decoration/Modern/window/minimize-inactive.png)
* @asset(qx/decoration/Modern/window/restore-active-hovered.png)
* @asset(qx/decoration/Modern/window/restore-active.png)
* @asset(qx/decoration/Modern/window/restore-inactive.png)
* @asset(qx/decoration/Modern/window/maximize-active-hovered.png)
* @asset(qx/decoration/Modern/window/maximize-active.png)
* @asset(qx/decoration/Modern/window/maximize-inactive.png)
* @asset(qx/decoration/Modern/window/close-active-hovered.png)
* @asset(qx/decoration/Modern/window/close-active.png)
* @asset(qx/decoration/Modern/window/close-inactive.png)
*
* @asset(qx/decoration/Modern/splitpane/knob-horizontal.png)
* @asset(qx/decoration/Modern/splitpane/knob-vertical.png)
*
* @asset(qx/decoration/Modern/arrows/down.png)
* @asset(qx/decoration/Modern/arrows/up.png)
* @asset(qx/decoration/Modern/arrows/right.png)
* @asset(qx/decoration/Modern/arrows/left.png)
* @asset(qx/decoration/Modern/arrows/rewind.png)
* @asset(qx/decoration/Modern/arrows/forward.png)
* @asset(qx/decoration/Modern/arrows/up-invert.png)
* @asset(qx/decoration/Modern/arrows/down-invert.png)
* @asset(qx/decoration/Modern/arrows/right-invert.png)
* @asset(qx/decoration/Modern/arrows/up-small.png)
* @asset(qx/decoration/Modern/arrows/down-small.png)
*
* @asset(qx/decoration/Modern/menu/checkbox-invert.gif)
* @asset(qx/decoration/Modern/menu/checkbox.gif)
* @asset(qx/decoration/Modern/menu/radiobutton-invert.gif)
* @asset(qx/decoration/Modern/menu/radiobutton.gif)
*
* @asset(qx/decoration/Modern/table/select-column-order.png)
* @asset(qx/decoration/Modern/table/ascending.png)
* @asset(qx/decoration/Modern/table/descending.png)
* @asset(qx/decoration/Modern/table/boolean-true.png)
* @asset(qx/decoration/Modern/table/boolean-false.png)
*
* @asset(qx/static/blank.gif)
* @asset(qx/static/blank.png)
*
* @asset(qx/decoration/Modern/colorselector/*)
*/
qx.Theme.define("qx.theme.modern.Appearance", {
appearances: {
/*
---------------------------------------------------------------------------
CORE
---------------------------------------------------------------------------
*/
widget: {},
root: {
style(states) {
return {
backgroundColor: "background-application",
textColor: "text-label",
font: "default"
};
}
},
label: {
style(states) {
return {
textColor: states.disabled ? "text-disabled" : undefined
};
}
},
"move-frame": {
style(states) {
return {
decorator: "main"
};
}
},
"resize-frame": "move-frame",
"dragdrop-cursor": {
style(states) {
var icon = "nodrop";
if (states.copy) {
icon = "copy";
} else if (states.move) {
icon = "move";
} else if (states.alias) {
icon = "alias";
}
return {
source: "decoration/cursors/" + icon + ".gif",
position: "right-top",
offset: [2, 16, 2, 6]
};
}
},
image: {
style(states) {
return {
opacity: !states.replacement && states.disabled ? 0.3 : 1
};
}
},
atom: {},
"atom/label": "label",
"atom/icon": "image",
popup: {
style(states) {
return {
decorator: "popup",
backgroundColor: "background-light"
};
}
},
/*
---------------------------------------------------------------------------
BUTTON
---------------------------------------------------------------------------
*/
"button-frame": {
alias: "atom",
style(states) {
var decorator, textColor;
var padding = [3, 9]; // default padding
if (states.checked && states.focused && !states.inner) {
decorator = "button-checked-focused";
textColor = undefined;
padding = [1, 7];
} else if (states.disabled) {
decorator = "button-disabled";
textColor = undefined;
} else if (states.pressed) {
decorator = "button-pressed";
textColor = "text-hovered";
} else if (states.checked) {
decorator = "button-checked";
textColor = undefined;
} else if (states.hovered) {
decorator = "button-hovered";
textColor = "text-hovered";
} else if (states.focused && !states.inner) {
decorator = "button-focused";
textColor = undefined;
padding = [1, 7];
} else {
decorator = "button";
textColor = undefined;
}
if (states.invalid && !states.disabled) {
decorator += "-invalid";
}
return {
decorator: decorator,
textColor: textColor,
padding: padding,
margin: [1, 0]
};
}
},
"button-frame/image": {
style(states) {
return {
opacity: !states.replacement && states.disabled ? 0.5 : 1
};
}
},
button: {
alias: "button-frame",
include: "button-frame",
style(states) {
return {
center: true
};
}
},
"toggle-button": "button",
"hover-button": {
alias: "atom",
include: "atom",
style(states) {
var decorator = states.hovered ? "selected" : undefined;
return {
decorator: decorator,
textColor: states.hovered ? "text-selected" : undefined
};
}
},
menubutton: {
include: "button",
alias: "button",
style(states) {
return {
icon: "decoration/arrows/down.png",
iconPosition: "right"
};
}
},
splitbutton: {},
"splitbutton/button": "button",
"splitbutton/arrow": {
alias: "button",
include: "button",
style(states, superStyles) {
return {
icon: "decoration/arrows/down.png",
padding: [superStyles.padding[0], superStyles.padding[1] - 6],
marginLeft: 1
};
}
},
/*
---------------------------------------------------------------------------
FORM FIELDS
---------------------------------------------------------------------------
*/
"form-renderer-label": {
include: "label",
style() {
return {
paddingTop: 4
};
}
},
checkbox: {
alias: "atom",
style(states) {
var icon;
if (states.checked) {
icon = "decoration/form/checked.png";
} else if (states.undetermined) {
icon = "decoration/form/undetermined.png";
} else {
icon = "qx/static/blank.gif";
}
return {
icon: icon,
minWidth: 14,
gap: 8,
paddingLeft: 2
};
}
},
"checkbox/icon": {
style(states) {
var decorator;
if (states.disabled) {
decorator = "checkbox-disabled";
} else if (states.focused) {
decorator = "checkbox-focused";
} else if (states.hovered) {
decorator = "checkbox-hovered";
} else {
decorator = "checkbox";
}
decorator += states.invalid && !states.disabled ? "-invalid" : "";
var padding = states.undetermined ? [3, 1] : 1;
return {
decorator: decorator,
padding: padding,
width: 10,
height: 10
};
}
},
radiobutton: {
alias: "atom",
style(states) {
return {
icon: "qx/static/blank.png",
gap: 8,
paddingLeft: 2
};
}
},
"radiobutton/icon": {
style(states) {
var decorator;
if (states.disabled && !states.checked) {
decorator = "radiobutton-disabled";
} else if (states.checked && states.focused) {
decorator = "radiobutton-checked-focused";
} else if (states.checked && states.disabled) {
decorator = "radiobutton-checked-disabled";
} else if (states.checked && states.hovered) {
decorator = "radiobutton-checked-hovered";
} else if (states.checked) {
decorator = "radiobutton-checked";
} else if (states.focused) {
decorator = "radiobutton-focused";
} else if (states.hovered) {
decorator = "radiobutton-hovered";
} else {
decorator = "radiobutton";
}
decorator += states.invalid && !states.disabled ? "-invalid" : "";
return {
decorator: decorator,
width: 10,
height: 10
};
}
},
textfield: {
style(states) {
var decorator;
var focused = !!states.focused;
var invalid = !!states.invalid;
var disabled = !!states.disabled;
if (focused && invalid && !disabled) {
decorator = "input-focused-invalid";
} else if (focused && !invalid && !disabled) {
decorator = "input-focused";
} else if (disabled) {
decorator = "input-disabled";
} else if (!focused && invalid && !disabled) {
decorator = "border-invalid";
} else {
decorator = "input";
}
var textColor;
if (states.disabled) {
textColor = "text-disabled";
} else if (states.showingPlaceholder) {
textColor = "text-placeholder";
} else {
textColor = "text-input";
}
return {
decorator: decorator,
padding: [2, 4, 1],
textColor: textColor
};
}
},
textarea: {
include: "textfield",
style(states) {
return {
padding: 4
};
}
},
/*
---------------------------------------------------------------------------
SPINNER
---------------------------------------------------------------------------
*/
spinner: {
style(states) {
var decorator;
var focused = !!states.focused;
var invalid = !!states.invalid;
var disabled = !!states.disabled;
if (focused && invalid && !disabled) {
decorator = "input-focused-invalid";
} else if (focused && !invalid && !disabled) {
decorator = "input-focused";
} else if (disabled) {
decorator = "input-disabled";
} else if (!focused && invalid && !disabled) {
decorator = "border-invalid";
} else {
decorator = "input";
}
return {
decorator: decorator
};
}
},
"spinner/textfield": {
style(states) {
return {
marginRight: 2,
padding: [2, 4, 1],
textColor: states.disabled ? "text-disabled" : "text-input"
};
}
},
"spinner/upbutton": {
alias: "button-frame",
include: "button-frame",
style(states, superStyles) {
return {
icon: "decoration/arrows/up-small.png",
padding: [superStyles.padding[0] - 1, superStyles.padding[1] - 5],
margin: 0
};
}
},
"spinner/downbutton": {
alias: "button-frame",
include: "button-frame",
style(states, superStyles) {
return {
icon: "decoration/arrows/down-small.png",
padding: [superStyles.padding[0] - 1, superStyles.padding[1] - 5],
margin: 0
};
}
},
/*
---------------------------------------------------------------------------
DATEFIELD
---------------------------------------------------------------------------
*/
datefield: "combobox",
"datefield/button": {
alias: "combobox/button",
include: "combobox/button",
style(states) {
return {
icon: "icon/16/apps/office-calendar.png",
padding: [0, 3],
decorator: undefined
};
}
},
"datefield/textfield": "combobox/textfield",
"datefield/list": {
alias: "datechooser",
include: "datechooser",
style(states) {
return {
decorator: undefined
};
}
},
/*
---------------------------------------------------------------------------
GROUP BOX
---------------------------------------------------------------------------
*/
groupbox: {
style(states) {
return {
legendPosition: "top"
};
}
},
"groupbox/legend": {
alias: "atom",
style(states) {
return {
padding: [1, 0, 1, 4],
textColor: states.invalid ? "invalid" : "text-title",
font: "bold"
};
}
},
"groupbox/frame": {
style(states) {
return {
padding: 10,
margin: 1,
decorator: "group"
};
}
},
"check-groupbox": "groupbox",
"check-groupbox/legend": {
alias: "checkbox",
include: "checkbox",
style(states) {
return {
padding: [1, 0, 1, 4],
textColor: states.invalid ? "invalid" : "text-title",
font: "bold"
};
}
},
"radio-groupbox": "groupbox",
"radio-groupbox/legend": {
alias: "radiobutton",
include: "radiobutton",
style(states) {
return {
padding: [1, 0, 1, 4],
textColor: states.invalid ? "invalid" : "text-title",
font: "bold"
};
}
},
/*
---------------------------------------------------------------------------
SCROLLAREA
---------------------------------------------------------------------------
*/
scrollarea: "widget",
"scrollarea/corner": {
style(states) {
return {
backgroundColor: "background-application"
};
}
},
"scrollarea/pane": "widget",
"scrollarea/scrollbar-x": "scrollbar",
"scrollarea/scrollbar-y": "scrollbar",
/*
---------------------------------------------------------------------------
SCROLLBAR
---------------------------------------------------------------------------
*/
scrollbar: {
style(states) {
if (states["native"]) {
return {};
}
return {
width: states.horizontal ? undefined : 16,
height: states.horizontal ? 16 : undefined,
decorator: states.horizontal
? "scrollbar-horizontal"
: "scrollbar-vertical",
padding: 1
};
}
},
"scrollbar/slider": {
alias: "slider",
style(states) {
return {
padding: states.horizontal ? [0, 1, 0, 1] : [1, 0, 1, 0]
};
}
},
"scrollbar/slider/knob": {
include: "button-frame",
style(states) {
var decorator = states.horizontal
? "scrollbar-slider-horizontal"
: "scrollbar-slider-vertical";
if (states.disabled) {
decorator += "-disabled";
}
return {
decorator: decorator,
minHeight: states.horizontal ? undefined : 9,
minWidth: states.horizontal ? 9 : undefined,
padding: undefined,
margin: 0
};
}
},
"scrollbar/button": {
alias: "button-frame",
include: "button-frame",
style(states) {
var icon = "decoration/scrollbar/scrollbar-";
if (states.left) {
icon += "left.png";
} else if (states.right) {
icon += "right.png";
} else if (states.up) {
icon += "up.png";
} else {
icon += "down.png";
}
if (states.left || states.right) {
var paddingLeft = states.left ? 3 : 4;
return {
padding: [3, 0, 3, paddingLeft],
icon: icon,
width: 15,
height: 14,
margin: 0
};
} else {
return {
padding: 3,
icon: icon,
width: 14,
height: 15,
margin: 0
};
}
}
},
"scrollbar/button-begin": "scrollbar/button",
"scrollbar/button-end": "scrollbar/button",
/*
---------------------------------------------------------------------------
SLIDER
---------------------------------------------------------------------------
*/
slider: {
style(states) {
var decorator;
var focused = !!states.focused;
var invalid = !!states.invalid;
var disabled = !!states.disabled;
if (focused && invalid && !disabled) {
decorator = "input-focused-invalid";
} else if (focused && !invalid && !disabled) {
decorator = "input-focused";
} else if (disabled) {
decorator = "input-disabled";
} else if (!focused && invalid && !disabled) {
decorator = "border-invalid";
} else {
decorator = "input";
}
return {
decorator: decorator
};
}
},
"slider/knob": {
include: "button-frame",
style(states) {
return {
decorator: states.disabled
? "scrollbar-slider-horizontal-disabled"
: "scrollbar-slider-horizontal",
height: 14,
width: 14,
padding: 0,
margin: 0
};
}
},
/*
---------------------------------------------------------------------------
LIST
---------------------------------------------------------------------------
*/
list: {
alias: "scrollarea",
style(states) {
var decorator;
var focused = !!states.focused;
var invalid = !!states.invalid;
var disabled = !!states.disabled;
if (focused && invalid && !disabled) {
decorator = "input-focused-invalid";
} else if (focused && !invalid && !disabled) {
decorator = "input-focused";
} else if (disabled) {
decorator = "input-disabled";
} else if (!focused && invalid && !disabled) {
decorator = "border-invalid";
} else {
decorator = "input";
}
return {
backgroundColor: "background-light",
decorator: decorator
};
}
},
"list/pane": "widget",
listitem: {
alias: "atom",
style(states) {
let useSelectionState = !states.readonly && states.selected;
return {
padding: states.dragover ? [4, 4, 2, 4] : 4,
textColor: useSelectionState ? "text-selected" : undefined,
decorator: useSelectionState ? "selected" : undefined,
opacity: states.drag ? 0.5 : undefined
};
}
},
/*
---------------------------------------------------------------------------
SLIDEBAR
---------------------------------------------------------------------------
*/
slidebar: {},
"slidebar/scrollpane": {},
"slidebar/content": {},
"slidebar/button-forward": {
alias: "button-frame",
include: "button-frame",
style(states) {
return {
padding: 5,
center: true,
icon: states.vertical
? "decoration/arrows/down.png"
: "decoration/arrows/right.png"
};
}
},
"slidebar/button-backward": {
alias: "button-frame",
include: "button-frame",
style(states) {
return {
padding: 5,
center: true,
icon: states.vertical
? "decoration/arrows/up.png"
: "decoration/arrows/left.png"
};
}
},
/*
---------------------------------------------------------------------------
TABVIEW
---------------------------------------------------------------------------
*/
tabview: {
style(states) {
return {
contentPadding: 16
};
}
},
"tabview/bar": {
alias: "slidebar",
style(states) {
var result = {
marginBottom: states.barTop ? -1 : 0,
marginTop: states.barBottom ? -4 : 0,
marginLeft: states.barRight ? -3 : 0,
marginRight: states.barLeft ? -1 : 0,
paddingTop: 0,
paddingRight: 0,
paddingBottom: 0,
paddingLeft: 0
};
if (states.barTop || states.barBottom) {
result.paddingLeft = 5;
result.paddingRight = 7;
} else {
result.paddingTop = 5;
result.paddingBottom = 7;
}
return result;
}
},
"tabview/bar/button-forward": {
include: "slidebar/button-forward",
alias: "slidebar/button-forward",
style(states) {
if (states.barTop || states.barBottom) {
return {
marginTop: 2,
marginBottom: 2
};
} else {
return {
marginLeft: 2,
marginRight: 2
};
}
}
},
"tabview/bar/button-backward": {
include: "slidebar/button-backward",
alias: "slidebar/button-backward",
style(states) {
if (states.barTop || states.barBottom) {
return {
marginTop: 2,
marginBottom: 2
};
} else {
return {
marginLeft: 2,
marginRight: 2
};
}
}
},
"tabview/bar/scrollpane": {},
"tabview/pane": {
style(states) {
return {
decorator: "tabview-pane",
marginBottom: states.barBottom ? -1 : 0,
marginTop: states.barTop ? -1 : 0,
marginLeft: states.barLeft ? -1 : 0,
marginRight: states.barRight ? -1 : 0
};
}
},
"tabview-page": {
alias: "widget",
include: "widget",
style(states) {
// is used for the padding of the pane
return {
padding: [4, 3]
};
}
},
"tabview-page/button": {
alias: "atom",
style(states) {
var decorator,
padding = 0;
var marginTop = 0,
marginBottom = 0,
marginLeft = 0,
marginRight = 0;
if (states.checked) {
if (states.barTop) {
decorator = "tabview-page-button-top-active";
padding = [5, 11];
marginLeft = states.firstTab ? 0 : -5;
marginRight = states.lastTab ? 0 : -5;
} else if (states.barBottom) {
decorator = "tabview-page-button-bottom-active";
padding = [5, 11];
marginLeft = states.firstTab ? 0 : -5;
marginRight = states.lastTab ? 0 : -5;
marginTop = 3;
} else if (states.barRight) {
decorator = "tabview-page-button-right-active";
padding = [5, 10];
marginTop = states.firstTab ? 0 : -5;
marginBottom = states.lastTab ? 0 : -5;
marginLeft = 2;
} else {
decorator = "tabview-page-button-left-active";
padding = [5, 10];
marginTop = states.firstTab ? 0 : -5;
marginBottom = states.lastTab ? 0 : -5;
}
} else {
if (states.barTop) {
decorator = "tabview-page-button-top-inactive";
padding = [3, 9];
marginTop = 4;
marginLeft = states.firstTab ? 5 : 1;
marginRight = 1;
} else if (states.barBottom) {
decorator = "tabview-page-button-bottom-inactive";
padding = [3, 9];
marginBottom = 4;
marginLeft = states.firstTab ? 5 : 1;
marginRight = 1;
marginTop = 3;
} else if (states.barRight) {
decorator = "tabview-page-button-right-inactive";
padding = [3, 9];
marginRight = 5;
marginTop = states.firstTab ? 5 : 1;
marginBottom = 1;
marginLeft = 3;
} else {
decorator = "tabview-page-button-left-inactive";
padding = [3, 9];
marginLeft = 5;
marginTop = states.firstTab ? 5 : 1;
marginBottom = 1;
marginRight = 1;
}
}
return {
zIndex: states.checked ? 10 : 5,
decorator: decorator,
padding: padding,
marginTop: marginTop,
marginBottom: marginBottom,
marginLeft: marginLeft,
marginRight: marginRight,
textColor: states.disabled
? "text-disabled"
: states.checked
? "text-active"
: "text-inactive"
};
}
},
"tabview-page/button/label": {
alias: "label",
style(states) {
return {
padding: states.focused ? [0, 1, 0, 1] : [1, 2, 1, 2],
//margin : states.focused ? 0 : 1,
decorator: states.focused ? "keyboard-focus" : undefined
};
}
},
"tabview-page/button/close-button": {
alias: "atom",
style(states) {
return {
icon: "icon/16/actions/window-close.png"
};
}
},
/*
---------------------------------------------------------------------------
TOOLBAR
---------------------------------------------------------------------------
*/
toolbar: {
style(states) {
return {
decorator: "toolbar",
spacing: 2
};
}
},
"toolbar/part": {
style(states) {
return {
decorator: "toolbar-part",
spacing: 2
};
}
},
"toolbar/part/container": {
style(states) {
return {
paddingLeft: 2,
paddingRight: 2
};
}
},
"toolbar/part/handle": {
style(states) {
return {
source: "decoration/toolbar/toolbar-handle-knob.gif",
marginLeft: 3,
marginRight: 3
};
}
},
"toolbar-button": {
alias: "atom",
style(states) {
var decorator;
if (
states.pressed ||
(states.checked && !states.hovered) ||
(states.checked && states.disabled)
) {
decorator = "toolbar-button-checked";
} else if (states.hovered && !states.disabled) {
decorator = "toolbar-button-hovered";
}
return {
marginTop: 2,
marginBottom: 2,
padding:
((states.pressed || states.checked || states.hovered) &&
!states.disabled) ||
(states.disabled && states.checked)
? 3
: 5,
decorator: decorator
};
}
},
"toolbar-menubutton": {
alias: "toolbar-button",
include: "toolbar-button",
style(states) {
return {
showArrow: true
};
}
},
"toolbar-menubutton/arrow": {
alias: "image",
include: "image",
style(states) {
return {
source: "decoration/arrows/down-small.png"
};
}
},
"toolbar-splitbutton": {
style(states) {
return {
marginTop: 2,
marginBottom: 2
};
}
},
"toolbar-splitbutton/button": {
alias: "toolbar-button",
include: "toolbar-button",
style(states) {
return {
icon: "decoration/arrows/down.png",
marginTop: undefined,
marginBottom: undefined
};
}
},
"toolbar-splitbutton/arrow": {
alias: "toolbar-button",
include: "toolbar-button",
style(states) {
if (
states.pressed ||
states.checked ||
(states.hovered && !states.disabled)
) {
var padding = 1;
} else {
var padding = 3;
}
return {
padding: padding,
icon: "decoration/arrows/down.png",
marginTop: undefined,
marginBottom: undefined
};
}
},
"toolbar-separator": {
style(states) {
return {
decorator: "toolbar-separator",
margin: 7
};
}
},
/*
---------------------------------------------------------------------------
TREE
---------------------------------------------------------------------------
*/
tree: "list",
"tree-item": {
style(states) {
var decorator = states.selected ? "selected" : undefined;
return {
padding: [2, 6],
textColor: states.selected ? "text-selected" : undefined,
decorator: decorator,
opacity: states.drag ? 0.5 : undefined
};
}
},
"tree-item/icon": {
include: "image",
style(states) {
return {
paddingRight: 5
};
}
},
"tree-item/label": "label",
"tree-item/open": {
include: "image",
style(states) {
var icon;
if (states.selected && states.opened) {
icon = "decoration/tree/open-selected.png";
} else if (states.selected && !states.opened) {
icon = "decoration/tree/closed-selected.png";
} else if (states.opened) {
icon = "decoration/tree/open.png";
} else {
icon = "decoration/tree/closed.png";
}
return {
padding: [0, 5, 0, 2],
source: icon
};
}
},
"tree-folder": {
include: "tree-item",
alias: "tree-item",
style(states) {
var icon, iconOpened;
if (states.small) {
icon = states.opened
? "icon/16/places/folder-open.png"
: "icon/16/places/folder.png";
iconOpened = "icon/16/places/folder-open.png";
} else if (states.large) {
icon = states.opened
? "icon/32/places/folder-open.png"
: "icon/32/places/folder.png";
iconOpened = "icon/32/places/folder-open.png";
} else {
icon = states.opened
? "icon/22/places/folder-open.png"
: "icon/22/places/folder.png";
iconOpened = "icon/22/places/folder-open.png";
}
return {
icon: icon,
iconOpened: iconOpened
};
}
},
"tree-file": {
include: "tree-item",
alias: "tree-item",
style(states) {
return {
icon: states.small
? "icon/16/mimetypes/office-document.png"
: states.large
? "icon/32/mimetypes/office-document.png"
: "icon/22/mimetypes/office-document.png"
};
}
},
/*
---------------------------------------------------------------------------
TREEVIRTUAL
---------------------------------------------------------------------------
*/
treevirtual: "table",
"treevirtual-folder": {
style(states) {
return {
icon: states.opened
? "icon/16/places/folder-open.png"
: "icon/16/places/folder.png"
};
}
},
"treevirtual-file": {
include: "treevirtual-folder",
alias: "treevirtual-folder",
style(states) {
return {
icon: "icon/16/mimetypes/office-document.png"
};
}
},
"treevirtual-line": {
style(states) {
return {
icon: "qx/static/blank.gif"
};
}
},
"treevirtual-contract": {
style(states) {
return {
icon: "decoration/tree/open.png",
paddingLeft: 5,
paddingTop: 2
};
}
},
"treevirtual-expand": {
style(states) {
return {
icon: "decoration/tree/closed.png",
paddingLeft: 5,
paddingTop: 2
};
}
},
"treevirtual-only-contract": "treevirtual-contract",
"treevirtual-only-expand": "treevirtual-expand",
"treevirtual-start-contract": "treevirtual-contract",
"treevirtual-start-expand": "treevirtual-expand",
"treevirtual-end-contract": "treevirtual-contract",
"treevirtual-end-expand": "treevirtual-expand",
"treevirtual-cross-contract": "treevirtual-contract",
"treevirtual-cross-expand": "treevirtual-expand",
"treevirtual-end": {
style(states) {
return {
icon: "qx/static/blank.gif"
};
}
},
"treevirtual-cross": {
style(states) {
return {
icon: "qx/static/blank.gif"
};
}
},
/*
---------------------------------------------------------------------------
TOOL TIP
---------------------------------------------------------------------------
*/
tooltip: {
include: "popup",
style(states) {
return {
backgroundColor: "background-tip",
padding: [1, 3, 2, 3],
offset: [15, 5, 5, 5]
};
}
},
"tooltip/atom": "atom",
"tooltip-error": {
style(states) {
return {
placeMethod: "widget",
offset: [-3, 1, 0, 0],
arrowPosition: states.placementLeft ? "left" : "right",
position: "right-top",
showTimeout: 100,
hideTimeout: 10000,
padding: [0, 4, 4, 0]
};
}
},
"tooltip-error/arrow": {
include: "image",
style(states) {
var source = states.placementLeft
? "decoration/form/tooltip-error-arrow-right.png"
: "decoration/form/tooltip-error-arrow.png";
return {
source: source,
padding: [6, 0, 0, 0],
zIndex: 10000001
};
}
},
"tooltip-error/atom": {
include: "popup",
style(states) {
return {
textColor: "text-selected",
backgroundColor: undefined,
decorator: "tooltip-error",
font: "bold",
padding: [3, 4, 4, 4],
margin: [1, 0, 0, 0],
maxWidth: 333
};
}
},
/*
---------------------------------------------------------------------------
WINDOW
---------------------------------------------------------------------------
*/
window: {
style(states) {
return {
decorator: states.showStatusbar ? "window-incl-statusbar" : "window",
contentPadding: [10, 10, 10, 10],
margin: states.maximized ? 0 : [0, 5, 5, 0]
};
}
},
"window-resize-frame": {
style(states) {
return {
decorator: states.showStatusbar
? "window-resize-frame-incl-statusbar"
: "window-resize-frame"
};
}
},
"window/pane": {
style(states) {
return {
decorator: "window-pane"
};
}
},
"window/captionbar": {
style(states) {
return {
decorator: states.active
? "window-captionbar-active"
: "window-captionbar-inactive",
textColor: states.active ? "window-caption-active-text" : "text-gray",
minHeight: 26,
paddingRight: 2
};
}
},
"window/icon": {
style(states) {
return {
margin: [5, 0, 3, 6]
};
}
},
"window/title": {
style(states) {
return {
alignY: "middle",
font: "bold",
marginLeft: 6,
marginRight: 12
};
}
},
"window/minimize-button": {
alias: "atom",
style(states) {
return {
icon: states.active
? states.hovered
? "decoration/window/minimize-active-hovered.png"
: "decoration/window/minimize-active.png"
: "decoration/window/minimize-inactive.png",
margin: [4, 8, 2, 0]
};
}
},
"window/restore-button": {
alias: "atom",
style(states) {
return {
icon: states.active
? states.hovered
? "decoration/window/restore-active-hovered.png"
: "decoration/window/restore-active.png"
: "decoration/window/restore-inactive.png",
margin: [5, 8, 2, 0]
};
}
},
"window/maximize-button": {
alias: "atom",
style(states) {
return {
icon: states.active
? states.hovered
? "decoration/window/maximize-active-hovered.png"
: "decoration/window/maximize-active.png"
: "decoration/window/maximize-inactive.png",
margin: [4, 8, 2, 0]
};
}
},
"window/close-button": {
alias: "atom",
style(states) {
return {
icon: states.active
? states.hovered
? "decoration/window/close-active-hovered.png"
: "decoration/window/close-active.png"
: "decoration/window/close-inactive.png",
margin: [4, 8, 2, 0]
};
}
},
"window/statusbar": {
style(states) {
return {
padding: [2, 6],
decorator: "window-statusbar",
minHeight: 18
};
}
},
"window/statusbar-text": {
style(states) {
return {
font: "small"
};
}
},
/*
---------------------------------------------------------------------------
IFRAME
---------------------------------------------------------------------------
*/
iframe: {
style(states) {
return {
decorator: "main"
};
}
},
/*
---------------------------------------------------------------------------
RESIZER
---------------------------------------------------------------------------
*/
resizer: {
style(states) {
return {
decorator: "pane"
};
}
},
/*
---------------------------------------------------------------------------
SPLITPANE
---------------------------------------------------------------------------
*/
splitpane: {
style(states) {
return {
decorator: "splitpane"
};
}
},
"splitpane/splitter": {
style(states) {
return {
width: states.horizontal ? 3 : undefined,
height: states.vertical ? 3 : undefined,
backgroundColor: "background-splitpane"
};
}
},
"splitpane/splitter/knob": {
style(states) {
return {
source: states.horizontal
? "decoration/splitpane/knob-horizontal.png"
: "decoration/splitpane/knob-vertical.png"
};
}
},
"splitpane/slider": {
style(states) {
return {
width: states.horizontal ? 3 : undefined,
height: states.vertical ? 3 : undefined,
backgroundColor: "background-splitpane"
};
}
},
/*
---------------------------------------------------------------------------
SELECTBOX
---------------------------------------------------------------------------
*/
selectbox: "button-frame",
"selectbox/atom": "atom",
"selectbox/popup": "popup",
"selectbox/list": {
alias: "list"
},
"selectbox/arrow": {
include: "image",
style(states) {
return {
source: "decoration/arrows/down.png",
paddingLeft: 5
};
}
},
/*
---------------------------------------------------------------------------
DATE CHOOSER
---------------------------------------------------------------------------
*/
datechooser: {
style(states) {
var decorator;
var focused = !!states.focused;
var invalid = !!states.invalid;
var disabled = !!states.disabled;
if (focused && invalid && !disabled) {
decorator = "input-focused-invalid";
} else if (focused && !invalid && !disabled) {
decorator = "input-focused";
} else if (disabled) {
decorator = "input-disabled";
} else if (!focused && invalid && !disabled) {
decorator = "border-invalid";
} else {
decorator = "input";
}
return {
padding: 2,
decorator: decorator,
backgroundColor: "background-light"
};
}
},
"datechooser/navigation-bar": {},
"datechooser/nav-button": {
include: "button-frame",
alias: "button-frame",
style(states) {
var result = {
padding: [2, 4]
};
if (states.lastYear) {
result.icon = "decoration/arrows/rewind.png";
result.marginRight = 1;
} else if (states.lastMonth) {
result.icon = "decoration/arrows/left.png";
} else if (states.nextYear) {
result.icon = "decoration/arrows/forward.png";
result.marginLeft = 1;
} else if (states.nextMonth) {
result.icon = "decoration/arrows/right.png";
}
return result;
}
},
"datechooser/last-year-button-tooltip": "tooltip",
"datechooser/last-month-button-tooltip": "tooltip",
"datechooser/next-year-button-tooltip": "tooltip",
"datechooser/next-month-button-tooltip": "tooltip",
"datechooser/last-year-button": "datechooser/nav-button",
"datechooser/last-month-button": "datechooser/nav-button",
"datechooser/next-month-button": "datechooser/nav-button",
"datechooser/next-year-button": "datechooser/nav-button",
"datechooser/month-year-label": {
style(states) {
return {
font: "bold",
textAlign: "center",
textColor: states.disabled ? "text-disabled" : undefined
};
}
},
"datechooser/date-pane": {
style(states) {
return {
textColor: states.disabled ? "text-disabled" : undefined,
marginTop: 2
};
}
},
"datechooser/weekday": {
style(states) {
return {
textColor: states.disabled
? "text-disabled"
: states.weekend
? "text-light"
: undefined,
textAlign: "center",
paddingTop: 2,
backgroundColor: "background-medium"
};
}
},
"datechooser/week": {
style(states) {
return {
textAlign: "center",
padding: [2, 4],
backgroundColor: "background-medium"
};
}
},
"datechooser/day": {
style(states) {
var decorator = states.disabled
? undefined
: states.selected
? "selected"
: undefined;
return {
textAlign: "center",
decorator: decorator,
textColor: states.disabled
? "text-disabled"
: states.selected
? "text-selected"
: states.otherMonth
? "text-light"
: undefined,
font: states.today ? "bold" : undefined,
padding: [2, 4]
};
}
},
/*
---------------------------------------------------------------------------
COMBOBOX
---------------------------------------------------------------------------
*/
combobox: {
style(states) {
var decorator;
var focused = !!states.focused;
var invalid = !!states.invalid;
var disabled = !!states.disabled;
if (focused && invalid && !disabled) {
decorator = "input-focused-invalid";
} else if (focused && !invalid && !disabled) {
decorator = "input-focused";
} else if (disabled) {
decorator = "input-disabled";
} else if (!focused && invalid && !disabled) {
decorator = "border-invalid";
} else {
decorator = "input";
}
return {
decorator: decorator
};
}
},
"combobox/popup": "popup",
"combobox/list": {
alias: "list"
},
"combobox/button": {
include: "button-frame",
alias: "button-frame",
style(states, superStyles) {
var ret = {
icon: "decoration/arrows/down.png",
padding: [superStyles.padding[0], superStyles.padding[1] - 6],
margin: undefined
};
if (states.selected) {
ret.decorator = "button-focused";
}
return ret;
}
},
"combobox/textfield": {
include: "textfield",
style(states) {
return {
decorator: undefined
};
}
},
/*
---------------------------------------------------------------------------
MENU
---------------------------------------------------------------------------
*/
menu: {
style(states) {
var result = {
decorator: "menu",
spacingX: 6,
spacingY: 1,
iconColumnWidth: 16,
arrowColumnWidth: 4,
placementModeY:
states.submenu || states.contextmenu ? "best-fit" : "keep-align"
};
if (states.submenu) {
result.position = "right-top";
result.offset = [-2, -3];
}
return result;
}
},
"menu/slidebar": "menu-slidebar",
"menu-slidebar": "widget",
"menu-slidebar-button": {
style(states) {
var decorator = states.hovered ? "selected" : undefined;
return {
decorator: decorator,
padding: 7,
center: true
};
}
},
"menu-slidebar/button-backward": {
include: "menu-slidebar-button",
style(states) {
return {
icon: states.hovered
? "decoration/arrows/up-invert.png"
: "decoration/arrows/up.png"
};
}
},
"menu-slidebar/button-forward": {
include: "menu-slidebar-button",
style(states) {
return {
icon: states.hovered
? "decoration/arrows/down-invert.png"
: "decoration/arrows/down.png"
};
}
},
"menu-separator": {
style(states) {
return {
height: 0,
decorator: "menu-separator",
margin: [4, 2]
};
}
},
"menu-button": {
alias: "atom",
style(states) {
var decorator = states.selected ? "selected" : undefined;
return {
decorator: decorator,
textColor: states.selected ? "text-selected" : undefined,
padding: [4, 6]
};
}
},
"menu-button/icon": {
include: "image",
style(states) {
return {
alignY: "middle"
};
}
},
"menu-button/label": {
include: "label",
style(states) {
return {
alignY: "middle",
padding: 1
};
}
},
"menu-button/shortcut": {
include: "label",
style(states) {
return {
alignY: "middle",