Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove unnecessary scrollbars in skeleton tab #8148

Merged
merged 16 commits into from
Nov 11, 2024
Merged

Remove unnecessary scrollbars in skeleton tab #8148

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
2f89a3a
make button bar flexbox
knollengewaechs Oct 24, 2024
ecca1dc
Merge branch 'master' into remove-unnecessary-skeleton-scrollbars
knollengewaechs Oct 28, 2024
da97463
remove unnessecary scrollbars
knollengewaechs Oct 28, 2024
99d1c24
line break group names
knollengewaechs Nov 1, 2024
0aced03
merge master
knollengewaechs Nov 1, 2024
8993d7f
style buttons
knollengewaechs Nov 1, 2024
44cd2bb
remove stand-alone style
knollengewaechs Nov 4, 2024
6889bf5
Merge branch 'master' into remove-unnecessary-skeleton-scrollbars
knollengewaechs Nov 4, 2024
ee72df2
add changelog
knollengewaechs Nov 4, 2024
194cf92
merge master
knollengewaechs Nov 4, 2024
f56d7f0
Merge branch 'master' into remove-unnecessary-skeleton-scrollbars
MichaelBuessemeyer Nov 7, 2024
650e69a
adress review
knollengewaechs Nov 7, 2024
7961b65
Merge branch 'master' into remove-unnecessary-skeleton-scrollbars
knollengewaechs Nov 11, 2024
53cad36
Merge branch 'master' into remove-unnecessary-skeleton-scrollbars
knollengewaechs Nov 11, 2024
e0fd7b6
Wrap antd tree to enable scrolling while dragging (#8162)
MichaelBuessemeyer Nov 11, 2024
33c4c60
Merge branch 'master' into remove-unnecessary-skeleton-scrollbars
knollengewaechs Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segment_list_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ export function ColoredDotIcon({ colorRGBA }: { colorRGBA: Vector4 }) {
style={{
paddingLeft: "10px",
backgroundColor: rgbaCss,
alignSelf: "flex-start",
marginTop: 5,
}}
/>
);
Expand Down
97 changes: 52 additions & 45 deletions frontend/javascripts/oxalis/view/right-border-tabs/skeleton_tab_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -853,7 +853,7 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
);

return (
<div id={treeTabId} className="padded-tab-content">
<div id={treeTabId} className="padded-tab-content" style={{ overflow: "hidden" }}>
<DomVisibilityObserver targetId={treeTabId}>
{(isVisibleInDom) =>
!isVisibleInDom ? null : (
Expand All @@ -871,52 +871,59 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
<Spin />
</Modal>
<Space.Compact className="compact-icons">
<AdvancedSearchPopover
onSelect={this.handleSearchSelect}
data={this.getTreeAndTreeGroupList(trees, treeGroups, orderAttribute)}
searchKey="name"
provideShortcut
targetId={treeTabId}
onSelectAllMatches={this.handleSelectAllMatchingTrees}
<div
style={{ display: "inline-flex", flexWrap: "wrap" }}
className="compact-buttons"
>
<ButtonComponent title="Open the search via CTRL + Shift + F">
<SearchOutlined />
<AdvancedSearchPopover
onSelect={this.handleSearchSelect}
data={this.getTreeAndTreeGroupList(trees, treeGroups, orderAttribute)}
searchKey="name"
provideShortcut
targetId={treeTabId}
>
<ButtonComponent
title="Open the search via CTRL + Shift + F"
className="firstButton"
>
<SearchOutlined />
</ButtonComponent>
</AdvancedSearchPopover>
<ButtonComponent
onClick={this.props.onCreateTree}
title={isEditingDisabled ? isEditingDisabledMessage : "Create new Tree (C)"}
disabled={isEditingDisabled}
>
<i className="fas fa-plus" />
</ButtonComponent>
</AdvancedSearchPopover>
<ButtonComponent
onClick={this.props.onCreateTree}
title={isEditingDisabled ? isEditingDisabledMessage : "Create new Tree (C)"}
disabled={isEditingDisabled}
>
<i className="fas fa-plus" />
</ButtonComponent>
<ButtonComponent
onClick={this.handleDelete}
title={isEditingDisabled ? isEditingDisabledMessage : "Delete Selected Trees"}
disabled={isEditingDisabled}
>
<i className="far fa-trash-alt" />
</ButtonComponent>
<ButtonComponent
onClick={this.toggleAllTrees}
title="Toggle Visibility of All Trees (1)"
disabled={isEditingDisabled}
>
<i className="fas fa-toggle-on" />
</ButtonComponent>
<ButtonComponent
onClick={this.toggleInactiveTrees}
title="Toggle Visibility of Inactive Trees (2)"
disabled={isEditingDisabled}
>
<i className="fas fa-toggle-off" />
</ButtonComponent>
<Dropdown menu={this.getActionsDropdown()} trigger={["click"]}>
<ButtonComponent>
More
<DownOutlined />
<ButtonComponent
onClick={this.handleDelete}
title={isEditingDisabled ? isEditingDisabledMessage : "Delete Selected Trees"}
disabled={isEditingDisabled}
>
<i className="far fa-trash-alt" />
</ButtonComponent>
</Dropdown>
<ButtonComponent
onClick={this.toggleAllTrees}
title="Toggle Visibility of All Trees (1)"
disabled={isEditingDisabled}
>
<i className="fas fa-toggle-on" />
</ButtonComponent>
<ButtonComponent
onClick={this.toggleInactiveTrees}
title="Toggle Visibility of Inactive Trees (2)"
disabled={isEditingDisabled}
>
<i className="fas fa-toggle-off" />
</ButtonComponent>
<Dropdown menu={this.getActionsDropdown()} trigger={["click"]}>
<ButtonComponent style={{ overflow: "clip" }} className="lastButton">
More
<DownOutlined />
</ButtonComponent>
</Dropdown>
</div>
</Space.Compact>
<Space.Compact className="compact-icons compact-items">
<ButtonComponent
Expand All @@ -939,7 +946,7 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
<i className="fas fa-arrow-right" />
</ButtonComponent>
<Dropdown menu={this.getSettingsDropdown()} trigger={["click"]}>
<ButtonComponent title="Sort">
<ButtonComponent title="Sort" style={{ overflow: "clip" }}>
<i className="fas fa-sort-alpha-down" />
</ButtonComponent>
</Dropdown>
Expand Down
10 changes: 4 additions & 6 deletions frontend/javascripts/oxalis/view/right-border-tabs/tree_hierarchy_renderers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,10 @@ export function renderTreeNode(

return (
<div
className="nowrap"
onContextMenu={(evt) =>
onOpenContextMenu(createMenuForTree(tree, props, hideContextMenu), evt)
}
style={{ wordBreak: "break-word" }}
>
<ColoredDotIcon colorRGBA={[...tree.color, 1.0]} />
{`(${tree.nodes.size()}) `} {maybeProofreadingIcon} {tree.name}
Expand Down Expand Up @@ -208,18 +208,16 @@ export function renderGroupNode(
const displayableName = name.trim() || "<Unnamed Group>";
return (
<div
className="nowrap"
onContextMenu={(evt) =>
onOpenContextMenu(
createMenuForTreeGroup(props, hideContextMenu, node, expandedNodeKeys),
evt,
)
}
style={{ wordBreak: "break-word" }}
>
<span>
<FolderOutlined className="icon-margin-right" />
{displayableName}
</span>
<FolderOutlined className="icon-margin-right" />
{displayableName}
</div>
);
}
Expand Down
19 changes: 19 additions & 0 deletions frontend/stylesheets/trace_view/_right_menu.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,25 @@
}
}

.compact-buttons{

button{
border-radius: 0px;
margin-inline: -1px;
margin-top: -1px;
Comment on lines +148 to +149
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The result looks great, thanks 🙏

But you please explain why a -1px is needed here? Does this move the inner buttons one px to the left and one 1 🤔?

}

button.firstButton{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

button.lastButton{
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
}

.margin-bottom {
margin-bottom: 10px;
}
Expand Down