fix(ui): broken buttons in the bulk upload drawer (#8926)

Fixes the mobile bottom interface and the arrow buttons in the actions
at the top.

Before:

![image](https://github.com/user-attachments/assets/26902eb0-5d1a-480d-b6f5-c36a800a6bff)


After:

![image](https://github.com/user-attachments/assets/7837684c-37a7-4b2e-a875-47972cf1671f)
This commit is contained in:
Paul
2024-10-30 11:29:58 -06:00
committed by GitHub
parent 01ccbd48b0
commit d38d7b8932
3 changed files with 52 additions and 2 deletions

View File

@@ -33,6 +33,10 @@
width: calc(var(--base) * 1.2); width: calc(var(--base) * 1.2);
height: calc(var(--base) * 1.2); height: calc(var(--base) * 1.2);
svg {
max-width: 1rem;
}
&:hover { &:hover {
background-color: var(--theme-elevation-200); background-color: var(--theme-elevation-200);
} }

View File

@@ -192,6 +192,10 @@
display: none; display: none;
margin: 0; margin: 0;
padding-block: 0; padding-block: 0;
&__text {
display: none;
}
} }
&__header__mobileDocActions { &__header__mobileDocActions {
@@ -245,7 +249,17 @@
&__headerTopRow { &__headerTopRow {
border-top: 1px solid var(--theme-border-color); border-top: 1px solid var(--theme-border-color);
padding-block: calc(var(--base) * 0.8); padding-block: 0 calc(var(--base) * 0.8) 0;
}
&__header__text {
display: none;
}
&__header__actions {
flex-grow: 2;
display: flex;
justify-content: flex-end;
} }
&__header__mobileDocActions { &__header__mobileDocActions {
@@ -268,7 +282,31 @@
&__toggler { &__toggler {
padding-right: 0; padding-right: 0;
display: block; padding-left: 0;
padding-top: calc(var(--base) * 0.8);
padding-bottom: calc(var(--base) * 0.8);
display: flex;
justify-content: flex-end;
flex-grow: 1;
.btn__label {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
&__text {
display: flex;
}
svg {
max-width: 1.5rem;
}
.btn__content {
width: 100%;
}
} }
.btn { .btn {

View File

@@ -98,6 +98,14 @@ export function FileSidebar() {
className={`${baseClass}__toggler`} className={`${baseClass}__toggler`}
onClick={() => setShowFiles((prev) => !prev)} onClick={() => setShowFiles((prev) => !prev)}
> >
<span className={`${baseClass}__toggler__label`}>
<strong
title={`${totalFileCount} ${t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}`}
>
{totalFileCount}{' '}
{t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}
</strong>
</span>
<ChevronIcon direction={showFiles ? 'down' : 'up'} /> <ChevronIcon direction={showFiles ? 'down' : 'up'} />
</Button> </Button>