web: Added new component ModuleTile
This commit is contained in:
parent
03505f25d5
commit
95f974b3c5
@ -543,8 +543,190 @@ NavMenu.propTypes = {
|
||||
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
|
||||
};
|
||||
|
||||
var _jsxFileName$5 = "D:\\GitHub\\CommunityServer-AspNetCore\\web\\ASC.Web.Components\\src\\components\\module-tile\\index.js";
|
||||
function _templateObject6$1() {
|
||||
var data = _taggedTemplateLiteral(["\n border: none;\n\n &:hover {\n .selectable {\n text-decoration: underline;\n cursor: pointer;\n }\n }\n"]);
|
||||
_templateObject6$1 = function _templateObject6() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
function _templateObject5$1() {
|
||||
var data = _taggedTemplateLiteral(["\n font-size: 13px; \n color: black;\n"]);
|
||||
_templateObject5$1 = function _templateObject5() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
function _templateObject4$1() {
|
||||
var data = _taggedTemplateLiteral(["\n font-size: 36px; \n color: black;\n"]);
|
||||
_templateObject4$1 = function _templateObject4() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
function _templateObject3$1() {
|
||||
var data = _taggedTemplateLiteral(["\n font-size: 18px; \n color: black;\n text-decoration: none;\n clear: both;\n"]);
|
||||
_templateObject3$1 = function _templateObject3() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
function _templateObject2$1() {
|
||||
var data = _taggedTemplateLiteral(["\n border: none;\n height: 100px;\n width: 100px;\n"]);
|
||||
_templateObject2$1 = function _templateObject2() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
function _templateObject$5() {
|
||||
var data = _taggedTemplateLiteral(["\n border: none;\n height: 241px;\n width: 240px;\n"]);
|
||||
_templateObject$5 = function _templateObject() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
var PrimaryImage = styled__default(reactstrap.CardImg)(_templateObject$5());
|
||||
var NotPrimaryImage = styled__default(reactstrap.CardImg)(_templateObject2$1());
|
||||
var DescriptionText = styled__default(reactstrap.CardTitle)(_templateObject3$1());
|
||||
var PrimaryTitle = styled__default(reactstrap.CardTitle)(_templateObject4$1());
|
||||
var NotPrimaryTitle = styled__default(reactstrap.CardTitle)(_templateObject5$1());
|
||||
var TileCard = styled__default(reactstrap.Card)(_templateObject6$1());
|
||||
var ModuleTile = function ModuleTile(props) {
|
||||
var title = props.title,
|
||||
imageUrl = props.imageUrl,
|
||||
link = props.link,
|
||||
description = props.description,
|
||||
isPrimary = props.isPrimary,
|
||||
_onClick = props.onClick;
|
||||
return core.jsx(TileCard, {
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 50
|
||||
},
|
||||
__self: this
|
||||
}, isPrimary ? core.jsx(reactstrap.Row, {
|
||||
className: "justify-content-md-center",
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 52
|
||||
},
|
||||
__self: this
|
||||
}, core.jsx(reactstrap.Col, {
|
||||
md: "auto",
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 53
|
||||
},
|
||||
__self: this
|
||||
}, core.jsx(PrimaryImage, {
|
||||
className: "selectable",
|
||||
src: imageUrl,
|
||||
onClick: function onClick(event) {
|
||||
return _onClick(event, link);
|
||||
},
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 54
|
||||
},
|
||||
__self: this
|
||||
})), core.jsx(reactstrap.Col, {
|
||||
md: "6",
|
||||
className: "align-middle",
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 56
|
||||
},
|
||||
__self: this
|
||||
}, core.jsx(reactstrap.CardBody, {
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 57
|
||||
},
|
||||
__self: this
|
||||
}, core.jsx(PrimaryTitle, {
|
||||
className: "selectable",
|
||||
onClick: function onClick(event) {
|
||||
return _onClick(event, link);
|
||||
},
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 58
|
||||
},
|
||||
__self: this
|
||||
}, title), core.jsx(DescriptionText, {
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 59
|
||||
},
|
||||
__self: this
|
||||
}, description)))) : core.jsx(reactstrap.CardBody, {
|
||||
className: "text-center selectable",
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 64
|
||||
},
|
||||
__self: this
|
||||
}, core.jsx(reactstrap.Row, {
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 65
|
||||
},
|
||||
__self: this
|
||||
}, core.jsx(reactstrap.Col, {
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 66
|
||||
},
|
||||
__self: this
|
||||
}, core.jsx(NotPrimaryImage, {
|
||||
src: imageUrl,
|
||||
onClick: function onClick(event) {
|
||||
return _onClick(event, link);
|
||||
},
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 67
|
||||
},
|
||||
__self: this
|
||||
}))), core.jsx(reactstrap.Row, {
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 70
|
||||
},
|
||||
__self: this
|
||||
}, core.jsx(reactstrap.Col, {
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 71
|
||||
},
|
||||
__self: this
|
||||
}, core.jsx(NotPrimaryTitle, {
|
||||
onClick: function onClick(event) {
|
||||
return _onClick(event, link);
|
||||
},
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 72
|
||||
},
|
||||
__self: this
|
||||
}, title)))));
|
||||
};
|
||||
ModuleTile.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
imageUrl: PropTypes.string.isRequired,
|
||||
link: PropTypes.string.isRequired,
|
||||
description: PropTypes.string,
|
||||
isPrimary: PropTypes.bool
|
||||
};
|
||||
ModuleTile.defaultProps = {
|
||||
isPrimary: false,
|
||||
description: ''
|
||||
};
|
||||
|
||||
exports.Button = Button;
|
||||
exports.LoginForm = LoginForm;
|
||||
exports.ModuleTile = ModuleTile;
|
||||
exports.NavLogo = NavLogo;
|
||||
exports.NavMenu = NavMenu;
|
||||
exports.TextInput = TextInput;
|
||||
|
@ -2,7 +2,7 @@ import { jsx } from '@emotion/core';
|
||||
import { useState } from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Row, Container, Col, Collapse, NavbarBrand, Navbar } from 'reactstrap';
|
||||
import { Row, Container, Col, Collapse, NavbarBrand, Navbar, CardImg, CardTitle, Card, CardBody } from 'reactstrap';
|
||||
|
||||
function _defineProperty(obj, key, value) {
|
||||
if (key in obj) {
|
||||
@ -535,4 +535,185 @@ NavMenu.propTypes = {
|
||||
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
|
||||
};
|
||||
|
||||
export { Button, LoginForm, NavLogo, NavMenu, TextInput };
|
||||
var _jsxFileName$5 = "D:\\GitHub\\CommunityServer-AspNetCore\\web\\ASC.Web.Components\\src\\components\\module-tile\\index.js";
|
||||
function _templateObject6$1() {
|
||||
var data = _taggedTemplateLiteral(["\n border: none;\n\n &:hover {\n .selectable {\n text-decoration: underline;\n cursor: pointer;\n }\n }\n"]);
|
||||
_templateObject6$1 = function _templateObject6() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
function _templateObject5$1() {
|
||||
var data = _taggedTemplateLiteral(["\n font-size: 13px; \n color: black;\n"]);
|
||||
_templateObject5$1 = function _templateObject5() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
function _templateObject4$1() {
|
||||
var data = _taggedTemplateLiteral(["\n font-size: 36px; \n color: black;\n"]);
|
||||
_templateObject4$1 = function _templateObject4() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
function _templateObject3$1() {
|
||||
var data = _taggedTemplateLiteral(["\n font-size: 18px; \n color: black;\n text-decoration: none;\n clear: both;\n"]);
|
||||
_templateObject3$1 = function _templateObject3() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
function _templateObject2$1() {
|
||||
var data = _taggedTemplateLiteral(["\n border: none;\n height: 100px;\n width: 100px;\n"]);
|
||||
_templateObject2$1 = function _templateObject2() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
function _templateObject$5() {
|
||||
var data = _taggedTemplateLiteral(["\n border: none;\n height: 241px;\n width: 240px;\n"]);
|
||||
_templateObject$5 = function _templateObject() {
|
||||
return data;
|
||||
};
|
||||
return data;
|
||||
}
|
||||
var PrimaryImage = styled(CardImg)(_templateObject$5());
|
||||
var NotPrimaryImage = styled(CardImg)(_templateObject2$1());
|
||||
var DescriptionText = styled(CardTitle)(_templateObject3$1());
|
||||
var PrimaryTitle = styled(CardTitle)(_templateObject4$1());
|
||||
var NotPrimaryTitle = styled(CardTitle)(_templateObject5$1());
|
||||
var TileCard = styled(Card)(_templateObject6$1());
|
||||
var ModuleTile = function ModuleTile(props) {
|
||||
var title = props.title,
|
||||
imageUrl = props.imageUrl,
|
||||
link = props.link,
|
||||
description = props.description,
|
||||
isPrimary = props.isPrimary,
|
||||
_onClick = props.onClick;
|
||||
return jsx(TileCard, {
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 50
|
||||
},
|
||||
__self: this
|
||||
}, isPrimary ? jsx(Row, {
|
||||
className: "justify-content-md-center",
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 52
|
||||
},
|
||||
__self: this
|
||||
}, jsx(Col, {
|
||||
md: "auto",
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 53
|
||||
},
|
||||
__self: this
|
||||
}, jsx(PrimaryImage, {
|
||||
className: "selectable",
|
||||
src: imageUrl,
|
||||
onClick: function onClick(event) {
|
||||
return _onClick(event, link);
|
||||
},
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 54
|
||||
},
|
||||
__self: this
|
||||
})), jsx(Col, {
|
||||
md: "6",
|
||||
className: "align-middle",
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 56
|
||||
},
|
||||
__self: this
|
||||
}, jsx(CardBody, {
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 57
|
||||
},
|
||||
__self: this
|
||||
}, jsx(PrimaryTitle, {
|
||||
className: "selectable",
|
||||
onClick: function onClick(event) {
|
||||
return _onClick(event, link);
|
||||
},
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 58
|
||||
},
|
||||
__self: this
|
||||
}, title), jsx(DescriptionText, {
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 59
|
||||
},
|
||||
__self: this
|
||||
}, description)))) : jsx(CardBody, {
|
||||
className: "text-center selectable",
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 64
|
||||
},
|
||||
__self: this
|
||||
}, jsx(Row, {
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 65
|
||||
},
|
||||
__self: this
|
||||
}, jsx(Col, {
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 66
|
||||
},
|
||||
__self: this
|
||||
}, jsx(NotPrimaryImage, {
|
||||
src: imageUrl,
|
||||
onClick: function onClick(event) {
|
||||
return _onClick(event, link);
|
||||
},
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 67
|
||||
},
|
||||
__self: this
|
||||
}))), jsx(Row, {
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 70
|
||||
},
|
||||
__self: this
|
||||
}, jsx(Col, {
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 71
|
||||
},
|
||||
__self: this
|
||||
}, jsx(NotPrimaryTitle, {
|
||||
onClick: function onClick(event) {
|
||||
return _onClick(event, link);
|
||||
},
|
||||
__source: {
|
||||
fileName: _jsxFileName$5,
|
||||
lineNumber: 72
|
||||
},
|
||||
__self: this
|
||||
}, title)))));
|
||||
};
|
||||
ModuleTile.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
imageUrl: PropTypes.string.isRequired,
|
||||
link: PropTypes.string.isRequired,
|
||||
description: PropTypes.string,
|
||||
isPrimary: PropTypes.bool
|
||||
};
|
||||
ModuleTile.defaultProps = {
|
||||
isPrimary: false,
|
||||
description: ''
|
||||
};
|
||||
|
||||
export { Button, LoginForm, ModuleTile, NavLogo, NavMenu, TextInput };
|
||||
|
Binary file not shown.
After Width: | Height: | Size: 9.5 KiB |
BIN
web/ASC.Web.Components/example/public/modules/crm_logolarge.png
Normal file
BIN
web/ASC.Web.Components/example/public/modules/crm_logolarge.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 7.7 KiB |
BIN
web/ASC.Web.Components/example/public/modules/documents240.png
Normal file
BIN
web/ASC.Web.Components/example/public/modules/documents240.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 50 KiB |
BIN
web/ASC.Web.Components/example/public/modules/mail_logolarge.png
Normal file
BIN
web/ASC.Web.Components/example/public/modules/mail_logolarge.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
After Width: | Height: | Size: 9.6 KiB |
@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Container, Row, Col } from 'reactstrap';
|
||||
import { ModuleTile } from 'asc-web-components';
|
||||
|
||||
const rowStyle = { marginTop: 8 };
|
||||
|
||||
storiesOf('Components|ModuleTile', module)
|
||||
// To set a default viewport for all the stories for this component
|
||||
.addParameters({ viewport: { defaultViewport: 'responsive' } })
|
||||
.add('all', () => (
|
||||
<Container>
|
||||
<Row style={rowStyle}>
|
||||
<Col>
|
||||
<ModuleTile
|
||||
title="Documents"
|
||||
imageUrl="./modules/documents240.png"
|
||||
link="/products/files/"
|
||||
description="Create, edit and share documents. Collaborate on them in real-time. 100% compatibility with MS Office formats guaranteed."
|
||||
isPrimary={true}
|
||||
onClick={action("onClick")}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row style={rowStyle}>
|
||||
<Col>
|
||||
<ModuleTile
|
||||
title="Projects"
|
||||
imageUrl="./modules/projects_logolarge.png"
|
||||
link="products/projects/"
|
||||
isPrimary={false}
|
||||
onClick={action("onClick")}
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<ModuleTile
|
||||
title="Crm"
|
||||
imageUrl="./modules/crm_logolarge.png"
|
||||
link="/products/crm/"
|
||||
isPrimary={false}
|
||||
onClick={action("onClick")}
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<ModuleTile
|
||||
title="Mail"
|
||||
imageUrl="./modules/mail_logolarge.png"
|
||||
link="/products/mail/"
|
||||
isPrimary={false}
|
||||
onClick={action("onClick")}
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<ModuleTile
|
||||
title="People"
|
||||
imageUrl="./modules/people_logolarge.png"
|
||||
link="/products/people/"
|
||||
isPrimary={false}
|
||||
onClick={action("onClick")}
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<ModuleTile
|
||||
title="Community"
|
||||
imageUrl="./modules/community_logolarge.png"
|
||||
link="products/community/"
|
||||
isPrimary={false}
|
||||
onClick={action("onClick")}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
));
|
94
web/ASC.Web.Components/src/components/module-tile/index.js
Normal file
94
web/ASC.Web.Components/src/components/module-tile/index.js
Normal file
@ -0,0 +1,94 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Card, Row, Col, CardBody, CardImg, CardTitle } from 'reactstrap';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const PrimaryImage = styled(CardImg)`
|
||||
border: none;
|
||||
height: 241px;
|
||||
width: 240px;
|
||||
`;
|
||||
|
||||
const NotPrimaryImage = styled(CardImg)`
|
||||
border: none;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
`;
|
||||
|
||||
const DescriptionText = styled(CardTitle)`
|
||||
font-size: 18px;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
clear: both;
|
||||
`;
|
||||
|
||||
const PrimaryTitle = styled(CardTitle)`
|
||||
font-size: 36px;
|
||||
color: black;
|
||||
`;
|
||||
|
||||
const NotPrimaryTitle = styled(CardTitle)`
|
||||
font-size: 13px;
|
||||
color: black;
|
||||
`;
|
||||
|
||||
const TileCard = styled(Card)`
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
.selectable {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ModuleTile = (props) => {
|
||||
const { title, imageUrl, link, description, isPrimary, onClick } = props;
|
||||
|
||||
return (
|
||||
<TileCard>
|
||||
{isPrimary ? (
|
||||
<Row className="justify-content-md-center">
|
||||
<Col md="auto">
|
||||
<PrimaryImage className="selectable" src={imageUrl} onClick={event => onClick(event, link) } />
|
||||
</Col>
|
||||
<Col md="6" className="align-middle">
|
||||
<CardBody>
|
||||
<PrimaryTitle className="selectable" onClick={event => onClick(event, link) }>{title}</PrimaryTitle>
|
||||
<DescriptionText>{description}</DescriptionText>
|
||||
</CardBody>
|
||||
</Col>
|
||||
</Row>
|
||||
) : (
|
||||
<CardBody className="text-center selectable">
|
||||
<Row>
|
||||
<Col>
|
||||
<NotPrimaryImage src={imageUrl} onClick={event => onClick(event, link) } />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<NotPrimaryTitle onClick={event => onClick(event, link) }>{title}</NotPrimaryTitle>
|
||||
</Col>
|
||||
</Row>
|
||||
</CardBody>
|
||||
)}
|
||||
</TileCard>
|
||||
);
|
||||
};
|
||||
|
||||
ModuleTile.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
imageUrl: PropTypes.string.isRequired,
|
||||
link: PropTypes.string.isRequired,
|
||||
description: PropTypes.string,
|
||||
isPrimary: PropTypes.bool
|
||||
}
|
||||
|
||||
ModuleTile.defaultProps = {
|
||||
isPrimary: false,
|
||||
description: ''
|
||||
}
|
||||
|
||||
export default ModuleTile;
|
@ -3,3 +3,4 @@ export { default as TextInput } from './components/text-input'
|
||||
export { default as LoginForm } from './components/forms/login'
|
||||
export { default as NavLogo } from './components/nav-logo'
|
||||
export { default as NavMenu } from './components/nav-menu'
|
||||
export { default as ModuleTile } from './components/module-tile'
|
||||
|
Loading…
Reference in New Issue
Block a user