You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.7 KiB
61 lines
1.7 KiB
4 years ago
|
import {urlState} from 'app/client/models/gristUrlState';
|
||
|
|
import {getTheme, ProductFlavor} from 'app/client/ui/CustomThemes';
|
||
|
|
import {cssLeftPane} from 'app/client/ui/PagePanels';
|
||
|
|
import {colors, testId, vars} from 'app/client/ui2018/cssVars';
|
||
|
|
import * as version from 'app/common/version';
|
||
|
|
import {BindableValue, dom, styled} from "grainjs";
|
||
|
|
|
||
|
|
export function appHeader(orgName: BindableValue<string>, productFlavor: ProductFlavor) {
|
||
|
|
const theme = getTheme(productFlavor);
|
||
|
|
return cssAppHeader(
|
||
|
|
urlState().setLinkUrl({}),
|
||
|
|
cssAppHeader.cls('-widelogo', theme.wideLogo || false),
|
||
|
|
// Show version when hovering over the application icon.
|
||
|
|
cssAppLogo({title: `Ver ${version.version} (${version.gitcommit})`}),
|
||
|
|
cssOrgName(dom.text(orgName)),
|
||
|
|
testId('dm-org'),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const cssAppHeader = styled('a', `
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
align-items: center;
|
||
|
|
&, &:hover, &:focus {
|
||
|
|
text-decoration: none;
|
||
|
|
outline: none;
|
||
|
|
color: ${colors.dark};
|
||
|
|
}
|
||
|
|
`);
|
||
|
|
|
||
|
|
const cssAppLogo = styled('div', `
|
||
|
|
flex: none;
|
||
|
|
height: 48px;
|
||
|
|
width: 48px;
|
||
|
|
background-image: var(--icon-GristLogo);
|
||
|
|
background-size: 22px 22px;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
background-color: ${vars.logoBg};
|
||
|
|
.${cssAppHeader.className}-widelogo & {
|
||
|
|
width: 100%;
|
||
|
|
background-size: contain;
|
||
|
|
background-origin: content-box;
|
||
|
|
padding: 8px;
|
||
|
|
}
|
||
|
|
.${cssLeftPane.className}-open .${cssAppHeader.className}-widelogo & {
|
||
|
|
background-image: var(--icon-GristWideLogo, var(--icon-GristLogo));
|
||
|
|
}
|
||
|
|
`);
|
||
|
|
|
||
|
|
const cssOrgName = styled('div', `
|
||
|
|
padding: 0px 16px;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
.${cssAppHeader.className}-widelogo & {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
`);
|