Skip to content

Commit afbde85

Browse files
PrasanKumar93PrasanKumar93
committed
select query pop up figma changes
1 parent 8274ac5 commit afbde85

File tree

4 files changed

+155
-69
lines changed

4 files changed

+155
-69
lines changed

‎src/app/common/css/theme-redis.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@
6363
--pg-query-template-item-txt-clr: var(--midnight-base);
6464
--pg-query-template-item-border-clr: var(--gray-03);
6565
--pg-query-template-item-hover-border-clr: var(--gray-05);
66+
--pg-query-template-highlighted-bg-clr: var(--yellow-05);
67+
--pg-query-template-sidebar-item-txt-clr: var(--hyper-07);
6668

6769
--pg-sidebar-bg-clr: var(--white-base);
6870
--pg-sidebar-txt-clr: var(--midnight-base);

‎src/app/common/css/variables.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ body {
1313
--space-16: 16px;
1414
--space-24: 24px;
1515
--space-32: 32px;
16+
--space-48: 48px;
17+
--space-64: 64px;
1618

1719
/*base font size is defined in typography.css file */
1820
--font-size-12: 0.75rem;

‎src/app/page-components/PgQueryTemplate/index.scss

Lines changed: 74 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,94 @@
33
display: flex;
44
flex-direction: column;
55

6-
padding: var(--space-16);
7-
background-color: var(--pg-query-template-bg-clr);
8-
color: var(--pg-query-template-txt-clr);
6+
.pg-query-template-header {
7+
padding: var(--space-12);
98

10-
.query-search-bar-container {
9+
.pg-query-template-header-title {
10+
font-size: var(--font-size-20);
11+
color: var(--pg-query-template-txt-clr);
12+
}
13+
}
14+
.pg-query-template-content {
15+
flex-grow: 1;
16+
overflow: hidden;
1117
display: flex;
12-
justify-content: center;
13-
margin-bottom: var(--space-8);
1418

15-
.query-search-bar {
19+
background-color: var(--pg-query-template-bg-clr);
20+
color: var(--pg-query-template-txt-clr);
21+
22+
.query-sidebar {
23+
min-width: 300px;
24+
padding: var(--space-48) var(--space-48) 0 var(--space-16);
25+
1626
display: flex;
17-
justify-content: center;
18-
align-items: center;
19-
background-color: #ffffff;
20-
padding: var(--space-4) var(--space-8);
21-
border-radius: var(--radius-4);
22-
width: 35%;
23-
24-
.query-search-input {
25-
border: none;
26-
outline: none;
27-
width: 100%;
28-
min-height: 40px;
29-
padding-left: var(--space-4);
30-
font-size: var(--font-size-12);
27+
flex-direction: column;
28+
29+
.query-search-bar-container {
30+
display: flex;
31+
padding: var(--space-32) 0;
32+
33+
.query-search-bar {
34+
flex-grow: 1;
35+
display: flex;
36+
justify-content: center;
37+
align-items: center;
38+
background-color: #ffffff;
39+
padding: var(--space-4) var(--space-8);
40+
border-radius: var(--radius-4);
41+
42+
.query-search-input {
43+
border: none;
44+
outline: none;
45+
width: 100%;
46+
min-height: 40px;
47+
padding-left: var(--space-8);
48+
font-size: var(--font-size-12);
49+
}
50+
51+
.clear-icon {
52+
cursor: pointer;
53+
}
54+
}
3155
}
3256

33-
.clear-icon {
34-
cursor: pointer;
57+
.query-sidebar-content {
58+
flex-grow: 1;
59+
overflow: auto;
60+
61+
.query-sidebar-item {
62+
display: flex;
63+
align-items: center;
64+
gap: var(--space-8);
65+
margin-bottom: var(--space-16);
66+
cursor: pointer;
67+
68+
.query-sidebar-item-label {
69+
font-size: var(--font-size-14);
70+
color: var(--pg-query-template-sidebar-item-txt-clr);
71+
}
72+
73+
&:hover {
74+
text-decoration: underline;
75+
text-decoration-color: var(
76+
--pg-query-template-sidebar-item-txt-clr
77+
);
78+
}
79+
}
3580
}
3681
}
3782
}
3883

3984
.query-category-container {
4085
flex-grow: 1;
86+
overflow: auto;
87+
padding: var(--space-32) 0;
88+
4189
display: flex;
4290
flex-direction: column;
43-
overflow: auto;
4491

4592
.query-category {
46-
margin-bottom: var(--space-32);
93+
margin-bottom: var(--space-48);
4794

4895
.query-category-title {
4996
font-size: var(--font-size-14);
@@ -64,7 +111,7 @@
64111
border-radius: var(--radius-8);
65112
width: calc((100% / 3) - var(--space-32));
66113
max-width: calc((100% / 3) - var(--space-32));
67-
min-height: 140px;
114+
min-height: 130px;
68115

69116
padding: var(--space-2);
70117
background-color: var(--pg-query-template-item-bg-clr);
@@ -101,7 +148,7 @@
101148
}
102149

103150
.pg-highlighted-text {
104-
background-color: #ffeb3b;
151+
background-color: var(--pg-query-template-highlighted-bg-clr);
105152
padding: 0 2px;
106153
border-radius: 2px;
107154
}

‎src/app/page-components/PgQueryTemplate/index.tsx

Lines changed: 77 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ interface IQueryTemplateProps {
1414
}
1515

1616
const labels = {
17-
searchPlaceholder: "Search queries..."
17+
searchPlaceholder: "Search queries",
18+
headerTitle: "Queries"
1819
}
1920
const highlightClassName = "pg-highlighted-text";
2021

@@ -78,56 +79,90 @@ const PgQueryTemplate = ({ onClose }: IQueryTemplateProps) => {
7879
}
7980
};
8081

82+
const handleSidebarItemClick = (categoryId: string) => {
83+
const element = document.getElementById(`category-${categoryId}`);
84+
if (element) {
85+
// For browsers that don't support smooth scrolling
86+
try {
87+
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
88+
} catch (e) {
89+
// Fallback for older browsers
90+
element.scrollIntoView(true);
91+
}
92+
}
93+
};
94+
8195
return <div className="pg-query-template">
82-
<div className="query-search-bar-container">
83-
<div className="query-search-bar">
84-
{/* <i className="fa fa-search"></i> */}
85-
<ImageIcon imgSrc="/icons/search.svg" alt={labels.searchPlaceholder} imgWidth="1.125rem" imgHeight="1.125rem" />
86-
<input type="text" placeholder={labels.searchPlaceholder} onChange={handleSearchChange} className="query-search-input" value={searchValue} />
87-
{searchValue && <i className="fa fa-times clear-icon" onClick={handleClearSearch}></i>}
96+
<div className="pg-query-template-header">
97+
<div className="pg-query-template-header-title font-medium">
98+
{labels.headerTitle}
8899
</div>
100+
<Loader isShow={isShowLoader} />
89101
</div>
90-
<Loader isShow={isShowLoader} />
91-
92-
<div className="query-category-container">
93-
{filteredTemplateData.map((queryTmpl, index) => (
94-
<div key={index} className="query-category">
95-
<div className="query-category-title font-medium">
96-
<Highlighter
97-
highlightClassName={highlightClassName}
98-
searchWords={[searchValue]}
99-
autoEscape={true}
100-
textToHighlight={queryTmpl.category}
101-
/>
102+
<div className="pg-query-template-content">
103+
<div className="query-sidebar">
104+
<div className="query-search-bar-container">
105+
<div className="query-search-bar">
106+
{/* <i className="fa fa-search"></i> */}
107+
<ImageIcon imgSrc="/icons/search.svg" alt={labels.searchPlaceholder} imgWidth="1.125rem" imgHeight="1.125rem" />
108+
<input type="text" placeholder={labels.searchPlaceholder} onChange={handleSearchChange} className="query-search-input" value={searchValue} />
109+
{searchValue && <i className="fa fa-times clear-icon" onClick={handleClearSearch}></i>}
102110
</div>
103-
<div className="query-category-items">
104-
{queryTmpl.items.map((item, index) => (
105-
<div key={index} className="query-item" onClick={() => handleQueryItemClick(item.queryId, queryTmpl.categoryId)}>
106-
<div className="query-item-label font-medium">
107-
<Highlighter
108-
highlightClassName={highlightClassName}
109-
searchWords={[searchValue]}
110-
autoEscape={true}
111-
textToHighlight={item.label}
112-
/>
113-
</div>
114-
<div className="query-item-description">
115-
<Highlighter
116-
highlightClassName={highlightClassName}
117-
searchWords={[searchValue]}
118-
autoEscape={true}
119-
textToHighlight={item.description}
120-
/>
121-
</div>
111+
</div>
112+
<div className="query-sidebar-content">
113+
{filteredTemplateData.map((queryTmpl, index) => (
114+
<div key={index} className="query-sidebar-item" onClick={() => handleSidebarItemClick(queryTmpl.categoryId)}>
115+
<div className="query-sidebar-item-label">
116+
{queryTmpl.category}
122117
</div>
123-
))}
124-
</div>
118+
<ImageIcon imgSrc="/icons/arrow-right-slim-red.svg" alt={queryTmpl.category} />
119+
</div>
120+
121+
))}
122+
125123
</div>
126-
))}
124+
</div>
125+
<div className="query-category-container">
126+
{filteredTemplateData.map((queryTmpl, index) => (
127+
<div key={index} className="query-category" id={`category-${queryTmpl.categoryId}`}>
128+
<div className="query-category-title font-medium">
129+
<Highlighter
130+
highlightClassName={highlightClassName}
131+
searchWords={[searchValue]}
132+
autoEscape={true}
133+
textToHighlight={queryTmpl.category}
134+
/>
135+
</div>
136+
<div className="query-category-items">
137+
{queryTmpl.items.map((item, index) => (
138+
<div key={index} className="query-item" onClick={() => handleQueryItemClick(item.queryId, queryTmpl.categoryId)}>
139+
<div className="query-item-label font-medium">
140+
<Highlighter
141+
highlightClassName={highlightClassName}
142+
searchWords={[searchValue]}
143+
autoEscape={true}
144+
textToHighlight={item.label}
145+
/>
146+
</div>
147+
<div className="query-item-description">
148+
<Highlighter
149+
highlightClassName={highlightClassName}
150+
searchWords={[searchValue]}
151+
autoEscape={true}
152+
textToHighlight={item.description}
153+
/>
154+
</div>
155+
</div>
156+
))}
157+
</div>
158+
</div>
159+
))}
127160

128-
{filteredTemplateData.length === 0 && !isShowLoader && <div className="query-no-result">No matching queries found !</div>}
161+
{filteredTemplateData.length === 0 && !isShowLoader && <div className="query-no-result">No matching queries found !</div>}
129162

163+
</div>
130164
</div>
165+
131166
</div>
132167
}
133168

0 commit comments

Comments
 (0)