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

Merge pull request #989 from prymitive/main-modal-select

Browse Source 
fix(ui): use portals for dropdowns on the settings modal
This commit is contained in:
Łukasz Mierzwa
2019-10-03 12:45:13 +01:00
committed by GitHub
parent 1db4d8291a 1038b63b25
commit 3de42bc7c6
9 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/Components/Accordion/index.js
View File

@@ -6,6 +6,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
import "./index.scss";
const Trigger = ({ text, isOpen }) => (
<div className="d-flex flex-row justify-content-between">
<div>{text}</div>
@@ -25,7 +27,7 @@ const Accordion = ({ text, content, extraProps }) => (
overflowWhenOpen="visible"
className="card"
openedClassName="card"
triggerClassName="card-header cursor-pointer"
triggerClassName="card-header cursor-pointer border-bottom-0"
triggerOpenedClassName="card-header cursor-pointer bg-light"
contentOuterClassName="collapse show"
contentInnerClassName="card-body my-2"

3
ui/src/Components/Accordion/index.scss Normal file
View File

@@ -0,0 +1,3 @@
.accordion > .Collapsible.card {
overflow: unset;
}

1
ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js
View File

@@ -64,7 +64,6 @@ const AlertGroupCollapseConfiguration = observer(
)}
options={Object.values(settingsStore.alertGroupConfig.options)}
onChange={this.onCollapseChange}
menuPosition="fixed"
hideSelectedOptions
/>
</div>

1
ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js
View File

@@ -75,7 +75,6 @@ const AlertGroupSortConfiguration = observer(
)}
options={Object.values(settingsStore.gridConfig.options)}
onChange={this.onSortOrderChange}
menuPosition="fixed"
hideSelectedOptions
/>
</div>

1
ui/src/Components/MainModal/Configuration/SortLabelName.js
View File

@@ -79,7 +79,6 @@ const SortLabelName = observer(
)}
options={this.suggestions.names}
onChange={this.onChange}
menuPosition="fixed"
/>
);
}

12
ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap
View File

@@ -75,7 +75,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Filter bar configuration
@@ -123,7 +123,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Alert group titlebar configuration
@@ -170,7 +170,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Minimal alert group width
@@ -241,7 +241,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Default number of alerts to show per group
@@ -312,7 +312,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Default alert group display
@@ -391,7 +391,7 @@ exports[`<Configuration /> matches snapshot 1`] = `
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Grid sort order

4
ui/src/Components/MainModal/__snapshots__/Help.test.js.snap
View File

@@ -163,7 +163,7 @@ exports[`<Help /> matches snapshot 1`] = `
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Filtering using alert labels
@@ -339,7 +339,7 @@ exports[`<Help /> matches snapshot 1`] = `
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Filtering alerts using special filters

12
ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
View File

@@ -94,7 +94,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Filter bar configuration
@@ -142,7 +142,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Alert group titlebar configuration
@@ -189,7 +189,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Minimal alert group width
@@ -260,7 +260,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Default number of alerts to show per group
@@ -331,7 +331,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Default alert group display
@@ -410,7 +410,7 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
</div>
</div>
<div class=\\"Collapsible card\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer\\">
<div class=\\"Collapsible__trigger is-closed card-header cursor-pointer border-bottom-0\\">
<div class=\\"d-flex flex-row justify-content-between\\">
<div>
Grid sort order

2
ui/src/Components/MultiSelect/index.js
View File

@@ -80,7 +80,7 @@ const ReactSelectStyles = {
}),
menu: (base, state) => ({
...base,
zIndex: 100
zIndex: 1500
}),
option: (base, state) => ({
...base,