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

fix: minor ui cleanup #2874

Merged
merged 6 commits into from
May 3, 2020
Merged

fix: minor ui cleanup #2874

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7337b3f
Truncate text of home tile, reduce width of left nav
cwhitten May 2, 2020
1b5bfb8
Avoid Show Code being cut off in electron
cwhitten May 3, 2020
2829941
Fix breadcrumb
cwhitten May 3, 2020
809f50c
Merge branch 'master' into cwhitten/truncate
cwhitten May 3, 2020
029f299
Fix lint
cwhitten May 3, 2020
ba88c58
Merge branch 'master' into cwhitten/truncate
cwhitten May 3, 2020
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
12 changes: 4 additions & 8 deletions Composer/packages/client/src/pages/design/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
import { jsx } from '@emotion/core';
import React, { Suspense, useContext, useEffect, useMemo, useState, useRef } from 'react';
import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import formatMessage from 'format-message';
import { globalHistory, RouteComponentProps } from '@reach/router';
import get from 'lodash/get';
Expand Down Expand Up @@ -60,12 +59,7 @@ function onRenderContent(subTitle, style) {
}

function onRenderBreadcrumbItem(item, render) {
return (
<span>
{!item.isRoot && <Icon iconName="Flow" styles={{ root: { marginLeft: '6px' } }} />}
{render(item)}
</span>
);
return <span>{render(item)}</span>;
}

function getAllRef(targetId, dialogs) {
Expand Down Expand Up @@ -299,11 +293,13 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
}, [] as IBreadcrumbItem[])
: [];
return (
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', height: '65px' }}>
<Breadcrumb
items={items}
ariaLabel={formatMessage('Navigation Path')}
styles={breadcrumbClass}
maxDisplayedItems={3}
onReduceData={() => undefined}
data-testid="Breadcrumb"
onRenderItem={onRenderBreadcrumbItem}
/>
Expand Down
7 changes: 6 additions & 1 deletion Composer/packages/client/src/pages/home/ItemContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import { jsx, SerializedStyles } from '@emotion/core';
import React from 'react';
import { Button } from 'office-ui-fabric-react/lib/Button';
import { Text } from 'office-ui-fabric-react/lib/Text';

import {
itemContainerWrapper,
Expand Down Expand Up @@ -44,7 +45,11 @@ export const ItemContainer: React.FC<ItemContainerProps> = ({
<div css={itemContainerTitle}>{title}</div>
</div>
<div css={[itemContainer, styles.content, disabled ? disabledItem.content : undefined]}>
<div css={itemContainerContent}>{content}</div>
<div css={itemContainerContent}>
<Text variant="large" nowrap>
{content}
</Text>
</div>
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion Composer/packages/client/src/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const main = css`
`;

export const sideBar = isExpand => css`
width: ${isExpand ? '220' : '48'}px;
width: ${isExpand ? '175' : '48'}px;
background-color: ${NeutralColors.gray20};
height: 100%;
border-right: 1px solid ${NeutralColors.gray50};
Expand Down