From 2a978c4313a3bdb8cd1d05ace22bc6ff26907897 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jaros=C5=82aw=20Sadzi=C5=84ski?= Date: Fri, 11 Oct 2024 15:37:53 +0200 Subject: [PATCH] (core) Change default team logo Summary: Also fixes a bug that prevented drag and drop from working in BillingLogoEditor, and tweaks the hover state of AppHeader to only activate when the cursor is over the dropdown menu, and not the logo. Test Plan: Manual. 1. Wide logo tests with url http://localhost:8080/o/docs?__themeOrg=fieldlink 2. Avatar on home screen for personal site 3. Avatar on doc screen for personal site 4. Avatar on doc screen with hidden left drawer on doc page 5. Same tests but with personal image 6. Same tests but with custom logo uploaded 7. All above tests but with dark theme 8. All above but on mobile. Reviewers: georgegevoian Reviewed By: georgegevoian Differential Revision: https://phab.getgrist.com/D4378 --- app/client/ui/AppHeader.ts | 72 ++++++++++++++++++++++----------- app/client/ui/UserImage.ts | 17 -------- app/client/ui2018/cssVars.ts | 2 +- app/common/ThemePrefs-ti.ts | 2 +- app/common/ThemePrefs.ts | 2 +- app/common/themes/GristDark.ts | 4 +- app/common/themes/GristLight.ts | 2 +- 7 files changed, 55 insertions(+), 46 deletions(-) diff --git a/app/client/ui/AppHeader.ts b/app/client/ui/AppHeader.ts index c125185d..f011a7a2 100644 --- a/app/client/ui/AppHeader.ts +++ b/app/client/ui/AppHeader.ts @@ -16,7 +16,7 @@ import {Computed, Disposable, dom, DomContents, styled} from 'grainjs'; import {makeT} from 'app/client/lib/localization'; import {getGristConfig} from 'app/common/urlUtils'; import {makeTestId} from 'app/client/lib/domUtils'; -import {createTeamImage, createUserImage, cssUserImage} from 'app/client/ui/UserImage'; +import {createUserImage, cssUserImage} from 'app/client/ui/UserImage'; const t = makeT('AppHeader'); const testId = makeTestId('test-dm-'); @@ -89,9 +89,7 @@ export class AppHeader extends Disposable { : createUserImage(this._appModel.currentValidUser, 'medium', variant()); // Team avatar is shown only for team sites (even for anonymous users). - const teamAvatar = () => !this._currentOrg - ? cssAppLogo.cls('-grist-logo') - : createTeamImage(this._currentOrg, 'medium', variant()); + const teamAvatar = () => cssAppLogo.cls('-grist-logo'); // Depending on site the avatar is either personal or team. const avatar = () => this._appModel.isPersonal @@ -285,6 +283,7 @@ const cssAppHeader = styled('div._cssAppHeader', ` background-color: ${theme.leftPanelBg}; padding: 0px; padding: 8px; + .${cssLeftPane.className}-open & { padding: 8px 16px; } @@ -305,10 +304,10 @@ const cssAppHeaderBox = styled('div._cssAppHeaderBox', ` height: 100%; overflow: hidden; background-color: ${theme.appHeaderBg}; - border: 1px solid ${theme.appHeaderBorder}; border-radius: 4px; - &:hover { - background-color: ${theme.appHeaderHoverBg}; + overflow: hidden; + &:hover{ + --middle-border-color: ${theme.appHeaderBorderHover}; } .${cssAppHeader.className}-widelogo & { border: none !important; @@ -326,6 +325,11 @@ const cssAppLogo = styled('a._cssAppLogo', ` background-color: inherit; background-size: cover; + border: 1px solid ${theme.appHeaderBorder}; + border-radius: 4px; + overflow: hidden; + border-right-color: var(--middle-border-color, ${theme.appHeaderBorder}); + &-grist-logo { background-image: var(--icon-GristLogo); background-color: ${vars.logoBg}; @@ -339,14 +343,44 @@ const cssAppLogo = styled('a._cssAppLogo', ` padding: 8px; border-right: none !important; background-size: contain; + border: 0px !important; } .${cssLeftPane.className}-open .${cssAppHeader.className}-widelogo & { background-image: var(--icon-GristWideLogo, var(--icon-GristLogo)); background-size: contain; } &:hover { + border-color: ${theme.appHeaderBorderHover}; text-decoration: none; } + .${cssLeftPane.className}-open & { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +`); + +const cssOrg = styled('div._cssOrg', ` + display: none; + flex-grow: 1; + flex-basis: 0px; + overflow: hidden; + align-items: center; + cursor: pointer; + height: 100%; + font-weight: 500; + + border: 1px solid ${theme.appHeaderBorder}; + border-radius: 4px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: 0px; + + &:hover { + border-color: ${theme.appHeaderBorderHover}; + } + .${cssLeftPane.className}-open & { + display: flex; + } `); const cssDropdownIcon = styled(icon, ` @@ -361,32 +395,24 @@ const cssSpacer = styled('div', ` display: block; `); -const cssOrg = styled('div._cssOrg', ` - display: none; - flex-grow: 1; - flex-basis: 0px; - overflow: hidden; - align-items: center; - cursor: pointer; - height: 100%; - font-weight: 500; - .${cssLeftPane.className}-open & { - display: flex; - border-left: 1px solid ${theme.appHeaderBorder}; - } -`); - const cssOrgLink = styled('a.cssOrgLink', ` display: none; flex-grow: 1; align-items: center; - max-width: calc(100% - 48px); + max-width: calc(100% - 32px); cursor: pointer; height: 100%; font-weight: 500; color: ${theme.text}; user-select: none; + + border: 1px solid ${theme.appHeaderBorder}; + border-radius: 4px; + border-left-width: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + &, &:hover, &:focus { text-decoration: none; } diff --git a/app/client/ui/UserImage.ts b/app/client/ui/UserImage.ts index 0bf61f54..087713ae 100644 --- a/app/client/ui/UserImage.ts +++ b/app/client/ui/UserImage.ts @@ -5,16 +5,6 @@ import {icon} from 'app/client/ui2018/icons'; export type Size = 'small' | 'medium' | 'large'; -interface OrgProperties { - name: string; - domain: string|null; -} - -/** Helper wrapper around OrgProfile that converts it to UserProfile */ -function OrgUser(org: OrgProperties): UserProfile { - return {name: org.name, email: org.domain || ''}; -} - /** * Returns a DOM element showing a circular icon with a user's picture, or the user's initials if * picture is missing. Also varies the color of the circle when using initials. @@ -45,13 +35,6 @@ export function createUserImage( ); } -/** - * Returns a DOM element showing team's initials as a circular icon. - */ -export function createTeamImage(org: OrgProperties, size: Size, ...args: DomElementArg[]): HTMLElement { - return createUserImage(OrgUser(org), size, ...args); -} - /** * Extracts initials from a user, e.g. a FullUser. E.g. "Foo Bar" is turned into "FB", and * "foo@example.com" into just "f". diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts index 4cbe8573..5aaa4a02 100644 --- a/app/client/ui2018/cssVars.ts +++ b/app/client/ui2018/cssVars.ts @@ -907,7 +907,7 @@ export const theme = { /* App Header */ appHeaderBg: new CustomProp('theme-app-header-bg', undefined, colors.light), appHeaderBorder: new CustomProp('theme-app-header-border', undefined, colors.mediumGreyOpaque), - appHeaderHoverBg: new CustomProp('theme-app-header-hover-bg', undefined, colors.hover), + appHeaderBorderHover: new CustomProp('theme-app-header-border-hover', undefined, colors.slate), }; const cssColors = values(colors).map(v => v.decl()).join('\n'); diff --git a/app/common/ThemePrefs-ti.ts b/app/common/ThemePrefs-ti.ts index 87a080ee..6d5409da 100644 --- a/app/common/ThemePrefs-ti.ts +++ b/app/common/ThemePrefs-ti.ts @@ -452,8 +452,8 @@ export const ThemeColors = t.iface([], { "markdown-cell-light-border": "string", "markdown-cell-medium-border": "string", "app-header-bg": "string", - "app-header-hover-bg": "string", "app-header-border": "string", + "app-header-border-hover": "string", }); const exportedTypeSuite: t.ITypeSuite = { diff --git a/app/common/ThemePrefs.ts b/app/common/ThemePrefs.ts index c64642d9..4f5a251f 100644 --- a/app/common/ThemePrefs.ts +++ b/app/common/ThemePrefs.ts @@ -592,8 +592,8 @@ export interface ThemeColors { /* App Header */ 'app-header-bg': string; - 'app-header-hover-bg': string; 'app-header-border': string; + 'app-header-border-hover': string; } export const ThemePrefsChecker = createCheckers(ThemePrefsTI).ThemePrefs as CheckerT; diff --git a/app/common/themes/GristDark.ts b/app/common/themes/GristDark.ts index 22159f46..0e734e54 100644 --- a/app/common/themes/GristDark.ts +++ b/app/common/themes/GristDark.ts @@ -571,6 +571,6 @@ export const GristDark: ThemeColors = { /* App Header */ 'app-header-bg': '#32323F', - 'app-header-border': '#FFFFFF00', - 'app-header-hover-bg': 'rgba(111,111,125,0.6)', + 'app-header-border': '#32323f', + 'app-header-border-hover': '#78788c', }; diff --git a/app/common/themes/GristLight.ts b/app/common/themes/GristLight.ts index e172b340..c82e0bc0 100644 --- a/app/common/themes/GristLight.ts +++ b/app/common/themes/GristLight.ts @@ -572,5 +572,5 @@ export const GristLight: ThemeColors = { /* App header */ 'app-header-bg': 'var(--grist-theme-page-panels-main-panel-bg)', 'app-header-border': 'var(--grist-theme-menu-border)', - 'app-header-hover-bg': 'var(--grist-theme-hover)', + 'app-header-border-hover': '#B0B0B0', };