@mikezimm/fps-core-v7
Version:
Library of reusable core interfaces, types and constants migrated from fps-library-v2
250 lines • 9.15 kB
JavaScript
/**
* 2024-09-07: Migrated from the same folder in fps-library-v2/common/commandStyles/...
*/
export const defaultBannerCommandStyles = {
backgroundColor: 'white',
color: 'black',
fontSize: 20,
fontWeight: 'normal',
fontStyle: 'normal',
padding: '7px',
margin: '0px 4px',
borderRadius: '5px',
cursor: 'pointer',
};
export const baseBannerStyles = {
color: 'black',
backgroundColor: '#cfcfcf',
fontSize: 'larger',
fontWeight: 600,
fontStyle: 'normal',
padding: '0px 10px',
// margin: '0px 4px',
height: '48px',
cursor: 'pointer',
};
export const baseBannerCmdStyles = {
color: 'black',
backgroundColor: 'white',
fontSize: 20,
fontWeight: 'normal',
fontStyle: 'normal',
padding: '7px',
marginRight: '5px',
borderRadius: '5px',
cursor: 'pointer',
};
export const corpDark1 = {
backgroundColor: '#005495', color: 'white',
};
export const corpWhite1 = {
backgroundColor: 'white', color: '#005495',
};
export const corpDark2 = {
backgroundColor: '#0078D7', color: 'white',
};
export const corpWhite2 = {
backgroundColor: 'white', color: '#0078D7',
};
export const transparentBlack = {
backgroundColor: 'transparent', color: 'black',
};
export const transparentWhite = {
backgroundColor: 'transparent', color: 'white',
};
export const redDark = {
backgroundColor: '#C80000', color: 'white',
};
export const redLight = {
backgroundColor: 'white', color: '#C80000',
};
export const greenDark = {
backgroundColor: '#147A1E', color: 'white',
};
export const greenLight = {
backgroundColor: 'white', color: '#147A1E',
};
export const ukraine = {
backgroundColor: '#005BBB', color: '#FFD500',
};
export const darkBrown = {
backgroundColor: '#9b2e0d', color: 'white',
};
export const darkPurple = {
backgroundColor: '#651FFF', color: 'white',
};
export const fireOrange = {
backgroundColor: '#FF6D00', color: '#FFFF00',
};
// https://github.com/mikezimm/pivottiles7/issues/376
export const halloween = {
backgroundColor: '#FF8F00', color: 'black',
};
// https://github.com/mikezimm/pivottiles7/issues/376
// lightCharcoal was truely lightened
export const faintCharcoal = {
backgroundColor: '#00000042', color: 'black',
};
// https://github.com/mikezimm/pivottiles7/issues/376
// lightCharcoal was truely lightened
export const xferPulse = {
backgroundColor: '#00133E', color: '#57C40F',
};
export const lightCharcoal = {
backgroundColor: '#000000ad', color: 'white',
};
// export const lightCharcoalHiVis : IReactCSSProperties = {
// ...lightCharcoal , color: 'yellow' ,
// };
// https://github.com/mikezimm/pivottiles7/issues/376
// medCharcoal created Jul 2024 which is the same as the original 'lightCharcoal'
export const medCharcoal = {
backgroundColor: '#000000c7', color: 'white',
};
// export const medCharcoalHiVis : IReactCSSProperties = {
// ...medCharcoal , color: 'yellow' ,
// };
export const darkCharcoal = {
backgroundColor: '#000000e0', color: 'white',
};
// export const darkCharcoalHiVis : IReactCSSProperties = {
// ...darkCharcoal , color: 'yellow' ,
// };
export const bkat = {
backgroundColor: 'black', color: 'pink',
};
export const bumbleBee = {
backgroundColor: 'yellow', color: 'black',
};
export const beebulBum = {
backgroundColor: 'black', color: 'yellow',
};
export const periwinkle = {
backgroundColor: '#5B5FC7', color: 'white',
};
export const darkTeal = {
backgroundColor: '#03787c', color: 'white',
};
export const lightTeal = {
backgroundColor: '#98d6d8', color: 'black',
};
export const bannerThemes = [
defaultBannerCommandStyles,
corpDark1, corpWhite1,
corpDark2, corpWhite2,
transparentBlack, transparentWhite,
bumbleBee, beebulBum,
darkTeal, lightTeal,
periwinkle,
redDark, redLight,
greenDark, greenLight,
ukraine, darkBrown,
darkPurple, fireOrange, halloween,
xferPulse,
faintCharcoal,
// NOTE that these are just pairs because the second one is for the HiVis options with yellow icon font color
lightCharcoal, lightCharcoal, medCharcoal, medCharcoal, darkCharcoal, darkCharcoal, bkat
];
export const bannerThemeKeys = [
'defaultBannerCommandStyles',
'corpDark1', 'corpWhite1',
'corpDark2', 'corpWhite2',
'transparentBlack', 'transparentWhite',
'bumbleBee', 'beebulBum',
'darkTeal', 'lightTeal',
'periwinkle',
'redDark', 'redLight',
'greenDark', 'greenLight',
'ukraine', 'darkBrown',
'darkPurple', 'fireOrange', 'halloween',
'xferPulse',
'faintCharcoal',
'lightCharcoal', 'lightCharcoalHiVis', 'medCharcoal', 'medCharcoalHiVis', 'darkCharcoal', 'darkCharcoalHiVis', 'bkat',
'custom', 'lock',
];
export function makeCSSPropPaneString(obj) {
let result = JSON.stringify(obj ? obj : {});
result.replace(/'/g, '"');
return result;
}
export function createBannerStyleStr(choice, cmdOrBanner) {
let result = createBannerStyle(choice, cmdOrBanner, true);
return result;
}
export function createBannerStyleObj(choice, cmdOrBanner) {
let result = createBannerStyle(choice, cmdOrBanner, false);
return result;
}
export function createBannerStyle(choice, cmdOrBanner, asString) {
const base = cmdOrBanner === 'cmd' ? baseBannerCmdStyles : baseBannerStyles;
let baseCSS = JSON.parse(JSON.stringify(base));
let idx = choice ? bannerThemeKeys.indexOf(choice) : 0;
if (choice && idx > 0) {
let themeCSS = JSON.parse(JSON.stringify(bannerThemes[idx]));
// Make Charcoal or any with 'HiVis' in the choice with yellow color icons
if (cmdOrBanner === 'cmd' && choice.indexOf('Charc') > 0) {
themeCSS.backgroundColor = 'transparent';
}
if (choice.indexOf('HiVis') > 0) {
themeCSS.color = 'yellow';
}
Object.keys(themeCSS).map(key => {
baseCSS[key] = themeCSS[key];
});
}
if (asString === true) {
return makeCSSPropPaneString(baseCSS);
}
else {
return baseCSS;
}
}
export const bannerThemeChoices = [
{ index: 0, key: 'defaultBannerCommandStyles', text: "Default" },
{ index: 1, key: 'corpDark1', text: "corpDark1" },
{ index: 2, key: 'corpWhite1', text: "corpWhite1" },
{ index: 3, key: 'corpDark2', text: "corpDark2" },
{ index: 4, key: 'corpWhite2', text: "corpWhite2" },
{ index: 5, key: 'transparentBlack', text: "transparentBlack" },
{ index: 6, key: 'transparentWhite', text: "transparentWhite" },
{ index: 7, key: 'bumbleBee', text: "bumbleBee" },
{ index: 7, key: 'beebulBum', text: "beebulBum" },
{ index: 7, key: 'darkTeal', text: "darkTeal" },
{ index: 7, key: 'lightTeal', text: "lightTeal" },
{ index: 7, key: 'periwinkle', text: "periwinkle" },
{ index: 7, key: 'redDark', text: "redDark" },
{ index: 8, key: 'redLight', text: "redLight" },
{ index: 9, key: 'greenDark', text: "greenDark" },
{ index: 10, key: 'greenLight', text: "greenLight" },
{ index: 11, key: 'ukraine', text: "Ukraine" },
{ index: 12, key: 'darkBrown', text: "darkBrown" },
{ index: 13, key: 'darkPurple', text: "darkPurple" },
{ index: 14, key: 'fireOrange', text: "fireOrange" },
{ index: 15, key: 'halloween', text: "halloween" },
{ index: 15, key: 'xferPulse', text: "xferPulse" },
{ index: 16, key: 'faintCharcoal', text: "faintCharcoal" },
{ index: 17, key: 'lightCharcoal', text: "lightCharcoal" },
{ index: 18, key: 'lightCharcoalHiVis', text: "lightCharcoalHiVis" },
{ index: 19, key: 'medCharcoal', text: "medCharcoal" },
{ index: 20, key: 'medCharcoalHiVis', text: "medCharcoalHiVis" },
{ index: 21, key: 'darkCharcoal', text: "darkCharcoal" },
{ index: 22, key: 'darkCharcoalHiVis', text: "darkCharcoalHiVis" },
{ index: 23, key: 'bkat', text: "bkat" },
{ index: 24, key: 'custom', text: "Custom" },
{ index: 25, key: 'lock', text: "Lock" },
];
export const bannerInfoEleChoices = [
{ index: 0, key: 'Text', text: "More Information" },
{ index: 1, key: 'IconName=Unknown', text: "Question mark circle" },
{ index: 2, key: 'IconName=UnknownSolid', text: "Question mark solid circle" },
{ index: 3, key: 'IconName=Help', text: "Question mark" },
{ index: 4, key: 'IconName=ReceiptTentative', text: "Question mark lines" },
{ index: 5, key: 'IconName=Info', text: "i in circle" },
{ index: 6, key: 'IconName=InfoSolid', text: "i in solid circle" },
{ index: 7, key: 'IconName=UnknownCall', text: "Telephone with Question mark" },
{ index: 8, key: 'IconName=Emoji2', text: "Smiling emoji" },
{ index: 9, key: 'IconName=Sad', text: "Sad emoji" },
{ index: 10, key: 'IconName=Education', text: "Education" },
{ index: 11, key: 'IconName=HandsFree', text: "Hand" },
];
//# sourceMappingURL=defaults.js.map