diff --git a/graylog2-web-interface/public/stylesheets/typeahead.less b/graylog2-web-interface/public/stylesheets/typeahead.less
deleted file mode 100644
index 2e745587b02d..000000000000
--- a/graylog2-web-interface/public/stylesheets/typeahead.less
+++ /dev/null
@@ -1,62 +0,0 @@
-form:not(.form-inline) .twitter-typeahead {
- width: 100%;
-}
-
-.typeahead,
-.tt-query,
-.tt-hint {
- border: 2px solid #ccc;
- border-radius: 4px;
- outline: none;
-}
-
-.typeahead {
- background-color: #fff;
-}
-
-.typeahead:focus {
- border: 2px solid #0097cf;
-}
-
-.tt-query {
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-input[type="text"].tt-hint {
- color: #999
-}
-
-.tt-menu {
- min-width: 160px;
- background-color: #fff;
- border: 1px solid rgba(0, 0, 0, 0.2);
- border-radius: 4px;
- box-shadow: 0 5px 10px rgba(0,0,0,.2);
- width: 100%;
-}
-
-.tt-dataset {
- margin-top: 10px;
-}
-
-.tt-suggestion {
- font-size: 1rem; /* theme.fonts.size.body */
- line-height: 20px;
- padding: 3px 20px;
- cursor: pointer;
-}
-
-.tt-suggestion:hover,
-.tt-suggestion.tt-cursor {
- color: #ffffff;
- text-decoration: none;
- background-color: #0081c2;
- background-image: linear-gradient(to bottom, #0088cc, #0077b3);
- background-repeat: repeat-x;
- outline: 0;
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
-}
-
-.tt-suggestion p {
- margin: 0;
-}
diff --git a/graylog2-web-interface/src/components/common/TypeAheadFieldInput.jsx b/graylog2-web-interface/src/components/common/TypeAheadFieldInput.jsx
index 4b976e01b689..92cffa46bcea 100644
--- a/graylog2-web-interface/src/components/common/TypeAheadFieldInput.jsx
+++ b/graylog2-web-interface/src/components/common/TypeAheadFieldInput.jsx
@@ -27,6 +27,8 @@ import ApiRoutes from 'routing/ApiRoutes';
import { qualifyUrl } from 'util/URLUtils';
import fetch from 'logic/rest/FetchProvider';
+import { Container } from './TypeAheadInput';
+
/**
* Component that renders an input offering auto-completion for message fields.
* Fields are loaded from the Graylog server in the background.
@@ -137,14 +139,16 @@ class TypeAheadFieldInput extends React.Component {
const { id, label, valueLink, error, onBlur } = this.props;
return (
- { this.fieldInput = fieldInput; }}
- label={label}
- onBlur={onBlur}
- error={error}
- wrapperClassName="typeahead-wrapper"
- defaultValue={valueLink ? valueLink.value : null}
- {...this._getFilteredProps()} />
+
+ { this.fieldInput = fieldInput; }}
+ label={label}
+ onBlur={onBlur}
+ error={error}
+ wrapperClassName="typeahead-wrapper"
+ defaultValue={valueLink ? valueLink.value : null}
+ {...this._getFilteredProps()} />
+
);
}
}
diff --git a/graylog2-web-interface/src/components/common/TypeAheadInput.jsx b/graylog2-web-interface/src/components/common/TypeAheadInput.jsx
index 1012687ea94f..9756fc5afda8 100644
--- a/graylog2-web-interface/src/components/common/TypeAheadInput.jsx
+++ b/graylog2-web-interface/src/components/common/TypeAheadInput.jsx
@@ -20,11 +20,88 @@ import ReactDOM from 'react-dom';
import escape from 'lodash/escape';
import $ from 'jquery';
import 'typeahead.js';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
import UniversalSearch from 'logic/search/UniversalSearch';
import { Input } from 'components/bootstrap';
+export const Container = styled.div(({ theme }) => css`
+ width: 100%;
+
+ .twitter-typeahead {
+ width: 100%;
+ }
+
+ .typeahead,
+ .tt-query,
+ .tt-hint {
+ border: 2px solid #ccc;
+ border-radius: 4px;
+ outline: none;
+ }
+
+ .typeahead {
+ background-color: #fff;
+ }
+
+ .typeahead:focus {
+ border: 2px solid #0097cf;
+ }
+
+ .tt-query {
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+ }
+
+ input[type="text"].tt-hint {
+ color: #999
+ }
+
+ .tt-menu {
+ min-width: 160px;
+ //background-color: #fff;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: 4px;
+ //box-shadow: 0 5px 10px rgba(0,0,0,.2);
+ width: 100%;
+ background-color: ${theme.colors.global.contentBackground};
+ box-shadow: 0 3px 3px ${theme.colors.global.navigationBoxShadow};
+ color: ${theme.colors.global.textDefault};
+
+ .tt-suggestion:hover,
+ .tt-suggestion.tt-cursor {
+ color: ${theme.colors.variant.darkest.info};
+ background-color: ${theme.colors.variant.lighter.info};
+ background-image: none;
+ }
+ }
+
+ .tt-dataset {
+ margin-top: 10px;
+ }
+
+ .tt-suggestion {
+ font-size: 1rem; /* theme.fonts.size.body */
+ line-height: 20px;
+ padding: 3px 10px;
+ cursor: pointer;
+ }
+
+ .tt-suggestion:hover,
+ .tt-suggestion.tt-cursor {
+ color: #ffffff;
+ text-decoration: none;
+ background-color: #0081c2;
+ background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+ background-repeat: repeat-x;
+ outline: 0;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
+ }
+
+ .tt-suggestion p {
+ margin: 0;
+ }
+`);
+
const StyledInput = styled(Input)`
input&.tt-hint {
background-color: transparent !important;
@@ -159,13 +236,15 @@ class TypeAheadInput extends React.Component {
const { id, label, onKeyPress, formGroupClassName } = this.props;
return (
- { this.fieldInputElem = fieldInput; }}
- wrapperClassName="typeahead-wrapper"
- formGroupClassName={formGroupClassName}
- label={label}
- onKeyPress={onKeyPress} />
+
+ { this.fieldInputElem = fieldInput; }}
+ wrapperClassName="typeahead-wrapper"
+ formGroupClassName={formGroupClassName}
+ label={label}
+ onKeyPress={onKeyPress} />
+
);
}
}
diff --git a/graylog2-web-interface/src/routing/App.tsx b/graylog2-web-interface/src/routing/App.tsx
index 30dce0b27931..f5495f952eaa 100644
--- a/graylog2-web-interface/src/routing/App.tsx
+++ b/graylog2-web-interface/src/routing/App.tsx
@@ -28,7 +28,6 @@ import CurrentUserContext from 'contexts/CurrentUserContext';
import Navigation from 'components/navigation/Navigation';
import ReportedErrorBoundary from 'components/errors/ReportedErrorBoundary';
import RuntimeErrorBoundary from 'components/errors/RuntimeErrorBoundary';
-import 'stylesheets/typeahead.less';
import NavigationTelemetry from 'logic/telemetry/NavigationTelemetry';
import HotkeysProvider from 'contexts/HotkeysProvider';
import HotkeysModalContainer from 'components/hotkeys/HotkeysModalContainer';
diff --git a/graylog2-web-interface/src/theme/GlobalThemeStyles.ts b/graylog2-web-interface/src/theme/GlobalThemeStyles.ts
index ecc178fd2ad1..17bd4c4d5d01 100644
--- a/graylog2-web-interface/src/theme/GlobalThemeStyles.ts
+++ b/graylog2-web-interface/src/theme/GlobalThemeStyles.ts
@@ -563,19 +563,6 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css`
width: auto;
}
- .typeahead-wrapper .tt-menu {
- background-color: ${theme.colors.global.contentBackground};
- box-shadow: 0 3px 3px ${theme.colors.global.navigationBoxShadow};
- color: ${theme.colors.global.textDefault};
-
- .tt-suggestion:hover,
- .tt-suggestion.tt-cursor {
- color: ${theme.colors.variant.darkest.info};
- background-color: ${theme.colors.variant.lighter.info};
- background-image: none;
- }
- }
-
.form-group-inline {
display: inline-block;
margin: 0;
diff --git a/graylog2-web-interface/styleguide.config.js b/graylog2-web-interface/styleguide.config.js
index 14909dcdd8db..545e67d3a118 100644
--- a/graylog2-web-interface/styleguide.config.js
+++ b/graylog2-web-interface/styleguide.config.js
@@ -35,7 +35,6 @@ module.exports = {
'regenerator-runtime/runtime',
'bootstrap/less/bootstrap.less',
'toastr/toastr.less',
- 'stylesheets/typeahead.less',
'./fetch-mock',
],
sections: [