123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637 |
- Ext.define('Ext.theme.graphite.dom.Element', {
- override: 'Ext.dom.Element'
- }, function() {
- Ext.onDocumentReady(function() {
- Ext.getBody().addCls([
- Ext.baseCSSPrefix + 'dark-mode',
- Ext.baseCSSPrefix + 'theme-graphite'
- ]);
- });
- });
- Ext.define('Ext.theme.neptune.Component', {
- override: 'Ext.Component',
- initComponent: function() {
- this.callParent();
- if (this.dock && this.border === undefined) {
- this.border = false;
- }
- },
- privates: {
- initStyles: function() {
- var me = this,
- hasOwnBorder = me.hasOwnProperty('border'),
- border = me.border;
- if (me.dock) {
- // prevent the superclass method from setting the border style. We want to
- // allow dock layout to decide which borders to suppress.
- me.border = null;
- }
- me.callParent(arguments);
- if (hasOwnBorder) {
- me.border = border;
- } else {
- delete me.border;
- }
- }
- }
- }, function() {
- Ext.namespace('Ext.theme.is').Neptune = true;
- Ext.theme.name = 'Neptune';
- });
- Ext.define('Ext.theme.triton.Component', {
- override: 'Ext.Component'
- }, function() {
- Ext.namespace('Ext.theme.is').Triton = true;
- Ext.theme.name = 'Triton';
- });
- Ext.define('Ext.theme.graphite.Component', {
- override: 'Ext.Component'
- }, function() {
- Ext.namespace('Ext.theme.is').Graphite = true;
- Ext.theme.name = 'Graphite';
- });
- Ext.define('Ext.theme.triton.list.TreeItem', {
- override: 'Ext.list.TreeItem',
- compatibility: Ext.isIE8,
- setFloated: function(floated, wasFloated) {
- this.callParent([
- floated,
- wasFloated
- ]);
- this.toolElement.syncRepaint();
- }
- });
- Ext.define('Ext.theme.graphite.button.Split', {
- override: 'Ext.button.Split',
- separateArrowStyling: true
- });
- Ext.define('Ext.theme.neptune.resizer.Splitter', {
- override: 'Ext.resizer.Splitter',
- size: 8
- });
- Ext.define('Ext.theme.triton.resizer.Splitter', {
- override: 'Ext.resizer.Splitter',
- size: 10
- });
- Ext.define('Ext.theme.neptune.toolbar.Toolbar', {
- override: 'Ext.toolbar.Toolbar',
- usePlainButtons: false,
- border: false
- });
- Ext.define('Ext.theme.neptune.layout.component.Dock', {
- override: 'Ext.layout.component.Dock',
- /**
- * This table contains the border removal classes indexed by the sum of the edges to
- * remove. Each edge is assigned a value:
- *
- * * `left` = 1
- * * `bottom` = 2
- * * `right` = 4
- * * `top` = 8
- *
- * @private
- */
- noBorderClassTable: [
- 0,
- // TRBL
- Ext.baseCSSPrefix + 'noborder-l',
- // 0001 = 1
- Ext.baseCSSPrefix + 'noborder-b',
- // 0010 = 2
- Ext.baseCSSPrefix + 'noborder-bl',
- // 0011 = 3
- Ext.baseCSSPrefix + 'noborder-r',
- // 0100 = 4
- Ext.baseCSSPrefix + 'noborder-rl',
- // 0101 = 5
- Ext.baseCSSPrefix + 'noborder-rb',
- // 0110 = 6
- Ext.baseCSSPrefix + 'noborder-rbl',
- // 0111 = 7
- Ext.baseCSSPrefix + 'noborder-t',
- // 1000 = 8
- Ext.baseCSSPrefix + 'noborder-tl',
- // 1001 = 9
- Ext.baseCSSPrefix + 'noborder-tb',
- // 1010 = 10
- Ext.baseCSSPrefix + 'noborder-tbl',
- // 1011 = 11
- Ext.baseCSSPrefix + 'noborder-tr',
- // 1100 = 12
- Ext.baseCSSPrefix + 'noborder-trl',
- // 1101 = 13
- Ext.baseCSSPrefix + 'noborder-trb',
- // 1110 = 14
- Ext.baseCSSPrefix + 'noborder-trbl'
- ],
- // 1111 = 15
- /**
- * The numeric values assigned to each edge indexed by the `dock` config value.
- * @private
- */
- edgeMasks: {
- top: 8,
- right: 4,
- bottom: 2,
- left: 1
- },
- handleItemBorders: function() {
- var me = this,
- edges = 0,
- maskT = 8,
- maskR = 4,
- maskB = 2,
- maskL = 1,
- owner = me.owner,
- bodyBorder = owner.bodyBorder,
- ownerBorder = owner.border,
- collapsed = me.collapsed,
- edgeMasks = me.edgeMasks,
- noBorderCls = me.noBorderClassTable,
- dockedItemsGen = owner.dockedItems.generation,
- b, borderCls, docked, edgesTouched, i, ln, item, dock, lastValue, mask, addCls, removeCls;
- if (me.initializedBorders === dockedItemsGen) {
- return;
- }
- addCls = [];
- removeCls = [];
- borderCls = me.getBorderCollapseTable();
- noBorderCls = me.getBorderClassTable ? me.getBorderClassTable() : noBorderCls;
- me.initializedBorders = dockedItemsGen;
- // Borders have to be calculated using expanded docked item collection.
- me.collapsed = false;
- docked = me.getDockedItems('visual');
- me.collapsed = collapsed;
- for (i = 0 , ln = docked.length; i < ln; i++) {
- item = docked[i];
- if (item.ignoreBorderManagement) {
- // headers in framed panels ignore border management, so we do not want
- // to set "satisfied" on the edge in question
-
- continue;
- }
- dock = item.dock;
- mask = edgesTouched = 0;
- addCls.length = 0;
- removeCls.length = 0;
- if (dock !== 'bottom') {
- if (edges & maskT) {
- // if (not touching the top edge)
- b = item.border;
- } else {
- b = ownerBorder;
- if (b !== false) {
- edgesTouched += maskT;
- }
- }
- if (b === false) {
- mask += maskT;
- }
- }
- if (dock !== 'left') {
- if (edges & maskR) {
- // if (not touching the right edge)
- b = item.border;
- } else {
- b = ownerBorder;
- if (b !== false) {
- edgesTouched += maskR;
- }
- }
- if (b === false) {
- mask += maskR;
- }
- }
- if (dock !== 'top') {
- if (edges & maskB) {
- // if (not touching the bottom edge)
- b = item.border;
- } else {
- b = ownerBorder;
- if (b !== false) {
- edgesTouched += maskB;
- }
- }
- if (b === false) {
- mask += maskB;
- }
- }
- if (dock !== 'right') {
- if (edges & maskL) {
- // if (not touching the left edge)
- b = item.border;
- } else {
- b = ownerBorder;
- if (b !== false) {
- edgesTouched += maskL;
- }
- }
- if (b === false) {
- mask += maskL;
- }
- }
- if ((lastValue = item.lastBorderMask) !== mask) {
- item.lastBorderMask = mask;
- if (lastValue) {
- removeCls[0] = noBorderCls[lastValue];
- }
- if (mask) {
- addCls[0] = noBorderCls[mask];
- }
- }
- if ((lastValue = item.lastBorderCollapse) !== edgesTouched) {
- item.lastBorderCollapse = edgesTouched;
- if (lastValue) {
- removeCls[removeCls.length] = borderCls[lastValue];
- }
- if (edgesTouched) {
- addCls[addCls.length] = borderCls[edgesTouched];
- }
- }
- if (removeCls.length) {
- item.removeCls(removeCls);
- }
- if (addCls.length) {
- item.addCls(addCls);
- }
- // mask can use += but edges must use |= because there can be multiple items
- // on an edge but the mask is reset per item
- edges |= edgeMasks[dock];
- }
- // = T, R, B or L (8, 4, 2 or 1)
- mask = edgesTouched = 0;
- addCls.length = 0;
- removeCls.length = 0;
- if (edges & maskT) {
- // if (not touching the top edge)
- b = bodyBorder;
- } else {
- b = ownerBorder;
- if (b !== false) {
- edgesTouched += maskT;
- }
- }
- if (b === false) {
- mask += maskT;
- }
- if (edges & maskR) {
- // if (not touching the right edge)
- b = bodyBorder;
- } else {
- b = ownerBorder;
- if (b !== false) {
- edgesTouched += maskR;
- }
- }
- if (b === false) {
- mask += maskR;
- }
- if (edges & maskB) {
- // if (not touching the bottom edge)
- b = bodyBorder;
- } else {
- b = ownerBorder;
- if (b !== false) {
- edgesTouched += maskB;
- }
- }
- if (b === false) {
- mask += maskB;
- }
- if (edges & maskL) {
- // if (not touching the left edge)
- b = bodyBorder;
- } else {
- b = ownerBorder;
- if (b !== false) {
- edgesTouched += maskL;
- }
- }
- if (b === false) {
- mask += maskL;
- }
- if ((lastValue = me.lastBodyBorderMask) !== mask) {
- me.lastBodyBorderMask = mask;
- if (lastValue) {
- removeCls[0] = noBorderCls[lastValue];
- }
- if (mask) {
- addCls[0] = noBorderCls[mask];
- }
- }
- if ((lastValue = me.lastBodyBorderCollapse) !== edgesTouched) {
- me.lastBodyBorderCollapse = edgesTouched;
- if (lastValue) {
- removeCls[removeCls.length] = borderCls[lastValue];
- }
- if (edgesTouched) {
- addCls[addCls.length] = borderCls[edgesTouched];
- }
- }
- if (removeCls.length) {
- owner.removeBodyCls(removeCls);
- }
- if (addCls.length) {
- owner.addBodyCls(addCls);
- }
- },
- onRemove: function(item) {
- var me = this,
- lastBorderMask = item.lastBorderMask,
- lastBorderCollapse = item.lastBorderCollapse;
- if (!item.destroyed && !item.ignoreBorderManagement) {
- if (lastBorderMask) {
- item.lastBorderMask = 0;
- item.removeCls(me.noBorderClassTable[lastBorderMask]);
- }
- if (lastBorderCollapse) {
- item.lastBorderCollapse = 0;
- item.removeCls(me.getBorderCollapseTable()[lastBorderCollapse]);
- }
- }
- me.callParent([
- item
- ]);
- }
- });
- Ext.define('Ext.theme.neptune.panel.Panel', {
- override: 'Ext.panel.Panel',
- border: false,
- bodyBorder: false,
- initBorderProps: Ext.emptyFn,
- initBodyBorder: function() {
- // The superclass method converts a truthy bodyBorder into a number and sets
- // an inline border-width style on the body element. This prevents that from
- // happening if borderBody === true so that the body will get its border-width
- // the stylesheet.
- if (this.bodyBorder !== true) {
- this.callParent();
- }
- }
- });
- Ext.define('Ext.theme.neptune.container.ButtonGroup', {
- override: 'Ext.container.ButtonGroup',
- usePlainButtons: false
- });
- Ext.define('Ext.theme.graphite.form.Labelable', {
- override: 'Ext.form.Labelable',
- labelWidth: 140
- });
- Ext.define('Ext.theme.triton.form.field.Checkbox', {
- override: 'Ext.form.field.Checkbox',
- compatibility: Ext.isIE8,
- initComponent: function() {
- this.callParent();
- Ext.on({
- show: 'onGlobalShow',
- scope: this
- });
- },
- onFocus: function(e) {
- var focusClsEl;
- this.callParent([
- e
- ]);
- focusClsEl = this.getFocusClsEl();
- if (focusClsEl) {
- focusClsEl.syncRepaint();
- }
- },
- onBlur: function(e) {
- var focusClsEl;
- this.callParent([
- e
- ]);
- focusClsEl = this.getFocusClsEl();
- if (focusClsEl) {
- focusClsEl.syncRepaint();
- }
- },
- onGlobalShow: function(cmp) {
- if (cmp.isAncestor(this)) {
- this.getFocusClsEl().syncRepaint();
- }
- }
- });
- Ext.define('Ext.theme.neptune.toolbar.Paging', {
- override: 'Ext.toolbar.Paging',
- defaultButtonUI: 'plain-toolbar',
- inputItemWidth: 40
- });
- Ext.define('Ext.theme.triton.toolbar.Paging', {
- override: 'Ext.toolbar.Paging',
- inputItemWidth: 50
- });
- Ext.define('Ext.theme.neptune.picker.Month', {
- override: 'Ext.picker.Month',
- // Monthpicker contains logic that reduces the margins of the month items if it detects
- // that the text has wrapped. This can happen in the classic theme in certain
- // locales such as zh_TW. In order to work around this, Month picker measures
- // the month items to see if the height is greater than "measureMaxHeight".
- // In neptune the height of the items is larger, so we must increase this value.
- // While the actual height of the month items in neptune is 24px, we will only
- // determine that the text has wrapped if the height of the item exceeds 36px.
- // this allows theme developers some leeway to increase the month item size in
- // a neptune-derived theme.
- measureMaxHeight: 36
- });
- Ext.define('Ext.theme.triton.picker.Month', {
- override: 'Ext.picker.Month',
- footerButtonUI: 'default-toolbar',
- calculateMonthMargin: Ext.emptyFn
- });
- Ext.define('Ext.theme.triton.picker.Date', {
- override: 'Ext.picker.Date',
- footerButtonUI: 'default-toolbar'
- });
- Ext.define('Ext.theme.graphite.form.field.File', {
- override: 'Ext.form.field.File',
- _pressedCls: 'x-form-field-file-buttononly',
- beforeRender: function() {
- this.callParent();
- if (this.buttonOnly) {
- this.addCls(this._pressedCls);
- }
- }
- });
- Ext.define('Ext.theme.neptune.form.field.HtmlEditor', {
- override: 'Ext.form.field.HtmlEditor',
- defaultButtonUI: 'plain-toolbar'
- });
- Ext.define('Ext.theme.neptune.panel.Table', {
- override: 'Ext.panel.Table',
- lockableBodyBorder: true,
- initComponent: function() {
- var me = this;
- me.callParent();
- if (!me.hasOwnProperty('bodyBorder') && !me.hideHeaders && (me.lockableBodyBorder || !me.lockable)) {
- me.bodyBorder = true;
- }
- }
- });
- Ext.define('Ext.theme.neptune.grid.RowEditor', {
- override: 'Ext.grid.RowEditor',
- buttonUI: 'default-toolbar'
- });
- Ext.define('Ext.theme.graphite.grid.RowEditor', {
- override: 'Ext.grid.RowEditor',
- height: 56
- });
- Ext.define('Ext.theme.triton.grid.column.Column', {
- override: 'Ext.grid.column.Column',
- compatibility: Ext.isIE8,
- onTitleMouseOver: function() {
- var triggerEl = this.triggerEl;
- this.callParent(arguments);
- if (triggerEl) {
- triggerEl.syncRepaint();
- }
- }
- });
- Ext.define('Ext.theme.graphite.grid.column.Action', {
- override: 'Ext.grid.column.Action',
- align: 'center'
- });
- Ext.define('Ext.theme.triton.grid.column.Check', {
- override: 'Ext.grid.column.Check',
- compatibility: Ext.isIE8,
- setRecordCheck: function(record, index, checked, cell) {
- this.callParent(arguments);
- Ext.fly(cell).syncRepaint();
- }
- });
- Ext.define('Ext.theme.neptune.grid.column.RowNumberer', {
- override: 'Ext.grid.column.RowNumberer',
- width: 25
- });
- Ext.define('Ext.theme.triton.grid.column.RowNumberer', {
- override: 'Ext.grid.column.RowNumberer',
- width: 32
- });
- Ext.define('Ext.theme.triton.menu.Item', {
- override: 'Ext.menu.Item',
- compatibility: Ext.isIE8,
- onFocus: function(e) {
- this.callParent([
- e
- ]);
- this.repaintIcons();
- },
- onFocusLeave: function(e) {
- this.callParent([
- e
- ]);
- this.repaintIcons();
- },
- privates: {
- repaintIcons: function() {
- var iconEl = this.iconEl,
- arrowEl = this.arrowEl,
- checkEl = this.checkEl;
- if (iconEl) {
- iconEl.syncRepaint();
- }
- if (arrowEl) {
- arrowEl.syncRepaint();
- }
- if (checkEl) {
- checkEl.syncRepaint();
- }
- }
- }
- });
- Ext.define('Ext.theme.neptune.menu.Separator', {
- override: 'Ext.menu.Separator',
- border: true
- });
- Ext.define('Ext.theme.neptune.menu.Menu', {
- override: 'Ext.menu.Menu',
- showSeparator: false
- });
- Ext.define('Ext.theme.triton.menu.Menu', {
- override: 'Ext.menu.Menu',
- compatibility: Ext.isIE8,
- afterShow: function() {
- var me = this,
- items, item, i, len;
- me.callParent(arguments);
- items = me.items.getRange();
- for (i = 0 , len = items.length; i < len; i++) {
- item = items[i];
- // Just in case if it happens to be a non-menu Item
- if (item && item.repaintIcons) {
- item.repaintIcons();
- }
- }
- }
- });
- Ext.define('Ext.theme.graphite.menu.Menu', {
- override: 'Ext.menu.Menu',
- minWidth: 230
- });
- Ext.define('Ext.theme.triton.grid.plugin.RowExpander', {
- override: 'Ext.grid.plugin.RowExpander',
- headerWidth: 32
- });
- Ext.define('Ext.theme.triton.grid.selection.SpreadsheetModel', {
- override: 'Ext.grid.selection.SpreadsheetModel',
- checkboxHeaderWidth: 32
- });
- Ext.define('Ext.theme.triton.selection.CheckboxModel', {
- override: 'Ext.selection.CheckboxModel',
- headerWidth: 32,
- onHeaderClick: function(headerCt, header, e) {
- this.callParent([
- headerCt,
- header,
- e
- ]);
- // Every checkbox needs repainting.
- if (Ext.isIE8) {
- header.getView().ownerGrid.el.syncRepaint();
- }
- }
- });
- Ext.define('Ext.theme.graphite.pivot.plugin.configurator.Panel', {
- override: 'Ext.pivot.plugin.configurator.Panel',
- defaultMinWidth: 300,
- headerWidth: 140
- });
|