Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Add config to include custom CSS

Browse Source 
Summary:
Adds a new environment variable that allows for custom
CSS to be included in all core static pages.

Test Plan: Tested manually in grist-core.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D3419
This commit is contained in:
George Gevoian 2022-05-11 23:08:06 -07:00
parent e6983e9209
commit 524dbf34e1
9 changed files with 61 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -192,6 +192,7 @@ ALLOWED_WEBHOOK_DOMAINS | comma-separated list of permitted domains to use in we
APP_DOC_URL | doc worker url, set when starting an individual doc worker (other servers will find doc worker urls via redis)
APP_HOME_URL | url prefix for home api (home and doc servers need this)
APP_STATIC_URL | url prefix for static resources
APP_STATIC_INCLUDE_CUSTOM_CSS | set to "true" to include custom.css (from APP_STATIC_URL) in static pages
APP_UNTRUSTED_URL | URL at which to serve/expect plugin content.
GRIST_ADAPT_DOMAIN | set to "true" to support multiple base domains (careful, host header should be trustworthy)
GRIST_APP_ROOT | directory containing Grist sandbox and assets (specifically the sandbox and static subdirectories).

2
app/client/ui/AppHeader.ts
View File

@ -98,7 +98,7 @@ const cssAppLogo = styled('a', `
height: 48px;
width: 48px;
background-image: var(--icon-GristLogo);
background-size: 22px 22px;
background-size: ${vars.logoSize};
background-repeat: no-repeat;
background-position: center;
background-color: ${vars.logoBg};

1
app/client/ui2018/cssVars.ts
View File

@ -110,6 +110,7 @@ export const vars = {
controlBorderRadius: new CustomProp('border-radius', '4px'),
logoBg: new CustomProp('logo-bg', '#040404'),
logoSize: new CustomProp('logo-size', '22px 22px'),
toastBg: new CustomProp('toast-bg', '#040404'),
};

12
app/server/lib/ICreate.ts
View File

@ -29,6 +29,9 @@ export interface ICreate {
sessionSecret(): string;
// Get configuration information to show at start-up.
configurationOptions(): {[key: string]: any};
// Return a string containing 1 or more HTML tags to insert into the head element of every
// static page.
getExtraHeadHtml?(): string;
}
export interface ICreateActiveDocOptions {
@ -90,6 +93,13 @@ export function makeSimpleCreator(opts: {
if (config) { return config; }
}
return {};
}
},
getExtraHeadHtml() {
let customHeadHtmlSnippet = '';
if (process.env.APP_STATIC_INCLUDE_CUSTOM_CSS === 'true') {
customHeadHtmlSnippet += '<link rel="stylesheet" href="custom.css">';
}
return customHeadHtmlSnippet;
},
};
}

2
app/server/lib/sendAppPage.ts
View File

@ -90,10 +90,12 @@ export function makeSendAppPage(opts: {
const tagManagerSnippet = needTagManager ? getTagManagerSnippet(process.env.GOOGLE_TAG_MANAGER_ID) : '';
const staticOrigin = process.env.APP_STATIC_URL || "";
const staticBaseUrl = `${staticOrigin}/v/${options.tag || tag}/`;
const customHeadHtmlSnippet = server?.create.getExtraHeadHtml?.() ?? "";
const warning = testLogin ? "<div class=\"dev_warning\">Authentication is not enforced</div>" : "";
const content = fileContent
.replace("<!-- INSERT WARNING -->", warning)
.replace("<!-- INSERT BASE -->", `<base href="${staticBaseUrl}">` + tagManagerSnippet)
.replace("<!-- INSERT CUSTOM -->", customHeadHtmlSnippet)
.replace("<!-- INSERT CONFIG -->", `<script>window.gristConfig = ${JSON.stringify(config)};</script>`);
resp.status(options.status).type('html').send(content);
};

1
static/account.html
View File

@ -5,6 +5,7 @@
<!-- INSERT BASE -->
<link rel="icon" type="image/x-icon" href="icons/favicon.png" />
<link rel="stylesheet" href="icons/icons.css">
<!-- INSERT CUSTOM -->
<title>Grist</title>
</head>
<body>

1
static/app.html
View File

@ -13,6 +13,7 @@
<link rel="stylesheet" href="bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css">
<link rel="stylesheet" href="bundle.css">
<link rel="stylesheet" href="icons/icons.css">
<!-- INSERT CUSTOM -->
<title>Grist</title>
</head>

42
static/custom.css Normal file
View File

@ -0,0 +1,42 @@
:root {
/* logo */
--icon-GristLogo: url("ui-icons/Logo/GristLogo.svg") !important;
--grist-logo-bg: #040404 !important;
--grist-logo-size: 22px 22px !important;
/* colors */
--grist-color-light-grey: #F7F7F7 !important;
--grist-color-medium-grey: rgba(217,217,217,0.6) !important;
--grist-color-medium-grey-opaque: #E8E8E8 !important;
--grist-color-dark-grey: #D9D9D9 !important;
--grist-color-light: #FFFFFF !important;
--grist-color-dark: #262633 !important;
--grist-color-dark-bg: #262633 !important;
--grist-color-slate: #929299 !important;
--grist-color-light-green: #16B378 !important;
--grist-color-dark-green: #009058 !important;
--grist-color-darker-green: #007548 !important;
--grist-color-lighter-green: #b1ffe2 !important;
--grist-color-lighter-blue: #87b2f9 !important;
--grist-color-light-blue: #3B82F6 !important;
--grist-color-cursor: #16B378 !important;
--grist-color-selection: rgba(22,179,120,0.15) !important;
--grist-color-selection-opaque: #DCF4EB !important;
--grist-color-selection-darker-opaque: #d6eee5 !important;
--grist-color-inactive-cursor: #A2E1C9 !important;
--grist-color-hover: #bfbfbf !important;
--grist-color-error: #D0021B !important;
--grist-color-warning: #F9AE41 !important;
--grist-color-warning-bg: #dd962c !important;
--grist-color-backdrop: rgba(38,38,51,0.9) !important;
--grist-label-text-bg: #FFFFFF !important;
--grist-label-active-bg: #F0F0F0 !important;
--grist-primary-fg: #16B378 !important;
--grist-primary-fg-hover: #009058 !important;
--grist-primary-bg: #ffffff !important;
--grist-control-bg: #ffffff !important;
--grist-control-fg: #16B378 !important;
--grist-primary-fg-hover: #009058 !important;
--grist-control-border: 1px solid #11B683 !important;
--grist-toast-bg: #040404 !important;
}

1
static/error.html
View File

@ -5,6 +5,7 @@
<!-- INSERT BASE -->
<link rel="icon" type="image/x-icon" href="icons/favicon.png" />
<link rel="stylesheet" href="icons/icons.css">
<!-- INSERT CUSTOM -->
<title>Grist</title>
</head>
<body>