From 7f4cc5d3f3f92338a464853c182b9d6a3ea850eb Mon Sep 17 00:00:00 2001 From: Emiliano Ciavatta Date: Sun, 27 Sep 2020 18:43:27 +0200 Subject: Replaced the old fields with the new ones --- frontend/src/components/Connection.js | 8 +-- frontend/src/components/ConnectionContent.js | 68 +++++----------------- frontend/src/components/ConnectionContent.scss | 12 ++-- frontend/src/components/MessageAction.js | 4 +- frontend/src/components/fields/ButtonField.js | 9 +++ frontend/src/components/fields/ButtonField.scss | 4 ++ frontend/src/components/fields/CheckField.scss | 4 ++ frontend/src/components/fields/ChoiceField.js | 15 ++++- frontend/src/components/fields/ChoiceField.scss | 2 +- .../src/components/fields/extensions/ColorField.js | 17 +++--- .../components/fields/extensions/ColorField.scss | 9 ++- frontend/src/components/panels/PcapPane.js | 7 ++- frontend/src/components/panels/RulePane.js | 12 +--- 13 files changed, 78 insertions(+), 93 deletions(-) (limited to 'frontend/src/components') diff --git a/frontend/src/components/Connection.js b/frontend/src/components/Connection.js index 1149584..7887185 100644 --- a/frontend/src/components/Connection.js +++ b/frontend/src/components/Connection.js @@ -1,8 +1,9 @@ import React, {Component} from 'react'; import './Connection.scss'; -import {Button, Form, OverlayTrigger, Popover} from "react-bootstrap"; +import {Form, OverlayTrigger, Popover} from "react-bootstrap"; import backend from "../backend"; import {formatSize} from "../utils"; +import ButtonField from "./fields/ButtonField"; class Connection extends Component { @@ -96,9 +97,8 @@ class Connection extends Component { - + this.props.addServicePortFilter(conn.port_dst)} /> {conn.ip_src} diff --git a/frontend/src/components/ConnectionContent.js b/frontend/src/components/ConnectionContent.js index 0069424..318965c 100644 --- a/frontend/src/components/ConnectionContent.js +++ b/frontend/src/components/ConnectionContent.js @@ -1,8 +1,10 @@ import React, {Component} from 'react'; import './ConnectionContent.scss'; -import {Button, Dropdown, Row} from 'react-bootstrap'; +import {Dropdown, Row} from 'react-bootstrap'; import MessageAction from "./MessageAction"; import backend from "../backend"; +import ButtonField from "./fields/ButtonField"; +import ChoiceField from "./fields/ChoiceField"; const classNames = require('classnames'); @@ -93,12 +95,12 @@ class ConnectionContent extends Component { } return Object.entries(connectionMessage.metadata["reproducers"]).map(([actionName, actionValue]) => - + }} /> ); } @@ -138,56 +140,16 @@ class ConnectionContent extends Component { | timestamp: {this.props.connection.started_at}
- - - format - - - - plain - hex - hexdump - base32 - base64 - ascii - binary - decimal - octal - - - - - - view_as - - - - default - - - - - - - download_as - - - - nl_separated - only_client - only_server - - - + + + + +
diff --git a/frontend/src/components/ConnectionContent.scss b/frontend/src/components/ConnectionContent.scss index 8ee31ec..fde54c0 100644 --- a/frontend/src/components/ConnectionContent.scss +++ b/frontend/src/components/ConnectionContent.scss @@ -51,7 +51,7 @@ } &:hover .connection-message-actions { - display: block; + display: flex; } .connection-message-label { @@ -89,17 +89,19 @@ .connection-content-header { background-color: $color-primary-2; padding: 0; - height: 31px; + height: 33px; .header-info { - padding-top: 5px; + padding-top: 7px; padding-left: 20px; font-size: 12px; } .header-actions { - .dropdown { - display: inline-block; + display: flex; + + .choice-field { + margin-top: -5px; } } } diff --git a/frontend/src/components/MessageAction.js b/frontend/src/components/MessageAction.js index 2c6ebbc..8f4b031 100644 --- a/frontend/src/components/MessageAction.js +++ b/frontend/src/components/MessageAction.js @@ -40,8 +40,8 @@ class MessageAction extends Component { - - + + ); diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js index b32aee8..f2f02fd 100644 --- a/frontend/src/components/fields/ButtonField.js +++ b/frontend/src/components/fields/ButtonField.js @@ -31,6 +31,15 @@ class ButtonField extends Component { if (this.props.border) { buttonStyle["borderColor"] = this.props.border; } + if (this.props.fullSpan) { + buttonStyle["width"] = "100%"; + } + if (this.props.rounded) { + buttonStyle["borderRadius"] = "3px"; + } + if (this.props.inline) { + buttonStyle["marginTop"] = "8px"; + } return (
diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss index 933279e..aabe80f 100644 --- a/frontend/src/components/fields/ButtonField.scss +++ b/frontend/src/components/fields/ButtonField.scss @@ -9,6 +9,10 @@ &.field-small { font-size: 0.8em; + + button { + padding: 4px 12px; + } } .button-variant-red { diff --git a/frontend/src/components/fields/CheckField.scss b/frontend/src/components/fields/CheckField.scss index 7b0ac5f..ab932b4 100644 --- a/frontend/src/components/fields/CheckField.scss +++ b/frontend/src/components/fields/CheckField.scss @@ -31,5 +31,9 @@ &.field-small { font-size: 0.8em; + + .field-input label { + padding: 7px 15px; + } } } diff --git a/frontend/src/components/fields/ChoiceField.js b/frontend/src/components/fields/ChoiceField.js index d409b21..73e950d 100644 --- a/frontend/src/components/fields/ChoiceField.js +++ b/frontend/src/components/fields/ChoiceField.js @@ -38,15 +38,24 @@ class ChoiceField extends Component { handler(key)}>{values[i]} ); + let fieldValue = ""; + if (inline && name) { + fieldValue = name; + } + if (!this.props.onlyName && inline && name) { + fieldValue += ": "; + } + if (!this.props.onlyName) { + fieldValue += this.props.value || "select a value"; + } + return (
{!inline && name && }
this.state.expanded ? collapse() : expand()}> -
- {((inline && name) ? (name + ": ") : "") + (this.props.value || "select a value")} -
+
{fieldValue}
{options}
diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss index 7f32b0e..e7683b7 100644 --- a/frontend/src/components/fields/ChoiceField.scss +++ b/frontend/src/components/fields/ChoiceField.scss @@ -16,7 +16,7 @@ border: none; color: $color-primary-4; border-radius: 5px; - padding: 7px 10px; + padding: 7px 25px 7px 10px; cursor: pointer; &:after { diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js index edcb720..c1c210f 100644 --- a/frontend/src/components/fields/extensions/ColorField.js +++ b/frontend/src/components/fields/extensions/ColorField.js @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import {Button, ButtonGroup, Form, OverlayTrigger, Popover} from "react-bootstrap"; +import {OverlayTrigger, Popover} from "react-bootstrap"; import './ColorField.scss'; import InputField from "../InputField"; @@ -9,7 +9,6 @@ class ColorField extends Component { super(props); this.state = { - invalid: false }; this.colors = ["#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB", "#1E88E5", "#039BE5", "#00ACC1", @@ -18,8 +17,7 @@ class ColorField extends Component { render() { const colorButtons = this.colors.map((color) => - { this.setState({color: color}); if (typeof this.props.onChange === "function") { @@ -44,16 +42,19 @@ class ColorField extends Component { ); + let buttonStyles = {}; + if (this.state.color) { + buttonStyles["backgroundColor"] = this.state.color; + } + return ( -
+
-
- +
-
); } diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss index c8f617c..1c3931f 100644 --- a/frontend/src/components/fields/extensions/ColorField.scss +++ b/frontend/src/components/fields/extensions/ColorField.scss @@ -16,15 +16,14 @@ .color-picker { margin-bottom: 5.5px; - .btn-picker { - padding: 8.5px 15px; + .picker-button { + font-size: 0.8em; + padding: 8px 15px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; - background-color: $color-indigo; + background-color: $color-primary-1; } } - - } .colors-container { diff --git a/frontend/src/components/panels/PcapPane.js b/frontend/src/components/panels/PcapPane.js index 7e0fa6c..a491dff 100644 --- a/frontend/src/components/panels/PcapPane.js +++ b/frontend/src/components/panels/PcapPane.js @@ -3,10 +3,11 @@ import './PcapPane.scss'; import Table from "react-bootstrap/Table"; import backend from "../../backend"; import {createCurlCommand, formatSize, timestampToTime2} from "../../utils"; -import {Button, Col, Container, Row} from "react-bootstrap"; +import {Col, Container, Row} from "react-bootstrap"; import InputField from "../fields/InputField"; import CheckField from "../fields/CheckField"; import TextField from "../fields/TextField"; +import ButtonField from "../fields/ButtonField"; class PcapPane extends Component { @@ -167,7 +168,7 @@ class PcapPane extends Component { this.setState({uploadFlushAll: v})}/>
- +
@@ -192,7 +193,7 @@ class PcapPane extends Component { this.setState({uploadFlushAll: v})}/>
- +
diff --git a/frontend/src/components/panels/RulePane.js b/frontend/src/components/panels/RulePane.js index fbc8785..2e91d91 100644 --- a/frontend/src/components/panels/RulePane.js +++ b/frontend/src/components/panels/RulePane.js @@ -1,7 +1,7 @@ import React, {Component} from 'react'; import './RulePane.scss'; import Table from "react-bootstrap/Table"; -import {Button, Col, Container, Row} from "react-bootstrap"; +import {Col, Container, Row} from "react-bootstrap"; import InputField from "../fields/InputField"; import CheckField from "../fields/CheckField"; import TextField from "../fields/TextField"; @@ -141,18 +141,12 @@ class RulePane extends Component { - s", "s->c"]} value="both" /> - + s", "s->c"]} value="both" /> + - - -
- -
- -- cgit v1.2.3-70-g09d2