@qooxdoo/framework
Version:
The JS Framework for Coders
2,154 lines (1,830 loc) • 60 kB
JavaScript
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2004-2011 1&1 Internet AG, Germany, http://www.1und1.de
License:
MIT: https://opensource.org/licenses/MIT
See the LICENSE file in the project's top-level directory for details.
Authors:
* Martin Wittemann (martinwittemann)
************************************************************************* */
/* ************************************************************************
************************************************************************* */
/**
* The simple qooxdoo appearance theme.
*
* @asset(qx/icon/${qx.icontheme}/16/apps/office-calendar.png)
* @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/text-plain.png)
* @asset(qx/icon/${qx.icontheme}/16/actions/view-refresh.png)
* @asset(qx/icon/${qx.icontheme}/16/actions/window-close.png)
* @asset(qx/icon/${qx.icontheme}/16/actions/dialog-cancel.png)
* @asset(qx/icon/${qx.icontheme}/16/actions/dialog-ok.png)
*/
qx.Theme.define("qx.theme.simple.Appearance", {
include: [qx.test.MAppearance],
appearances: {
/*
---------------------------------------------------------------------------
CORE
---------------------------------------------------------------------------
*/
widget: {},
label: {
style(states) {
return {
textColor: states.disabled ? "text-disabled" : undefined
};
}
},
image: {
style(states) {
return {
opacity: !states.replacement && states.disabled ? 0.3 : undefined
};
}
},
atom: {},
"atom/label": "label",
"atom/icon": "image",
root: {
style(states) {
return {
backgroundColor: "background",
textColor: "text",
font: "default"
};
}
},
popup: {
style(states) {
return {
decorator: "popup",
backgroundColor: "background-pane"
};
}
},
tooltip: {
include: "popup",
style(states) {
return {
backgroundColor: "tooltip",
textColor: "tooltip-text",
decorator: "tooltip",
padding: [1, 3, 2, 3],
offset: [10, 5, 5, 5]
};
}
},
"tooltip/atom": "atom",
"tooltip-error": {
include: "tooltip",
style(states) {
return {
textColor: "text-selected",
showTimeout: 100,
hideTimeout: 10000,
decorator: "tooltip-error",
font: "bold",
backgroundColor: undefined
};
}
},
"tooltip-error/atom": "atom",
iframe: {
style(states) {
return {
backgroundColor: "white",
decorator: "main-dark"
};
}
},
"move-frame": {
style(states) {
return {
decorator: "main-dark"
};
}
},
"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: qx.theme.simple.Image.URLS["cursor-" + icon],
position: "right-top",
offset: [2, 16, 2, 6]
};
}
},
/*
---------------------------------------------------------------------------
SLIDEBAR
---------------------------------------------------------------------------
*/
slidebar: {},
"slidebar/scrollpane": {},
"slidebar/content": {},
"slidebar/button-forward": {
alias: "button",
include: "button",
style(states) {
return {
icon: qx.theme.simple.Image.URLS[
"arrow-" + (states.vertical ? "down" : "right")
]
};
}
},
"slidebar/button-backward": {
alias: "button",
include: "button",
style(states) {
return {
icon: qx.theme.simple.Image.URLS[
"arrow-" + (states.vertical ? "up" : "left")
]
};
}
},
/*
---------------------------------------------------------------------------
TABLE
---------------------------------------------------------------------------
*/
table: "widget",
"table/statusbar": {
style(states) {
return {
decorator: "statusbar",
padding: [2, 5]
};
}
},
"table/column-button": {
alias: "button",
style(states) {
return {
decorator: "table-header-column-button",
padding: 3,
icon: qx.theme.simple.Image.URLS["select-column-order"]
};
}
},
"table-column-reset-button": {
include: "menu-button",
alias: "menu-button",
style() {
return {
icon: "icon/16/actions/view-refresh.png"
};
}
},
"table-scroller/scrollbar-x": "scrollbar",
"table-scroller/scrollbar-y": "scrollbar",
"table-scroller": "widget",
"table-scroller/header": {
style() {
return {
decorator: "table-header"
};
}
},
"table-scroller/pane": {},
"table-scroller/focus-indicator": {
style(states) {
return {
decorator: "main"
};
}
},
"table-scroller/resize-line": {
style(states) {
return {
backgroundColor: "button-border",
width: 3
};
}
},
"table-header-cell": {
alias: "atom",
style(states) {
return {
decorator: states.first
? "table-header-cell-first"
: "table-header-cell",
minWidth: 13,
font: "bold",
paddingTop: 3,
paddingLeft: 5,
cursor: states.disabled ? undefined : "pointer",
sortIcon: states.sorted
? qx.theme.simple.Image.URLS[
"table-" + (states.sortedAscending ? "ascending" : "descending")
]
: undefined
};
}
},
"table-header-cell/icon": {
include: "atom/icon",
style(states) {
return {
paddingRight: 5
};
}
},
"table-header-cell/sort-icon": {
style(states) {
return {
alignY: "middle",
alignX: "right",
paddingRight: 5
};
}
},
"table-editor-textfield": {
include: "textfield",
style(states) {
return {
decorator: undefined,
padding: [2, 2]
};
}
},
"table-editor-selectbox": {
include: "selectbox",
alias: "selectbox",
style(states) {
return {
padding: [0, 2]
};
}
},
"table-editor-combobox": {
include: "combobox",
alias: "combobox",
style(states) {
return {
decorator: undefined
};
}
},
"progressive-table-header": {
style(states) {
return {
decorator: "progressive-table-header"
};
}
},
"progressive-table-header-cell": {
style(states) {
return {
decorator: "progressive-table-header-cell",
padding: [5, 6, 5, 6]
};
}
},
/*
---------------------------------------------------------------------------
TREEVIRTUAL
---------------------------------------------------------------------------
*/
treevirtual: {
include: "textfield",
alias: "table",
style(states, superStyles) {
return {
padding: [superStyles.padding[0] + 2, superStyles.padding[1] + 1]
};
}
},
"treevirtual-folder": {
style(states) {
return {
icon: states.opened
? "icon/16/places/folder-open.png"
: "icon/16/places/folder.png",
opacity: states.drag ? 0.5 : undefined
};
}
},
"treevirtual-file": {
include: "treevirtual-folder",
alias: "treevirtual-folder",
style(states) {
return {
icon: "icon/16/mimetypes/text-plain.png",
opacity: states.drag ? 0.5 : undefined
};
}
},
"treevirtual-line": {
style(states) {
return {
icon: qx.theme.simple.Image.URLS["treevirtual-line"]
};
}
},
"treevirtual-contract": {
style(states) {
return {
icon: qx.theme.simple.Image.URLS["tree-minus"]
};
}
},
"treevirtual-expand": {
style(states) {
return {
icon: qx.theme.simple.Image.URLS["tree-plus"]
};
}
},
"treevirtual-only-contract": {
style(states) {
return {
icon: qx.theme.simple.Image.URLS["treevirtual-minus-only"]
};
}
},
"treevirtual-only-expand": {
style(states) {
return {
icon: qx.theme.simple.Image.URLS["treevirtual-plus-only"]
};
}
},
"treevirtual-start-contract": {
style(states) {
return {
icon: qx.theme.simple.Image.URLS["treevirtual-minus-start"]
};
}
},
"treevirtual-start-expand": {
style(states) {
return {
icon: qx.theme.simple.Image.URLS["treevirtual-plus-start"]
};
}
},
"treevirtual-end-contract": {
style(states) {
return {
icon: qx.theme.simple.Image.URLS["treevirtual-minus-end"]
};
}
},
"treevirtual-end-expand": {
style(states) {
return {
icon: qx.theme.simple.Image.URLS["treevirtual-plus-end"]
};
}
},
"treevirtual-cross-contract": {
style(states) {
return {
icon: qx.theme.simple.Image.URLS["treevirtual-minus-cross"]
};
}
},
"treevirtual-cross-expand": {
style(states) {
return {
icon: qx.theme.simple.Image.URLS["treevirtual-plus-cross"]
};
}
},
"treevirtual-end": {
style(states) {
return {
icon: qx.theme.simple.Image.URLS["treevirtual-end"]
};
}
},
"treevirtual-cross": {
style(states) {
return {
icon: qx.theme.simple.Image.URLS["treevirtual-cross"]
};
}
},
"treevirtual-node-editor-textfield": {
include: "textfield",
style(states) {
return {
decorator: undefined,
padding: [2, 2]
};
}
},
/*
---------------------------------------------------------------------------
RESIZER
---------------------------------------------------------------------------
*/
resizer: {
style(states) {
return {
decorator: "main-dark"
};
}
},
/*
---------------------------------------------------------------------------
SPLITPANE
---------------------------------------------------------------------------
*/
splitpane: {},
"splitpane/splitter": {
style(states) {
return {
backgroundColor: "light-background"
};
}
},
"splitpane/splitter/knob": {
style(states) {
return {
source:
qx.theme.simple.Image.URLS[
"knob-" + (states.horizontal ? "horizontal" : "vertical")
],
padding: 2
};
}
},
"splitpane/slider": {
style(states) {
return {
backgroundColor: "border-light-shadow",
opacity: 0.3
};
}
},
/*
---------------------------------------------------------------------------
MENU
---------------------------------------------------------------------------
*/
menu: {
style(states) {
var result = {
backgroundColor: "background",
decorator: "main",
spacingX: 6,
spacingY: 1,
iconColumnWidth: 16,
arrowColumnWidth: 4,
padding: 1,
placementModeY:
states.submenu || states.contextmenu ? "best-fit" : "keep-align"
};
if (states.submenu) {
result.position = "right-top";
result.offset = [-2, -3];
}
if (states.contextmenu) {
result.offset = 4;
}
return result;
}
},
"menu/slidebar": "menu-slidebar",
"menu-slidebar": "widget",
"menu-slidebar-button": {
style(states) {
return {
backgroundColor: states.hovered ? "background-selected" : undefined,
padding: 6,
center: true
};
}
},
"menu-slidebar/button-backward": {
include: "menu-slidebar-button",
style(states) {
return {
icon: qx.theme.simple.Image.URLS[
"arrow-up" + (states.hovered ? "-invert" : "")
]
};
}
},
"menu-slidebar/button-forward": {
include: "menu-slidebar-button",
style(states) {
return {
icon: qx.theme.simple.Image.URLS[
"arrow-down" + (states.hovered ? "-invert" : "")
]
};
}
},
"menu-separator": {
style(states) {
return {
height: 0,
decorator: "menu-separator",
marginTop: 4,
marginBottom: 4,
marginLeft: 2,
marginRight: 2
};
}
},
"menu-button": {
alias: "atom",
style(states) {
return {
backgroundColor: states.selected ? "background-selected" : undefined,
textColor: states.selected ? "text-selected" : undefined,
padding: [2, 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",
marginLeft: 14,
padding: 1
};
}
},
"menu-button/arrow": {
include: "image",
style(states) {
return {
source:
qx.theme.simple.Image.URLS[
"arrow-right" + (states.selected ? "-invert" : "")
],
alignY: "middle"
};
}
},
"menu-checkbox": {
alias: "menu-button",
include: "menu-button",
style(states) {
return {
icon: !states.checked
? undefined
: qx.theme.simple.Image.URLS[
"menu-checkbox" + (states.selected ? "-invert" : "")
]
};
}
},
"menu-radiobutton": {
alias: "menu-button",
include: "menu-button",
style(states) {
return {
icon: !states.checked
? undefined
: qx.theme.simple.Image.URLS[
"menu-radiobutton" + (states.selected ? "-invert" : "")
]
};
}
},
/*
---------------------------------------------------------------------------
MENU BAR
---------------------------------------------------------------------------
*/
menubar: {
style(states) {
return {
backgroundColor: "light-background",
padding: [4, 2]
};
}
},
"menubar-button": {
style(states) {
var decorator;
var padding = [2, 6];
if (!states.disabled) {
if (states.pressed) {
decorator = "menubar-button-pressed";
padding = [1, 5, 2, 5];
} else if (states.hovered) {
decorator = "menubar-button-hovered";
padding = [1, 5];
}
}
return {
padding: padding,
cursor: states.disabled ? undefined : "pointer",
textColor: "link",
decorator: decorator
};
}
},
/*
---------------------------------------------------------------------------
VIRTUAL WIDGETS
---------------------------------------------------------------------------
*/
"virtual-list": "list",
"virtual-list/row-layer": "row-layer",
"row-layer": "widget",
"column-layer": "widget",
"virtual-background-span": {
alias: "widget",
style(states) {
var style = {
decorator: "virtual-background-span"
};
if (states.header) {
style.decorator = "virtual-background-header";
style.backgroundColor = "table-header-cell";
} else if (states.selected) {
style.backgroundColor = "table-row-background-selected";
} else if (states.odd) {
style.backgroundColor = "table-row-background-odd";
} else {
style.backgroundColor = "table-row-background-even";
}
return style;
}
},
"virtual-list-header-cell": {
alias: "atom",
style(states) {
return {
font: "bold",
paddingTop: 3,
paddingLeft: 5
};
}
},
"group-item": {
include: "label",
alias: "label",
style(states) {
return {
padding: 4,
backgroundColor: "#BABABA",
textColor: "white",
font: "bold"
};
}
},
"virtual-selectbox": "selectbox",
"virtual-selectbox/dropdown": "popup",
"virtual-selectbox/dropdown/list": {
alias: "virtual-list"
},
"virtual-combobox": "combobox",
"virtual-combobox/dropdown": "popup",
"virtual-combobox/dropdown/list": {
alias: "virtual-list"
},
"virtual-tree": {
include: "tree",
alias: "tree",
style(states) {
return {
itemHeight: 21
};
}
},
"virtual-tree-folder": "tree-folder",
"virtual-tree-file": "tree-file",
cell: {
style(states) {
return {
backgroundColor: states.selected
? "table-row-background-selected"
: "table-row-background-even",
textColor: states.selected ? "text-selected" : "text",
padding: [3, 6]
};
}
},
"cell-string": "cell",
"cell-number": {
include: "cell",
style(states) {
return {
textAlign: "right"
};
}
},
"cell-image": "cell",
"cell-boolean": "cell",
"cell-atom": "cell",
"cell-date": "cell",
"cell-html": "cell",
/*
---------------------------------------------------------------------------
SCROLLBAR
---------------------------------------------------------------------------
*/
scrollbar: {},
"scrollbar/slider": {},
"scrollbar/slider/knob": {
style(states) {
var decorator = "scroll-knob";
if (!states.disabled) {
if (states.hovered && !states.pressed && !states.checked) {
decorator = "scroll-knob-hovered";
} else if (states.hovered && (states.pressed || states.checked)) {
decorator = "scroll-knob-pressed-hovered";
} else if (states.pressed || states.checked) {
decorator = "scroll-knob-pressed";
}
}
return {
height: 14,
width: 14,
cursor: states.disabled ? undefined : "pointer",
decorator: decorator,
minHeight: states.horizontal ? undefined : 20,
minWidth: states.horizontal ? 20 : undefined
};
}
},
"scrollbar/button": {
style(states) {
var styles = {};
styles.padding = 4;
var icon = "";
if (states.left) {
icon = "left";
styles.marginRight = 2;
} else if (states.right) {
icon += "right";
styles.marginLeft = 2;
} else if (states.up) {
icon += "up";
styles.marginBottom = 2;
} else {
icon += "down";
styles.marginTop = 2;
}
styles.icon = qx.theme.simple.Image.URLS["arrow-" + icon];
styles.cursor = "pointer";
styles.decorator = "button-box";
return styles;
}
},
"scrollbar/button-begin": "scrollbar/button",
"scrollbar/button-end": "scrollbar/button",
/*
---------------------------------------------------------------------------
SCROLLAREA
---------------------------------------------------------------------------
*/
"scrollarea/corner": {
style(states) {
return {
backgroundColor: "background"
};
}
},
scrollarea: "widget",
"scrollarea/pane": "widget",
"scrollarea/scrollbar-x": "scrollbar",
"scrollarea/scrollbar-y": "scrollbar",
/*
---------------------------------------------------------------------------
TEXT FIELD
---------------------------------------------------------------------------
*/
textfield: {
style(states) {
var textColor;
if (states.disabled) {
textColor = "text-disabled";
} else if (states.showingPlaceholder) {
textColor = "text-placeholder";
} else {
textColor = undefined;
}
var decorator;
var padding;
if (states.disabled) {
decorator = "inset";
padding = [2, 3];
} else if (states.invalid) {
decorator = "border-invalid";
padding = [1, 2];
} else if (states.focused) {
decorator = "focused-inset";
padding = [1, 2];
} else {
padding = [2, 3];
decorator = "inset";
}
return {
decorator: decorator,
padding: padding,
textColor: textColor,
backgroundColor: states.disabled ? "background-disabled" : "white"
};
}
},
textarea: "textfield",
/*
---------------------------------------------------------------------------
RADIO BUTTON
---------------------------------------------------------------------------
*/
"radiobutton/icon": {
style(states) {
var decorator = "radiobutton";
if (states.focused && !states.invalid) {
decorator = "radiobutton-focused";
}
decorator += states.invalid && !states.disabled ? "-invalid" : "";
var backgroundColor;
if (states.disabled && states.checked) {
backgroundColor = "background-disabled-checked";
} else if (states.disabled) {
backgroundColor = "background-disabled";
} else if (states.checked) {
backgroundColor = "background-selected";
}
return {
decorator: decorator,
width: 12,
height: 12,
backgroundColor: backgroundColor
};
}
},
radiobutton: {
style(states) {
// set an empty icon to be sure that the icon image is rendered
return {
icon: qx.theme.simple.Image.URLS["blank"]
};
}
},
/*
---------------------------------------------------------------------------
FORM
---------------------------------------------------------------------------
*/
"form-renderer-label": {
include: "label",
style() {
return {
paddingTop: 3
};
}
},
/*
---------------------------------------------------------------------------
CHECK BOX
---------------------------------------------------------------------------
*/
checkbox: {
alias: "atom",
style(states) {
// The "disabled" icon is set to an icon **without** the -disabled
// suffix on purpose. This is because the Image widget handles this
// already by replacing the current image with a disabled version
// (if available). If no disabled image is found, the opacity style
// is used.
var icon;
// Checked
if (states.checked) {
icon = qx.theme.simple.Image.URLS["checkbox-checked"];
// Undetermined
} else if (states.undetermined) {
icon = qx.theme.simple.Image.URLS["checkbox-undetermined"];
// Unchecked
} else {
// empty icon
icon = qx.theme.simple.Image.URLS["blank"];
}
return {
icon: icon,
gap: 6
};
}
},
"checkbox/icon": {
style(states) {
var decorator = "checkbox";
if (states.focused && !states.invalid) {
decorator = "checkbox-focused";
}
decorator += states.invalid && !states.disabled ? "-invalid" : "";
var padding;
// Checked
if (states.checked) {
padding = 2;
// Undetermined
} else if (states.undetermined) {
padding = [4, 2];
}
return {
decorator: decorator,
width: 12,
height: 12,
padding: padding,
backgroundColor: "white"
};
}
},
/*
---------------------------------------------------------------------------
SPINNER
---------------------------------------------------------------------------
*/
spinner: {
style(states) {
var decorator;
if (!!states.invalid && !states.disabled) {
decorator = "border-invalid";
}
return {
decorator: decorator,
textColor: states.disabled ? "text-disabled" : undefined
};
}
},
"spinner/textfield": "textfield",
"spinner/upbutton": {
alias: "combobox/button",
include: "combobox/button",
style(states) {
var decorator = "button-box-top-right";
if (states.hovered && !states.pressed && !states.checked) {
decorator = "button-box-hovered-top-right";
} else if (states.hovered && (states.pressed || states.checked)) {
decorator = "button-box-pressed-hovered-top-right";
} else if (states.pressed || states.checked) {
decorator = "button-box-pressed-top-right";
}
return {
icon: qx.theme.simple.Image.URLS["arrow-up-small"],
decorator: decorator,
width: 17
};
}
},
"spinner/downbutton": {
alias: "combobox/button",
include: "combobox/button",
style(states) {
var decorator = "button-box-bottom-right";
if (states.hovered && !states.pressed && !states.checked) {
decorator = "button-box-hovered-bottom-right";
} else if (states.hovered && (states.pressed || states.checked)) {
decorator = "button-box-pressed-hovered-bottom-right";
} else if (states.pressed || states.checked) {
decorator = "button-box-pressed-bottom-right";
}
return {
icon: qx.theme.simple.Image.URLS["arrow-down-small"],
decorator: decorator,
width: 17
};
}
},
/*
---------------------------------------------------------------------------
SELECTBOX
---------------------------------------------------------------------------
*/
selectbox: "button-frame",
"selectbox/atom": "atom",
"selectbox/popup": "popup",
"selectbox/list": {
alias: "list",
include: "list",
style() {
return {
decorator: undefined
};
}
},
"selectbox/arrow": {
include: "image",
style(states) {
return {
source: qx.theme.simple.Image.URLS["arrow-down"],
paddingRight: 4,
paddingLeft: 5
};
}
},
/*
---------------------------------------------------------------------------
COMBO BOX
---------------------------------------------------------------------------
*/
combobox: {
style(states) {
var decorator;
if (!!states.invalid && !states.disabled) {
decorator = "border-invalid";
}
return {
decorator: decorator
};
}
},
"combobox/button": {
alias: "button-frame",
include: "button-frame",
style(states) {
var decorator = "button-box-right-borderless";
if (states.hovered && !states.pressed && !states.checked) {
decorator = "button-box-hovered-right-borderless";
} else if (states.hovered && (states.pressed || states.checked)) {
decorator = "button-box-pressed-hovered-right-borderless";
} else if (states.pressed || states.checked) {
decorator = "button-box-pressed-right-borderless";
}
return {
icon: qx.theme.simple.Image.URLS["arrow-down"],
decorator: decorator,
padding: [0, 5],
width: 19
};
}
},
"combobox/popup": "popup",
"combobox/list": {
alias: "list"
},
"combobox/textfield": "textfield",
/*
---------------------------------------------------------------------------
DATEFIELD
---------------------------------------------------------------------------
*/
datefield: "textfield",
"datefield/button": {
alias: "combobox/button",
include: "combobox/button",
style(states) {
return {
icon: "icon/16/apps/office-calendar.png",
padding: [0, 0, 0, 3],
backgroundColor: undefined,
decorator: undefined,
width: 19
};
}
},
"datefield/textfield": {
alias: "textfield",
include: "textfield",
style(states) {
return {
decorator: undefined,
padding: 0
};
}
},
"datefield/list": {
alias: "datechooser",
include: "datechooser",
style(states) {
return {
decorator: undefined
};
}
},
/*
---------------------------------------------------------------------------
LIST
---------------------------------------------------------------------------
*/
list: {
alias: "scrollarea",
include: "textfield"
},
listitem: {
alias: "atom",
style(states) {
let useSelectionState = !states.readonly && states.selected;
var padding = [3, 5, 3, 5];
if (states.lead) {
padding = [2, 4, 2, 4];
}
if (states.dragover) {
padding[2] -= 2;
}
var backgroundColor;
if (useSelectionState) {
backgroundColor = "background-selected";
if (states.disabled) {
backgroundColor += "-disabled";
}
}
return {
gap: 4,
padding: padding,
backgroundColor: backgroundColor,
textColor: useSelectionState ? "text-selected" : undefined,
decorator: states.lead
? "lead-item"
: states.dragover
? "dragover"
: undefined,
opacity: states.drag ? 0.5 : undefined
};
}
},
/*
---------------------------------------------------------------------------
SLIDER
---------------------------------------------------------------------------
*/
slider: {
style(states) {
var decorator;
var padding;
if (states.disabled) {
decorator = "inset";
padding = [2, 3];
} else if (states.invalid) {
decorator = "border-invalid";
padding = [1, 2];
} else if (states.focused) {
decorator = "focused-inset";
padding = [1, 2];
} else {
padding = [2, 3];
decorator = "inset";
}
return {
decorator: decorator,
padding: padding
};
}
},
"slider/knob": "scrollbar/slider/knob",
/*
---------------------------------------------------------------------------
BUTTON
---------------------------------------------------------------------------
*/
"button-frame": {
alias: "atom",
style(states) {
var decorator = "button-box";
if (!states.disabled) {
if (states.hovered && !states.pressed && !states.checked) {
decorator = "button-box-hovered";
} else if (states.hovered && (states.pressed || states.checked)) {
decorator = "button-box-pressed-hovered";
} else if (states.pressed || states.checked) {
decorator = "button-box-pressed";
}
}
if (states.invalid && !states.disabled) {
decorator += "-invalid";
} else if (states.focused) {
decorator += "-focused";
}
return {
decorator: decorator,
padding: [3, 8],
cursor: states.disabled ? undefined : "pointer",
minWidth: 5,
minHeight: 5
};
}
},
"button-frame/label": {
alias: "atom/label",
style(states) {
return {
textColor: states.disabled ? "text-disabled" : undefined
};
}
},
button: {
alias: "button-frame",
include: "button-frame",
style(states) {
return {
center: true
};
}
},
"toggle-button": "button",
"hover-button": {
alias: "button",
include: "button",
style(states) {
return {
decorator: states.hovered ? "button-hover" : undefined
};
}
},
menubutton: {
include: "button",
alias: "button",
style(states) {
return {
icon: qx.theme.simple.Image.URLS["arrow-down"],
iconPosition: "right"
};
}
},
/*
---------------------------------------------------------------------------
SPLIT BUTTON
---------------------------------------------------------------------------
*/
splitbutton: {},
"splitbutton/button": {
alias: "atom",
style(states) {
var decorator = "button-box";
if (!states.disabled) {
if (states.pressed || states.checked) {
decorator += "-pressed";
}
if (states.hovered) {
decorator += "-hovered";
}
}
if (states.focused) {
decorator += "-focused";
}
decorator += "-left";
return {
decorator: decorator,
padding: [3, 8],
cursor: states.disabled ? undefined : "pointer"
};
}
},
"splitbutton/arrow": {
style(states) {
var decorator = "button-box";
if (!states.disabled) {
if (states.pressed || states.checked) {
decorator += "-pressed";
}
if (states.hovered) {
decorator += "-hovered";
}
}
if (states.focused) {
decorator += "-focused";
}
decorator += "-right";
return {
icon: qx.theme.simple.Image.URLS["arrow-down"],
decorator: decorator,
cursor: states.disabled ? undefined : "pointer",
padding: [3, 4]
};
}
},
/*
---------------------------------------------------------------------------
GROUP BOX
---------------------------------------------------------------------------
*/
groupbox: {},
"groupbox/legend": {
alias: "atom",
style(states) {
return {
textColor: states.invalid ? "invalid" : undefined,
padding: 5,
margin: 4,
font: "bold"
};
}
},
"groupbox/frame": {
style(states) {
return {
backgroundColor: "background",
padding: [6, 9],
margin: [18, 2, 2, 2],
decorator: "white-box"
};
}
},
"check-groupbox": "groupbox",
"check-groupbox/legend": {
alias: "checkbox",
include: "checkbox",
style(states) {
return {
textColor: states.invalid ? "invalid" : undefined,
padding: 5,
margin: 4,
font: "bold"
};
}
},
"radio-groupbox": "groupbox",
"radio-groupbox/legend": {
alias: "radiobutton",
include: "radiobutton",
style(states) {
return {
textColor: states.invalid ? "invalid" : undefined,
padding: 5,
margin: 4,
font: "bold"
};
}
},
/*
---------------------------------------------------------------------------
TREE
---------------------------------------------------------------------------
*/
"tree-folder/open": {
include: "image",
style(states) {
return {
source: states.opened
? qx.theme.simple.Image.URLS["tree-minus"]
: qx.theme.simple.Image.URLS["tree-plus"]
};
}
},
"tree-folder": {
style(states) {
var backgroundColor;
if (states.selected) {
backgroundColor = "background-selected";
if (states.disabled) {
backgroundColor += "-disabled";
}
}
return {
padding: [2, 8, 2, 5],
icon: states.opened
? "icon/16/places/folder-open.png"
: "icon/16/places/folder.png",
backgroundColor: backgroundColor,
iconOpened: "icon/16/places/folder-open.png",
opacity: states.drag ? 0.5 : undefined
};
}
},
"tree-folder/icon": {
include: "image",
style(states) {
return {
padding: [0, 4, 0, 0]
};
}
},
"tree-folder/label": {
style(states) {
return {
padding: [1, 2],
textColor:
states.selected && !states.disabled ? "text-selected" : undefined
};
}
},
"tree-file": {
include: "tree-folder",
alias: "tree-folder",
style(states) {
return {
icon: "icon/16/mimetypes/text-plain.png",
opacity: states.drag ? 0.5 : undefined
};
}
},
tree: {
include: "list",
alias: "list",
style(states) {
return {
contentPadding: states.invalid && !states.disabled ? [3, 0] : [4, 1],
padding: states.focused ? 0 : 1
};
}
},
/*
---------------------------------------------------------------------------
WINDOW
---------------------------------------------------------------------------
*/
window: {
style(states) {
return {
contentPadding: [10, 10, 10, 10],
backgroundColor: "background",
decorator: states.maximized
? undefined
: states.active
? "window-active"
: "window"
};
}
},
"window-resize-frame": "resize-frame",
"window/pane": {},
"window/captionbar": {
style(states) {
return {
backgroundColor: states.active
? "light-background"
: "background-disabled",
padding: 8,
font: "bold",
decorator: "window-caption"
};
}
},
"window/icon": {
style(states) {
return {
marginRight: 4
};
}
},
"window/title": {
style(states) {
return {
cursor: "default",
font: "bold",
marginRight: 20,
alignY: "middle"
};
}
},
"window/minimize-button": {
alias: "button",
style(states) {
return {
icon: qx.theme.simple.Image.URLS["window-minimize"],
padding: [1, 2],
cursor: states.disabled ? undefined : "pointer"
};
}
},
"window/restore-button": {
alias: "button",
style(states) {
return {
icon: qx.theme.simple.Image.URLS["window-restore"],
padding: [1, 2],
cursor: states.disabled ? undefined : "pointer"
};
}
},
"window/maximize-button": {
alias: "button",
style(states) {
return {
icon: qx.theme.simple.Image.URLS["window-maximize"],
padding: [1, 2],
cursor: states.disabled ? undefined : "pointer"
};
}
},
"window/close-button": {
alias: "button",
style(states) {
return {
marginLeft: 2,
icon: qx.theme.simple.Image.URLS["window-close"],
padding: [1, 2],
cursor: states.disabled ? undefined : "pointer"
};
}
},
"window/statusbar": {
style(states) {
return {
decorator: "statusbar",
padding: [2, 6]
};
}
},
"window/statusbar-text": "label",
/*
---------------------------------------------------------------------------
DATE CHOOSER
---------------------------------------------------------------------------
*/
datechooser: {
style(states) {
return {
decorator: "main",
minWidth: 220
};
}
},
"datechooser/navigation-bar": {
style(states) {
return {
backgroundColor: "background",
textColor: states.disabled
? "text-disabled"
: states.invalid
? "invalid"
: undefined,
padding: [2, 10]
};
}
},
"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/button",
"datechooser/last-month-button": "datechooser/button",
"datechooser/next-year-button": "datechooser/button",
"datechooser/next-month-button": "datechooser/button",
"datechooser/button/icon": {},
"datechooser/button": {
style(states) {
var result = {
width: 17,
show: "icon",
cursor: states.disabled ? undefined : "pointer"
};
if (states.lastYear) {
result.icon = qx.theme.simple.Image.URLS["arrow-rewind"];
} else if (states.lastMonth) {
result.icon = qx.theme.simple.Image.URLS["arrow-left"];
} else if (states.nextYear) {
result.icon = qx.theme.simple.Image.URLS["arrow-forward"];
} else if (states.nextMonth) {
result.icon = qx.theme.simple.Image.URLS["arrow-right"];
}
return result;
}
},
"datechooser/month-year-label": {
style(states) {
return {
font: "bold",
textAlign: "center"
};
}
},
"datechooser/date-pane": {
style(states) {
return {
decorator: "datechooser-date-pane",
backgroundColor: "background"
};
}
},
"datechooser/weekday": {
style(states) {
return {
decorator: "datechooser-weekday",
font: "bold",
textAlign: "center",
textColor: states.disabled
? "text-disabled"
: states.weekend
? "background-selected-dark"
: "background",
backgroundColor: states.weekend
? "background"
: "background-selected-dark",
paddingTop: 2
};
}
},
"datechooser/day": {
style(states) {
return {
textAlign: "center",
decorator: states.today ? "main" : undefined,
textColor: states.disabled
? "text-disabled"
: states.selected
? "text-selected"
: states.otherMonth
? "text-disabled"
: undefined,
backgroundColor: states.disabled
? undefined
: states.selected
? "background-selected"
: undefined,
padding: states.today ? [1, 3] : [2, 4]
};
}
},
"datechooser/week": {
style(states) {
return {
textAlign: "center",
textColor: "background-selected-dark",
padding: [2, 4],
decorator: states.header
? "datechooser-week-header"
: "datechooser-week"
};
}
},
/*
---------------------------------------------------------------------------
PROGRESSBAR
---------------------------------------------------------------------------
*/
progressbar: {
style(states) {
return {
decorator: "progressbar",
padding: 1,
backgroundColor: "white",
width: 200,
height: 20
};
}
},
"progressbar/progress": {
style(states) {
return {
backgroundColor: states.disabled
? "background-disabled-checked"
: "background-selected"
};
}
},
/*
---------------------------------------------------------------------------
TOOLBAR
---------------------------------------------------------------------------
*/
toolbar: {
style(states) {
return {
backgroundColor: "light-background",
padding: 0
};
}
},
"toolbar/part": {
style(states) {
return {
margin: [0, 15]
};
}
},
"toolbar/part/container": {},
"toolbar/part/handle": {},
"toolbar-separator": {
style(states) {
return {
decorator: "toolbar-separator",
margin: [7, 0],
width: 4
};
}
},
"toolbar-button": {
alias: "atom",
style(states) {
var decorator = "button-box";
if (states.disabled) {
decorator = "button-box";
} else if (states.hovered && !states.pressed && !states.checked) {
decorator = "button-box-hovered";
} else if (states.hovered && (states.pressed || states.checked)) {
decorator = "button-box-pressed-hovered";
} else if (states.pressed || states.checked) {
decorator = "button-box-pressed";
}
// set the right left and right decorator
if (states.left) {
decorator += "-left";
} else if (states.right) {
decorator += "-right";
} else if (states.middle) {
decorator += "-middle";
}
// set the margin
var margin = [7, 10];
if (states.left || states.middle || states.right) {
margin = [7, 0];
}
return {
cursor: states.disabled ? undefined : "pointer",
decorator: decorator,
margin: margin,
padding: [3, 5]
};
}
},
"toolbar-menubutton": {
alias: "toolbar-button",
include: "toolbar-button",
style(states) {
return {
showArrow: true
};
}
},
"toolbar-menubutton/arrow": {
alias: "image",
include: "image",
style(states) {
return {
source: qx.theme.simple.Image.URLS["arrow-down"],
cursor: states.disabled ? undefined : "pointer",
padding: [0, 5],
marginLeft: 2
};
}
},
"toolbar-splitbutton": {},
"toolbar-splitbutton/button": {
alias: "toolbar-button",
include: "toolbar-button",
style(states) {
var decorator = "button-box";
if (states.disabled) {
decorator = "button-box";
} else if (states.hovered && !states.pressed && !states.checked) {
decorator = "button-box-hovered";
} else if (states.hovered && (states.pressed || states.checked)) {
decorator = "button-box-pressed-hovered";
} else if (states.pressed || states.checked) {
decorator = "button-box-pressed";
}
// default margin, when the button is alone
var margin = [7, 0, 7, 10];
if (states.left || states.middle || states.right) {
margin = [7, 0, 7, 0];
}
// set the right left and right decorator
if (states.left) {
decorator += "-left";
} else if (states.right) {
decorator += "-middle";
} else if (states.middle) {
decorator += "-middle";
} else {
decorator += "-left";
}
return {
icon: qx.theme.simple.Image.URLS["arrow-down"],
decorator: decorator,
margin: margin
};
}
},
"toolbar-splitbutton/arrow": {
alias: "toolbar-button",
include: "toolbar-button",
style(states) {
var decorator = "button-box";
if (states.disabled) {
decorator = "button-box";
} else if (states.hovered && !states.pressed && !states.checked) {
decorator = "button-box-hovered";
} else if (states.hovered && (states.pressed || states.checked)) {
decorator = "button-box-pressed-hovered";
} else if (states.pressed || states.checked) {
decorator = "button-box-pressed";
}
// default margin, when the button is alone
var margin = [7, 10, 7, 0];
if (states.left || states.middle || states.right) {
margin = [7, 0, 7, 0];
}
// set the right left and right decorator