Commit 6fe3c1a7 authored by Axel Bocciarelli's avatar Axel Bocciarelli
Browse files

Merge branch 'px' into 'master'

Let React suffix CSS values with `px`, simplify boolean conditions and normalize CSS colors

See merge request !405
parents 58adf4e4 7b79d6e1
Pipeline #31557 passed with stages
in 7 minutes and 30 seconds
......@@ -30,7 +30,7 @@
<!-- <link rel="stylesheet" href="https://bootswatch.com/3/readable/bootstrap.min.css"> -->
<!-- Optional theme
<!-- Optional theme
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
-->
<link rel="stylesheet" href="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.css" />
......@@ -74,13 +74,11 @@
let img = event.target;
let isFullscreen = document.fullscreenElement === img;
if (isFullscreen === false) {
if (!isFullscreen) {
// img goes out of fullscreen mode
img.style.height = img.getAttribute("originalHeightByStyle");
img.style.width = img.getAttribute("originalWidthByStyle");
img.style.cursor = "zoom-in";
} else {
// image enters in fullscreen mode
}
};
......
/* stylesheet which overrides default browser css styles. CSS below are used in tinyMCE only. */
body {
overflow-y: auto!important;
padding-bottom: 0px!important;
overflow-y: auto !important;
padding-bottom: 0 !important;
}
ul, ol {
display: inline-block;
}
\ No newline at end of file
}
......@@ -9,7 +9,7 @@ function BreadCrumbs(props) {
if (state && state.back) {
const { title, pathname, search, scrollPosition } = state.back;
return (
<Navbar className="breadcrumbs-bar" style={{ padding: "8px 0", fontSize: "15px" }}>
<Navbar className="breadcrumbs-bar" style={{ padding: "8px 0", fontSize: 15 }}>
<Link to={{ pathname, search, state: { scrollPosition } }}>
<Glyphicon glyph="arrow-left" style={{ marginRight: 10 }} />
{title}
......
......@@ -35,7 +35,7 @@ class DataCollectionTable extends React.Component {
<Link to={`/public/${datacollection.doi}`}>
<Button bsSize="xsmall" style={{ width: 120, textAlign: "left" }}>
<Glyphicon glyph="circle-arrow-right" />
<span style={{ marginLeft: "10px" }}>{short} </span>
<span style={{ marginLeft: 10 }}>{short} </span>
</Button>
</Link>
);
......@@ -75,7 +75,7 @@ class DataCollectionTable extends React.Component {
<div style={{ color: "gray", fontStyle: "italic" }}> {extraData.titleFormatter(cell, datacolletion, extraData)}</div>
</Col>
</Row>
<Row className="show-grid" style={{ fontSize: "10px" }}>
<Row className="show-grid" style={{ fontSize: 10 }}>
<Col xs={12}>
<span>{extraData.doiFormatter(datacolletion.doi, datacolletion, extraData)}</span>
</Col>
......@@ -117,8 +117,8 @@ class DataCollectionTable extends React.Component {
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: "140px", textAlign: "center" },
lg: { width: "140px", textAlign: "center" },
md: { width: 140, textAlign: "center" },
lg: { width: 140, textAlign: "center" },
},
},
{
......@@ -129,8 +129,8 @@ class DataCollectionTable extends React.Component {
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: "140px", textAlign: "center" },
lg: { width: "140px", textAlign: "center" },
md: { width: 140, textAlign: "center" },
lg: { width: 140, textAlign: "center" },
},
},
{
......@@ -153,8 +153,8 @@ class DataCollectionTable extends React.Component {
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: "100px", textAlign: "center" },
lg: { width: "100px", textAlign: "center" },
md: { width: 100, textAlign: "center" },
lg: { width: 100, textAlign: "center" },
},
},
......@@ -167,7 +167,7 @@ class DataCollectionTable extends React.Component {
xs: { hidden: true },
sm: { hidden: true },
md: { hidden: true },
lg: { width: "300px", textAlign: "center" },
lg: { width: 300, textAlign: "center" },
},
},
];
......
......@@ -75,7 +75,7 @@ export default class DatasetDownloadButton extends React.Component {
<a style={{ color: "black" }} href={downloadURL}>
<Button bsStyle="primary" bsSize="xsmall">
<span className="glyphicon glyphicon-download-alt"></span>
<span style={{ marginLeft: "10px" }}></span>
<span style={{ marginLeft: 10 }}></span>
Download
</Button>
</a>
......@@ -87,7 +87,7 @@ export default class DatasetDownloadButton extends React.Component {
<a style={{ color: "black" }} href={downloadURL}>
<Button variant="dark" bsSize="xsmall">
<span bsSize="xsmall" className="glyphicon glyphicon-repeat fast-right-spinner"></span>
<span style={{ color: "black", marginLeft: "10px" }}>Restoring</span>
<span style={{ color: "black", marginLeft: 10 }}>Restoring</span>
</Button>
</a>
);
......@@ -103,7 +103,7 @@ export default class DatasetDownloadButton extends React.Component {
}}
>
<span style={{ color: "black" }} className="glyphicon glyphicon-tasks"></span>
<span style={{ color: "black", marginLeft: "10px" }}>Restore</span>
<span style={{ color: "black", marginLeft: 10 }}>Restore</span>
</Button>
);
}
......@@ -111,7 +111,7 @@ export default class DatasetDownloadButton extends React.Component {
if (this.state.status === "FETCHING") {
return (
<span>
<span style={{ marginLeft: "10px" }} className="glyphicon glyphicon-repeat fast-right-spinner"></span>
<span style={{ marginLeft: 10 }} className="glyphicon glyphicon-repeat fast-right-spinner"></span>
</span>
);
}
......
......@@ -47,7 +47,7 @@ class DatasetMetadataTab extends React.Component {
/** Data sorted by name */
const data = this.props.dataset.parameters.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
return (
<div style={{ margin: "10px", fontSize: "12px" }}>
<div style={{ margin: 10, fontSize: 12 }}>
<ResponsiveTable keyField="name" data={data} columns={this.getColumns()} />
</div>
);
......
......@@ -42,7 +42,7 @@ class DatasetSummary extends React.Component {
}
return (
<Grid fluid style={{ margin: "20px" }}>
<Grid fluid style={{ margin: 20 }}>
<Row>
<Col xs={12} md={3}>
<ParameterTableWidget striped parameters={this.getParameters()}></ParameterTableWidget>
......
......@@ -69,7 +69,7 @@ class EMDatasetSummary extends React.Component {
render() {
return (
<Grid fluid style={{ margin: "20px" }}>
<Grid fluid style={{ margin: 20 }}>
<Row>
<Col xs={12} md={2}>
<ParameterTableWidget striped={false} parameters={this.getParameters()}></ParameterTableWidget>
......
......@@ -76,7 +76,7 @@ class MXDatasetSummary extends React.Component {
render() {
return (
<Grid fluid style={{ margin: "20px" }}>
<Grid fluid style={{ margin: 20 }}>
<Row>
<Col xs={12} md={2}>
<ParameterTableWidget striped={false} parameters={this.getParameters()}></ParameterTableWidget>
......
......@@ -88,8 +88,8 @@ class DatasetTable extends React.Component {
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: "150px" },
lg: { width: "150px" },
md: { width: 150 },
lg: { width: 150 },
},
},
{
......@@ -128,8 +128,8 @@ class DatasetTable extends React.Component {
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: "130px" },
lg: { width: "130px" },
md: { width: 130 },
lg: { width: 130 },
},
},
{
......@@ -153,8 +153,8 @@ class DatasetTable extends React.Component {
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: "80px" },
lg: { width: "80px" },
md: { width: 80 },
lg: { width: 80 },
},
},
{
......@@ -168,8 +168,8 @@ class DatasetTable extends React.Component {
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: "80px" },
lg: { width: "80px" },
md: { width: 80 },
lg: { width: 80 },
},
},
......@@ -184,8 +184,8 @@ class DatasetTable extends React.Component {
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: "110px" },
lg: { width: "110px" },
md: { width: 110 },
lg: { width: 110 },
},
},
];
......@@ -221,7 +221,7 @@ class DatasetTable extends React.Component {
expanded: this.props.expanded,
expandColumnPosition: "right",
expandHeaderColumnRenderer: ({ isAnyExpands }) => (
<span style={{ fontSize: "18px" }}>
<span style={{ fontSize: 18 }}>
<Glyphicon glyph={isAnyExpands ? "zoom-out" : "zoom-in"} />
</span>
),
......@@ -232,7 +232,7 @@ class DatasetTable extends React.Component {
};
return (
<div style={{ margin: "20px" }}>
<div style={{ margin: 20 }}>
<ResponsiveTable data={this.props.datasets} columns={this.getColumns()} expandRow={expandRow} selectRow={selectRow} />
</div>
);
......
......@@ -46,7 +46,7 @@ class PublicationSummary extends React.Component {
{this.getImageFromGalleyByIndex(0)}
</Col>
<Col xs={12} md={8}>
<div style={{ fontSize: "10px" }}>{this.getParameterValue("Sample_description")}</div>
<div style={{ fontSize: 10 }}>{this.getParameterValue("Sample_description")}</div>
</Col>
</Row>
</Grid>
......
......@@ -52,7 +52,7 @@ class DatasetFileTree extends React.Component {
render() {
return (
<div style={{ marginTop: "20px" }}>
<div style={{ marginTop: 20 }}>
<ResponsiveTable
data={this.state.files}
columns={[
......
......@@ -28,7 +28,7 @@ class InstrumentSlitWidget extends React.Component {
return (
<div className="container-fluid">
<br />
<span style={{ fontSize: "16px", fontWeight: "bold" }}>Slits</span>
<span style={{ fontSize: 16, fontWeight: "bold" }}>Slits</span>
<div className="row">
<div className="col-sm-2">
<ParameterTableWidget header="Primary slit" parameters={this.getSlitValues("InstrumentSlitPrimary")}></ParameterTableWidget>
......
......@@ -12,7 +12,7 @@ class InstrumentWidget extends React.Component {
}
return (
<div style={{ fontSize: "12px" }}>
<div style={{ fontSize: 12 }}>
<InstrumentWidgetSection
header="Monochromator"
parameters={[
......@@ -70,7 +70,7 @@ class InstrumentWidgetSection extends React.Component {
return (
<div className="container-fluid">
<br />
<span style={{ fontSize: "16px", fontWeight: "bold" }}>{this.props.header}</span>
<span style={{ fontSize: 16, fontWeight: "bold" }}>{this.props.header}</span>
<div className="row">
<div className="col-sm-2">
<ParameterTableWidget names={names} values={values} parameters={this.props.parameters}></ParameterTableWidget>
......
.gray-out {
color: #e7e5e5;
border: 0px solid white;
border: 0 solid white;
background-color: white;
}
......
......@@ -53,14 +53,7 @@ class ParameterTableWidget extends React.Component {
}
}
/** If all values are empty then it is not displayed */
//if (!_.find(parameterValues, function(value){ return value !== null})){
// return null;
// }
let striped = true;
if (this.props.striped === false) {
striped = this.props.striped;
}
const { striped = true } = this.props;
return (
<Table striped={striped} condensed hover>
......
......@@ -42,7 +42,7 @@ class InvestigationTable extends React.Component {
<div style={{ color: "gray", fontStyle: "italic" }}>{investigation.summary}</div>
</Col>
</Row>
<Row className="show-grid" style={{ fontSize: "10px" }}>
<Row className="show-grid" style={{ fontSize: 10 }}>
<Col xs={12}>
<DOIBadge doi={investigation.doi} />
</Col>
......@@ -74,7 +74,7 @@ class InvestigationTable extends React.Component {
const fileCount = extraData.getParameter(investigation, FILE_COUNT);
if (fileCount) {
if (fileCount !== 0) {
return <span style={{ width: "50px", textAlign: "right", float: "left" }}>{fileCount}</span>;
return <span style={{ width: 50, textAlign: "right", float: "left" }}>{fileCount}</span>;
}
}
}
......@@ -84,14 +84,14 @@ class InvestigationTable extends React.Component {
if (datasetCount && datasetCount.value && datasetCount.value !== 0) {
return (
<div>
<span style={{ width: "40px", textAlign: "right", float: "left" }}>{datasetCount.value}</span>
<span style={{ width: 40, textAlign: "right", float: "left" }}>{datasetCount.value}</span>
<span
style={{
width: "80px",
marginLeft: "5px",
width: 80,
marginLeft: 5,
float: "left",
fontStyle: "italic",
color: "#999999",
color: "#999",
}}
>
({extraData.volumeFormatter(cell, investigation, extraData)})
......@@ -150,8 +150,8 @@ class InvestigationTable extends React.Component {
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: "140px", textAlign: "center" },
lg: { width: "140px", textAlign: "center" },
md: { width: 140, textAlign: "center" },
lg: { width: 140, textAlign: "center" },
},
},
{
......@@ -162,8 +162,8 @@ class InvestigationTable extends React.Component {
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: "140px", textAlign: "center" },
lg: { width: "140px", textAlign: "center" },
md: { width: 140, textAlign: "center" },
lg: { width: 140, textAlign: "center" },
},
},
{
......@@ -180,7 +180,7 @@ class InvestigationTable extends React.Component {
dataField: "datasets",
formatter: this.datasetCountFormatter,
formatExtraData: this,
responsiveHeaderStyle: getLgHeaderStyle("150px", !this.props.showInvestigationStats),
responsiveHeaderStyle: getLgHeaderStyle(150, !this.props.showInvestigationStats),
},
{
text: "Files",
......@@ -189,7 +189,7 @@ class InvestigationTable extends React.Component {
isDummyField: true,
formatter: this.fileCountFormatter,
formatExtraData: this,
responsiveHeaderStyle: getLgHeaderStyle("80px", !this.props.showInvestigationStats),
responsiveHeaderStyle: getLgHeaderStyle(80, !this.props.showInvestigationStats),
},
{
......@@ -197,21 +197,21 @@ class InvestigationTable extends React.Component {
dataField: "startDate",
formatter: dateFormatter,
sort: true,
responsiveHeaderStyle: getLgHeaderStyle("110px", false),
responsiveHeaderStyle: getLgHeaderStyle(110, false),
},
{
text: "Release",
dataField: "releaseDate",
formatter: dateFormatter,
sort: true,
responsiveHeaderStyle: getLgHeaderStyle("110px", false),
responsiveHeaderStyle: getLgHeaderStyle(110, false),
},
{
text: "DOI",
dataField: "doi",
formatter: (doi) => <DOIBadge doi={doi} />,
sort: true,
responsiveHeaderStyle: getLgHeaderStyle("300px", false),
responsiveHeaderStyle: getLgHeaderStyle(300, false),
},
];
}
......@@ -225,13 +225,13 @@ class InvestigationTable extends React.Component {
expandHeaderColumnRenderer: ({ isAnyExpands }) => {
if (isAnyExpands) {
return (
<span style={{ fontSize: "18px" }}>
<span style={{ fontSize: 18 }}>
<Glyphicon glyph="zoom-out" />
</span>
);
}
return (
<span style={{ fontSize: "18px" }}>
<span style={{ fontSize: 18 }}>
<Glyphicon glyph="zoom-in" />
</span>
);
......
......@@ -29,7 +29,7 @@ export function nameFormatter(investigation, withProposalLinks, isUserAdministra
<Link to={`/investigation/${investigation.id}/datasets`}>
<Button bsSize="xsmall" style={{ width: 120, textAlign: "left" }}>
<Glyphicon glyph="circle-arrow-right" />
<span style={{ marginLeft: "10px" }}>{investigation.name} </span>
<span style={{ marginLeft: 10 }}>{investigation.name} </span>
</Button>
</Link>
);
......
......@@ -72,8 +72,8 @@ function ItemTable(props) {
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: "150px" },
lg: { width: "150px" },
md: { width: 150 },
lg: { width: 150 },
},
},
{
......@@ -84,8 +84,8 @@ function ItemTable(props) {
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: "120px" },
lg: { width: "120px" },
md: { width: 120 },
lg: { width: 120 },
},
},
{
......@@ -97,8 +97,8 @@ function ItemTable(props) {
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: "120px" },
lg: { width: "120px" },
md: { width: 120 },
lg: { width: 120 },
},
},
{
......
......@@ -24,8 +24,8 @@ class GeneralConfig {
this.paste_data_images = true;
this.content_css = "/tinymce/customStyles.css";
this.formats = {
alignleft: { selector: "img", styles: { float: "left", margin: "10px" } },
alignright: { selector: "img", styles: { float: "right", margin: "10px" } },
alignleft: { selector: "img", styles: { float: "left", margin: 10 } },
alignright: { selector: "img", styles: { float: "right", margin: 10 } },
bullist: { selector: "ul", styles: { display: "inline-block" } },
};
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment