Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-10 23:45:44 +01:00
Code Issues Packages Projects Releases Activity

use text-overflow ellipsis for list of contributors

Browse Source
This commit is contained in:
Sebastian Sdorra
2020-06-10 08:12:44 +02:00
parent 23b0ea27df
commit 3c40608d4c
1 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx
View File

@@ -69,22 +69,36 @@ const countContributors = (changeset: Changeset) => {
return changeset.trailers.length + 1; return changeset.trailers.length + 1;
}; };
const ContributorLine = styled.div`
display: flex;
cursor: pointer;
`;
const ContributorColumn = styled.p`
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
`;
const CountColumn = styled.p`
text-align: right;
white-space: nowrap;
`;
const Contributors: FC<{ changeset: Changeset }> = ({ changeset }) => { const Contributors: FC<{ changeset: Changeset }> = ({ changeset }) => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
return ( return (
<> <>
<div className="level has-cursor-pointer" onClick={e => setOpen(!open)}> <ContributorLine onClick={e => setOpen(!open)}>
<div className="level-left"> <ContributorColumn>
<p> <Icon name={open ? "angle-down" : "angle-right"} /> <ChangesetAuthor changeset={changeset} />
<Icon name={open ? "angle-down" : "angle-right"} /> <ChangesetAuthor changeset={changeset} /> </ContributorColumn>
</p> <CountColumn>
</div> (<span className="has-text-link">{countContributors(changeset)} Contributors</span>)
<div className="level-right"> </CountColumn>
<p> </ContributorLine>
(<span className="has-text-link">{countContributors(changeset)} Contributors</span>)
</p>
</div>
</div>
{open && <ContributorTable changeset={changeset} />} {open && <ContributorTable changeset={changeset} />}
</> </>
); );
@@ -127,7 +141,7 @@ class ChangesetDetails extends React.Component<Props, State> {
<AvatarImage person={changeset.author} /> <AvatarImage person={changeset.author} />
</RightMarginP> </RightMarginP>
</AvatarWrapper> </AvatarWrapper>
<div className="media-content"> <div className="media-content is-ellipsis-overflow">
<Contributors changeset={changeset} /> <Contributors changeset={changeset} />
<p> <p>
<Trans i18nKey="repos:changeset.summary" components={[id, date]} /> <Trans i18nKey="repos:changeset.summary" components={[id, date]} />