theme-crisp-touch-debug.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  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.crisp.Component', {
  32. override: 'Ext.Component'
  33. }, function() {
  34. Ext.namespace('Ext.theme.is').Crisp = true;
  35. Ext.theme.name = 'Crisp';
  36. });
  37. Ext.define('Ext.theme.crisptouch.Component', {
  38. override: 'Ext.Component'
  39. }, function() {
  40. Ext.namespace('Ext.theme.is').CrispTouch = true;
  41. Ext.theme.name = 'CrispTouch';
  42. });
  43. Ext.define('Ext.theme.neptune.resizer.Splitter', {
  44. override: 'Ext.resizer.Splitter',
  45. size: 8
  46. });
  47. Ext.define('Ext.theme.neptune.toolbar.Toolbar', {
  48. override: 'Ext.toolbar.Toolbar',
  49. usePlainButtons: false,
  50. border: false
  51. });
  52. Ext.define('Ext.theme.neptune.layout.component.Dock', {
  53. override: 'Ext.layout.component.Dock',
  54. /**
  55. * This table contains the border removal classes indexed by the sum of the edges to
  56. * remove. Each edge is assigned a value:
  57. *
  58. * * `left` = 1
  59. * * `bottom` = 2
  60. * * `right` = 4
  61. * * `top` = 8
  62. *
  63. * @private
  64. */
  65. noBorderClassTable: [
  66. 0,
  67. // TRBL
  68. Ext.baseCSSPrefix + 'noborder-l',
  69. // 0001 = 1
  70. Ext.baseCSSPrefix + 'noborder-b',
  71. // 0010 = 2
  72. Ext.baseCSSPrefix + 'noborder-bl',
  73. // 0011 = 3
  74. Ext.baseCSSPrefix + 'noborder-r',
  75. // 0100 = 4
  76. Ext.baseCSSPrefix + 'noborder-rl',
  77. // 0101 = 5
  78. Ext.baseCSSPrefix + 'noborder-rb',
  79. // 0110 = 6
  80. Ext.baseCSSPrefix + 'noborder-rbl',
  81. // 0111 = 7
  82. Ext.baseCSSPrefix + 'noborder-t',
  83. // 1000 = 8
  84. Ext.baseCSSPrefix + 'noborder-tl',
  85. // 1001 = 9
  86. Ext.baseCSSPrefix + 'noborder-tb',
  87. // 1010 = 10
  88. Ext.baseCSSPrefix + 'noborder-tbl',
  89. // 1011 = 11
  90. Ext.baseCSSPrefix + 'noborder-tr',
  91. // 1100 = 12
  92. Ext.baseCSSPrefix + 'noborder-trl',
  93. // 1101 = 13
  94. Ext.baseCSSPrefix + 'noborder-trb',
  95. // 1110 = 14
  96. Ext.baseCSSPrefix + 'noborder-trbl'
  97. ],
  98. // 1111 = 15
  99. /**
  100. * The numeric values assigned to each edge indexed by the `dock` config value.
  101. * @private
  102. */
  103. edgeMasks: {
  104. top: 8,
  105. right: 4,
  106. bottom: 2,
  107. left: 1
  108. },
  109. handleItemBorders: function() {
  110. var me = this,
  111. edges = 0,
  112. maskT = 8,
  113. maskR = 4,
  114. maskB = 2,
  115. maskL = 1,
  116. owner = me.owner,
  117. bodyBorder = owner.bodyBorder,
  118. ownerBorder = owner.border,
  119. collapsed = me.collapsed,
  120. edgeMasks = me.edgeMasks,
  121. noBorderCls = me.noBorderClassTable,
  122. dockedItemsGen = owner.dockedItems.generation,
  123. b, borderCls, docked, edgesTouched, i, ln, item, dock, lastValue, mask, addCls, removeCls;
  124. if (me.initializedBorders === dockedItemsGen) {
  125. return;
  126. }
  127. addCls = [];
  128. removeCls = [];
  129. borderCls = me.getBorderCollapseTable();
  130. noBorderCls = me.getBorderClassTable ? me.getBorderClassTable() : noBorderCls;
  131. me.initializedBorders = dockedItemsGen;
  132. // Borders have to be calculated using expanded docked item collection.
  133. me.collapsed = false;
  134. docked = me.getDockedItems('visual');
  135. me.collapsed = collapsed;
  136. for (i = 0 , ln = docked.length; i < ln; i++) {
  137. item = docked[i];
  138. if (item.ignoreBorderManagement) {
  139. // headers in framed panels ignore border management, so we do not want
  140. // to set "satisfied" on the edge in question
  141. continue;
  142. }
  143. dock = item.dock;
  144. mask = edgesTouched = 0;
  145. addCls.length = 0;
  146. removeCls.length = 0;
  147. if (dock !== 'bottom') {
  148. if (edges & maskT) {
  149. // if (not touching the top edge)
  150. b = item.border;
  151. } else {
  152. b = ownerBorder;
  153. if (b !== false) {
  154. edgesTouched += maskT;
  155. }
  156. }
  157. if (b === false) {
  158. mask += maskT;
  159. }
  160. }
  161. if (dock !== 'left') {
  162. if (edges & maskR) {
  163. // if (not touching the right edge)
  164. b = item.border;
  165. } else {
  166. b = ownerBorder;
  167. if (b !== false) {
  168. edgesTouched += maskR;
  169. }
  170. }
  171. if (b === false) {
  172. mask += maskR;
  173. }
  174. }
  175. if (dock !== 'top') {
  176. if (edges & maskB) {
  177. // if (not touching the bottom edge)
  178. b = item.border;
  179. } else {
  180. b = ownerBorder;
  181. if (b !== false) {
  182. edgesTouched += maskB;
  183. }
  184. }
  185. if (b === false) {
  186. mask += maskB;
  187. }
  188. }
  189. if (dock !== 'right') {
  190. if (edges & maskL) {
  191. // if (not touching the left edge)
  192. b = item.border;
  193. } else {
  194. b = ownerBorder;
  195. if (b !== false) {
  196. edgesTouched += maskL;
  197. }
  198. }
  199. if (b === false) {
  200. mask += maskL;
  201. }
  202. }
  203. if ((lastValue = item.lastBorderMask) !== mask) {
  204. item.lastBorderMask = mask;
  205. if (lastValue) {
  206. removeCls[0] = noBorderCls[lastValue];
  207. }
  208. if (mask) {
  209. addCls[0] = noBorderCls[mask];
  210. }
  211. }
  212. if ((lastValue = item.lastBorderCollapse) !== edgesTouched) {
  213. item.lastBorderCollapse = edgesTouched;
  214. if (lastValue) {
  215. removeCls[removeCls.length] = borderCls[lastValue];
  216. }
  217. if (edgesTouched) {
  218. addCls[addCls.length] = borderCls[edgesTouched];
  219. }
  220. }
  221. if (removeCls.length) {
  222. item.removeCls(removeCls);
  223. }
  224. if (addCls.length) {
  225. item.addCls(addCls);
  226. }
  227. // mask can use += but edges must use |= because there can be multiple items
  228. // on an edge but the mask is reset per item
  229. edges |= edgeMasks[dock];
  230. }
  231. // = T, R, B or L (8, 4, 2 or 1)
  232. mask = edgesTouched = 0;
  233. addCls.length = 0;
  234. removeCls.length = 0;
  235. if (edges & maskT) {
  236. // if (not touching the top edge)
  237. b = bodyBorder;
  238. } else {
  239. b = ownerBorder;
  240. if (b !== false) {
  241. edgesTouched += maskT;
  242. }
  243. }
  244. if (b === false) {
  245. mask += maskT;
  246. }
  247. if (edges & maskR) {
  248. // if (not touching the right edge)
  249. b = bodyBorder;
  250. } else {
  251. b = ownerBorder;
  252. if (b !== false) {
  253. edgesTouched += maskR;
  254. }
  255. }
  256. if (b === false) {
  257. mask += maskR;
  258. }
  259. if (edges & maskB) {
  260. // if (not touching the bottom edge)
  261. b = bodyBorder;
  262. } else {
  263. b = ownerBorder;
  264. if (b !== false) {
  265. edgesTouched += maskB;
  266. }
  267. }
  268. if (b === false) {
  269. mask += maskB;
  270. }
  271. if (edges & maskL) {
  272. // if (not touching the left edge)
  273. b = bodyBorder;
  274. } else {
  275. b = ownerBorder;
  276. if (b !== false) {
  277. edgesTouched += maskL;
  278. }
  279. }
  280. if (b === false) {
  281. mask += maskL;
  282. }
  283. if ((lastValue = me.lastBodyBorderMask) !== mask) {
  284. me.lastBodyBorderMask = mask;
  285. if (lastValue) {
  286. removeCls[0] = noBorderCls[lastValue];
  287. }
  288. if (mask) {
  289. addCls[0] = noBorderCls[mask];
  290. }
  291. }
  292. if ((lastValue = me.lastBodyBorderCollapse) !== edgesTouched) {
  293. me.lastBodyBorderCollapse = edgesTouched;
  294. if (lastValue) {
  295. removeCls[removeCls.length] = borderCls[lastValue];
  296. }
  297. if (edgesTouched) {
  298. addCls[addCls.length] = borderCls[edgesTouched];
  299. }
  300. }
  301. if (removeCls.length) {
  302. owner.removeBodyCls(removeCls);
  303. }
  304. if (addCls.length) {
  305. owner.addBodyCls(addCls);
  306. }
  307. },
  308. onRemove: function(item) {
  309. var me = this,
  310. lastBorderMask = item.lastBorderMask,
  311. lastBorderCollapse = item.lastBorderCollapse;
  312. if (!item.destroyed && !item.ignoreBorderManagement) {
  313. if (lastBorderMask) {
  314. item.lastBorderMask = 0;
  315. item.removeCls(me.noBorderClassTable[lastBorderMask]);
  316. }
  317. if (lastBorderCollapse) {
  318. item.lastBorderCollapse = 0;
  319. item.removeCls(me.getBorderCollapseTable()[lastBorderCollapse]);
  320. }
  321. }
  322. me.callParent([
  323. item
  324. ]);
  325. }
  326. });
  327. Ext.define('Ext.theme.neptune.panel.Panel', {
  328. override: 'Ext.panel.Panel',
  329. border: false,
  330. bodyBorder: false,
  331. initBorderProps: Ext.emptyFn,
  332. initBodyBorder: function() {
  333. // The superclass method converts a truthy bodyBorder into a number and sets
  334. // an inline border-width style on the body element. This prevents that from
  335. // happening if borderBody === true so that the body will get its border-width
  336. // the stylesheet.
  337. if (this.bodyBorder !== true) {
  338. this.callParent();
  339. }
  340. }
  341. });
  342. Ext.define('Ext.theme.neptune.container.ButtonGroup', {
  343. override: 'Ext.container.ButtonGroup',
  344. usePlainButtons: false
  345. });
  346. Ext.define('Ext.theme.neptune.toolbar.Paging', {
  347. override: 'Ext.toolbar.Paging',
  348. defaultButtonUI: 'plain-toolbar',
  349. inputItemWidth: 40
  350. });
  351. Ext.define('Ext.theme.neptune.picker.Month', {
  352. override: 'Ext.picker.Month',
  353. // Monthpicker contains logic that reduces the margins of the month items if it detects
  354. // that the text has wrapped. This can happen in the classic theme in certain
  355. // locales such as zh_TW. In order to work around this, Month picker measures
  356. // the month items to see if the height is greater than "measureMaxHeight".
  357. // In neptune the height of the items is larger, so we must increase this value.
  358. // While the actual height of the month items in neptune is 24px, we will only
  359. // determine that the text has wrapped if the height of the item exceeds 36px.
  360. // this allows theme developers some leeway to increase the month item size in
  361. // a neptune-derived theme.
  362. measureMaxHeight: 36
  363. });
  364. Ext.define('Ext.theme.neptune.form.field.HtmlEditor', {
  365. override: 'Ext.form.field.HtmlEditor',
  366. defaultButtonUI: 'plain-toolbar'
  367. });
  368. Ext.define('Ext.theme.neptune.panel.Table', {
  369. override: 'Ext.panel.Table',
  370. lockableBodyBorder: true,
  371. initComponent: function() {
  372. var me = this;
  373. me.callParent();
  374. if (!me.hasOwnProperty('bodyBorder') && !me.hideHeaders && (me.lockableBodyBorder || !me.lockable)) {
  375. me.bodyBorder = true;
  376. }
  377. }
  378. });
  379. Ext.define('Ext.theme.crisp.view.Table', {
  380. override: 'Ext.view.Table',
  381. stripeRows: false
  382. });
  383. Ext.define('Ext.theme.neptune.grid.RowEditor', {
  384. override: 'Ext.grid.RowEditor',
  385. buttonUI: 'default-toolbar'
  386. });
  387. Ext.define('Ext.theme.neptune.grid.column.RowNumberer', {
  388. override: 'Ext.grid.column.RowNumberer',
  389. width: 25
  390. });
  391. Ext.define('Ext.theme.neptune.menu.Separator', {
  392. override: 'Ext.menu.Separator',
  393. border: true
  394. });
  395. Ext.define('Ext.theme.neptune.menu.Menu', {
  396. override: 'Ext.menu.Menu',
  397. showSeparator: false
  398. });