From 55dd9ce410d3c59a528cb458aa20b432e59a25a0 Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Fri, 4 Oct 2024 08:50:41 +0200 Subject: [PATCH 1/2] Move the ahead related styling into `TypeAheadFieldInput`. --- .../public/stylesheets/typeahead.less | 62 ----------- .../components/common/TypeAheadFieldInput.jsx | 102 ++++++++++++++++-- graylog2-web-interface/src/routing/App.tsx | 1 - .../src/theme/GlobalThemeStyles.ts | 19 ---- graylog2-web-interface/styleguide.config.js | 1 - 5 files changed, 94 insertions(+), 91 deletions(-) delete mode 100644 graylog2-web-interface/public/stylesheets/typeahead.less 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..6fa24c80bf28 100644 --- a/graylog2-web-interface/src/components/common/TypeAheadFieldInput.jsx +++ b/graylog2-web-interface/src/components/common/TypeAheadFieldInput.jsx @@ -20,6 +20,7 @@ import ReactDOM from 'react-dom'; import Immutable from 'immutable'; import $ from 'jquery'; import 'typeahead.js'; +import styled, { css } from 'styled-components'; import { Input } from 'components/bootstrap'; import UniversalSearch from 'logic/search/UniversalSearch'; @@ -27,6 +28,89 @@ import ApiRoutes from 'routing/ApiRoutes'; import { qualifyUrl } from 'util/URLUtils'; import fetch from 'logic/rest/FetchProvider'; +const Container = styled.div(({ theme }) => css` + width: 100%; + + .twitter-typeahead { + width: 100%; + } + + .typeahead-wrapper { + display: inline-block; + vertical-align: middle; + 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; + } +`); + /** * Component that renders an input offering auto-completion for message fields. * Fields are loaded from the Graylog server in the background. @@ -137,14 +221,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/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..f80bc1209b42 100644 --- a/graylog2-web-interface/src/theme/GlobalThemeStyles.ts +++ b/graylog2-web-interface/src/theme/GlobalThemeStyles.ts @@ -557,25 +557,6 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` margin-top: 5px; } - .form-inline .typeahead-wrapper { - display: inline-block; - vertical-align: middle; - 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: [ From 8582857aa60fbdd0d85020512a17999e50ef5cbf Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Fri, 4 Oct 2024 10:07:37 +0200 Subject: [PATCH 2/2] Fix styling for `TypeAheadFieldInput`. --- .../components/common/TypeAheadFieldInput.jsx | 84 +--------------- .../src/components/common/TypeAheadInput.jsx | 95 +++++++++++++++++-- .../src/theme/GlobalThemeStyles.ts | 6 ++ 3 files changed, 94 insertions(+), 91 deletions(-) diff --git a/graylog2-web-interface/src/components/common/TypeAheadFieldInput.jsx b/graylog2-web-interface/src/components/common/TypeAheadFieldInput.jsx index 6fa24c80bf28..92cffa46bcea 100644 --- a/graylog2-web-interface/src/components/common/TypeAheadFieldInput.jsx +++ b/graylog2-web-interface/src/components/common/TypeAheadFieldInput.jsx @@ -20,7 +20,6 @@ import ReactDOM from 'react-dom'; import Immutable from 'immutable'; import $ from 'jquery'; import 'typeahead.js'; -import styled, { css } from 'styled-components'; import { Input } from 'components/bootstrap'; import UniversalSearch from 'logic/search/UniversalSearch'; @@ -28,88 +27,7 @@ import ApiRoutes from 'routing/ApiRoutes'; import { qualifyUrl } from 'util/URLUtils'; import fetch from 'logic/rest/FetchProvider'; -const Container = styled.div(({ theme }) => css` - width: 100%; - - .twitter-typeahead { - width: 100%; - } - - .typeahead-wrapper { - display: inline-block; - vertical-align: middle; - 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; - } -`); +import { Container } from './TypeAheadInput'; /** * Component that renders an input offering auto-completion for message fields. 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/theme/GlobalThemeStyles.ts b/graylog2-web-interface/src/theme/GlobalThemeStyles.ts index f80bc1209b42..17bd4c4d5d01 100644 --- a/graylog2-web-interface/src/theme/GlobalThemeStyles.ts +++ b/graylog2-web-interface/src/theme/GlobalThemeStyles.ts @@ -557,6 +557,12 @@ const GlobalThemeStyles = createGlobalStyle(({ theme }) => css` margin-top: 5px; } + .form-inline .typeahead-wrapper { + display: inline-block; + vertical-align: middle; + width: auto; + } + .form-group-inline { display: inline-block; margin: 0;