Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-11 02:03:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

fixes for editor and tabs when names too long

Browse Source 
* coupled some of the styles to avoid breaking this later on
* added tooltip incase its too long/ too small
* changes to use elipsis and RTL to read the end of file name
This commit is contained in:
phyzical 2022-02-09 00:12:37 +08:00
parent 9ddb1c4379
commit d586743bf6
1 changed files with 39 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/ScriptEditor/ui/ScriptEditorRoot.tsx
View File

@ -754,7 +754,11 @@ export function Root(props: IProps): React.ReactElement {
// 44px bottom tool bar + 16px margin // 44px bottom tool bar + 16px margin
// + vim bar 34px // + vim bar 34px
const editorHeight = dimensions.height - (130 + (options.vim ? 34 : 0)); const editorHeight = dimensions.height - (130 + (options.vim ? 34 : 0));
const tabsMaxWidth = 1640
const tabMargin = 5
const tabMaxWidth = openScripts.length ? (tabsMaxWidth / openScripts.length) - tabMargin : 0
const tabIconWidth = 25
const tabTextWidth = tabMaxWidth - (tabIconWidth * 2)
return ( return (
<> <>
<div style={{ display: currentScript !== null ? "block" : "none", height: "100%", width: "100%" }}> <div style={{ display: currentScript !== null ? "block" : "none", height: "100%", width: "100%" }}>
@ -762,7 +766,7 @@ export function Root(props: IProps): React.ReactElement {
<Droppable droppableId="tabs" direction="horizontal"> <Droppable droppableId="tabs" direction="horizontal">
{(provided, snapshot) => ( {(provided, snapshot) => (
<Box <Box
maxWidth="1640px" maxWidth={`${tabsMaxWidth}px`}
display="flex" display="flex"
flexDirection="row" flexDirection="row"
alignItems="center" alignItems="center"
@ -778,8 +782,8 @@ export function Root(props: IProps): React.ReactElement {
> >
{openScripts.map(({ fileName, hostname }, index) => { {openScripts.map(({ fileName, hostname }, index) => {
const iconButtonStyle = { const iconButtonStyle = {
maxWidth: "25px", maxWidth: `${tabIconWidth}px`,
minWidth: "25px", minWidth: `${tabIconWidth}px`,
minHeight: '38.5px', minHeight: '38.5px',
maxHeight: '38.5px', maxHeight: '38.5px',
...(currentScript?.fileName === openScripts[index].fileName ? { ...(currentScript?.fileName === openScripts[index].fileName ? {
@ -792,6 +796,8 @@ export function Root(props: IProps): React.ReactElement {
color: Settings.theme.secondary color: Settings.theme.secondary
}) })
}; };
const scriptTabText = `${hostname}:~/${fileName} ${dirty(index)}`
return ( return (
<Draggable <Draggable
key={fileName + hostname} key={fileName + hostname}
@ -806,31 +812,39 @@ export function Root(props: IProps): React.ReactElement {
{...provided.dragHandleProps} {...provided.dragHandleProps}
style={{ style={{
...provided.draggableProps.style, ...provided.draggableProps.style,
marginRight: "5px", minWidth: '200px',
maxWidth: `${tabMaxWidth}px`,
marginRight: `${tabMargin}px`,
flexShrink: 0, flexShrink: 0,
border: '1px solid ' + Settings.theme.well, border: '1px solid ' + Settings.theme.well,
}} }}
> >
<Button <Tooltip title={scriptTabText}>
onClick={() => onTabClick(index)} <Button
onMouseDown={e => { onClick={() => onTabClick(index)}
e.preventDefault(); onMouseDown={e => {
if (e.button === 1) onTabClose(index); e.preventDefault();
}} if (e.button === 1) onTabClose(index);
style={{ }}
...(currentScript?.fileName === openScripts[index].fileName ? { style={{
background: Settings.theme.button, maxWidth: `${tabTextWidth}px`,
borderColor: Settings.theme.button, overflow: "hidden",
color: Settings.theme.primary ...(currentScript?.fileName === openScripts[index].fileName ? {
} : { background: Settings.theme.button,
background: Settings.theme.backgroundsecondary, borderColor: Settings.theme.button,
borderColor: Settings.theme.backgroundsecondary, color: Settings.theme.primary
color: Settings.theme.secondary } : {
}) background: Settings.theme.backgroundsecondary,
}} borderColor: Settings.theme.backgroundsecondary,
> color: Settings.theme.secondary
{hostname}:~/{fileName} {dirty(index)} })
</Button> }}
>
<span style={{ overflow: 'hidden', direction: 'rtl', textOverflow: "ellipsis" }}>
{scriptTabText}
</span>
</Button>
</Tooltip>
<Tooltip title="Overwrite editor content with saved file content"> <Tooltip title="Overwrite editor content with saved file content">
<Button onClick={() => onTabUpdate(index)} style={iconButtonStyle} > <Button onClick={() => onTabUpdate(index)} style={iconButtonStyle} >
<SyncIcon fontSize='small' /> <SyncIcon fontSize='small' />