theme-graphite-debug.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637
  1. Ext.define('Ext.theme.graphite.dom.Element', {
  2. override: 'Ext.dom.Element'
  3. }, function() {
  4. Ext.onDocumentReady(function() {
  5. Ext.getBody().addCls([
  6. Ext.baseCSSPrefix + 'dark-mode',
  7. Ext.baseCSSPrefix + 'theme-graphite'
  8. ]);
  9. });
  10. });
  11. Ext.define('Ext.theme.neptune.Component', {
  12. override: 'Ext.Component',
  13. initComponent: function() {
  14. this.callParent();
  15. if (this.dock && this.border === undefined) {
  16. this.border = false;
  17. }
  18. },
  19. privates: {
  20. initStyles: function() {
  21. var me = this,
  22. hasOwnBorder = me.hasOwnProperty('border'),
  23. border = me.border;
  24. if (me.dock) {
  25. // prevent the superclass method from setting the border style. We want to
  26. // allow dock layout to decide which borders to suppress.
  27. me.border = null;
  28. }
  29. me.callParent(arguments);
  30. if (hasOwnBorder) {
  31. me.border = border;
  32. } else {
  33. delete me.border;
  34. }
  35. }
  36. }
  37. }, function() {
  38. Ext.namespace('Ext.theme.is').Neptune = true;
  39. Ext.theme.name = 'Neptune';
  40. });
  41. Ext.define('Ext.theme.triton.Component', {
  42. override: 'Ext.Component'
  43. }, function() {
  44. Ext.namespace('Ext.theme.is').Triton = true;
  45. Ext.theme.name = 'Triton';
  46. });
  47. Ext.define('Ext.theme.graphite.Component', {
  48. override: 'Ext.Component'
  49. }, function() {
  50. Ext.namespace('Ext.theme.is').Graphite = true;
  51. Ext.theme.name = 'Graphite';
  52. });
  53. Ext.define('Ext.theme.triton.list.TreeItem', {
  54. override: 'Ext.list.TreeItem',
  55. compatibility: Ext.isIE8,
  56. setFloated: function(floated, wasFloated) {
  57. this.callParent([
  58. floated,
  59. wasFloated
  60. ]);
  61. this.toolElement.syncRepaint();
  62. }
  63. });
  64. Ext.define('Ext.theme.graphite.button.Split', {
  65. override: 'Ext.button.Split',
  66. separateArrowStyling: true
  67. });
  68. Ext.define('Ext.theme.neptune.resizer.Splitter', {
  69. override: 'Ext.resizer.Splitter',
  70. size: 8
  71. });
  72. Ext.define('Ext.theme.triton.resizer.Splitter', {
  73. override: 'Ext.resizer.Splitter',
  74. size: 10
  75. });
  76. Ext.define('Ext.theme.neptune.toolbar.Toolbar', {
  77. override: 'Ext.toolbar.Toolbar',
  78. usePlainButtons: false,
  79. border: false
  80. });
  81. Ext.define('Ext.theme.neptune.layout.component.Dock', {
  82. override: 'Ext.layout.component.Dock',
  83. /**
  84. * This table contains the border removal classes indexed by the sum of the edges to
  85. * remove. Each edge is assigned a value:
  86. *
  87. * * `left` = 1
  88. * * `bottom` = 2
  89. * * `right` = 4
  90. * * `top` = 8
  91. *
  92. * @private
  93. */
  94. noBorderClassTable: [
  95. 0,
  96. // TRBL
  97. Ext.baseCSSPrefix + 'noborder-l',
  98. // 0001 = 1
  99. Ext.baseCSSPrefix + 'noborder-b',
  100. // 0010 = 2
  101. Ext.baseCSSPrefix + 'noborder-bl',
  102. // 0011 = 3
  103. Ext.baseCSSPrefix + 'noborder-r',
  104. // 0100 = 4
  105. Ext.baseCSSPrefix + 'noborder-rl',
  106. // 0101 = 5
  107. Ext.baseCSSPrefix + 'noborder-rb',
  108. // 0110 = 6
  109. Ext.baseCSSPrefix + 'noborder-rbl',
  110. // 0111 = 7
  111. Ext.baseCSSPrefix + 'noborder-t',
  112. // 1000 = 8
  113. Ext.baseCSSPrefix + 'noborder-tl',
  114. // 1001 = 9
  115. Ext.baseCSSPrefix + 'noborder-tb',
  116. // 1010 = 10
  117. Ext.baseCSSPrefix + 'noborder-tbl',
  118. // 1011 = 11
  119. Ext.baseCSSPrefix + 'noborder-tr',
  120. // 1100 = 12
  121. Ext.baseCSSPrefix + 'noborder-trl',
  122. // 1101 = 13
  123. Ext.baseCSSPrefix + 'noborder-trb',
  124. // 1110 = 14
  125. Ext.baseCSSPrefix + 'noborder-trbl'
  126. ],
  127. // 1111 = 15
  128. /**
  129. * The numeric values assigned to each edge indexed by the `dock` config value.
  130. * @private
  131. */
  132. edgeMasks: {
  133. top: 8,
  134. right: 4,
  135. bottom: 2,
  136. left: 1
  137. },
  138. handleItemBorders: function() {
  139. var me = this,
  140. edges = 0,
  141. maskT = 8,
  142. maskR = 4,
  143. maskB = 2,
  144. maskL = 1,
  145. owner = me.owner,
  146. bodyBorder = owner.bodyBorder,
  147. ownerBorder = owner.border,
  148. collapsed = me.collapsed,
  149. edgeMasks = me.edgeMasks,
  150. noBorderCls = me.noBorderClassTable,
  151. dockedItemsGen = owner.dockedItems.generation,
  152. b, borderCls, docked, edgesTouched, i, ln, item, dock, lastValue, mask, addCls, removeCls;
  153. if (me.initializedBorders === dockedItemsGen) {
  154. return;
  155. }
  156. addCls = [];
  157. removeCls = [];
  158. borderCls = me.getBorderCollapseTable();
  159. noBorderCls = me.getBorderClassTable ? me.getBorderClassTable() : noBorderCls;
  160. me.initializedBorders = dockedItemsGen;
  161. // Borders have to be calculated using expanded docked item collection.
  162. me.collapsed = false;
  163. docked = me.getDockedItems('visual');
  164. me.collapsed = collapsed;
  165. for (i = 0 , ln = docked.length; i < ln; i++) {
  166. item = docked[i];
  167. if (item.ignoreBorderManagement) {
  168. // headers in framed panels ignore border management, so we do not want
  169. // to set "satisfied" on the edge in question
  170. continue;
  171. }
  172. dock = item.dock;
  173. mask = edgesTouched = 0;
  174. addCls.length = 0;
  175. removeCls.length = 0;
  176. if (dock !== 'bottom') {
  177. if (edges & maskT) {
  178. // if (not touching the top edge)
  179. b = item.border;
  180. } else {
  181. b = ownerBorder;
  182. if (b !== false) {
  183. edgesTouched += maskT;
  184. }
  185. }
  186. if (b === false) {
  187. mask += maskT;
  188. }
  189. }
  190. if (dock !== 'left') {
  191. if (edges & maskR) {
  192. // if (not touching the right edge)
  193. b = item.border;
  194. } else {
  195. b = ownerBorder;
  196. if (b !== false) {
  197. edgesTouched += maskR;
  198. }
  199. }
  200. if (b === false) {
  201. mask += maskR;
  202. }
  203. }
  204. if (dock !== 'top') {
  205. if (edges & maskB) {
  206. // if (not touching the bottom edge)
  207. b = item.border;
  208. } else {
  209. b = ownerBorder;
  210. if (b !== false) {
  211. edgesTouched += maskB;
  212. }
  213. }
  214. if (b === false) {
  215. mask += maskB;
  216. }
  217. }
  218. if (dock !== 'right') {
  219. if (edges & maskL) {
  220. // if (not touching the left edge)
  221. b = item.border;
  222. } else {
  223. b = ownerBorder;
  224. if (b !== false) {
  225. edgesTouched += maskL;
  226. }
  227. }
  228. if (b === false) {
  229. mask += maskL;
  230. }
  231. }
  232. if ((lastValue = item.lastBorderMask) !== mask) {
  233. item.lastBorderMask = mask;
  234. if (lastValue) {
  235. removeCls[0] = noBorderCls[lastValue];
  236. }
  237. if (mask) {
  238. addCls[0] = noBorderCls[mask];
  239. }
  240. }
  241. if ((lastValue = item.lastBorderCollapse) !== edgesTouched) {
  242. item.lastBorderCollapse = edgesTouched;
  243. if (lastValue) {
  244. removeCls[removeCls.length] = borderCls[lastValue];
  245. }
  246. if (edgesTouched) {
  247. addCls[addCls.length] = borderCls[edgesTouched];
  248. }
  249. }
  250. if (removeCls.length) {
  251. item.removeCls(removeCls);
  252. }
  253. if (addCls.length) {
  254. item.addCls(addCls);
  255. }
  256. // mask can use += but edges must use |= because there can be multiple items
  257. // on an edge but the mask is reset per item
  258. edges |= edgeMasks[dock];
  259. }
  260. // = T, R, B or L (8, 4, 2 or 1)
  261. mask = edgesTouched = 0;
  262. addCls.length = 0;
  263. removeCls.length = 0;
  264. if (edges & maskT) {
  265. // if (not touching the top edge)
  266. b = bodyBorder;
  267. } else {
  268. b = ownerBorder;
  269. if (b !== false) {
  270. edgesTouched += maskT;
  271. }
  272. }
  273. if (b === false) {
  274. mask += maskT;
  275. }
  276. if (edges & maskR) {
  277. // if (not touching the right edge)
  278. b = bodyBorder;
  279. } else {
  280. b = ownerBorder;
  281. if (b !== false) {
  282. edgesTouched += maskR;
  283. }
  284. }
  285. if (b === false) {
  286. mask += maskR;
  287. }
  288. if (edges & maskB) {
  289. // if (not touching the bottom edge)
  290. b = bodyBorder;
  291. } else {
  292. b = ownerBorder;
  293. if (b !== false) {
  294. edgesTouched += maskB;
  295. }
  296. }
  297. if (b === false) {
  298. mask += maskB;
  299. }
  300. if (edges & maskL) {
  301. // if (not touching the left edge)
  302. b = bodyBorder;
  303. } else {
  304. b = ownerBorder;
  305. if (b !== false) {
  306. edgesTouched += maskL;
  307. }
  308. }
  309. if (b === false) {
  310. mask += maskL;
  311. }
  312. if ((lastValue = me.lastBodyBorderMask) !== mask) {
  313. me.lastBodyBorderMask = mask;
  314. if (lastValue) {
  315. removeCls[0] = noBorderCls[lastValue];
  316. }
  317. if (mask) {
  318. addCls[0] = noBorderCls[mask];
  319. }
  320. }
  321. if ((lastValue = me.lastBodyBorderCollapse) !== edgesTouched) {
  322. me.lastBodyBorderCollapse = edgesTouched;
  323. if (lastValue) {
  324. removeCls[removeCls.length] = borderCls[lastValue];
  325. }
  326. if (edgesTouched) {
  327. addCls[addCls.length] = borderCls[edgesTouched];
  328. }
  329. }
  330. if (removeCls.length) {
  331. owner.removeBodyCls(removeCls);
  332. }
  333. if (addCls.length) {
  334. owner.addBodyCls(addCls);
  335. }
  336. },
  337. onRemove: function(item) {
  338. var me = this,
  339. lastBorderMask = item.lastBorderMask,
  340. lastBorderCollapse = item.lastBorderCollapse;
  341. if (!item.destroyed && !item.ignoreBorderManagement) {
  342. if (lastBorderMask) {
  343. item.lastBorderMask = 0;
  344. item.removeCls(me.noBorderClassTable[lastBorderMask]);
  345. }
  346. if (lastBorderCollapse) {
  347. item.lastBorderCollapse = 0;
  348. item.removeCls(me.getBorderCollapseTable()[lastBorderCollapse]);
  349. }
  350. }
  351. me.callParent([
  352. item
  353. ]);
  354. }
  355. });
  356. Ext.define('Ext.theme.neptune.panel.Panel', {
  357. override: 'Ext.panel.Panel',
  358. border: false,
  359. bodyBorder: false,
  360. initBorderProps: Ext.emptyFn,
  361. initBodyBorder: function() {
  362. // The superclass method converts a truthy bodyBorder into a number and sets
  363. // an inline border-width style on the body element. This prevents that from
  364. // happening if borderBody === true so that the body will get its border-width
  365. // the stylesheet.
  366. if (this.bodyBorder !== true) {
  367. this.callParent();
  368. }
  369. }
  370. });
  371. Ext.define('Ext.theme.neptune.container.ButtonGroup', {
  372. override: 'Ext.container.ButtonGroup',
  373. usePlainButtons: false
  374. });
  375. Ext.define('Ext.theme.graphite.form.Labelable', {
  376. override: 'Ext.form.Labelable',
  377. labelWidth: 140
  378. });
  379. Ext.define('Ext.theme.triton.form.field.Checkbox', {
  380. override: 'Ext.form.field.Checkbox',
  381. compatibility: Ext.isIE8,
  382. initComponent: function() {
  383. this.callParent();
  384. Ext.on({
  385. show: 'onGlobalShow',
  386. scope: this
  387. });
  388. },
  389. onFocus: function(e) {
  390. var focusClsEl;
  391. this.callParent([
  392. e
  393. ]);
  394. focusClsEl = this.getFocusClsEl();
  395. if (focusClsEl) {
  396. focusClsEl.syncRepaint();
  397. }
  398. },
  399. onBlur: function(e) {
  400. var focusClsEl;
  401. this.callParent([
  402. e
  403. ]);
  404. focusClsEl = this.getFocusClsEl();
  405. if (focusClsEl) {
  406. focusClsEl.syncRepaint();
  407. }
  408. },
  409. onGlobalShow: function(cmp) {
  410. if (cmp.isAncestor(this)) {
  411. this.getFocusClsEl().syncRepaint();
  412. }
  413. }
  414. });
  415. Ext.define('Ext.theme.neptune.toolbar.Paging', {
  416. override: 'Ext.toolbar.Paging',
  417. defaultButtonUI: 'plain-toolbar',
  418. inputItemWidth: 40
  419. });
  420. Ext.define('Ext.theme.triton.toolbar.Paging', {
  421. override: 'Ext.toolbar.Paging',
  422. inputItemWidth: 50
  423. });
  424. Ext.define('Ext.theme.neptune.picker.Month', {
  425. override: 'Ext.picker.Month',
  426. // Monthpicker contains logic that reduces the margins of the month items if it detects
  427. // that the text has wrapped. This can happen in the classic theme in certain
  428. // locales such as zh_TW. In order to work around this, Month picker measures
  429. // the month items to see if the height is greater than "measureMaxHeight".
  430. // In neptune the height of the items is larger, so we must increase this value.
  431. // While the actual height of the month items in neptune is 24px, we will only
  432. // determine that the text has wrapped if the height of the item exceeds 36px.
  433. // this allows theme developers some leeway to increase the month item size in
  434. // a neptune-derived theme.
  435. measureMaxHeight: 36
  436. });
  437. Ext.define('Ext.theme.triton.picker.Month', {
  438. override: 'Ext.picker.Month',
  439. footerButtonUI: 'default-toolbar',
  440. calculateMonthMargin: Ext.emptyFn
  441. });
  442. Ext.define('Ext.theme.triton.picker.Date', {
  443. override: 'Ext.picker.Date',
  444. footerButtonUI: 'default-toolbar'
  445. });
  446. Ext.define('Ext.theme.graphite.form.field.File', {
  447. override: 'Ext.form.field.File',
  448. _pressedCls: 'x-form-field-file-buttononly',
  449. beforeRender: function() {
  450. this.callParent();
  451. if (this.buttonOnly) {
  452. this.addCls(this._pressedCls);
  453. }
  454. }
  455. });
  456. Ext.define('Ext.theme.neptune.form.field.HtmlEditor', {
  457. override: 'Ext.form.field.HtmlEditor',
  458. defaultButtonUI: 'plain-toolbar'
  459. });
  460. Ext.define('Ext.theme.neptune.panel.Table', {
  461. override: 'Ext.panel.Table',
  462. lockableBodyBorder: true,
  463. initComponent: function() {
  464. var me = this;
  465. me.callParent();
  466. if (!me.hasOwnProperty('bodyBorder') && !me.hideHeaders && (me.lockableBodyBorder || !me.lockable)) {
  467. me.bodyBorder = true;
  468. }
  469. }
  470. });
  471. Ext.define('Ext.theme.neptune.grid.RowEditor', {
  472. override: 'Ext.grid.RowEditor',
  473. buttonUI: 'default-toolbar'
  474. });
  475. Ext.define('Ext.theme.graphite.grid.RowEditor', {
  476. override: 'Ext.grid.RowEditor',
  477. height: 56
  478. });
  479. Ext.define('Ext.theme.triton.grid.column.Column', {
  480. override: 'Ext.grid.column.Column',
  481. compatibility: Ext.isIE8,
  482. onTitleMouseOver: function() {
  483. var triggerEl = this.triggerEl;
  484. this.callParent(arguments);
  485. if (triggerEl) {
  486. triggerEl.syncRepaint();
  487. }
  488. }
  489. });
  490. Ext.define('Ext.theme.graphite.grid.column.Action', {
  491. override: 'Ext.grid.column.Action',
  492. align: 'center'
  493. });
  494. Ext.define('Ext.theme.triton.grid.column.Check', {
  495. override: 'Ext.grid.column.Check',
  496. compatibility: Ext.isIE8,
  497. setRecordCheck: function(record, index, checked, cell) {
  498. this.callParent(arguments);
  499. Ext.fly(cell).syncRepaint();
  500. }
  501. });
  502. Ext.define('Ext.theme.neptune.grid.column.RowNumberer', {
  503. override: 'Ext.grid.column.RowNumberer',
  504. width: 25
  505. });
  506. Ext.define('Ext.theme.triton.grid.column.RowNumberer', {
  507. override: 'Ext.grid.column.RowNumberer',
  508. width: 32
  509. });
  510. Ext.define('Ext.theme.triton.menu.Item', {
  511. override: 'Ext.menu.Item',
  512. compatibility: Ext.isIE8,
  513. onFocus: function(e) {
  514. this.callParent([
  515. e
  516. ]);
  517. this.repaintIcons();
  518. },
  519. onFocusLeave: function(e) {
  520. this.callParent([
  521. e
  522. ]);
  523. this.repaintIcons();
  524. },
  525. privates: {
  526. repaintIcons: function() {
  527. var iconEl = this.iconEl,
  528. arrowEl = this.arrowEl,
  529. checkEl = this.checkEl;
  530. if (iconEl) {
  531. iconEl.syncRepaint();
  532. }
  533. if (arrowEl) {
  534. arrowEl.syncRepaint();
  535. }
  536. if (checkEl) {
  537. checkEl.syncRepaint();
  538. }
  539. }
  540. }
  541. });
  542. Ext.define('Ext.theme.neptune.menu.Separator', {
  543. override: 'Ext.menu.Separator',
  544. border: true
  545. });
  546. Ext.define('Ext.theme.neptune.menu.Menu', {
  547. override: 'Ext.menu.Menu',
  548. showSeparator: false
  549. });
  550. Ext.define('Ext.theme.triton.menu.Menu', {
  551. override: 'Ext.menu.Menu',
  552. compatibility: Ext.isIE8,
  553. afterShow: function() {
  554. var me = this,
  555. items, item, i, len;
  556. me.callParent(arguments);
  557. items = me.items.getRange();
  558. for (i = 0 , len = items.length; i < len; i++) {
  559. item = items[i];
  560. // Just in case if it happens to be a non-menu Item
  561. if (item && item.repaintIcons) {
  562. item.repaintIcons();
  563. }
  564. }
  565. }
  566. });
  567. Ext.define('Ext.theme.graphite.menu.Menu', {
  568. override: 'Ext.menu.Menu',
  569. minWidth: 230
  570. });
  571. Ext.define('Ext.theme.triton.grid.plugin.RowExpander', {
  572. override: 'Ext.grid.plugin.RowExpander',
  573. headerWidth: 32
  574. });
  575. Ext.define('Ext.theme.triton.grid.selection.SpreadsheetModel', {
  576. override: 'Ext.grid.selection.SpreadsheetModel',
  577. checkboxHeaderWidth: 32
  578. });
  579. Ext.define('Ext.theme.triton.selection.CheckboxModel', {
  580. override: 'Ext.selection.CheckboxModel',
  581. headerWidth: 32,
  582. onHeaderClick: function(headerCt, header, e) {
  583. this.callParent([
  584. headerCt,
  585. header,
  586. e
  587. ]);
  588. // Every checkbox needs repainting.
  589. if (Ext.isIE8) {
  590. header.getView().ownerGrid.el.syncRepaint();
  591. }
  592. }
  593. });
  594. Ext.define('Ext.theme.graphite.pivot.plugin.configurator.Panel', {
  595. override: 'Ext.pivot.plugin.configurator.Panel',
  596. defaultMinWidth: 300,
  597. headerWidth: 140
  598. });