GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 00:35:56 +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;
align-items: center;
gap: 12px;
padding: 10px 12px;
padding: 10px 10px;
border-radius: 50px;
border: 1px solid var(--bg-slate-400);
background: rgba(22, 24, 29, 0.6);
@ -33,6 +33,7 @@
border: 1px solid var(--bg-slate-400);
background: var(--bg-slate-500);
cursor: pointer;
box-shadow: none;
}
.hidden {

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

@ -45,7 +45,6 @@ import {
PanelBottomClose,
Plus,
X,
XCircle,
} from 'lucide-react';
import {
CSSProperties,
@ -515,7 +514,11 @@ function ExplorerOptions({
return (
<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
className={cx(
isEditDeleteSupported ? '' : 'hide-update',
@ -529,18 +532,25 @@ function ExplorerOptions({
icon={<X size={14} />}
/>
</Tooltip>
<Divider
type="vertical"
className={isEditDeleteSupported ? '' : 'hidden'}
/>
<Tooltip title="Update this view" placement="top">
<Button
className={cx('action-icon', isEditDeleteSupported ? ' ' : 'hidden')}
disabled={isViewUpdating}
onClick={onUpdateQueryHandler}
icon={<Disc3 size={14} />}
/>
</Tooltip>
{
// only show the update view option when the query is updated
}
{isQueryUpdated && (
<>
<Divider
type="vertical"
className={isEditDeleteSupported ? '' : 'hidden'}
/>
<Tooltip title="Update this view" placement="top">
<Button
className={cx('action-icon', isEditDeleteSupported ? ' ' : 'hidden')}
disabled={isViewUpdating}
onClick={onUpdateQueryHandler}
icon={<Disc3 size={14} />}
/>
</Tooltip>
</>
)}
</div>
)}
{!isExplorerOptionHidden && (
@ -564,10 +574,7 @@ function ExplorerOptions({
}}
dropdownStyle={dropdownStyle}
className="views-dropdown"
allowClear={{
clearIcon: <XCircle size={16} style={{ marginTop: '-3px' }} />,
}}
onClear={handleClearSelect}
allowClear={false}
ref={ref}
>
{viewsData?.data?.data?.map((view) => {
@ -662,8 +669,8 @@ function ExplorerOptions({
</div>
</div>
)}
<ExplorerOptionsHideArea
viewName={viewName}
isExplorerOptionHidden={isExplorerOptionHidden}
setIsExplorerOptionHidden={setIsExplorerOptionHidden}
sourcepage={sourcepage}
@ -672,7 +679,6 @@ function ExplorerOptions({
onUpdateQueryHandler={onUpdateQueryHandler}
isEditDeleteSupported={isEditDeleteSupported}
/>
<Modal
className="save-view-modal"
title={<span className="title">Save this view</span>}
@ -705,7 +711,6 @@ function ExplorerOptions({
/>
</div>
</Modal>
<Modal
footer={null}
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';
interface DroppableAreaProps {
viewName: string;
isQueryUpdated: boolean;
isExplorerOptionHidden?: boolean;
sourcepage: DataSource;
@ -20,6 +21,7 @@ interface DroppableAreaProps {
}
function ExplorerOptionsHideArea({
viewName,
isQueryUpdated,
isExplorerOptionHidden,
sourcepage,
@ -39,7 +41,7 @@ function ExplorerOptionsHideArea({
<div className="explorer-option-droppable-container">
{isExplorerOptionHidden && (
<>
{isQueryUpdated && (
{viewName && (
<div className="explorer-actions-btn">
<Tooltip title="Clear this view">
<Button
@ -49,7 +51,7 @@ function ExplorerOptionsHideArea({
icon={<X size={14} color={Color.BG_INK_500} />}
/>
</Tooltip>
{isEditDeleteSupported && (
{isEditDeleteSupported && isQueryUpdated && (
<Tooltip title="Update this View">
<Button
onClick={onUpdateQueryHandler}