From 32bc3a41b599cb46a77e35c7577d5f4c4033f993 Mon Sep 17 00:00:00 2001 From: Luca Stauble Date: Wed, 15 Jun 2022 15:06:55 +0200 Subject: [PATCH 1/4] feat: code and UI alignment to the design system's new version --- src/globals.d.ts | 2 +- src/reporting/feedback.tsx | 37 ++++--- src/search/module-selector.tsx | 7 +- src/search/search-app-view.tsx | 11 ++- src/search/search-bar.tsx | 27 +++-- src/settings/accounts-settings.tsx | 11 +-- .../account-settings/accounts-list.tsx | 15 ++- .../account-settings/advanced-settings.tsx | 8 +- .../components/account-settings/delegates.tsx | 51 +++++----- .../account-settings/download-messages.tsx | 11 +-- .../external-account-settings.tsx | 32 ++---- .../password-recovery-settings.tsx | 19 ++-- .../account-settings/persona-settings.tsx | 6 +- .../account-settings/persona-use-section.tsx | 13 +-- .../primary-account-settings.tsx | 24 +---- .../settings-sent-messages.tsx | 75 +++++--------- .../folder-select-modal/modal-footer.tsx | 24 +++-- .../folder-select-modal/modal-header.tsx | 13 +-- .../general-settings/appearance-settings.tsx | 1 + .../components/general-settings/logout.tsx | 2 +- .../general-settings/user-quota.tsx | 3 +- src/settings/components/settings-header.tsx | 2 +- src/settings/components/settings-heading.tsx | 2 +- src/settings/components/utils.ts | 22 +++-- .../language-and-timezone-settings.tsx | 30 +++--- src/settings/settings-sidebar.tsx | 19 ++-- src/shell/badge-wrap.tsx | 32 +++--- src/shell/boards/app-board-window.jsx | 2 +- src/shell/creation-button.tsx | 16 +-- src/shell/shell-header.tsx | 11 +-- src/shell/shell-primary-bar.tsx | 14 ++- src/shell/shell-secondary-bar.tsx | 4 +- src/ui-extras/spinner.tsx | 5 +- src/utility-bar/bar.tsx | 98 ++++++++++--------- src/utility-bar/panel.tsx | 2 +- src/utils/index.ts | 7 ++ translations/en.json | 1 + types/apps/index.d.ts | 4 +- types/integrations/index.d.ts | 6 +- types/search/items.d.ts | 1 + 40 files changed, 331 insertions(+), 339 deletions(-) create mode 100644 src/utils/index.ts diff --git a/src/globals.d.ts b/src/globals.d.ts index d24e112f..e65cbcc0 100644 --- a/src/globals.d.ts +++ b/src/globals.d.ts @@ -35,6 +35,6 @@ type cliSettingsNamespace = { */ declare const devUtils: devUtilsNamespace | undefined; declare const cliSettings: cliSettingsNamespace | undefined; -declare module '@zextras/carbonio-design-system'; +// declare module '@zextras/carbonio-design-system'; declare module 'tinymce'; declare module '*.svg'; diff --git a/src/reporting/feedback.tsx b/src/reporting/feedback.tsx index 589a1be9..804aca75 100644 --- a/src/reporting/feedback.tsx +++ b/src/reporting/feedback.tsx @@ -15,12 +15,14 @@ import React, { } from 'react'; import { Text, - Button, + ButtonOld as Button, Select, Container, Row, Icon, - SnackbarManagerContext + SnackbarManagerContext, + ContainerProps, + SelectItem } from '@zextras/carbonio-design-system'; import { Severity, Event } from '@sentry/browser'; import { filter, find, map } from 'lodash'; @@ -51,7 +53,7 @@ const TextArea = styled.textarea<{ size?: string }>` const TextContainer = styled(Container)` text-align: justify; - align-items: left; + align-items: flex-start; width: 80%; `; @@ -74,17 +76,21 @@ const TAContainer = styled(Container)` } `; -const SubHeadingText = styled(Text)` +const SubHeadingText = styled(Text)<{ lineHeight?: string }>` border-radius: 2px 2px 0 0; line-height: 21px; font-size: 14px; font-weight: 300; margin-top: 10px; - line-height: ${(props): string => props.lineHeight}; + line-height: ${({ lineHeight }): string => lineHeight ?? 'normal'}; `; -const LabelContainer = styled(Container)` - border-bottom: 1px solid ${(props): string => (props.disabled ? 'red' : '#cfd5dc')}; +interface LabelContainerProps extends ContainerProps { + disabled: boolean; +} + +const LabelContainer = styled(Container)` + border-bottom: 1px solid ${({ disabled }): string => (disabled ? 'red' : '#cfd5dc')}; `; const emptyEvent: Event = { @@ -128,10 +134,11 @@ const getTopics = (t: TFunction): Array<{ label: string; value: string }> => [ const ModuleLabelFactory: FC<{ selected: Array<{ label: string; value: string }>; - label: string; + label?: string; open: boolean; focus: boolean; -}> = ({ selected, label, open, focus }) => ( + disabled: boolean; +}> = ({ selected, label, open, focus, disabled }) => ( @@ -309,7 +317,7 @@ const Feedback: FC = () => { - + {t('feedback.report_something', 'Do you want to report something?')} @@ -343,27 +351,30 @@ const Feedback: FC = () => { > - + Module ` +const SelectorContainer = styled(Container)<{ open?: boolean }>` border-right: 1px solid ${({ theme }): string => theme.palette.gray4.regular}; - cursor: 'pointer'; + cursor: pointer; background: ${({ theme, open }): string => theme.palette[open ? 'gray5' : 'gray6'].regular}; + &:hover { background: ${({ theme, open }): string => theme.palette[open ? 'gray5' : 'gray6'].hover}; } @@ -70,7 +71,7 @@ export const ModuleSelector: FC<{ activeRoute: AppRoute; disabled: boolean }> = orientation="horizontal" height={42} width="fit" - minWidth="150px" + minWidth={150} crossAlignment="center" mainAlignment="space-between" borderRadius="half" diff --git a/src/search/search-app-view.tsx b/src/search/search-app-view.tsx index 5286c1f4..9150f2d6 100644 --- a/src/search/search-app-view.tsx +++ b/src/search/search-app-view.tsx @@ -7,7 +7,14 @@ import { map } from 'lodash'; import React, { FC, useCallback, useMemo } from 'react'; import { Redirect, Route, Switch } from 'react-router-dom'; -import { Container, Chip, Padding, Divider, Text, Button } from '@zextras/carbonio-design-system'; +import { + Container, + Chip, + Padding, + Divider, + Text, + ButtonOld as Button +} from '@zextras/carbonio-design-system'; import { useTranslation } from 'react-i18next'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore @@ -62,7 +69,7 @@ const ResultsHeader: FC<{ label: string }> = ({ label }) => { label={t('label.clear_search_query', 'CLEAR SEARCH')} icon="CloseOutline" color="primary" - size="large" + size="fill" type="ghost" onClick={resetQuery} /> diff --git a/src/search/search-bar.tsx b/src/search/search-bar.tsx index 99005592..cce5d687 100644 --- a/src/search/search-bar.tsx +++ b/src/search/search-bar.tsx @@ -29,7 +29,7 @@ const OutlinedIconButton = styled(IconButton)` border: 1px solid ${({ theme, disabled }): string => disabled ? theme.palette.primary.disabled : theme.palette.primary.regular}; - display: 'block'; + display: block; & svg { border: none; } @@ -65,7 +65,7 @@ export const SearchBar: FC = ({ // secondaryActions }) => { const [searchIsEnabled, setSearchIsEnabled] = useState(false); - const inputRef = useRef(); + const inputRef = useRef(null); const [t] = useTranslation(); const [storedValue, setStoredValue] = useLocalStorage( 'search_suggestions', @@ -81,7 +81,9 @@ export const SearchBar: FC = ({ const [isTyping, setIsTyping] = useState(false); // const [changedBySearchBar, setChangedBySearchBar] = useState(false); - const [options, setOptions] = useState>([]); + const [options, setOptions] = useState>( + [] + ); const [inputHasFocus, setInputHasFocus] = useState(false); @@ -111,7 +113,11 @@ export const SearchBar: FC = ({ if (inputTyped.length > 0) { const newInputState = [ ...inputState, - ...map(inputTyped?.split(' '), (item) => ({ label: item, hasAvatar: false })) + ...map(inputTyped?.split(' '), (item: string, id: number) => ({ + id: `${id}`, + label: item, + hasAvatar: false + })) ]; setInputState(newInputState); setInputTyped(''); @@ -244,7 +250,7 @@ export const SearchBar: FC = ({ }, [appSuggestions, module]); const [triggerSearch, setTriggerSearch] = useState(false); - const containerRef = useRef(); + const containerRef = useRef(null); const addFocus = useCallback(() => setInputHasFocus(true), []); const removeFocus = useCallback(() => setInputHasFocus(false), []); @@ -335,7 +341,7 @@ export const SearchBar: FC = ({ }, [t, searchIsEnabled, inputState.length, inputHasFocus, query.length]); const onChipAdd = useCallback( - (newChip: string) => { + (newChip: string | unknown) => { setIsTyping(false); setInputTyped(''); if (module) { @@ -347,7 +353,7 @@ export const SearchBar: FC = ({ setOptions(suggestions); } return { - label: newChip.trim(), + label: typeof newChip === 'string' ? newChip.trim() : '', hasAvatar: false, avatarLabel: '' }; @@ -362,7 +368,7 @@ export const SearchBar: FC = ({ const disableClearButton = useMemo(() => (isTyping ? false : !showClear), [showClear, isTyping]); return ( - + = ({ placement="bottom" > 0)} backgroundColor="primary" diff --git a/src/settings/accounts-settings.tsx b/src/settings/accounts-settings.tsx index 11684d35..9d4df510 100644 --- a/src/settings/accounts-settings.tsx +++ b/src/settings/accounts-settings.tsx @@ -17,7 +17,7 @@ import AccountsList from './components/account-settings/accounts-list'; import PrimaryAccountSettings from './components/account-settings/primary-account-settings'; import SettingsSentMessages from './components/account-settings/settings-sent-messages'; import PasswordRecoverySettings from './components/account-settings/password-recovery-settings'; -import Delegates from './components/account-settings/delegates'; +import Delegates, { DelegateType } from './components/account-settings/delegates'; import PersonaSettings from './components/account-settings/persona-settings'; import PersonaUseSection from './components/account-settings/persona-use-section'; import SettingsHeader from './components/settings-header'; @@ -41,19 +41,12 @@ type AccountSettingsProps = { }; type UserRightsProps = { email: string; right: string }; - -type DelegateProps = { - id: string; - email: string; - right: string; -}; - export const AccountsSettings = ({ identitiesDefault, t }: AccountSettingsProps): ReactElement => { const [mods, setMods] = useState({}); const [activeDelegateView, setActiveDelegateView] = useState('0'); const [selectedIdentityId, setSelectedIdentityId] = useState(0); const [identities, setIdentities] = useState(identitiesDefault); - const [delegates, setDelegates] = useState([]); + const [delegates, setDelegates] = useState([]); const maxIdentities = useUserSettings().attrs.zimbraIdentityMaxNumEntries; const addMod = useCallback( diff --git a/src/settings/components/account-settings/accounts-list.tsx b/src/settings/components/account-settings/accounts-list.tsx index ddc1103d..160aeab6 100644 --- a/src/settings/components/account-settings/accounts-list.tsx +++ b/src/settings/components/account-settings/accounts-list.tsx @@ -4,7 +4,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import React, { useCallback, ReactElement, useState, useContext } from 'react'; +import React, { useCallback, ReactElement, useState, useContext, FC } from 'react'; import { Container, Text, @@ -12,13 +12,15 @@ import { Divider, Row, Padding, - Button, + ButtonOld as Button, Icon, - ModalManagerContext + ModalManagerContext, + ItemComponentProps } from '@zextras/carbonio-design-system'; import { TFunction } from 'i18next'; import { map, filter, max } from 'lodash'; import { IdentityProps, CreateIdentityProps } from '../../../../types'; +import { emptyFunction } from '../../../utils'; type AccountsListProps = { t: TFunction; @@ -34,7 +36,6 @@ type ListItemProps = { active: boolean; item: IdentityProps; selected: boolean; - setSelected: () => void; background: string; selectedBackground: string; activeBackground: string; @@ -51,7 +52,7 @@ const AccountsList = ({ }: AccountsListProps): ReactElement => { const changeView = (value: number): void => setSelectedIdentityId(value); - const ListItem = ({ item }: ListItemProps): ReactElement => ( + const ListItem = ({ item }: ItemComponentProps): ReactElement => ( <> { @@ -228,8 +229,6 @@ const AccountsList = ({ ItemComponent={ListItem} active={identities[selectedIdentityId]?.id} height="fit" - selectedIdentityId={selectedIdentityId} - setSelectedIdentityId={setSelectedIdentityId} />