d2-ui
Version:
307 lines (260 loc) • 7 kB
JavaScript
import { white, black } from 'material-ui/styles/colors';
import { Observable } from 'rxjs';
import log from 'loglevel';
import { curry } from 'lodash/fp';
export var MENU_ITEM_WIDTH = 125;
export function applyUserStyle(user, style) {
switch (user.userSettings.keyStyle) {
case 'vietnam/vietnam.css':
return Object.assign({}, style, { background: '#B40303' });
case 'india/india.css':
return Object.assign({}, style, { background: '#EA5911' });
case 'green/green.css':
return Object.assign({}, style, { background: '#467E4A' });
default:
break;
}
return style;
}
var styles = {};
export function getWindowWidth() {
if (!global.document) {
return 0;
}
return Math.max(window.document.documentElement.clientWidth, window.innerWidth || 0);
}
export var toggleStyle = curry(function (predicateFn, whenTrue, whenFalse) {
return predicateFn() ? whenTrue : whenFalse;
});
export var whenWidthLargerThan1150 = toggleStyle(function () {
return getWindowWidth() > 1150;
});
/**
* Calculates the height of the search results box. When the user has a large screen height we fit a max of four rows
* of search results onto the screen. If four rows is too big for the current screen size we limit the search results box
* to 80% of the current viewport height.
*
* @returns {number} The height of the search result box in pixels.
*/
export function getSearchResultsHeight() {
var maxResultRowsHeight = 465;
if (!global.document) {
return maxResultRowsHeight;
}
var eightyPercentHeight = Math.max(global.document.documentElement.clientHeight, window.innerHeight || 0) * 0.8;
if (eightyPercentHeight < maxResultRowsHeight) {
return eightyPercentHeight;
}
return maxResultRowsHeight;
}
// Only attach the window resize listener when we have a document
if (global.document) {
// Track the resize event on the window to recalculate the height of the search results box.
Observable.fromEvent(global, 'resize').debounceTime(300).subscribe(function () {
return Object.assign(styles.searchResults, { maxHeight: getSearchResultsHeight() });
}, log.error);
}
styles = {
avatar: {
fontSize: '0.8rem',
fontWeight: '700',
lineHeight: '32px',
marginLeft: '-2px',
backgroundColor: '#6a94c2'
},
avatarBig: {
fontSize: '1.5rem',
fontWeight: '500',
lineHeight: '60px',
backgroundColor: '#6a94c2'
},
headerBar: {
boxSizing: 'border-box',
background: '#276696',
display: 'flex',
position: 'fixed',
top: 0,
left: 0,
width: '100%',
minHeight: 48,
justifyContent: 'center',
alignItems: 'center',
zIndex: 1400
},
headerTitle: {
flex: 1,
color: '#FFF'
},
headerMenu: {
flex: '0 0 auto',
padding: '0 1rem',
height: 48,
justifyContent: 'center',
alignItems: 'center',
display: 'flex'
},
menusWrap: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-end',
paddingRight: '2rem'
},
dropDownWrap: {
position: 'absolute',
display: 'none',
padding: '1rem',
right: 40,
overflow: 'hidden',
width: 400,
flexDirection: 'column',
top: 48
},
headerActions: {
flex: 1,
display: 'flex',
flexDirection: 'row',
position: 'relative',
minWidth: 420,
maxWidth: 550
},
notificationBadge: {
padding: 0
},
notificationBadgeIcon: {
zIndex: 10,
width: 20,
height: 20,
top: 3,
backgroundColor: '#4ca899',
fontSize: '9px'
},
notificationIcon: {
fill: 'white'
},
notificationButton: {
width: 44
},
searchField: {
flex: 1,
display: 'flex',
flexDirection: 'row'
},
searchFieldInnerWrap: {
flex: 1,
transition: 'width .5s cubic-bezier(0.39, -0.04, 0.2, 1)',
position: 'relative'
},
searchIcon: {
fill: 'white',
padding: '0px'
},
searchIconContainer: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: '0px 8px 0px 24px'
},
searchResultList: {
display: 'flex',
flexWrap: 'wrap'
},
searchResults: {
position: 'absolute',
top: 48,
left: 0,
right: 0,
maxWidth: 673,
maxHeight: getSearchResultsHeight(),
overflow: 'auto',
transition: 'padding-top .3s cubic-bezier(0.39, -0.04, 0.2, 1), padding-bottom .3s cubic-bezier(0.39, -0.04, 0.2, 1), height .3s cubic-bezier(0.39, -0.04, 0.2, 1)',
boxSizing: 'border-box'
},
searchFieldInput: {
color: white
},
searchFieldHintText: {
color: 'rgba(255, 255, 255, 0.5)'
},
menuItemLink: {
padding: '1rem',
display: 'flex',
width: MENU_ITEM_WIDTH,
height: MENU_ITEM_WIDTH,
boxSizing: 'border-box',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
textDecoration: 'none',
color: black,
fontSize: '1rem'
},
menuItemIcon: {
height: 48,
width: 48
},
menuItemLabel: {
flex: '1 1 auto',
maxWidth: '100%',
textAlign: 'center'
},
moreAppsButton: {
marginTop: '1rem',
width: '100%',
display: 'block',
textAlign: 'center'
},
moreAppsButtonWrap: {
width: '100%',
padding: '1rem',
boxSizing: 'border-box'
},
clearIcon: {
fill: 'white',
position: 'absolute',
top: '10px',
right: '5px'
},
notifications: {
display: 'flex',
flexDirection: 'row'
},
profileRightSide: {
flex: 1,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: '1rem',
justifyContent: 'space-between',
borderLeft: '1px solid #CCC',
backgroundColor: '#F5F5F5'
},
profileFlexWrap: {
display: 'flex',
alignItems: 'center',
flexDirection: 'column'
},
profileName: {
width: '100%',
marginTop: '1rem',
lineHeight: '1.5rem',
fontWeight: 'bold',
textAlign: 'center',
wordBreak: 'break-word'
},
profileMail: {
width: '100%',
lineHeight: '1.5rem',
textAlign: 'center',
wordBreak: 'break-all'
},
logoutButton: {
width: '100%',
textAlign: 'center'
},
profileMenu: {
flexDirection: 'row',
width: 600,
padding: '0'
}
};
export default styles;