GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 12:55:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: make the clear selection view more highlighted (#6216)

Browse Source 
* chore: make the clear selection view more highlighted

* chore: address minor design issue
This commit is contained in:
Vikrant Gupta 2024-10-18 18:18:30 +05:30 committed by GitHub
parent 0dec94a5c6
commit efdaf7ee43
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
View File

@ -18,7 +18,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 10px 12px; padding: 10px 10px;
border-radius: 50px; border-radius: 50px;
border: 1px solid var(--bg-slate-400); border: 1px solid var(--bg-slate-400);
background: rgba(22, 24, 29, 0.6); background: rgba(22, 24, 29, 0.6);
@ -33,6 +33,7 @@
border: 1px solid var(--bg-slate-400); border: 1px solid var(--bg-slate-400);
background: var(--bg-slate-500); background: var(--bg-slate-500);
cursor: pointer; cursor: pointer;
box-shadow: none;
} }
.hidden { .hidden {

47
frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
View File

@ -45,7 +45,6 @@ import {
PanelBottomClose, PanelBottomClose,
Plus, Plus,
X, X,
XCircle,
} from 'lucide-react'; } from 'lucide-react';
import { import {
CSSProperties, CSSProperties,
@ -515,7 +514,11 @@ function ExplorerOptions({
return ( return (
<div className="explorer-options-container"> <div className="explorer-options-container">
{isQueryUpdated && !isExplorerOptionHidden && ( {
// if a viewName is selected and the explorer options are not hidden then
// always show the clear option
}
{!isExplorerOptionHidden && viewName && (
<div <div
className={cx( className={cx(
isEditDeleteSupported ? '' : 'hide-update', isEditDeleteSupported ? '' : 'hide-update',
@ -529,18 +532,25 @@ function ExplorerOptions({
icon={<X size={14} />} icon={<X size={14} />}
/> />
</Tooltip> </Tooltip>
<Divider {
type="vertical" // only show the update view option when the query is updated
className={isEditDeleteSupported ? '' : 'hidden'} }
/> {isQueryUpdated && (
<Tooltip title="Update this view" placement="top"> <>
<Button <Divider
className={cx('action-icon', isEditDeleteSupported ? ' ' : 'hidden')} type="vertical"
disabled={isViewUpdating} className={isEditDeleteSupported ? '' : 'hidden'}
onClick={onUpdateQueryHandler} />
icon={<Disc3 size={14} />} <Tooltip title="Update this view" placement="top">
/> <Button
</Tooltip> className={cx('action-icon', isEditDeleteSupported ? ' ' : 'hidden')}
disabled={isViewUpdating}
onClick={onUpdateQueryHandler}
icon={<Disc3 size={14} />}
/>
</Tooltip>
</>
)}
</div> </div>
)} )}
{!isExplorerOptionHidden && ( {!isExplorerOptionHidden && (
@ -564,10 +574,7 @@ function ExplorerOptions({
}} }}
dropdownStyle={dropdownStyle} dropdownStyle={dropdownStyle}
className="views-dropdown" className="views-dropdown"
allowClear={{ allowClear={false}
clearIcon: <XCircle size={16} style={{ marginTop: '-3px' }} />,
}}
onClear={handleClearSelect}
ref={ref} ref={ref}
> >
{viewsData?.data?.data?.map((view) => { {viewsData?.data?.data?.map((view) => {
@ -662,8 +669,8 @@ function ExplorerOptions({
</div> </div>
</div> </div>
)} )}
<ExplorerOptionsHideArea <ExplorerOptionsHideArea
viewName={viewName}
isExplorerOptionHidden={isExplorerOptionHidden} isExplorerOptionHidden={isExplorerOptionHidden}
setIsExplorerOptionHidden={setIsExplorerOptionHidden} setIsExplorerOptionHidden={setIsExplorerOptionHidden}
sourcepage={sourcepage} sourcepage={sourcepage}
@ -672,7 +679,6 @@ function ExplorerOptions({
onUpdateQueryHandler={onUpdateQueryHandler} onUpdateQueryHandler={onUpdateQueryHandler}
isEditDeleteSupported={isEditDeleteSupported} isEditDeleteSupported={isEditDeleteSupported}
/> />
<Modal <Modal
className="save-view-modal" className="save-view-modal"
title={<span className="title">Save this view</span>} title={<span className="title">Save this view</span>}
@ -705,7 +711,6 @@ function ExplorerOptions({
/> />
</div> </div>
</Modal> </Modal>
<Modal <Modal
footer={null} footer={null}
onOk={onCancel(false)} onOk={onCancel(false)}

6
frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.tsx
View File

@ -10,6 +10,7 @@ import { DataSource } from 'types/common/queryBuilder';
import { setExplorerToolBarVisibility } from './utils'; import { setExplorerToolBarVisibility } from './utils';
interface DroppableAreaProps { interface DroppableAreaProps {
viewName: string;
isQueryUpdated: boolean; isQueryUpdated: boolean;
isExplorerOptionHidden?: boolean; isExplorerOptionHidden?: boolean;
sourcepage: DataSource; sourcepage: DataSource;
@ -20,6 +21,7 @@ interface DroppableAreaProps {
} }
function ExplorerOptionsHideArea({ function ExplorerOptionsHideArea({
viewName,
isQueryUpdated, isQueryUpdated,
isExplorerOptionHidden, isExplorerOptionHidden,
sourcepage, sourcepage,
@ -39,7 +41,7 @@ function ExplorerOptionsHideArea({
<div className="explorer-option-droppable-container"> <div className="explorer-option-droppable-container">
{isExplorerOptionHidden && ( {isExplorerOptionHidden && (
<> <>
{isQueryUpdated && ( {viewName && (
<div className="explorer-actions-btn"> <div className="explorer-actions-btn">
<Tooltip title="Clear this view"> <Tooltip title="Clear this view">
<Button <Button
@ -49,7 +51,7 @@ function ExplorerOptionsHideArea({
icon={<X size={14} color={Color.BG_INK_500} />} icon={<X size={14} color={Color.BG_INK_500} />}
/> />
</Tooltip> </Tooltip>
{isEditDeleteSupported && ( {isEditDeleteSupported && isQueryUpdated && (
<Tooltip title="Update this View"> <Tooltip title="Update this View">
<Button <Button
onClick={onUpdateQueryHandler} onClick={onUpdateQueryHandler}