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 0676963326d..c01a21e3b34 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 00000000000..223b7f75ff9 --- /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 90aa5859db3..42d64c135d0 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -483,6 +483,73 @@ 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-property: background-color, box-shadow; + transition: all 0.2s ease; + + &[disabled] { + cursor: not-allowed; + opacity: 0.5; + } + + &:not([disabled]) { + &:hover { + background-color: darken($ui-base-color, 10%); + } + + &:focus { + background-color: darken($ui-base-color, 15%); + } + + &:active { + background-color: darken($ui-base-color, 20%); + } + + &.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; + } + } + } + + /* TODO: check RTL? */ + &:first-child { + margin-left: 0; + } +} + .empty-column-indicator, .error-column, .follow_requests-unlocked_explanation {