Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Change style of alert message field to be more consistent with inputs

pull/2078/head
Alex P 2017-10-05 12:02:57 -07:00
parent 1525e2fe13
commit 293d5a2045
2 changed files with 12 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui/src/kapacitor/components/RuleMessageText.js
View File

@ -1,13 +1,15 @@
import React, {PropTypes} from 'react' import React, {PropTypes} from 'react'
const RuleMessageText = ({rule, updateMessage}) => const RuleMessageText = ({rule, updateMessage}) =>
<textarea <div className="rule-builder--message">
className="form-control form-malachite monotype rule-builder--message" <textarea
onChange={updateMessage} className="form-control form-malachite monotype"
placeholder="Example: {{ .ID }} is {{ .Level }} value: {{ index .Fields &quot;value&quot; }}" onChange={updateMessage}
value={rule.message} placeholder="Example: {{ .ID }} is {{ .Level }} value: {{ index .Fields &quot;value&quot; }}"
spellCheck={false} value={rule.message}
/> spellCheck={false}
/>
</div>
const {func, shape} = PropTypes const {func, shape} = PropTypes

14
ui/src/style/pages/kapacitor.scss
View File

@ -307,23 +307,15 @@ $rule-builder--radius-lg: 5px;
Section 3 - Rule Message Section 3 - Rule Message
----------------------------------------------------------------------------- -----------------------------------------------------------------------------
*/ */
.rule-builder--message {
textarea.rule-builder--message {
border-color: $rule-builder--section-bg;
background-color: $rule-builder--section-bg; background-color: $rule-builder--section-bg;
padding: $rule-builder--padding-sm ($rule-builder--padding-lg - 2px); padding: $rule-builder--padding-sm ($rule-builder--padding-lg - 2px);
}
.rule-builder--message textarea {
height: 100px; height: 100px;
min-width: 100%; min-width: 100%;
max-width: 100%; max-width: 100%;
border-radius: 0;
@include custom-scrollbar($rule-builder--section-bg,$rule-builder--accent-color); @include custom-scrollbar($rule-builder--section-bg,$rule-builder--accent-color);
&:hover {
border-color: $g4-onyx;
}
&:focus {
background-color: $rule-builder--section-bg;
}
} }
.rule-builder--message-template { .rule-builder--message-template {
height: 30px; height: 30px;