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

Replace styled-components with bulma helpers (#1783)

Browse Source 
Use Bulma helpers whenever possible instead of custom styled components.
This pull request replaces primarily color definitions, spacing and flex instructions.
This commit is contained in:
Florian Scholdei
2021-09-15 17:40:08 +02:00
committed by GitHub
parent 8a65660278
commit 2cb006d040
97 changed files with 1931 additions and 2244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
scm-ui/ui-webapp/src/repos/components/ImportFromUrlForm.tsx
View File

@@ -21,12 +21,10 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { FC, useState } from "react";
import { useTranslation } from "react-i18next";
import { RepositoryUrlImport } from "@scm-manager/ui-types";
import { InputField, validation } from "@scm-manager/ui-components";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
type Props = {
repository: RepositoryUrlImport;
@@ -35,14 +33,6 @@ type Props = {
disabled?: boolean;
};
const Column = styled.div`
padding: 0 0.75rem;
`;
const Columns = styled.div`
padding: 0.75rem 0 0;
`;
const ImportFromUrlForm: FC<Props> = ({ repository, onChange, setValid, disabled }) => {
const [t] = useTranslation("repos");
const [urlValidationError, setUrlValidationError] = useState(false);
@@ -65,8 +55,8 @@ const ImportFromUrlForm: FC<Props> = ({ repository, onChange, setValid, disabled
};
return (
<Columns className="columns is-multiline">
<Column className="column is-full">
<div className="columns is-multiline pt-3">
<div className="column is-full px-3">
<InputField
label={t("import.importUrl")}
onChange={handleImportUrlChange}
@@ -77,27 +67,27 @@ const ImportFromUrlForm: FC<Props> = ({ repository, onChange, setValid, disabled
disabled={disabled}
onBlur={handleImportUrlBlur}
/>
</Column>
<Column className="column is-half">
</div>
<div className="column is-half px-3">
<InputField
label={t("import.username")}
onChange={username => onChange({ ...repository, username })}
onChange={(username) => onChange({ ...repository, username })}
value={repository.username}
helpText={t("help.usernameHelpText")}
disabled={disabled}
/>
</Column>
<Column className="column is-half">
</div>
<div className="column is-half px-3">
<InputField
label={t("import.password")}
onChange={password => onChange({ ...repository, password })}
onChange={(password) => onChange({ ...repository, password })}
value={repository.password}
type="password"
helpText={t("help.passwordHelpText")}
disabled={disabled}
/>
</Column>
</Columns>
</div>
</div>
);
};

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

@@ -42,7 +42,7 @@ import {
Icon,
Level,
SignatureIcon,
Tooltip
Tooltip,
} from "@scm-manager/ui-components";
import ContributorTable from "./ContributorTable";
import { Link as ReactLink } from "react-router-dom";
@@ -54,14 +54,6 @@ type Props = {
fileControlFactory?: FileControlFactory;
};
const RightMarginP = styled.p`
margin-right: 1em;
`;
const BottomMarginLevel = styled(Level)`
margin-bottom: 1rem !important;
`;
const countContributors = (changeset: Changeset) => {
if (changeset.contributors) {
return changeset.contributors.length + 1;
@@ -69,16 +61,6 @@ const countContributors = (changeset: Changeset) => {
return 1;
};
const FlexRow = styled.div`
display: flex;
flex-direction: row;
`;
const ContributorLine = styled.div`
display: flex;
cursor: pointer;
`;
const ContributorColumn = styled.p`
flex-grow: 0;
overflow: hidden;
@@ -92,25 +74,7 @@ const CountColumn = styled.p`
white-space: nowrap;
`;
const ContributorDetails = styled.div`
display: flex;
flex-direction: column;
margin-bottom: 1rem;
`;
const ContributorToggleLine = styled.p`
cursor: pointer;
/** margin-bottom is inherit from content p **/
margin-bottom: 0.5rem !important;
`;
const ChangesetSummary = styled.div`
display: flex;
`;
const SeparatedParents = styled.div`
margin-left: 1em;
a + a:before {
content: ",\\00A0";
color: #4a4a4a;
@@ -126,33 +90,33 @@ const Contributors: FC<{ changeset: Changeset }> = ({ changeset }) => {
if (open) {
return (
<ContributorDetails>
<FlexRow>
<ContributorToggleLine onClick={e => setOpen(!open)} className="is-ellipsis-overflow">
<div className="is-flex is-flex-direction-column mb-4">
<div className="is-flex">
<p className="is-ellipsis-overflow is-clickable mb-2" onClick={(e) => setOpen(!open)}>
<Icon name="angle-down" /> {t("changeset.contributors.list")}
</ContributorToggleLine>
</p>
{signatureIcon}
</FlexRow>
</div>
<ContributorTable changeset={changeset} />
</ContributorDetails>
</div>
);
}
return (
<>
<ContributorLine onClick={e => setOpen(!open)}>
<div className="is-flex is-clickable" onClick={(e) => setOpen(!open)}>
<ContributorColumn className="is-ellipsis-overflow">
<Icon name="angle-right" /> <ChangesetAuthor changeset={changeset} />
</ContributorColumn>
{signatureIcon}
<CountColumn className={"is-hidden-mobile is-hidden-tablet-only is-hidden-desktop-only"}>
<CountColumn className="is-hidden-mobile is-hidden-tablet-only is-hidden-desktop-only">
(
<span className="has-text-link">
{t("changeset.contributors.count", { count: countContributors(changeset) })}
</span>
)
</CountColumn>
</ContributorLine>
</div>
</>
);
};
@@ -178,13 +142,13 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
return (
<>
<div className={classNames("content", "is-marginless")}>
<div className={classNames("content", "m-0")}>
<h4>
<ExtensionPoint
name="changeset.description"
props={{
changeset,
value: description.title
value: description.title,
}}
renderAll={false}
>
@@ -193,23 +157,23 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
</h4>
<article className="media">
<AvatarWrapper>
<RightMarginP className={classNames("image", "is-64x64")}>
<p className={classNames("image", "is-64x64", "mr-4")}>
<AvatarImage person={changeset.author} />
</RightMarginP>
</p>
</AvatarWrapper>
<div className="media-content">
<Contributors changeset={changeset} />
<ChangesetSummary className="is-ellipsis-overflow">
<div className="is-flex is-ellipsis-overflow">
<p>
<Trans i18nKey="repos:changeset.summary" components={[id, date]} />
</p>
{parents && parents?.length > 0 ? (
<SeparatedParents>
<SeparatedParents className="ml-4">
{t("changeset.parents.label", { count: parents?.length }) + ": "}
{parents}
</SeparatedParents>
) : null}
</ChangesetSummary>
</div>
</div>
<div className="media-right">
<ChangesetTags changeset={changeset} />
@@ -244,7 +208,7 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
name="changeset.description"
props={{
changeset,
value: item
value: item,
}}
renderAll={false}
>
@@ -257,7 +221,8 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
</p>
</div>
<div>
<BottomMarginLevel
<Level
className="mb-4"
right={
<Button
action={collapseDiffs}

2
scm-ui/ui-webapp/src/repos/components/changesets/ContributorTable.tsx
View File

@@ -97,7 +97,7 @@ const ContributorTable: FC<Props> = ({ changeset }) => {
{getContributorsByType().map(contributor => (
<tr key={contributor.type}>
<SizedTd>{t("changeset.contributor.type." + contributor.type)}:</SizedTd>
<td className="is-ellipsis-overflow is-marginless">
<td className="is-ellipsis-overflow m-0">
<CommaSeparatedList>
{contributor.persons!.map(person => (
<Contributor key={person.name} person={person} />

50
scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx
View File

@@ -22,28 +22,14 @@
* SOFTWARE.
*/
import React, { FC, useCallback, useEffect, useState } from "react";
import styled from "styled-components";
import { useTranslation } from "react-i18next";
import classNames from "classnames";
import { ExtensionPoint } from "@scm-manager/ui-extensions";
import { IndexResources, Repository, RepositoryType, CUSTOM_NAMESPACE_STRATEGY } from "@scm-manager/ui-types";
import { Checkbox, Level, Select, SubmitButton } from "@scm-manager/ui-components";
import NamespaceAndNameFields from "../NamespaceAndNameFields";
import RepositoryInformationForm from "../RepositoryInformationForm";
const CheckboxWrapper = styled.div`
margin-top: 2em;
flex: 1;
`;
const SelectWrapper = styled.div`
flex: 1;
`;
const SpaceBetween = styled.div`
display: flex;
justify-content: space-between;
`;
type Props = {
createRepository?: (repo: RepositoryCreation, shouldInit: boolean) => void;
modifyRepository?: (repo: Repository) => void;
@@ -65,7 +51,7 @@ const RepositoryForm: FC<Props> = ({
repositoryTypes,
namespaceStrategy,
loading,
indexResources
indexResources,
}) => {
const [repo, setRepo] = useState<Repository>({
name: "",
@@ -73,15 +59,15 @@ const RepositoryForm: FC<Props> = ({
type: "",
contact: "",
description: "",
_links: {}
_links: {},
});
const [initRepository, setInitRepository] = useState(false);
const [contextEntries, setContextEntries] = useState({});
const setCreationContextEntry = useCallback(
(key: string, value: any) => {
setContextEntries(entries => ({
setContextEntries((entries) => ({
...entries,
[key]: value
[key]: value,
}));
},
[setContextEntries]
@@ -102,7 +88,7 @@ const RepositoryForm: FC<Props> = ({
const isValid = () => {
return (
!(!repo.name || (namespaceStrategy === CUSTOM_NAMESPACE_STRATEGY && !repo.namespace)) &&
Object.values(valid).every(v => v)
Object.values(valid).every((v) => v)
);
};
@@ -119,10 +105,10 @@ const RepositoryForm: FC<Props> = ({
const createSelectOptions = (repositoryTypes?: RepositoryType[]) => {
if (repositoryTypes) {
return repositoryTypes.map(repositoryType => {
return repositoryTypes.map((repositoryType) => {
return {
label: repositoryType.displayName,
value: repositoryType.name
value: repositoryType.name,
};
});
}
@@ -137,28 +123,28 @@ const RepositoryForm: FC<Props> = ({
const extensionProps = {
repository: repo,
setCreationContextEntry: setCreationContextEntry,
indexResources: indexResourcesWithLinks
indexResources: indexResourcesWithLinks,
};
return (
<>
<NamespaceAndNameFields
repository={repo}
onChange={setRepo}
setValid={namespaceAndName => setValid({ ...valid, namespaceAndName })}
setValid={(namespaceAndName) => setValid({ ...valid, namespaceAndName })}
disabled={disabled}
/>
<SpaceBetween>
<SelectWrapper>
<div className="columns">
<div className={classNames("column", "is-half")}>
<Select
label={t("repository.type")}
onChange={type => setRepo({ ...repo, type })}
onChange={(type) => setRepo({ ...repo, type })}
value={repo ? repo.type : ""}
options={createSelectOptions(repositoryTypes)}
helpText={t("help.typeHelpText")}
disabled={disabled}
/>
</SelectWrapper>
<CheckboxWrapper>
</div>
<div className={classNames("column", "is-half", "is-align-self-flex-end")}>
<Checkbox
label={t("repositoryForm.initializeRepository")}
checked={initRepository}
@@ -169,8 +155,8 @@ const RepositoryForm: FC<Props> = ({
{initRepository && (
<ExtensionPoint name="repos.create.initialize" props={extensionProps} renderAll={true} />
)}
</CheckboxWrapper>
</SpaceBetween>
</div>
</div>
</>
);
};
@@ -199,7 +185,7 @@ const RepositoryForm: FC<Props> = ({
repository={repo}
onChange={setRepo}
disabled={disabled}
setValid={contact => setValid({ ...valid, contact })}
setValid={(contact) => setValid({ ...valid, contact })}
/>
{submitButton()}
</form>

28
scm-ui/ui-webapp/src/repos/components/form/RepositoryFormSwitcher.tsx
View File

@@ -21,22 +21,12 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { FC } from "react";
import styled from "styled-components";
import { Button, ButtonAddons, Icon, Level, urls } from "@scm-manager/ui-components";
import { useLocation } from "react-router-dom";
import { useTranslation } from "react-i18next";
const MarginIcon = styled(Icon)`
padding-right: 0.5rem;
`;
const SmallButton = styled(Button)`
border-radius: 4px;
font-size: 1rem;
font-weight: 600;
`;
import classNames from "classnames";
import styled from "styled-components";
import { Button, ButtonAddons, Icon, Level, urls } from "@scm-manager/ui-components";
const TopLevel = styled(Level)`
margin-top: 1.5rem;
@@ -62,10 +52,14 @@ const RepositoryFormButton: FC<RepositoryForm> = ({ path, icon, label }) => {
const [t] = useTranslation(["repos", "plugins"]);
return (
<SmallButton color={isSelected ? "link is-selected" : undefined} link={!isSelected ? href : undefined}>
<MarginIcon name={icon} color={isSelected ? "white" : "default"} />
<p className="is-hidden-mobile is-hidden-tablet-only">{t(`plugins:${label}`, label)}</p>
</SmallButton>
<Button
className="is-size-6"
color={isSelected ? "link is-selected" : undefined}
link={!isSelected ? href : undefined}
>
<Icon className="pr-2" name={icon} color={isSelected ? "white" : "default"} />
<p className={classNames("is-hidden-mobile", "is-hidden-tablet-only")}>{t(`plugins:${label}`, label)}</p>
</Button>
);
};

4
scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx
View File

@@ -37,12 +37,12 @@ const RepositoryGroupEntry: FC<Props> = ({ group }) => {
const settingsLink = group.namespace?._links?.permissions && (
<Link to={`/namespace/${group.name}/settings`}>
<Icon color="is-link" name="cog" title={t("repositoryOverview.settings.tooltip")} className={"is-size-6 ml-2"} />
<Icon color="is-link" name="cog" title={t("repositoryOverview.settings.tooltip")} className="is-size-6 ml-2" />
</Link>
);
const namespaceHeader = (
<>
<Link to={`/repos/${group.name}/`} className={"has-text-dark"}>
<Link to={`/repos/${group.name}/`} className="has-text-dark">
{group.name}
</Link>{" "}
{settingsLink}