Work in progress on port to Bootstrap 4
This commit is contained in:
Tomas Bures
parent
3425e2c16a
commit
41d74e3cc7
40 changed files with 144 additions and 365 deletions
69
client/src/lib/bootstrap-components.js
vendored
69
client/src/lib/bootstrap-components.js
vendored
|
|
@ -112,35 +112,28 @@ class Button extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
//TODO
|
||||
class DropdownMenu extends Component {
|
||||
class ButtonDropdown extends Component {
|
||||
static propTypes = {
|
||||
label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
noCaret: PropTypes.bool,
|
||||
className: PropTypes.string
|
||||
className: PropTypes.string,
|
||||
buttonClassName: PropTypes.string,
|
||||
menuClassName: PropTypes.string
|
||||
}
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
|
||||
let className = 'btn dropdown-toggle';
|
||||
if (props.className) {
|
||||
className = className + ' ' + props.className;
|
||||
}
|
||||
|
||||
let label;
|
||||
if (this.props.noCaret) {
|
||||
label = props.label;
|
||||
} else {
|
||||
label = <span>{props.label}{' '}<span className="caret"></span></span>;
|
||||
}
|
||||
const className = 'dropdown' + (props.className ? ' ' + props.className : '');
|
||||
const buttonClassName = 'btn dropdown-toggle' + (props.buttonClassName ? ' ' + props.buttonClassName : '');
|
||||
const menuClassName = 'dropdown-menu' + (props.menuClassName ? ' ' + props.menuClassName : '');
|
||||
|
||||
return (
|
||||
<div className="btn-group">
|
||||
<button type="button" className={className} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{label}
|
||||
<div className="dropdown" className={className}>
|
||||
<button type="button" className={buttonClassName} data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{props.label}
|
||||
</button>
|
||||
<ul className="dropdown-menu">
|
||||
<ul className={menuClassName}>
|
||||
{props.children}
|
||||
</ul>
|
||||
|
||||
|
|
@ -149,41 +142,6 @@ class DropdownMenu extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
//TODO
|
||||
class DropdownMenuItem extends Component {
|
||||
static propTypes = {
|
||||
label: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
className: PropTypes.string
|
||||
}
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
|
||||
let className = 'nav-item dropdown';
|
||||
if (props.className) {
|
||||
className = className + ' ' + props.className;
|
||||
}
|
||||
|
||||
return (
|
||||
<li className={className}>
|
||||
{props.icon ?
|
||||
<a href="#" className="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
<Icon icon={props.icon}/>{' '}{props.label}
|
||||
</a>
|
||||
:
|
||||
<a href="#" className="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
{props.label}
|
||||
</a>
|
||||
}
|
||||
<ul className="dropdown-menu">
|
||||
{props.children}
|
||||
</ul>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@withComponentMixins([
|
||||
withErrorHandling
|
||||
])
|
||||
|
|
@ -217,7 +175,6 @@ class ActionLink extends Component {
|
|||
withTranslation,
|
||||
withErrorHandling
|
||||
])
|
||||
//TODO
|
||||
class ModalDialog extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -314,8 +271,8 @@ class ModalDialog extends Component {
|
|||
<div className="modal-dialog" role="document">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<button type="button" className="close" aria-label={t('close')} onClick={::this.onClose}><span aria-hidden="true">×</span></button>
|
||||
<h4 className="modal-title">{this.props.title}</h4>
|
||||
<button type="button" className="close" aria-label={t('close')} onClick={::this.onClose}><span aria-hidden="true">×</span></button>
|
||||
</div>
|
||||
<div className="modal-body">{this.props.children}</div>
|
||||
<div className="modal-footer">
|
||||
|
|
@ -332,7 +289,7 @@ class ModalDialog extends Component {
|
|||
|
||||
export {
|
||||
Button,
|
||||
DropdownMenu,
|
||||
ButtonDropdown,
|
||||
DropdownMenuItem,
|
||||
ActionLink,
|
||||
DismissibleAlert,
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ export default class Files extends Component {
|
|||
|
||||
if (this.props.entity.permissions.includes(this.props.managePermission)) {
|
||||
actions.push({
|
||||
label: <Icon icon="remove" title={t('delete')}/>,
|
||||
label: <Icon icon="trash-alt" title={t('delete')}/>,
|
||||
action: () => this.deleteFile(data[0], data[1])
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -194,9 +194,9 @@ function wrapInput(id, htmlId, owner, format, rightContainerClass, label, help,
|
|||
// wrapInput may be used also outside forms to make a kind of fake read-only forms
|
||||
let className;
|
||||
if (owner) {
|
||||
className = 'form-group row';
|
||||
className = 'form-group';
|
||||
} else {
|
||||
className = 'row ' + styles.staticFormGroup;
|
||||
className = styles.staticFormGroup;
|
||||
}
|
||||
|
||||
let colLeft = '';
|
||||
|
|
@ -207,15 +207,17 @@ function wrapInput(id, htmlId, owner, format, rightContainerClass, label, help,
|
|||
colLeft = '';
|
||||
colRight = '';
|
||||
break;
|
||||
case 'inline':
|
||||
colLeft = 'mr-3';
|
||||
colRight = '';
|
||||
break;
|
||||
default:
|
||||
className = className + ' row';
|
||||
colLeft = 'col-sm-2 col-form-label';
|
||||
colRight = 'col-sm-10';
|
||||
break;
|
||||
}
|
||||
|
||||
if (format === 'inline') {
|
||||
}
|
||||
|
||||
let helpBlock = null;
|
||||
if (help) {
|
||||
helpBlock = <small className={`form-text text-muted`} id={htmlId + '_help'}>{help}</small>;
|
||||
|
|
@ -239,7 +241,7 @@ function wrapInput(id, htmlId, owner, format, rightContainerClass, label, help,
|
|||
if (format === 'inline') {
|
||||
return (
|
||||
<div className={className} >
|
||||
{labelBlock} {input}
|
||||
{labelBlock}{input}
|
||||
{helpBlock}
|
||||
{validationBlock}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -224,7 +224,7 @@ export function tableAddDeleteButton(actions, owner, perms, deleteUrl, name, del
|
|||
if (!perms || perms.includes('delete')) {
|
||||
if (owner.tableRestActionDialogData.shown) {
|
||||
actions.push({
|
||||
label: <Icon className={styles.iconDisabled} icon="remove" title={t('delete')}/>
|
||||
label: <Icon className={styles.iconDisabled} icon="trash-alt" title={t('delete')}/>
|
||||
});
|
||||
} else {
|
||||
actions.push({
|
||||
|
|
|
|||
|
|
@ -98,7 +98,6 @@ class Breadcrumb extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
//TODO
|
||||
class SecondaryNavBar extends Component {
|
||||
static propTypes = {
|
||||
route: PropTypes.object.isRequired,
|
||||
|
|
@ -116,9 +115,10 @@ class SecondaryNavBar extends Component {
|
|||
title = entry.title;
|
||||
}
|
||||
|
||||
let className = '';
|
||||
let liClassName = 'nav-item';
|
||||
let linkClassName = 'nav-link';
|
||||
if (entry.active) {
|
||||
className += ' active';
|
||||
linkClassName += ' active';
|
||||
}
|
||||
|
||||
if (entry.link) {
|
||||
|
|
@ -130,7 +130,7 @@ class SecondaryNavBar extends Component {
|
|||
link = entry.link;
|
||||
}
|
||||
|
||||
return <li key={key} role="presentation" className={className}><Link to={link}>{title}</Link></li>;
|
||||
return <li key={key} role="presentation" className={liClassName}><Link className={linkClassName} to={link}>{title}</Link></li>;
|
||||
|
||||
} else if (entry.externalLink) {
|
||||
let externalLink;
|
||||
|
|
@ -140,10 +140,10 @@ class SecondaryNavBar extends Component {
|
|||
externalLink = entry.externalLink;
|
||||
}
|
||||
|
||||
return <li key={key} role="presentation" className={className}><a href={externalLink}>{title}</a></li>;
|
||||
return <li key={key} role="presentation" className={liClassName}><a className={linkClassName} href={externalLink}>{title}</a></li>;
|
||||
|
||||
} else {
|
||||
return <li key={key} role="presentation" className={className}>{title}</li>;
|
||||
return <li key={key} role="presentation" className={liClassName}>{title}</li>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +153,7 @@ class SecondaryNavBar extends Component {
|
|||
const keys = Object.keys(route.navs);
|
||||
const renderedElems = [];
|
||||
|
||||
for (const key in keys) {
|
||||
for (const key of keys) {
|
||||
const entry = route.navs[key];
|
||||
|
||||
let visible = true;
|
||||
|
|
@ -280,10 +280,9 @@ class RouteContent extends Component {
|
|||
<div>
|
||||
{primaryMenuComponent}
|
||||
|
||||
<div>
|
||||
<SecondaryNavBar className="hidden-xs pull-right" route={route} params={params} resolved={resolved}/>
|
||||
<div className={styles.breadcrumbAndSecondaryNavbar}>
|
||||
<Breadcrumb route={route} params={params} resolved={resolved}/>
|
||||
<SecondaryNavBar className="visible-xs" route={route} params={params} resolved={resolved}/>
|
||||
<SecondaryNavBar route={route} params={params} resolved={resolved}/>
|
||||
</div>
|
||||
|
||||
<div className="container-fluid">
|
||||
|
|
@ -473,8 +472,7 @@ export class NavButton extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
// TODO
|
||||
export class MenuLink extends Component {
|
||||
export class ButtonDropdownLink extends Component {
|
||||
static propTypes = {
|
||||
to: PropTypes.string,
|
||||
className: PropTypes.string
|
||||
|
|
@ -483,9 +481,9 @@ export class MenuLink extends Component {
|
|||
render() {
|
||||
const props = this.props;
|
||||
|
||||
const clsName = "nav-item" + (props.className ? " " + props.className : "")
|
||||
const clsName = "dropdown-item" + (props.className ? " " + props.className : "")
|
||||
return (
|
||||
<li className={clsName}><Link to={props.to} className="nav-link">{props.children}</Link></li>
|
||||
<Link to={props.to} className={clsName}>{props.children}</Link>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,28 +84,32 @@
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.secondaryNav {
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
.breadcrumbAndSecondaryNavbar {
|
||||
/*
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
*/
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.secondaryNav {
|
||||
margin: 0px;
|
||||
background-color: #f5f5f5;
|
||||
padding: 5px 5px;
|
||||
border-radius: 4px;
|
||||
:global .breadcrumb {
|
||||
margin-bottom: 0px;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.secondaryNav > li {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.secondaryNav > li > a {
|
||||
padding: 3px 10px;
|
||||
.secondaryNav {
|
||||
justify-content: flex-end;
|
||||
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
|
||||
:global .nav-item .nav-link {
|
||||
padding: 3px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropZone {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue