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

Web: Components: update tabs text color

Browse Source
This commit is contained in:
Nikita Gopienko 2019-08-05 17:41:39 +03:00
parent 442940c593
commit 907f97bb78
2 changed files with 23 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/ASC.Web.Components/src/components/tabs/index.js
View File

@ -2,12 +2,9 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { Icons } from '../icons';
import { getCssFromSvg } from '../icons/get-css-from-svg';
import ReactDOMServer from 'react-dom/server';
var tabsIcon/*, tabsIcon2*/;
(function () { tabsIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.TabsIcon />)); }());
//tabsIcon2 = getCssFromSvg(ReactDOMServer.renderToString(<Icons.TabsIcon />));
@ -40,7 +37,7 @@ const Label = styled.label`
label {margin:0}
${props => props.selected ?
`background-image: url("data:image/svg+xml,${tabsIcon}"); cursor: default;` :
`background-image: url("data:image/svg+xml,${tabsIcon}"); cursor: default; p {color: #fff}` :
`background-image: none;
&:hover{
cursor: pointer;
@ -70,7 +67,6 @@ class Tabs extends Component {
render() {
//console.log(this.props.selected);
return (
<TabsContainer>
<NavItem>
@ -81,11 +77,11 @@ class Tabs extends Component {
onClick={() => {
this.labelClick(item);
}}>
{item.something_title}
{item.title}
</Label>
)}
</NavItem>
<BodyContainer> {this.props.children[this.state.activeTab].something_body} </BodyContainer>
<BodyContainer> {this.props.children[this.state.activeTab].body} </BodyContainer>
</TabsContainer>
);
}
@ -94,6 +90,6 @@ class Tabs extends Component {
export default Tabs;
Tabs.propTypes = {
children: PropTypes.object.isRequired
children: PropTypes.object
};
Tabs.defaultProps = {/*isChecked: false*/ };

38
web/ASC.Web.Storybook/stories/tabs/index.stories.js
View File

@ -14,8 +14,8 @@ import { BooleanValue } from 'react-values';
const something_items = [
{
id: "0",
something_title: <Text.Body>{text("Title text", "Title1")} </Text.Body>,
something_body:
title: <Text.Body> Title1 </Text.Body>,
body:
<div >
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
@ -24,8 +24,8 @@ const something_items = [
},
{
id: "1",
something_title: <Text.Body>{text("Title text2", "Title2")} </Text.Body>,
something_body:
title: <Text.Body> Title2 </Text.Body>,
body:
<div >
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
@ -34,8 +34,8 @@ const something_items = [
},
{
id: "2",
something_title: <Text.Body>{text("Title text3", "Title3")} </Text.Body>,
something_body:
title: <Text.Body> Title3 </Text.Body>,
body:
<div>
<div> <input></input> <input></input> <input></input> </div>
<div> <input></input> <input></input> <input></input> </div>
@ -44,22 +44,22 @@ const something_items = [
},
{
id: "3",
something_title: <Text.Body>{text("Title text3", "Title3")} </Text.Body>,
something_body:
title: <Text.Body> Title4 </Text.Body>,
body:
<div>
<div> <input></input> <input></input> <input></input> </div>
<div> <input></input> <input></input> <input></input> </div>
<div> <input></input> <input></input> <input></input> </div>
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
<div> <button>BUTTON</button> <button>BUTTON</button> <button>BUTTON</button> </div>
</div>
},
{
id: "4",
something_title: <Text.Body>{text("Title text3", "Title3")} </Text.Body>,
something_body:
title: <Text.Body> Title5 </Text.Body>,
body:
<div>
<div> <input></input> <input></input> <input></input> </div>
<div> <input></input> <input></input> <input></input> </div>
<div> <input></input> <input></input> <input></input> </div>
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
<div> <label>LABEL</label> <label>LABEL</label> <label>LABEL</label> </div>
</div>
}
];
@ -82,9 +82,9 @@ storiesOf('Components|Tabs', module)
.add('base', () => {
return (
<BooleanValue>
<Tabs>
{something_items}
</Tabs>
<Tabs>
{something_items}
</Tabs>
</BooleanValue>
);
});