diff --git a/docs/configuration-customizations.md b/docs/configuration-customizations.md index 0fb8d3c75..58b3a84e7 100644 --- a/docs/configuration-customizations.md +++ b/docs/configuration-customizations.md @@ -61,6 +61,15 @@ customizaiton: By default, Turnilo uses 10 different colors for series. But it is possible to define more and Turnilo will adjust necessary split limits. +### Hide Info & Feedback Links + +Turnilo allows you to hide 'Info & Feedback' links from the header and the side nav bar using the following config. + +```yaml +customization: + hideInfoAndFeedback: true +``` + ### Logo Turnilo allows you to set custom customize logo icon by supplying an SVG string respectively. @@ -75,6 +84,13 @@ customization: ``` +You can also remove 'Turnilo' and use a custom header text instead of a SVG logo by passing following string. + +```yaml +customization: + customLogoText: Analytics Demo +``` + ### Header color Turnilo allows you to set custom header background color supplying a string with CSS color. diff --git a/src/client/components/nav-logo/nav-logo.scss b/src/client/components/nav-logo/nav-logo.scss index a9e1e3e5f..36b36d2b8 100644 --- a/src/client/components/nav-logo/nav-logo.scss +++ b/src/client/components/nav-logo/nav-logo.scss @@ -34,6 +34,9 @@ .logo { left: $nav-padding; + @include css-variable(color, brand); + font-weight: bold; + font-size: 20px; } .close-icon { diff --git a/src/client/components/nav-logo/nav-logo.tsx b/src/client/components/nav-logo/nav-logo.tsx index 0e0ace985..f3b39bd40 100644 --- a/src/client/components/nav-logo/nav-logo.tsx +++ b/src/client/components/nav-logo/nav-logo.tsx @@ -17,15 +17,27 @@ import React from "react"; import { SvgIcon } from "../svg-icon/svg-icon"; +import { isNil } from "../../../common/utils/general/general"; import "./nav-logo.scss"; export interface NavLogoProps { - customLogoSvg: string; + customLogoSvg?: string; + customLogoText?: string; } -export const NavLogo: React.FunctionComponent = ({ customLogoSvg }) => +export const NavLogo: React.FunctionComponent = ({ customLogoSvg, customLogoText }) => { + var logo; + if (!isNil(customLogoText)) { + logo = {customLogoText} + } else if (!isNil(customLogoSvg)) { + logo = + } else { + return null; + } + return (
- + {logo}
-
; + ); +} diff --git a/src/client/components/side-drawer/side-drawer.tsx b/src/client/components/side-drawer/side-drawer.tsx index b2d287a59..e69dc980f 100644 --- a/src/client/components/side-drawer/side-drawer.tsx +++ b/src/client/components/side-drawer/side-drawer.tsx @@ -78,8 +78,8 @@ export class SideDrawer extends React.Component; + if (!customization.customLogoSvg && !customization.customLogoText) return null; + return ; } private renderHomeLink() { @@ -152,11 +152,12 @@ export class SideDrawer extends React.Component {this.renderNavLogo()} {this.renderHomeLink()} {this.renderDataCubes()} - + { !customization.hideInfoAndFeedback && } ; } } diff --git a/src/client/deserializers/app-settings.ts b/src/client/deserializers/app-settings.ts index 574a1312b..1141f08f3 100644 --- a/src/client/deserializers/app-settings.ts +++ b/src/client/deserializers/app-settings.ts @@ -33,7 +33,7 @@ export function deserialize({ oauth, clientTimeout, customization, version }: Se */ export function serialize(appSettings: ClientAppSettings): SerializedAppSettings { const { clientTimeout, version, customization, oauth } = appSettings; - const { visualizationColors, messages, customLogoSvg, hasUrlShortener, locale, headerBackground, sentryDSN, timezones, externalViews } = customization; + const { visualizationColors, messages, customLogoText, customLogoSvg, hasUrlShortener, locale, headerBackground, sentryDSN, timezones, externalViews } = customization; return { clientTimeout, @@ -42,6 +42,7 @@ export function serialize(appSettings: ClientAppSettings): SerializedAppSettings customization: { visualizationColors, messages, + customLogoText, customLogoSvg, locale, hasUrlShortener, diff --git a/src/client/deserializers/customization.ts b/src/client/deserializers/customization.ts index 3d09dd1ff..a00759f3c 100644 --- a/src/client/deserializers/customization.ts +++ b/src/client/deserializers/customization.ts @@ -19,10 +19,12 @@ import { ClientCustomization, SerializedCustomization } from "../../common/model import { deserialize as deserializeLocale } from "../../common/models/locale/locale"; export function deserialize(customization: SerializedCustomization): ClientCustomization { - const { headerBackground, messages, locale, customLogoSvg, timezones, externalViews, hasUrlShortener, sentryDSN, visualizationColors } = customization; + const { headerBackground, messages, locale, customLogoText, customLogoSvg, hideInfoAndFeedback, timezones, externalViews, hasUrlShortener, sentryDSN, visualizationColors } = customization; return { headerBackground, + customLogoText, customLogoSvg, + hideInfoAndFeedback, externalViews, hasUrlShortener, sentryDSN, diff --git a/src/client/views/home-view/home-view.tsx b/src/client/views/home-view/home-view.tsx index 5cf1d297d..25b460296 100644 --- a/src/client/views/home-view/home-view.tsx +++ b/src/client/views/home-view/home-view.tsx @@ -18,7 +18,7 @@ import React from "react"; import { ClientCustomization } from "../../../common/models/customization/customization"; import { ClientDataCube } from "../../../common/models/data-cube/data-cube"; -import { Fn } from "../../../common/utils/general/general"; +import { Fn, isNil } from "../../../common/utils/general/general"; import { ClearableInput } from "../../components/clearable-input/clearable-input"; import { HeaderBar } from "../../components/header-bar/header-bar"; import { EmptyDataCubeList } from "../../components/no-data/empty-data-cube-list"; @@ -73,15 +73,19 @@ export class HomeView extends React.Component { } render() { - const { onOpenAbout, dataCubes } = this.props; + const { onOpenAbout, dataCubes, customization } = this.props; const { query } = this.state; const hasDataCubes = dataCubes.length > 0; + const titleString = isNil(customization.customLogoText) ? STRINGS.home : customization.customLogoText; + return
- - + + { !customization.hideInfoAndFeedback && + + }
diff --git a/src/common/models/customization/customization.ts b/src/common/models/customization/customization.ts index 242363361..287c27a1b 100644 --- a/src/common/models/customization/customization.ts +++ b/src/common/models/customization/customization.ts @@ -111,7 +111,9 @@ interface Messages { export interface Customization { title?: string; headerBackground?: string; + customLogoText?: string; customLogoSvg?: string; + hideInfoAndFeedback?: boolean; externalViews: ExternalView[]; timezones: Timezone[]; urlShortener?: UrlShortener; @@ -126,7 +128,9 @@ export interface CustomizationJS { title?: string; locale?: LocaleJS; headerBackground?: string; + customLogoText?: string; customLogoSvg?: string; + hideInfoAndFeedback?: boolean; externalViews?: ExternalViewValue[]; timezones?: string[]; urlShortener?: UrlShortenerDef; @@ -138,7 +142,9 @@ export interface CustomizationJS { export interface SerializedCustomization { headerBackground?: string; + customLogoText?: string; customLogoSvg?: string; + hideInfoAndFeedback?: boolean; timezones: string[]; externalViews: ExternalViewValue[]; hasUrlShortener: boolean; @@ -150,7 +156,9 @@ export interface SerializedCustomization { export interface ClientCustomization { headerBackground?: string; + customLogoText?: string; customLogoSvg?: string; + hideInfoAndFeedback?: boolean; timezones: Timezone[]; externalViews: ExternalViewValue[]; hasUrlShortener: boolean; @@ -184,7 +192,9 @@ export function fromConfig(config: CustomizationJS = {}, logger: Logger): Custom const { title = DEFAULT_TITLE, headerBackground, + customLogoText, customLogoSvg, + hideInfoAndFeedback: configHideInfoAndFeedback, externalViews: configExternalViews, timezones: configTimezones, urlShortener, @@ -204,10 +214,14 @@ export function fromConfig(config: CustomizationJS = {}, logger: Logger): Custom const visualizationColors = readVisualizationColors(config); + const hideInfoAndFeedback = isNil(configHideInfoAndFeedback) ? false : configHideInfoAndFeedback; + return { title, headerBackground, + customLogoText, customLogoSvg, + hideInfoAndFeedback, sentryDSN, cssVariables: verifyCssVariables(cssVariables, logger), urlShortener: urlShortenerFromConfig(urlShortener), @@ -220,9 +234,11 @@ export function fromConfig(config: CustomizationJS = {}, logger: Logger): Custom } export function serialize(customization: Customization): SerializedCustomization { - const { customLogoSvg, timezones, headerBackground, locale, externalViews, sentryDSN, urlShortener, messages, visualizationColors } = customization; + const { customLogoText, customLogoSvg, hideInfoAndFeedback, timezones, headerBackground, locale, externalViews, sentryDSN, urlShortener, messages, visualizationColors } = customization; return { + customLogoText, customLogoSvg, + hideInfoAndFeedback, externalViews, hasUrlShortener: isTruthy(urlShortener), headerBackground,