github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-07 03:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): animate filter input background change

Browse Source
This commit is contained in:
Łukasz Mierzwa
2020-08-10 18:40:09 +01:00
committed by Łukasz Mierzwa
parent 2f8f085d39
commit 5ed743cddd
4 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/Components/NavBar/FilterInput/History.tsx
View File

@@ -222,7 +222,7 @@ const History: FC<{
// needed to keep track of all filter changes
<span
ref={ref}
className="input-group-text border-0 rounded-0 bg-transparent px-0"
className="input-group-text border-0 rounded-0 bg-inherit px-0"
>
<Manager
data-filters={alertStore.filters.values
@@ -234,7 +234,7 @@ const History: FC<{
<button
ref={ref}
onClick={toggle}
className="btn border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon"
className="btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon"
type="button"
data-toggle="dropdown"
aria-haspopup="true"

10
ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap
View File

@@ -4,7 +4,7 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
"
<div class=\\"input-group w-100 mr-2 components-filterinput-outer bg-transparent\\">
<div class=\\"input-group-prepend\\">
<span class=\\"input-group-text px-2 border-0 rounded-0 bg-transparent components-navbar-icon\\">
<span class=\\"input-group-text px-2 border-0 rounded-0 bg-inherit components-navbar-icon\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
@@ -21,7 +21,7 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
</svg>
</span>
</div>
<div class=\\"form-control components-filterinput border-0 rounded-0 bg-transparent\\">
<div class=\\"form-control components-filterinput border-0 rounded-0 bg-inherit\\">
<div role=\\"combobox\\"
aria-haspopup=\\"listbox\\"
aria-owns=\\"react-autowhatever-1\\"
@@ -44,9 +44,9 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
</div>
</div>
</div>
<div class=\\"input-group-append bg-transparent\\">
<span class=\\"input-group-text border-0 rounded-0 bg-transparent px-0\\">
<button class=\\"btn border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
<div class=\\"input-group-append inherit\\">
<span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
<button class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
type=\\"button\\"
data-toggle=\\"dropdown\\"
aria-haspopup=\\"true\\"

10
ui/src/Components/NavBar/FilterInput/index.tsx
View File

@@ -139,12 +139,12 @@ const FilterInput: FC<{
}`}
>
<div className="input-group-prepend">
<span className="input-group-text px-2 border-0 rounded-0 bg-transparent components-navbar-icon">
<span className="input-group-text px-2 border-0 rounded-0 bg-inherit components-navbar-icon">
<FontAwesomeIcon icon={faSearch} />
</span>
</div>
<div
className="form-control components-filterinput border-0 rounded-0 bg-transparent"
className="form-control components-filterinput border-0 rounded-0 bg-inherit"
onClick={(event) =>
onInputClick((event.target as HTMLDivElement).className)
}
@@ -177,11 +177,7 @@ const FilterInput: FC<{
theme={AutosuggestTheme}
/>
</div>
<div
className={`input-group-append ${
isFocused ? "bg-focused" : "bg-transparent"
}`}
>
<div className="input-group-append inherit">
<History alertStore={alertStore} settingsStore={settingsStore} />
</div>
</div>

12
ui/src/Styles/Components/FilterInput.scss
View File

@@ -3,6 +3,10 @@
border-left: 0;
border-right: 0;
border-bottom: $border-width solid $filterinput-border;
.bg-inherit {
background-color: inherit;
}
}
.form-control.components-filterinput {
@@ -36,3 +40,11 @@ input.components-filterinput-wrapper {
.bg-focused {
background-color: $bg-focused;
}
.input-group.components-filterinput-outer {
&,
& .btn,
& .btn > svg {
transition: background-color 0.2s linear;
}
}