From 3b080012acf44eca23043009f50c8f00fc6d551a Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Thu, 5 Aug 2021 16:42:37 +0800 Subject: [PATCH] Styles for new Settings Page --- ui/component/settingsRow/index.js | 2 + ui/component/settingsRow/view.jsx | 36 +++++++++++++ ui/scss/component/section.scss | 90 ++++++++++++++++++++++++++++++- 3 files changed, 127 insertions(+), 1 deletion(-) create mode 100644 ui/component/settingsRow/index.js create mode 100644 ui/component/settingsRow/view.jsx diff --git a/ui/component/settingsRow/index.js b/ui/component/settingsRow/index.js new file mode 100644 index 000000000..a8d6ab489 --- /dev/null +++ b/ui/component/settingsRow/index.js @@ -0,0 +1,2 @@ +import SettingsRow from './view'; +export default SettingsRow; diff --git a/ui/component/settingsRow/view.jsx b/ui/component/settingsRow/view.jsx new file mode 100644 index 000000000..a59b7e52b --- /dev/null +++ b/ui/component/settingsRow/view.jsx @@ -0,0 +1,36 @@ +// @flow +import React from 'react'; +import classnames from 'classnames'; + +type Props = { + title: string, + subtitle?: string, + multirow?: boolean, // Displays the Value widget(s) below the Label instead of on the right. + useVerticalSeparator?: boolean, // Show a separator line between Label and Value. Useful when there are multiple Values. + children?: React$Node, +}; + +export default function SettingsRow(props: Props) { + const { title, subtitle, multirow, useVerticalSeparator, children } = props; + + return ( +
+
+

{title}

+ {subtitle &&

{subtitle}

} +
+
+ {children && children} +
+
+ ); +} diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss index 2c6fd46f8..a45b88a7e 100644 --- a/ui/scss/component/section.scss +++ b/ui/scss/component/section.scss @@ -140,7 +140,7 @@ margin-right: var(--spacing-s); } - @media (max-width: $breakpoint-small) { + @media (max-width: $breakpoint-medium) { flex-wrap: wrap; > * { @@ -203,3 +203,91 @@ margin-right: 10px; } } + +.settings__row { + &:first-child, + &:only-child { + border-top: none; + } +} + +.settings__row--title { + min-width: 100%; + align-self: flex-start; + + @media (min-width: $breakpoint-small) { + min-width: 60%; + max-width: 60%; + } +} + +.settings__row--subtitle { + @extend .section__subtitle; + font-size: var(--font-small); + margin-top: calc(var(--spacing-xxs) / 2); +} + +.settings__row--value { + width: 100%; + + fieldset-section:not(:only-child) { + margin-top: var(--spacing-s); + } + + fieldset-section.radio { + margin-top: var(--spacing-s); + } + + fieldset-group { + margin-top: var(--spacing-m); + } + + .tags--remove { + margin-bottom: 0; + } + + .tags__input-wrapper { + .tag__input { + height: unset; + max-width: unset; + } + } + + .form-field--price-amount { + max-width: unset; + } + + @media (min-width: $breakpoint-medium) { + width: 40%; + margin-left: var(--spacing-m); + padding-left: var(--spacing-m); + + .button, + .checkbox { + &:only-child { + float: right; + } + } + + input { + align-self: flex-end; + } + } +} + +.settings__row--value--multirow { + @media (min-width: $breakpoint-medium) { + width: 80%; + margin-top: var(--spacing-l); + + input { + align-self: flex-start; + } + } +} + +.settings__row--value--vertical-separator { + @media (min-width: $breakpoint-medium) { + border-left: 1px solid var(--color-border); + } +}