Skip to content

Commit c7fcd38

Browse files
authored
fix: adjust alignment of search input next/previous buttons (#1917)
Fixes alignment of next/previous buttons in `SearchInput`. Looks like they became mis-aligned during spectrum switchover. Before: ![image](https://github.com/deephaven/web-client-ui/assets/1576283/044b84f3-1d7d-43e7-8ce7-984392e1fde5) After: ![image](https://github.com/deephaven/web-client-ui/assets/1576283/04885b2e-a718-4f54-bb33-d9d144c6c8f3)
1 parent ffedd7a commit c7fcd38

6 files changed

Lines changed: 19 additions & 18 deletions

File tree

packages/components/src/SearchInput.scss

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -37,27 +37,25 @@
3737
.search-change-selection {
3838
position: absolute;
3939
right: $spacer-1;
40-
top: 15%;
41-
bottom: 15%;
42-
height: 70%;
40+
top: 0;
41+
height: 100%;
42+
display: flex;
43+
align-items: center;
4344
}
4445

4546
.search-change-button {
46-
background: none;
47-
border: none;
4847
padding: 1px 2px;
48+
height: calc(100% - $spacer-2);
4949
}
5050

51-
.search-change-text {
51+
.search-change-text,
52+
.search-match {
5253
background-color: fg-opacity(20);
53-
border-radius: 10px;
54-
padding: 1px 5px;
54+
border-radius: 20px;
55+
padding: 0 5px;
5556
}
5657

5758
.search-match {
58-
background-color: fg-opacity(20);
59-
border-radius: 10px;
60-
padding: 1px 5px;
61-
margin: 0 5px;
59+
margin: 0 $spacer-1;
6260
}
6361
}

packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.scss

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,6 @@
1515
background-color: var(--dh-color-gray-300);
1616
padding: $spacer-1 $spacer-2;
1717
z-index: 2;
18-
19-
.btn-link-icon {
20-
padding-left: $spacer-1;
21-
padding-right: $spacer-1;
22-
}
2318
}
2419

2520
.toggle-visibility-btn {

packages/iris-grid/src/sidebar/visibility-ordering-builder/VisibilityOrderingBuilder.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1288,6 +1288,7 @@ class VisibilityOrderingBuilder extends PureComponent<
12881288
<Button
12891289
kind="ghost"
12901290
icon={vsRefresh}
1291+
className="px-1"
12911292
tooltip="Reset to default"
12921293
onClick={() => {
12931294
this.resetVisibilityOrdering();
@@ -1299,6 +1300,7 @@ class VisibilityOrderingBuilder extends PureComponent<
12991300
<Button
13001301
kind="ghost"
13011302
icon={dhSortAlphaDown}
1303+
className="px-1"
13021304
tooltip="Sort ascending"
13031305
onClick={() => {
13041306
this.handleSortColumns(
@@ -1309,6 +1311,7 @@ class VisibilityOrderingBuilder extends PureComponent<
13091311
<Button
13101312
kind="ghost"
13111313
icon={dhSortAlphaUp}
1314+
className="px-1"
13121315
tooltip="Sort descending"
13131316
onClick={() => {
13141317
this.handleSortColumns(
@@ -1319,11 +1322,12 @@ class VisibilityOrderingBuilder extends PureComponent<
13191322
<span className="vertical-divider" />
13201323
<Button
13211324
kind="ghost"
1325+
className="px-1"
13221326
tooltip="Create group from selection"
13231327
disabled={!hasSelection}
13241328
onClick={this.handleGroupCreate}
13251329
>
1326-
<span className="fa-layers" style={{ marginRight: '0.75rem' }}>
1330+
<span className="fa-layers">
13271331
<FontAwesomeIcon
13281332
mask={vsSymbolStructure}
13291333
icon={vsCircleLargeFilled}
@@ -1340,6 +1344,7 @@ class VisibilityOrderingBuilder extends PureComponent<
13401344
<Button
13411345
kind="ghost"
13421346
icon={vsChevronUp}
1347+
className="px-1"
13431348
tooltip="Move selection up"
13441349
onClick={() => {
13451350
this.handleMoveColumns(VisibilityOrderingBuilder.MOVE_OPTIONS.UP);
@@ -1349,6 +1354,7 @@ class VisibilityOrderingBuilder extends PureComponent<
13491354
<Button
13501355
kind="ghost"
13511356
icon={vsChevronDown}
1357+
className="px-1"
13521358
tooltip="Move selection down"
13531359
onClick={() => {
13541360
this.handleMoveColumns(
@@ -1360,6 +1366,7 @@ class VisibilityOrderingBuilder extends PureComponent<
13601366
<Button
13611367
kind="ghost"
13621368
icon={dhArrowToTop}
1369+
className="px-1"
13631370
tooltip="Move selection to top"
13641371
onClick={() => {
13651372
this.handleMoveColumns(
@@ -1371,6 +1378,7 @@ class VisibilityOrderingBuilder extends PureComponent<
13711378
<Button
13721379
kind="ghost"
13731380
icon={dhArrowToBottom}
1381+
className="px-1"
13741382
tooltip="Move selection to bottom"
13751383
onClick={() => {
13761384
this.handleMoveColumns(
10 Bytes
Loading
26 Bytes
Loading
-73 Bytes
Loading

0 commit comments

Comments
 (0)