github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #10212 from overleaf/ii-dashboard-shorten-text-in-dropdowns

Browse source 
[web] Project dashboard add ellipsis to long text in the project filter dropdown on mobile

GitOrigin-RevId: 4b0d4e097ff0f26820c158086d8b089cbf1e364f
This commit is contained in:
Brian Gough 2022-11-04 10:05:02 +00:00 committed by Copybot
parent db15c83c35
commit 782294abae
4 changed files with 30 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx
View file

@ -78,7 +78,8 @@ function ProjectsDropdown() {
onToggle={open => setIsOpened(open)} onToggle={open => setIsOpened(open)}
> >
<Dropdown.Toggle bsSize="large" noCaret className="ps-0 btn-transparent"> <Dropdown.Toggle bsSize="large" noCaret className="ps-0 btn-transparent">
{title} <Icon type="angle-down" /> <span className="text-truncate me-1">{title}</span>
<Icon type="angle-down" />
</Dropdown.Toggle> </Dropdown.Toggle>
<Dropdown.Menu className="projects-dropdown-menu"> <Dropdown.Menu className="projects-dropdown-menu">
<Item filter="all" text={t('all_projects')} onClick={handleClose} /> <Item filter="all" text={t('all_projects')} onClick={handleClose} />

5
services/web/frontend/js/features/project-list/components/dropdown/sort-by-dropdown.tsx
View file

@ -47,13 +47,14 @@ function SortByDropdown() {
return ( return (
<Dropdown <Dropdown
id="projects-sort-dropdown" id="projects-sort-dropdown"
className="ms-auto" className="projects-sort-dropdown"
pullRight pullRight
open={isOpened} open={isOpened}
onToggle={open => setIsOpened(open)} onToggle={open => setIsOpened(open)}
> >
<Dropdown.Toggle bsSize="small" noCaret className="pe-0 btn-transparent"> <Dropdown.Toggle bsSize="small" noCaret className="pe-0 btn-transparent">
{title} <Icon type="angle-down" /> <span className="text-truncate me-1">{title}</span>
<Icon type="angle-down" />
</Dropdown.Toggle> </Dropdown.Toggle>
<Dropdown.Menu className="projects-dropdown-menu"> <Dropdown.Menu className="projects-dropdown-menu">
<MenuItem header>{t('sort_by')}:</MenuItem> <MenuItem header>{t('sort_by')}:</MenuItem>

20
services/web/frontend/stylesheets/app/project-list-react.less
View file

@ -77,6 +77,7 @@
} }
.project-list-main-react { .project-list-main-react {
max-width: 100%;
padding: @content-margin-vertical @grid-gutter-width / 2; padding: @content-margin-vertical @grid-gutter-width / 2;
} }
@ -539,7 +540,24 @@
} }
.projects-toolbar { .projects-toolbar {
flex-wrap: wrap; .dropdown,
.dropdown-toggle {
max-width: 100%;
}
.dropdown {
min-width: 0;
}
.dropdown-toggle {
display: inline-flex;
align-items: baseline;
}
}
.projects-sort-dropdown {
flex-shrink: 0;
margin-left: auto;
} }
#projects-types-dropdown { #projects-types-dropdown {

6
services/web/frontend/stylesheets/core/utilities.less
View file

@ -68,3 +68,9 @@
.overflow-scroll { .overflow-scroll {
overflow: scroll !important; overflow: scroll !important;
} }
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}