From 7a0840e41254ae2bf025af7dd712b95b9b89d97b Mon Sep 17 00:00:00 2001 From: Pavel Jankoski Date: Fri, 19 Jan 2024 13:46:49 +0100 Subject: [PATCH 1/2] console: Add utility classes --- config/storybook/preview.js | 8 +- pkg/webui/lib/components/init.js | 2 + pkg/webui/styles/utilities/general.styl | 389 ++++++++++++++++++++++++ pkg/webui/styles/utilities/spacing.styl | 75 +++++ 4 files changed, 471 insertions(+), 3 deletions(-) create mode 100644 pkg/webui/styles/utilities/general.styl create mode 100644 pkg/webui/styles/utilities/spacing.styl diff --git a/config/storybook/preview.js b/config/storybook/preview.js index 4483cb7cff..4978a5b16f 100644 --- a/config/storybook/preview.js +++ b/config/storybook/preview.js @@ -16,14 +16,16 @@ import React from 'react' import { Provider } from 'react-redux' -import { ConnectedRouter } from 'connected-react-router' import { IntlProvider } from 'react-intl' import { createMemoryHistory } from 'history' +import { MemoryRouter } from 'react-router-dom' import messages from '@ttn-lw/locales/en.json' import backendMessages from '@ttn-lw/locales/.backend/en.json' import '../../pkg/webui/styles/main.styl' +import '../../pkg/webui/styles/utilities/general.styl' +import '../../pkg/webui/styles/utilities/spacing.styl' import 'focus-visible/dist/focus-visible' import createStore from './store' import Center from './center' @@ -35,9 +37,9 @@ export const decorators = [ Story => ( - +
{Story()}
- + ), diff --git a/pkg/webui/lib/components/init.js b/pkg/webui/lib/components/init.js index 3b02568b1b..99f2f59349 100644 --- a/pkg/webui/lib/components/init.js +++ b/pkg/webui/lib/components/init.js @@ -39,6 +39,8 @@ import { import Message from './message' import '@ttn-lw/styles/main.styl' +import '@ttn-lw/styles/utilities/general.styl' +import '@ttn-lw/styles/utilities/spacing.styl' const m = defineMessages({ initializing: 'Initializing…', diff --git a/pkg/webui/styles/utilities/general.styl b/pkg/webui/styles/utilities/general.styl new file mode 100644 index 0000000000..3a3f1c6f2d --- /dev/null +++ b/pkg/webui/styles/utilities/general.styl @@ -0,0 +1,389 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +// Grid. +:global + .grid + display: grid + row-gap: $grid-row-gap + width: 100% + + // Prevent column-gaps that are wider than the page width when combined. + column-gap: calc(min($grid-column-gap, 100% / 11)) + + &:not(.auto-columns) + grid-template-columns: repeat(12, minmax(0, 1fr)) + + &.auto-columns + grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr)) + + // Generate basic grid item classes. + for $num in (1..12) + .item-{$num} + grid-column-end: span $num + + // Generate start-column (offset) classes. + for $num in (1..12) + .item-start-{$num} + grid-column-start: $num + + // Generate responsive grid item styles. + for $name, $width in $bp + media-query($width) + for $num in (1..12) + // Generate responsive grid item overrides. + .{$name}\\:item-{$num} + grid-column-end: span $num + + // Generate responsive start-colum (offset) item overrides. + .{$name}\\:item-start-{$num} + grid-column-start: $num + + &--center + align-items: center + + // Content justification. + + .j-center + justify-content: center + + .j-start + justify-content: start + + .j-end + justify-content: end + + .j-between + justify-content: space-between + + .j-around + justify-content: space-around + + .j-evenly + justify-content: space-evenly + + .al-center + align-items: center + + .al-start + align-items: start + + .al-end + align-items: end + + // Responsive justification styles. + for $name, $width in $bp + +media-query($width) + .{$name}\\:j-center + justify-content: center !important + + .{$name}\\:j-start + justify-content: start !important + + .{$name}\\:end + justify-content: end !important + + .{$name}\\:j-between + justify-content: space-between !important + + // Block justification. + + .block-center + margin-left: auto + margin-right: auto + + // Width and height. + + .w-full + width: 100% + + .w-auto + width: auto + + .w-content + width: fit-content + + .h-full + height: 100% + + .h-auto + height: auto + + .h-vh + height: 100vh + + for $num in (1..9) + $percentage = percentage($num / 10) + .w-{$num}0 + width: $percentage + + .h-{$num}0 + width: $percentage + + for $name, $width in $bp + +media-query($width) + .{$name}\\:w-{$num}0 + width: $percentage + + .{$name}\\:h-{$num}0 + height: $percentage + + for $name, $width in $bp + +media-query($width) + .{$name}\\:w-full + width: 100% + + .{$name}\\:w-auto + width: auto + + .{$name}\\:w-content + width: fit-content + + .{$name}\\:h-full + height: 100% + + .{$name}\\:h-auto + height: auto + + // Positioning. + .pos-relative + position: relative + .pos-absolute + position: absolute + .pos-fixed + position: fixed + .pos-static + position: static + // Flex layout. + .direction-column + flex-direction: column + .direction-row + flex-direction: row + .flex-wrap + flex-wrap: wrap + + for $name, $width in $bp + +media-query($width) + .{$name}\\:pos-relative + position: relative + .{$name}\\:pos-absolute + position: absolute + .{$name}\\:pos-fixed + position: fixed + .{$name}\\:pos-static + position: static + .{$name}\\:direction-column + flex-direction: column + .{$name}\\:direction-row + flex-direction: row + .{$name}\\:flex-wrap + flex-wrap: wrap + + // Layout shorthands. + .pos-absolute-stretch + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + + .flex-horizontal + display: flex + justify-content: space-between + align-items: center + + .flex-column + display: flex + justify-content: space-between + flex-direction: column + + .flex-grow + flex-grow: 1 + + .flex-no-grow + flex-grow: 0 + + .flex-shrink + flex-shrink: 1 + + .flex-no-shrink + flex-shrink: 0 + + for $name, $width in $bp + +media-query($width) + .{$name}\\:direction-column + flex-direction: column !important + + .{$name}\\:direction-row + flex-direction: row !important + + // Opacity. + .opacity-0 + opacity: 0 + for $num in (1..10) + $percentage = percentage($num / 10) + .opacity-{$num}0 + opacity: $percentage + + // Miscellaneous. + .overflow-hidden + overflow: hidden + + .overflow-auto + overflow: auto + + .overflow-visible + overflow: visible + + .overflow-scroll + overflow: scroll + + .overflow-x-hidden + overflow-x: hidden + + .overflow-x-auto + overflow-x: auto + + .overflow-x-visible + overflow-x: visible + + .overflow-x-scroll + overflow-x: scroll + + .overflow-y-hidden + overflow-y: hidden + + .overflow-y-auto + overflow-y: auto + + .overflow-y-visible + overflow-y: visible + + .overflow-y-scroll + overflow-y: scroll + + .text-overflow-ellipsis + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + + .cursor-pointer + cursor: pointer + + // Font sizes. + + for $name in $fs + .fs-{$name} + font-size: convert('$fs.' + $name) + + // Font weights. + .fw-normal + font-weight: $fw.normal + + .fw-bold + font-weight: $fw.bold + + .fw-bolder + font-weight: $fw.bolder + + // Text alignments. + + .text-center + text-align: center + + .text-left + text-align: left + + .text-right + text-align: right + + // Text decorations. + + .td-underline + text-decoration: underline + + .td-line-through + text-decoration: line-through + + .td-none + text-decoration: none + + // Cursor. + + .cursor-pointer + cursor: pointer + + .cursor-not-allowed + cursor: not-allowed + + .cursor-grab + cursor: grab + + .cursor-zoom-in + cursor: zoom-in + + .cursor-zoom-out + cursor: zoom-out + + // Responsive typography styles. + for $name, $width in $bp + +media-query($width) + .{$name}\\:text-center + text-align: center !important + + .{$name}\\:text-left + text-align: left !important + + .{$name}\\:text-right + text-align: right !important + + // DISPLAY UTILITIES. + .d-flex + display: flex !important + + .d-inline + display: inline !important + + .d-block + display: block !important + + .d-none + display: none !important + + .d-inline-block + display: inline-block !important + + .d-inline-flex + display: inline-flex !important + + // Responsive display styles. + for $name, $width in $bp + +media-query($width) + .{$name}\\:d-flex + display: flex !important + + .{$name}\\:d-inline + display: inline !important + + .{$name}\\:d-block + display: block !important + + .{$name}\\:d-none + display: none !important + + .{$name}\\:d-inline-block + display: inline-block !important + + .{$name}\\:d-inline-flex + display: inline-flex !important diff --git a/pkg/webui/styles/utilities/spacing.styl b/pkg/webui/styles/utilities/spacing.styl new file mode 100644 index 0000000000..9abe949aab --- /dev/null +++ b/pkg/webui/styles/utilities/spacing.styl @@ -0,0 +1,75 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +:global + // SPACING UTILITIES + + // This logic creates a spacing utility class based on + // scale, type, direction, size, etc. + // eg. `mb-ls-xs`, `md:mt-cs-m`, `m-0`, `p-sides-0`, etc. + create-spacing-classes($prefix, $scale, $type, $direction, $size) + $initial = substr($direction, 0, 1) + $t = substr($type, 0, 1) + $property = () + + // Account for 0 sizes, eg. `mb-0` + if $scale == 0 + $property = 0 + $scalesuffix = '-0' + else + // Compose property using CSS variables. + $property = convert('$' + $scale + '.' + $size + ' !important') + $scalesuffix = '-' + $scale + '-' + $size + // Special case for gap + if $type == 'gap' + if $direction == '' + .gap{$scalesuffix} + gap: $property + // Account for all-sides margins/paddings. + else if $direction == '' + .{$prefix}{$t}{$scalesuffix} + {$type}: $property + // Account for special cases, vert (top/bottom) and sides (left/right). + else if $direction == 'vert' || $direction == 'sides' + .{$prefix}{$t}-{$direction}{$scalesuffix} + if $direction == 'vert' + {$type}-top: $property + {$type}-bottom: $property + else + {$type}-right: $property + {$type}-left: $property + // Default assignment. + else + // Eg. `.xs:mb-cs-s`. + .{$prefix}{$t}{$initial}{$scalesuffix} + // Eg. `margin-bottom: $cs.s)`. + {$type}-{$direction}: $property + + // Iterate through types, scales, directions, sizes and generate classes. + for $type in 'margin' 'padding' 'gap' + for $direction in 'left' 'right' 'top' 'bottom' 'vert' 'sides' '' + create-spacing-classes('', 0, $type, $direction, $size) + for $scale in 'cs' 'ls' + for $size in lookup('$' + $scale) + create-spacing-classes('', $scale, $type, $direction, $size) + + // Generate responsive classes. + for $name, $width in $bp + $prefix = $name + '\:' + +media-query($width) + for $direction in 'left' 'right' 'top' 'bottom' 'vert' 'sides' '' + create-spacing-classes($prefix, 0, $type, $direction, $size) + for $scale in 'cs' 'ls' + for $size in lookup('$' + $scale) + create-spacing-classes($prefix, $scale, $type, $direction, $size) From f70ecaee267ebaa211e0516abf99745c9169e3bd Mon Sep 17 00:00:00 2001 From: Pavel Jankoski Date: Mon, 22 Jan 2024 13:18:40 +0100 Subject: [PATCH 2/2] console: Remove duplicate utility classes --- pkg/webui/styles/main.styl | 48 ++------------------------------------ 1 file changed, 2 insertions(+), 46 deletions(-) diff --git a/pkg/webui/styles/main.styl b/pkg/webui/styles/main.styl index ddc1baf0da..5db802087b 100644 --- a/pkg/webui/styles/main.styl +++ b/pkg/webui/styles/main.styl @@ -73,7 +73,7 @@ code background-color: $c-text-backdrop padding: 0.1rem $cs.xxs color: $tc-black - + summary display: revert cursor: pointer @@ -107,51 +107,7 @@ summary .tc-deep-gray color: $tc-deep-gray - - .p-0 - padding: 0 !important - - .pt-0 - margin-top: 0 !important - - .pb-0 - margin-bottom: 0 !important - - .m-0 - margin: 0 !important - - .mt-0 - margin-top: 0 !important - - .mb-0 - margin-bottom: 0 !important - - for $size in 'xxs' 'xs' 's' 'l' 'm' 'l' 'xl' 'xxl' - .mt-cs-{$size} - margin-top: $cs[$size] !important - - .mb-cs-{$size} - margin-bottom: $cs[$size] !important - - .ml-cs-{$size} - margin-left: $cs[$size] !important - - .mr-cs-{$size} - margin-right: $cs[$size] !important - - for $size in 'xxs' 'xs' 's' 'l' 'm' 'l' 'xl' 'xxl' - .mt-ls-{$size} - margin-top: $ls[$size] !important - - .mb-ls-{$size} - margin-bottom: $ls[$size] !important - - .ml-ls-{$size} - margin-left: $ls[$size] !important - - .mr-ls-{$size} - margin-right: $ls[$size] !important - + .panel-title padding-bottom: $cs.xs border-bottom: 1px solid $c-divider