Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: code and UI alignment to the design system's new version #94

Merged
merged 9 commits into from
Sep 5, 2022
Merged

feat: code and UI alignment to the design system's new version #94

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
32bc3a4
feat: code and UI alignment to the design system's new version
gnekoz Jun 15, 2022
baaf959
fix: added zindex to BadgeWrapper
giuliano176 Jun 20, 2022
32db7c7
Merge remote-tracking branch 'origin' into refactored_design_system_i…
gnekoz Jun 28, 2022
bfcf475
Merge remote-tracking branch 'origin/devel' into refactored_design_sy…
gnekoz Jul 19, 2022
bf1b213
Merge remote-tracking branch 'origin' into refactored_design_system_i…
gnekoz Aug 3, 2022
2c7179b
chore: progress save
gnekoz Aug 5, 2022
258b371
chore: progress save
gnekoz Aug 5, 2022
ac113a6
Merge remote-tracking branch 'origin' into refactored_design_system_i…
gnekoz Aug 19, 2022
7e04f22
chore: merge recent changes from devel
gnekoz Sep 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/globals.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
39 changes: 26 additions & 13 deletions src/reporting/feedback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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%;
`;

Expand All @@ -74,17 +76,23 @@ 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)<LabelContainerProps>`
border-bottom: 1px solid
${({ theme, disabled }): string =>
disabled ? theme.palette.error.regular : theme.palette.gray2.regular};
`;

const emptyEvent: Event = {
Expand Down Expand Up @@ -128,10 +136,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 }) => (
<LabelContainer
orientation="horizontal"
width="fill"
Expand All @@ -142,6 +151,7 @@ const ModuleLabelFactory: FC<{
padding={{
all: 'small'
}}
disabled={disabled}
>
<Row takeAvailableSpace mainAlignment="unset">
<Text size="medium" color={open || focus ? 'primary' : 'secondary'}>
Expand Down Expand Up @@ -309,7 +319,7 @@ const Feedback: FC = () => {
<Container padding={{ all: 'large' }} mainAlignment="space-around">
<Container orientation="horizontal" height="fit">
<TextContainer mainAlignment="flex-start" crossAlignment="flex-start">
<Text weight="bold" size="18px">
<Text weight="bold" size="large">
{t('feedback.report_something', 'Do you want to report something?')}
</Text>
<SubHeadingText overflow="break-word" lineHeight="21px">
Expand Down Expand Up @@ -343,27 +353,30 @@ const Feedback: FC = () => {
>
<Container mainAlignment="space-between" crossAlignment="flex-start" maxWidth="305px">
<Row padding={{ vertical: 'large' }}>
<Text weight="bold" size="14px">
<Text weight="bold" size="small">
Module
</Text>
</Row>
<Select
label={t('feedback.select_a_module', 'Select a module')}
items={appItems}
defaultSelection={{ label: '', value: '' }}
onChange={onAppSelect}
LabelFactory={ModuleLabelFactory}
/>
</Container>
<Container mainAlignment="space-between" crossAlignment="flex-start" maxWidth="305px">
<Row padding={{ vertical: 'large' }}>
<Text weight="bold" size="14px">
<Text weight="bold" size="small">
Topic
</Text>
</Row>
<Select
label={t('feedback.select_a_topic', 'Select a topic')}
selection={find(topics, ['value', event.extra?.topic])}
items={topics}
defaultSelection={
find(topics, ['value', event.extra?.topic]) ?? { label: '', value: '' }
}
onChange={onTopicSelect}
LabelFactory={LabelFactory}
multiple={false}
Expand Down
7 changes: 4 additions & 3 deletions src/search/module-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@ import { useSearchStore } from './search-store';
import { SEARCH_APP_ID } from '../constants';
import { pushHistory } from '../history/hooks';

const SelectorContainer = styled(Container)<{ open: boolean }>`
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};
}
Expand Down Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions src/search/search-app-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const useDisableSearch = (): [boolean, Function] =>
const ResultsHeader: FC<{ label: string }> = ({ label }) => {
const [t] = useTranslation();
const [query, updateQuery] = useQuery();
const [disabled, setDisabled] = useDisableSearch();
const [, setDisabled] = useDisableSearch();

const resetQuery = useCallback(() => {
updateQuery([]);
Expand Down Expand Up @@ -62,7 +62,7 @@ const ResultsHeader: FC<{ label: string }> = ({ label }) => {
label={t('label.clear_search_query', 'CLEAR SEARCH')}
icon="CloseOutline"
color="primary"
size="large"
width="fill"
type="ghost"
onClick={resetQuery}
/>
Expand Down
41 changes: 29 additions & 12 deletions src/search/search-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import {
Container,
IconButton,
Tooltip,
Padding
Padding,
ChipItem
} from '@zextras/carbonio-design-system';
import { useTranslation } from 'react-i18next';
import { filter, find, map, reduce } from 'lodash';
Expand All @@ -29,7 +30,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;
}
Expand Down Expand Up @@ -65,7 +66,7 @@ export const SearchBar: FC<SearchBarProps> = ({
// secondaryActions
}) => {
const [searchIsEnabled, setSearchIsEnabled] = useState(false);
const inputRef = useRef<HTMLInputElement>();
const inputRef = useRef<HTMLInputElement>(null);
const [t] = useTranslation();
const [storedValue, setStoredValue] = useLocalStorage<SearchLocalStorage>(
'search_suggestions',
Expand All @@ -81,7 +82,9 @@ export const SearchBar: FC<SearchBarProps> = ({
const [isTyping, setIsTyping] = useState(false);
// const [changedBySearchBar, setChangedBySearchBar] = useState(false);

const [options, setOptions] = useState<Array<{ label: string; hasAvatar: false }>>([]);
const [options, setOptions] = useState<Array<{ id: string; label: string; hasAvatar: false }>>(
[]
);

const [inputHasFocus, setInputHasFocus] = useState(false);

Expand Down Expand Up @@ -111,7 +114,11 @@ export const SearchBar: FC<SearchBarProps> = ({
if (inputTyped.length > 0) {
const newInputState = [
...inputState,
...map(inputTyped?.split(' '), (item) => ({ label: item, hasAvatar: false }))
...map(inputTyped?.split(' '), (label: string, id: number) => ({
id: `${id}`,
label,
hasAvatar: false
}))
];
setInputState(newInputState);
setInputTyped('');
Expand Down Expand Up @@ -244,7 +251,7 @@ export const SearchBar: FC<SearchBarProps> = ({
}, [appSuggestions, module]);

const [triggerSearch, setTriggerSearch] = useState(false);
const containerRef = useRef<HTMLDivElement>();
const containerRef = useRef<HTMLDivElement>(null);
const addFocus = useCallback(() => setInputHasFocus(true), []);
const removeFocus = useCallback(() => setInputHasFocus(false), []);

Expand Down Expand Up @@ -335,7 +342,7 @@ export const SearchBar: FC<SearchBarProps> = ({
}, [t, searchIsEnabled, inputState.length, inputHasFocus, query.length]);

const onChipAdd = useCallback(
(newChip: string) => {
(newChip: string | unknown): ChipItem => {
setIsTyping(false);
setInputTyped('');
if (module) {
Expand All @@ -347,9 +354,9 @@ export const SearchBar: FC<SearchBarProps> = ({
setOptions(suggestions);
}
return {
label: newChip.trim(),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess the trimming of chips is already handled in DS ChipInput

hasAvatar: false,
avatarLabel: ''
label: typeof newChip === 'string' ? newChip : '',
value: newChip,
hasAvatar: false
};
},
[appSuggestions, module]
Expand All @@ -362,7 +369,7 @@ export const SearchBar: FC<SearchBarProps> = ({
const disableClearButton = useMemo(() => (isTyping ? false : !showClear), [showClear, isTyping]);

return (
<Container orientation="horizontal" minWidth="0" ref={containerRef}>
<Container width="fit" flexGrow="1" orientation="horizontal" minWidth="0" ref={containerRef}>
<Tooltip
disabled={!searchDisabled}
maxWidth="100%"
Expand All @@ -387,7 +394,7 @@ export const SearchBar: FC<SearchBarProps> = ({
placeholder={placeholder}
confirmChipOnBlur={false}
confirmChipOnSpace={false}
separators={['Comma']}
separators={['Enter', 'NumpadEnter', 'Comma']}
background={searchDisabled ? 'gray5' : 'gray6'}
style={{
cursor: 'pointer',
Expand All @@ -409,6 +416,11 @@ export const SearchBar: FC<SearchBarProps> = ({
<Padding left="small">
<Tooltip label={clearButtonPlaceholder} placement="bottom">
<OutlinedIconButton
size="large"
customSize={{
iconSize: 'large',
paddingSize: 'small'
}}
disabled={disableClearButton}
icon="BackspaceOutline"
iconColor="primary"
Expand All @@ -426,6 +438,11 @@ export const SearchBar: FC<SearchBarProps> = ({
placement="bottom"
>
<IconButton
size="large"
customSize={{
iconSize: 'large',
paddingSize: 'small'
}}
icon="Search"
disabled={!(searchIsEnabled && inputState.length > 0)}
backgroundColor="primary"
Expand Down
11 changes: 2 additions & 9 deletions src/settings/accounts-settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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<Mods>({});
const [activeDelegateView, setActiveDelegateView] = useState('0');
const [selectedIdentityId, setSelectedIdentityId] = useState(0);
const [identities, setIdentities] = useState<IdentityProps[]>(identitiesDefault);
const [delegates, setDelegates] = useState<DelegateProps[]>([]);
const [delegates, setDelegates] = useState<DelegateType[]>([]);

const maxIdentities = useUserSettings().attrs.zimbraIdentityMaxNumEntries;
const addMod = useCallback(
Expand Down
23 changes: 6 additions & 17 deletions src/settings/components/account-settings/accounts-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,13 @@ 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 { map, filter, max, noop } from 'lodash';
import { IdentityProps, CreateIdentityProps } from '../../../../types';

type AccountsListProps = {
Expand All @@ -30,16 +31,6 @@ type AccountsListProps = {
createIdentities: (createList: { prefs: CreateIdentityProps }[]) => void;
};

type ListItemProps = {
active: boolean;
item: IdentityProps;
selected: boolean;
setSelected: () => void;
background: string;
selectedBackground: string;
activeBackground: string;
};

const AccountsList = ({
t,
selectedIdentityId,
Expand All @@ -51,7 +42,7 @@ const AccountsList = ({
}: AccountsListProps): ReactElement => {
const changeView = (value: number): void => setSelectedIdentityId(value);

const ListItem = ({ item }: ListItemProps): ReactElement => (
const ListItem = ({ item }: ItemComponentProps<IdentityProps>): ReactElement => (
<>
<Container
onClick={(): void => {
Expand Down Expand Up @@ -228,8 +219,6 @@ const AccountsList = ({
ItemComponent={ListItem}
active={identities[selectedIdentityId]?.id}
height="fit"
selectedIdentityId={selectedIdentityId}
setSelectedIdentityId={setSelectedIdentityId}
/>
</Container>
<Row
Expand All @@ -241,7 +230,7 @@ const AccountsList = ({
<Padding right="small">
<Button
label={t('label.add_external_account', 'Add external account')}
// onClick={(): void => setSelectedIdentity({ type: 'POP' })}
onClick={noop}
color="primary"
type="outlined"
disabled
Expand Down
Loading