IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

[MM-51805 + MM-51806 + MM-51041] Work template: multiple UI fixes (#22862)

Browse Source
This commit is contained in:
Julien Tant
2023-04-19 14:52:21 -07:00
committed by yasserfaraazkhan
parent efa976cbfd
commit 7c60637cab
5 changed files with 62 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
webapp/channels/src/components/work_templates/components/customize.tsx
View File

@@ -165,7 +165,8 @@ const StyledCustomized = styled(Customize)`
border-radius: 4px;
border: 1px solid rgba(var(--center-channel-text-rgb), 0.16);
&:focus {
border: 2px solid var(--button-bg);
border: 1px solid var(--button-bg);
box-shadow: inset 0 0 0 1px var(--button-bg);
}
}

13
webapp/channels/src/components/work_templates/components/preview.tsx
View File

@@ -51,7 +51,8 @@ const Preview = ({template, className, pluginsEnabled}: PreviewProps) => {
const [integrations, setIntegrations] = useState<Integration[]>();
const plugins: MarketplacePlugin[] = useSelector((state: GlobalState) => state.views.marketplace.plugins);
const marketplacePlugins: MarketplacePlugin[] = useSelector((state: GlobalState) => state.views.marketplace.plugins);
const loadedPlugins = useSelector((state: GlobalState) => state.plugins.plugins);
const [illustrationDetails, setIllustrationDetails] = useState<IllustrationAnimations>(() => {
const defaultIllustration = getTemplateDefaultIllustration(template);
@@ -130,13 +131,14 @@ const Preview = ({template, className, pluginsEnabled}: PreviewProps) => {
const intg =
availableIntegrations?.
flatMap((integration) => {
return plugins.reduce((acc: Integration[], curr) => {
return marketplacePlugins.reduce((acc: Integration[], curr) => {
if (curr.manifest.id === integration.id) {
const installed = Boolean(loadedPlugins[integration.id]);
acc.push({
...integration,
name: curr.manifest.name,
icon: curr.icon_data,
installed: curr.installed_version !== '',
installed,
});
return acc;
@@ -149,7 +151,7 @@ const Preview = ({template, className, pluginsEnabled}: PreviewProps) => {
if (intg?.length) {
setIntegrations(intg);
}
}, [plugins, availableIntegrations, pluginsEnabled]);
}, [marketplacePlugins, availableIntegrations, loadedPlugins, pluginsEnabled]);
// building accordion items
const accordionItemsData: AccordionItemType[] = [];
@@ -204,7 +206,7 @@ const Preview = ({template, className, pluginsEnabled}: PreviewProps) => {
)],
});
}
if (integrations?.length && pluginsEnabled) {
if (pluginsEnabled && integrations?.length) {
accordionItemsData.push({
id: 'integrations',
icon: <i className='icon-power-plug-outline'/>,
@@ -303,6 +305,7 @@ const StyledPreview = styled(Preview)`
width: 387px;
height: 416px;
padding-right: 32px;
margin-top: 17px;
}
strong {

3
webapp/channels/src/components/work_templates/components/preview/accordion.tsx
View File

@@ -12,6 +12,7 @@ const Accordion = styled(LibAccordion)`
.accordion-card {
margin-bottom: 8px;
border-radius: 4px;
border: 1px solid transparent;
color: var(--center-channel-color);
.accordion-card-header {
@@ -46,7 +47,7 @@ const Accordion = styled(LibAccordion)`
}
&.active {
border: 1px solid var(--denim-button-bg);
border-color: var(--denim-button-bg);
.accordion-card-header {
color: var(--denim-button-bg);

61
webapp/channels/src/components/work_templates/components/preview/section.tsx
View File

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React, {ReactNode, useEffect, useState} from 'react';
import React, {ReactNode, useCallback, useEffect, useState} from 'react';
import {useIntl} from 'react-intl';
import classnames from 'classnames';
import styled from 'styled-components';
@@ -110,6 +110,28 @@ const IntegrationsPreview = ({items, categoryId}: IntegrationPreviewSectionProps
id: 'work_templates.preview.integrations.admin_install.notify',
defaultMessage: 'Notify admin to install integrations.',
});
const makeIntegrationSubtext = useCallback((integration: IntegrationPreviewSectionItemsProps) => {
if (integration.installed) {
return formatMessage({
id: 'work_templates.preview.integrations.already_installed',
defaultMessage: 'Already installed',
});
}
if (!pluginInstallationPossible) {
return formatMessage({
id: 'work_templates.preview.integrations.app_install',
defaultMessage: 'App Install',
});
}
return formatMessage({
id: 'work_templates.preview.integrations.to_be_installed',
defaultMessage: 'To be installed',
});
}, [pluginInstallationPossible, formatMessage]);
return (
<div className='preview-integrations'>
<div className='preview-integrations-plugins'>
@@ -119,15 +141,17 @@ const IntegrationsPreview = ({items, categoryId}: IntegrationPreviewSectionProps
key={item.id}
className={classnames('preview-integrations-plugins-item', {'preview-integrations-plugins-item__readonly': !item.installed && !pluginInstallationPossible})}
>
<div className='preview-integrations-plugins-item__icon'>
<div className='preview-integrations-plugins-item__illustration'>
<img src={item.icon}/>
</div>
<div className='preview-integrations-plugins-item__name'>
{item.name}
{item.name}<br/>
<span className='preview-integrations-plugins-item__name-sub'>
{makeIntegrationSubtext(item)}
</span>
</div>
{item.installed &&
<div className='icon-check-circle preview-integrations-plugins-item__icon_blue'/>}
{!item.installed && <div className='icon-download-outline'/>}
<div className='preview-integrations-plugins-item__icon icon-check-circle preview-integrations-plugins-item__icon_blue'/>}
</div>);
})}
</div>
@@ -205,6 +229,7 @@ const StyledPreviewSection = styled(PreviewSection)`
&-item {
display: flex;
align-items: center;
width: 128px;
height: 48px;
flex-basis: 45%;
@@ -215,7 +240,7 @@ const StyledPreviewSection = styled(PreviewSection)`
opacity: 65%;
}
&__icon {
&__illustration {
display: flex;
width: 24px;
height: 24px;
@@ -227,22 +252,30 @@ const StyledPreviewSection = styled(PreviewSection)`
width: 100%;
height: 100%;
}
&_blue {
color: var(--denim-button-bg);
}
}
&__name {
flex-grow: 2;
margin-top: 8px;
color: var(--center-channel-text);
font-family: 'Open Sans';
font-size: 11px;
font-style: normal;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 22px;
line-height: 16px;
&-sub {
color: rgba(var(--center-channel-color-rgb), 0.72);
font-weight: 400;
font-size: 10px;
}
}
&__icon {
align-self: flex-start;
&_blue {
color: var(--denim-button-bg);
}
}
}
}
@@ -264,8 +297,8 @@ const StyledPreviewSection = styled(PreviewSection)`
}
.icon-check-circle::before {
margin-top: 8px;
margin-right: 8px;
margin-top: 2px;
margin-right: 2px;
}
.icon-download-outline::before {

3
webapp/channels/src/i18n/en.json
View File

@@ -5784,6 +5784,9 @@
"work_templates.preview.integrations.admin_install.multiple_plugin": "Integrations will not be added until admin installs them.",
"work_templates.preview.integrations.admin_install.notify": "Notify admin to install integrations",
"work_templates.preview.integrations.admin_install.single_plugin": "{plugin} will not be added until admin installs it.",
"work_templates.preview.integrations.already_installed": "Already installed",
"work_templates.preview.integrations.app_install": "App Install",
"work_templates.preview.integrations.to_be_installed": "To be installed",
"work_templates.preview.modal_cancel_button": "Back",
"work_templates.preview.modal_next_button": "Next",
"work_templates.preview.modal_title": "Preview {useCase}",