From 2a93f365f5c815dde16e97ac84a835c2ac9016de Mon Sep 17 00:00:00 2001 From: "M. Mert Yildiran" Date: Mon, 29 Nov 2021 11:46:03 +0300 Subject: [PATCH] Refactor a lot of styling to achieve using `Queryable` in `Protocol` component --- ui/src/components/EntryDetailed.tsx | 6 +++-- .../EntryListItem/EntryListItem.module.sass | 7 +----- ui/src/components/TrafficPage.tsx | 2 +- ui/src/components/UI/Protocol.tsx | 22 ++++++++++++++----- ui/src/components/UI/Queryable.tsx | 4 +++- ui/src/components/style/Filters.module.sass | 1 + ui/src/components/style/TrafficPage.sass | 4 ++-- ui/src/variables.module.scss | 3 ++- 8 files changed, 31 insertions(+), 18 deletions(-) diff --git a/ui/src/components/EntryDetailed.tsx b/ui/src/components/EntryDetailed.tsx index d86b3215d..54fece033 100644 --- a/ui/src/components/EntryDetailed.tsx +++ b/ui/src/components/EntryDetailed.tsx @@ -39,13 +39,13 @@ const EntryTitle: React.FC = ({protocol, data, bodySize, elapsedTime, updat const response = data.response; const bodySizeChild =
{formatSize(bodySize)}
; const elapsedTimeChild =
{Math.round(elapsedTime)}ms
; @@ -57,6 +57,7 @@ const EntryTitle: React.FC = ({protocol, data, bodySize, elapsedTime, updat {response && {bodySizeChild} @@ -64,6 +65,7 @@ const EntryTitle: React.FC = ({protocol, data, bodySize, elapsedTime, updat {response && = ${elapsedTime}`} updateQuery={updateQuery} + style={{marginRight: 18}} displayIconOnMouseOver={true} > {elapsedTimeChild} diff --git a/ui/src/components/EntryListItem/EntryListItem.module.sass b/ui/src/components/EntryListItem/EntryListItem.module.sass index e4d6a0121..38bfd7146 100644 --- a/ui/src/components/EntryListItem/EntryListItem.module.sass +++ b/ui/src/components/EntryListItem/EntryListItem.module.sass @@ -6,20 +6,15 @@ min-height: 46px max-height: 46px align-items: center - padding: 0 8px border-radius: 4px cursor: pointer - border: solid 1px transparent - margin-right: 10px - &:not(:first-child) - margin-top: 10px + margin-left: -1px &:hover border: solid 1px lighten(#4253a5, 20%) .rowSelected border: 1px $blue-color solid - margin-right: 3px .ruleSuccessRow background: #E8FFF1 diff --git a/ui/src/components/TrafficPage.tsx b/ui/src/components/TrafficPage.tsx index b530dea5d..5de000604 100644 --- a/ui/src/components/TrafficPage.tsx +++ b/ui/src/components/TrafficPage.tsx @@ -21,7 +21,7 @@ const useLayoutStyles = makeStyles(() => ({ padding: "12px 24px", borderRadius: 4, marginTop: 15, - background: variables.headerBackgoundColor, + background: variables.headerBackgroundColor, }, viewer: { diff --git a/ui/src/components/UI/Protocol.tsx b/ui/src/components/UI/Protocol.tsx index 0befffce0..3b20f1a33 100644 --- a/ui/src/components/UI/Protocol.tsx +++ b/ui/src/components/UI/Protocol.tsx @@ -1,5 +1,7 @@ import React from "react"; import styles from './style/Protocol.module.sass'; +import Queryable from "./Queryable"; +import variables from '../../variables.module.scss'; export interface ProtocolInterface { name: string @@ -36,7 +38,7 @@ const Protocol: React.FC = ({protocol, horizontal, updateQuery}) } else { - return = ({protocol, horizontal, updateQuery}) fontSize: protocol.fontSize, }} title={protocol.longName} - onClick={() => { - updateQuery(protocol.macro) - }} > {protocol.abbr} - + ; + + return + {child} + } }; diff --git a/ui/src/components/UI/Queryable.tsx b/ui/src/components/UI/Queryable.tsx index 9ccc33ce7..e962f8ccf 100644 --- a/ui/src/components/UI/Queryable.tsx +++ b/ui/src/components/UI/Queryable.tsx @@ -7,13 +7,14 @@ interface Props { query: string, updateQuery: any, style?: object, + iconStyle?: object, className?: string, useTooltip?: boolean, displayIconOnMouseOver?: boolean, flipped?: boolean, } -const Queryable: React.FC = ({query, updateQuery, style, className, useTooltip= true, displayIconOnMouseOver = false, flipped = false, children}) => { +const Queryable: React.FC = ({query, updateQuery, style, iconStyle, className, useTooltip= true, displayIconOnMouseOver = false, flipped = false, children}) => { const [showAddedNotification, setAdded] = useState(false); const [showTooltip, setShowTooltip] = useState(false); @@ -37,6 +38,7 @@ const Queryable: React.FC = ({query, updateQuery, style, className, useTo {showAddedNotification && Added} diff --git a/ui/src/components/style/Filters.module.sass b/ui/src/components/style/Filters.module.sass index a815d7a9d..74315c8f0 100644 --- a/ui/src/components/style/Filters.module.sass +++ b/ui/src/components/style/Filters.module.sass @@ -7,6 +7,7 @@ padding: .5rem 0 border-bottom: 1px solid #BCC6DD margin-right: 20px + margin-left: 24px .filterLabel color: #8f9bb2 diff --git a/ui/src/components/style/TrafficPage.sass b/ui/src/components/style/TrafficPage.sass index 3a3c558f5..088611898 100644 --- a/ui/src/components/style/TrafficPage.sass +++ b/ui/src/components/style/TrafficPage.sass @@ -68,7 +68,7 @@ display: flex flex-grow: 1 overflow: hidden - padding-left: 24px + // padding-left: 24px flex-direction: column .TrafficPage-DetailContainer @@ -114,4 +114,4 @@ .playPauseIcon cursor: pointer margin-right: 15px - height: 30px \ No newline at end of file + height: 30px diff --git a/ui/src/variables.module.scss b/ui/src/variables.module.scss index d2f3d89bd..054a4915c 100644 --- a/ui/src/variables.module.scss +++ b/ui/src/variables.module.scss @@ -11,7 +11,8 @@ $blue-gray: #494677; :export { mainBackgroundColor: $main-background-color; - headerBackgoundColor: $header-background-color; + headerBackgroundColor: $header-background-color; + dataBackgroundColor: $data-background-color; fontColor: $font-color; secondaryFontColor: $secondary-font-color; blueColor: $blue-color;