jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix clipping bg on hover, fix side menu header

Browse source
This commit is contained in:
sylenien 2022-05-16 17:53:42 +02:00 • committed by Delirium
parent 8a29f8ecf4
commit fec8b9e13c
6 changed files with 17 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/SideMenu/SideMenuHeader.js
View file

@ -10,4 +10,4 @@ function SideMenuHeader({ text, className }) {
}
SideMenuHeader.displayName = "SideMenuHeader";
export default SideMenuHeader;
export default SideMenuHeader;

10
frontend/app/components/Dashboard/SideMenu/SideMenuSection.js
View file

@ -7,13 +7,13 @@ import { NavLink } from 'react-router-dom';
import { withSiteId } from 'App/routes';
import CustomMetrics from 'Shared/CustomMetrics';
function SideMenuSection({ title, items, onItemClick, setShowAlerts, siteId }) {
function SideMenuSection({ title, items, onItemClick, setShowAlerts, siteId, activeSection }) {
return (
<>
<SideMenuHeader className="mb-4" text={ title }/>
{ items.filter(i => i.section === 'metrics').map(item =>
<SideMenuitem
key={ item.key }
key={ item.key }
active={ item.active }
title={ item.label }
iconName={ item.icon }
@ -28,10 +28,10 @@ function SideMenuSection({ title, items, onItemClick, setShowAlerts, siteId }) {
title="Manage Alerts"
iconName="bell-plus"
onClick={() => setShowAlerts(true)}
/>
/>
</div>
<div className={stl.divider} />
<div className="my-3">
<div className="my-3">
<CustomMetrics />
</div>
</>
@ -42,4 +42,4 @@ SideMenuSection.displayName = "SideMenuSection";
export default connect(state => ({
siteId: state.getIn([ 'site', 'siteId' ])
}), { setShowAlerts })(SideMenuSection);
}), { setShowAlerts })(SideMenuSection);

2
frontend/app/components/Errors/SideMenu/SideMenuHeader.js
View file

@ -10,4 +10,4 @@ function SideMenuHeader({ text, className }) {
}
SideMenuHeader.displayName = "SideMenuHeader";
export default SideMenuHeader;
export default SideMenuHeader;

2
frontend/app/components/Modal/index.tsx
View file

@ -54,4 +54,4 @@ export class ModalProvider extends Component {
export const ModalConsumer = ModalContext.Consumer;
export const useModal = () => React.useContext(ModalContext);
export const useModal = () => React.useContext(ModalContext);

4
frontend/app/components/ui/ItemMenu/ItemMenu.js
View file

@ -26,7 +26,7 @@ export default class ItemMenu extends React.PureComponent {
return (
<div className={ styles.wrapper }>
<OutsideClickDetectingDiv
<OutsideClickDetectingDiv
onClickOutside={ this.closeMenu }
>
<div
@ -36,7 +36,7 @@ export default class ItemMenu extends React.PureComponent {
{label && <span className="mr-1 color-gray-medium ">{label}</span>}
<div
ref={ (ref) => { this.menuBtnRef = ref; } }
className={cn("rounded-full flex items-center justify-center hover:bg-gray-light", { 'bg-gray-light' : displayed, "w-10 h-10" : !label })}
className={cn("rounded-full flex items-center justify-center", { 'bg-gray-light' : displayed, "w-10 h-10" : !label })}
role="button"
>
<Icon name="ellipsis-v" size="16" />

11
frontend/app/components/ui/SideMenuHeader/SideMenuHeader.tsx
View file

@ -3,12 +3,15 @@ import cn from 'classnames';
import stl from './sideMenuHeader.css';
function SideMenuHeader(props) {
const { text, className } = props;
const { text, className, button } = props;
return (
<div className={ cn(className, stl.label, "uppercase color-gray") }>
{ text }
<div className={cn(className, 'flex items-center')}>
<div className={ cn(stl.label, "uppercase color-gray") }>
{ text }
</div>
<div>{button}</div>
</div>
)
}
export default SideMenuHeader;
export default SideMenuHeader;