From f50d3c84e090072c875649d5402f1dec126e47d0 Mon Sep 17 00:00:00 2001 From: Pavel Jankoski Date: Fri, 13 Sep 2024 12:50:33 +0200 Subject: [PATCH] console: Fix console redesign issues --- pkg/webui/components/button/button.styl | 23 +++++++++- pkg/webui/components/button/index.js | 26 ++++++++--- pkg/webui/components/link/index.js | 4 +- pkg/webui/components/link/link.styl | 16 ++++--- pkg/webui/components/map/widget/index.js | 1 - pkg/webui/components/panel/index.js | 44 +++++++++++++------ pkg/webui/components/panel/panel.styl | 7 --- .../blurry-noc-metrics-panel.styl | 3 ++ .../blurry-noc-metrics-panel/index.js | 2 +- .../total-end-devices-upseller-panel/index.js | 2 +- .../total-end-devices-upseller-panel.styl | 3 ++ pkg/webui/styles/variables/tokens.styl | 2 + 12 files changed, 94 insertions(+), 39 deletions(-) diff --git a/pkg/webui/components/button/button.styl b/pkg/webui/components/button/button.styl index 36ac91a3a7..fa2c05702c 100644 --- a/pkg/webui/components/button/button.styl +++ b/pkg/webui/components/button/button.styl @@ -70,7 +70,7 @@ width: 2.5rem height: 2.5rem - &.primary + &.primary:not(.naked) color: var(--c-bg-neutral-min) background-color: var(--c-text-brand-normal) @@ -159,7 +159,7 @@ gradient-border(var(--c-bg-neutral-min-hover), var(--c-gradient-neutral-light-01), var(--c-gradient-neutral-light-02)) box-shadow: none - &.naked + &.naked:not(.primary) color: var(--c-text-neutral-light) &:disabled @@ -177,6 +177,25 @@ &:active background-color: var(--c-bg-neutral-semilight) + &.primary.naked + color: var(--c-bg-brand-normal) + + &:disabled + color: var(--c-bg-brand-normal-disabled) + + &:not(:disabled) + &:hover + background-color: var(--c-bg-brand-semilight) + color: var(--c-bg-brand-normal-hover) + + +focus-visible() + background-color: var(--c-bg-brand-semilight) + color: var(--c-bg-brand-normal-hover) + + &:active + background-color: var(--c-bg-brand-semilight) + color: var(--c-bg-brand-normal-hover) + &.small border-radius: $br.s diff --git a/pkg/webui/components/button/index.js b/pkg/webui/components/button/index.js index 56528969ec..8ec86b9ec4 100644 --- a/pkg/webui/components/button/index.js +++ b/pkg/webui/components/button/index.js @@ -39,7 +39,6 @@ const assembleClassnames = ({ primary, secondary, naked, - grey, icon, small, busy, @@ -57,7 +56,6 @@ const assembleClassnames = ({ [style.secondary]: secondary, [style.naked]: naked, [style.busy]: busy, - [style.grey]: grey, [style.small]: small, [style.withIcon]: icon !== undefined && message, [style.noDropdownIcon]: noDropdownIcon, @@ -68,12 +66,21 @@ const assembleClassnames = ({ }) const buttonChildren = props => { - const { dropdownItems, icon, busy, message, messageValues, noDropdownIcon, children, small } = - props + const { + dropdownItems, + icon, + busy, + message, + messageValues, + noDropdownIcon, + children, + small, + large, + } = props const content = ( <> - {icon && } + {icon && } {message && ( )} @@ -81,7 +88,11 @@ const buttonChildren = props => { {dropdownItems && ( <> {!noDropdownIcon && ( - + )} )} @@ -321,6 +332,8 @@ const commonPropTypes = { dropdownItems: PropTypes.node, /** A flag specifying whether the small styling should applied to the button. */ small: PropTypes.bool, + /** A flag specifying whether the large styling should applied to the button. */ + large: PropTypes.bool, } buttonChildren.propTypes = { @@ -342,6 +355,7 @@ buttonChildren.defaultProps = { messageValues: undefined, children: null, small: false, + large: false, } Button.propTypes = { diff --git a/pkg/webui/components/link/index.js b/pkg/webui/components/link/index.js index a927ab93b1..6749c81a05 100644 --- a/pkg/webui/components/link/index.js +++ b/pkg/webui/components/link/index.js @@ -80,9 +80,9 @@ const Link = React.forwardRef((props, ref) => { if (disabled) { return ( - + ) } diff --git a/pkg/webui/components/link/link.styl b/pkg/webui/components/link/link.styl index 46f386035f..9dc7f93a16 100644 --- a/pkg/webui/components/link/link.styl +++ b/pkg/webui/components/link/link.styl @@ -24,8 +24,8 @@ &.primary color: var(--c-text-brand-normal) - &:active:not(.disabled), - &:hover:not(.disabled) + &:active:not(:disabled), + &:hover:not(:disabled) color: var(--c-text-brand-normal-hover) text-decoration: underline @@ -35,18 +35,22 @@ &.secondary color: var(--c-text-neutral-light) - &:active:not(.disabled), - &:hover:not(.disabled) + &:active:not(:disabled), + &:hover:not(:disabled) color: var(--c-text-neutral-heavy) &.link-visited &:visited color: var(--c-text-neutral-heavy) + &:disabled + cursor: not-allowed !important + background: transparent + border: none + &.primary, &.secondary - &.disabled + &:disabled opacity: .5 - cursor: not-allowed .doc-link align-items: center diff --git a/pkg/webui/components/map/widget/index.js b/pkg/webui/components/map/widget/index.js index 260350cc00..8395326ad8 100644 --- a/pkg/webui/components/map/widget/index.js +++ b/pkg/webui/components/map/widget/index.js @@ -29,7 +29,6 @@ import style from './widget.styl' const Map = ({ id, markers, setupLocationLink, panel }) => { const leafletConfig = { - zoomControl: false, zoom: 10, minZoom: 1, } diff --git a/pkg/webui/components/panel/index.js b/pkg/webui/components/panel/index.js index c5d52abeb4..84ebb27d89 100644 --- a/pkg/webui/components/panel/index.js +++ b/pkg/webui/components/panel/index.js @@ -15,11 +15,13 @@ import React from 'react' import classnames from 'classnames' +import Icon, { IconArrowUpRight } from '@ttn-lw/components/icon' +import Button from '@ttn-lw/components/button' + import Message from '@ttn-lw/lib/components/message' import PropTypes from '@ttn-lw/lib/prop-types' -import Icon from '../icon' import Link from '../link' import Toggle from './toggle' @@ -58,6 +60,7 @@ const Panel = ({ divider, shortCutLinkTarget, shortCutLinkDisabled, + shortCutLinkButton, compact, }) => (
) : ( - shortCutLinkTitle && ( - - → - - ) + <> + {shortCutLinkButton && !shortCutLinkTitle && ( + + )} + {shortCutLinkTitle && !shortCutLinkButton && ( + + → + + )} + )}
)} @@ -111,6 +127,7 @@ Panel.propTypes = { onMouseEnter: PropTypes.func, onMouseLeave: PropTypes.func, onToggleClick: PropTypes.func, + shortCutLinkButton: PropTypes.bool, shortCutLinkDisabled: PropTypes.bool, shortCutLinkPath: PropTypes.string, shortCutLinkTarget: PropTypes.string, @@ -130,7 +147,8 @@ Panel.defaultProps = { compact: false, messageDecorators: undefined, divider: false, - shortCutLinkDisabled: undefined, + shortCutLinkDisabled: false, + shortCutLinkButton: false, shortCutLinkPath: undefined, shortCutLinkTitle: undefined, shortCutLinkTarget: undefined, diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index b06252b8f5..ce8319bc6c 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -72,10 +72,3 @@ color: var(--c-bg-brand-normal) font-variation-settings: 'FILL' 1 -@container panel (max-width: 300px) - .panel-header - flex-direction: column - align-items: flex-start - - .panel-button - align-self: flex-start diff --git a/pkg/webui/console/components/blurry-noc-metrics-panel/blurry-noc-metrics-panel.styl b/pkg/webui/console/components/blurry-noc-metrics-panel/blurry-noc-metrics-panel.styl index 24b91b6842..3a88685aa6 100644 --- a/pkg/webui/console/components/blurry-noc-metrics-panel/blurry-noc-metrics-panel.styl +++ b/pkg/webui/console/components/blurry-noc-metrics-panel/blurry-noc-metrics-panel.styl @@ -18,6 +18,9 @@ flex-direction: column position: relative + & > :first-child + flex-wrap: nowrap + .content display: flex flex-direction: column diff --git a/pkg/webui/console/components/blurry-noc-metrics-panel/index.js b/pkg/webui/console/components/blurry-noc-metrics-panel/index.js index 0a3206e7e6..2962e39bc7 100644 --- a/pkg/webui/console/components/blurry-noc-metrics-panel/index.js +++ b/pkg/webui/console/components/blurry-noc-metrics-panel/index.js @@ -44,7 +44,7 @@ const BlurryNocMetricsPanel = ({ title, icon }) => { { :first-child + flex-wrap: nowrap + .content display: flex flex-direction: column diff --git a/pkg/webui/styles/variables/tokens.styl b/pkg/webui/styles/variables/tokens.styl index e8655d9970..c554e226e0 100644 --- a/pkg/webui/styles/variables/tokens.styl +++ b/pkg/webui/styles/variables/tokens.styl @@ -45,6 +45,7 @@ $tokens = { 'bg-brand-extralight': $c.tts-025, // Background for navigation elements background. 'bg-brand-light': $c.tts-050, // ? + 'bg-brand-semilight': $c.tts-075, // ? 'bg-brand-normal': $c.tts-500, // Background for highlight elements. 'bg-brand-normal-hover': $c.tts-600, // Background for highlight elements on hover. @@ -74,6 +75,7 @@ $tokens = { 'bg-warning-normal-disabled': $c.warning-200, // Background for warning highlight elements on disabled. 'bg-error-normal-disabled': $c.error-200, // Background for error highlight elements on disabled. 'bg-info-normal-disabled': $c.information-200, // Background for info highlight elements on disabled. + 'bg-brand-normal-disabled': $c.tts-200, // Background for brand elements on disabled. // TEXT COLORS // ===========