lee/wanderer
1
0
Fork 0
mirror of https://github.com/wanderer-industries/wanderer synced 2025-12-12 02:35:42 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix: improve structure widget styling (#127)

Browse Source
This commit is contained in:
guarzo
2025-01-21 03:47:40 -05:00
committed by GitHub
parent 30b0556d47
commit 4633d26517
3 changed files with 86 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/SystemStructures.tsx
View File

@@ -70,6 +70,11 @@ export const SystemStructures: React.FC = () => {
<WdImgButton
className={`${PrimeIcons.CLOCK} text-sky-400 hover:text-sky-200 transition duration-300`}
onClick={handlePasteTimer}
tooltip={{
position: TooltipPosition.left,
// @ts-ignore
content: 'Add Structures/Timer',
}}
/>
<WdImgButton
className={PrimeIcons.QUESTION_CIRCLE}

40
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/SystemStructuresContent/SystemStructuresContent.module.scss
View File

@@ -1,18 +1,24 @@
.TableRowCompact {
height: 8px;
max-height: 8px;
font-size: 12px !important;
line-height: 8px;
}
.Table {
font-size: 12px;
border-collapse: collapse;
}
.TableRowCompact {
height: 8px;
max-height: 8px;
font-size: 12px !important;
line-height: 8px;
}
.Tooltip {
white-space: pre-line; // or pre-wrap
line-height: 1.2rem;
}
.Table {
font-size: 12px;
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
.Table .p-datatable-tbody > tr > td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.Tooltip {
white-space: pre-line;
line-height: 1.2rem;
}

64
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemStructures/SystemStructuresContent/SystemStructuresContent.tsx
View File

@@ -63,6 +63,7 @@ export const SystemStructuresContent: React.FC<SystemStructuresContentProps> = (
size="small"
sortMode="single"
rowHover
style={{ tableLayout: 'fixed', width: '100%' }}
onRowClick={handleRowClick}
onRowDoubleClick={handleRowDoubleClick}
rowClassName={rowData => {
@@ -74,11 +75,56 @@ export const SystemStructuresContent: React.FC<SystemStructuresContentProps> = (
);
}}
>
<Column header="Type" body={renderTypeCell} style={{ width: '160px' }} />
<Column field="name" header="Name" style={{ width: '120px' }} />
<Column header="Owner" body={renderOwnerCell} style={{ width: '120px' }} />
<Column field="status" header="Status" style={{ width: '100px' }} />
<Column header="Timer" body={renderTimerCell} style={{ width: '110px' }} />
<Column
header="Type"
body={renderTypeCell}
style={{
width: '160px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
/>
<Column
field="name"
header="Name"
style={{
width: '120px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
/>
<Column
header="Owner"
body={renderOwnerCell}
style={{
width: '120px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
/>
<Column
field="status"
header="Status"
style={{
width: '100px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
/>
<Column
header="Timer"
body={renderTimerCell}
style={{
width: '110px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
/>
<Column
body={(rowData: StructureItem) => (
<i
@@ -90,7 +136,13 @@ export const SystemStructuresContent: React.FC<SystemStructuresContentProps> = (
}}
/>
)}
style={{ width: '40px', textAlign: 'center' }}
style={{
width: '40px',
textAlign: 'center',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
/>
</DataTable>
</div>