Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2026-05-06 07:26:01 +02:00
Code Issues Packages Projects Releases Activity

Merge pull request #1078 from scm-manager/bugfix/text-overflow

Browse Source 
Bugfix/text overflow
This commit is contained in:
Sebastian Sdorra
2020-03-26 08:33:04 +01:00
committed by GitHub
parent e38245e5bf b85f1083ac
commit bd13e04f89
16 changed files with 226 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scm-ui/ui-components/src/MarkdownView.tsx
View File

@@ -122,7 +122,7 @@ class MarkdownView extends React.Component<Props> {
<ErrorBoundary fallback={MarkdownErrorNotification}>
<div ref={el => (this.contentRef = el)}>
<Markdown
className="content"
className="content is-word-break"
skipHtml={skipHtml}
escapeHtml={skipHtml}
source={content}

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

@@ -32991,7 +32991,7 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
>
<div>
<div
className="content"
className="content is-word-break"
>
<p>
Here is markdown with code, but without Language.
@@ -33022,7 +33022,7 @@ exports[`Storyshots MarkdownView Default 1`] = `
>
<div>
<div
className="content"
className="content is-word-break"
>
<h1>
<a
@@ -33830,7 +33830,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
>
<div>
<div
className="content"
className="content is-word-break"
>
<h1>
Xml Code Block in Markdown

43
scm-ui/ui-components/src/layout/CustomQueryFlexWrappedColumns.tsx Normal file
View File

@@ -0,0 +1,43 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { ReactNode } from "react";
import styled from "styled-components";
type Props = {
children?: ReactNode;
};
const FlexWrapped = styled.div`
/* Do not wrap before using the media query,
otherwise long content will always break the navigation. */
@media (max-width: 785px) {
flex-wrap: wrap;
}
`;
export default class CustomQueryFlexWrappedColumns extends React.Component<Props> {
render() {
return <FlexWrapped className="columns">{this.props.children}</FlexWrapped>;
}
}

56
scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx Normal file
View File

@@ -0,0 +1,56 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { ReactNode } from "react";
import styled from "styled-components";
type Props = {
children?: ReactNode;
collapsed: boolean;
};
const PrimaryColumn = styled.div<{ collapsed: boolean }>`
/* This is the counterpart to the specific column in SecondaryNavigationColumn. */
flex: none;
width: ${(props: { collapsed: boolean }) => (props.collapsed ? "89.7%" : "75%")};
/* Render this column to full size if column construct breaks (page size too small). */
@media (max-width: 785px) {
width: 100%;
}
`;
export default class PrimaryContentColumn extends React.Component<Props> {
static defaultProps = {
collapsed: false
};
render() {
const { children, collapsed } = this.props;
return (
<PrimaryColumn className="column" collapsed={collapsed}>
{children}
</PrimaryColumn>
);
}
}

59
scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx Normal file
View File

@@ -0,0 +1,59 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { ReactNode } from "react";
import styled from "styled-components";
type Props = {
children?: ReactNode;
collapsed: boolean;
};
const SecondaryColumn = styled.div<{ collapsed: boolean }>`
/* In Bulma there is unfortunately no intermediate step between .is-1 and .is-2, hence the size.
Navigation size should be as constant as possible. */
flex: none;
width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
max-width: ${(props: { collapsed: boolean }) => (props.collapsed ? "11.3%" : "25%")};
/* Render this column to full size if column construct breaks (page size too small). */
@media (max-width: 785px) {
width: 100%;
max-width: 100%;
}
`;
export default class SecondaryNavigationColumn extends React.Component<Props> {
static defaultProps = {
collapsed: false
};
render() {
const { children, collapsed } = this.props;
return (
<SecondaryColumn className="column" collapsed={collapsed}>
{children}
</SecondaryColumn>
);
}
}

4
scm-ui/ui-components/src/layout/index.ts
View File

@@ -31,3 +31,7 @@ export { default as Page } from "./Page";
export { default as PageActions } from "./PageActions";
export { default as Subtitle } from "./Subtitle";
export { default as Title } from "./Title";
export { default as CustomQueryFlexWrappedColumns } from "./CustomQueryFlexWrappedColumns";
export { default as PrimaryContentColumn } from "./PrimaryContentColumn";
export { default as SecondaryNavigationColumn } from "./SecondaryNavigationColumn";

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

@@ -38,11 +38,10 @@ type CollapsedProps = {
collapsed: boolean;
};
const SectionContainer = styled.aside<CollapsedProps>`
const SectionContainer = styled.aside`
position: sticky;
position: -webkit-sticky; /* Safari */
top: 2rem;
width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
`;
const Icon = styled.i<CollapsedProps>`
@@ -80,7 +79,7 @@ const SecondaryNavigation: FC<Props> = ({ label, children, collapsed, onCollapse
const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
return (
<SectionContainer className="menu" collapsed={isCollapsed}>
<SectionContainer className="menu">
<div>
<MenuLabel
className="menu-label"

15
scm-ui/ui-webapp/src/admin/containers/Admin.tsx
View File

@@ -31,6 +31,9 @@ import { Links } from "@scm-manager/ui-types";
import {
NavLink,
Page,
CustomQueryFlexWrappedColumns,
PrimaryContentColumn,
SecondaryNavigationColumn,
SecondaryNavigation,
SubNavigation,
isMenuCollapsed,
@@ -104,8 +107,8 @@ class Admin extends React.Component<Props, State> {
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<Page>
<div className="columns">
<div className="column">
<CustomQueryFlexWrappedColumns>
<PrimaryContentColumn collapsed={menuCollapsed}>
<Switch>
<Redirect exact from={url} to={`${url}/info`} />
<Route path={`${url}/info`} exact component={AdminDetails} />
@@ -143,8 +146,8 @@ class Admin extends React.Component<Props, State> {
<Route path={`${url}/roles/:page`} exact render={() => <RepositoryRoles baseUrl={`${url}/roles`} />} />
<ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} />
</Switch>
</div>
<div className={menuCollapsed ? "column is-1" : "column is-3"}>
</PrimaryContentColumn>
<SecondaryNavigationColumn collapsed={menuCollapsed}>
<SecondaryNavigation
label={t("admin.menu.navigationLabel")}
onCollapse={() => this.onCollapseAdminMenu(!menuCollapsed)}
@@ -189,8 +192,8 @@ class Admin extends React.Component<Props, State> {
<ExtensionPoint name="admin.setting" props={extensionProps} renderAll={true} />
</SubNavigation>
</SecondaryNavigation>
</div>
</div>
</SecondaryNavigationColumn>
</CustomQueryFlexWrappedColumns>
</Page>
</MenuContext.Provider>
);

15
scm-ui/ui-webapp/src/containers/Profile.tsx
View File

@@ -34,6 +34,9 @@ import {
MenuContext,
NavLink,
Page,
CustomQueryFlexWrappedColumns,
PrimaryContentColumn,
SecondaryNavigationColumn,
SecondaryNavigation,
SubNavigation
} from "@scm-manager/ui-components";
@@ -107,13 +110,13 @@ class Profile extends React.Component<Props, State> {
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<Page title={me.displayName}>
<div className="columns">
<div className="column">
<CustomQueryFlexWrappedColumns>
<PrimaryContentColumn collapsed={menuCollapsed}>
<Route path={url} exact render={() => <ProfileInfo me={me} />} />
<Route path={`${url}/settings/password`} render={() => <ChangeUserPassword me={me} />} />
<ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} />
</div>
<div className={menuCollapsed ? "column is-1" : "column is-3"}>
</PrimaryContentColumn>
<SecondaryNavigationColumn collapsed={menuCollapsed}>
<SecondaryNavigation
label={t("profile.navigationLabel")}
onCollapse={() => this.onCollapseProfileMenu(!menuCollapsed)}
@@ -134,8 +137,8 @@ class Profile extends React.Component<Props, State> {
<ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
</SubNavigation>
</SecondaryNavigation>
</div>
</div>
</SecondaryNavigationColumn>
</CustomQueryFlexWrappedColumns>
</Page>
</MenuContext.Provider>
);

15
scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
View File

@@ -34,6 +34,9 @@ import {
MenuContext,
NavLink,
Page,
CustomQueryFlexWrappedColumns,
PrimaryContentColumn,
SecondaryNavigationColumn,
SecondaryNavigation,
SubNavigation
} from "@scm-manager/ui-components";
@@ -113,8 +116,8 @@ class SingleGroup extends React.Component<Props, State> {
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<Page title={group.name}>
<div className="columns">
<div className="column">
<CustomQueryFlexWrappedColumns>
<PrimaryContentColumn collapsed={menuCollapsed}>
<Route path={url} exact component={() => <Details group={group} />} />
<Route path={`${url}/settings/general`} exact component={() => <EditGroup group={group} />} />
<Route
@@ -123,8 +126,8 @@ class SingleGroup extends React.Component<Props, State> {
component={() => <SetPermissions selectedPermissionsLink={group._links.permissions} />}
/>
<ExtensionPoint name="group.route" props={extensionProps} renderAll={true} />
</div>
<div className={menuCollapsed ? "column is-1" : "column is-3"}>
</PrimaryContentColumn>
<SecondaryNavigationColumn collapsed={menuCollapsed}>
<SecondaryNavigation
label={t("singleGroup.menu.navigationLabel")}
onCollapse={() => this.onCollapseGroupMenu(!menuCollapsed)}
@@ -147,8 +150,8 @@ class SingleGroup extends React.Component<Props, State> {
<ExtensionPoint name="group.setting" props={extensionProps} renderAll={true} />
</SubNavigation>
</SecondaryNavigation>
</div>
</div>
</SecondaryNavigationColumn>
</CustomQueryFlexWrappedColumns>
</Page>
</MenuContext.Provider>
);

2
scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx
View File

@@ -34,7 +34,7 @@ type Props = {
class BranchRow extends React.Component<Props> {
renderLink(to: string, label: string, defaultBranch?: boolean) {
return (
<Link to={to}>
<Link to={to} title={label}>
{label} <DefaultBranchTag defaultBranch={defaultBranch} />
</Link>
);

2
scm-ui/ui-webapp/src/repos/branches/components/BranchTable.tsx
View File

@@ -35,7 +35,7 @@ class BranchTable extends React.Component<Props> {
render() {
const { t } = this.props;
return (
<table className="card-table table is-hoverable is-fullwidth">
<table className="card-table table is-hoverable is-fullwidth is-word-break">
<thead>
<tr>
<th>{t("branches.table.branches")}</th>

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

@@ -52,7 +52,7 @@ class RepositoryDetailTable extends React.Component<Props> {
</tr>
<tr>
<th>{t("repository.description")}</th>
<td>{repository.description}</td>
<td className="is-word-break">{repository.description}</td>
</tr>
<tr>
<th>{t("repository.creationDate")}</th>

15
scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
View File

@@ -32,6 +32,9 @@ import {
Loading,
NavLink,
Page,
CustomQueryFlexWrappedColumns,
PrimaryContentColumn,
SecondaryNavigationColumn,
SecondaryNavigation,
SubNavigation,
MenuContext,
@@ -170,8 +173,8 @@ class RepositoryRoot extends React.Component<Props, State> {
}}
>
<Page title={repository.namespace + "/" + repository.name}>
<div className="columns">
<div className="column">
<CustomQueryFlexWrappedColumns>
<PrimaryContentColumn collapsed={menuCollapsed}>
<Switch>
<Redirect exact from={this.props.match.url} to={redirectedUrl} />
@@ -220,8 +223,8 @@ class RepositoryRoot extends React.Component<Props, State> {
<Route path={`${url}/branches/create`} render={() => <CreateBranch repository={repository} />} />
<ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
</Switch>
</div>
<div className={menuCollapsed ? "column is-1" : "column is-3"}>
</PrimaryContentColumn>
<SecondaryNavigationColumn collapsed={menuCollapsed}>
<SecondaryNavigation
label={t("repositoryRoot.menu.navigationLabel")}
onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
@@ -265,8 +268,8 @@ class RepositoryRoot extends React.Component<Props, State> {
<ExtensionPoint name="repository.setting" props={extensionProps} renderAll={true} />
</SubNavigation>
</SecondaryNavigation>
</div>
</div>
</SecondaryNavigationColumn>
</CustomQueryFlexWrappedColumns>
</Page>
</MenuContext.Provider>
);

19
scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
View File

@@ -33,8 +33,12 @@ import {
MenuContext,
NavLink,
Page,
CustomQueryFlexWrappedColumns,
PrimaryContentColumn,
SecondaryNavigationColumn,
SecondaryNavigation,
SubNavigation
SubNavigation,
storeMenuCollapsed
} from "@scm-manager/ui-components";
import { Details } from "./../components/table";
import EditUser from "./EditUser";
@@ -44,7 +48,6 @@ import { WithTranslation, withTranslation } from "react-i18next";
import { getUsersLink } from "../../modules/indexResource";
import SetUserPassword from "../components/SetUserPassword";
import SetPermissions from "../../permissions/components/SetPermissions";
import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
type Props = RouteComponentProps &
WithTranslation & {
@@ -114,8 +117,8 @@ class SingleUser extends React.Component<Props, State> {
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<Page title={user.displayName}>
<div className="columns">
<div className="column">
<CustomQueryFlexWrappedColumns>
<PrimaryContentColumn collapsed={menuCollapsed}>
<Route path={url} exact component={() => <Details user={user} />} />
<Route path={`${url}/settings/general`} component={() => <EditUser user={user} />} />
<Route path={`${url}/settings/password`} component={() => <SetUserPassword user={user} />} />
@@ -124,8 +127,8 @@ class SingleUser extends React.Component<Props, State> {
component={() => <SetPermissions selectedPermissionsLink={user._links.permissions} />}
/>
<ExtensionPoint name="user.route" props={extensionProps} renderAll={true} />
</div>
<div className={menuCollapsed ? "column is-1" : "column is-3"}>
</PrimaryContentColumn>
<SecondaryNavigationColumn collapsed={menuCollapsed}>
<SecondaryNavigation
label={t("singleUser.menu.navigationLabel")}
onCollapse={() => this.onCollapseUserMenu(!menuCollapsed)}
@@ -148,8 +151,8 @@ class SingleUser extends React.Component<Props, State> {
<ExtensionPoint name="user.setting" props={extensionProps} renderAll={true} />
</SubNavigation>
</SecondaryNavigation>
</div>
</div>
</SecondaryNavigationColumn>
</CustomQueryFlexWrappedColumns>
</Page>
</MenuContext.Provider>
);

19
yarn.lock
View File

@@ -3656,6 +3656,11 @@ babel-code-frame@^6.22.0:
esutils "^2.0.2"
js-tokens "^3.0.2"
babel-core@7.0.0-bridge.0:
version "7.0.0-bridge.0"
resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
babel-eslint@^10.0.3:
version "10.0.3"
resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a"
@@ -6801,7 +6806,7 @@ fast-safe-stringify@^1.0.8, fast-safe-stringify@^1.2.1:
resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-1.2.3.tgz#9fe22c37fb2f7f86f06b8f004377dbf8f1ee7bc1"
integrity sha512-QJYT/i0QYoiZBQ71ivxdyTqkwKkQ0oxACXHYxH2zYHJEgzi2LsbjgvtzTbLi1SZcF190Db2YP7I7eTsU2egOlw==
fault@^1.0.0, fault@^1.0.2:
fault@^1.0.0:
version "1.0.4"
resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
@@ -7340,7 +7345,7 @@ gitconfiglocal@^1.0.0:
dependencies:
ini "^1.3.2"
gitdiff-parser@^0.1.2:
gitdiff-parser@^0.1.2, "gitdiff-parser@https://github.com/scm-manager/gitdiff-parser#ed3fe7de73dbb0a06c3e6adbbdf22dbae6e66351":
version "0.1.2"
resolved "https://github.com/scm-manager/gitdiff-parser#ed3fe7de73dbb0a06c3e6adbbdf22dbae6e66351"
@@ -9649,7 +9654,7 @@ lower-case@^1.1.1:
resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
lowlight@^1.13.0:
lowlight@1.13.1, lowlight@^1.13.0, lowlight@~1.11.0:
version "1.13.1"
resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.13.1.tgz#c4f0e03906ebd23fedf2d258f6ab2f6324cf90eb"
integrity sha512-kQ71/T6RksEVz9AlPq07/2m+SU/1kGvt9k39UtvHX760u4SaWakaYH7hYgH5n6sTsCWk4MVYzUzLU59aN5CSmQ==
@@ -9657,14 +9662,6 @@ lowlight@^1.13.0:
fault "^1.0.0"
highlight.js "~9.16.0"
lowlight@~1.11.0:
version "1.11.0"
resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.11.0.tgz#1304d83005126d4e8b1dc0f07981e9b689ec2efc"
integrity sha512-xrGGN6XLL7MbTMdPD6NfWPwY43SNkjf/d0mecSx/CW36fUZTjRHEq0/Cdug3TWKtRXLWi7iMl1eP0olYxj/a4A==
dependencies:
fault "^1.0.2"
highlight.js "~9.13.0"
lru-cache@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"