From 062e03bc93992b661c7be1d3991f76f20acc5af0 Mon Sep 17 00:00:00 2001 From: YanJin Date: Fri, 15 Jan 2021 17:16:13 +0100 Subject: [PATCH] ui/style: Move all the style component to a dedicate file Refs: #2932 --- ui/src/components/CommonLayoutStyle.js | 3 +- ui/src/components/style/BreadcrumbStyle.js | 15 ++ ui/src/components/style/CommonLayoutStyle.js | 149 ++++++++++++++++++ ui/src/components/style/ModalFormStyle.js | 25 +++ .../components/style/TableBasedPageStyle.js | 12 ++ ui/src/components/style/TableStyle.js | 15 ++ 6 files changed, 218 insertions(+), 1 deletion(-) create mode 100644 ui/src/components/style/BreadcrumbStyle.js create mode 100644 ui/src/components/style/CommonLayoutStyle.js create mode 100644 ui/src/components/style/ModalFormStyle.js create mode 100644 ui/src/components/style/TableBasedPageStyle.js create mode 100644 ui/src/components/style/TableStyle.js diff --git a/ui/src/components/CommonLayoutStyle.js b/ui/src/components/CommonLayoutStyle.js index 5ab25dec5e..1dd56b9c33 100644 --- a/ui/src/components/CommonLayoutStyle.js +++ b/ui/src/components/CommonLayoutStyle.js @@ -125,7 +125,8 @@ export const GraphsContainer = styled.div` display: flex; flex-direction: column; padding: ${padding.small}; - + overflow: auto; + height: calc(100vh - 150px); .sc-vegachart svg { background-color: inherit !important; } diff --git a/ui/src/components/style/BreadcrumbStyle.js b/ui/src/components/style/BreadcrumbStyle.js new file mode 100644 index 0000000000..87e6ac2398 --- /dev/null +++ b/ui/src/components/style/BreadcrumbStyle.js @@ -0,0 +1,15 @@ +import styled from 'styled-components'; +import { Link } from 'react-router-dom'; +import { fontSize, padding } from '@scality/core-ui/dist/style/theme'; + +export const BreadcrumbContainer = styled.div` + padding: 0 0 ${padding.smaller} ${padding.base}; +`; + +export const BreadcrumbLabel = styled.span` + font-size: ${fontSize.large}; +`; + +export const StyledLink = styled(Link)` + font-size: ${fontSize.large}; +`; diff --git a/ui/src/components/style/CommonLayoutStyle.js b/ui/src/components/style/CommonLayoutStyle.js new file mode 100644 index 0000000000..5ab25dec5e --- /dev/null +++ b/ui/src/components/style/CommonLayoutStyle.js @@ -0,0 +1,149 @@ +import styled from 'styled-components'; +import { + padding, + fontSize, + fontWeight, +} from '@scality/core-ui/dist/style/theme'; + +export const PageContainer = styled.div` + display: flex; + box-sizing: border-box; + height: 100%; + flex-wrap: wrap; + padding: ${padding.small}; +`; + +export const LeftSideInstanceList = styled.div` + flex-direction: column; + min-height: 696px; + width: 49%; +`; + +export const RightSidePanel = styled.div` + flex-direction: column; + width: 51%; + /* Make it scrollable for the small laptop screen */ + overflow-y: auto; + margin: 0 ${padding.small} 0 8px; +`; + +export const NoInstanceSelectedContainer = styled.div` + width: 51%; + min-height: 700px; + background-color: ${(props) => props.theme.brand.primaryDark1}; + margin: ${padding.small}; +`; + +export const NoInstanceSelected = styled.div` + position: relative; + top: 50%; + transform: translateY(-50%); + color: ${(props) => props.theme.brand.textPrimary}; + text-align: center; +`; + +export const PageContentContainer = styled.div` + display: flex; + flex-direction: row; + height: 100%; + width: 100%; + background-color: ${(props) => props.theme.brand.background}; + overflow: hidden; +`; + +// Common styles for the tabs in NodePageRSP +export const NodeTab = styled.div` + background-color: ${(props) => props.theme.brand.primary}; + color: ${(props) => props.theme.brand.textPrimary}; + padding-bottom: ${padding.base}; + height: calc(100vh - 172px); + overflow: scroll; +`; + +export const TextBadge = styled.span` + background-color: ${(props) => props.theme.brand.info}; + color: ${(props) => props.theme.brand.textPrimary}; + padding: 2px ${padding.small}; + border-radius: 4px; + font-size: ${fontSize.small}; + font-weight: ${fontWeight.bold}; + margin-left: ${padding.smaller}; +`; + +export const VolumeTab = styled.div` + overflow: scroll; + height: calc(100vh - 174px); + color: ${(props) => props.theme.brand.textPrimary}; + padding-bottom: ${padding.base}; +`; + +export const SortCaretWrapper = styled.span` + padding-left: ${padding.smaller}; + position: absolute; +`; + +export const SortIncentive = styled.span` + position: absolute; + display: none; +`; + +export const TableHeader = styled.span` + padding: ${padding.base}; + &:hover { + ${SortIncentive} { + display: block; + } + } +`; + +export const MetricsActionContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: flex-end; + padding: ${padding.base} ${padding.base}; + position: sticky; + top: 0px; + z-index: 100; + background-color: ${(props) => props.theme.brand.primary}; + + .sc-dropdown { + padding-left: 25px; + } + + .sc-dropdown > div { + background-color: ${(props) => props.theme.brand.primary}; + border: 1px solid ${(props) => props.theme.brand.borderLight} + border-radius: 3px; + } + + .sc-button { + background-color: ${(props) => props.theme.brand.info}; + } +`; + +export const GraphsContainer = styled.div` + display: flex; + flex-direction: column; + padding: ${padding.small}; + + .sc-vegachart svg { + background-color: inherit !important; + } +`; + +export const RowGraphContainer = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; +`; + +export const GraphTitle = styled.div` + font-size: ${fontSize.small}; + font-weight: ${fontWeight.bold}; + color: ${(props) => props.theme.brand.textSecondary}; + padding: ${padding.small} 0 0 ${padding.larger}; +`; + +export const GraphWrapper = styled.div` + padding-left: 0px; +`; diff --git a/ui/src/components/style/ModalFormStyle.js b/ui/src/components/style/ModalFormStyle.js new file mode 100644 index 0000000000..2c85a565a7 --- /dev/null +++ b/ui/src/components/style/ModalFormStyle.js @@ -0,0 +1,25 @@ +import { padding } from '@scality/core-ui/dist/style/theme'; +import styled from 'styled-components'; + +export const FormStyle = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; + padding-bottom: ${padding.base}; + min-height: 220px; + .sc-input { + display: inline-flex; + margin: ${padding.smaller} 0; + justify-content: center; + .sc-input-label { + width: 200px; + } + } +`; + +export const ActionContainer = styled.div` + display: flex; + justify-content: space-between; + margin: 10px 0; + padding: 10px 0; +`; diff --git a/ui/src/components/style/TableBasedPageStyle.js b/ui/src/components/style/TableBasedPageStyle.js new file mode 100644 index 0000000000..02931a0533 --- /dev/null +++ b/ui/src/components/style/TableBasedPageStyle.js @@ -0,0 +1,12 @@ +import { padding } from '@scality/core-ui/dist/style/theme'; +import styled from 'styled-components'; + +const TableBasedPageStyle = styled.div` + box-sizing: border-box; + display: flex; + flex-direction: column; + height: 100%; + padding: ${padding.small}; +`; + +export default TableBasedPageStyle; diff --git a/ui/src/components/style/TableStyle.js b/ui/src/components/style/TableStyle.js new file mode 100644 index 0000000000..c03dd8c100 --- /dev/null +++ b/ui/src/components/style/TableStyle.js @@ -0,0 +1,15 @@ +import styled from 'styled-components'; +import { padding, fontWeight } from '@scality/core-ui/dist/style/theme'; + +export const TooltipContent = styled.div` + color: ${(props) => props.theme.brand.textSecondary}; + font-weight: ${fontWeight.bold}; + min-width: 60px; +`; + +export const UnknownIcon = styled.i` + color: ${(props) => props.theme.brand.textSecondary}; + // Increase the height so that the users don't need to hover precisely on the hyphen. + height: 30px; + padding-top: ${padding.base}; +`;