theme-neptune-debug.js 12 KB

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