fix(ui): minor ui fixes after review
This commit is contained in:
sylenien
Delirium
parent
020b993280
commit
e47797ee3e
10 changed files with 31 additions and 57 deletions
|
|
@ -26,11 +26,10 @@ function SessionsMenu(props) {
|
|||
</div>
|
||||
<span className={ cn(stl.manageButton, 'mr-2') } onClick={() => showModal(<SessionSettings />, { right: true })}>
|
||||
<Tooltip
|
||||
delay={500}
|
||||
title="Configure the percentage of sessions to be captured, timezone and more."
|
||||
hideOnClick={true}
|
||||
position="bottom-end"
|
||||
tiny
|
||||
position="bottom"
|
||||
size="small"
|
||||
html={<span>Configure the percentage of sessions <br /> to be captured, timezone and more.</span>}
|
||||
>
|
||||
Settings
|
||||
</Tooltip>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ function DashboardMetricSelection(props: IProps) {
|
|||
</div>
|
||||
<div className="grid grid-cols-12 gap-4">
|
||||
<div className="col-span-3">
|
||||
<div className="grid grid-cols-1 gap-4 py-1" style={{ maxHeight: `calc(100vh - ${props.isDashboardExists ? 175 : 300}px)`, overflowY: 'auto' }}>
|
||||
<div className="grid grid-cols-1 gap-4 py-1 pr-2" style={{ maxHeight: `calc(100vh - ${props.isDashboardExists ? 175 : 300}px)`, overflowY: 'auto' }}>
|
||||
{activeCategory && widgetCategories.map((category, index) =>
|
||||
<WidgetCategoryItem
|
||||
key={category.name}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ function DashboardOptions(props: Props) {
|
|||
|
||||
return (
|
||||
<ItemMenu
|
||||
bold
|
||||
label="More Options"
|
||||
items={menuItems}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@ function WidgetWrapper(props: Props) {
|
|||
>
|
||||
{addOverlay && <TemplateOverlay onClick={onChartClick} isTemplate={isTemplate} />}
|
||||
<div
|
||||
className={cn("p-3 flex items-center justify-between", { "cursor-move" : !isTemplate && isWidget })}
|
||||
className={cn("p-3 pb-4 flex items-center justify-between", { "cursor-move" : !isTemplate && isWidget })}
|
||||
>
|
||||
<div className="capitalize w-full font-medium">{widget.name}</div>
|
||||
{isWidget && (
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.drillDownMessage {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
|
|
|
|||
|
|
@ -23,12 +23,11 @@ function TooltipIcon(props: ITooltipIcon) {
|
|||
<div onClick={(e) => props.onClick(e)} >
|
||||
{/* @ts-ignore - problem with react-tippy types TODO: remove after fix */}
|
||||
<Tooltip
|
||||
delay={250}
|
||||
title={props.title}
|
||||
hideOnClick={true}
|
||||
position="bottom"
|
||||
>
|
||||
<Icon size="24" name={props.name} color="main" />
|
||||
<Icon size="16" name={props.name} color="main" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -72,12 +71,12 @@ function SavedSearchModal(props: Props) {
|
|||
return (
|
||||
<div className="bg-white box-shadow h-screen" style={{ width: '450px' }}>
|
||||
<div className="p-6">
|
||||
<h1 className="text-2xl">Saved Search <span className={stl.secondary}>{props.list.size}</span></h1>
|
||||
<h1 className="text-2xl">Saved Search <span className="color-gray-medium">{props.list.size}</span></h1>
|
||||
</div>
|
||||
{props.list.size > 9 && (
|
||||
<div className={cn(stl.inputContainer, 'mb-6')}>
|
||||
{props.list.size > 1 && (
|
||||
<div className="mb-6 w-full px-4">
|
||||
<Input
|
||||
className={stl.inputComponent}
|
||||
className="w-full"
|
||||
iconPosition="left"
|
||||
icon={<SemIcon name="search" />}
|
||||
onChange={(_, v) => setFilterQuery(v.value)}
|
||||
|
|
@ -86,22 +85,22 @@ function SavedSearchModal(props: Props) {
|
|||
</div>
|
||||
)}
|
||||
{shownItems.map(item => (
|
||||
<div key={item.key} className={cn('px-6 py-4 cursor-pointer flex items-start', stl.rowItem)} onClick={(e) => onClick(item, e)}>
|
||||
<Icon name="search" color="gray-medium" size="24" />
|
||||
<div key={item.key} className="p-4 pb-8 cursor-pointer border-b flex items-center group hover:bg-active-blue" onClick={(e) => onClick(item, e)}>
|
||||
<Icon name="search" color="gray-medium" size="16" />
|
||||
<div className="ml-4">
|
||||
<div className="text-xl">{item.name} </div>
|
||||
<div className="text-lg">{item.name} </div>
|
||||
{item.isPublic && (
|
||||
<div className={cn(stl.iconContainer, stl.secondary, 'flex items-center px-2 mt-2')}>
|
||||
<div className={cn(stl.iconContainer, 'absolute color-gray-medium flex items-center px-2 mt-2')}>
|
||||
<Icon name="user-friends" size="11" />
|
||||
<div className="ml-1 text-sm"> Team </div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center ml-auto self-center">
|
||||
<div className={stl.iconCircle}>
|
||||
<div className={cn(stl.iconCircle, 'mr-2 invisible group-hover:visible')}>
|
||||
<TooltipIcon name="pencil" onClick={(e) => onEdit(item, e)} title="Rename" />
|
||||
</div>
|
||||
<div className={stl.iconCircle}>
|
||||
<div className={cn(stl.iconCircle, 'invisible group-hover:visible')}>
|
||||
<TooltipIcon name="trash" onClick={(e) => onDelete(item, e)} title="Delete" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,3 @@
|
|||
.secondary {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.rowItem {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(63, 81, 181, 0.08);
|
||||
|
||||
& .iconCircle {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iconContainer {
|
||||
background-color: #f3f3f3;
|
||||
border-radius: 100px;
|
||||
|
|
@ -23,18 +7,8 @@
|
|||
.iconCircle {
|
||||
border-radius: 50%;
|
||||
padding: 6px;
|
||||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
background: rgba(63, 81, 181, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.inputContainer {
|
||||
padding: 0 2em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.inputComponent {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default class ItemMenu extends React.PureComponent {
|
|||
closeMenu = () => this.setState({ displayed: false })
|
||||
|
||||
render() {
|
||||
const { items, label = "" } = this.props;
|
||||
const { items, label = "", bold } = this.props;
|
||||
const { displayed } = this.state;
|
||||
const parentStyles = label ? 'rounded px-2 py-1 hover:bg-gray-light' : '';
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ export default class ItemMenu extends React.PureComponent {
|
|||
onClick={ this.toggleMenu }
|
||||
className={cn("flex items-center cursor-pointer select-none", parentStyles, { 'bg-gray-light' : displayed && label })}
|
||||
>
|
||||
{label && <span className="mr-1 color-gray-medium ">{label}</span>}
|
||||
{label && <span className={cn('mr-1', bold ? 'font-medium color-gray-darkest' : 'color-gray-medium')}>{label}</span>}
|
||||
<div
|
||||
ref={ (ref) => { this.menuBtnRef = ref; } }
|
||||
className={cn("rounded-full flex items-center justify-center", { 'bg-gray-light' : displayed, "w-10 h-10" : !label })}
|
||||
|
|
@ -53,6 +53,7 @@ export default class ItemMenu extends React.PureComponent {
|
|||
onClick={ !disabled ? this.onClick(onClick) : () => {} }
|
||||
role="menuitem"
|
||||
tabIndex="-1"
|
||||
className=""
|
||||
>
|
||||
<Tooltip
|
||||
delay={500}
|
||||
|
|
|
|||
|
|
@ -147,14 +147,14 @@ export default class MessageDistributor extends StatedScreen {
|
|||
|
||||
logger.info("Messages count: ", msgs.length, msgs)
|
||||
|
||||
// @ts-ignore Hack for upet (TODO: fix ordering in one mutation in tracker(removes first))
|
||||
// @ts-ignore Hack for upet (TODO: fix ordering in one mutation in tracker(removes first))
|
||||
const headChildrenIds = msgs.filter(m => m.parentID === 1).map(m => m.id);
|
||||
this.pagesManager.sort((m1, m2) => {
|
||||
if (m1.time === m2.time) {
|
||||
if (m1.tp === "remove_node" && m2.tp !== "remove_node") {
|
||||
if (headChildrenIds.includes(m1.id)) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
} else if (m2.tp === "remove_node" && m1.tp !== "remove_node") {
|
||||
if (headChildrenIds.includes(m2.id)) {
|
||||
return 1;
|
||||
|
|
@ -175,7 +175,7 @@ export default class MessageDistributor extends StatedScreen {
|
|||
const stateToUpdate: {[key:string]: any} = {
|
||||
performanceChartData: this.performanceTrackManager.chartData,
|
||||
performanceAvaliability: this.performanceTrackManager.avaliability,
|
||||
}
|
||||
}
|
||||
LIST_NAMES.forEach(key => {
|
||||
stateToUpdate[ `${ key }List` ] = this.lists[ key ].list
|
||||
})
|
||||
|
|
@ -187,7 +187,7 @@ export default class MessageDistributor extends StatedScreen {
|
|||
this.windowNodeCounter.reset()
|
||||
if (this.activirtManager) {
|
||||
this.activirtManager.end()
|
||||
update({
|
||||
update({
|
||||
skipIntervals: this.activirtManager.list
|
||||
})
|
||||
}
|
||||
|
|
@ -444,4 +444,4 @@ export default class MessageDistributor extends StatedScreen {
|
|||
update(INITIAL_STATE);
|
||||
this.assistManager.clear();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,9 +29,9 @@
|
|||
// this.state = JSON.parse(JSON.stringify(action.state)); // Deep clone :(
|
||||
// } else {
|
||||
// action.diff.forEach(d => {
|
||||
// try {
|
||||
// try {
|
||||
// applyChange(this.state, d);
|
||||
// } catch (e) {
|
||||
// } catch (e) {
|
||||
// //console.warn("Deepdiff error")
|
||||
// }
|
||||
// });
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
// this.state = this.finalStates.pop();
|
||||
// } else {
|
||||
// action.diff.forEach(d => {
|
||||
// try {
|
||||
// try {
|
||||
// revertChange(this.state, 1, d); // bad lib :( TODO: write our own diff
|
||||
// } catch (e) {
|
||||
// //console.warn("Deepdiff error")
|
||||
|
|
@ -50,4 +50,4 @@
|
|||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue