Skip to content

Commit abfbf67

Browse files
igoroctavianoigoroctaviano
authored
Revisit right panel #368 (#374)
* Add new ui * Adjustments
1 parent 5a7ce80 commit abfbf67

14 files changed

Lines changed: 543 additions & 235 deletions

‎craco.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ module.exports = {
1111
modifyVars: {
1212
'@layout-header-background': '#007ea3',
1313
'@primary-color': '#007ea3',
14+
'@collapse-header-bg': '#e0f2f7',
1415
'@processing-color': '#8cb8c6',
1516
'@success-color': '#3f9c35',
1617
'@warning-color': '#eeaf30',

‎src/App.dark.less‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,41 @@
2828
overflow: visible;
2929
}
3030

31+
.ant-collapse-header {
32+
font-weight: 600;
33+
border-top: 1px solid rgba(0, 126, 163, 0.5);
34+
border-bottom: 1px solid rgba(0, 126, 163, 0.5);
35+
}
36+
37+
.ant-collapse-item + .ant-collapse-item .ant-collapse-header {
38+
margin-top: -1px;
39+
}
40+
3141
.ant-menu-submenu-title {
3242
font-size: 'medium';
43+
background-color: rgba(0, 126, 163, 0.25);
44+
font-weight: 600;
45+
border-top: 1px solid rgba(0, 126, 163, 0.5);
46+
border-bottom: 1px solid rgba(0, 126, 163, 0.5);
47+
}
48+
49+
.ant-menu-submenu + .ant-menu-submenu .ant-menu-submenu-title {
50+
margin-top: -1px;
51+
}
52+
53+
/* First section in sidebar has no top border */
54+
.ant-layout-sider .ant-menu-inline > .ant-menu-submenu:first-child > .ant-menu-submenu-title {
55+
border-top: none;
56+
}
57+
58+
/* Settings drawer header border - matches section dividers (darker for contrast) */
59+
.slim-settings-drawer .ant-drawer-header {
60+
border-bottom: 1px solid rgba(0, 126, 163, 0.5);
61+
}
62+
63+
/* Remove gap between submenu header and list content */
64+
.ant-layout-sider .ant-list-item {
65+
padding: 0;
3366
}
3467

3568
.ol-overviewmap-box {

‎src/App.light.less‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,41 @@
2828
overflow: visible;
2929
}
3030

31+
.ant-collapse-header {
32+
font-weight: 600;
33+
border-top: 1px solid rgba(0, 126, 163, 0.3);
34+
border-bottom: 1px solid rgba(0, 126, 163, 0.3);
35+
}
36+
37+
.ant-collapse-item + .ant-collapse-item .ant-collapse-header {
38+
margin-top: -1px;
39+
}
40+
3141
.ant-menu-submenu-title {
3242
font-size: 'medium';
43+
background-color: #e0f2f7;
44+
font-weight: 600;
45+
border-top: 1px solid rgba(0, 126, 163, 0.3);
46+
border-bottom: 1px solid rgba(0, 126, 163, 0.3);
47+
}
48+
49+
.ant-menu-submenu + .ant-menu-submenu .ant-menu-submenu-title {
50+
margin-top: -1px;
51+
}
52+
53+
/* First section in sidebar has no top border */
54+
.ant-layout-sider .ant-menu-inline > .ant-menu-submenu:first-child > .ant-menu-submenu-title {
55+
border-top: none;
56+
}
57+
58+
/* Settings drawer header border - matches section dividers */
59+
.slim-settings-drawer .ant-drawer-header {
60+
border-bottom: 1px solid rgba(0, 126, 163, 0.3);
61+
}
62+
63+
/* Remove gap between submenu header and list content */
64+
.ant-layout-sider .ant-list-item {
65+
padding: 0;
3366
}
3467

3568
.ol-overviewmap-box {

‎src/App.tsx‎

Lines changed: 47 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import Header from './components/Header'
2020
import InfoPage from './components/InfoPage'
2121
import MemoryFooter from './components/MemoryFooter'
2222
import Worklist from './components/Worklist'
23+
import { SettingsProvider } from './contexts/SettingsContext'
2324
import { ValidationProvider } from './contexts/ValidationContext'
2425
import DicomWebManager from './DicomWebManager'
2526
import { StorageClasses } from './data/uids'
@@ -564,57 +565,61 @@ class App extends React.Component<AppProps, AppState> {
564565
<Route
565566
path="/studies/:studyInstanceUID/*"
566567
element={
567-
<Layout style={layoutStyle}>
568-
<Header
569-
app={appInfo}
570-
user={this.state.user}
571-
showWorklistButton={enableWorklist}
572-
onServerSelection={this.handleServerSelection}
573-
onUserLogout={isLogoutPossible ? onLogout : undefined}
574-
showServerSelectionButton={enableServerSelection}
575-
clients={this.state.clients}
576-
defaultClients={this.state.defaultClients}
577-
/>
578-
<Layout.Content style={layoutContentStyle}>
579-
<ParametrizedCaseViewer
580-
clients={this.state.clients}
581-
user={this.state.user}
582-
config={this.props.config}
568+
<SettingsProvider>
569+
<Layout style={layoutStyle}>
570+
<Header
583571
app={appInfo}
572+
user={this.state.user}
573+
showWorklistButton={enableWorklist}
574+
onServerSelection={this.handleServerSelection}
575+
onUserLogout={isLogoutPossible ? onLogout : undefined}
576+
showServerSelectionButton={enableServerSelection}
577+
clients={this.state.clients}
578+
defaultClients={this.state.defaultClients}
584579
/>
585-
</Layout.Content>
586-
{enableMemoryMonitoring && (
587-
<MemoryFooter enabled={enableMemoryMonitoring} />
588-
)}
589-
</Layout>
580+
<Layout.Content style={layoutContentStyle}>
581+
<ParametrizedCaseViewer
582+
clients={this.state.clients}
583+
user={this.state.user}
584+
config={this.props.config}
585+
app={appInfo}
586+
/>
587+
</Layout.Content>
588+
{enableMemoryMonitoring && (
589+
<MemoryFooter enabled={enableMemoryMonitoring} />
590+
)}
591+
</Layout>
592+
</SettingsProvider>
590593
}
591594
/>
592595
<Route
593596
path="/projects/:project/locations/:location/datasets/:dataset/dicomStores/:dicomStore/study/:studyInstanceUID/*"
594597
element={
595-
<Layout style={layoutStyle}>
596-
<Header
597-
app={appInfo}
598-
user={this.state.user}
599-
showWorklistButton={enableWorklist}
600-
onServerSelection={this.handleServerSelection}
601-
onUserLogout={isLogoutPossible ? onLogout : undefined}
602-
showServerSelectionButton={enableServerSelection}
603-
clients={this.state.clients}
604-
defaultClients={this.state.defaultClients}
605-
/>
606-
<Layout.Content style={layoutContentStyle}>
607-
<ParametrizedCaseViewer
608-
clients={this.state.clients}
609-
user={this.state.user}
610-
config={this.props.config}
598+
<SettingsProvider>
599+
<Layout style={layoutStyle}>
600+
<Header
611601
app={appInfo}
602+
user={this.state.user}
603+
showWorklistButton={enableWorklist}
604+
onServerSelection={this.handleServerSelection}
605+
onUserLogout={isLogoutPossible ? onLogout : undefined}
606+
showServerSelectionButton={enableServerSelection}
607+
clients={this.state.clients}
608+
defaultClients={this.state.defaultClients}
612609
/>
613-
</Layout.Content>
614-
{enableMemoryMonitoring && (
615-
<MemoryFooter enabled={enableMemoryMonitoring} />
616-
)}
617-
</Layout>
610+
<Layout.Content style={layoutContentStyle}>
611+
<ParametrizedCaseViewer
612+
clients={this.state.clients}
613+
user={this.state.user}
614+
config={this.props.config}
615+
app={appInfo}
616+
/>
617+
</Layout.Content>
618+
{enableMemoryMonitoring && (
619+
<MemoryFooter enabled={enableMemoryMonitoring} />
620+
)}
621+
</Layout>
622+
</SettingsProvider>
618623
}
619624
/>
620625
<Route

‎src/components/ClusteringSettings.tsx‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎src/components/Header.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import {
22
ApiOutlined,
3+
BugOutlined,
34
CheckOutlined,
45
FileSearchOutlined,
56
InfoOutlined,
6-
SettingOutlined,
77
StopOutlined,
88
UnorderedListOutlined,
99
UserOutlined,
@@ -29,6 +29,7 @@ import { NavLink } from 'react-router-dom'
2929
import { v4 as uuidv4 } from 'uuid'
3030
import appPackageJson from '../../package.json'
3131
import type { User } from '../auth'
32+
import { SettingsButton } from '../contexts/SettingsContext'
3233
import type DicomWebManager from '../DicomWebManager'
3334
import NotificationMiddleware, {
3435
NotificationMiddlewareEvents,
@@ -618,7 +619,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
618619
style={{ zIndex: 1001 }}
619620
>
620621
<Button
621-
icon={SettingOutlined}
622+
icon={BugOutlined}
622623
tooltip="Debug info"
623624
onClick={this.handleDebugButtonClick}
624625
/>
@@ -698,9 +699,10 @@ class Header extends React.Component<HeaderProps, HeaderState> {
698699
<Space direction="horizontal">
699700
{worklistButton}
700701
{infoButton}
701-
{debugButton}
702702
{dicomTagBrowserButton}
703703
{serverSelectionButton}
704+
{debugButton}
705+
<SettingsButton />
704706
{user}
705707
</Space>
706708
</Col>

‎src/components/SlideItem.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Menu } from 'antd'
1+
import { Menu, Typography } from 'antd'
22
// skipcq: JS-C1003
33
import * as dmv from 'dicom-microscopy-viewer'
44
import React from 'react'
@@ -143,6 +143,21 @@ class SlideItem extends React.Component<SlideItemProps, SlideItemState> {
143143
)}
144144
<ValidationWarning slide={this.props.slide} />
145145
</div>
146+
{this.props.slide.seriesDescription !== undefined &&
147+
this.props.slide.seriesDescription !== null &&
148+
this.props.slide.seriesDescription !== '' ? (
149+
<Typography.Text
150+
type="secondary"
151+
style={{
152+
display: 'block',
153+
marginTop: 4,
154+
fontSize: '0.75rem',
155+
lineHeight: 1.2,
156+
}}
157+
>
158+
{this.props.slide.seriesDescription}
159+
</Typography.Text>
160+
) : null}
146161
</Description>
147162
</Menu.Item>
148163
)

0 commit comments

Comments
 (0)