@qooxdoo/framework
Version:
The JS Framework for Coders
2,269 lines (1,928 loc) • 61.4 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",
{
appearances :
{
/*
---------------------------------------------------------------------------
CORE
---------------------------------------------------------------------------
*/
"widget" : {},
"label" :
{
style : function(states)
{
return {
textColor : states.disabled ? "text-disabled" : undefined
};
}
},
"image" :
{
style : function(states)
{
return {
opacity : !states.replacement && states.disabled ? 0.3 : undefined
};
}
},
"atom" : {},
"atom/label" : "label",
"atom/icon" : "image",
"root" :
{
style : function(states)
{
return {
backgroundColor : "background",
textColor : "text",
font : "default"
};
}
},
"popup" :
{
style : function(states)
{
return {
decorator : "popup",
backgroundColor : "background-pane"
};
}
},
"tooltip" :
{
include : "popup",
style : function(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 : function(states)
{
return {
textColor: "text-selected",
showTimeout: 100,
hideTimeout: 10000,
decorator: "tooltip-error",
font: "bold",
backgroundColor: undefined
};
}
},
"tooltip-error/atom" : "atom",
"iframe" :
{
style : function(states)
{
return {
backgroundColor : "white",
decorator : "main-dark"
};
}
},
"move-frame" :
{
style : function(states)
{
return {
decorator : "main-dark"
};
}
},
"resize-frame" : "move-frame",
"dragdrop-cursor" :
{
style : function(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 : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["arrow-" + (states.vertical ? "down" : "right")]
};
}
},
"slidebar/button-backward" :
{
alias : "button",
include : "button",
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["arrow-" + (states.vertical ? "up" : "left")]
};
}
},
/*
---------------------------------------------------------------------------
TABLE
---------------------------------------------------------------------------
*/
"table" : "widget",
"table/statusbar" :
{
style : function(states)
{
return {
decorator : "statusbar",
padding : [2, 5]
};
}
},
"table/column-button" :
{
alias : "button",
style : function(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 : function()
{
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 : function() {
return {
decorator : "table-header"
};
}
},
"table-scroller/pane" : {},
"table-scroller/focus-indicator" :
{
style : function(states)
{
return {
decorator : "main"
};
}
},
"table-scroller/resize-line" :
{
style : function(states)
{
return {
backgroundColor: "button-border",
width: 3
};
}
},
"table-header-cell" :
{
alias : "atom",
style : function(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 : function(states) {
return {
paddingRight : 5
};
}
},
"table-header-cell/sort-icon" :
{
style : function(states)
{
return {
alignY : "middle",
alignX : "right",
paddingRight : 5
};
}
},
"table-editor-textfield" :
{
include : "textfield",
style : function(states)
{
return {
decorator : undefined,
padding : [ 2, 2 ]
};
}
},
"table-editor-selectbox" :
{
include : "selectbox",
alias : "selectbox",
style : function(states)
{
return {
padding : [ 0, 2 ]
};
}
},
"table-editor-combobox" :
{
include : "combobox",
alias : "combobox",
style : function(states)
{
return {
decorator : undefined
};
}
},
"progressive-table-header" : {
style : function(states) {
return {
decorator: "progressive-table-header"
};
}
},
"progressive-table-header-cell" : {
style : function(states) {
return {
decorator: "progressive-table-header-cell",
padding : [5, 6, 5, 6]
};
}
},
/*
---------------------------------------------------------------------------
TREEVIRTUAL
---------------------------------------------------------------------------
*/
"treevirtual" : {
include : "textfield",
alias : "table",
style : function(states, superStyles) {
return {
padding : [superStyles.padding[0] + 2, superStyles.padding[1] + 1]
};
}
},
"treevirtual-folder" :
{
style : function(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 : function(states)
{
return {
icon : "icon/16/mimetypes/text-plain.png",
opacity : states.drag ? 0.5 : undefined
};
}
},
"treevirtual-line" :
{
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["treevirtual-line"]
};
}
},
"treevirtual-contract" :
{
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["tree-minus"]
};
}
},
"treevirtual-expand" :
{
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["tree-plus"]
};
}
},
"treevirtual-only-contract" :
{
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["treevirtual-minus-only"]
};
}
},
"treevirtual-only-expand" :
{
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["treevirtual-plus-only"]
};
}
},
"treevirtual-start-contract" :
{
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["treevirtual-minus-start"]
};
}
},
"treevirtual-start-expand" :
{
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["treevirtual-plus-start"]
};
}
},
"treevirtual-end-contract" :
{
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["treevirtual-minus-end"]
};
}
},
"treevirtual-end-expand" :
{
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["treevirtual-plus-end"]
};
}
},
"treevirtual-cross-contract" :
{
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["treevirtual-minus-cross"]
};
}
},
"treevirtual-cross-expand" :
{
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["treevirtual-plus-cross"]
};
}
},
"treevirtual-end" :
{
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["treevirtual-end"]
};
}
},
"treevirtual-cross" :
{
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["treevirtual-cross"]
};
}
},
/*
---------------------------------------------------------------------------
RESIZER
---------------------------------------------------------------------------
*/
"resizer" :
{
style : function(states)
{
return {
decorator : "main-dark"
};
}
},
/*
---------------------------------------------------------------------------
SPLITPANE
---------------------------------------------------------------------------
*/
"splitpane" : {},
"splitpane/splitter" :
{
style : function(states)
{
return {
backgroundColor : "light-background"
};
}
},
"splitpane/splitter/knob" :
{
style : function(states)
{
return {
source : qx.theme.simple.Image.URLS[
"knob-" + (states.horizontal ? "horizontal" : "vertical")
],
padding : 2
};
}
},
"splitpane/slider" :
{
style : function(states)
{
return {
backgroundColor : "border-light-shadow",
opacity : 0.3
};
}
},
/*
---------------------------------------------------------------------------
MENU
---------------------------------------------------------------------------
*/
"menu" :
{
style : function(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 : function(states)
{
return {
backgroundColor : states.hovered ? "background-selected" : undefined,
padding : 6,
center : true
};
}
},
"menu-slidebar/button-backward" :
{
include : "menu-slidebar-button",
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS[
"arrow-up" + (states.hovered ? "-invert" : "")
]
};
}
},
"menu-slidebar/button-forward" :
{
include : "menu-slidebar-button",
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS[
"arrow-down" + (states.hovered ? "-invert" : "")
]
};
}
},
"menu-separator" :
{
style : function(states)
{
return {
height : 0,
decorator : "menu-separator",
marginTop : 4,
marginBottom: 4,
marginLeft : 2,
marginRight : 2
};
}
},
"menu-button" :
{
alias : "atom",
style : function(states)
{
return {
backgroundColor : states.selected ? "background-selected" : undefined,
textColor : states.selected ? "text-selected" : undefined,
padding : [ 2, 6 ]
};
}
},
"menu-button/icon" :
{
include : "image",
style : function(states)
{
return {
alignY : "middle"
};
}
},
"menu-button/label" :
{
include : "label",
style : function(states)
{
return {
alignY : "middle",
padding : 1
};
}
},
"menu-button/shortcut" :
{
include : "label",
style : function(states)
{
return {
alignY : "middle",
marginLeft : 14,
padding : 1
};
}
},
"menu-button/arrow" :
{
include : "image",
style : function(states)
{
return {
source : qx.theme.simple.Image.URLS[
"arrow-right" + (states.selected ? "-invert" : "")
],
alignY : "middle"
};
}
},
"menu-checkbox" :
{
alias : "menu-button",
include : "menu-button",
style : function(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 : function(states)
{
return {
icon : !states.checked ? undefined :
qx.theme.simple.Image.URLS[
"menu-radiobutton" + (states.selected ? "-invert" : "")
]
};
}
},
/*
---------------------------------------------------------------------------
MENU BAR
---------------------------------------------------------------------------
*/
"menubar" :
{
style : function(states)
{
return {
backgroundColor : "light-background",
padding: [4, 2]
};
}
},
"menubar-button" :
{
style : function(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",
"group-item" :
{
include : "label",
alias : "label",
style : function(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 : function(states)
{
return {
itemHeight : 21
};
}
},
"virtual-tree-folder" : "tree-folder",
"virtual-tree-file" : "tree-file",
"cell" :
{
style : function(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 : function(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 : function(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 : function(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 : function(states)
{
return {
backgroundColor : "background"
};
}
},
"scrollarea" : "widget",
"scrollarea/pane" : "widget",
"scrollarea/scrollbar-x" : "scrollbar",
"scrollarea/scrollbar-y" : "scrollbar",
/*
---------------------------------------------------------------------------
TEXT FIELD
---------------------------------------------------------------------------
*/
"textfield" :
{
style : function(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 : function(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 : function(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 : function() {
return {
paddingTop: 3
};
}
},
/*
---------------------------------------------------------------------------
CHECK BOX
---------------------------------------------------------------------------
*/
"checkbox":
{
alias : "atom",
style : function(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 : function(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 : function(states)
{
return {
textColor : states.disabled ? "text-disabled" : undefined
};
}
},
"spinner/textfield" : "textfield",
"spinner/upbutton" :
{
alias : "combobox/button",
include : "combobox/button",
style : function(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 : function(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 : function()
{
return {
decorator : undefined
};
}
},
"selectbox/arrow" :
{
include : "image",
style : function(states)
{
return {
source : qx.theme.simple.Image.URLS["arrow-down"],
paddingRight : 4,
paddingLeft : 5
};
}
},
/*
---------------------------------------------------------------------------
COMBO BOX
---------------------------------------------------------------------------
*/
"combobox" :{},
"combobox/button" :
{
alias : "button-frame",
include : "button-frame",
style : function(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 : function(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 : function(states)
{
return {
decorator : undefined,
padding: 0
};
}
},
"datefield/list" :
{
alias : "datechooser",
include : "datechooser",
style : function(states)
{
return {
decorator : undefined
};
}
},
/*
---------------------------------------------------------------------------
LIST
---------------------------------------------------------------------------
*/
"list" :
{
alias : "scrollarea",
include : "textfield"
},
"listitem" :
{
alias : "atom",
style : function(states)
{
var padding = [3, 5, 3, 5];
if (states.lead) {
padding = [ 2, 4 , 2, 4];
}
if (states.dragover) {
padding[2] -= 2;
}
var backgroundColor;
if (states.selected) {
backgroundColor = "background-selected";
if (states.disabled) {
backgroundColor += "-disabled";
}
}
return {
gap : 4,
padding : padding,
backgroundColor : backgroundColor,
textColor : states.selected ? "text-selected" : undefined,
decorator : states.lead ? "lead-item" : states.dragover ? "dragover" : undefined,
opacity : states.drag ? 0.5 : undefined
};
}
},
/*
---------------------------------------------------------------------------
SLIDER
---------------------------------------------------------------------------
*/
"slider" :
{
style : function(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 : function(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 : function(states)
{
return {
textColor : states.disabled ? "text-disabled" : undefined
};
}
},
"button" :
{
alias : "button-frame",
include : "button-frame",
style : function(states)
{
return {
center : true
};
}
},
"hover-button" :
{
alias : "button",
include : "button",
style : function(states)
{
return {
decorator : states.hovered ? "button-hover" : undefined
};
}
},
"menubutton" : {
include : "button",
alias : "button",
style : function(states) {
return {
icon : qx.theme.simple.Image.URLS["arrow-down"],
iconPosition : "right"
};
}
},
/*
---------------------------------------------------------------------------
SPLIT BUTTON
---------------------------------------------------------------------------
*/
"splitbutton" : {},
"splitbutton/button" :
{
alias : "atom",
style : function(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 : function(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 : function(states)
{
return {
textColor : states.invalid ? "invalid" : undefined,
padding : 5,
margin : 4,
font: "bold"
};
}
},
"groupbox/frame" :
{
style : function(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 : function(states)
{
return {
textColor : states.invalid ? "invalid" : undefined,
padding : 5,
margin : 4,
font: "bold"
};
}
},
"radio-groupbox" : "groupbox",
"radio-groupbox/legend" :
{
alias : "radiobutton",
include : "radiobutton",
style : function(states)
{
return {
textColor : states.invalid ? "invalid" : undefined,
padding : 5,
margin : 4,
font: "bold"
};
}
},
/*
---------------------------------------------------------------------------
TREE
---------------------------------------------------------------------------
*/
"tree-folder/open" :
{
include : "image",
style : function(states)
{
return {
source : states.opened ?
qx.theme.simple.Image.URLS["tree-minus"] :
qx.theme.simple.Image.URLS["tree-plus"]
};
}
},
"tree-folder" :
{
style : function(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 : function(states)
{
return {
padding : [0, 4, 0, 0]
};
}
},
"tree-folder/label" :
{
style : function(states)
{
return {
padding : [ 1, 2 ],
textColor : states.selected && !states.disabled ? "text-selected" : undefined
};
}
},
"tree-file" :
{
include : "tree-folder",
alias : "tree-folder",
style : function(states)
{
return {
icon : "icon/16/mimetypes/text-plain.png",
opacity : states.drag ? 0.5 : undefined
};
}
},
"tree" :
{
include : "list",
alias : "list",
style : function(states)
{
return {
contentPadding : states.invalid && !states.disabled? [3, 0] : [4, 1],
padding : states.focused ? 0 : 1
};
}
},
/*
---------------------------------------------------------------------------
WINDOW
---------------------------------------------------------------------------
*/
"window" :
{
style : function(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 : function(states)
{
return {
backgroundColor : states.active ? "light-background" : "background-disabled",
padding : 8,
font: "bold",
decorator : "window-caption"
};
}
},
"window/icon" :
{
style : function(states)
{
return {
marginRight : 4
};
}
},
"window/title" :
{
style : function(states)
{
return {
cursor : "default",
font : "bold",
marginRight : 20,
alignY: "middle"
};
}
},
"window/minimize-button" :
{
alias : "button",
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["window-minimize"],
padding : [ 1, 2 ],
cursor : states.disabled ? undefined : "pointer"
};
}
},
"window/restore-button" :
{
alias : "button",
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["window-restore"],
padding : [ 1, 2 ],
cursor : states.disabled ? undefined : "pointer"
};
}
},
"window/maximize-button" :
{
alias : "button",
style : function(states)
{
return {
icon : qx.theme.simple.Image.URLS["window-maximize"],
padding : [ 1, 2 ],
cursor : states.disabled ? undefined : "pointer"
};
}
},
"window/close-button" :
{
alias : "button",
style : function(states)
{
return {
marginLeft : 2,
icon : qx.theme.simple.Image.URLS["window-close"],
padding : [ 1, 2 ],
cursor : states.disabled ? undefined : "pointer"
};
}
},
"window/statusbar" :
{
style : function(states)
{
return {
decorator : "statusbar",
padding : [ 2, 6 ]
};
}
},
"window/statusbar-text" : "label",
/*
---------------------------------------------------------------------------
DATE CHOOSER
---------------------------------------------------------------------------
*/
"datechooser" :
{
style : function(states)
{
return {
decorator : "main",
minWidth: 220
};
}
},
"datechooser/navigation-bar" :
{
style : function(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 : function(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 : function(states)
{
return {
font : "bold",
textAlign : "center"
};
}
},
"datechooser/date-pane" :
{
style : function(states)
{
return {
decorator : "datechooser-date-pane",
backgroundColor : "background"
};
}
},
"datechooser/weekday" :
{
style : function(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 : function(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 : function(states)
{
return {
textAlign : "center",
textColor : "background-selected-dark",
padding : [ 2, 4 ],
decorator : states.header ? "datechooser-week-header" : "datechooser-week"
};
}
},
/*
---------------------------------------------------------------------------
PROGRESSBAR
---------------------------------------------------------------------------
*/
"progressbar":
{
style: function(states) {
return {
decorator: "progressbar",
padding: 1,
backgroundColor: "white",
width : 200,
height : 20
};
}
},
"progressbar/progress":
{
style: function(states) {
return {
backgroundColor: states.disabled ?
"background-disabled-checked" :
"background-selected"
};
}
},
/*
---------------------------------------------------------------------------
TOOLBAR
---------------------------------------------------------------------------
*/
"toolbar" :
{
style : function(states)
{
return {
backgroundColor : "light-background",
padding : 0
};
}
},
"toolbar/part" : {
style : function(states)
{
return {
margin : [0 , 15]
};
}
},
"toolbar/part/container" : {},
"toolbar/part/handle" : {},
"toolbar-separator" :
{
style : function(states)
{
return {
decorator : "toolbar-separator",
margin: [7, 0],
width: 4
};
}
},
"toolbar-button" :
{
alias : "atom",
style : function(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 : function(states)
{
return {
showArrow : true
};
}
},
"toolbar-menubutton/arrow" :
{
alias : "image",
include : "image",
style : function(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 : function(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) {
d