From 27fa510c14c41a3f2dcd1c7806210398f8a63f7d Mon Sep 17 00:00:00 2001 From: Cyril Gromoff Date: Tue, 3 Sep 2024 13:45:06 +0200 Subject: [PATCH 1/3] new SVG in channel search, light and dark theme Changelog: fixed --- .../common/svg_images_components/index.ts | 2 + .../infomaniak_channel_search_dark_svg.tsx | 62 +++++++++++++++++ .../infomaniak_channel_search_light_svg.tsx | 68 +++++++++++++++++++ .../no_results_indicator.tsx | 3 +- .../theme_channel_search_icon.tsx | 22 ++++++ 5 files changed, 156 insertions(+), 1 deletion(-) create mode 100644 webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_dark_svg.tsx create mode 100644 webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_light_svg.tsx create mode 100644 webapp/channels/src/components/no_results_indicator/theme_channel_search_icon.tsx diff --git a/webapp/channels/src/components/common/svg_images_components/index.ts b/webapp/channels/src/components/common/svg_images_components/index.ts index 847706bc16..689a95e558 100644 --- a/webapp/channels/src/components/common/svg_images_components/index.ts +++ b/webapp/channels/src/components/common/svg_images_components/index.ts @@ -9,3 +9,5 @@ export {PinSVG} from './pin_svg'; export {ChannelFilesSVG} from './channel_files_svg'; export {UserGroupsSVG} from './user_groups_svg'; export {UserGroupMembersSVG} from './user_groups_members_svg'; +export {InfomaniakChannelSearchLightSvg} from './infomaniak_channel_search_light_svg'; +export {InfomaniakChannelSearchDarkSvg} from './infomaniak_channel_search_dark_svg'; diff --git a/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_dark_svg.tsx b/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_dark_svg.tsx new file mode 100644 index 0000000000..1b57baa914 --- /dev/null +++ b/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_dark_svg.tsx @@ -0,0 +1,62 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {useIntl} from 'react-intl'; + +export function InfomaniakChannelSearchDarkSvg(props: React.HTMLAttributes) { + const {formatMessage} = useIntl(); + return ( + + + + + + + + + + + + + + + + + + ); +} diff --git a/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_light_svg.tsx b/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_light_svg.tsx new file mode 100644 index 0000000000..80a265f541 --- /dev/null +++ b/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_light_svg.tsx @@ -0,0 +1,68 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import {useIntl} from 'react-intl'; + +export function InfomaniakChannelSearchLightSvg(props: React.HTMLAttributes) { + const {formatMessage} = useIntl(); + return ( + + + + + + + + + + + + + + + + + + + ); +} diff --git a/webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx b/webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx index c83083987c..caa7abff86 100644 --- a/webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx +++ b/webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx @@ -14,6 +14,7 @@ import {SearchSVG, ChannelSearchSVG, MentionsSVG, SavedMessagesSVG, PinSVG, Chan import {t} from 'utils/i18n'; +import ThemedChannelSearchIcon from './theme_channel_search_icon'; import {NoResultsVariant, NoResultsLayout} from './types'; import './no_results_indicator.scss'; @@ -33,7 +34,7 @@ interface Props { const iconMap: {[key in NoResultsVariant]: React.ReactNode } = { [NoResultsVariant.Search]: , - [NoResultsVariant.ChannelSearch]: , + [NoResultsVariant.ChannelSearch]: , // Utilisation du composant thématisé [NoResultsVariant.Files]: , [NoResultsVariant.Mentions]: , diff --git a/webapp/channels/src/components/no_results_indicator/theme_channel_search_icon.tsx b/webapp/channels/src/components/no_results_indicator/theme_channel_search_icon.tsx new file mode 100644 index 0000000000..ea2eff32d9 --- /dev/null +++ b/webapp/channels/src/components/no_results_indicator/theme_channel_search_icon.tsx @@ -0,0 +1,22 @@ +import type {HTMLAttributes} from 'react'; +import React from 'react'; +import {useSelector} from 'react-redux'; + +import type {Theme} from 'mattermost-redux/selectors/entities/preferences'; +import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; + +import {InfomaniakChannelSearchLightSvg, InfomaniakChannelSearchDarkSvg} from 'components/common/svg_images_components'; + +const ThemedChannelSearchIcon = (props: HTMLAttributes) => { + const theme: Theme = useSelector(getTheme); + + const isDarkTheme = theme.ksuiteTheme === 'light'; + + return isDarkTheme ? ( + + ) : ( + + ); +}; + +export default ThemedChannelSearchIcon; From 5668512e6cbc327797d1a737a7e60432b73c1733 Mon Sep 17 00:00:00 2001 From: Cyril Gromoff Date: Mon, 9 Sep 2024 16:33:13 +0200 Subject: [PATCH 2/3] wip : change infomaniak implementation --- .../common/svg_images_components/index.ts | 3 +- .../infomaniak_channel_search_dark_svg.tsx | 62 ------------------- ....tsx => infomaniak_channel_search_svg.tsx} | 33 +++++----- .../no_results_indicator.tsx | 5 +- .../theme_channel_search_icon.tsx | 22 ------- .../src/sass/base/_css_variables.scss | 2 + 6 files changed, 19 insertions(+), 108 deletions(-) delete mode 100644 webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_dark_svg.tsx rename webapp/channels/src/components/common/svg_images_components/{infomaniak_channel_search_light_svg.tsx => infomaniak_channel_search_svg.tsx} (77%) delete mode 100644 webapp/channels/src/components/no_results_indicator/theme_channel_search_icon.tsx diff --git a/webapp/channels/src/components/common/svg_images_components/index.ts b/webapp/channels/src/components/common/svg_images_components/index.ts index 689a95e558..94976b10ad 100644 --- a/webapp/channels/src/components/common/svg_images_components/index.ts +++ b/webapp/channels/src/components/common/svg_images_components/index.ts @@ -9,5 +9,4 @@ export {PinSVG} from './pin_svg'; export {ChannelFilesSVG} from './channel_files_svg'; export {UserGroupsSVG} from './user_groups_svg'; export {UserGroupMembersSVG} from './user_groups_members_svg'; -export {InfomaniakChannelSearchLightSvg} from './infomaniak_channel_search_light_svg'; -export {InfomaniakChannelSearchDarkSvg} from './infomaniak_channel_search_dark_svg'; +export {InfomaniakChannelSearchSvg} from './infomaniak_channel_search_svg'; diff --git a/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_dark_svg.tsx b/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_dark_svg.tsx deleted file mode 100644 index 1b57baa914..0000000000 --- a/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_dark_svg.tsx +++ /dev/null @@ -1,62 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; -import {useIntl} from 'react-intl'; - -export function InfomaniakChannelSearchDarkSvg(props: React.HTMLAttributes) { - const {formatMessage} = useIntl(); - return ( - - - - - - - - - - - - - - - - - - ); -} diff --git a/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_light_svg.tsx b/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_svg.tsx similarity index 77% rename from webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_light_svg.tsx rename to webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_svg.tsx index 80a265f541..52b3b597be 100644 --- a/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_light_svg.tsx +++ b/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_svg.tsx @@ -1,10 +1,7 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. +import React from "react"; +import { useIntl } from "react-intl"; -import React from 'react'; -import {useIntl} from 'react-intl'; - -export function InfomaniakChannelSearchLightSvg(props: React.HTMLAttributes) { +export function InfomaniakChannelSearchSvg(props: React.HTMLAttributes) { const {formatMessage} = useIntl(); return ( @@ -19,36 +16,35 @@ export function InfomaniakChannelSearchLightSvg(props: React.HTMLAttributes + fill='#7BB4D1' /> @@ -62,7 +58,6 @@ export function InfomaniakChannelSearchLightSvg(props: React.HTMLAttributes - ); } diff --git a/webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx b/webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx index caa7abff86..aaccda8271 100644 --- a/webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx +++ b/webapp/channels/src/components/no_results_indicator/no_results_indicator.tsx @@ -10,11 +10,10 @@ import {FormattedMessage} from 'react-intl'; import ChannelFilesIcon from 'components/widgets/icons/channel_files_icon'; import IKFlagIcon from 'components/widgets/icons/ik_flag_icon'; import PinIcon from 'components/widgets/icons/pin_icon'; -import {SearchSVG, ChannelSearchSVG, MentionsSVG, SavedMessagesSVG, PinSVG, ChannelFilesSVG, UserGroupsSVG, UserGroupMembersSVG} from 'components/common/svg_images_components'; +import {SearchSVG, ChannelSearchSVG, MentionsSVG, SavedMessagesSVG, PinSVG, ChannelFilesSVG, UserGroupsSVG, UserGroupMembersSVG, InfomaniakChannelSearchSvg} from 'components/common/svg_images_components'; import {t} from 'utils/i18n'; -import ThemedChannelSearchIcon from './theme_channel_search_icon'; import {NoResultsVariant, NoResultsLayout} from './types'; import './no_results_indicator.scss'; @@ -34,7 +33,7 @@ interface Props { const iconMap: {[key in NoResultsVariant]: React.ReactNode } = { [NoResultsVariant.Search]: , - [NoResultsVariant.ChannelSearch]: , // Utilisation du composant thématisé + [NoResultsVariant.ChannelSearch]: , // Utilisation du composant thématisé [NoResultsVariant.Files]: , [NoResultsVariant.Mentions]: , diff --git a/webapp/channels/src/components/no_results_indicator/theme_channel_search_icon.tsx b/webapp/channels/src/components/no_results_indicator/theme_channel_search_icon.tsx deleted file mode 100644 index ea2eff32d9..0000000000 --- a/webapp/channels/src/components/no_results_indicator/theme_channel_search_icon.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type {HTMLAttributes} from 'react'; -import React from 'react'; -import {useSelector} from 'react-redux'; - -import type {Theme} from 'mattermost-redux/selectors/entities/preferences'; -import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; - -import {InfomaniakChannelSearchLightSvg, InfomaniakChannelSearchDarkSvg} from 'components/common/svg_images_components'; - -const ThemedChannelSearchIcon = (props: HTMLAttributes) => { - const theme: Theme = useSelector(getTheme); - - const isDarkTheme = theme.ksuiteTheme === 'light'; - - return isDarkTheme ? ( - - ) : ( - - ); -}; - -export default ThemedChannelSearchIcon; diff --git a/webapp/channels/src/sass/base/_css_variables.scss b/webapp/channels/src/sass/base/_css_variables.scss index 81b0e5adce..a64a318391 100644 --- a/webapp/channels/src/sass/base/_css_variables.scss +++ b/webapp/channels/src/sass/base/_css_variables.scss @@ -37,6 +37,8 @@ --dark-modal-font-color:#fff; --code-color: #f80; --code-block-color: #fff; + --no-results-light: #F1F1F1 + --no-results-dark: #9F9F9F // Default RGB values to be replaced by applyTheme() (do not add opacity mutations here) // these are define to prevent flashes of unstyled content From 8ea3362b653c231f9c67ee37892e04bb6f9fc737 Mon Sep 17 00:00:00 2001 From: Cyril Gromoff Date: Tue, 10 Sep 2024 09:24:15 +0200 Subject: [PATCH 3/3] remove unnecessary svg component and use var to handle changing theme on it --- .../infomaniak_channel_search_svg.tsx | 27 ++++++++++--------- .../src/sass/base/_css_variables.scss | 3 +-- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_svg.tsx b/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_svg.tsx index 52b3b597be..5bd45eb5f7 100644 --- a/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_svg.tsx +++ b/webapp/channels/src/components/common/svg_images_components/infomaniak_channel_search_svg.tsx @@ -1,5 +1,5 @@ -import React from "react"; -import { useIntl } from "react-intl"; +import React from 'react'; +import {useIntl} from 'react-intl'; export function InfomaniakChannelSearchSvg(props: React.HTMLAttributes) { const {formatMessage} = useIntl(); @@ -16,35 +16,36 @@ export function InfomaniakChannelSearchSvg(props: React.HTMLAttributes + fill='#7BB4D1' + /> diff --git a/webapp/channels/src/sass/base/_css_variables.scss b/webapp/channels/src/sass/base/_css_variables.scss index a64a318391..8bdc78b96c 100644 --- a/webapp/channels/src/sass/base/_css_variables.scss +++ b/webapp/channels/src/sass/base/_css_variables.scss @@ -37,8 +37,6 @@ --dark-modal-font-color:#fff; --code-color: #f80; --code-block-color: #fff; - --no-results-light: #F1F1F1 - --no-results-dark: #9F9F9F // Default RGB values to be replaced by applyTheme() (do not add opacity mutations here) // these are define to prevent flashes of unstyled content @@ -126,4 +124,5 @@ --ik-illustration-grey-15: #F1F1F1; --ik-illustration-grey-16: #F1F1F1; --ik-illustration-grey-17: #F5F5F5; + --ik-illustration-grey-18: #9F9F9F; }