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

Merge branch 'master' of github.com:ONLYOFFICE/CommunityServer-AspNetCore

Browse Source
This commit is contained in:
Alexey Safronov 2019-07-18 12:44:02 +03:00
commit 7316e058f5
11 changed files with 230 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/ASC.Web.Components/src/components/context-menu-button/index.js
View File

@ -62,6 +62,10 @@ class ContextMenuButton extends React.Component {
}
: this.stopAction
}
onMouseEnter={this.props.onMouseEnter}
onMouseLeave={this.props.onMouseLeave}
onMouseOver={this.props.onMouseOver}
onMouseOut={this.props.onMouseOut}
/>
<DropDown direction={this.props.direction || 'left'} isOpen={this.state.isOpen}>
{

11
web/ASC.Web.Components/src/components/icon-button/index.js
View File

@ -12,7 +12,16 @@ const StyledOuter = styled.div`
const IconButton = (props) => {
const { color, isFill, iconName, size, isDisabled } = props;
return (
<StyledOuter size={size} isDisabled={isDisabled} onClick={!props.isDisabled ? props.onClick : undefined}>
<StyledOuter
size={size}
isDisabled={isDisabled}
onClick={!props.isDisabled ? props.onClick : undefined}
onMouseEnter={!props.isDisabled ? props.onMouseEnter : undefined}
onMouseLeave={!props.isDisabled ? props.onMouseLeave : undefined}
onMouseOver={!props.isDisabled ? props.onMouseOver : undefined}
onMouseOut={!props.isDisabled ? props.onMouseOut : undefined}
>
{React.createElement(Icons[iconName], {size: "scale", color: color, isfill: isFill})}
</StyledOuter>
);

15
web/ASC.Web.Components/src/components/icons/svg/index.js
View File

@ -115,6 +115,9 @@ import OrigMainMenuFeedbackIcon from './main.menu.feedback.react.svg';
import OrigMainMenuVideoGuideIcon from './main.menu.video.guide.react.svg';
import OrigChatIcon from './chat.react.svg';
import OrigRectangleFilterIcon from './rectangle.filter.react.svg';
import OrigRectangleFilterDisabledIcon from './rectangle.filter.click.disabled.react.svg';
import OrigRectangleFilterHoverIcon from './rectangle.filter.hover.react.svg';
import OrigRectangleFilterClickIcon from './rectangle.filter.click.react.svg';
import OrigCatalogButtonIcon from './catalog.button.react.svg';
import OrigCrossIcon from './cross.react.svg';
import OrigCheckboxIcon from './checkbox.react.svg';
@ -587,6 +590,18 @@ export const RectangleFilterIcon = createStyledIcon(
OrigRectangleFilterIcon,
'RectangleFilterIcon'
);
export const RectangleFilterDisabledIcon = createStyledIcon(
OrigRectangleFilterDisabledIcon,
'RectangleFilterDisabledIcon'
);
export const RectangleFilterHoverIcon = createStyledIcon(
OrigRectangleFilterHoverIcon,
'RectangleFilterHoverIcon'
);
export const RectangleFilterClickIcon = createStyledIcon(
OrigRectangleFilterClickIcon,
'RectangleFilterClickIcon'
);
export const RefreshIcon = createStyledIcon(
OrigRefreshIcon,
'RefreshIcon'

5
web/ASC.Web.Components/src/components/icons/svg/rectangle.filter.click.disabled.react.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="33" height="26" viewBox="0 0 33 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H21.1954C21.9785 0.5 22.7163 0.866919 23.1889 1.49134L31.2783 12.1803C31.6858 12.7188 31.6832 13.4633 31.2719 13.999L23.1913 24.5226C22.7182 25.1388 21.9854 25.5 21.2084 25.5H3C1.61929 25.5 0.5 24.3807 0.5 23V3Z" fill="#F8F9F9" stroke="#ECEEF1"/>
<rect x="13.5" y="6.5" width="13" height="1" transform="rotate(90 13.5 6.5)" fill="#D8D8D8" stroke="#979797"/>
<rect x="6.5" y="12.5" width="13" height="1" fill="#D8D8D8" stroke="#979797"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 585 B

5
web/ASC.Web.Components/src/components/icons/svg/rectangle.filter.click.react.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="33" height="26" viewBox="0 0 33 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H21.1954C21.9785 0.5 22.7163 0.866919 23.1889 1.49134L31.2783 12.1803C31.6858 12.7188 31.6832 13.4633 31.2719 13.999L23.1913 24.5226C22.7182 25.1388 21.9854 25.5 21.2084 25.5H3C1.61929 25.5 0.5 24.3807 0.5 23V3Z" fill="#ECEEF1" stroke="#A3A9AE"/>
<rect x="13.5" y="6.5" width="13" height="1" transform="rotate(90 13.5 6.5)" fill="#D8D8D8" stroke="#979797"/>
<rect x="6.5" y="12.5" width="13" height="1" fill="#D8D8D8" stroke="#979797"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 585 B

6
web/ASC.Web.Components/src/components/icons/svg/rectangle.filter.hover.react.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="33" height="26" viewBox="0 0 33 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H21.1954C21.9785 0.5 22.7163 0.866919 23.1889 1.49134L31.2783 12.1803C31.6858 12.7188 31.6832 13.4633 31.2719 13.999L23.1913 24.5226C22.7182 25.1388 21.9854 25.5 21.2084 25.5H3C1.61929 25.5 0.5 24.3807 0.5 23V3Z" fill="#F8F9F9" stroke="#A3A9AE"/>
<rect x="13.5" y="6.5" width="13" height="1" transform="rotate(90 13.5 6.5)" fill="#D8D8D8" stroke="#979797"/>
<rect x="6.5" y="12.5" width="13" height="1" fill="#D8D8D8" stroke="#979797"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 586 B

3
web/ASC.Web.Components/src/components/icons/svg/rectangle.filter.react.svg
View File

@ -1,4 +1,5 @@
<svg width="33" height="26" viewBox="0 0 33 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H21.1954C21.9785 0.5 22.7163 0.866919 23.1889 1.49134L31.2783 12.1803C31.6858 12.7188 31.6832 13.4633 31.2719 13.999L23.1913 24.5226C22.7182 25.1388 21.9854 25.5 21.2084 25.5H3C1.61929 25.5 0.5 24.3807 0.5 23V3Z" fill="#F8F9F9" stroke="#ECEEF1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 12L6 12V14L12 14V20H14L14 14H20V12H14V6L12 6L12 12Z" fill="#A3A9AE"/>
<rect x="13.5" y="6.5" width="13" height="1" transform="rotate(90 13.5 6.5)" fill="#D8D8D8" stroke="#979797"/>
<rect x="6.5" y="12.5" width="13" height="1" fill="#D8D8D8" stroke="#979797"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 518 B

After

Width:  |  Height:  |  Size: 585 B

49
web/ASC.Web.Components/src/components/search-input/close-button.js Normal file
View File

@ -0,0 +1,49 @@
import React from "react";
import IconButton from '../icon-button';
class CloseButton extends React.Component {
constructor(props) {
super(props);
this.state = {
hover: false,
isMouseOver: false
};
this.onMouseEnter = this.onMouseEnter.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
this.onMouseOver = this.onMouseOver.bind(this);
this.onMouseOut = this.onMouseOut.bind(this);
}
onMouseEnter(){
this.setState({isMouseOver: true});
}
onMouseLeave(){
this.setState({isMouseOver: false});
}
onMouseOver(){
let _this = this;
setTimeout(function(){ if(_this.state.isMouseOver){ _this.setState({hover: true});}},30);
}
onMouseOut(){
let _this = this;
setTimeout(function(){ if(!_this.state.isMouseOver){_this.setState({hover: false});}},30);
}
render() {
return (
<IconButton
color={this.state.hover ? '#333' : "#D8D8D8"}
size={10}
iconName={'CrossIcon'}
isFill={true}
isDisabled={this.props.isDisabled}
onClick={!this.props.isDisabled ? ((e) => this.props.onClick()) : undefined}
onMouseOver={this.onMouseOver}
onMouseOut={this.onMouseOut}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
/>
);
}
}
export default CloseButton

50
web/ASC.Web.Components/src/components/search-input/filter-button.js Normal file
View File

@ -0,0 +1,50 @@
import React from "react";
import ContextMenuButton from '../context-menu-button';
class FilterButton extends React.Component {
constructor(props) {
super(props);
this.state = {
hover: false,
isMouseOver: false
};
this.onMouseEnter = this.onMouseEnter.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
this.onMouseOver = this.onMouseOver.bind(this);
this.onMouseOut = this.onMouseOut.bind(this);
}
onMouseEnter(){
this.setState({isMouseOver: true})
}
onMouseLeave(){
this.setState({isMouseOver: false})
}
onMouseOver(){
let _this = this;
setTimeout(function(){ if(_this.state.isMouseOver){ _this.setState({hover: true})}},30);
}
onMouseOut(){
let _this = this;
setTimeout(function(){ if(!_this.state.isMouseOver){_this.setState({hover: false})}},30);
}
render() {
return (
<ContextMenuButton
title={'Actions'}
iconName={this.state.hover ? 'RectangleFilterHoverIcon' : 'RectangleFilterIcon'}
color='#A3A9AE'
size={this.props.iconSize}
isDisabled={this.props.isDisabled}
getData={this.props.getData}
onMouseOver={this.onMouseOver}
onMouseOut={this.onMouseOut}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
></ContextMenuButton>
);
}
}
export default FilterButton

76
web/ASC.Web.Components/src/components/search-input/hide-filter.js Normal file
View File

@ -0,0 +1,76 @@
import React from "react";
import styled from 'styled-components';
import { Icons } from '../icons';
import {UncontrolledPopover, PopoverBody } from 'reactstrap';
const Caret = styled.div`
width: 7px;
position: absolute;
right: 6px;
transform: ${props => props.isOpen ? 'rotate(180deg)' : 'rotate(0)'};
top: ${props => props.isOpen ? '2px' : '0'};
`;
const StyledHideFilterButton = styled.div`
display: flex;
position: relative;
align-items: center;
font-weight: 600;
font-size: 16px;
height: 100%;
border: 1px solid #ECEEF1;
border-radius: 3px;
background-color: #F8F9F9;
padding: 0 20px 0 9px;
margin-right: 2px;
cursor: pointer;
font-family: Open Sans;
font-style: normal;
:hover{
border-color: #A3A9AE;
}
:active{
background-color: #ECEEF1;
}
`;
const StyledHideFilter = styled.div`
display: inline-block;
font-size: 1rem;
height: 100%;
`;
const StyledPopoverBody = styled(PopoverBody)`
font-size: 1rem;
border-radius: 6px;
box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.13);
`;
class HideFilter extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
popoverOpen: false
};
}
toggle() {
this.setState({
popoverOpen: !this.state.popoverOpen
});
}
render() {
return (
<StyledHideFilter>
<StyledHideFilterButton id="PopoverLegacy" >{this.props.count} <Caret isOpen={this.state.popoverOpen}><Icons.ExpanderDownIcon size='scale' isfill={true} color="#A3A9AE"/></Caret></StyledHideFilterButton>
<UncontrolledPopover isOpen={this.state.popoverOpen} trigger="legacy" placement="bottom-start" target="PopoverLegacy" hideArrow={true} toggle={this.toggle}>
<StyledPopoverBody>{this.props.children}</StyledPopoverBody>
</UncontrolledPopover>
</StyledHideFilter>
);
}
}
export default HideFilter

93
web/ASC.Web.Components/src/components/search-input/index.js
View File

@ -2,21 +2,15 @@ import React from "react";
import PropTypes from "prop-types";
import styled from 'styled-components';
import InputBlock from '../input-block';
import IconButton from '../icon-button';
import { Icons } from '../icons';
import ContextMenuButton from '../context-menu-button';
import {UncontrolledPopover, PopoverBody } from 'reactstrap';
import FilterButton from './filter-button';
import HideFilter from './hide-filter';
import CloseButton from './close-button';
const StyledSearchInput = styled.div`
min-width: 200px;
`;
const Caret = styled.div`
width: 7px;
position: absolute;
right: 6px;
transform: ${props => props.isOpen ? 'rotate(180deg)' : 'rotate(0)'};
top: ${props => props.isOpen ? '2px' : '0'};
`;
const StyledFilterItem = styled.div`
display: ${props => props.block ? 'block' : 'inline-block'};
margin-bottom: ${props => props.block ? '3px' : '0'};
@ -33,29 +27,7 @@ const StyledFilterItem = styled.div`
margin-bottom: 0;
}
`;
const StyledHideFilterButton = styled.div`
display: flex;
position: relative;
align-items: center;
font-weight: 600;
font-size: 16px;
height: 100%;
border: 1px solid #ECEEF1;
border-radius: 3px;
background-color: #F8F9F9;
padding: 0 20px 0 9px;
margin-right: 2px;
cursor: pointer;
font-family: Open Sans;
font-style: normal;
:hover{
border-color: #A3A9AE;
}
:active{
background-color: #ECEEF1;
}
`;
const StyledIconButtonBlock = styled.div`
display: inline-block;
margin-left: 5px;
@ -64,16 +36,7 @@ const StyledIconButtonBlock = styled.div`
right: 3px;
top: calc(50% - 5px);
`;
const StyledHideFilter = styled.div`
display: inline-block;
font-size: 1rem;
height: 100%;
`;
const StyledPopoverBody = styled(PopoverBody)`
font-size: 1rem;
border-radius: 6px;
box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.13);
`;
const FilterItem = props => {
const { groupLabel, id, label, block } = props;
@ -81,11 +44,7 @@ const FilterItem = props => {
<StyledFilterItem key={id} id={id} block={block} >
{groupLabel}: {label}
<StyledIconButtonBlock>
<IconButton
color={props.color}
size={10}
iconName={"CrossIcon"}
isFill={true}
<CloseButton
isDisabled={props.isDisabled}
onClick={!props.isDisabled ? ((e) => props.onClose(e, id)) : undefined}
/>
@ -93,35 +52,6 @@ const FilterItem = props => {
</StyledFilterItem>
);
};
class HideFilter extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
popoverOpen: false
};
}
toggle() {
this.setState({
popoverOpen: !this.state.popoverOpen
});
}
render() {
return (
<StyledHideFilter>
<StyledHideFilterButton id="PopoverLegacy" >{this.props.count} <Caret isOpen={this.state.popoverOpen}><Icons.ExpanderDownIcon size='scale' isfill={true} color="#A3A9AE"/></Caret></StyledHideFilterButton>
<UncontrolledPopover isOpen={this.state.popoverOpen} trigger="legacy" placement="bottom-start" target="PopoverLegacy" hideArrow={true} toggle={this.toggle}>
<StyledPopoverBody>{this.props.children}</StyledPopoverBody>
</UncontrolledPopover>
</StyledHideFilter>
);
}
}
class SearchInput extends React.Component {
constructor(props) {
@ -145,7 +75,6 @@ class SearchInput extends React.Component {
this.getFilterItems = this.getFilterItems.bind(this);
this.updateFilter = this.updateFilter.bind(this);
this.resize = this.resize.bind(this);
}
onClickDropDownItem(event, filterItem){
@ -349,13 +278,7 @@ class SearchInput extends React.Component {
}
{ this.props.isNeedFilter &&
<ContextMenuButton
title={'Actions'}
iconName={'RectangleFilterIcon'}
color='#A3A9AE'
size={iconSize}
getData={_this.getData}
/>
<FilterButton iconSize={iconSize} getData={_this.getData} isDisabled={this.props.isDisabled}/>
}
</InputBlock>
</StyledSearchInput>