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

Dark mode cleanup #31208

Merged
merged 15 commits into from
Feb 21, 2019
Merged

Dark mode cleanup #31208

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c4f2d40
Initial changes for dark mode focusing on the file tree and directory…
daveyholler Feb 13, 2019
4dc23f1
Continuing work on dark mode updates.
daveyholler Feb 13, 2019
74b7bdf
Dark mode changes on the commit history page.
daveyholler Feb 13, 2019
a91fd21
Dark mode and style cleanup
daveyholler Feb 14, 2019
e8e9331
Using EuiText and reducing the font size in the directory listing.
daveyholler Feb 14, 2019
7833182
Reducing the font size of the commit messages.
daveyholler Feb 14, 2019
28671ef
Reverting the change to kibana.yml
daveyholler Feb 15, 2019
f6794b2
Removing inline styles and cleaning up css naming conventions. More c…
daveyholler Feb 15, 2019
f7e7c6b
Missed an inline style.
daveyholler Feb 15, 2019
7f7eddd
Suggestion component dark mode compatability.
daveyholler Feb 20, 2019
167e2c3
Merge remote-tracking branch 'upstream/feature/merge-code' into dark_…
daveyholler Feb 20, 2019
53f00dd
Reverting kibana.yml
daveyholler Feb 20, 2019
ff9576c
Fixing type errors.
daveyholler Feb 21, 2019
32ef59d
Merge remote-tracking branch 'upstream/feature/merge-code' into dark_…
daveyholler Feb 21, 2019
49279cc
Updating test snapshots.
daveyholler Feb 21, 2019
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 config/kibana.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,4 +110,4 @@
#ops.interval: 5000

# Specifies locale to be used for all localizable strings, dates and number formats.
#i18n.locale: "en"
#i18n.locale: "en"
Copy link
Contributor

Choose a reason for hiding this comment

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

revert this file, here we delete one more line break

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@zfy0701 I think we're good here now.

8 changes: 6 additions & 2 deletions x-pack/plugins/code/public/components/diff_page/commit_link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { EuiLink } from '@elastic/eui';
import { EuiBadge, EuiLink } from '@elastic/eui';
import React from 'react';
import { DIFF } from '../routes';

Expand All @@ -15,5 +15,9 @@ interface Props {

export const CommitLink = ({ repoUri, commit, children }: Props) => {
const href = DIFF.replace(':resource/:org/:repo', repoUri).replace(':commitId', commit);
return <EuiLink href={`#${href}`}>{children || commit}</EuiLink>;
return (
<EuiLink href={`#${href}`}>
<EuiBadge color="hollow">{children || commit}</EuiBadge>
</EuiLink>
);
};
51 changes: 39 additions & 12 deletions x-pack/plugins/code/public/components/file_tree/file_tree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/
import React from 'react';

import { EuiIcon, EuiSideNav } from '@elastic/eui';
import { EuiIcon, EuiSideNav, EuiText } from '@elastic/eui';
import classes from 'classnames';

import theme from '@elastic/eui/dist/eui_theme_light.json';
Expand All @@ -16,7 +16,6 @@ import { FileTree as Tree, FileTreeItemType } from '../../../model';
import { closeTreePath, fetchRepoTree, FetchRepoTreePayload } from '../../actions';
import { EuiSideNavItem, MainRouteParams, PathTypes } from '../../common/types';
import { RootState } from '../../reducers';
import { FolderClosedTriangle, FolderOpenTriangle } from '../shared';

const DirectoryNode = styled.span`
margin-left: ${theme.euiSizeXs};
Expand Down Expand Up @@ -93,12 +92,28 @@ export class CodeFileTree extends React.Component<Props> {
onClick={onClick}
>
{forceOpen ? (
<FolderOpenTriangle onClick={onFolderClick} />
<EuiIcon
type="arrowDown"
size="s"
color="subdued"
style={{ marginRight: '.5rem' }}
onClick={onFolderClick}
/>
) : (
<FolderClosedTriangle onClick={onFolderClick} />
<EuiIcon
type="arrowRight"
size="s"
color="subdued"
style={{ marginRight: '.5rem' }}
Copy link
Contributor

Choose a reason for hiding this comment

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

Try not to use inline styles.

onClick={onFolderClick}
/>
)}
<EuiIcon type={forceOpen ? 'folderOpen' : 'folderClosed'} />
<DirectoryNode>{`${node.name}/`}</DirectoryNode>
<EuiIcon type={forceOpen ? 'folderOpen' : 'folderClosed'} color="subdued" />
<DirectoryNode>
<EuiText size="s" grow={false} style={{ display: 'inline-block' }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Same here. There is an eui utility class for this. https://elastic.github.io/eui/#/utilities/css-utility-classes

{`${node.name}/`}
</EuiText>
</DirectoryNode>
</div>
);
}
Expand All @@ -110,8 +125,12 @@ export class CodeFileTree extends React.Component<Props> {
className={classes(className, 'code-file-tree-file')}
role="button"
>
<EuiIcon type="submodule" />
<DirectoryNode>{node.name}</DirectoryNode>
<EuiIcon type="submodule" color="subdued" />
<DirectoryNode>
<EuiText size="s" grow={false} style={{ display: 'inline-block' }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Same

{node.name}
</EuiText>
</DirectoryNode>
</div>
);
}
Expand All @@ -123,8 +142,12 @@ export class CodeFileTree extends React.Component<Props> {
className={classes(className, 'code-file-tree-file')}
role="button"
>
<EuiIcon type="symlink" />
<DirectoryNode>{node.name}</DirectoryNode>
<EuiIcon type="symlink" color="subdued" />
<DirectoryNode>
<EuiText size="s" grow={false} style={{ display: 'inline-block' }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Same

{node.name}
</EuiText>
</DirectoryNode>
</div>
);
}
Expand All @@ -136,8 +159,12 @@ export class CodeFileTree extends React.Component<Props> {
className={classes(className, 'code-file-tree-file')}
role="button"
>
<EuiIcon type="document" />
<DirectoryNode>{node.name}</DirectoryNode>
<EuiIcon type="document" color="subdued" />
<DirectoryNode>
<EuiText size="s" grow={false} style={{ display: 'inline-block' }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Same

{node.name}
</EuiText>
</DirectoryNode>
</div>
);
}
Expand Down
51 changes: 9 additions & 42 deletions x-pack/plugins/code/public/components/main/commit_history.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,6 @@ import { CommitLink } from '../diff_page/commit_link';

const COMMIT_ID_LENGTH = 8;

const Dot = styled.div`
--dotRadius: ${theme.euiSizeS};
width: var(--dotRadius);
height: var(--dotRadius);
border-radius: calc(var(--dotRadius) / 2);
background-color: ${theme.euiBorderColor};
margin: auto;
`;

const CommitMessages = styled.div`
overflow: auto;
flex: 1;
Expand All @@ -43,33 +34,9 @@ const Header = styled.div`
justify-content: space-between;
`;

const TimeLine = styled.div`
border-left: ${theme.euiBorderThick};
margin-left: ${theme.euiSizeXs};
padding: ${theme.paddingSizes.s} 0 ${theme.paddingSizes.s} ${theme.paddingSizes.m};
`;

const CommitRoot = styled(EuiPanel)`
&:not(:first-child) {
border-top: none;
}
display: flex;
flex-direction: row;
justify-content: space-between;
`;

const CommitGroupContainer = styled.div`
margin: 0 0 ${theme.euiSizeXs} ${theme.euiSizeM};
`;

const CommitId = styled.div`
--height: calc(20rem / 14);
width: var(--dotRadius);
height: var(--height);
height: calc(20rem / 14);
margin: auto 0;
line-height: var(--height);
color: black;
border: ${theme.euiBorderThin};
text-align: center;
flex-shrink: 0;
`;
Expand All @@ -84,12 +51,12 @@ const Commit = (props: { commit: CommitInfo; date: string; repoUri: string }) =>
.slice(0, COMMIT_ID_LENGTH)
.join('');
return (
<CommitRoot>
<EuiPanel className="code-timeline__commit--root">
<CommitContainer>
<EuiText>
<EuiText size="s">
<p>{message}</p>
</EuiText>
<EuiText>
<EuiText size="xs">
<EuiTextColor color="subdued">
{committer} · {date}
</EuiTextColor>
Expand All @@ -98,7 +65,7 @@ const Commit = (props: { commit: CommitInfo; date: string; repoUri: string }) =>
<CommitId>
<CommitLink repoUri={props.repoUri} commit={commitId} />
</CommitId>
</CommitRoot>
</EuiPanel>
);
};

Expand All @@ -107,10 +74,10 @@ const CommitGroup = (props: { commits: CommitInfo[]; date: string; repoUri: stri
<Commit commit={commit} key={commit.id} date={props.date} repoUri={props.repoUri} />
));
return (
<CommitGroupContainer>
<div className="code-timeline__commit-container">
<EuiFlexGroup justifyContent="flexStart" gutterSize="s">
<EuiFlexItem grow={false}>
<Dot />
<div className="code-timeline__marker" />
</EuiFlexItem>
<EuiFlexItem>
<EuiText>
Expand All @@ -120,8 +87,8 @@ const CommitGroup = (props: { commits: CommitInfo[]; date: string; repoUri: stri
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
<TimeLine>{commitList}</TimeLine>
</CommitGroupContainer>
<div className="code-timeline">{commitList}</div>
</div>
);
};

Expand Down
15 changes: 10 additions & 5 deletions x-pack/plugins/code/public/components/main/directory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiIcon, EuiTitle, IconType } from '@elastic/eui';
import { EuiIcon, EuiText, EuiTitle, IconType } from '@elastic/eui';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import React from 'react';
import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
import styled from 'styled-components';
import { FileTree, FileTreeItemType } from '../../../model';
import { MainRouteParams, PathTypes } from '../../common/types';
import { COLORS } from '@elastic/eui/src/components/icon/icon';

const Root = styled.div`
padding: ${theme.paddingSizes.m};
Expand Down Expand Up @@ -70,12 +71,16 @@ const DirectoryNodes = (props: DirectoryNodesProps) => {
[FileTreeItemType.Submodule]: 'submodule',
};
const nodes = props.nodes.map(n => (
<DirectoryNode key={n.path}>
<div className="code-directory__node" key={n.path}>
<Link to={props.getUrl(n.path!)} data-test-subj={`codeFileExplorerNode-${n.name}`}>
<EuiIcon type={typeIconMap[n.type]} color="black" />
<NodeName>{n.name}</NodeName>
<EuiIcon type={typeIconMap[n.type]} color="subdued" />
<NodeName>
<EuiText size="s" style={{ display: 'inline-block' }}>
{n.name}
</EuiText>
</NodeName>
</Link>
</DirectoryNode>
</div>
));
return (
<Container>
Expand Down
103 changes: 103 additions & 0 deletions x-pack/plugins/code/public/components/main/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,106 @@
.code-auto-margin {
margin: auto;
}

.code-navigation__sidebar {
Copy link
Contributor

Choose a reason for hiding this comment

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

I'd try to follow the naming conventions of the rest of Kibana / EUI. This going for everything in this page.

.codeNavigation__sidebar

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I like that better. I was becoming overwhelmed by hyphens. :)

Copy link
Contributor

Choose a reason for hiding this comment

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

Yep, there's some docs at the bottom of the sass guidelines but generally the following is the formula.

.appComponent
.appComponent__element
.appComponent--modifier
.appComponent__anotherElement--modifier
.appComponent-isState

width: calc(256rem / 14);
border-right: $euiBorderThin;
display: flex;
flex-direction: column;
& > div {
Copy link
Contributor

Choose a reason for hiding this comment

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

Try to avoid generic selectors. Use classes.

height: 100%;
display: flex;
flex-direction: column;
& > div:first-child {
Copy link
Contributor

Choose a reason for hiding this comment

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

Same here.

flex-shrink: 0;
flex-grow: 0;
}
& > div:not(:first-child) {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
}
}
}

.code-file-tree__container {
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
padding: $euiSizeM;
background-color: $euiColorLightestShade;
}

.code-directory__node {
width: calc(200rem / 14);
margin: 0 $euiSizeXS $euiSizeS;
padding: $euiSizeXS;
border-radius: $euiBorderRadius;
a {
color: $euiColorDarkestShade;
}
&:hover {
background-color: rgba($euiColorGhost, .10);
cursor: pointer;
}
}
.code-timeline {
border-left: $euiBorderThick;
margin-left: $euiSizeXS;
padding: $euiSizeS 0 $euiSizeS $euiSizeS;
}

.code-timeline__marker {
width: $euiSizeS;
height: $euiSizeS;
border-radius: $euiSizeS / 2;
background-color: $euiBorderColor;
margin: auto;
}

.code-timeline__commit-container {
margin: 0 0 $euiSizeXS $euiSizeM;
.euiPanel:not(:first-of-type), .euiPanel:not(:last-of-type) {
border-radius: 0;
}
}

.euiPanel.code-timeline__commit--root {
display: flex;
flex-direction: row;
justify-content: space-between;
&:not(:first-child) {
border-top: none;
}
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child {
border-radius: $euiSizeXS $euiSizeXS 0 0;
}
&:last-child {
border-radius: 0 0 $euiSizeXS $euiSizeXS;
}
&:only-child{
border-radius: $euiSizeXS
}
}

.code-top-bar__container {
box-sizing: content-box;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: $euiSizeS;
min-height: 80px;
border-bottom: $euiBorderThin;
nav {
a {
display: inline;
}
div {
vertical-align: baseline;
}
}
}
Loading