From 524dbf34e18c9a37470f351c2a9667a2a6723274 Mon Sep 17 00:00:00 2001 From: George Gevoian Date: Wed, 11 May 2022 23:08:06 -0700 Subject: [PATCH] (core) Add config to include custom CSS 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 --- README.md | 1 + app/client/ui/AppHeader.ts | 2 +- app/client/ui2018/cssVars.ts | 1 + app/server/lib/ICreate.ts | 12 +++++++++- app/server/lib/sendAppPage.ts | 2 ++ static/account.html | 1 + static/app.html | 1 + static/custom.css | 42 +++++++++++++++++++++++++++++++++++ static/error.html | 1 + 9 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 static/custom.css diff --git a/README.md b/README.md index bff6ecd5..9adafaec 100644 --- a/README.md +++ b/README.md @@ -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). diff --git a/app/client/ui/AppHeader.ts b/app/client/ui/AppHeader.ts index 9bf02740..0024b0c2 100644 --- a/app/client/ui/AppHeader.ts +++ b/app/client/ui/AppHeader.ts @@ -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}; diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts index 2337e549..b5eb67c4 100644 --- a/app/client/ui2018/cssVars.ts +++ b/app/client/ui2018/cssVars.ts @@ -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'), }; diff --git a/app/server/lib/ICreate.ts b/app/server/lib/ICreate.ts index a00897c8..6f57df4a 100644 --- a/app/server/lib/ICreate.ts +++ b/app/server/lib/ICreate.ts @@ -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 += ''; + } + return customHeadHtmlSnippet; + }, }; } diff --git a/app/server/lib/sendAppPage.ts b/app/server/lib/sendAppPage.ts index 265fadf8..c45b6d7e 100644 --- a/app/server/lib/sendAppPage.ts +++ b/app/server/lib/sendAppPage.ts @@ -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 ? "
Authentication is not enforced
" : ""; const content = fileContent .replace("", warning) .replace("", `` + tagManagerSnippet) + .replace("", customHeadHtmlSnippet) .replace("", ``); resp.status(options.status).type('html').send(content); }; diff --git a/static/account.html b/static/account.html index 65a09718..d0520b78 100644 --- a/static/account.html +++ b/static/account.html @@ -5,6 +5,7 @@ + Grist diff --git a/static/app.html b/static/app.html index c62d76bf..54a75830 100644 --- a/static/app.html +++ b/static/app.html @@ -13,6 +13,7 @@ + Grist diff --git a/static/custom.css b/static/custom.css new file mode 100644 index 00000000..fc5f332c --- /dev/null +++ b/static/custom.css @@ -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; +} diff --git a/static/error.html b/static/error.html index 101134f1..08a81286 100644 --- a/static/error.html +++ b/static/error.html @@ -5,6 +5,7 @@ + Grist