Commit eeb30a7a authored by Alejandro De Maria Antolinos's avatar Alejandro De Maria Antolinos
Browse files

Merge branch 'issue_498-cosmetic_changes' into 'milestone-logbook-search-settings'

Issue 498 cosmetic changes

See merge request !513
parents 4969698e c2e68462
Pipeline #48169 passed with stage
in 4 minutes and 20 seconds
......@@ -37,6 +37,9 @@ function Event(props) {
id={event._id}
href={`events?page=${event.meta.page.currentPage}#${event._id}`}
style={{ fontWeight: 'bold' }}
title={moment(getOriginalEvent(event).creationDate).format(
moment.HTML5_FMT.DATETIME_LOCAL_SECONDS
)}
>
{moment(getOriginalEvent(event).creationDate).format(
moment.HTML5_FMT.TIME_SECONDS
......@@ -44,6 +47,11 @@ function Event(props) {
</a>
);
};
const onHandleClick = () => {
setCollapsed(!collapsed);
};
return events.map((event, index) => (
<tr key={index} style={{ backgroundColor: '#f0f0f6' }}>
<td
......@@ -87,7 +95,7 @@ function Event(props) {
backgroundColor: '#f8f8f8',
cursor: 'pointer',
}}
onClick={setCollapsed(!collapsed)}
onClick={onHandleClick}
>
.... {event.events.length} command lines more
</Label>
......
......@@ -76,7 +76,7 @@ function getItems(events, automaticCollapsing) {
* The list of the all events
*/
function EventList(props) {
const { events, isReleased } = props;
const { events, isReleased, automaticCollapsing } = props;
if (!events) {
return null;
......@@ -90,7 +90,7 @@ function EventList(props) {
<>
<Table responsive style={{ border: 0 }}>
<tbody>
{getItems(events, props.automaticCollapsing).map((event, index) => {
{getItems(events, automaticCollapsing).map((event, index) => {
if (event.type === 'date') {
return (
<tr
......
......@@ -91,6 +91,9 @@ export default function SettingLogbookMenuPanel(props) {
return isChecked(commandLineValue);
};
const switchWidth = 40;
const switchHeight = 20;
return (
<Panel>
<Panel.Heading>
......@@ -131,6 +134,7 @@ export default function SettingLogbookMenuPanel(props) {
</Grid>
</Col>
<Col md={2} sm={6} xs={12}>
<h4>Display</h4>
<Grid>
{!isReleased && (
<Row>
......@@ -141,10 +145,15 @@ export default function SettingLogbookMenuPanel(props) {
dispatch(setAutomaticRefresh(!automaticRefresh));
}}
checked={automaticRefresh}
width={switchWidth}
height={switchHeight}
className={styles.logbookSwitch}
/>
</Col>
<Col md={12} sm={12} xs={12}>
<span>Auto refresh logs</span>
<div className={styles.logbookTextSwitch}>
Auto refresh logs
</div>
</Col>
</Row>
)}
......@@ -157,16 +166,22 @@ export default function SettingLogbookMenuPanel(props) {
dispatch(setAutomaticCollapsing(!automaticCollapsing));
}}
checked={automaticCollapsing}
width={switchWidth}
height={switchHeight}
className={styles.logbookSwitch}
/>
</Col>
<Col md={12} sm={12} xs={12}>
<span>Group together command lines</span>
<div className={styles.logbookTextSwitch}>
Group together command lines
</div>
</Col>
</Row>
)}
</Grid>
</Col>
<Col md={2} sm={6} xs={12}>
<h4>Sort</h4>
<Grid>
<Row>
<Col md={12} sm={12} xs={12}>
......@@ -175,6 +190,7 @@ export default function SettingLogbookMenuPanel(props) {
onChange={() => {
dispatch(setIsSortingLatestEventsFirst(false));
}}
className={styles.logbookRadio}
>
Oldest log on top
</Radio>
......@@ -185,6 +201,7 @@ export default function SettingLogbookMenuPanel(props) {
onChange={() => {
dispatch(setIsSortingLatestEventsFirst(true));
}}
className={styles.logbookRadio}
>
Latest log on top
</Radio>
......
.returnCheckbox {
margin-bottom: 12px !important;
}
.logbookSwitch {
margin-top: 10px;
margin-left: -20px;
}
.logbookTextSwitch {
margin-top: 14px;
margin-left: -20px;
}
.logbookRadio {
margin-left: -20px;
}
......@@ -38,6 +38,15 @@ function EventsPage() {
const investigation = useResource(InvestigationResource.detailShape(), {
id: investigationId,
});
const automaticCollapsing = useSelector(
(state) => state.logbook.automaticCollapsing
);
const automaticRefresh = useSelector(
(state) => state.logbook.automaticRefresh
);
const isSortingLatestEventsFirst = useSelector(
(state) => state.logbook.isSortingLatestEventsFirst
);
const fetchingParams = {
investigationId,
......@@ -116,9 +125,16 @@ function EventsPage() {
limit={fetchingParams.limit}
sortOrder={fetchingParams.sortOrder}
sortBy={fetchingParams.sortBy}
automaticCollapsing={automaticCollapsing}
automaticRefresh={automaticRefresh}
isSortingLatestEventsFirst={isSortingLatestEventsFirst}
/>
<EventList events={events} isReleased={isReleased} />
<EventList
events={events}
isReleased={isReleased}
automaticCollapsing={automaticCollapsing}
/>
</Col>
</Row>
</Grid>
......
Supports Markdown
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