Merge branch 'master' of github.com:ONLYOFFICE/CommunityServer-AspNetCore
This commit is contained in:
commit
7316e058f5
@ -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}>
|
||||
{
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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'
|
||||
|
@ -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>
|
After Width: | Height: | Size: 585 B |
@ -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>
|
After Width: | Height: | Size: 585 B |
@ -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>
|
||||
|
After Width: | Height: | Size: 586 B |
@ -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>
|
||||
|
Before Width: | Height: | Size: 518 B After Width: | Height: | Size: 585 B |
@ -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
|
@ -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
|
@ -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
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user