corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1938301 - Wrap tools and extensions when sidebar is expanded r=sidebar-reviewers,desktop-theme-reviewers,kcochrane

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D232675
This commit is contained in:
Nikki Sharpley
2024-12-26 15:17:48 +00:00
parent 00ac6faf8b
commit 80815e4664
2 changed files with 22 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
browser/components/sidebar/sidebar-main.css
View File

@@ -71,25 +71,16 @@
.tools-and-extensions[orientation="horizontal"] {
:host([expanded]) & {
/* button width + extra inline padding to extend to the edge of sidebar + inline padding between adjacent buttons */
--first-last-button-width: calc(var(--button-size-icon) + var(--space-medium) + var(--space-xxsmall));
display: grid;
grid-template-columns: var(--first-last-button-width) repeat(4, calc(var(--button-size-icon) + var(--space-xsmall))) var(--first-last-button-width);
}
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row;
justify-content: flex-start;
gap: var(--space-xxsmall);
padding-inline: var(--space-medium);
padding-block-end: var(--space-small);
> moz-button.tools-overflow {
width: min-content;
--button-outer-padding-inline: var(--space-xxsmall);
--button-outer-padding-block: var(--space-xxsmall);
/* First button in every row */
&:nth-of-type(6n + 1) {
--button-outer-padding-inline-start: var(--space-medium);
}
/* Last button in every row */
&:nth-of-type(6n) {
--button-outer-padding-inline-end: var(--space-medium);
.tools-overflow {
width: unset;
}
}
}
@@ -98,13 +89,6 @@
--button-outer-padding-block-end: var(--space-medium);
}
/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "sidebar.verticalTabs") {
.tools-and-extensions > moz-button:last-of-type {
--button-outer-padding-block-end: var(--space-medium);
}
}
@media (prefers-reduced-motion: no-preference) {
moz-button::part(moz-button-label) {
opacity: 0;

17
browser/components/sidebar/sidebar-main.mjs
View File

@@ -383,10 +383,12 @@ export default class SidebarMain extends MozLitElement {
class="tools-and-extensions actions-list"
orientation=${this.isToolsOverflowing() ? "horizontal" : "vertical"}
>
${repeat(
this.getToolsAndExtensions().values(),
action => action.view,
action => this.entrypointTemplate(action)
${when(!this.isToolsOverflowing(), () =>
repeat(
this.getToolsAndExtensions().values(),
action => action.view,
action => this.entrypointTemplate(action)
)
)}
${when(window.SidebarController.sidebarVerticalTabsEnabled, () =>
repeat(
@@ -395,6 +397,13 @@ export default class SidebarMain extends MozLitElement {
action => this.entrypointTemplate(action)
)
)}
${when(this.isToolsOverflowing(), () =>
repeat(
this.getToolsAndExtensions().values(),
action => action.view,
action => this.entrypointTemplate(action)
)
)}
</button-group>
${when(
!window.SidebarController.sidebarVerticalTabsEnabled,