From 8f08be1a48062170c147bc106203a82e9a2b3cf4 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 8 Nov 2023 16:02:55 +0100 Subject: [PATCH 01/78] console: Refactor css --- .../device-title-section.js | 134 ++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 pkg/webui/console/containers/device-title-section/device-title-section.js diff --git a/pkg/webui/console/containers/device-title-section/device-title-section.js b/pkg/webui/console/containers/device-title-section/device-title-section.js new file mode 100644 index 0000000000..8ed1f627f6 --- /dev/null +++ b/pkg/webui/console/containers/device-title-section/device-title-section.js @@ -0,0 +1,134 @@ +// Copyright © 2020 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. + +import React from 'react' +import { defineMessages } from 'react-intl' + +import deviceIcon from '@assets/misc/end-device.svg' + +import Status from '@ttn-lw/components/status' +import Tooltip from '@ttn-lw/components/tooltip' +import DocTooltip from '@ttn-lw/components/tooltip/doc' +import Icon from '@ttn-lw/components/icon' + +import Message from '@ttn-lw/lib/components/message' +import DateTime from '@ttn-lw/lib/components/date-time' + +import EntityTitleSection from '@console/components/entity-title-section' +import LastSeen from '@console/components/last-seen' + +import PropTypes from '@ttn-lw/lib/prop-types' +import sharedMessages from '@ttn-lw/lib/shared-messages' + +const m = defineMessages({ + uplinkDownlinkTooltip: + 'The number of sent uplinks and received downlinks of this end device since the last frame counter reset.', + lastSeenAvailableTooltip: + 'The elapsed time since the network registered the last activity of this end device. This is determined from sent uplinks, confirmed downlinks or (re)join requests.{lineBreak}The last activity was received at {lastActivityInfo}', + noActivityTooltip: + 'The network has not registered any activity from this end device yet. This could mean that your end device has not sent any messages yet or only messages that cannot be handled by the network, e.g. due to a mismatch of EUIs or frequencies.', +}) + +const { Content } = EntityTitleSection + +const DeviceTitleSection = props => { + const { devId, fetching, device, uplinkFrameCount, downlinkFrameCount, lastSeen, children } = + props + const showLastSeen = Boolean(lastSeen) + const showUplinkCount = typeof uplinkFrameCount === 'number' + const showDownlinkCount = typeof downlinkFrameCount === 'number' + const notAvailableElem = + const lastActivityInfo = lastSeen ? : lastSeen + const lineBreak =
+ const bottomBarLeft = ( + <> + }> +
+ + +
+ + {showLastSeen ? ( + + } + > + + + + + ) : ( + } + > + + + + + )} + + ) + + return ( + + + {children} + + ) +} + +DeviceTitleSection.propTypes = { + children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), + devId: PropTypes.string.isRequired, + device: PropTypes.device.isRequired, + downlinkFrameCount: PropTypes.number, + fetching: PropTypes.bool, + lastSeen: PropTypes.string, + uplinkFrameCount: PropTypes.number, +} + +DeviceTitleSection.defaultProps = { + uplinkFrameCount: undefined, + lastSeen: undefined, + children: null, + fetching: false, + downlinkFrameCount: undefined, +} + +export default DeviceTitleSection From 0a345cf5880de72328aa1eaabd345b241341f8d0 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Tue, 21 Nov 2023 12:36:29 +0100 Subject: [PATCH 02/78] console: Update storybook --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index a6684e2fd5..5ab16a0179 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15791,4 +15791,4 @@ yup@^1.2.0: zwitch@^2.0.0: version "2.0.4" resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7" - integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A== + integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A== \ No newline at end of file From 39d2a3967d2c530e0eae2cb43a26cd762b79723f Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 22 Nov 2023 12:50:51 +0100 Subject: [PATCH 03/78] console: Add new button --- pkg/webui/components/button-v2/button.styl | 197 ++++++++++++++++++ pkg/webui/components/button-v2/index.js | 166 ++++++++++++++++ pkg/webui/components/button-v2/story.js | 221 +++++++++++++++++++++ pkg/webui/styles/variables/generic.styl | 8 +- 4 files changed, 589 insertions(+), 3 deletions(-) create mode 100644 pkg/webui/components/button-v2/button.styl create mode 100644 pkg/webui/components/button-v2/index.js create mode 100644 pkg/webui/components/button-v2/story.js diff --git a/pkg/webui/components/button-v2/button.styl b/pkg/webui/components/button-v2/button.styl new file mode 100644 index 0000000000..6a1ceb58ed --- /dev/null +++ b/pkg/webui/components/button-v2/button.styl @@ -0,0 +1,197 @@ +// Copyright © 2022 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. + +.button + reset-button() + display: inline-flex + transition: color $ad.s, background $ad.s, border $ad.s, opacity $ad.s + border-radius: $br.m + outline: 0 + cursor: pointer + justify-content: center + align-items: center + height: $default-input-height + font-size: 1rem + text-decoration: none + padding: 0 $cs.s + white-space: nowrap + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05) + + &.primary + color: white + background-color: $c-active-blue + padding: 0 $cs.s + font-weight: $fw.bold + + &.disabled + background-color: $c-divider-dark + + &:not(.disabled) + &:hover + background-color: hoverize($c-active-blue) + + +focus-visible() + background-color: hoverize($c-active-blue) + + &:active + transition-duration: $ad.xs + background-color: activize($c-active-blue) + + &.naked + transition: background-color color $ad.s + border: 1px solid transparent + background-color: transparent + font-weight: $fw.normal + color: $tc-subtle-gray + + &.disabled + color: transparentify($tc-subtle-gray, #fff, .25) !important + + &:not(.disabled) + &:hover + background-color: $c-backdrop + + +focus-visible() + background-color: $c-backdrop + + &:active + transition-duration: $ad.xs + background-color: $c-backdrop + + &:not(.primary):not(.naked) + border-dark() + border: 1px solid #d3d3d3 + box-sizing: border-box + background-color: #fff + color: $tc-deep-gray + + &:not(:active) + box-shadow: 0px 1px 1px #efefef, inset 0 1px 0 white + + &.disabled + border-color: transparentify(#d3d3d3, #fff, .1) + + &:not(.busy) + color: transparentify($tc-deep-gray, #fff, .25) + + &:not(.disabled) + &:hover + background-color: #fafafa + + +focus-visible() + border: 1px solid $c-active-blue + background-color: #fafafa + + &:active + transition-duration: $ad.xs + background-color: #f6f6f6 + + &.warning + border-color: $tc-warning + color: $tc-warning + + &:not(.disabled) + &:hover + color: hoverize($tc-warning) + + &.danger + border-color: $tc-error + color: $tc-error + + &:not(.disabled) + &:hover + color: hoverize($tc-error) + + &.only-icon + .icon + margin-right: - $cs.xxs + + &.with-icon + .icon + margin-right: $cs.xxs + + &.responsive-label + padding: $cs.xs + + +media-query($bp.xxs) + .icon + margin-left: 0 + margin-right: 0 + + .link-button-message + display: none + + &.error + animation: shake .15s 4 linear + + &.disabled + cursor: default + + &.busy:not(.naked), + &.busy + color: transparent !important + position: relative + svg + center-absolute() + + stop + stop-color: $s + +@keyframes shake + 0% + transform: translate(0) + 25% + transform: translate(.4em) + 75% + transform: translate(-.4em) + 100% + transform: translate(0) + +.content + position: relative + +.spinner + position: absolute + top: 0 + bottom: 0 + left: - $cs.s + right: - $cs.s + +.icon + margin-left: - $cs.xxs + +.button-group + display: flex + flex-direction: column + align-items: stretch + + &.align-start + justify-content: flex-start + + &.align-end + justify-content: flex-end + + &.align-center + justify-content: center + + +media-query-min($bp.s) + flex-direction: row + align-items: center + + .button:not(:last-child) + margin-right: $cs.xs + + +media-query($bp.s) + margin-bottom: $cs.s !important + margin-right: 0 !important diff --git a/pkg/webui/components/button-v2/index.js b/pkg/webui/components/button-v2/index.js new file mode 100644 index 0000000000..6b04d634c4 --- /dev/null +++ b/pkg/webui/components/button-v2/index.js @@ -0,0 +1,166 @@ +// Copyright © 2022 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. + +import React, { useCallback, forwardRef, useMemo } from 'react' +import classnames from 'classnames' +import { useIntl } from 'react-intl' + +import Icon from '@ttn-lw/components/icon' + +import Message from '@ttn-lw/lib/components/message' + +import PropTypes from '@ttn-lw/lib/prop-types' + +import style from './button.styl' + +const filterDataProps = props => + Object.keys(props) + .filter(key => key.startsWith('data-')) + .reduce((acc, key) => { + acc[key] = props[key] + return acc + }, {}) + +const assembleClassnames = ({ message, primary, naked, icon, className }) => + classnames(style.button, className, { + [style.primary]: primary, + [style.naked]: naked, + [style.withIcon]: icon !== undefined && message, + [style.onlyIcon]: icon !== undefined && !message, + }) + +const buttonChildren = props => { + const { icon, message, children } = props + + const content = Boolean(children) ? ( + children + ) : ( + <> + {icon ? : null} + {message ? : null} + + ) + + return <>{content} +} + +const Button = forwardRef((props, ref) => { + const { + autoFocus, + withDowpdown, + name, + type, + value, + title: rawTitle, + onBlur, + onClick, + form, + ...rest + } = props + + const dataProps = useMemo(() => filterDataProps(rest), [rest]) + + const handleClick = useCallback( + evt => { + // Passing a value to the onClick handler is useful for components that + // are rendered multiple times, e.g. in a list. The value can be used to + // identify the component that was clicked. + onClick(evt, value) + }, + [onClick, value], + ) + + const intl = useIntl() + + let title = rawTitle + if (typeof rawTitle === 'object' && rawTitle.id && rawTitle.defaultMessage) { + title = intl.formatMessage(title) + } + + const htmlProps = { autoFocus, name, type, value, title, onBlur, form, ...dataProps } + const buttonClassNames = assembleClassnames(props) + return ( +   +   + + + ) + } + + @bind + toggle() { + this.setState(state => ({ + busy: !state.busy, + })) + } + + @bind + disable() { + this.setState(state => ({ + disabled: !state.disabled, + })) + } + + @bind + error() { + this.setState({ + error: true, + }) + setTimeout( + function () { + this.setState({ + error: false, + }) + }.bind(this), + 1200, + ) + } +} + +export default { + title: 'Button', +} + +export const Default = () => ( +
+
+) + +export const Warning = () => ( +
+
+) + +export const Danger = () => ( +
+
+) + +export const Primary = () => ( +
+
+) + +export const WithIcon = () => ( +
+
+) + +export const Naked = () => ( +
+
+) + +export const NakedWithIcon = () => ( +
+
+) + +export const OnlyIcon = () => ( +
+
+) + +export const CustomContent = () => ( +
+ +
+
+ +
+
+ +
+) + +CustomContent.story = { + name: 'Custom content', +} + +export const Toggle = () => diff --git a/pkg/webui/styles/variables/generic.styl b/pkg/webui/styles/variables/generic.styl index 2adca93e24..8bd5b992f0 100644 --- a/pkg/webui/styles/variables/generic.styl +++ b/pkg/webui/styles/variables/generic.styl @@ -185,9 +185,11 @@ $fwh = { // ## Radius $br = { - 's': 3px, - 'm': 6px, - 'l': 12px + 's': 0.3rem, + 'm': 0.57143rem, + 'l': 0.9rem, + 'xl': 1.25rem, + 'xxl': 3rem } From c64220a4eae4631ccbe2085687e12b718abe34f3 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 22 Nov 2023 14:26:25 +0100 Subject: [PATCH 04/78] console: Add dropdown button --- pkg/webui/components/button-v2/button.styl | 119 ++------------ pkg/webui/components/button-v2/index.js | 5 +- pkg/webui/components/button-v2/story.js | 180 +++------------------ pkg/webui/styles/variables/generic.styl | 1 + 4 files changed, 36 insertions(+), 269 deletions(-) diff --git a/pkg/webui/components/button-v2/button.styl b/pkg/webui/components/button-v2/button.styl index 6a1ceb58ed..4854626002 100644 --- a/pkg/webui/components/button-v2/button.styl +++ b/pkg/webui/components/button-v2/button.styl @@ -21,10 +21,11 @@ cursor: pointer justify-content: center align-items: center - height: $default-input-height + gap: 0.2rem + height: 2.1rem font-size: 1rem text-decoration: none - padding: 0 $cs.s + padding: 0 $cs.xs white-space: nowrap box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05) @@ -50,68 +51,20 @@ &.naked transition: background-color color $ad.s - border: 1px solid transparent - background-color: transparent + border: 1px solid $c-backdrop + background-color: $c.white font-weight: $fw.normal - color: $tc-subtle-gray - - &.disabled - color: transparentify($tc-subtle-gray, #fff, .25) !important - - &:not(.disabled) - &:hover - background-color: $c-backdrop - - +focus-visible() - background-color: $c-backdrop - - &:active - transition-duration: $ad.xs - background-color: $c-backdrop - - &:not(.primary):not(.naked) - border-dark() - border: 1px solid #d3d3d3 - box-sizing: border-box - background-color: #fff color: $tc-deep-gray - &:not(:active) - box-shadow: 0px 1px 1px #efefef, inset 0 1px 0 white - - &.disabled - border-color: transparentify(#d3d3d3, #fff, .1) - - &:not(.busy) - color: transparentify($tc-deep-gray, #fff, .25) - - &:not(.disabled) - &:hover - background-color: #fafafa - - +focus-visible() - border: 1px solid $c-active-blue - background-color: #fafafa - - &:active - transition-duration: $ad.xs - background-color: #f6f6f6 - - &.warning - border-color: $tc-warning - color: $tc-warning + &:hover + background-color: $c-focus - &:not(.disabled) - &:hover - color: hoverize($tc-warning) + +focus-visible() + background-color: $c-focus - &.danger - border-color: $tc-error - color: $tc-error - - &:not(.disabled) - &:hover - color: hoverize($tc-error) + &:active + transition-duration: $ad.xs + background-color: $c-focus &.only-icon .icon @@ -132,22 +85,6 @@ .link-button-message display: none - &.error - animation: shake .15s 4 linear - - &.disabled - cursor: default - - &.busy:not(.naked), - &.busy - color: transparent !important - position: relative - svg - center-absolute() - - stop - stop-color: $s - @keyframes shake 0% transform: translate(0) @@ -161,37 +98,5 @@ .content position: relative -.spinner - position: absolute - top: 0 - bottom: 0 - left: - $cs.s - right: - $cs.s - .icon margin-left: - $cs.xxs - -.button-group - display: flex - flex-direction: column - align-items: stretch - - &.align-start - justify-content: flex-start - - &.align-end - justify-content: flex-end - - &.align-center - justify-content: center - - +media-query-min($bp.s) - flex-direction: row - align-items: center - - .button:not(:last-child) - margin-right: $cs.xs - - +media-query($bp.s) - margin-bottom: $cs.s !important - margin-right: 0 !important diff --git a/pkg/webui/components/button-v2/index.js b/pkg/webui/components/button-v2/index.js index 6b04d634c4..f491c70460 100644 --- a/pkg/webui/components/button-v2/index.js +++ b/pkg/webui/components/button-v2/index.js @@ -41,7 +41,7 @@ const assembleClassnames = ({ message, primary, naked, icon, className }) => }) const buttonChildren = props => { - const { icon, message, children } = props + const { withDropdown, icon, message, children } = props const content = Boolean(children) ? ( children @@ -49,6 +49,7 @@ const buttonChildren = props => { <> {icon ? : null} {message ? : null} + {withDropdown ? : null} ) @@ -58,7 +59,7 @@ const buttonChildren = props => { const Button = forwardRef((props, ref) => { const { autoFocus, - withDowpdown, + withDropdown, name, type, value, diff --git a/pkg/webui/components/button-v2/story.js b/pkg/webui/components/button-v2/story.js index 7925f7c1b3..92bc5af6b3 100644 --- a/pkg/webui/components/button-v2/story.js +++ b/pkg/webui/components/button-v2/story.js @@ -13,209 +13,69 @@ // limitations under the License. import React from 'react' -import bind from 'autobind-decorator' -import { action } from '@storybook/addon-actions' - -import Icon from '@ttn-lw/components/icon' import Button from '.' -class Example extends React.Component { - state = { - busy: false, - error: false, - disabled: false, - } - - render() { - const { busy, disabled, error } = this.state - - return ( -
-   -   - -
- ) - } - - @bind - toggle() { - this.setState(state => ({ - busy: !state.busy, - })) - } - - @bind - disable() { - this.setState(state => ({ - disabled: !state.disabled, - })) - } - - @bind - error() { - this.setState({ - error: true, - }) - setTimeout( - function () { - this.setState({ - error: false, - }) - }.bind(this), - 1200, - ) - } -} - export default { - title: 'Button', + title: 'Button V2', } -export const Default = () => ( +export const Primary = () => (
-
) -export const Warning = () => ( +export const WithIcon = () => (
-
) -export const Danger = () => ( +export const PrimayOnlyIcon = () => (
-
) -export const Primary = () => ( +export const PrimayDropdown = () => (
-
) -export const WithIcon = () => ( +export const PrimayOnlyIconDropdown = () => (
-
) export const Naked = () => (
) export const NakedWithIcon = () => (
) -export const OnlyIcon = () => ( +export const NakedOnlyIcon = () => (
-
) -export const CustomContent = () => ( +export const nakedDropdown = () => (
- -
-
- -
-
- +
) -CustomContent.story = { - name: 'Custom content', -} - -export const Toggle = () => +export const NakedOnlyIconDropdown = () => ( +
+
+) diff --git a/pkg/webui/styles/variables/generic.styl b/pkg/webui/styles/variables/generic.styl index 8bd5b992f0..aeb5d6db63 100644 --- a/pkg/webui/styles/variables/generic.styl +++ b/pkg/webui/styles/variables/generic.styl @@ -68,6 +68,7 @@ $c-subtle-fill = $c.grey-500 $c-backdrop = $c.grey-200 $c-backdrop-lighter = $c.grey-100 $c-text-backdrop = #ECECEC +$c-focus = #FAFAFA // ## Text From 570172aad03b238d0003e79363d024fbee8f4908 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 22 Nov 2023 17:16:28 +0100 Subject: [PATCH 05/78] console: Add new components and colors and change variables --- pkg/webui/components/button-v2/button.styl | 29 +++------- pkg/webui/components/button-v2/index.js | 5 +- pkg/webui/components/button-v2/story.js | 2 +- pkg/webui/components/button/button.styl | 2 +- pkg/webui/components/checkbox/checkbox.styl | 2 +- .../components/code-editor/code-editor.styl | 2 +- pkg/webui/components/input/input.styl | 4 +- pkg/webui/components/modal/story.styl | 2 +- .../components/pagination/pagination.styl | 4 +- .../components/progress-bar/progress-bar.styl | 2 +- .../safe-inspector/safe-inspector.styl | 6 +- pkg/webui/components/select/select.styl | 2 +- pkg/webui/components/tag/tag.styl | 2 +- .../description-list/description-list.styl | 2 +- .../console/components/search-button/index.js | 44 +++++++++++++++ .../search-button/search-button.styl | 36 ++++++++++++ .../console/components/search-button/story.js | 27 +++++++++ .../components/side-menu-link/index.js | 56 +++++++++++++++++++ .../side-menu-link/side-menu-link.styl | 50 +++++++++++++++++ .../components/side-menu-link/story.js | 36 ++++++++++++ ...ation-integrations-webhook-add-choose.styl | 2 +- pkg/webui/styles/variables/generic.styl | 13 +++-- 22 files changed, 285 insertions(+), 45 deletions(-) create mode 100644 pkg/webui/console/components/search-button/index.js create mode 100644 pkg/webui/console/components/search-button/search-button.styl create mode 100644 pkg/webui/console/components/search-button/story.js create mode 100644 pkg/webui/console/components/side-menu-link/index.js create mode 100644 pkg/webui/console/components/side-menu-link/side-menu-link.styl create mode 100644 pkg/webui/console/components/side-menu-link/story.js diff --git a/pkg/webui/components/button-v2/button.styl b/pkg/webui/components/button-v2/button.styl index 4854626002..91a0612d45 100644 --- a/pkg/webui/components/button-v2/button.styl +++ b/pkg/webui/components/button-v2/button.styl @@ -1,4 +1,4 @@ -// Copyright © 2022 The Things Network Foundation, The Things Industries B.V. +// 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. @@ -15,14 +15,15 @@ .button reset-button() display: inline-flex - transition: color $ad.s, background $ad.s, border $ad.s, opacity $ad.s + transition: background $ad.s + transition-timing-function: ease-out border-radius: $br.m outline: 0 cursor: pointer justify-content: center align-items: center gap: 0.2rem - height: 2.1rem + height: 2.3rem font-size: 1rem text-decoration: none padding: 0 $cs.xs @@ -32,8 +33,6 @@ &.primary color: white background-color: $c-active-blue - padding: 0 $cs.s - font-weight: $fw.bold &.disabled background-color: $c-divider-dark @@ -53,7 +52,6 @@ transition: background-color color $ad.s border: 1px solid $c-backdrop background-color: $c.white - font-weight: $fw.normal color: $tc-deep-gray &:hover @@ -67,13 +65,12 @@ background-color: $c-focus &.only-icon - .icon - margin-right: - $cs.xxs + padding: 0 $cs.xs 0 $cs.s - &.with-icon - .icon - margin-right: $cs.xxs + &.with-dropdown + padding: 0 $cs.xxs 0 $cs.xs + &.with-icon &.responsive-label padding: $cs.xs @@ -85,16 +82,6 @@ .link-button-message display: none -@keyframes shake - 0% - transform: translate(0) - 25% - transform: translate(.4em) - 75% - transform: translate(-.4em) - 100% - transform: translate(0) - .content position: relative diff --git a/pkg/webui/components/button-v2/index.js b/pkg/webui/components/button-v2/index.js index f491c70460..3d7a7459af 100644 --- a/pkg/webui/components/button-v2/index.js +++ b/pkg/webui/components/button-v2/index.js @@ -1,4 +1,4 @@ -// Copyright © 2022 The Things Network Foundation, The Things Industries B.V. +// 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. @@ -32,12 +32,13 @@ const filterDataProps = props => return acc }, {}) -const assembleClassnames = ({ message, primary, naked, icon, className }) => +const assembleClassnames = ({ message, primary, naked, icon, withDropdown, className }) => classnames(style.button, className, { [style.primary]: primary, [style.naked]: naked, [style.withIcon]: icon !== undefined && message, [style.onlyIcon]: icon !== undefined && !message, + [style.withDropdown]: withDropdown, }) const buttonChildren = props => { diff --git a/pkg/webui/components/button-v2/story.js b/pkg/webui/components/button-v2/story.js index 92bc5af6b3..441f9708fe 100644 --- a/pkg/webui/components/button-v2/story.js +++ b/pkg/webui/components/button-v2/story.js @@ -1,4 +1,4 @@ -// Copyright © 2019 The Things Network Foundation, The Things Industries B.V. +// 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. diff --git a/pkg/webui/components/button/button.styl b/pkg/webui/components/button/button.styl index c0303deed6..6fad10b0d7 100644 --- a/pkg/webui/components/button/button.styl +++ b/pkg/webui/components/button/button.styl @@ -16,7 +16,7 @@ reset-button() display: inline-flex transition: color $ad.s, background $ad.s, border $ad.s, opacity $ad.s - border-radius: $br.s + border-radius: $br.xs outline: 0 cursor: pointer justify-content: center diff --git a/pkg/webui/components/checkbox/checkbox.styl b/pkg/webui/components/checkbox/checkbox.styl index 734650b8e9..d607628e1e 100644 --- a/pkg/webui/components/checkbox/checkbox.styl +++ b/pkg/webui/components/checkbox/checkbox.styl @@ -70,7 +70,7 @@ .checkmark border-input() - border-radius: $br.s + border-radius: $br.xs position: relative top: 0 left: 0 diff --git a/pkg/webui/components/code-editor/code-editor.styl b/pkg/webui/components/code-editor/code-editor.styl index 343d9e33c8..0eedff7842 100644 --- a/pkg/webui/components/code-editor/code-editor.styl +++ b/pkg/webui/components/code-editor/code-editor.styl @@ -14,7 +14,7 @@ .wrapper border-input() - border-radius: $br.s + border-radius: $br.xs transition: border-color .2s position: relative overflow: hidden diff --git a/pkg/webui/components/input/input.styl b/pkg/webui/components/input/input.styl index b44aa87f1d..dc1da341cb 100644 --- a/pkg/webui/components/input/input.styl +++ b/pkg/webui/components/input/input.styl @@ -20,7 +20,7 @@ input-width-classes() box-sizing: border-box background: white - border-radius: $br.s + border-radius: $br.xs padding: 0 position: relative transition: border-color $ad.s @@ -149,7 +149,7 @@ textarea.input .button max-height: $default-input-height - border-radius: $br.s + border-radius: $br.xs height: 100% .hide-toggle diff --git a/pkg/webui/components/modal/story.styl b/pkg/webui/components/modal/story.styl index 98477cfc29..67c43cdfbd 100644 --- a/pkg/webui/components/modal/story.styl +++ b/pkg/webui/components/modal/story.styl @@ -58,7 +58,7 @@ text-transform: uppercase color: $c-active-blue border: 1px solid $c-active-blue - border-radius: $br.s + border-radius: $br.xs padding: $cs.xxs margin-left: $cs.xxs diff --git a/pkg/webui/components/pagination/pagination.styl b/pkg/webui/components/pagination/pagination.styl index d56ca0c5c4..fd63f6a651 100644 --- a/pkg/webui/components/pagination/pagination.styl +++ b/pkg/webui/components/pagination/pagination.styl @@ -37,12 +37,12 @@ &-navigation-next .link - border-radius: 0 $br.s $br.s 0 + border-radius: 0 $br.xs $br.xs 0 border-dark() &-navigation-prev .link - border-radius: $br.s 0 0 $br.s + border-radius: $br.xs 0 0 $br.xs &-disabled .link diff --git a/pkg/webui/components/progress-bar/progress-bar.styl b/pkg/webui/components/progress-bar/progress-bar.styl index 0f5ab63870..6d232d6dbb 100644 --- a/pkg/webui/components/progress-bar/progress-bar.styl +++ b/pkg/webui/components/progress-bar/progress-bar.styl @@ -19,7 +19,7 @@ width: 100% height: 1rem border: $c-input-border - border-radius: $br.s + border-radius: $br.xs .filler background-color: $c-active-blue diff --git a/pkg/webui/components/safe-inspector/safe-inspector.styl b/pkg/webui/components/safe-inspector/safe-inspector.styl index fff70ea834..7171b7121d 100644 --- a/pkg/webui/components/safe-inspector/safe-inspector.styl +++ b/pkg/webui/components/safe-inspector/safe-inspector.styl @@ -17,7 +17,7 @@ $height-small = 2rem .container border-input() horizontalize() - border-radius: $br.s + border-radius: $br.xs height: $default-input-height justify-content: space-between position: relative @@ -90,7 +90,7 @@ $height-small = 2rem overflow: hidden text-overflow: ellipsis white-space: nowrap - border-radius: $br.s + border-radius: $br.xs &:hover background-color: white // Needs to be here for Safari to work. @@ -113,7 +113,7 @@ $height-small = 2rem .copy-confirm border-input() z-index: $zi.slight - border-radius: $br.s + border-radius: $br.xs position: absolute background-color: white color: $tc-deep-gray diff --git a/pkg/webui/components/select/select.styl b/pkg/webui/components/select/select.styl index d42d295dc2..7ea49108b5 100644 --- a/pkg/webui/components/select/select.styl +++ b/pkg/webui/components/select/select.styl @@ -31,7 +31,7 @@ :global(.select__control) width: 100% min-height: $default-input-height - border-radius: $br.s + border-radius: $br.xs :global(.select__menu) z-index: $zi.dropdown :global(.select__dropdown-indicator) diff --git a/pkg/webui/components/tag/tag.styl b/pkg/webui/components/tag/tag.styl index a96cd39aee..0d7946e3bf 100644 --- a/pkg/webui/components/tag/tag.styl +++ b/pkg/webui/components/tag/tag.styl @@ -18,5 +18,5 @@ background-color: white display: inline-block padding: $cs.xxs $cs.xs - border-radius: $br.s + border-radius: $br.xs color: $tc-deep-gray diff --git a/pkg/webui/console/components/events/previews/shared/description-list/description-list.styl b/pkg/webui/console/components/events/previews/shared/description-list/description-list.styl index 61e88d9938..b7a43dfa7e 100644 --- a/pkg/webui/console/components/events/previews/shared/description-list/description-list.styl +++ b/pkg/webui/console/components/events/previews/shared/description-list/description-list.styl @@ -57,4 +57,4 @@ background-color: white height: 100% padding: 0 $cs.xs - border-radius: $br.s + border-radius: $br.xs diff --git a/pkg/webui/console/components/search-button/index.js b/pkg/webui/console/components/search-button/index.js new file mode 100644 index 0000000000..e2d726544b --- /dev/null +++ b/pkg/webui/console/components/search-button/index.js @@ -0,0 +1,44 @@ +// 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. + +import React, { useCallback } from 'react' + +import Button from '@ttn-lw/components/button-v2' +import Icon from '@ttn-lw/components/icon' + +import Message from '@ttn-lw/lib/components/message' + +import PropTypes from '@ttn-lw/lib/prop-types' + +import style from './search-button.styl' + +const SearchButton = ({ onClick }) => { + const handleClick = useCallback(() => { + onClick() + }, [onClick]) + return ( + + ) +} + +SearchButton.propTypes = { + onClick: PropTypes.func.isRequired, +} + +export default SearchButton diff --git a/pkg/webui/console/components/search-button/search-button.styl b/pkg/webui/console/components/search-button/search-button.styl new file mode 100644 index 0000000000..f567d3e48b --- /dev/null +++ b/pkg/webui/console/components/search-button/search-button.styl @@ -0,0 +1,36 @@ +// 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. + +.search-button + display: flex + border-radius: $br.l + border: 1.132px solid #E6E6E6 + box-shadow: 0px 3.39623px 18.11321px 0px rgba(0, 0, 0, 0.06) + padding: $cs.xxs + gap: 0.4rem + + .icon + color: $c.grey-700 + font-size: $fs.xl + + .backslash-container + height: 1rem + border-radius: $br.s + border: 1px solid $c.grey-200 + padding: $cs.xxs $cs.xs + font-size: $fs.s + + + .backslash + margin: -1px 0 0 diff --git a/pkg/webui/console/components/search-button/story.js b/pkg/webui/console/components/search-button/story.js new file mode 100644 index 0000000000..42892529b6 --- /dev/null +++ b/pkg/webui/console/components/search-button/story.js @@ -0,0 +1,27 @@ +// 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. + +import React from 'react' + +import SearchButton from '.' + +export default { + title: 'Search button', +} + +export const Default = () => ( +
+ +
+) diff --git a/pkg/webui/console/components/side-menu-link/index.js b/pkg/webui/console/components/side-menu-link/index.js new file mode 100644 index 0000000000..ffb3e5a5fa --- /dev/null +++ b/pkg/webui/console/components/side-menu-link/index.js @@ -0,0 +1,56 @@ +// 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. + +import React, { useCallback } from 'react' +import { NavLink } from 'react-router-dom' +import classNames from 'classnames' + +import Icon from '@ttn-lw/components/icon' + +import Message from '@ttn-lw/lib/components/message' + +import PropTypes from '@ttn-lw/lib/prop-types' + +import style from './side-menu-link.styl' + +const MenuLink = ({ icon, title, path, Component, _isRoute }) => { + const className = useCallback( + ({ isActive }) => classNames(style.link, { [style.active]: isActive }), + [], + ) + if (_isRoute) { + return ( + + {icon && }{' '} + + + ) + } + + return React.createElement(Component) +} + +MenuLink.propTypes = { + Component: PropTypes.func.isRequired, + _isRoute: PropTypes.bool.isRequired, + icon: PropTypes.string, + path: PropTypes.string.isRequired, + title: PropTypes.message.isRequired, +} + +MenuLink.defaultProps = { + icon: undefined, +} + +export default MenuLink diff --git a/pkg/webui/console/components/side-menu-link/side-menu-link.styl b/pkg/webui/console/components/side-menu-link/side-menu-link.styl new file mode 100644 index 0000000000..176b548298 --- /dev/null +++ b/pkg/webui/console/components/side-menu-link/side-menu-link.styl @@ -0,0 +1,50 @@ +// 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. + +.link + transition: color $ad.s, background $ad.s + transition-timing-function: ease-out + border-radius: $br.m + text-decoration: none + color: $c.grey-700 + display: flex + align-items: center + gap: 0.5rem + padding: 0.5rem 0.3rem + position: relative + + .icon + color: $c.grey-500 + + &.active + background: $c.tts-primary-150 + color: $tc-deep-gray + font-weight: $fw.bold + + .icon + color: $tc-deep-gray + + &:visited + color: $c.grey-700 + text-decoration: none + + .icon + color: $c.grey-500 + + &:hover + color: $tc-deep-gray + text-decoration: none + + .icon + color: $tc-deep-gray diff --git a/pkg/webui/console/components/side-menu-link/story.js b/pkg/webui/console/components/side-menu-link/story.js new file mode 100644 index 0000000000..d0f2b86390 --- /dev/null +++ b/pkg/webui/console/components/side-menu-link/story.js @@ -0,0 +1,36 @@ +// 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. + +import React from 'react' + +import Link from '.' + +export default { + title: 'Menu Link', +} + +const ExampleComponent = () =>
Example component
+ +export const Default = () => ( +
+ +
+) diff --git a/pkg/webui/console/views/application-integrations-webhook-add-choose/application-integrations-webhook-add-choose.styl b/pkg/webui/console/views/application-integrations-webhook-add-choose/application-integrations-webhook-add-choose.styl index 1a37c64488..22f13e3520 100644 --- a/pkg/webui/console/views/application-integrations-webhook-add-choose/application-integrations-webhook-add-choose.styl +++ b/pkg/webui/console/views/application-integrations-webhook-add-choose/application-integrations-webhook-add-choose.styl @@ -32,7 +32,7 @@ transform: scale(1.0001) // Will fix jiggle in animation. background: white box-shadow: 0 4px 30px 0 rgba(0, 0, 0, .08), inset 0 -1px 0 0 rgba(0, 0, 0, .11) - border-radius: $br.l + border-radius: $br.xl transition: box-shadow .4s cubic-bezier(.250, .010, .070, 1), transform .4s cubic-bezier(.250, .010, .070, 1) +media-query($bp.s) box-shadow: 0 4px 30px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 0 rgba(0, 0, 0, .11) diff --git a/pkg/webui/styles/variables/generic.styl b/pkg/webui/styles/variables/generic.styl index aeb5d6db63..7a3c8f957a 100644 --- a/pkg/webui/styles/variables/generic.styl +++ b/pkg/webui/styles/variables/generic.styl @@ -48,6 +48,7 @@ $c = { 'white': #FFFFFF, // Theme colors 'tts-primary-100': #D2E3FF, + 'tts-primary-150': #EEF3FF, 'tts-primary-200': #A4C6FF, 'tts-primary-300': #78A5FF, 'tts-primary-400': #568AFF, @@ -108,7 +109,7 @@ $tc-subtle-gray = $c.grey-500 $cs = { 'xxs': .25rem, - 'xs': .5rem, + 'xs': .6rem, 's': .75rem, 'm': 1rem, 'l': 1.5rem, @@ -186,11 +187,13 @@ $fwh = { // ## Radius $br = { - 's': 0.3rem, + 'xs': 0.3rem, + 's': 0.4rem, 'm': 0.57143rem, - 'l': 0.9rem, - 'xl': 1.25rem, - 'xxl': 3rem + 'l': 0.71rem, + 'xl': 0.9rem, + 'xxl': 1.25rem, + 'xl3': 3rem } From 75ee0c70f361274ae5c4289d68807d04f900693e Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Thu, 23 Nov 2023 12:29:09 +0100 Subject: [PATCH 06/78] console: Fix storybook --- pkg/webui/components/navigation/side/index.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/pkg/webui/components/navigation/side/index.js b/pkg/webui/components/navigation/side/index.js index 77bafa2edc..836d61ad30 100644 --- a/pkg/webui/components/navigation/side/index.js +++ b/pkg/webui/components/navigation/side/index.js @@ -158,7 +158,14 @@ const SideNavigation = ({