From 6529192273e374b466ee4993bbd19024943cb76f Mon Sep 17 00:00:00 2001 From: Eugene Olonov Date: Thu, 22 Dec 2022 15:36:01 -0800 Subject: [PATCH 1/2] feat: reflow improvements --- .../src/components/CollapseField.tsx | 2 +- .../packages/client/src/components/Page.tsx | 2 +- .../adapters/ExternalAdapterSettings.tsx | 8 +++-- .../RuntimeOutputLog/OutputTabContent.tsx | 6 ++-- .../client/src/pages/design/DesignPage.tsx | 6 ++-- .../client/src/pages/design/styles.ts | 5 ---- .../src/pages/form-dialog/FormDialogPage.tsx | 2 +- .../packages/client/src/pages/home/styles.ts | 29 +++++++++---------- .../client/src/pages/publish/Publish.tsx | 24 +++++++++++---- .../client/src/pages/setting/SettingsPage.tsx | 2 +- Composer/packages/client/src/router.tsx | 2 +- .../electron-server/locales/en-US.json | 2 +- .../packages/server/src/locales/en-US.json | 6 ++++ .../packageManager/src/components/styles.ts | 2 +- .../packageManager/src/pages/Library.tsx | 21 +++++++++----- 15 files changed, 71 insertions(+), 48 deletions(-) diff --git a/Composer/packages/adaptive-form/src/components/CollapseField.tsx b/Composer/packages/adaptive-form/src/components/CollapseField.tsx index 08e8bbab75..5af271887b 100644 --- a/Composer/packages/adaptive-form/src/components/CollapseField.tsx +++ b/Composer/packages/adaptive-form/src/components/CollapseField.tsx @@ -29,7 +29,7 @@ const styles = { display: flex; margin: 4px -18px; align-items: center; - width: 100%; + width: auto; `, }; diff --git a/Composer/packages/client/src/components/Page.tsx b/Composer/packages/client/src/components/Page.tsx index 9293de7a12..0b497269d8 100644 --- a/Composer/packages/client/src/components/Page.tsx +++ b/Composer/packages/client/src/components/Page.tsx @@ -187,7 +187,7 @@ const Page: React.FC = (props) => { resetOnDoubleClick initialPrimarySize="20%" minPrimarySize="200px" - minSecondarySize="800px" + minSecondarySize="750px" renderSplitter={renderThinSplitter} onMeasuredSizesChanged={onMeasuredSizesChanged} > diff --git a/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx b/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx index 31b28a6f70..bdca947b95 100644 --- a/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx +++ b/Composer/packages/client/src/pages/botProject/adapters/ExternalAdapterSettings.tsx @@ -2,7 +2,7 @@ // Licensed under the MIT License. /** @jsx jsx */ -import { jsx } from '@emotion/react'; +import { jsx, css } from '@emotion/react'; import { useState, Fragment } from 'react'; import formatMessage from 'format-message'; import { useRecoilValue } from 'recoil'; @@ -29,6 +29,10 @@ type Package = { packageName?: string; }; +const tableOverflowStyle = css` + overflow: hidden; +`; + const ExternalAdapterSettings = (props: Props) => { const { projectId } = props; @@ -54,7 +58,7 @@ const ExternalAdapterSettings = (props: Props) => { if (schemaDefinitions == null) return null; const externalServices = (schemas: (JSONSchema7 & Package)[]) => ( -
+
{formatMessage('Name')} diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/RuntimeOutputLog/OutputTabContent.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/RuntimeOutputLog/OutputTabContent.tsx index 28f1056fb9..28dedf3c52 100644 --- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/RuntimeOutputLog/OutputTabContent.tsx +++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/RuntimeOutputLog/OutputTabContent.tsx @@ -112,9 +112,9 @@ export const OutputsTabContent: React.FC = ({ isActive > diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx index 57af157738..19d478ac35 100644 --- a/Composer/packages/client/src/pages/design/DesignPage.tsx +++ b/Composer/packages/client/src/pages/design/DesignPage.tsx @@ -47,7 +47,7 @@ const DesignPage: React.FC diff --git a/Composer/packages/client/src/pages/design/styles.ts b/Composer/packages/client/src/pages/design/styles.ts index 015df4f43d..8e5b8ed37e 100644 --- a/Composer/packages/client/src/pages/design/styles.ts +++ b/Composer/packages/client/src/pages/design/styles.ts @@ -76,11 +76,6 @@ export const splitPaneWrapper = css` flex-grow: 1; overflow: hidden; height: 100%; - @media screen and (max-width: 1080px) { - .secondary { - padding-right: 40px; - } - } `; export const visualPanel = css` diff --git a/Composer/packages/client/src/pages/form-dialog/FormDialogPage.tsx b/Composer/packages/client/src/pages/form-dialog/FormDialogPage.tsx index c0a751ba2b..acb7c974a9 100644 --- a/Composer/packages/client/src/pages/form-dialog/FormDialogPage.tsx +++ b/Composer/packages/client/src/pages/form-dialog/FormDialogPage.tsx @@ -198,7 +198,7 @@ const FormDialogPage: React.FC = React.memo((props: Props) => { resetOnDoubleClick initialPrimarySize="320px" minPrimarySize="320px" - minSecondarySize="800px" + minSecondarySize="630px" renderSplitter={renderThinSplitter} onMeasuredSizesChanged={onMeasuredSizesChanged} > diff --git a/Composer/packages/client/src/pages/home/styles.ts b/Composer/packages/client/src/pages/home/styles.ts index e726e0f7ba..8e99e84ec8 100644 --- a/Composer/packages/client/src/pages/home/styles.ts +++ b/Composer/packages/client/src/pages/home/styles.ts @@ -29,6 +29,8 @@ export const leftPage = css` padding: 0 24px 24px 24px; display: flex; flex-direction: column; + max-width: 100%; + overflow: hidden; `; export const rightPage = css` @@ -36,8 +38,9 @@ export const rightPage = css` padding-right: 24px; display: flex; flex-direction: column; - position: sticky; - left: 0; + @media (max-width: 1024px) { + flex: 50%; + } `; export const title = css` @@ -64,6 +67,9 @@ export const introduction = css` export const rowContainer = css` display: flex; margin-top: 12px; + overflow-x: auto; + padding-bottom: 12px; + gap: 12px; `; export const recentBotsContainer = css` @@ -88,9 +94,11 @@ export const pivotContainer = css` `; export const tabRowContainer = css` - flex-wrap: wrap; display: flex; clear: both; + overflow-x: auto; + padding-bottom: 12px; + gap: 12px; `; export const tabRowViewMore = css` @@ -109,7 +117,8 @@ export const tabRowViewMore = css` export const cardWrapper = css` display: flex; - margin-right: 12px; + flex-basis: 25%; + min-width: ${ImageCoverWidth}px; `; export const itemContainerWrapper = (disabled?: boolean) => css` @@ -188,16 +197,7 @@ export const newsDescription = css` export const cardItem = { container: css` font-size: ${fonts.medium.fontSize}; - margin: 12px 0 0 12px; - &:first-child { - margin-left: 0; - } padding: 12px; - min-width: ${ImageCoverWidth}px; - width: 17vw; - @media (max-width: 1416px) { - width: 20vw; - } text-align: left; border: 1px #efedeb solid; box-shadow: ${Depths.depth4}; @@ -329,9 +329,8 @@ export const whatsNewsContainer = css` border-radius: 5px; margin: 20px 0 24px 0; background: #f6f6f6; - @media (max-width: 1416px) { + @media (max-width: 1024px) { background: none; - min-width: 200px; margin: 15px 0 0 0; } `; diff --git a/Composer/packages/client/src/pages/publish/Publish.tsx b/Composer/packages/client/src/pages/publish/Publish.tsx index 007148aa9c..c6d575a132 100644 --- a/Composer/packages/client/src/pages/publish/Publish.tsx +++ b/Composer/packages/client/src/pages/publish/Publish.tsx @@ -2,7 +2,7 @@ // Licensed under the MIT License. /** @jsx jsx */ -import { jsx } from '@emotion/react'; +import { jsx, css } from '@emotion/react'; import { useState, useEffect, useMemo, Fragment, useRef } from 'react'; import { navigate, RouteComponentProps } from '@reach/router'; import formatMessage from 'format-message'; @@ -55,6 +55,19 @@ const SKILL_PUBLISH_STATUS = { PUBLISHED: 'published', CANCEL: 'cancel', }; + +const publishContainerStyle = css` + display: flex; + flex-flow: column nowrap; + height: calc(100% - 1px); +`; + +const publishPivotStyle = css` + flex: auto; + display: flex; + flex-flow: column nowrap; +`; + const Publish: React.FC> = (props) => { const { projectId = '' } = props; const botProjectData = useRecoilValue(localBotsDataSelector); @@ -425,7 +438,7 @@ const Publish: React.FC +
{publishDialogVisible && ( !!bot.publishTarget)} @@ -461,8 +474,9 @@ const Publish: React.FC div': { height: '100%' } } }} onLinkClick={(link) => { setActiveTab(link?.props?.itemKey || ''); if (link?.props.itemKey) { @@ -488,7 +502,7 @@ const Publish: React.FC - + {botProjectData && botProjectData.length > 1 && ( - +
); }; diff --git a/Composer/packages/client/src/pages/setting/SettingsPage.tsx b/Composer/packages/client/src/pages/setting/SettingsPage.tsx index cfd1db614b..2292203e42 100644 --- a/Composer/packages/client/src/pages/setting/SettingsPage.tsx +++ b/Composer/packages/client/src/pages/setting/SettingsPage.tsx @@ -37,7 +37,7 @@ const pageWrapper = css` overflow: auto; height: 100%; > div { - min-width: 1030px; + min-width: 960px; min-height: 400px; } `; diff --git a/Composer/packages/client/src/router.tsx b/Composer/packages/client/src/router.tsx index d96a703019..94a6443aff 100644 --- a/Composer/packages/client/src/router.tsx +++ b/Composer/packages/client/src/router.tsx @@ -174,7 +174,7 @@ const projectWrapper = css` const projectStyle = css` flex: auto; - min-width: 1030px; + min-width: 960px; min-height: 400px; & > div { diff --git a/Composer/packages/electron-server/locales/en-US.json b/Composer/packages/electron-server/locales/en-US.json index 7203f8cfa2..b05b780bc1 100644 --- a/Composer/packages/electron-server/locales/en-US.json +++ b/Composer/packages/electron-server/locales/en-US.json @@ -122,4 +122,4 @@ "zoom_out_dc7d60d2": { "message": "Zoom Out" } -} +} \ No newline at end of file diff --git a/Composer/packages/server/src/locales/en-US.json b/Composer/packages/server/src/locales/en-US.json index a2f53c54b1..95d8a0e0e2 100644 --- a/Composer/packages/server/src/locales/en-US.json +++ b/Composer/packages/server/src/locales/en-US.json @@ -3404,6 +3404,9 @@ "search_for_extensions_on_npm_c5ca65d9": { "message": "Search for extensions on npm" }, + "search_for_the_query_found_count_plural_1_one_resu_da1e5732": { + "message": "Search for the { query }. Found { count, plural,\n =1 {one result}\n other {# results}\n}" + }, "search_functions_4a1afbc3": { "message": "Search functions" }, @@ -3980,6 +3983,9 @@ "the_trigger_triggername_has_been_created_eed0c973": { "message": "The trigger { triggerName } has been created" }, + "the_trigger_triggername_has_been_deleted_b7d630f8": { + "message": "The trigger { triggerName } has been deleted" + }, "the_user_input_page_is_where_the_language_understa_c9262f3f": { "message": "The User Input page is where the Language Understanding editor locates. From here users can view all the Language Understanding templates and edit them." }, diff --git a/extensions/packageManager/src/components/styles.ts b/extensions/packageManager/src/components/styles.ts index 02389d9a0c..5310f160d0 100644 --- a/extensions/packageManager/src/components/styles.ts +++ b/extensions/packageManager/src/components/styles.ts @@ -62,7 +62,7 @@ export const targetListTiTle = css` export const listRoot = css` height: calc(100% - 48px); position: relative; - overflow-y: auto; + min-width: 512px; flex-grow: 1; display: flex; flex-direction: column; diff --git a/extensions/packageManager/src/pages/Library.tsx b/extensions/packageManager/src/pages/Library.tsx index 6459cfd5be..5e94b53037 100644 --- a/extensions/packageManager/src/pages/Library.tsx +++ b/extensions/packageManager/src/pages/Library.tsx @@ -2,7 +2,7 @@ // Licensed under the MIT License. /** @jsx jsx */ -import { jsx } from '@emotion/react'; +import { jsx, css } from '@emotion/react'; import styled from '@emotion/styled'; import React, { useState, Fragment, useEffect } from 'react'; import formatMessage from 'format-message'; @@ -79,6 +79,15 @@ const InstallButtonVersion = styled.span` label: install-button-version; `; +const tabsStackStyle = css` + min-width: 512px; + overflow: auto; +`; + +const fieldStyles = { + root: { maxWidth: '200px' }, +}; + const Library: React.FC = () => { const [items, setItems] = useState([]); const { projectId, reloadProject, projectCollection: allProjectCollection, stopBot } = useProjectApi(); @@ -673,7 +682,7 @@ const Library: React.FC = () => { - + { options={feeds} placeholder="Format" selectedKey={feed} - styles={{ - root: { width: '200px' }, - }} + styles={fieldStyles} onChange={onChangeFeed} > @@ -691,9 +698,7 @@ const Library: React.FC = () => { setSearchTerm('')} onSearch={setSearchTerm} /> From 386a824215e566954e0c3b5c22f80d4041288d8d Mon Sep 17 00:00:00 2001 From: Eugene Olonov Date: Wed, 28 Dec 2022 10:04:23 -0800 Subject: [PATCH 2/2] Fix lint issues --- Composer/packages/client/src/pages/publish/Publish.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Composer/packages/client/src/pages/publish/Publish.tsx b/Composer/packages/client/src/pages/publish/Publish.tsx index c6d575a132..0b65f23e93 100644 --- a/Composer/packages/client/src/pages/publish/Publish.tsx +++ b/Composer/packages/client/src/pages/publish/Publish.tsx @@ -3,7 +3,7 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/react'; -import { useState, useEffect, useMemo, Fragment, useRef } from 'react'; +import { useState, useEffect, useMemo, useRef } from 'react'; import { navigate, RouteComponentProps } from '@reach/router'; import formatMessage from 'format-message'; import { useRecoilValue } from 'recoil';