|
|
@ -52,7 +52,7 @@ const template = html` |
|
|
<button |
|
|
<button |
|
|
type="button" |
|
|
type="button" |
|
|
class="button" |
|
|
class="button" |
|
|
?disabled="${x => !x.hasPrevious}" |
|
|
|
|
|
|
|
|
?disabled="${x => !x.hasResults}" |
|
|
@click="${(x, c) => x.handlePrevious(c.event as MouseEvent)}" |
|
|
@click="${(x, c) => x.handlePrevious(c.event as MouseEvent)}" |
|
|
> |
|
|
> |
|
|
<code-icon |
|
|
<code-icon |
|
|
@ -64,7 +64,7 @@ const template = html` |
|
|
<button |
|
|
<button |
|
|
type="button" |
|
|
type="button" |
|
|
class="button" |
|
|
class="button" |
|
|
?disabled="${x => !x.hasNext}" |
|
|
|
|
|
|
|
|
?disabled="${x => !x.hasResults}" |
|
|
@click="${(x, c) => x.handleNext(c.event as MouseEvent)}" |
|
|
@click="${(x, c) => x.handleNext(c.event as MouseEvent)}" |
|
|
> |
|
|
> |
|
|
<code-icon icon="arrow-down" aria-label="Next Match (Enter)" title="Next Match (Enter)"></code-icon> |
|
|
<code-icon icon="arrow-down" aria-label="Next Match (Enter)" title="Next Match (Enter)"></code-icon> |
|
|
@ -72,7 +72,7 @@ const template = html` |
|
|
<button |
|
|
<button |
|
|
type="button" |
|
|
type="button" |
|
|
class="button" |
|
|
class="button" |
|
|
?disabled="${x => !x.value}" |
|
|
|
|
|
|
|
|
?disabled="${x => !x.hasResults}" |
|
|
@click="${(x, c) => x.handleOpenInView(c.event)}" |
|
|
@click="${(x, c) => x.handleOpenInView(c.event)}" |
|
|
> |
|
|
> |
|
|
<code-icon |
|
|
<code-icon |
|
|
@ -90,7 +90,7 @@ const styles = css` |
|
|
flex-direction: row; |
|
|
flex-direction: row; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
gap: 0.8rem; |
|
|
gap: 0.8rem; |
|
|
color: var(--vscode-titleBar-inactiveForeground); |
|
|
|
|
|
|
|
|
color: var(--color-foreground); |
|
|
flex: auto 1 1; |
|
|
flex: auto 1 1; |
|
|
} |
|
|
} |
|
|
:host(:focus) { |
|
|
:host(:focus) { |
|
|
@ -101,8 +101,8 @@ const styles = css` |
|
|
display: inline-flex; |
|
|
display: inline-flex; |
|
|
flex-direction: row; |
|
|
flex-direction: row; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
gap: 0.8rem; |
|
|
|
|
|
color: var(--vscode-titleBar-inactiveForeground); |
|
|
|
|
|
|
|
|
gap: 0.3rem; |
|
|
|
|
|
color: var(--color-foreground); |
|
|
} |
|
|
} |
|
|
.search-navigation:focus { |
|
|
.search-navigation:focus { |
|
|
outline: 0; |
|
|
outline: 0; |
|
|
@ -128,7 +128,11 @@ const styles = css` |
|
|
background: none; |
|
|
background: none; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
} |
|
|
} |
|
|
|
|
|
.button[disabled] { |
|
|
|
|
|
color: var(--vscode-disabledForeground); |
|
|
|
|
|
} |
|
|
.button:focus { |
|
|
.button:focus { |
|
|
|
|
|
background-color: var(--vscode-toolbar-activeBackground); |
|
|
outline: 1px solid var(--vscode-focusBorder); |
|
|
outline: 1px solid var(--vscode-focusBorder); |
|
|
outline-offset: -1px; |
|
|
outline-offset: -1px; |
|
|
} |
|
|
} |
|
|
@ -136,7 +140,8 @@ const styles = css` |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
.button:hover:not([disabled]) { |
|
|
.button:hover:not([disabled]) { |
|
|
background-color: var(--vscode-titleBar-activeBackground); |
|
|
|
|
|
|
|
|
color: var(--vscode-foreground); |
|
|
|
|
|
background-color: var(--vscode-toolbar-hoverBackground); |
|
|
} |
|
|
} |
|
|
.button > code-icon[icon='arrow-up'] { |
|
|
.button > code-icon[icon='arrow-up'] { |
|
|
transform: translateX(-0.1rem); |
|
|
transform: translateX(-0.1rem); |
|
|
@ -207,12 +212,7 @@ export class SearchBox extends FASTElement { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@volatile |
|
|
@volatile |
|
|
get hasPrevious() { |
|
|
|
|
|
return this.total > 1; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@volatile |
|
|
|
|
|
get hasNext() { |
|
|
|
|
|
|
|
|
get hasResults() { |
|
|
return this.total > 1; |
|
|
return this.total > 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
Eric Amodio
2 years ago