From 200d7a170806ce530218d4d43292f9bf14455ab7 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
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 <claire.github-309c@sitedethib.com>
---
.../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 0676963326..c01a21e3b3 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 && <FormattedMessage id='notifications.column_settings.push' defaultMessage='Push notifications' />;
- const pushMeta = showPushSettings && <FormattedMessage id='notifications.column_settings.push_meta' defaultMessage='This device' />;
return (
<div>
@@ -80,77 +80,77 @@ export default class ColumnSettings extends React.PureComponent {
<div role='group' aria-labelledby='notifications-follow'>
<span id='notifications-follow' className='column-settings__section'><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
- <div className='column-settings__row'>
- <SettingToggle disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'follow']} onChange={onChange} label={alertStr} />
- {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'follow']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />}
- <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'follow']} onChange={onChange} label={showStr} />
- <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'follow']} onChange={onChange} label={soundStr} />
+ <div className='column-settings__pillbar'>
+ <PillBarButton disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'follow']} onChange={onChange} label={alertStr} />
+ {showPushSettings && <PillBarButton prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'follow']} onChange={this.onPushChange} label={pushStr} />}
+ <PillBarButton prefix='notifications' settings={settings} settingPath={['shows', 'follow']} onChange={onChange} label={showStr} />
+ <PillBarButton prefix='notifications' settings={settings} settingPath={['sounds', 'follow']} onChange={onChange} label={soundStr} />
</div>
</div>
<div role='group' aria-labelledby='notifications-follow-request'>
<span id='notifications-follow-request' className='column-settings__section'><FormattedMessage id='notifications.column_settings.follow_request' defaultMessage='New follow requests:' /></span>
- <div className='column-settings__row'>
- <SettingToggle disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'follow_request']} onChange={onChange} label={alertStr} />
- {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'follow_request']} onChange={this.onPushChange} label={pushStr} />}
- <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'follow_request']} onChange={onChange} label={showStr} />
- <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'follow_request']} onChange={onChange} label={soundStr} />
+ <div className='column-settings__pillbar'>
+ <PillBarButton disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'follow_request']} onChange={onChange} label={alertStr} />
+ {showPushSettings && <PillBarButton prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'follow_request']} onChange={this.onPushChange} label={pushStr} />}
+ <PillBarButton prefix='notifications' settings={settings} settingPath={['shows', 'follow_request']} onChange={onChange} label={showStr} />
+ <PillBarButton prefix='notifications' settings={settings} settingPath={['sounds', 'follow_request']} onChange={onChange} label={soundStr} />
</div>
</div>
<div role='group' aria-labelledby='notifications-favourite'>
<span id='notifications-favourite' className='column-settings__section'><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
- <div className='column-settings__row'>
- <SettingToggle disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'favourite']} onChange={onChange} label={alertStr} />
- {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'favourite']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />}
- <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'favourite']} onChange={onChange} label={showStr} />
- <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'favourite']} onChange={onChange} label={soundStr} />
+ <div className='column-settings__pillbar'>
+ <PillBarButton disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'favourite']} onChange={onChange} label={alertStr} />
+ {showPushSettings && <PillBarButton prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'favourite']} onChange={this.onPushChange} label={pushStr} />}
+ <PillBarButton prefix='notifications' settings={settings} settingPath={['shows', 'favourite']} onChange={onChange} label={showStr} />
+ <PillBarButton prefix='notifications' settings={settings} settingPath={['sounds', 'favourite']} onChange={onChange} label={soundStr} />
</div>
</div>
<div role='group' aria-labelledby='notifications-mention'>
<span id='notifications-mention' className='column-settings__section'><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>
- <div className='column-settings__row'>
- <SettingToggle disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'mention']} onChange={onChange} label={alertStr} />
- {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'mention']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />}
- <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'mention']} onChange={onChange} label={showStr} />
- <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'mention']} onChange={onChange} label={soundStr} />
+ <div className='column-settings__pillbar'>
+ <PillBarButton disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'mention']} onChange={onChange} label={alertStr} />
+ {showPushSettings && <PillBarButton prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'mention']} onChange={this.onPushChange} label={pushStr} />}
+ <PillBarButton prefix='notifications' settings={settings} settingPath={['shows', 'mention']} onChange={onChange} label={showStr} />
+ <PillBarButton prefix='notifications' settings={settings} settingPath={['sounds', 'mention']} onChange={onChange} label={soundStr} />
</div>
</div>
<div role='group' aria-labelledby='notifications-reblog'>
<span id='notifications-reblog' className='column-settings__section'><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span>
- <div className='column-settings__row'>
- <SettingToggle disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'reblog']} onChange={onChange} label={alertStr} />
- {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'reblog']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />}
- <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'reblog']} onChange={onChange} label={showStr} />
- <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'reblog']} onChange={onChange} label={soundStr} />
+ <div className='column-settings__pillbar'>
+ <PillBarButton disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'reblog']} onChange={onChange} label={alertStr} />
+ {showPushSettings && <PillBarButton prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'reblog']} onChange={this.onPushChange} label={pushStr} />}
+ <PillBarButton prefix='notifications' settings={settings} settingPath={['shows', 'reblog']} onChange={onChange} label={showStr} />
+ <PillBarButton prefix='notifications' settings={settings} settingPath={['sounds', 'reblog']} onChange={onChange} label={soundStr} />
</div>
</div>
<div role='group' aria-labelledby='notifications-poll'>
<span id='notifications-poll' className='column-settings__section'><FormattedMessage id='notifications.column_settings.poll' defaultMessage='Poll results:' /></span>
- <div className='column-settings__row'>
- <SettingToggle disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'poll']} onChange={onChange} label={alertStr} />
- {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'poll']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />}
- <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'poll']} onChange={onChange} label={showStr} />
- <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'poll']} onChange={onChange} label={soundStr} />
+ <div className='column-settings__pillbar'>
+ <PillBarButton disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'poll']} onChange={onChange} label={alertStr} />
+ {showPushSettings && <PillBarButton prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'poll']} onChange={this.onPushChange} label={pushStr} />}
+ <PillBarButton prefix='notifications' settings={settings} settingPath={['shows', 'poll']} onChange={onChange} label={showStr} />
+ <PillBarButton prefix='notifications' settings={settings} settingPath={['sounds', 'poll']} onChange={onChange} label={soundStr} />
</div>
</div>
<div role='group' aria-labelledby='notifications-status'>
<span id='notifications-status' className='column-settings__section'><FormattedMessage id='notifications.column_settings.status' defaultMessage='New toots:' /></span>
- <div className='column-settings__row'>
- <SettingToggle disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'status']} onChange={onChange} label={alertStr} />
- {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'status']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />}
- <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'status']} onChange={onChange} label={showStr} />
- <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'status']} onChange={onChange} label={soundStr} />
+ <div className='column-settings__pillbar'>
+ <PillBarButton disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'status']} onChange={onChange} label={alertStr} />
+ {showPushSettings && <PillBarButton prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'status']} onChange={this.onPushChange} label={pushStr} />}
+ <PillBarButton prefix='notifications' settings={settings} settingPath={['shows', 'status']} onChange={onChange} label={showStr} />
+ <PillBarButton prefix='notifications' settings={settings} settingPath={['sounds', 'status']} onChange={onChange} label={soundStr} />
</div>
</div>
</div>
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 0000000000..223b7f75ff
--- /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 (
+ <button
+ key={id}
+ id={id}
+ className={classNames('pillbar-button', { active })}
+ disabled={disabled}
+ onClick={this.onChange}
+ aria-pressed={active}
+ >
+ {label}
+ </button>
+ );
+ }
+
+}
diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss
index 90aa5859db..aaf2c9572d 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 <claire.github-309c@sitedethib.com>
Date: Mon, 8 Mar 2021 20:37:46 +0100
Subject: [PATCH 2/3] Add more button states?
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
.../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 aaf2c9572d..7d7642a311 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 <claire.github-309c@sitedethib.com>
Date: Mon, 8 Mar 2021 20:45:47 +0100
Subject: [PATCH 3/3] Messing around with box-shadow
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
.../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 7d7642a311..42d64c135d 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;
}
}
}