From 200d7a170806ce530218d4d43292f9bf14455ab7 Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 8 Mar 2021 18:40:34 +0100 Subject: [PATCH 1/3] Change notification settings UI to be more compact Signed-off-by: Claire --- .../components/column_settings.js | 72 +++++++++---------- .../components/pill_bar_button.js | 41 +++++++++++ .../glitch/styles/components/columns.scss | 44 ++++++++++++ 3 files changed, 121 insertions(+), 36 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/notifications/components/pill_bar_button.js diff --git a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js index 067696332..c01a21e3b 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js +++ b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js @@ -5,6 +5,7 @@ import { FormattedMessage } from 'react-intl'; import ClearColumnButton from './clear_column_button'; import GrantPermissionButton from './grant_permission_button'; import SettingToggle from './setting_toggle'; +import PillBarButton from './pill_bar_button'; export default class ColumnSettings extends React.PureComponent { @@ -34,7 +35,6 @@ export default class ColumnSettings extends React.PureComponent { const showPushSettings = pushSettings.get('browserSupport') && pushSettings.get('isSubscribed'); const pushStr = showPushSettings && ; - const pushMeta = showPushSettings && ; return (
@@ -80,77 +80,77 @@ export default class ColumnSettings extends React.PureComponent {
-
- - {showPushSettings && } - - +
+ + {showPushSettings && } + +
-
- - {showPushSettings && } - - +
+ + {showPushSettings && } + +
-
- - {showPushSettings && } - - +
+ + {showPushSettings && } + +
-
- - {showPushSettings && } - - +
+ + {showPushSettings && } + +
-
- - {showPushSettings && } - - +
+ + {showPushSettings && } + +
-
- - {showPushSettings && } - - +
+ + {showPushSettings && } + +
-
- - {showPushSettings && } - - +
+ + {showPushSettings && } + +
diff --git a/app/javascript/flavours/glitch/features/notifications/components/pill_bar_button.js b/app/javascript/flavours/glitch/features/notifications/components/pill_bar_button.js new file mode 100644 index 000000000..223b7f75f --- /dev/null +++ b/app/javascript/flavours/glitch/features/notifications/components/pill_bar_button.js @@ -0,0 +1,41 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import classNames from 'classnames' + +export default class PillBarButton extends React.PureComponent { + + static propTypes = { + prefix: PropTypes.string, + settings: ImmutablePropTypes.map.isRequired, + settingPath: PropTypes.array.isRequired, + label: PropTypes.node.isRequired, + onChange: PropTypes.func.isRequired, + disabled: PropTypes.bool, + } + + onChange = () => { + const { settings, settingPath } = this.props; + this.props.onChange(settingPath, !settings.getIn(settingPath)); + } + + render () { + const { prefix, settings, settingPath, label, disabled } = this.props; + const id = ['setting-pillbar-button', prefix, ...settingPath].filter(Boolean).join('-'); + const active = settings.getIn(settingPath); + + return ( + + ); + } + +} diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 90aa5859d..aaf2c9572 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -483,6 +483,50 @@ margin-right: 5px; } +.column-settings__pillbar { + display: flex; + overflow: hidden; + background-color: transparent; + border: 0; + border-radius: 4px; + margin-bottom: 10px; + align-items: stretch; +} + +.pillbar-button { + border: 0; + color: #fafafa; + padding: 2px; + margin: 0; + margin-left: 2px; + font-size: inherit; + flex: auto; + background-color: $ui-base-color; + transition: background-color 0.2s ease; + + &[disabled] { + cursor: not-allowed; + opacity: 0.5; + } + + &:hover:not([disabled]) { + background-color: darken($ui-base-color, 10%); + } + + &.active { + background-color: $ui-highlight-color; + } + + &.active:hover:not([disabled]) { + background-color: lighten($ui-highlight-color, 10%); + } + + /* TODO: check RTL? */ + &:first-child { + margin-left: 0; + } +} + .empty-column-indicator, .error-column, .follow_requests-unlocked_explanation { From e71f4d468b217504f3cd5b8f8c133f9c0e1869fc Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 8 Mar 2021 20:37:46 +0100 Subject: [PATCH 2/3] Add more button states? Signed-off-by: Claire --- .../glitch/styles/components/columns.scss | 34 ++++++++++++++----- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index aaf2c9572..7d7642a31 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -509,16 +509,34 @@ opacity: 0.5; } - &:hover:not([disabled]) { - background-color: darken($ui-base-color, 10%); - } + &:not([disabled]) { + &:hover { + background-color: darken($ui-base-color, 10%); + } - &.active { - background-color: $ui-highlight-color; - } + &:focus { + background-color: darken($ui-base-color, 15%); + } - &.active:hover:not([disabled]) { - background-color: lighten($ui-highlight-color, 10%); + &:active { + background-color: darken($ui-base-color, 20%); + } + + &.active { + background-color: $ui-highlight-color; + + &:hover { + background-color: lighten($ui-highlight-color, 10%); + } + + &:focus { + background-color: lighten($ui-highlight-color, 15%); + } + + &:active { + background-color: lighten($ui-highlight-color, 20%); + } + } } /* TODO: check RTL? */ From 2bb573d021d53a31efd299763cd55d342d4da307 Mon Sep 17 00:00:00 2001 From: Claire Date: Mon, 8 Mar 2021 20:45:47 +0100 Subject: [PATCH 3/3] Messing around with box-shadow Signed-off-by: Claire --- .../flavours/glitch/styles/components/columns.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 7d7642a31..42d64c135 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -502,7 +502,8 @@ font-size: inherit; flex: auto; background-color: $ui-base-color; - transition: background-color 0.2s ease; + transition-property: background-color, box-shadow; + transition: all 0.2s ease; &[disabled] { cursor: not-allowed; @@ -524,17 +525,21 @@ &.active { background-color: $ui-highlight-color; + box-shadow: inset 0 5px darken($ui-highlight-color, 20%); &:hover { background-color: lighten($ui-highlight-color, 10%); + box-shadow: inset 0 5px darken($ui-highlight-color, 10%); } &:focus { background-color: lighten($ui-highlight-color, 15%); + box-shadow: inset 0 5px darken($ui-highlight-color, 5%); } &:active { background-color: lighten($ui-highlight-color, 20%); + box-shadow: inset 0 5px $ui-highlight-color; } } }