Commit 22b1c4c0 authored by Axel Bocciarelli's avatar Axel Bocciarelli
Browse files

Turn some global styles into CSS modules

parent 03515b2a
import React from 'react';
import { Breadcrumb, Glyphicon, Label, Navbar } from 'react-bootstrap';
import { Link, useLocation } from 'react-router-dom';
import styles from './BreadCrumbs.module.css';
function BreadCrumbs(props) {
const { breadcrumbs } = props;
......@@ -9,10 +10,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: 15 }}
>
<Navbar className={styles.backBar} fluid>
<Link to={{ pathname, search, state: { scrollPosition } }}>
<Glyphicon glyph="arrow-left" style={{ marginRight: 10 }} />
{title}
......@@ -26,14 +24,14 @@ function BreadCrumbs(props) {
}
return (
<Navbar className="breadcrumbs-bar">
<Breadcrumb>
<Navbar className={styles.bar} fluid>
<Breadcrumb className={styles.list}>
{breadcrumbs.map((item, i) => {
if (i === breadcrumbs.length - 1) {
return (
<li key={i} className="active">
{item.badge && (
<Label className="breadcrumb__badge">{item.badge}</Label>
<Label className={styles.badge}>{item.badge}</Label>
)}
{item.name}
</li>
......
.navbar-brand {
display: flex;
align-items: center;
}
.breadcrumbs-bar {
.bar {
min-height: 0;
border-radius: 0;
border-left: 0;
border-right: 0;
font-size: 15px;
}
.backBar {
composes: bar;
padding: 8px 0;
}
.breadcrumb {
.list {
margin-bottom: 0;
padding-left: 0;
padding-right: 0;
border-radius: 0;
font-size: 15px;
}
.breadcrumb .active {
font-weight: 700;
}
.breadcrumb a[aria-disabled] {
color: #777;
.list :global(.active) {
font-weight: bold;
}
.breadcrumb__badge {
.badge {
margin-right: 5px;
font-size: 15px;
}
span.navbar-brand {
color: #9d9d9d !important;
}
import React from 'react';
import { Table } from 'react-bootstrap';
import './ParameterTableWidget.css';
import styles from './ParameterTableWidget.module.css';
class ParameterTableWidget extends React.Component {
getColumnNameClass(value) {
if (!value || value === '' || value === null) {
return 'gray-out';
}
}
getColumnValueClass(value) {
if (!value || value === '' || value === null) {
return 'gray-out';
}
return 'value';
}
getRow(name, value) {
return (
<tr key={name}>
<td className={this.getColumnNameClass(value)}>{name}</td>
<td className={this.getColumnValueClass(value)}>{value}</td>
</tr>
);
}
getColumns(names, values) {
return (
<tbody>{names.map((name, i) => this.getRow(names[i], values[i]))}</tbody>
);
}
function ParameterTableWidget(props) {
const { names, values, parameters, header, striped = true } = props;
const parameterNames = names?.trim().split(' ');
const parameterValues = values?.trim().split(' ');
getHeader(name) {
if (name) {
return (
const allParams = [
...(parameterNames && parameterValues
? parameterNames.map((name, i) => ({ name, value: parameterValues[i] }))
: []),
...(parameters || []),
];
return (
<Table striped={striped} condensed>
{header && (
<thead>
<tr>
<th colSpan="2">{name}</th>
<th colSpan="2">{header}</th>
</tr>
</thead>
);
}
}
render() {
let parameterNames = [];
let parameterValues = [];
if (this.props.names && this.props.values) {
parameterNames = this.props.names.trim().split(' ');
parameterValues = this.props.values.trim().split(' ');
}
if (this.props.parameters) {
for (const i in this.props.parameters) {
parameterNames.push(this.props.parameters[i].name);
parameterValues.push(this.props.parameters[i].value);
}
}
const { striped = true } = this.props;
return (
<Table striped={striped} condensed hover>
{this.getHeader(this.props.header)}
{this.getColumns(parameterNames, parameterValues)}
</Table>
);
}
)}
<tbody>
{allParams.map(({ name, value }) => (
<tr
key={name}
className={styles.row}
data-empty={!value || undefined}
>
<td>{name}</td>
<td>{value}</td>
</tr>
))}
</tbody>
</Table>
);
}
export default ParameterTableWidget;
.gray-out {
.row[data-empty] > td {
color: #e7e5e5;
border: 0 solid white;
background-color: white;
}
.value {
.row:not([data-empty]) > td:last-child {
font-weight: bold;
}
......@@ -29,8 +29,8 @@ import {
import LogbookPager from '../LogbookPager';
import TagListInLine from '../Tag/TagListInLine';
import EventIcon from './EventIcon';
import './eventList.css';
import { makeFullScreen } from '../../../helpers';
import styles from './EventList.module.css';
// Expose on window to use as `onClick` handler on images
window.makeFullScreen = makeFullScreen;
......@@ -214,7 +214,10 @@ export class Event extends React.Component {
<td style={{ width: 16, border: 0 }}>
<EventIcon event={event} />
</td>
<td className="borderTopSeparatorBetweenEvents" style={{ width: 16 }}>
<td
className={styles.borderTopSeparatorBetweenEvents}
style={{ width: 16 }}
>
<OverlayTrigger
placement="right"
overlay={
......@@ -237,7 +240,10 @@ export class Event extends React.Component {
</span>
</OverlayTrigger>
</td>
<td className="borderTopSeparatorBetweenEvents" style={{ width: 30 }}>
<td
className={styles.borderTopSeparatorBetweenEvents}
style={{ width: 30 }}
>
<Button
bsStyle="default"
bsSize="small"
......@@ -247,9 +253,12 @@ export class Event extends React.Component {
{getButtonIcon(event)}
</Button>
</td>
<td className="borderTopSeparatorBetweenEvents" style={{ width: 16 }} />
<td
className="borderTopSeparatorBetweenEventsInline"
className={styles.borderTopSeparatorBetweenEvents}
style={{ width: 16 }}
/>
<td
className={styles.borderTopSeparatorBetweenEventsInline}
style={{
paddingBottom: 0,
backgroundColor: 'white',
......@@ -274,7 +283,10 @@ export class Event extends React.Component {
)}
</div>
</td>
<td className="borderTopSeparatorBetweenEvents" style={{ width: 200 }}>
<td
className={styles.borderTopSeparatorBetweenEvents}
style={{ width: 200 }}
>
<TagListInLine tags={event.tag} />
</td>
</tr>
......
......@@ -7,10 +7,10 @@ import BreadCrumbs from '../Breadcrumbs/BreadCrumbs';
import ManagerMenu from './ManagerMenu';
import keycloak from '../../config/sso/keycloak';
import './glyphicon-spinner.css';
import './Menu.css';
import { useSelector, useDispatch } from 'react-redux';
import { doLogOut } from '../../actions/login';
import { fetchInvestigationsAsInstrumentScientist } from '../../actions/investigations';
import styles from './Menu.module.css';
function Menu() {
const user = useSelector((state) => state.user);
......@@ -36,7 +36,7 @@ function Menu() {
if (!sessionId) {
return (
<Navbar staticTop fluid inverse collapseOnSelect>
<Navbar className={styles.menu} staticTop fluid inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<Link to="/">{UI.menu.applicationTitle}</Link>
......@@ -49,9 +49,9 @@ function Menu() {
return (
<div>
<Navbar staticTop fluid inverse collapseOnSelect>
<Navbar className={styles.menu} staticTop fluid inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<Navbar.Brand className={styles.logo}>
<Link to="/">{UI.menu.applicationTitle}</Link>
</Navbar.Brand>
<Navbar.Toggle />
......
.menu {
margin-bottom: 0;
}
.logo {
display: flex;
align-items: center;
}
span.doiBadge {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #fff;
background: #000;
text-decoration: none;
padding: 2px 0 2px 4px;
border-color: #000;
}
span.doiBadge a {
color: #fff;
background: #09c;
text-decoration: none;
margin-left: 4px;
padding: 2px 5px 2px 4px;
border-radius: 0 5px 5px 0;
}
import React from 'react';
import { Glyphicon } from 'react-bootstrap';
import './DOIBadge.css';
import styles from './DOIBadge.module.css';
function DOIBadge(props) {
const { doi } = props;
......@@ -15,12 +15,15 @@ function DOIBadge(props) {
const doiUrl = `https://doi.esrf.fr/${doi}`;
return (
<span className="doiBadge borderRadius-5">
<a
className={styles.badge}
target="_blank"
rel="noopener noreferrer"
href={doiUrl}
>
DOI
<a target="_blank" rel="noopener noreferrer" href={doiUrl}>
{doi}
</a>
</span>
<span className={styles.doi}>{doi}</span>
</a>
);
}
......
.badge {
display: inline-flex;
padding-left: 5px;
overflow: hidden;
background-color: #000;
border-radius: 5px;
line-height: 1.6;
color: #fff !important;
text-decoration: none !important;
}
.doi {
background-color: #09c;
margin-left: 5px;
padding: 0 5px;
}
.badge:hover > .doi {
background-color: #006a8d;
}
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