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.

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

Clean up webview styling #84

Merged
merged 1 commit into from
Jun 3, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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 src/webviews/configureJobSubmission/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ export default class ConfigureJobSubmissionWebviewPanel extends BaseWebviewPanel
// Re-create the webview
ConfigureJobSubmissionWebviewPanel.createOrShow(this._context, this._properties);
}
}, 3000);
}, 5000);
}

protected receiveMessage(): void {
Expand Down
66 changes: 31 additions & 35 deletions src/webviews/configureJobSubmission/resources/components/App.js
Original file line number Diff line number Diff line change
@@ -1,44 +1,40 @@
/* eslint-disable no-undef */
import ListItem from 'carbon-components-react/es/components/ListItem';
import UnorderedList from 'carbon-components-react/es/components/UnorderedList';
import * as React from 'react';
import React, { useState } from 'react';
import HeaderContainer from './HeaderContainer';
import JobInfoModal from './JobInfoModal';
import SubmitJobContainer from './SubmitJobContainer';

// submitJobParams is defined when setting the webview HTML content
const App = () => (
<div className="app-container">
<div className="bx--grid bx--grid--no-gutter">
<div className="bx--row app-container__row">
<div className="bx--col">
<h1 className="app-container__heading">
{`Configure job for ${submitJobParams.name}`}
</h1>
{submitJobParams.details && Object.keys(submitJobParams.details).length
? (
<UnorderedList className="app-container__list">
{Object.keys(submitJobParams.details).map((label) => (
<ListItem key={label}>
{`${label}: ${submitJobParams.details[label]}`}
</ListItem>
))}
<ListItem>{`Instance: ${submitJobParams.targetInstance.instanceName}`}</ListItem>
</UnorderedList>
)
: (
<div>
{`Instance: ${submitJobParams.targetInstance.instanceName}`}
</div>
)
}
/**
* Note: `submitJobParams` is defined when setting the webview HTML content
*/
const App = () => {
const [isJobInfoModalOpen, setIsJobInfoModalOpen] = useState(false);

return (
<div className="app-container">
<JobInfoModal
isOpen={isJobInfoModalOpen}
close={() => setIsJobInfoModalOpen(false)}
instanceName={submitJobParams.targetInstance.instanceName}
jobDetails={submitJobParams.details || null}
/>
<div className="bx--grid bx--grid--no-gutter">
<div className="bx--row app-container__header-container">
<div className="bx--col">
<HeaderContainer
bundleName={submitJobParams.name}
setIsJobInfoModalOpen={setIsJobInfoModalOpen}
/>
</div>
</div>
</div>
<div className="bx--row app-container__row app-container__main-container">
<div className="bx--col">
<SubmitJobContainer params={submitJobParams} />
<div className="bx--row app-container__main-container">
<div className="bx--col">
<SubmitJobContainer params={submitJobParams} />
</div>
</div>
</div>
</div>
</div>
);
);
};

export default App;
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import InfoIcon16 from '@carbon/icons-react/es/information/16';
import Button from 'carbon-components-react/es/components/Button';
import PropTypes from 'prop-types';
import React from 'react';

const HeaderContainer = ({ bundleName, setIsJobInfoModalOpen }) => {
return (
<div className="header-container--flex">
<h1 className="header-container__header">
{`Configure job for ${bundleName}`}
</h1>
<Button
hasIconOnly
kind="ghost"
renderIcon={InfoIcon16}
iconDescription="Show job submission details"
tooltipAlignment="center"
tooltipPosition="bottom"
onClick={() => setIsJobInfoModalOpen(true)}
className="header-container__info-button"
/>
</div>
);
};

HeaderContainer.propTypes = {
bundleName: PropTypes.string.isRequired,
setIsJobInfoModalOpen: PropTypes.func.isRequired
};

export default HeaderContainer;
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import Modal from 'carbon-components-react/es/components/Modal';
import {
StructuredListBody,
StructuredListCell,
StructuredListRow,
StructuredListWrapper
} from 'carbon-components-react/es/components/StructuredList';
import PropTypes from 'prop-types';
import React from 'react';

const JobInfoModal = ({
isOpen, close, instanceName, jobDetails
}) => {
return (
<Modal
iconDescription="Close"
modalAriaLabel="Job submission details modal"
modalHeading="Job submission details"
open={isOpen}
size="lg"
passiveModal
onRequestClose={close}
>
<div className="job-details-container">
<StructuredListWrapper className="job-details-container__list">
<StructuredListBody>
{jobDetails && Object.keys(jobDetails).length && Object.keys(jobDetails).map((label) => (
<StructuredListRow className="structured-row" key={label}>
<StructuredListCell noWrap>{label}</StructuredListCell>
<StructuredListCell className="job-details-container__list-value">{jobDetails[label]}</StructuredListCell>
</StructuredListRow>
))}
<StructuredListRow className="structured-row">
<StructuredListCell noWrap>Instance</StructuredListCell>
<StructuredListCell className="job-details-container__list-value">{instanceName}</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredListWrapper>
</div>
</Modal>
);
};

JobInfoModal.defaultProps = {
jobDetails: null
};

JobInfoModal.propTypes = {
isOpen: PropTypes.bool.isRequired,
close: PropTypes.func.isRequired,
instanceName: PropTypes.string.isRequired,
jobDetails: PropTypes.objectOf(PropTypes.string)
};

export default JobInfoModal;
4 changes: 2 additions & 2 deletions src/webviews/configureJobSubmission/resources/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './index.scss';

Expand Down
3 changes: 3 additions & 0 deletions src/webviews/configureJobSubmission/resources/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,14 @@
@import '~carbon-components/scss/components/dropdown/dropdown';
@import '~carbon-components/scss/components/list-box/list-box';
@import '~carbon-components/scss/components/list/list';
@import '~carbon-components/scss/components/modal/modal';
@import '~carbon-components/scss/components/structured-list/structured-list';
@import '~carbon-components/scss/components/text-input/text-input';
@import '~carbon-components/scss/components/tooltip/tooltip';

// Webview styling
@import '../../styles/app.scss';
@import './styles/_job-info-modal.scss';
@import './styles/_submit-job-container.scss';
@import './styles/_submit-params-container.scss';
@import './styles/_job-config-container.scss';
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.job-details-container {
.job-details-container__list {
margin-bottom: 0;

.job-details-container__list-value {
word-break: break-all;
}
}
}
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
.submit-job-container {
.submit-job-container__accordion {
padding-top: $layout-03;
padding-bottom: $layout-03;
}

.submit-job-container__accordion_title {
@include carbon--type-style('productive-heading-02');
}

.submit-job-container__button-container {
flex-flow: row-reverse wrap;
justify-content: flex-end;

@include carbon--breakpoint-down(700px) {
flex-flow: column wrap;
align-content: flex-end;
}

.submit-job-container__button-container__button {
flex: 1;
}
Expand Down
19 changes: 12 additions & 7 deletions src/webviews/instanceSelection/resources/components/App.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
/* eslint-disable no-undef */
import * as React from 'react';
import React from 'react';
import SelectInstanceContainer from './SelectInstanceContainer';
import FilePathsContainer from './FilePathsContainer';

// selectInstancePanelTitle and SelectInstanceContainerParams is defined when setting the webview HTML content
/**
* Note: `selectInstancePanelTitle` and `selectInstanceContainerParams` are defined when
* setting the webview HTML content
*/
const App = () => (
<div className="app-container">
<div className="bx--grid bx--grid--no-gutter">
<div className="bx--row app-container__row">
<div className="bx--row app-container__header-container">
<div className="bx--col">
<h1 className="app-container__heading">
{selectInstancePanelTitle}
<div>
<h1 className="header-container__header">
{selectInstancePanelTitle}
</h1>
<FilePathsContainer params={filePathsContainerParams} />
</h1>
</div>
</div>
</div>
<div className="bx--row app-container__row app-container__main-container">
<div className="bx--row app-container__main-container">
<div className="bx--col">
<SelectInstanceContainer params={selectInstanceContainerParams} />
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const FilePathsContainer = (props) => {
const fileList = () => {
const filePaths = files.map((file, i) => {
return (
files.length > 1 ? <ListItem key={file}>{file}</ListItem> : <div key={file}>{file}</div>
files.length > 1 ? <ListItem key={file}>{file}</ListItem> : <div key={file} className="file-name">{file}</div>
);
});
return filePaths;
Expand All @@ -34,7 +34,7 @@ const FilePathsContainer = (props) => {
{fileList()}
</UnorderedList>
) : (
<div className="file-list">
<div>
{fileList()}
</div>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,12 @@ export default class SelectInstanceContainer extends Component {

getButtonContainer = () => {
const { selectedInstance } = this.state;
const { params: { storedInstances, action, postBuildAction } } = this.props;
const { params: { storedInstances, action } } = this.props;
const inst = storedInstances.find((type) => type.connectionId === selectedInstance.id);
const actionCapitalized = this.capitalizeFirstLetter(action);
const labelTitle = postBuildAction === 1 ? `${actionCapitalized} and submit` : actionCapitalized;
return (
<ButtonContainer
primaryBtn={{
label: labelTitle,
label: 'Select',
isValid: true,
onClick: () => {
this.messageHandler.postMessage({
Expand Down Expand Up @@ -141,11 +139,6 @@ export default class SelectInstanceContainer extends Component {
this.messageHandler.postMessage({ command: 'close-panel' });
}

capitalizeFirstLetter = (string) => {
const action = string === 'build-make' ? 'build' : string;
return action.charAt(0).toUpperCase() + action.slice(1);
}

render() {
return (
<div className="bx--grid select-instance-container">
Expand Down
4 changes: 2 additions & 2 deletions src/webviews/instanceSelection/resources/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './index.scss';

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.button-container {
flex-flow: row-reverse wrap;
justify-content: flex-end;

@include carbon--breakpoint-down(500px) {
flex-flow: column wrap;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,18 @@
.file-list {
display: flex;
flex-direction: column;
padding-top: $spacing-02;
padding-left: $layout-01;
font-size: 1rem;
word-break: break-word;
word-break: break-all;
@include carbon--type-style('body-short-01');
}

.file-name {
padding-left: $spacing-02;
word-break: break-all;
@include carbon--type-style('body-short-01');
}

.file-path-subtitle {
font-size: 1rem;
@include carbon--type-style('body-short-01');
}
6 changes: 4 additions & 2 deletions src/webviews/jobGraph/resources/containers/App.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
/* eslint-disable no-undef */
import * as React from 'react';
import React from 'react';
import StreamsJobGraphContainer from './StreamsJobGraphContainer';

// jobGraphContainerParams is defined when setting the webview HTML content
/**
* Note: `jobGraphContainerParams` is defined when setting the webview HTML content
*/
const App = () => (
<div className="app-container">
<StreamsJobGraphContainer params={jobGraphContainerParams} />
Expand Down
4 changes: 2 additions & 2 deletions src/webviews/jobGraph/resources/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import React from 'react';
import ReactDOM from 'react-dom';
import { IntlProvider } from 'react-intl';
import App from './containers/App';
import './index.scss';
Expand Down
Loading