From d2352246920800e491466d84b0146feb4d1d791f Mon Sep 17 00:00:00 2001 From: kibigo! Date: Wed, 19 Jul 2017 19:54:02 -0700 Subject: Restructured local settings internals --- .../glitch/components/local_settings/page/index.js | 175 +++++++++++++++++++++ 1 file changed, 175 insertions(+) create mode 100644 app/javascript/glitch/components/local_settings/page/index.js (limited to 'app/javascript/glitch/components/local_settings/page/index.js') diff --git a/app/javascript/glitch/components/local_settings/page/index.js b/app/javascript/glitch/components/local_settings/page/index.js new file mode 100644 index 000000000..8635b604f --- /dev/null +++ b/app/javascript/glitch/components/local_settings/page/index.js @@ -0,0 +1,175 @@ +// Package imports +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; + +// Our imports +import LocalSettingsPageItem from './item'; + +// Stylesheet imports +import './style'; + +// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + +const messages = defineMessages({ + layout_auto: { id: 'layout.auto', defaultMessage: 'Auto' }, + layout_desktop: { id: 'layout.desktop', defaultMessage: 'Desktop' }, + layout_mobile: { id: 'layout.single', defaultMessage: 'Mobile' }, +}); + +@injectIntl +export default class LocalSettingsPage extends React.PureComponent { + + static propTypes = { + index : PropTypes.number, + intl : PropTypes.object.isRequired, + onChange : PropTypes.func.isRequired, + settings : ImmutablePropTypes.map.isRequired, + }; + + pages = [ + ({ intl, onChange, settings }) => ( +
+

+ + + + + + +
+ ), + ({ onChange, settings }) => ( +
+

+ + + +
+

+ + + + + + + + + + + + + + + +
+
+

+ + + + + + +
+
+ ), + ({ onChange, settings }) => ( +
+

+ + + + + + +
+ ), + ]; + + render () { + const { pages } = this; + const { index, intl, onChange, settings } = this.props; + const CurrentPage = pages[index] || pages[0]; + + return ; + } + +} -- cgit From 74a0cc6a119f64ff368945523260408323b364e8 Mon Sep 17 00:00:00 2001 From: Ondřej Hruška Date: Sat, 22 Jul 2017 19:51:34 +0200 Subject: Added settings toggle to move the navbar at the bottom in mobile view (#93) --- app/javascript/glitch/components/local_settings/page/index.js | 8 ++++++++ app/javascript/glitch/locales/en.json | 1 + app/javascript/glitch/reducers/local_settings.js | 1 + app/javascript/mastodon/features/ui/index.js | 7 +++++-- 4 files changed, 15 insertions(+), 2 deletions(-) (limited to 'app/javascript/glitch/components/local_settings/page/index.js') diff --git a/app/javascript/glitch/components/local_settings/page/index.js b/app/javascript/glitch/components/local_settings/page/index.js index 8635b604f..cb041c0b8 100644 --- a/app/javascript/glitch/components/local_settings/page/index.js +++ b/app/javascript/glitch/components/local_settings/page/index.js @@ -53,6 +53,14 @@ export default class LocalSettingsPage extends React.PureComponent { > + + + ), ({ onChange, settings }) => ( diff --git a/app/javascript/glitch/locales/en.json b/app/javascript/glitch/locales/en.json index d202d9c33..21616f556 100644 --- a/app/javascript/glitch/locales/en.json +++ b/app/javascript/glitch/locales/en.json @@ -26,6 +26,7 @@ "settings.media_fullwidth": "Full-width media previews", "settings.preferences": "User preferences", "settings.wide_view": "Wide view (Desktop mode only)", + "settings.navbar_under": "Navbar at the bottom (Mobile only)", "status.collapse": "Collapse", "status.uncollapse": "Uncollapse", "notification.markForDeletion": "Mark for deletion" diff --git a/app/javascript/glitch/reducers/local_settings.js b/app/javascript/glitch/reducers/local_settings.js index 35a8e065b..386d59ceb 100644 --- a/app/javascript/glitch/reducers/local_settings.js +++ b/app/javascript/glitch/reducers/local_settings.js @@ -51,6 +51,7 @@ These are only used if no previously-saved values exist. const initialState = ImmutableMap({ layout : 'auto', stretch : true, + navbar_under : false, collapsed : ImmutableMap({ enabled : true, auto : ImmutableMap({ diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 1edc7504c..bda32781c 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -45,6 +45,7 @@ const mapStateToProps = state => ({ systemFontUi: state.getIn(['meta', 'system_font_ui']), layout: state.getIn(['local_settings', 'layout']), isWide: state.getIn(['local_settings', 'stretch']), + navbarUnder: state.getIn(['local_settings', 'navbar_under']), isComposing: state.getIn(['compose', 'is_composing']), }); @@ -57,6 +58,7 @@ export default class UI extends React.PureComponent { layout: PropTypes.string, isWide: PropTypes.bool, systemFontUi: PropTypes.bool, + navbarUnder: PropTypes.bool, isComposing: PropTypes.bool, }; @@ -167,7 +169,7 @@ export default class UI extends React.PureComponent { render () { const { width, draggingOver } = this.state; - const { children, layout, isWide } = this.props; + const { children, layout, isWide, navbarUnder } = this.props; const columnsClass = layout => { switch (layout) { @@ -187,7 +189,7 @@ export default class UI extends React.PureComponent { return (
- + {navbarUnder ? null : ()} @@ -218,6 +220,7 @@ export default class UI extends React.PureComponent { + {navbarUnder ? () : null} -- cgit From 67f82775268f57be5506031e65e3155a2618bef9 Mon Sep 17 00:00:00 2001 From: Ondřej Hruška Date: Sat, 23 Sep 2017 23:11:02 +0200 Subject: Add secondary toot button (opt-in) (#153) Add secondary toot button + other toot button enhancements. Squashing so it's easy to revert if needed. --- .../glitch/components/local_settings/page/index.js | 19 +++++++ app/javascript/glitch/reducers/local_settings.js | 1 + .../features/compose/components/compose_form.js | 66 ++++++++++++++++++++-- .../compose/containers/compose_form_container.js | 7 ++- app/javascript/styles/components.scss | 18 ++++++ 5 files changed, 104 insertions(+), 7 deletions(-) (limited to 'app/javascript/glitch/components/local_settings/page/index.js') diff --git a/app/javascript/glitch/components/local_settings/page/index.js b/app/javascript/glitch/components/local_settings/page/index.js index cb041c0b8..338d86333 100644 --- a/app/javascript/glitch/components/local_settings/page/index.js +++ b/app/javascript/glitch/components/local_settings/page/index.js @@ -16,6 +16,7 @@ const messages = defineMessages({ layout_auto: { id: 'layout.auto', defaultMessage: 'Auto' }, layout_desktop: { id: 'layout.desktop', defaultMessage: 'Desktop' }, layout_mobile: { id: 'layout.single', defaultMessage: 'Mobile' }, + side_arm_none: { id: 'settings.side_arm.none', defaultMessage: 'None' }, }); @injectIntl @@ -61,6 +62,24 @@ export default class LocalSettingsPage extends React.PureComponent { > +
+

+ + + +
), ({ onChange, settings }) => ( diff --git a/app/javascript/glitch/reducers/local_settings.js b/app/javascript/glitch/reducers/local_settings.js index 386d59ceb..813e130ca 100644 --- a/app/javascript/glitch/reducers/local_settings.js +++ b/app/javascript/glitch/reducers/local_settings.js @@ -52,6 +52,7 @@ const initialState = ImmutableMap({ layout : 'auto', stretch : true, navbar_under : false, + side_arm : 'none', collapsed : ImmutableMap({ enabled : true, auto : ImmutableMap({ diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index f6b5cf0be..1d60ffe83 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -51,11 +51,13 @@ export default class ComposeForm extends ImmutablePureComponent { onSubmit: PropTypes.func.isRequired, onClearSuggestions: PropTypes.func.isRequired, onFetchSuggestions: PropTypes.func.isRequired, + onPrivacyChange: PropTypes.func.isRequired, onSuggestionSelected: PropTypes.func.isRequired, onChangeSpoilerText: PropTypes.func.isRequired, onPaste: PropTypes.func.isRequired, onPickEmoji: PropTypes.func.isRequired, showSearch: PropTypes.bool, + settings : ImmutablePropTypes.map.isRequired, }; static defaultProps = { @@ -72,6 +74,11 @@ export default class ComposeForm extends ImmutablePureComponent { } } + handleSubmit2 = () => { + this.props.onPrivacyChange(this.props.settings.get('side_arm')); + this.handleSubmit(); + } + handleSubmit = () => { if (this.props.text !== this.autosuggestTextarea.textarea.value) { // Something changed the text inside the textarea (e.g. browser extensions like Grammarly) @@ -157,13 +164,42 @@ export default class ComposeForm extends ImmutablePureComponent { const maybeEye = (this.props.advanced_options && this.props.advanced_options.do_not_federate) ? ' 👁️' : ''; const text = [this.props.spoiler_text, countableText(this.props.text), maybeEye].join(''); + const sideArmVisibility = this.props.settings.get('side_arm'); + let showSideArm = sideArmVisibility !== 'none'; + let publishText = ''; - if (this.props.privacy === 'private' || this.props.privacy === 'direct') { - publishText = {intl.formatMessage(messages.publish)}; - } else { - publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish); - } + const privacyIcons = { + none: '', + public: 'globe', + unlisted: 'unlock-alt', + private: 'lock', + direct: 'envelope', + }; + + publishText = ( + + { + (this.props.settings.get('stretch') || !showSideArm) ? + : + '' + } + {intl.formatMessage(messages.publish)} + + ); + + // side-arm + let publishText2 = ( + + ); + + const submitDisabled = disabled || this.props.is_uploading || length(text) > 500 || (text.length !== 0 && text.trim().length === 0); return (
@@ -215,7 +251,25 @@ export default class ComposeForm extends ImmutablePureComponent {
-
+
+ { + showSideArm ? +
diff --git a/app/javascript/mastodon/features/compose/containers/compose_form_container.js b/app/javascript/mastodon/features/compose/containers/compose_form_container.js index 1911edbf9..4e8cd2279 100644 --- a/app/javascript/mastodon/features/compose/containers/compose_form_container.js +++ b/app/javascript/mastodon/features/compose/containers/compose_form_container.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import ComposeForm from '../components/compose_form'; -import { uploadCompose } from '../../../actions/compose'; +import { changeComposeVisibility, uploadCompose } from '../../../actions/compose'; import { changeCompose, submitCompose, @@ -25,6 +25,7 @@ const mapStateToProps = state => ({ is_uploading: state.getIn(['compose', 'is_uploading']), me: state.getIn(['compose', 'me']), showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']), + settings: state.get('local_settings'), }); const mapDispatchToProps = (dispatch) => ({ @@ -33,6 +34,10 @@ const mapDispatchToProps = (dispatch) => ({ dispatch(changeCompose(text)); }, + onPrivacyChange (value) { + dispatch(changeComposeVisibility(value)); + }, + onSubmit () { dispatch(submitCompose()); }, diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index f087adf9c..2639fd41e 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -421,6 +421,24 @@ .compose-form__publish-button-wrapper { overflow: hidden; padding-top: 10px; + white-space: nowrap; + display: flex; + + button { + text-overflow: unset; + } +} + +.compose-form__publish__side-arm { + padding: 0 !important; + width: 4em; + text-align: center; + opacity: .8; + margin-right: 2px; +} + +.compose-form__publish__primary { + padding: 0 10px !important; } .emojione { -- cgit From 37ff061d9bf0a91da6580960be01e3c6bc5e5c4c Mon Sep 17 00:00:00 2001 From: Ondřej Hruška Date: Mon, 16 Oct 2017 22:24:44 +0200 Subject: satisfy eslint and jest --- app/javascript/glitch/components/account/header.js | 2 +- app/javascript/glitch/components/local_settings/container.js | 4 ++-- app/javascript/glitch/components/local_settings/index.js | 2 +- app/javascript/glitch/components/local_settings/navigation/index.js | 2 +- .../glitch/components/local_settings/navigation/item/index.js | 2 +- app/javascript/glitch/components/local_settings/page/index.js | 2 +- app/javascript/glitch/components/local_settings/page/item/index.js | 2 +- .../mastodon/components/__tests__/__snapshots__/avatar-test.js.snap | 2 ++ .../components/__tests__/__snapshots__/avatar_overlay-test.js.snap | 2 ++ app/javascript/packs/application.js | 3 ++- app/javascript/themes/spin/pack.js | 4 ++-- 11 files changed, 16 insertions(+), 11 deletions(-) (limited to 'app/javascript/glitch/components/local_settings/page/index.js') diff --git a/app/javascript/glitch/components/account/header.js b/app/javascript/glitch/components/account/header.js index 6359c1775..f4a413aa3 100644 --- a/app/javascript/glitch/components/account/header.js +++ b/app/javascript/glitch/components/account/header.js @@ -48,7 +48,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; // Mastodon imports // -import emojify from 'mastodon/features/emoji/emoji'; +import emojify from '../../../mastodon/features/emoji/emoji'; import IconButton from '../../../mastodon/components/icon_button'; import Avatar from '../../../mastodon/components/avatar'; diff --git a/app/javascript/glitch/components/local_settings/container.js b/app/javascript/glitch/components/local_settings/container.js index 6c202a4e7..4569db99f 100644 --- a/app/javascript/glitch/components/local_settings/container.js +++ b/app/javascript/glitch/components/local_settings/container.js @@ -2,10 +2,10 @@ import { connect } from 'react-redux'; // Mastodon imports // -import { closeModal } from 'mastodon/actions/modal'; +import { closeModal } from '../../../mastodon/actions/modal'; // Our imports // -import { changeLocalSetting } from 'glitch/actions/local_settings'; +import { changeLocalSetting } from '../../../glitch/actions/local_settings'; import LocalSettings from '.'; const mapStateToProps = state => ({ diff --git a/app/javascript/glitch/components/local_settings/index.js b/app/javascript/glitch/components/local_settings/index.js index 7f7b93de4..ef711229a 100644 --- a/app/javascript/glitch/components/local_settings/index.js +++ b/app/javascript/glitch/components/local_settings/index.js @@ -8,7 +8,7 @@ import LocalSettingsPage from './page'; import LocalSettingsNavigation from './navigation'; // Stylesheet imports -import './style'; +import './style.scss'; export default class LocalSettings extends React.PureComponent { diff --git a/app/javascript/glitch/components/local_settings/navigation/index.js b/app/javascript/glitch/components/local_settings/navigation/index.js index 1f72cc824..fa35e83c7 100644 --- a/app/javascript/glitch/components/local_settings/navigation/index.js +++ b/app/javascript/glitch/components/local_settings/navigation/index.js @@ -7,7 +7,7 @@ import { injectIntl, defineMessages } from 'react-intl'; import LocalSettingsNavigationItem from './item'; // Stylesheet imports -import './style'; +import './style.scss'; // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * diff --git a/app/javascript/glitch/components/local_settings/navigation/item/index.js b/app/javascript/glitch/components/local_settings/navigation/item/index.js index 1676aa404..a352d5fb2 100644 --- a/app/javascript/glitch/components/local_settings/navigation/item/index.js +++ b/app/javascript/glitch/components/local_settings/navigation/item/index.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; // Stylesheet imports -import './style'; +import './style.scss'; // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * diff --git a/app/javascript/glitch/components/local_settings/page/index.js b/app/javascript/glitch/components/local_settings/page/index.js index 338d86333..366c113c0 100644 --- a/app/javascript/glitch/components/local_settings/page/index.js +++ b/app/javascript/glitch/components/local_settings/page/index.js @@ -8,7 +8,7 @@ import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; import LocalSettingsPageItem from './item'; // Stylesheet imports -import './style'; +import './style.scss'; // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * diff --git a/app/javascript/glitch/components/local_settings/page/item/index.js b/app/javascript/glitch/components/local_settings/page/item/index.js index 326c7eeb0..37e28c084 100644 --- a/app/javascript/glitch/components/local_settings/page/item/index.js +++ b/app/javascript/glitch/components/local_settings/page/item/index.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; // Stylesheet imports -import './style'; +import './style.scss'; // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap index 76ab3374a..4005c860f 100644 --- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap +++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap @@ -3,6 +3,7 @@ exports[` Autoplay renders a animated avatar 1`] = `
Autoplay renders a animated avatar 1`] = ` exports[` Still renders a still avatar 1`] = `
Date: Sun, 5 Nov 2017 15:05:12 -0800 Subject: Autocollapse boosts option --- app/javascript/glitch/components/local_settings/page/index.js | 10 ++++++++++ app/javascript/glitch/components/status/index.js | 4 ++++ app/javascript/glitch/locales/en.json | 1 + app/javascript/glitch/reducers/local_settings.js | 1 + 4 files changed, 16 insertions(+) (limited to 'app/javascript/glitch/components/local_settings/page/index.js') diff --git a/app/javascript/glitch/components/local_settings/page/index.js b/app/javascript/glitch/components/local_settings/page/index.js index 366c113c0..498230f7b 100644 --- a/app/javascript/glitch/components/local_settings/page/index.js +++ b/app/javascript/glitch/components/local_settings/page/index.js @@ -124,6 +124,16 @@ export default class LocalSettingsPage extends React.PureComponent { > + + + ( status.get('media_attachments').size && !muted ? 650 : 400 ) + ) || ( + autoCollapseSettings.get('reblogs') && + prepend === 'reblogged_by' ) || ( autoCollapseSettings.get('replies') && status.get('in_reply_to_id', null) !== null diff --git a/app/javascript/glitch/locales/en.json b/app/javascript/glitch/locales/en.json index 18e412356..69aa29108 100644 --- a/app/javascript/glitch/locales/en.json +++ b/app/javascript/glitch/locales/en.json @@ -14,6 +14,7 @@ "settings.auto_collapse_lengthy": "Lengthy toots", "settings.auto_collapse_media": "Toots with media", "settings.auto_collapse_notifications": "Notifications", + "settings.auto_collapse_reblogs": "Boosts", "settings.auto_collapse_replies": "Replies", "settings.close": "Close", "settings.collapsed_statuses": "Collapsed toots", diff --git a/app/javascript/glitch/reducers/local_settings.js b/app/javascript/glitch/reducers/local_settings.js index 813e130ca..03654fbe2 100644 --- a/app/javascript/glitch/reducers/local_settings.js +++ b/app/javascript/glitch/reducers/local_settings.js @@ -59,6 +59,7 @@ const initialState = ImmutableMap({ all : false, notifications : true, lengthy : true, + reblogs : false, replies : false, media : false, }), -- cgit