extjs-gpl
Version:
GPL licensed version of Sencha Ext JS
705 lines (686 loc) • 20.8 kB
JavaScript
Ext.define('Ext.theme.material.Button', {
override: 'Ext.Button',
config: {
ripple: true
},
destroy: function() {
this.callParent(arguments);
this.destroyRipple();
},
updateHidden: function(hidden) {
this.callParent(arguments);
if (hidden) {
this.removeRippleEffect();
}
},
onPress: function(e) {
if (!this.getDisabled()) {
var shouldRipple = this.getRipple();
if (shouldRipple) {
var color = window.getComputedStyle(this.element.dom).color,
offset = this.element.getXY(),
elementWidth = this.element.getWidth(),
elementHeight = this.element.getHeight(),
rippleDiameter = elementWidth > elementHeight ? elementWidth : elementHeight,
pos = e.getXY(),
posX = pos[0] - offset[0] - (rippleDiameter / 2),
posY = pos[1] - offset[1] - (rippleDiameter / 2);
this.$ripple.setStyle('backgroundColor', color);
this.$ripple.toggleCls('md-ripple-effect', true);
this.$ripple.setWidth(rippleDiameter);
this.$ripple.setHeight(rippleDiameter);
this.$ripple.setTop(posY);
this.$ripple.setLeft(posX);
this.$rippleWrap.show();
if (this.$rippleAnimationListener) {
this.$rippleAnimationListener.destroy();
}
this.$rippleAnimationListener = this.$ripple.on('animationend', this.onRippleEnd, this, {
single: true,
destroyable: true
});
}
}
this.callParent(arguments);
},
onRippleEnd: function() {
if (this.$ripple) {
this.$ripple.toggleCls('md-ripple-effect', false);
this.$rippleWrap.hide();
}
},
updateRipple: function(ripple, oldRipple) {
var me = this;
if (ripple) {
me.$rippleWrap = me.element.insertFirst({
cls: 'md-ripple-wrap'
});
me.$ripple = me.$rippleWrap.insertFirst({
cls: 'md-ripple'
});
} else if (me.$ripple) {
me.destroyRipple();
}
},
removeRippleEffect: function() {
if (this.$rippleAnimationListener) {
this.$rippleAnimationListener.destroy();
}
this.onRippleEnd();
},
destroyRipple: function() {
this.removeRippleEffect();
if (this.$rippleWrap) {
this.$rippleWrap.destroy();
}
},
applyIconCls: function(cls) {
var materialMatch = cls && cls.match(/^md-icon[-|_](.*)/),
materialIcon = materialMatch && materialMatch.length > 1 ? materialMatch[1] : null;
if (materialIcon) {
return 'md-icon ' + cls;
}
return cls;
}
});
Ext.define('Ext.theme.material.field.Field', {
override: 'Ext.field.Field',
config: {
labelAlign: 'top'
}
});
Ext.define('Ext.theme.material.MessageBox', {
override: 'Ext.MessageBox',
config: {
buttonToolbar: {
layout: {
pack: 'end'
}
}
}
});
Ext.define('Ext.theme.neptune.Titlebar', {
override: 'Ext.TitleBar',
config: {
defaultButtonUI: 'alt'
}
});
Ext.define('Ext.theme.material.TitleBar', {
override: 'Ext.TitleBar',
config: {
titleAlign: 'left',
defaultButtonUI: 'alt'
}
});
Ext.define('Ext.theme.material.dataview.IndexBar', {
override: 'Ext.dataview.IndexBar',
config: {
direction: 'vertical',
letters: [
'*',
'#',
'A',
'B',
'C',
'D',
'E',
'F',
'G',
'H',
'I',
'J',
'K',
'L',
'M',
'N',
'O',
'P',
'Q',
'R',
'S',
'T',
'U',
'V',
'W',
'X',
'Y',
'Z'
]
},
getElementConfig: function() {
return {
reference: 'wrapper',
classList: [
'x-center',
'x-indexbar-wrapper'
],
children: [
{
reference: 'indicator',
classList: [
'x-indexbar-indicator'
],
hidden: true,
children: [
{
reference: 'indicatorInner',
classList: [
'x-indexbar-indicator-inner'
]
}
]
},
// We want to skip the default list getElementConfig
this.callSuper()
]
};
},
onDragEnd: function(event, target) {
this.callParent([
event,
target
]);
this.indicator.hide();
},
privates: {
onVerticalDrag: function(point, target, isValidTarget) {
var indicator = this.indicator;
indicator.show();
var element = this.element,
indicatorInner = this.indicatorInner,
indicatorHeight = indicator.getHeight(),
halfIndicatorHeight = indicatorHeight / 2,
elementY = element.getY(),
y = point.y - elementY;
y = Math.min(Math.max(y, halfIndicatorHeight), element.getHeight() - halfIndicatorHeight);
if (isValidTarget) {
indicatorInner.setHtml(target.getHtml().toUpperCase());
}
indicator.setTop(y - halfIndicatorHeight);
}
}
});
Ext.define('Ext.theme.material.dataview.List', {
override: 'Ext.dataview.List',
config: {
rowLines: false
}
});
Ext.define('Ext.theme.material.dataview.NestedList', {
override: 'Ext.dataview.NestedList',
config: {
backText: '',
useTitleAsBackText: false,
backButton: {
iconCls: 'md-icon-arrow-back',
hidden: true
}
}
});
Ext.define('Ext.theme.neptune.tip.ToolTip', {
override: 'Ext.tip.ToolTip',
bodyBorder: false
});
Ext.define('Ext.theme.material.field.Checkbox', {
override: 'Ext.field.Checkbox',
config: {
labelAlign: 'left',
bodyAlign: 'end'
}
});
Ext.define('Ext.theme.material.form.FieldContainer', {
override: 'Ext.form.FieldContainer',
config: {
fieldSeparators: false,
inputBorders: true
}
});
Ext.define('Ext.theme.material.grid.Grid', {
override: 'Ext.grid.Grid',
config: {
rowLines: true,
striped: false
}
});
Ext.define('Ext.theme.material.navigation.Bar', {
override: 'Ext.navigation.Bar',
config: {
defaultBackButtonText: '',
useTitleForBackButtonText: false,
backButton: {
align: 'left',
ui: 'back',
hidden: true,
iconCls: 'md-icon-arrow-back'
}
}
});
Ext.define('Ext.theme.material.panel.Header', {
override: 'Ext.panel.Header',
config: {
titleAlign: 'left'
}
});
Ext.define('Ext.theme.material.tab.Tab', {
override: 'Ext.tab.Tab',
config: {
iconAlign: 'top',
flex: 1
}
});
Ext.namespace('Ext.theme.is').Neptune = true;
Ext.theme.name = 'Neptune';
Ext.theme.getDocCls = function() {
return Ext.platformTags.desktop ? '' : 'x-big';
};
Ext.define('Ext.theme.Material', {
singleton: true,
_autoUpdateMeta: true,
_defaultWeight: '500',
_colors: {
'red': {
'50': '#ffebee',
'100': '#ffcdd2',
'200': '#ef9a9a',
'300': '#e57373',
'400': '#ef5350',
'500': '#f44336',
'600': '#e53935',
'700': '#d32f2f',
'800': '#c62828',
'900': '#b71c1c',
'a100': '#ff8a80',
'a200': '#ff5252',
'a400': '#ff1744',
'a700': '#d50000'
},
'pink': {
'50': '#fce4ec',
'100': '#f8bbd0',
'200': '#f48fb1',
'300': '#f06292',
'400': '#ec407a',
'500': '#e91e63',
'600': '#d81b60',
'700': '#c2185b',
'800': '#ad1457',
'900': '#880e4f',
'a100': '#ff80ab',
'a200': '#ff4081',
'a400': '#f50057',
'a700': '#c51162'
},
'purple': {
'50': '#f3e5f5',
'100': '#e1bee7',
'200': '#ce93d8',
'300': '#ba68c8',
'400': '#ab47bc',
'500': '#9c27b0',
'600': '#8e24aa',
'700': '#7b1fa2',
'800': '#6a1b9a',
'900': '#4a148c',
'a100': '#ea80fc',
'a200': '#e040fb',
'a400': '#d500f9',
'a700': '#aa00ff'
},
'deep-purple': {
'50': '#ede7f6',
'100': '#d1c4e9',
'200': '#b39ddb',
'300': '#9575cd',
'400': '#7e57c2',
'500': '#673ab7',
'600': '#5e35b1',
'700': '#512da8',
'800': '#4527a0',
'900': '#311b92',
'a100': '#b388ff',
'a200': '#7c4dff',
'a400': '#651fff',
'a700': '#6200ea'
},
'indigo': {
'50': '#e8eaf6',
'100': '#c5cae9',
'200': '#9fa8da',
'300': '#7986cb',
'400': '#5c6bc0',
'500': '#3f51b5',
'600': '#3949ab',
'700': '#303f9f',
'800': '#283593',
'900': '#1a237e',
'a100': '#8c9eff',
'a200': '#536dfe',
'a400': '#3d5afe',
'a700': '#304ffe'
},
'blue': {
'50': '#e3f2fd',
'100': '#bbdefb',
'200': '#90caf9',
'300': '#64b5f6',
'400': '#42a5f5',
'500': '#2196f3',
'600': '#1e88e5',
'700': '#1976d2',
'800': '#1565c0',
'900': '#0d47a1',
'a100': '#82b1ff',
'a200': '#448aff',
'a400': '#2979ff',
'a700': '#2962ff'
},
'light-blue': {
'50': '#e1f5fe',
'100': '#b3e5fc',
'200': '#81d4fa',
'300': '#4fc3f7',
'400': '#29b6f6',
'500': '#03a9f4',
'600': '#039be5',
'700': '#0288d1',
'800': '#0277bd',
'900': '#01579b',
'a100': '#80d8ff',
'a200': '#40c4ff',
'a400': '#00b0ff',
'a700': '#0091ea'
},
'cyan': {
'50': '#e0f7fa',
'100': '#b2ebf2',
'200': '#80deea',
'300': '#4dd0e1',
'400': '#26c6da',
'500': '#00bcd4',
'600': '#00acc1',
'700': '#0097a7',
'800': '#00838f',
'900': '#006064',
'a100': '#84ffff',
'a200': '#18ffff',
'a400': '#00e5ff',
'a700': '#00b8d4'
},
'teal': {
'50': '#e0f2f1',
'100': '#b2dfdb',
'200': '#80cbc4',
'300': '#4db6ac',
'400': '#26a69a',
'500': '#009688',
'600': '#00897b',
'700': '#00796b',
'800': '#00695c',
'900': '#004d40',
'a100': '#a7ffeb',
'a200': '#64ffda',
'a400': '#1de9b6',
'a700': '#00bfa5'
},
'green': {
'50': '#e8f5e9',
'100': '#c8e6c9',
'200': '#a5d6a7',
'300': '#81c784',
'400': '#66bb6a',
'500': '#4caf50',
'600': '#43a047',
'700': '#388e3c',
'800': '#2e7d32',
'900': '#1b5e20',
'a100': '#b9f6ca',
'a200': '#69f0ae',
'a400': '#00e676',
'a700': '#00c853'
},
'light-green': {
'50': '#f1f8e9',
'100': '#dcedc8',
'200': '#c5e1a5',
'300': '#aed581',
'400': '#9ccc65',
'500': '#8bc34a',
'600': '#7cb342',
'700': '#689f38',
'800': '#558b2f',
'900': '#33691e',
'a100': '#ccff90',
'a200': '#b2ff59',
'a400': '#76ff03',
'a700': '#64dd17'
},
'lime': {
'50': '#f9fbe7',
'100': '#f0f4c3',
'200': '#e6ee9c',
'300': '#dce775',
'400': '#d4e157',
'500': '#cddc39',
'600': '#c0ca33',
'700': '#afb42b',
'800': '#9e9d24',
'900': '#827717',
'a100': '#f4ff81',
'a200': '#eeff41',
'a400': '#c6ff00',
'a700': '#aeea00'
},
'yellow': {
'50': '#fffde7',
'100': '#fff9c4',
'200': '#fff59d',
'300': '#fff176',
'400': '#ffee58',
'500': '#ffeb3b',
'600': '#fdd835',
'700': '#fbc02d',
'800': '#f9a825',
'900': '#f57f17',
'a100': '#ffff8d',
'a200': '#ffff00',
'a400': '#ffea00',
'a700': '#ffd600'
},
'amber': {
'50': '#fff8e1',
'100': '#ffecb3',
'200': '#ffe082',
'300': '#ffd54f',
'400': '#ffca28',
'500': '#ffc107',
'600': '#ffb300',
'700': '#ffa000',
'800': '#ff8f00',
'900': '#ff6f00',
'a100': '#ffe57f',
'a200': '#ffd740',
'a400': '#ffc400',
'a700': '#ffab00'
},
'orange': {
'50': '#fff3e0',
'100': '#ffe0b2',
'200': '#ffcc80',
'300': '#ffb74d',
'400': '#ffa726',
'500': '#ff9800',
'600': '#fb8c00',
'700': '#f57c00',
'800': '#ef6c00',
'900': '#e65100',
'a100': '#ffd180',
'a200': '#ffab40',
'a400': '#ff9100',
'a700': '#ff6d00'
},
'deep-orange': {
'50': '#fbe9e7',
'100': '#ffccbc',
'200': '#ffab91',
'300': '#ff8a65',
'400': '#ff7043',
'500': '#ff5722',
'600': '#f4511e',
'700': '#e64a19',
'800': '#d84315',
'900': '#bf360c',
'a100': '#ff9e80',
'a200': '#ff6e40',
'a400': '#ff3d00',
'a700': '#dd2c00'
},
'brown': {
'50': '#efebe9',
'100': '#d7ccc8',
'200': '#bcaaa4',
'300': '#a1887f',
'400': '#8d6e63',
'500': '#795548',
'600': '#6d4c41',
'700': '#5d4037',
'800': '#4e342e',
'900': '#3e2723'
},
'grey': {
'50': '#fafafa',
'100': '#f5f5f5',
'200': '#eeeeee',
'300': '#e0e0e0',
'400': '#bdbdbd',
'500': '#9e9e9e',
'600': '#757575',
'700': '#616161',
'800': '#424242',
'900': '#212121'
},
'blue-grey': {
'50': '#eceff1',
'100': '#cfd8dc',
'200': '#b0bec5',
'300': '#90a4ae',
'400': '#78909c',
'500': '#607d8b',
'600': '#546e7a',
'700': '#455a64',
'800': '#37474f',
'900': '#263238',
'1000': '#11171a'
}
},
hasFashion: function() {
return !!Fashion.css && Fashion.css.setVariables;
},
setAutoUpdateMeta: function(value) {
this._autoUpdateMeta = value;
},
getAutoUpdateMeta: function() {
return this._autoUpdateMeta;
},
getDefaultWeight: function() {
return this._defaultWeight;
},
setDarkMode: function(value) {
if (!this.hasFashion()) {
//<debug>
Ext.Logger.warn('Fashion was not found and is required to set CSS Variables for Material Theme');
//</debug>
return;
}
Fashion.css.setVariables({
'dark-mode': value ? 'true' : 'false'
});
},
/**
* Sets the colors for the Material theme Dynamically with CSS Variables and Fashion
* @param {Object} colorsConfig
* @param {String} colorsConfig.base Name of the base color (red, green, blue, etc)
* @param {String} colorsConfig.baseWeight Weight for the base color ('500', '400', '300', etc)
* @param {String} colorsConfig.accent Name of the accent color (red, green, blue, etc)
* @param {String} colorsConfig.accentWeight Weight for the accent color ('500', '400', '300', etc)
* @param {Boolean} colorsConfig.darkMode Determines if the theme is in Light or Dark Mode
*/
setColors: function(colorsConfig) {
if (!this.hasFashion()) {
//<debug>
Ext.Logger.warn('Fashion was not found and is required to set CSS Variables for Material Theme');
//</debug>
return;
}
colorsConfig = Ext.merge({
baseWeight: this.getDefaultWeight(),
accentWeight: this.getDefaultWeight()
}, colorsConfig);
var baseColor = this._colors[colorsConfig.base],
accentColor = this._colors[colorsConfig.accent],
obj = {};
if (baseColor) {
baseColor = baseColor[colorsConfig.baseWeight];
if (baseColor) {
obj['base-color'] = baseColor;
if (this.getAutoUpdateMeta()) {
this.updateMetaThemeColor(colorsConfig.base, colorsConfig.baseWeight);
}
} else {
Ext.Logger.warn("Base color weight: " + colorsConfig.baseWeight + " is not a valid weight", this);
}
} else if (colorsConfig.base) {
Ext.Logger.warn("Base color: " + colorsConfig.base + " is not a valid material color", this);
}
if (accentColor) {
accentColor = accentColor[colorsConfig.accentWeight];
if (accentColor) {
obj['accent-color'] = accentColor;
} else {
Ext.Logger.warn("Accent color weight: " + colorsConfig.accentWeight + " is not a valid weight", this);
}
} else if (colorsConfig.accent) {
Ext.Logger.warn("Accent color: " + colorsConfig.accent + " is not a valid material color", this);
}
if (colorsConfig.darkMode !== null) {
obj['dark-mode'] = colorsConfig.darkMode ? 'true' : 'false';
}
Fashion.css.setVariables(obj);
},
updateMetaThemeColor: function(colorName, weight) {
var color = this._colors[colorName],
toolbarIsDynamic = Ext.manifest.material.toolbar.dynamic,
meta;
if (!weight) {
weight = this.getDefaultWeight();
}
if (Ext.platformTags.android && Ext.platformTags.chrome && toolbarIsDynamic && color) {
color = color[weight];
meta = Ext.query('meta[name="theme-color"]')[0];
if (meta) {
meta.setAttribute('content', color);
}
}
},
getColors: function() {
return this._colors;
}
});
Ext.require('Ext.theme.Material');
if (Ext.platformTags.android && Ext.platformTags.chrome && Ext.manifest.material && Ext.manifest.material.toolbar) {
var color = Ext.manifest.material.toolbar.color,
toolbarIsDynamic = Ext.manifest.material.toolbar.dynamic,
head = document.head,
meta;
if (toolbarIsDynamic && Ext.supports.CSSVariables) {
color = getComputedStyle(document.body).getPropertyValue('--primary-color-md');
color = color.replace(/ /g, '').replace(/^#(?:\\3)?/, '#');
}
if (color) {
meta = document.createElement('meta');
meta.setAttribute('name', 'theme-color');
meta.setAttribute('content', color);
head.appendChild(meta);
}
}
Ext.namespace('Ext.theme.is').Material = true;
Ext.theme.name = 'Material';