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

Enrich styleguide with new features, rules and changes

Browse Source 
The styleguide for usage of visual elements has not been updated for a long time. In the course of this story it should be adapted to the current standards and rules. In addition, heavy violations were rectified directly.
This commit is contained in:
Florian Scholdei
2021-01-28 12:46:42 +01:00
committed by GitHub
parent 0046c78b40
commit 57c9484d41
12 changed files with 2530 additions and 1003 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Apply test ids to production builds for usage in e2e tests ([#1499](https://github.com/scm-manager/scm-manager/pull/1499)) - Apply test ids to production builds for usage in e2e tests ([#1499](https://github.com/scm-manager/scm-manager/pull/1499))
- Bump google guava version to 30.1-jre - Bump google guava version to 30.1-jre
- Refactor table component so that it can be styled by styled-components ([#1503](https://github.com/scm-manager/scm-manager/pull/1503)) - Refactor table component so that it can be styled by styled-components ([#1503](https://github.com/scm-manager/scm-manager/pull/1503))
- Enrich styleguide with new features, rules and changes ([#1506](https://github.com/scm-manager/scm-manager/pull/1506))
### Fixed ### Fixed
- Add explicit provider setup for bouncy castle ([#1500](https://github.com/scm-manager/scm-manager/pull/1500)) - Add explicit provider setup for bouncy castle ([#1500](https://github.com/scm-manager/scm-manager/pull/1500))

2
scm-ui/ui-components/src/BranchSelector.stories.tsx
View File

@@ -42,4 +42,4 @@ const Wrapper = styled.div`
storiesOf("BranchSelector", module) storiesOf("BranchSelector", module)
.addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>) .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
.add("Default", () => <BranchSelector branches={branches} onSelectBranch={branchSelected} label="Select branch:" />); .add("Default", () => <BranchSelector branches={branches} onSelectBranch={branchSelected} label="Select Branch" />);

3
scm-ui/ui-components/src/Breadcrumb.tsx
View File

@@ -45,7 +45,6 @@ type Props = {
}; };
const PermaLinkWrapper = styled.div` const PermaLinkWrapper = styled.div`
margin: 1.2rem 0 0 1.5rem;
width: 16px; width: 16px;
height: 16px; height: 16px;
font-size: 13px; font-size: 13px;
@@ -132,7 +131,7 @@ const Breadcrumb: FC<Props> = ({ repository, branch, defaultBranch, revision, pa
return ( return (
<> <>
<div className="is-flex"> <div className="is-flex is-align-items-center">
<PermaLinkWrapper> <PermaLinkWrapper>
{copying ? ( {copying ? (
<Icon name="spinner fa-spin" /> <Icon name="spinner fa-spin" />

8
scm-ui/ui-components/src/CardColumnSmall.tsx
View File

@@ -51,10 +51,6 @@ const ContentRight = styled.div`
align-items: start; align-items: start;
`; `;
const CenteredItems = styled.div`
align-items: center;
`;
const StyledLink = styled(Link)` const StyledLink = styled(Link)`
color: inherit; color: inherit;
:hover { :hover {
@@ -75,10 +71,10 @@ const CardColumnSmall: FC<Props> = ({ link, avatar, contentLeft, contentRight, f
<div className="media"> <div className="media">
{renderAvatar} {renderAvatar}
<FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}> <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
<CenteredItems className="is-flex"> <div className="is-flex is-align-items-center">
<ContentLeft>{contentLeft}</ContentLeft> <ContentLeft>{contentLeft}</ContentLeft>
<ContentRight>{contentRight}</ContentRight> <ContentRight>{contentRight}</ContentRight>
</CenteredItems> </div>
{renderFooter} {renderFooter}
</FlexFullHeight> </FlexFullHeight>
</div> </div>

2
scm-ui/ui-components/src/DateElement.ts
View File

@@ -24,7 +24,7 @@
import styled from "styled-components"; import styled from "styled-components";
const DateElement = styled.time` const DateElement = styled.time`
border-bottom: 1px dotted rgba(219, 219, 219); border-bottom: 1px dotted rgb(219, 219, 219);
cursor: help; cursor: help;
`; `;

82
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -80,7 +80,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42" title="2020-04-09 15:07:42"
> >
2020-04-09 2020-04-09
@@ -160,7 +160,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-05-10 11:18:42" title="2020-05-10 11:18:42"
> >
2020-05-10 2020-05-10
@@ -260,7 +260,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42" title="2020-04-09 15:07:42"
> >
2020-04-09 2020-04-09
@@ -372,7 +372,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-12 18:29:42" title="2020-04-12 18:29:42"
> >
2020-04-12 2020-04-12
@@ -474,7 +474,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42" title="2020-04-09 15:07:42"
> >
2020-04-09 2020-04-09
@@ -633,7 +633,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42" title="2020-04-09 15:07:42"
> >
2020-04-09 2020-04-09
@@ -725,7 +725,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-05-10 11:18:42" title="2020-05-10 11:18:42"
> >
2020-05-10 2020-05-10
@@ -791,7 +791,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42" title="2020-04-09 15:07:42"
> >
2020-04-09 2020-04-09
@@ -912,7 +912,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-12 18:29:42" title="2020-04-12 18:29:42"
> >
2020-04-12 2020-04-12
@@ -955,7 +955,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42" title="2020-04-09 15:07:42"
> >
2020-04-09 2020-04-09
@@ -1119,7 +1119,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42" title="2020-04-09 15:07:42"
> >
2020-04-09 2020-04-09
@@ -1204,7 +1204,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-05-10 11:18:42" title="2020-05-10 11:18:42"
> >
2020-05-10 2020-05-10
@@ -1309,7 +1309,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42" title="2020-04-09 15:07:42"
> >
2020-04-09 2020-04-09
@@ -1426,7 +1426,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-12 18:29:42" title="2020-04-12 18:29:42"
> >
2020-04-12 2020-04-12
@@ -1533,7 +1533,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-04-09 15:07:42" title="2020-04-09 15:07:42"
> >
2020-04-09 2020-04-09
@@ -1625,7 +1625,7 @@ exports[`Storyshots BranchSelector Default 1`] = `
<label <label
className="label is-size-6" className="label is-size-6"
> >
Select branch: Select Branch
</label> </label>
</div> </div>
<div <div
@@ -1672,10 +1672,10 @@ exports[`Storyshots BreadCrumb Default 1`] = `
className="Breadcrumbstories__Wrapper-sc-1eq8sgz-0 hTbphm" className="Breadcrumbstories__Wrapper-sc-1eq8sgz-0 hTbphm"
> >
<div <div
className="is-flex" className="is-flex is-align-items-center"
> >
<div <div
className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 grYLJW" className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 eqtJhO"
> >
<span <span
className="tooltip has-tooltip-right" className="tooltip has-tooltip-right"
@@ -2356,7 +2356,7 @@ exports[`Storyshots CardColumn With hoverable date 1`] = `
className="level-item" className="level-item"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-03-23 09:26:01" title="2020-03-23 09:26:01"
> >
3 days ago 3 days ago
@@ -2374,7 +2374,7 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
className="CardColumnSmallstories__Wrapper-ofr817-0 eWDSlT" className="CardColumnSmallstories__Wrapper-ofr817-0 eWDSlT"
> >
<a <a
className="CardColumnSmall__StyledLink-tk9h0o-4 jDZRch" className="CardColumnSmall__StyledLink-tk9h0o-3 jGsrTe"
href="/foo/bar" href="/foo/bar"
onClick={[Function]} onClick={[Function]}
> >
@@ -2382,7 +2382,7 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
className="media" className="media"
> >
<figure <figure
className="CardColumnSmall__AvatarWrapper-tk9h0o-5 cEyGXM media-left" className="CardColumnSmall__AvatarWrapper-tk9h0o-4 evHbLN media-left"
> >
<i <i
className="fas fa-icons fa-2x fa-fw has-text-grey-light" className="fas fa-icons fa-2x fa-fw has-text-grey-light"
@@ -2392,7 +2392,7 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
className="CardColumnSmall__FlexFullHeight-tk9h0o-0 kqmVxI media-content text-box is-flex" className="CardColumnSmall__FlexFullHeight-tk9h0o-0 kqmVxI media-content text-box is-flex"
> >
<div <div
className="CardColumnSmall__CenteredItems-tk9h0o-3 gECiIv is-flex" className="is-flex is-align-items-center"
> >
<div <div
className="CardColumnSmall__ContentLeft-tk9h0o-1 irMufS" className="CardColumnSmall__ContentLeft-tk9h0o-1 irMufS"
@@ -2422,7 +2422,7 @@ exports[`Storyshots CardColumnSmall Minimal 1`] = `
className="CardColumnSmallstories__Wrapper-ofr817-0 eWDSlT" className="CardColumnSmallstories__Wrapper-ofr817-0 eWDSlT"
> >
<a <a
className="CardColumnSmall__StyledLink-tk9h0o-4 jDZRch" className="CardColumnSmall__StyledLink-tk9h0o-3 jGsrTe"
href="/foo/bar" href="/foo/bar"
onClick={[Function]} onClick={[Function]}
> >
@@ -2433,7 +2433,7 @@ exports[`Storyshots CardColumnSmall Minimal 1`] = `
className="CardColumnSmall__FlexFullHeight-tk9h0o-0 kqmVxI media-content text-box is-flex" className="CardColumnSmall__FlexFullHeight-tk9h0o-0 kqmVxI media-content text-box is-flex"
> >
<div <div
className="CardColumnSmall__CenteredItems-tk9h0o-3 gECiIv is-flex" className="is-flex is-align-items-center"
> >
<div <div
className="CardColumnSmall__ContentLeft-tk9h0o-1 irMufS" className="CardColumnSmall__ContentLeft-tk9h0o-1 irMufS"
@@ -4564,7 +4564,7 @@ exports[`Storyshots Date Date from now 1`] = `
> >
<p> <p>
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2009-06-30 18:30:00" title="2009-06-30 18:30:00"
> >
over 10 years ago over 10 years ago
@@ -4572,7 +4572,7 @@ exports[`Storyshots Date Date from now 1`] = `
</p> </p>
<p> <p>
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2019-06-30 18:30:00" title="2019-06-30 18:30:00"
> >
3 months ago 3 months ago
@@ -4580,7 +4580,7 @@ exports[`Storyshots Date Date from now 1`] = `
</p> </p>
<p> <p>
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2019-10-12 13:56:40" title="2019-10-12 13:56:40"
> >
less than a minute ago less than a minute ago
@@ -4588,7 +4588,7 @@ exports[`Storyshots Date Date from now 1`] = `
</p> </p>
<p> <p>
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2019-10-11 13:56:40" title="2019-10-11 13:56:40"
> >
1 day ago 1 day ago
@@ -4603,7 +4603,7 @@ exports[`Storyshots Date Short 1`] = `
> >
<p> <p>
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2009-06-30 18:30:00" title="2009-06-30 18:30:00"
> >
2009-06-30 2009-06-30
@@ -4611,7 +4611,7 @@ exports[`Storyshots Date Short 1`] = `
</p> </p>
<p> <p>
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2019-06-30 18:30:00" title="2019-06-30 18:30:00"
> >
2019-06-30 2019-06-30
@@ -4619,7 +4619,7 @@ exports[`Storyshots Date Short 1`] = `
</p> </p>
<p> <p>
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2019-10-12 13:56:40" title="2019-10-12 13:56:40"
> >
2019-10-12 2019-10-12
@@ -4627,7 +4627,7 @@ exports[`Storyshots Date Short 1`] = `
</p> </p>
<p> <p>
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2019-10-11 13:56:40" title="2019-10-11 13:56:40"
> >
2019-10-11 2019-10-11
@@ -48041,7 +48041,7 @@ exports[`Storyshots Navigation|Secondary Active when match 1`] = `
> >
<div> <div>
<p <p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label" className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
onClick={[Function]} onClick={[Function]}
> >
<i <i
@@ -48103,7 +48103,7 @@ exports[`Storyshots Navigation|Secondary Default 1`] = `
> >
<div> <div>
<p <p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label" className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
onClick={[Function]} onClick={[Function]}
> >
<i <i
@@ -48165,7 +48165,7 @@ exports[`Storyshots Navigation|Secondary Extension Point 1`] = `
> >
<div> <div>
<p <p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label" className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
onClick={[Function]} onClick={[Function]}
> >
<i <i
@@ -48253,7 +48253,7 @@ exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
> >
<div> <div>
<p <p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label" className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
onClick={[Function]} onClick={[Function]}
> >
<i <i
@@ -48572,7 +48572,7 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
className="level-item" className="level-item"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-03-23 09:26:01" title="2020-03-23 09:26:01"
> >
3 days ago 3 days ago
@@ -48717,7 +48717,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
className="level-item" className="level-item"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-03-23 09:26:01" title="2020-03-23 09:26:01"
> >
3 days ago 3 days ago
@@ -48865,7 +48865,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
className="level-item" className="level-item"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-03-23 09:26:01" title="2020-03-23 09:26:01"
> >
3 days ago 3 days ago
@@ -49010,7 +49010,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
className="level-item" className="level-item"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-03-23 09:26:01" title="2020-03-23 09:26:01"
> >
3 days ago 3 days ago
@@ -49162,7 +49162,7 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
className="level-item" className="level-item"
> >
<time <time
className="DateElement-sc-1schp8c-0 IMGpa" className="DateElement-sc-1schp8c-0 gkptML"
title="2020-03-23 09:26:01" title="2020-03-23 09:26:01"
> >
3 days ago 3 days ago

40
scm-ui/ui-components/src/modals/Modal.stories.tsx
View File

@@ -52,6 +52,24 @@ const text = `Mind-paralyzing change needed improbability vortex machine sorts s
// eslint-disable-next-line @typescript-eslint/no-empty-function // eslint-disable-next-line @typescript-eslint/no-empty-function
const doNothing = () => {}; const doNothing = () => {};
const withFormElementsBody = (
<>
<RadioList>
<Radio label="One" checked={true} helpText="The first one" />
<Radio label="Two" checked={false} helpText="The second one" />
</RadioList>
<hr />
<p>{text}</p>
<hr />
<Textarea label="Text" onChange={doNothing} />
</>
);
const withFormElementsFooter = (
<ButtonGroup>
<Button label="One" />
<Button label="Two" />
</ButtonGroup>
);
storiesOf("Modal|Modal", module) storiesOf("Modal|Modal", module)
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>) .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
@@ -66,21 +84,13 @@ storiesOf("Modal|Modal", module)
</CloseableModal> </CloseableModal>
)) ))
.add("With form elements", () => ( .add("With form elements", () => (
<NonCloseableModal> <Modal
<RadioList> body={withFormElementsBody}
<Radio label="One" checked={true} helpText="The first one" /> closeFunction={doNothing}
<Radio label="Two" checked={false} helpText="The second one" /> active={true}
</RadioList> title={"Hitchhiker Modal"}
<hr /> footer={withFormElementsFooter}
<p>{text}</p> />
<hr />
<Textarea label="Text" onChange={doNothing} />
<hr />
<ButtonGroup>
<Button label="One" />
<Button label="Two" />
</ButtonGroup>
</NonCloseableModal>
)) ))
.add("With long tooltips", () => { .add("With long tooltips", () => {
return ( return (

3
scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
View File

@@ -54,9 +54,6 @@ const Icon = styled.i<CollapsedProps>`
`; `;
const MenuLabel = styled.p<CollapsedProps>` const MenuLabel = styled.p<CollapsedProps>`
height: 3.2rem;
display: flex;
align-items: center;
justify-content: ${(props: CollapsedProps) => (props.collapsed ? "center" : "inherit")}; justify-content: ${(props: CollapsedProps) => (props.collapsed ? "center" : "inherit")};
cursor: pointer; cursor: pointer;
`; `;

3366
scm-ui/ui-styles/public/index.html
View File

File diff suppressed because it is too large Load Diff

13
scm-ui/ui-styles/src/scm.scss
View File

@@ -708,6 +708,9 @@ form .field:not(.is-grouped) {
} }
} }
.menu-label { .menu-label {
display: flex;
height: 3.2rem;
align-items: center;
color: #fff; color: #fff;
font-size: 1em; font-size: 1em;
font-weight: 600; font-weight: 600;
@@ -802,13 +805,11 @@ form .field:not(.is-grouped) {
} }
// modal // modal
.modal { .modal-card {
.modal-card { border-radius: 6px;
border-radius: 6px;
.modal-card-foot { .modal-card-foot {
justify-content: flex-end; // pulled-right justify-content: flex-end; // pulled-right
}
} }
} }

5
scm-ui/ui-styles/webpack.config.js
View File

@@ -50,9 +50,10 @@ module.exports = {
filename: "ui-styles.bundle.js" filename: "ui-styles.bundle.js"
}, },
devServer: { devServer: {
contentBase: path.join(__dirname, "public"), contentBase: [path.join(__dirname, "public"), path.join(__dirname, "..", "ui-webapp", "public")],
contentBasePublicPath: ["/", "/ui-webapp"],
compress: false, compress: false,
overlay: true, overlay: true,
port: 5000, port: 5000
} }
}; };

8
scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
View File

@@ -58,10 +58,6 @@ const Header = styled.div`
padding: 0.5em 0.75em; padding: 0.5em 0.75em;
`; `;
const VCenteredChild = styled.div`
align-items: center;
`;
const RightMarginIcon = styled(Icon)` const RightMarginIcon = styled(Icon)`
margin-right: 0.5em; margin-right: 0.5em;
`; `;
@@ -128,7 +124,7 @@ class Content extends React.Component<Props, State> {
return ( return (
<span className="has-cursor-pointer"> <span className="has-cursor-pointer">
<VCenteredChild className={classNames("media", "is-flex")}> <div className={classNames("media", "is-flex", "is-align-items-center")}>
<div className="media-content" onClick={this.toggleCollapse}> <div className="media-content" onClick={this.toggleCollapse}>
<RightMarginIcon name={icon} color="inherit" /> <RightMarginIcon name={icon} color="inherit" />
<span className="is-word-break">{file.name}</span> <span className="is-word-break">{file.name}</span>
@@ -151,7 +147,7 @@ class Content extends React.Component<Props, State> {
renderAll={true} renderAll={true}
/> />
</div> </div>
</VCenteredChild> </div>
</span> </span>
); );
} }