Skip to content

Fixed CSS alignment for skeleton tab buttons #8451

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

Merged
merged 3 commits into from
Mar 18, 2025
Merged

Fixed CSS alignment for skeleton tab buttons #8451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9c95a02
fixed skeleton tab buttons CSS alignment
hotzenklotz Mar 17, 2025
584f892
Update frontend/stylesheets/trace_view/_right_menu.less
hotzenklotz Mar 18, 2025
ce307bb
Merge branch 'master' into fix-skeleton-buttons
hotzenklotz Mar 18, 2025
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
94 changes: 46 additions & 48 deletions frontend/javascripts/oxalis/view/right-border-tabs/trees_tab/skeleton_tab_view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -847,58 +847,56 @@ class SkeletonTabView extends React.PureComponent<Props, State> {
>
<Spin />
</Modal>
<Space.Compact className="compact-icons">
<div className="compact-buttons">
<AdvancedSearchPopover
onSelect={this.handleSearchSelect}
data={this.getTreeAndTreeGroupList(trees, treeGroups, orderAttribute)}
searchKey="name"
provideShortcut
targetId={treeTabId}
onSelectAllMatches={this.handleSelectAllMatchingTrees}
>
<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>
<ButtonComponent
onClick={this.handleDelete}
title={isEditingDisabled ? isEditingDisabledMessage : "Delete Selected Trees"}
disabled={isEditingDisabled}
>
<i className="far fa-trash-alt" />
</ButtonComponent>
<Space.Compact className="compact-icons compact-wrap">
<AdvancedSearchPopover
onSelect={this.handleSearchSelect}
data={this.getTreeAndTreeGroupList(trees, treeGroups, orderAttribute)}
searchKey="name"
provideShortcut
targetId={treeTabId}
onSelectAllMatches={this.handleSelectAllMatchingTrees}
>
<ButtonComponent
onClick={this.toggleAllTrees}
title="Toggle Visibility of All Trees (1)"
disabled={isEditingDisabled}
title="Open the search via CTRL + Shift + F"
className="firstButton"
>
<i className="fas fa-toggle-on" />
<SearchOutlined />
</ButtonComponent>
<ButtonComponent
onClick={this.toggleInactiveTrees}
title="Toggle Visibility of Inactive Trees (2)"
disabled={isEditingDisabled}
>
<i className="fas fa-toggle-off" />
</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 style={{ overflow: "clip" }} className="lastButton">
More
<DownOutlined />
</ButtonComponent>
<Dropdown menu={this.getActionsDropdown()} trigger={["click"]}>
<ButtonComponent style={{ overflow: "clip" }} className="lastButton">
More
<DownOutlined />
</ButtonComponent>
</Dropdown>
</div>
</Dropdown>
</Space.Compact>
<Space.Compact className="compact-icons compact-items">
<ButtonComponent
Expand Down
22 changes: 6 additions & 16 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,25 +139,15 @@
}
}

.compact-buttons{
display: "inline-flex";
flex-wrap: "wrap";
.compact-wrap {
// Should only be used with antd <Space.Compact>
flex-wrap: wrap;

button{
border-radius: 0px;
margin-inline: -1px;
button{
// Slightly shift buttons up to prevent double borders when wrapping in flex container occurs
margin-top: -1px;
}
}

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 {
Expand Down