theme-triton-debug.js 17 KB

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