From fcb3a5980606a1ab7f15fa9185f9684a7702b24f Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Sun, 13 Nov 2022 13:17:34 +0000 Subject: refactor(web/ui): Drop dependency on Sass This change updates the OpenDC web UI to not rely on Sass for stylesheets. CSS in combination with PostCSS has become powerful enough for our use-cases as indicated by the small differences between the CSS and SCSS versions of our files. By switching to CSS, we can make use of Turbopack to build the project, which is a re-implementation of Webppack in Rust and is able to build projects much faster. --- .../opendc-web-ui/src/components/AppHeader.js | 2 +- .../src/components/AppHeader.module.css | 42 +++++++++++++++++ .../src/components/AppHeader.module.scss | 44 ----------------- .../components/context/ContextSelectionSection.js | 2 +- .../context/ContextSelectionSection.module.css | 28 +++++++++++ .../context/ContextSelectionSection.module.scss | 28 ----------- .../src/components/context/ContextSelector.js | 2 +- .../components/context/ContextSelector.module.css | 44 +++++++++++++++++ .../components/context/ContextSelector.module.scss | 46 ------------------ .../src/components/projects/FilterPanel.js | 2 +- .../src/components/projects/FilterPanel.module.css | 7 +++ .../components/projects/FilterPanel.module.scss | 7 --- .../src/components/topologies/map/MapStage.js | 2 +- .../components/topologies/map/MapStage.module.css | 29 ++++++++++++ .../components/topologies/map/MapStage.module.scss | 29 ------------ .../components/topologies/map/controls/Collapse.js | 2 +- .../topologies/map/controls/Collapse.module.css | 55 ++++++++++++++++++++++ .../topologies/map/controls/Collapse.module.scss | 55 ---------------------- .../topologies/map/controls/ScaleIndicator.js | 2 +- .../map/controls/ScaleIndicator.module.css | 10 ++++ .../map/controls/ScaleIndicator.module.scss | 10 ---- .../components/topologies/map/controls/Toolbar.js | 2 +- .../topologies/map/controls/Toolbar.module.css | 27 +++++++++++ .../topologies/map/controls/Toolbar.module.scss | 29 ------------ .../topologies/sidebar/TopologySidebar.js | 2 +- .../topologies/sidebar/TopologySidebar.module.css | 35 ++++++++++++++ .../topologies/sidebar/TopologySidebar.module.scss | 37 --------------- .../topologies/sidebar/rack/RackSidebar.js | 2 +- .../topologies/sidebar/rack/RackSidebar.module.css | 14 ++++++ .../sidebar/rack/RackSidebar.module.scss | 14 ------ 30 files changed, 301 insertions(+), 309 deletions(-) create mode 100644 opendc-web/opendc-web-ui/src/components/AppHeader.module.css delete mode 100644 opendc-web/opendc-web-ui/src/components/AppHeader.module.scss create mode 100644 opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.css delete mode 100644 opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.scss create mode 100644 opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.css delete mode 100644 opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss create mode 100644 opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.css delete mode 100644 opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.css delete mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.css delete mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.css delete mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.css delete mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.css delete mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.css delete mode 100644 opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss (limited to 'opendc-web/opendc-web-ui/src/components') diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.js b/opendc-web/opendc-web-ui/src/components/AppHeader.js index c046f9c7..514dce2a 100644 --- a/opendc-web/opendc-web-ui/src/components/AppHeader.js +++ b/opendc-web/opendc-web-ui/src/components/AppHeader.js @@ -37,7 +37,7 @@ import AppHeaderTools from './AppHeaderTools' import AppHeaderUser from './AppHeaderUser' import ProjectSelector from './context/ProjectSelector' -import styles from './AppHeader.module.scss' +import styles from './AppHeader.module.css' export default function AppHeader({ nav }) { return ( diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.module.css b/opendc-web/opendc-web-ui/src/components/AppHeader.module.css new file mode 100644 index 00000000..9d5dbed1 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/AppHeader.module.css @@ -0,0 +1,42 @@ +/*! + * Copyright (c) 2021 AtLarge Research + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +.header.header { + /* Increase precedence */ + --pf-c-masthead--m-display-inline__content--MinHeight: 3rem; + --pf-c-masthead--m-display-inline__main--MinHeight: 3rem; + + --pf-c-masthead--c-context-selector--Width: 200px; +} + +.logo > span { + margin-left: 8px; + color: #fff; + align-self: center; + font-weight: 600; + font-size: 0.9rem; +} + +.logo:hover, +.logo:focus > span { + --pf-global--link--TextDecoration: none; +} diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.module.scss b/opendc-web/opendc-web-ui/src/components/AppHeader.module.scss deleted file mode 100644 index 73ef553c..00000000 --- a/opendc-web/opendc-web-ui/src/components/AppHeader.module.scss +++ /dev/null @@ -1,44 +0,0 @@ -/*! - * Copyright (c) 2021 AtLarge Research - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -.header.header { - /* Increase precedence */ - --pf-c-masthead--m-display-inline__content--MinHeight: 3rem; - --pf-c-masthead--m-display-inline__main--MinHeight: 3rem; - - --pf-c-masthead--c-context-selector--Width: 200px; -} - -.logo { - span { - margin-left: 8px; - color: #fff; - align-self: center; - font-weight: 600; - font-size: 0.9rem; - } - - &:hover, - &:focus { - text-decoration: none; - } -} diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js index 5d3a6441..f3c25b79 100644 --- a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js +++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.js @@ -21,7 +21,7 @@ */ import PropTypes from 'prop-types' -import { contextSelectionSection } from './ContextSelectionSection.module.scss' +import { contextSelectionSection } from './ContextSelectionSection.module.css' function ContextSelectionSection({ children }) { return
{children}
diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.css b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.css new file mode 100644 index 00000000..0e902af0 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.css @@ -0,0 +1,28 @@ +/*! + * Copyright (c) 2021 AtLarge Research + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +.contextSelectionSection { + padding-left: var(--pf-c-page__main-breadcrumb--PaddingLeft); + flex-shrink: 0; + border-bottom: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100); + background-color: var(--pf-c-page__main-breadcrumb--BackgroundColor); +} diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.scss deleted file mode 100644 index 0e902af0..00000000 --- a/opendc-web/opendc-web-ui/src/components/context/ContextSelectionSection.module.scss +++ /dev/null @@ -1,28 +0,0 @@ -/*! - * Copyright (c) 2021 AtLarge Research - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -.contextSelectionSection { - padding-left: var(--pf-c-page__main-breadcrumb--PaddingLeft); - flex-shrink: 0; - border-bottom: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100); - background-color: var(--pf-c-page__main-breadcrumb--BackgroundColor); -} diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js index 059cfea8..d2601008 100644 --- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js +++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js @@ -24,7 +24,7 @@ import PropTypes from 'prop-types' import { ContextSelector as PFContextSelector, ContextSelectorItem } from '@patternfly/react-core' import { useMemo, useState } from 'react' -import styles from './ContextSelector.module.scss' +import styles from './ContextSelector.module.css' function ContextSelector({ id, type = 'page', toggleText, items, onSelect, onToggle, isOpen, isFullHeight }) { const [searchValue, setSearchValue] = useState('') diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.css b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.css new file mode 100644 index 00000000..7662d00c --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.css @@ -0,0 +1,44 @@ +/* + * Copyright (c) 2021 AtLarge Research + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +.pageSelector.pageSelector { + /* Ensure this selector has precedence over the default one */ + margin-right: 20px; + + --pf-c-context-selector__menu--ZIndex: var(--pf-global--ZIndex--lg); + --pf-c-context-selector__toggle--PaddingTop: var(--pf-global--spacer--sm); + --pf-c-context-selector__toggle--PaddingRight: 0; + --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--sm); + --pf-c-context-selector__toggle--PaddingLeft: 0; + --pf-c-context-selector__toggle--BorderWidth: 0; + --pf-c-context-selector__toggle-text--FontSize: var(--pf-global--FontSize--sm); +} + +.pageSelector.pageSelector :global(.pf-c-context-selector__toggle):active, +.pageSelector.pageSelector :global(.pf-c-context-selector__toggle):focus-within, +.pageSelector.pageSelector :global(.pf-c-context-selector__toggle):global(.pf-m-active) { + --pf-c-context-selector__toggle--after--BorderBottomWidth: 0; +} + +.pageSelector.pageSelector:global(.pf-m-expanded) > :global(.pf-c-context-selector__toggle) { + --pf-c-context-selector__toggle--after--BorderBottomWidth: 0; +} diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss deleted file mode 100644 index 4f86ac64..00000000 --- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Copyright (c) 2021 AtLarge Research - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -.pageSelector.pageSelector { - // Ensure this selector has precedence over the default one - margin-right: 20px; - - --pf-c-context-selector__menu--ZIndex: var(--pf-global--ZIndex--lg); - --pf-c-context-selector__toggle--PaddingTop: var(--pf-global--spacer--sm); - --pf-c-context-selector__toggle--PaddingRight: 0; - --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--sm); - --pf-c-context-selector__toggle--PaddingLeft: 0; - --pf-c-context-selector__toggle--BorderWidth: 0; - --pf-c-context-selector__toggle-text--FontSize: var(--pf-global--FontSize--sm); - - & :global(.pf-c-context-selector__toggle) { - &:active, - &:focus-within, - &:global(.pf-m-active) { - --pf-c-context-selector__toggle--after--BorderBottomWidth: 0; - } - } - - &:global(.pf-m-expanded) > :global(.pf-c-context-selector__toggle) { - --pf-c-context-selector__toggle--after--BorderBottomWidth: 0; - } -} diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js index 7c6d129c..5aaa56ac 100644 --- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js +++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core' -import { filterPanel } from './FilterPanel.module.scss' +import { filterPanel } from './FilterPanel.module.css' export const FILTERS = { SHOW_ALL: 'All Projects', SHOW_OWN: 'My Projects', SHOW_SHARED: 'Shared with me' } diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.css b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.css new file mode 100644 index 00000000..15c36821 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.css @@ -0,0 +1,7 @@ +.filterPanel { + display: flex; +} + +.filterPanel > button { + flex: 1 !important; +} diff --git a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss b/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss deleted file mode 100644 index 79cdf81a..00000000 --- a/opendc-web/opendc-web-ui/src/components/projects/FilterPanel.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.filterPanel { - display: flex; - - button { - flex: 1 !important; - } -} diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js index 8bf529b2..1b9fff72 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js @@ -5,7 +5,7 @@ import { Stage } from 'react-konva' import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants' import { ReactReduxContext } from 'react-redux' import useResizeObserver from 'use-resize-observer' -import { mapContainer } from './MapStage.module.scss' +import { mapContainer } from './MapStage.module.css' import MapLayer from './layers/MapLayer' import RoomHoverLayer from './layers/RoomHoverLayer' import ObjectHoverLayer from './layers/ObjectHoverLayer' diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.css b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.css new file mode 100644 index 00000000..47c3dde2 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.css @@ -0,0 +1,29 @@ +/*! + * Copyright (c) 2021 AtLarge Research + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +.mapContainer { + background-color: var(--pf-global--Color--light-200); + position: relative; + display: flex; + width: 100%; + height: 100%; +} diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss deleted file mode 100644 index 47c3dde2..00000000 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -/*! - * Copyright (c) 2021 AtLarge Research - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -.mapContainer { - background-color: var(--pf-global--Color--light-200); - position: relative; - display: flex; - width: 100%; - height: 100%; -} diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js index f54b7c84..931ded94 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.js @@ -22,7 +22,7 @@ import PropTypes from 'prop-types' import { ChevronLeftIcon } from '@patternfly/react-icons' -import { collapseContainer } from './Collapse.module.scss' +import { collapseContainer } from './Collapse.module.css' import { Button } from '@patternfly/react-core' function Collapse({ onClick }) { diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.css b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.css new file mode 100644 index 00000000..70fd465f --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.css @@ -0,0 +1,55 @@ +/*! + * Copyright (c) 2021 AtLarge Research + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +.collapseContainer { + position: absolute; + right: var(--pf-global--spacer--xs); + top: 0; + bottom: 10%; + margin: auto 0; + height: 50px; +} + +.collapseContainer > button:global(.pf-m-tertiary) { + height: 100%; + padding: 2px; + + margin-right: var(--pf-global--spacer--xs); + margin-top: var(--pf-global--spacer--xs); + background-color: var(--pf-global--BackgroundColor--100); + border: none; + border-radius: var(--pf-global--BorderRadius--sm); + box-shadow: var(--pf-global--BoxShadow--sm); +} + +.collapseContainer > button:global(.pf-m-tertiary):not(:global(.pf-m-disabled)) { + background-color: var(--pf-global--BackgroundColor--100); +} + +.collapseContainer > button:global(.pf-m-tertiary):after { + display: none; +} + +.collapseContainer > button:global(.pf-m-tertiary):hover { + border: none; + box-shadow: var(--pf-global--BoxShadow--md); +} diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss deleted file mode 100644 index 0c1fac94..00000000 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Collapse.module.scss +++ /dev/null @@ -1,55 +0,0 @@ -/*! - * Copyright (c) 2021 AtLarge Research - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -.collapseContainer { - position: absolute; - right: var(--pf-global--spacer--xs); - top: 0; - bottom: 10%; - margin: auto 0; - height: 50px; - - button:global(.pf-m-tertiary) { - height: 100%; - padding: 2px; - - margin-right: var(--pf-global--spacer--xs); - margin-top: var(--pf-global--spacer--xs); - background-color: var(--pf-global--BackgroundColor--100); - border: none; - border-radius: var(--pf-global--BorderRadius--sm); - box-shadow: var(--pf-global--BoxShadow--sm); - - &:not(:global(.pf-m-disabled)) { - background-color: var(--pf-global--BackgroundColor--100); - } - - &:after { - display: none; - } - - &:hover { - border: none; - box-shadow: var(--pf-global--BoxShadow--md); - } - } -} diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js index 58d2ccc9..3ec893fb 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types' import React from 'react' import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants' -import { scaleIndicator } from './ScaleIndicator.module.scss' +import { scaleIndicator } from './ScaleIndicator.module.css' function ScaleIndicator({ scale }) { return ( diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.css b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.css new file mode 100644 index 00000000..f19e0ff2 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.css @@ -0,0 +1,10 @@ +.scaleIndicator { + position: absolute; + right: 10px; + bottom: 10px; + z-index: 50; + + border: solid 2px #212529; + border-top: none; + border-left: none; +} diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss deleted file mode 100644 index f19e0ff2..00000000 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/ScaleIndicator.module.scss +++ /dev/null @@ -1,10 +0,0 @@ -.scaleIndicator { - position: absolute; - right: 10px; - bottom: 10px; - z-index: 50; - - border: solid 2px #212529; - border-top: none; - border-left: none; -} diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js index e7dc57c3..00aaf3e1 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types' import React from 'react' -import { control, toolBar } from './Toolbar.module.scss' +import { control, toolBar } from './Toolbar.module.css' import { Button } from '@patternfly/react-core' import { SearchPlusIcon, SearchMinusIcon, CameraIcon } from '@patternfly/react-icons' diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.css b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.css new file mode 100644 index 00000000..007389da --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.css @@ -0,0 +1,27 @@ +.toolBar { + position: absolute; + bottom: var(--pf-global--spacer--md); + left: var(--pf-global--spacer--xl); +} + +.control:global(.pf-m-tertiary) { + margin-right: var(--pf-global--spacer--xs); + margin-top: var(--pf-global--spacer--xs); + background-color: var(--pf-global--BackgroundColor--100); + border: none; + border-radius: var(--pf-global--BorderRadius--sm); + box-shadow: var(--pf-global--BoxShadow--sm); +} + +.control:global(.pf-m-tertiary):not(:global(.pf-m-disabled)) { + background-color: var(--pf-global--BackgroundColor--100); +} + +.control:global(.pf-m-tertiary):after { + display: none; +} + +.control:global(.pf-m-tertiary):hover { + border: none; + box-shadow: var(--pf-global--BoxShadow--md); +} diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss deleted file mode 100644 index 0d505acc..00000000 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -.toolBar { - position: absolute; - bottom: var(--pf-global--spacer--md); - left: var(--pf-global--spacer--xl); -} - -.control { - &:global(.pf-m-tertiary) { - margin-right: var(--pf-global--spacer--xs); - margin-top: var(--pf-global--spacer--xs); - background-color: var(--pf-global--BackgroundColor--100); - border: none; - border-radius: var(--pf-global--BorderRadius--sm); - box-shadow: var(--pf-global--BoxShadow--sm); - - &:not(:global(.pf-m-disabled)) { - background-color: var(--pf-global--BackgroundColor--100); - } - - &:after { - display: none; - } - - &:hover { - border: none; - box-shadow: var(--pf-global--BoxShadow--md); - } - } -} diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js index 5d9340b2..5aaa7834 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.js @@ -14,7 +14,7 @@ import { } from '@patternfly/react-core' import { AngleLeftIcon } from '@patternfly/react-icons' import { useDispatch } from 'react-redux' -import { backButton } from './TopologySidebar.module.scss' +import { backButton } from './TopologySidebar.module.css' import RoomSidebar from './room/RoomSidebar' import RackSidebar from './rack/RackSidebar' import MachineSidebar from './machine/MachineSidebar' diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.css b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.css new file mode 100644 index 00000000..3853c625 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.css @@ -0,0 +1,35 @@ +/*! + * Copyright (c) 2021 AtLarge Research + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +.backButton:global(.pf-c-button) { + align-self: center; + --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--light-100); + color: var(--pf-global--Color--400); + + --pf-c-button--PaddingRight: var(--pf-global--spacer--sm); + --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm); +} + +.backButton:hover, +.backButton:global(.pf-c-button):focus { + --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100); +} diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss deleted file mode 100644 index 45dc98da..00000000 --- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/TopologySidebar.module.scss +++ /dev/null @@ -1,37 +0,0 @@ -/*! - * Copyright (c) 2021 AtLarge Research - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -.backButton { - &:global(.pf-c-button) { - align-self: center; - --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--light-100); - color: var(--pf-global--Color--400); - - --pf-c-button--PaddingRight: var(--pf-global--spacer--sm); - --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm); - - &:hover, - &:focus { - --pf-c-button--after--BorderColor: var(--pf-global--BorderColor--100); - } - } -} diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js index 8f6ff135..cb7d3b68 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types' import React from 'react' -import { machineListContainer, sidebarContainer } from './RackSidebar.module.scss' +import { machineListContainer, sidebarContainer } from './RackSidebar.module.css' import RackNameContainer from './RackNameContainer' import AddPrefab from './AddPrefab' import DeleteRackContainer from './DeleteRackContainer' diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.css b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.css new file mode 100644 index 00000000..f4c8829f --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.css @@ -0,0 +1,14 @@ +.sidebarContainer { + display: flex; + flex-direction: column; + + height: 100%; +} + +.machineListContainer { + overflow-y: auto; + + flex: 1 0 300px; + + margin-top: 10px; +} diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss deleted file mode 100644 index f4c8829f..00000000 --- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.module.scss +++ /dev/null @@ -1,14 +0,0 @@ -.sidebarContainer { - display: flex; - flex-direction: column; - - height: 100%; -} - -.machineListContainer { - overflow-y: auto; - - flex: 1 0 300px; - - margin-top: 10px; -} -- cgit v1.2.3