IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Added NavLogo for NavMenu

Browse Source
This commit is contained in:
Alexey Safronov 2019-05-27 11:11:04 +03:00
parent 5813e16c9b
commit 0b294fddd9
9 changed files with 205 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
web/ASC.Web.Components/dist/asc-web-components.cjs.js vendored
View File

@ -465,31 +465,86 @@ LoginForm.defaultProps = {
password: ''
};
var _jsxFileName$3 = "D:\\GitHub\\CommunityServer-AspNetCore\\web\\ASC.Web.Components\\src\\components\\nav-menu\\index.js";
var _jsxFileName$3 = "D:\\GitHub\\CommunityServer-AspNetCore\\web\\ASC.Web.Components\\src\\components\\nav-logo\\index.js";
function _templateObject$3() {
var data = _taggedTemplateLiteral(["\n background: #0f4071;\n color: #c5c5c5;\n height: 48px;\n padding-top: 4px;\n z-index: 1;\n"]);
var data = _taggedTemplateLiteral(["\n cursor: pointer;\n padding: 4px 0 5px;\n margin: 0 24px 0 0;\n"]);
_templateObject$3 = function _templateObject() {
return data;
};
return data;
}
var StyledNav = styled__default(reactstrap.Navbar)(_templateObject$3());
var StyledNavLogo = styled__default(reactstrap.NavbarBrand)(_templateObject$3());
var NavLogo = function NavLogo(props) {
var logoUrl = props.logoUrl,
href = props.href;
return core.jsx(StyledNavLogo, {
href: href,
__source: {
fileName: _jsxFileName$3,
lineNumber: 15
},
__self: this
}, core.jsx("svg", {
height: 23,
width: 142,
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink",
__source: {
fileName: _jsxFileName$3,
lineNumber: 16
},
__self: this
}, core.jsx("image", {
xlinkHref: logoUrl,
__source: {
fileName: _jsxFileName$3,
lineNumber: 22
},
__self: this
})));
};
NavLogo.propTypes = {
logoUrl: PropTypes.string.isRequired
};
var _jsxFileName$4 = "D:\\GitHub\\CommunityServer-AspNetCore\\web\\ASC.Web.Components\\src\\components\\nav-menu\\index.js";
function _templateObject$4() {
var data = _taggedTemplateLiteral(["\n background: #0f4071;\n color: #c5c5c5;\n height: 48px;\n padding-top: 4px;\n z-index: 1;\n"]);
_templateObject$4 = function _templateObject() {
return data;
};
return data;
}
var StyledNav = styled__default(reactstrap.Navbar)(_templateObject$4());
var NavMenu = function NavMenu(props) {
var children = props.children;
var href = props.href,
logoUrl = props.logoUrl,
children = props.children;
return core.jsx(StyledNav, {
dark: true,
__source: {
fileName: _jsxFileName$3,
lineNumber: 18
fileName: _jsxFileName$4,
lineNumber: 19
},
__self: this
}, children);
}, core.jsx(NavLogo, {
logoUrl: logoUrl,
href: href,
__source: {
fileName: _jsxFileName$4,
lineNumber: 20
},
__self: this
}), children);
};
NavMenu.propTypes = {
href: PropTypes.string.isRequired,
logoUrl: PropTypes.string.isRequired,
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
};
exports.Button = Button;
exports.LoginForm = LoginForm;
exports.NavLogo = NavLogo;
exports.NavMenu = NavMenu;
exports.TextInput = TextInput;

72
web/ASC.Web.Components/dist/asc-web-components.esm.js vendored
View File

@ -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, Navbar } from 'reactstrap';
import { Row, Container, Col, Collapse, NavbarBrand, Navbar } from 'reactstrap';
function _defineProperty(obj, key, value) {
if (key in obj) {
@ -457,28 +457,82 @@ LoginForm.defaultProps = {
password: ''
};
var _jsxFileName$3 = "D:\\GitHub\\CommunityServer-AspNetCore\\web\\ASC.Web.Components\\src\\components\\nav-menu\\index.js";
var _jsxFileName$3 = "D:\\GitHub\\CommunityServer-AspNetCore\\web\\ASC.Web.Components\\src\\components\\nav-logo\\index.js";
function _templateObject$3() {
var data = _taggedTemplateLiteral(["\n background: #0f4071;\n color: #c5c5c5;\n height: 48px;\n padding-top: 4px;\n z-index: 1;\n"]);
var data = _taggedTemplateLiteral(["\n cursor: pointer;\n padding: 4px 0 5px;\n margin: 0 24px 0 0;\n"]);
_templateObject$3 = function _templateObject() {
return data;
};
return data;
}
var StyledNav = styled(Navbar)(_templateObject$3());
var StyledNavLogo = styled(NavbarBrand)(_templateObject$3());
var NavLogo = function NavLogo(props) {
var logoUrl = props.logoUrl,
href = props.href;
return jsx(StyledNavLogo, {
href: href,
__source: {
fileName: _jsxFileName$3,
lineNumber: 15
},
__self: this
}, jsx("svg", {
height: 23,
width: 142,
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink",
__source: {
fileName: _jsxFileName$3,
lineNumber: 16
},
__self: this
}, jsx("image", {
xlinkHref: logoUrl,
__source: {
fileName: _jsxFileName$3,
lineNumber: 22
},
__self: this
})));
};
NavLogo.propTypes = {
logoUrl: PropTypes.string.isRequired
};
var _jsxFileName$4 = "D:\\GitHub\\CommunityServer-AspNetCore\\web\\ASC.Web.Components\\src\\components\\nav-menu\\index.js";
function _templateObject$4() {
var data = _taggedTemplateLiteral(["\n background: #0f4071;\n color: #c5c5c5;\n height: 48px;\n padding-top: 4px;\n z-index: 1;\n"]);
_templateObject$4 = function _templateObject() {
return data;
};
return data;
}
var StyledNav = styled(Navbar)(_templateObject$4());
var NavMenu = function NavMenu(props) {
var children = props.children;
var href = props.href,
logoUrl = props.logoUrl,
children = props.children;
return jsx(StyledNav, {
dark: true,
__source: {
fileName: _jsxFileName$3,
lineNumber: 18
fileName: _jsxFileName$4,
lineNumber: 19
},
__self: this
}, children);
}, jsx(NavLogo, {
logoUrl: logoUrl,
href: href,
__source: {
fileName: _jsxFileName$4,
lineNumber: 20
},
__self: this
}), children);
};
NavMenu.propTypes = {
href: PropTypes.string.isRequired,
logoUrl: PropTypes.string.isRequired,
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
};
export { Button, LoginForm, NavMenu, TextInput };
export { Button, LoginForm, NavLogo, NavMenu, TextInput };

1
web/ASC.Web.Components/example/.storybook/decorators/section/index.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const sectionStyles = {
padding: 16,

2
web/ASC.Web.Components/example/package.json
View File

@ -17,7 +17,7 @@
"styled-components": "^4.2.0"
},
"scripts": {
"start": "start-storybook -p 6006",
"start": "start-storybook -p 6006 -s ./public",
"build-storybook": "build-storybook -c .storybook -o storybook-static"
},
"eslintConfig": {

34
web/ASC.Web.Components/example/public/light_small_general.svg Normal file
View File

@ -0,0 +1,34 @@
<svg width="142" height="23" viewBox="0 0 142 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M31 12.0026C31 9.62504 31.6829 7.83068 33.0943 6.66435C34.4602 5.45316 36.0993 4.87 37.966 4.87C39.8326 4.87 41.4262 5.45316 42.792 6.66435C44.1579 7.87554 44.8409 9.62504 44.8409 12.0474C44.8409 14.4249 44.1579 16.2193 42.792 17.3856C41.4262 18.5968 39.7871 19.18 37.966 19.18C36.0993 19.18 34.5057 18.5968 33.0943 17.3856C31.6829 16.1744 31 14.3801 31 12.0026ZM34.0049 12.0026C34.0049 13.6623 34.3236 14.8287 34.9155 15.5913C35.5529 16.3539 36.2358 16.8473 36.9643 17.0268C37.1464 17.0716 37.283 17.1165 37.4651 17.1165C37.6017 17.1165 37.7838 17.1613 37.9204 17.1613C38.1025 17.1613 38.2391 17.1613 38.4212 17.1165C38.6034 17.1165 38.74 17.0716 38.9221 17.0268C39.6505 16.8473 40.3335 16.3539 40.9253 15.5913C41.5172 14.8287 41.8359 13.6175 41.8359 12.0474C41.8359 10.4774 41.5172 9.26617 40.9253 8.50357C40.3335 7.74097 39.6505 7.24752 38.9221 7.06808C38.74 7.02322 38.5578 6.97836 38.4212 6.97836C38.2391 6.97836 38.1025 6.93351 37.9204 6.93351C37.7383 6.93351 37.6017 6.9335 37.4651 6.97836C37.3285 6.97836 37.1464 7.02322 36.9643 7.06808C36.2358 7.24752 35.5529 7.74097 34.9155 8.50357C34.3236 9.22131 34.0049 10.3876 34.0049 12.0026Z" fill="white"/>
<path d="M46.3433 5.00449H50.0767L54.9938 13.8417L55.7223 15.7258H55.7678L55.7223 13.2585V5.00449H58.5906V19.0005H54.8573L49.9401 9.84925L49.2116 8.27919H49.1661L49.2116 10.7464V19.0005H46.3433V5.00449Z" fill="white"/>
<path d="M61.0948 5.00449H63.9631V16.6229H69.6087V19.0005H61.0948V5.00449Z" fill="white"/>
<path d="M67.8331 5.00449H71.1567L74.0705 9.93897L74.5258 10.881H74.6169L75.0722 9.93897L78.0316 5.00449H81.082L75.9372 13.3034V19.0005H73.0689V13.3034L67.8331 5.00449Z" fill="white"/>
<path d="M81.1731 12.0026C81.1731 9.62504 81.856 7.83068 83.2674 6.66435C84.6333 5.45316 86.2723 4.87 88.139 4.87C90.0057 4.87 91.5993 5.45316 92.9651 6.66435C94.331 7.87554 95.0139 9.62504 95.0139 12.0474C95.0139 14.4249 94.331 16.2193 92.9651 17.3856C91.5993 18.5968 89.9602 19.18 88.139 19.18C86.2723 19.18 84.6788 18.5968 83.2674 17.3856C81.9016 16.1744 81.1731 14.3801 81.1731 12.0026ZM84.178 12.0026C84.178 13.6623 84.4967 14.8287 85.0886 15.5913C85.726 16.3539 86.3634 16.8473 87.1374 17.0268C87.3195 17.0716 87.5016 17.1165 87.6382 17.1165C87.7748 17.1165 87.9569 17.1613 88.0935 17.1613C88.2756 17.1613 88.4122 17.1613 88.5943 17.1165C88.7764 17.1165 88.913 17.0716 89.0952 17.0268C89.8236 16.8473 90.5066 16.3539 91.0984 15.5913C91.6903 14.8287 92.009 13.6175 92.009 12.0474C92.009 10.4774 91.6903 9.26617 91.0984 8.50357C90.5066 7.74097 89.8236 7.24752 89.0952 7.06808C88.913 7.02322 88.7309 6.97836 88.5943 6.97836C88.4122 6.97836 88.2756 6.93351 88.0935 6.93351C87.9114 6.93351 87.7748 6.9335 87.6382 6.97836C87.5016 6.97836 87.3195 7.02322 87.1374 7.06808C86.4089 7.24752 85.726 7.74097 85.0886 8.50357C84.4967 9.22131 84.178 10.3876 84.178 12.0026Z" fill="#D7E4EA"/>
<path d="M96.5619 5.00449H104.484V7.38201H99.4303V10.7464H104.256V13.1239H99.4303V19.0005H96.5619V5.00449Z" fill="#D7E4EA"/>
<path d="M106.169 5.00449H114.091V7.38201H109.037V10.7464H113.863V13.1239H109.037V19.0005H106.169V5.00449Z" fill="#D7E4EA"/>
<path d="M115.775 19.0005V5.00449H118.644V19.0005H115.775Z" fill="#D7E4EA"/>
<path d="M131.665 5.3185V7.74088C131.164 7.56144 130.663 7.42687 130.117 7.33715C129.571 7.24743 128.979 7.20257 128.341 7.20257C126.839 7.20257 125.701 7.65116 124.881 8.5932C124.062 9.49038 123.652 10.6567 123.652 12.0473C123.652 13.3931 124.016 14.5146 124.79 15.4118C125.564 16.3089 126.657 16.8024 128.068 16.8024C128.569 16.8024 129.07 16.7575 129.662 16.7127C130.253 16.6229 130.845 16.4884 131.483 16.2192L131.665 18.5967C131.574 18.6416 131.437 18.6865 131.301 18.7313C131.119 18.7762 130.936 18.821 130.709 18.8659C130.345 18.9556 129.889 19.0005 129.343 19.0902C128.797 19.135 128.25 19.1799 127.658 19.1799C127.567 19.1799 127.476 19.1799 127.431 19.1799C127.34 19.1799 127.249 19.1799 127.203 19.1799C125.564 19.0902 124.062 18.4622 122.696 17.3855C121.33 16.2641 120.647 14.5146 120.647 12.1819C120.647 9.89411 121.33 8.09975 122.65 6.8437C123.97 5.58765 125.792 4.95963 128.023 4.95963C128.614 4.95963 129.161 4.95963 129.616 5.00448C130.117 5.04934 130.572 5.13906 131.073 5.22878C131.164 5.27364 131.301 5.27364 131.392 5.3185C131.437 5.27364 131.528 5.3185 131.665 5.3185Z" fill="#D7E4EA"/>
<path d="M133.486 5.00449H142V7.20257H136.4V10.7016H141.454V12.8997H136.4V16.8024H142V19.0005H133.486V5.00449Z" fill="#D7E4EA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9389 22.718L0.657327 17.9809C-0.218514 17.5673 -0.218514 16.9282 0.657327 16.5522L4.23685 14.898L10.9009 17.9809C11.7767 18.3944 13.1857 18.3944 14.0234 17.9809L20.6874 14.898L24.267 16.5522C25.1428 16.9658 25.1428 17.6049 24.267 17.9809L13.9853 22.718C13.1857 23.094 11.7767 23.094 10.9389 22.718Z" fill="url(#paint0_linear)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9389 16.8906L0.657327 12.1535C-0.218514 11.7399 -0.218514 11.1008 0.657327 10.7248L4.16069 9.10815L10.9389 12.2287C11.8148 12.6422 13.2237 12.6422 14.0615 12.2287L20.8398 9.10815L24.3431 10.7248C25.219 11.1384 25.219 11.7775 24.3431 12.1535L14.0615 16.8906C13.1857 17.3042 11.7767 17.3042 10.9389 16.8906Z" fill="url(#paint1_linear)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9385 11.2131L0.656881 6.47597C-0.21896 6.06241 -0.21896 5.42327 0.656881 5.04731L10.9385 0.31017C11.8143 -0.10339 13.2233 -0.10339 14.0611 0.31017L24.3427 5.04731C25.2185 5.46087 25.2185 6.10001 24.3427 6.47597L14.0611 11.2131C13.1852 11.5891 11.7763 11.5891 10.9385 11.2131Z" fill="url(#paint2_linear)"/>
</g>
<defs>
<linearGradient id="paint0_linear" x1="12.4914" y1="27.2083" x2="12.4914" y2="9.91349" gradientUnits="userSpaceOnUse">
<stop stop-color="#FCC2B1"/>
<stop offset="0.8848" stop-color="#D9420B"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="12.4914" y1="19.7202" x2="12.4914" y2="8.34589" gradientUnits="userSpaceOnUse">
<stop stop-color="#DEEDC9"/>
<stop offset="0.6606" stop-color="#8BBA25"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="12.4909" y1="15.114" x2="12.4909" y2="-0.363895" gradientUnits="userSpaceOnUse">
<stop stop-color="#C2EBFA"/>
<stop offset="1" stop-color="#26A8DE"/>
</linearGradient>
<clipPath id="clip0">
<rect width="142" height="23" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

5
web/ASC.Web.Components/example/stories/nav-menu/index.stories.js
View File

@ -2,7 +2,10 @@ import React from 'react';
import { storiesOf } from '@storybook/react';
import { NavMenu } from 'asc-web-components';
//"https://nct.onlyoffice.com/skins/default/images/onlyoffice_logo/light_small_general.svg"
storiesOf('Components|NavMenu', module)
.add('base', () => (
<NavMenu></NavMenu>
<NavMenu logoUrl="/light_small_general.svg" href="/?path=/story/components-navmenu--base" >
</NavMenu>
));

32
web/ASC.Web.Components/src/components/nav-logo/index.js Normal file
View File

@ -0,0 +1,32 @@
import React from 'react'
import { NavbarBrand } from 'reactstrap'
import styled from 'styled-components'
import PropTypes from 'prop-types'
const StyledNavLogo = styled(NavbarBrand)`
cursor: pointer;
padding: 4px 0 5px;
margin: 0 24px 0 0;
`;
const NavLogo = props => {
const { logoUrl, href } = props;
return (
<StyledNavLogo href={href}>
<svg
height={23}
width={142}
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink">
<image xlinkHref={logoUrl} />
</svg>
</StyledNavLogo>
);
}
NavLogo.propTypes = {
logoUrl: PropTypes.string.isRequired
}
export default NavLogo

10
web/ASC.Web.Components/src/components/nav-menu/index.js
View File

@ -2,6 +2,7 @@ import React from 'react'
import { Navbar } from 'reactstrap'
import styled from 'styled-components'
import PropTypes from 'prop-types'
import NavLogo from '../nav-logo'
const StyledNav = styled(Navbar)`
background: #0f4071;
@ -12,14 +13,19 @@ const StyledNav = styled(Navbar)`
`;
const NavMenu = props => {
const { children } = props;
const { href, logoUrl, children } = props;
return (
<StyledNav dark>{children}</StyledNav>
<StyledNav dark>
<NavLogo logoUrl={logoUrl} href={href} />
{children}
</StyledNav>
);
}
NavMenu.propTypes = {
href: PropTypes.string.isRequired,
logoUrl: PropTypes.string.isRequired,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node

1
web/ASC.Web.Components/src/index.js
View File

@ -1,4 +1,5 @@
export { default as Button } from './components/button'
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'