Style improvements in omnisearch headers
This commit is contained in:
Sudheer Salavadi
parent
130e00748b
commit
89e51b0531
8 changed files with 78 additions and 66 deletions
|
|
@ -56,7 +56,7 @@ const FilterSeriesHeader = observer(
|
|||
};
|
||||
return (
|
||||
<div
|
||||
className={cn('px-4 h-12 flex items-center relative bg-white border-gray-lighter border-t border-l border-r rounded-t-xl', {
|
||||
className={cn('ps-2 pr-4 h-12 flex items-center relative bg-white border-t border-l border-r rounded-t-xl', {
|
||||
hidden: props.hidden,
|
||||
'rounded-b-xl': !props.expanded,
|
||||
})}
|
||||
|
|
@ -79,12 +79,14 @@ const FilterSeriesHeader = observer(
|
|||
<Button
|
||||
onClick={props.onRemove}
|
||||
size="small"
|
||||
type='text'
|
||||
disabled={!props.canDelete}
|
||||
icon={<Trash size={14} />}
|
||||
/>
|
||||
<Button
|
||||
onClick={props.toggleExpand}
|
||||
size="small"
|
||||
type='text'
|
||||
icon={
|
||||
props.expanded ? (
|
||||
<ChevronUp size={16} />
|
||||
|
|
|
|||
|
|
@ -44,18 +44,12 @@ function SeriesName(props: Props) {
|
|||
onChange={write}
|
||||
onBlur={onBlur}
|
||||
onFocus={() => setEditing(true)}
|
||||
className='bg-white'
|
||||
className='bg-white text-lg font-medium rounded-lg'
|
||||
/>
|
||||
) : (
|
||||
<div className="text-base h-8 flex items-center border-transparent">{name && name.trim() === '' ? 'Series ' + (seriesIndex + 1) : name }</div>
|
||||
)}
|
||||
|
||||
|
||||
<div className="ml-3 cursor-pointer " onClick={() => setEditing(true)}>
|
||||
<Tooltip title='Rename' placement='bottom'>
|
||||
<Icon name="pencil" size="14" />
|
||||
<Tooltip placement='bottom' title='Double click to edit'><div className="text-lg font-medium hover:bg-teal-light/10 px-2 rounded-lg cursor-pointer" onDoubleClick={() => setEditing(true)}>{name && name.trim() === '' ? 'Series ' + (seriesIndex + 1) : name }</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const FilterSection = observer(({ metric, excludeFilterKeys }: any) => {
|
|||
metric.series
|
||||
.slice(0, isSingleSeries ? 1 : metric.series.length)
|
||||
.map((series: any, index: number) => (
|
||||
<div className="mb-2 rounded-xl border border-gray-lighter" key={series.name}>
|
||||
<div className="mb-2 rounded-xl" key={series.name}>
|
||||
<FilterSeries
|
||||
canExclude={isPathAnalysis}
|
||||
supportsEmpty={!isClickMap && !isPathAnalysis}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { Icon, Tooltip } from 'UI';
|
||||
import { Input } from 'antd';
|
||||
import { Icon } from 'UI';
|
||||
import { Input, Tooltip } from 'antd';
|
||||
import cn from 'classnames';
|
||||
|
||||
interface Props {
|
||||
|
|
@ -62,16 +62,17 @@ function WidgetName(props: Props) {
|
|||
onBlur={() => onBlur()}
|
||||
onFocus={() => setEditing(true)}
|
||||
maxLength={80}
|
||||
className='rounded-xl text-2xl'
|
||||
/>
|
||||
) : (
|
||||
// @ts-ignore
|
||||
<Tooltip delay={200} title="Double click to edit" disabled={!canEdit}>
|
||||
<Tooltip delay={200} placement="bottom" title="Double click to rename" disabled={!canEdit}>
|
||||
<div
|
||||
onDoubleClick={() => setEditing(true)}
|
||||
className={
|
||||
cn(
|
||||
"text-2xl h-8 flex items-center border-transparent",
|
||||
canEdit && 'cursor-pointer select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium'
|
||||
canEdit && 'cursor-pointer select-none hover:bg-teal-light/10 px-3 rounded-xl'
|
||||
)
|
||||
}
|
||||
>
|
||||
|
|
@ -80,11 +81,11 @@ function WidgetName(props: Props) {
|
|||
</Tooltip>
|
||||
|
||||
)}
|
||||
{ canEdit && <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}>
|
||||
{/* { canEdit && <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}>
|
||||
<Tooltip title='Rename' placement='bottom'>
|
||||
<Icon name="pencil" size="16" />
|
||||
</Tooltip>
|
||||
</div> }
|
||||
</div> } */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ const CardViewMenu = () => {
|
|||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<Dropdown menu={{items}}>
|
||||
<Button icon={<EllipsisVertical size={16}/>}/>
|
||||
<Button type="text" icon={<EllipsisVertical size={16}/>}/>
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ function WidgetViewHeader({ onClick, onSave }: Props) {
|
|||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex justify-between items-center bg-white rounded px-4 py-2 border border-gray-lighter'
|
||||
'flex justify-between items-center bg-white rounded-xl p-2 border border-gray-lighter min-h-[54px]'
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Tooltip } from "UI";
|
||||
import { Select } from "antd";
|
||||
import { Dropdown, Menu, Tooltip, Space } from "antd";
|
||||
import {DownOutlined} from '@ant-design/icons';
|
||||
|
||||
const EventsOrder = observer((props: {
|
||||
onChange: (e: any, v: any) => void,
|
||||
|
|
@ -9,47 +9,62 @@ const EventsOrder = observer((props: {
|
|||
}) => {
|
||||
const { filter, onChange } = props;
|
||||
const eventsOrderSupport = filter.eventsOrderSupport;
|
||||
|
||||
const options = [
|
||||
{
|
||||
name: 'eventsOrder',
|
||||
label: 'Then',
|
||||
label: 'THEN',
|
||||
value: 'then',
|
||||
disabled: eventsOrderSupport && !eventsOrderSupport.includes('then'),
|
||||
},
|
||||
{
|
||||
name: 'eventsOrder',
|
||||
label: 'And',
|
||||
label: 'AND',
|
||||
value: 'and',
|
||||
disabled: eventsOrderSupport && !eventsOrderSupport.includes('and'),
|
||||
},
|
||||
{
|
||||
name: 'eventsOrder',
|
||||
label: 'Or',
|
||||
label: 'OR',
|
||||
value: 'or',
|
||||
disabled: eventsOrderSupport && !eventsOrderSupport.includes('or'),
|
||||
},
|
||||
];
|
||||
|
||||
return <div className="flex items-center gap-2">
|
||||
<div
|
||||
className="color-gray-medium text-sm"
|
||||
style={{textDecoration: "underline dotted"}}
|
||||
const menu = (
|
||||
<Menu
|
||||
onClick={(e) => {
|
||||
const selectedOption = options.find((item) => item.value === e.key);
|
||||
if (selectedOption && !selectedOption.disabled) {
|
||||
onChange(null, selectedOption);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
title={`Select the operator to be applied between events in your search.`}
|
||||
>
|
||||
<div>Events Order</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{options.map((item) => (
|
||||
<Menu.Item key={item.value} disabled={item.disabled}>
|
||||
{item.label}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
);
|
||||
|
||||
<Select
|
||||
size={"small"}
|
||||
className="text-sm"
|
||||
onChange={(v) => onChange(null, options.find((i) => i.value === v))}
|
||||
value={filter.eventsOrder}
|
||||
options={options}
|
||||
/>
|
||||
</div>;
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<Tooltip title="Select the operator to be applied between events." placement="bottom">
|
||||
<div className="color-gray-medium text-sm">Events Order</div>
|
||||
</Tooltip>
|
||||
|
||||
<Dropdown overlay={menu} trigger={['click']} placement="bottomRight">
|
||||
<a onClick={(e) => e.preventDefault()} className="text-sm items-center gap-2 hover:text-teal">
|
||||
<Space className="text-sm">
|
||||
{options.find((item) => item.value === filter.eventsOrder)?.label || 'Select'}
|
||||
<DownOutlined className="mr-2 text-xs" />
|
||||
</Space>
|
||||
</a>
|
||||
|
||||
</Dropdown>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default EventsOrder;
|
||||
|
|
@ -81,7 +81,7 @@ function FilterSelection(props: Props) {
|
|||
</div>
|
||||
)}
|
||||
{showModal && (
|
||||
<div className="absolute mt-2 left-0 rounded-lg shadow bg-white z-50">
|
||||
<div className="absolute mt-2 left-0 rounded-xl shadow-lg bg-white z-50">
|
||||
<FilterModal
|
||||
isLive={isRoute(ASSIST_ROUTE, window.location.pathname)}
|
||||
onFilterClick={onAddFilter}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue