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

centered button icons on mobile view when if text should not be displayed

Browse Source
This commit is contained in:
Florian Scholdei
2019-04-18 18:07:13 +02:00
parent ba3557fbb6
commit 4eb08770b7
5 changed files with 62 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
scm-ui-components/packages/ui-components/src/repos/DiffFile.js
View File

@@ -11,7 +11,7 @@ import {
import injectSheets from "react-jss";
import classNames from "classnames";
import { translate } from "react-i18next";
import {Button} from "../buttons";
import { Button } from "../buttons";
const styles = {
panel: {
@@ -181,11 +181,17 @@ class DiffFile extends React.Component<Props, State> {
);
}
const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null;
return <div className={classNames("panel", classes.panel)}>
const fileControls = fileControlFactory
? fileControlFactory(file, this.setCollapse)
: null;
return (
<div className={classNames("panel", classes.panel)}>
<div className="panel-heading">
<div className="level">
<div className={classNames("level-left", classes.titleHeader)} onClick={this.toggleCollapse}>
<div
className={classNames("level-left", classes.titleHeader)}
onClick={this.toggleCollapse}
>
<i className={icon} />
<span className={classes.title}>
{this.renderFileTitle(file)}
@@ -195,11 +201,16 @@ class DiffFile extends React.Component<Props, State> {
</span>
</div>
<div className="level-right">
<Button action={this.toggleSideBySide}>
<Button action={this.toggleSideBySide} className="reduced-mobile">
<span className="icon is-small">
<i className={classNames("fas", sideBySide ? "fa-align-left" : "fa-columns")} />
<i
className={classNames(
"fas",
sideBySide ? "fa-align-left" : "fa-columns"
)}
/>
</span>
<span className="is-hidden-mobile">
<span>
{t(sideBySide ? "diff.combined" : "diff.sideBySide")}
</span>
</Button>
@@ -208,7 +219,8 @@ class DiffFile extends React.Component<Props, State> {
</div>
</div>
{body}
</div>;
</div>
);
}
}

12
scm-ui-components/packages/ui-components/src/repos/changesets/ChangesetButtonGroup.js
View File

@@ -23,21 +23,17 @@ class ChangesetButtonGroup extends React.Component<Props> {
return (
<ButtonGroup className="is-pulled-right">
<Button link={changesetLink}>
<Button link={changesetLink} className="reduced-mobile">
<span className="icon">
<i className="fas fa-exchange-alt" />
</span>
<span className="is-hidden-mobile is-hidden-tablet-only">
{t("changeset.buttons.details")}
</span>
<span>{t("changeset.buttons.details")}</span>
</Button>
<Button link={sourcesLink}>
<Button link={sourcesLink} className="reduced-mobile">
<span className="icon">
<i className="fas fa-code" />
</span>
<span className="is-hidden-mobile is-hidden-tablet-only">
{t("changeset.buttons.sources")}
</span>
<span>{t("changeset.buttons.sources")}</span>
</Button>
</ButtonGroup>
);