From 9891ff80f9679ed3dfdd6e8352abfb661f321a00 Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Wed, 26 Jul 2017 04:31:56 +0900 Subject: Adjust mobile landing page (#4366) * Adjust mobile landing page Change mobile viewport threshold to 840px in consideration of padding. Fix loss of "container hero" padding in about/more under 675px. * Fix indent --- app/javascript/styles/about.scss | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index 8aa5d8eb4..5a4bcef61 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -646,7 +646,7 @@ } } - @media screen and (max-width: 800px) { + @media screen and (max-width: 840px) { .container { padding: 0 20px; } @@ -688,6 +688,10 @@ @media screen and (max-width: 675px) { .header-wrapper { padding-top: 0; + + &.compact .hero .heading { + padding-bottom: 20px; + } } .header .container, @@ -701,15 +705,9 @@ } .header { - padding-top: 0; .hero { margin-top: 30px; - padding: 0; - - .heading { - padding-bottom: 20px; - } } .floats { -- cgit From aa8fa71df6c57297ea859d3deca5794612d4d281 Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Wed, 26 Jul 2017 20:45:49 +0900 Subject: Fix padding in hero container of landing page (#4373) * Fix padding in hero container, landing page Erase hero container padding to fit registration form to full width. By this setting, heading padding disappears, so I adjust heading padding. * Specify attribute strictly for heading padding To overwrite padding-bottom in superior settings. * Make padding shorthand more concise --- app/javascript/styles/about.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index 5a4bcef61..9be95c028 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -708,6 +708,11 @@ .hero { margin-top: 30px; + padding: 0; + + .heading { + padding: 0 20px 20px; + } } .floats { -- cgit From 6a6a62f13fd7846ba032543635580980b74ea14c Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Wed, 26 Jul 2017 13:46:53 +0200 Subject: Improve accessibility (part 2) (#4377) * fix(column_header): Invalid ARIA role * fix(column): Remove hidden nodes from the DOM * refactor(column_link): Remove unused property hideOnMobile * fix(column_header): Use aria-pressed * fix(column_header): Make collapsed content not focusable, add focusable property * fix(column_loading): Make header non-focusable * fix(column_settings): Use role to group the toggles --- .../mastodon/components/column_header.js | 13 +++-- .../notifications/components/column_settings.js | 58 ++++++++++++---------- .../mastodon/features/ui/components/column.js | 12 ++--- .../features/ui/components/column_header.js | 5 +- .../mastodon/features/ui/components/column_link.js | 6 +-- .../features/ui/components/column_loading.js | 2 +- app/javascript/styles/components.scss | 12 ----- 7 files changed, 54 insertions(+), 54 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js index 89e2f9189..d3256fbec 100644 --- a/app/javascript/mastodon/components/column_header.js +++ b/app/javascript/mastodon/components/column_header.js @@ -21,6 +21,7 @@ export default class ColumnHeader extends React.PureComponent { icon: PropTypes.string.isRequired, active: PropTypes.bool, multiColumn: PropTypes.bool, + focusable: PropTypes.bool, showBackButton: PropTypes.bool, children: PropTypes.node, pinned: PropTypes.bool, @@ -29,6 +30,10 @@ export default class ColumnHeader extends React.PureComponent { onClick: PropTypes.func, }; + static defaultProps = { + focusable: true, + } + state = { collapsed: true, animating: false, @@ -61,7 +66,7 @@ export default class ColumnHeader extends React.PureComponent { } render () { - const { title, icon, active, children, pinned, onPin, multiColumn, showBackButton, intl: { formatMessage } } = this.props; + const { title, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage } } = this.props; const { collapsed, animating } = this.state; const wrapperClassName = classNames('column-header__wrapper', { @@ -123,12 +128,12 @@ export default class ColumnHeader extends React.PureComponent { } if (children || multiColumn) { - collapseButton = ; + collapseButton = ; } return (
-
+
{title} @@ -138,7 +143,7 @@ export default class ColumnHeader extends React.PureComponent {
-
+
{(!collapsed || animating) && collapsedContent}
diff --git a/app/javascript/mastodon/features/notifications/components/column_settings.js b/app/javascript/mastodon/features/notifications/components/column_settings.js index 31cac5bc7..88a29d4d3 100644 --- a/app/javascript/mastodon/features/notifications/components/column_settings.js +++ b/app/javascript/mastodon/features/notifications/components/column_settings.js @@ -36,40 +36,48 @@ export default class ColumnSettings extends React.PureComponent {
- - -
- - {showPushSettings && } - - +
+ + +
+ + {showPushSettings && } + + +
- +
+ -
- - {showPushSettings && } - - +
+ + {showPushSettings && } + + +
- +
+ -
- - {showPushSettings && } - - +
+ + {showPushSettings && } + + +
- +
+ -
- - {showPushSettings && } - - +
+ + {showPushSettings && } + + +
); diff --git a/app/javascript/mastodon/features/ui/components/column.js b/app/javascript/mastodon/features/ui/components/column.js index ce1dca171..2d46264a2 100644 --- a/app/javascript/mastodon/features/ui/components/column.js +++ b/app/javascript/mastodon/features/ui/components/column.js @@ -3,6 +3,7 @@ import ColumnHeader from './column_header'; import PropTypes from 'prop-types'; import { debounce } from 'lodash'; import scrollTop from '../../../scroll'; +import { isMobile } from '../../../is_mobile'; export default class Column extends React.PureComponent { @@ -37,13 +38,12 @@ export default class Column extends React.PureComponent { render () { const { heading, icon, children, active, hideHeadingOnMobile } = this.props; - let columnHeaderId = null; - let header = ''; + const showHeading = !hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)); - if (heading) { - columnHeaderId = heading.replace(/ /g, '-'); - header = ; - } + const columnHeaderId = showHeading && heading.replace(/ /g, '-'); + const header = showHeading && ( + + ); return (
+
{icon} {type}
diff --git a/app/javascript/mastodon/features/ui/components/column_link.js b/app/javascript/mastodon/features/ui/components/column_link.js index cbdb6534f..ad7ec9318 100644 --- a/app/javascript/mastodon/features/ui/components/column_link.js +++ b/app/javascript/mastodon/features/ui/components/column_link.js @@ -2,17 +2,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import Link from 'react-router-dom/Link'; -const ColumnLink = ({ icon, text, to, href, method, hideOnMobile }) => { +const ColumnLink = ({ icon, text, to, href, method }) => { if (href) { return ( - + {text} ); } else { return ( - + {text} diff --git a/app/javascript/mastodon/features/ui/components/column_loading.js b/app/javascript/mastodon/features/ui/components/column_loading.js index 7ecfaf77a..1c4058926 100644 --- a/app/javascript/mastodon/features/ui/components/column_loading.js +++ b/app/javascript/mastodon/features/ui/components/column_loading.js @@ -6,7 +6,7 @@ import ColumnHeader from '../../../components/column_header'; const ColumnLoading = ({ title = '', icon = ' ' }) => ( - +
); diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 8de456754..a51cd962e 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1743,12 +1743,6 @@ &:hover { background: lighten($ui-base-color, 11%); } - - &.hidden-on-mobile { - @media screen and (max-width: 1024px) { - display: none; - } - } } .column-link__icon { @@ -2132,12 +2126,6 @@ button.icon-button.active i.fa-retweet { } } - &.hidden-on-mobile { - @media screen and (max-width: 1024px) { - display: none; - } - } - &:focus, &:active { outline: 0; -- cgit From 73890c3cac19df3fdf7162e84024fedea5ecfe5d Mon Sep 17 00:00:00 2001 From: unarist Date: Thu, 27 Jul 2017 22:49:56 +0900 Subject: Fix timeline height on landing page for Safari (#4392) `height: 100%` in `align-self: stretch` flexboxes doesn't work on Safari < 11. https://bugs.webkit.org/show_bug.cgi?id=137730 This workaround uses flexbox instead of `height: 100%` to stretch height. --- app/javascript/styles/about.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index 9be95c028..6eddd1322 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -547,6 +547,7 @@ } #mastodon-timeline { + display: flex; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; font-family: 'mastodon-font-sans-serif', sans-serif; @@ -565,7 +566,6 @@ padding: 0; border-radius: 4px; overflow: hidden; - height: 100%; } .scrollable { -- cgit From 50d38d7605b8998463b1428b8da886f33e0714da Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Thu, 27 Jul 2017 22:31:59 +0200 Subject: fix(dropdown_menu): Open as modal on mobile (#4295) * fix(dropdown_menu): Open as modal on mobile * fix(dropdown_menu): Open modal on touch * fix(dropdown_menu): Show status * fix(dropdown_menu): Max dimensions and reduce padding * chore(dropdown_menu): Test new functionality * refactor: Use DropdownMenuContainer instead of DropdownMenu * feat(privacy_dropdown): Open as modal on touch devices * feat(modal_root): Do not load actions-modal async --- .../mastodon/components/dropdown_menu.js | 39 ++++++++++-- .../mastodon/components/status_action_bar.js | 4 +- .../mastodon/containers/dropdown_menu_container.js | 16 +++++ .../features/account/components/action_bar.js | 4 +- .../compose/components/privacy_dropdown.js | 50 +++++++++++---- .../containers/privacy_dropdown_container.js | 7 +++ .../features/status/components/action_bar.js | 4 +- .../features/ui/components/actions_modal.js | 72 ++++++++++++++++++++++ .../mastodon/features/ui/components/modal_root.js | 2 + app/javascript/mastodon/is_mobile.js | 9 +++ app/javascript/styles/components.scss | 62 +++++++++++++++---- spec/javascript/components/dropdown_menu.test.js | 49 ++++++++++++--- 12 files changed, 277 insertions(+), 41 deletions(-) create mode 100644 app/javascript/mastodon/containers/dropdown_menu_container.js create mode 100644 app/javascript/mastodon/features/ui/components/actions_modal.js (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/dropdown_menu.js b/app/javascript/mastodon/components/dropdown_menu.js index 98323b069..8e9e6ab94 100644 --- a/app/javascript/mastodon/components/dropdown_menu.js +++ b/app/javascript/mastodon/components/dropdown_menu.js @@ -1,4 +1,5 @@ import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown'; import PropTypes from 'prop-types'; @@ -9,16 +10,23 @@ export default class DropdownMenu extends React.PureComponent { }; static propTypes = { + isUserTouching: PropTypes.func, + isModalOpen: PropTypes.bool.isRequired, + onModalOpen: PropTypes.func, + onModalClose: PropTypes.func, icon: PropTypes.string.isRequired, items: PropTypes.array.isRequired, size: PropTypes.number.isRequired, direction: PropTypes.string, + status: ImmutablePropTypes.map, ariaLabel: PropTypes.string, disabled: PropTypes.bool, }; static defaultProps = { ariaLabel: 'Menu', + isModalOpen: false, + isUserTouching: () => false, }; state = { @@ -34,6 +42,10 @@ export default class DropdownMenu extends React.PureComponent { const i = Number(e.currentTarget.getAttribute('data-index')); const { action, to } = this.props.items[i]; + if (this.props.isModalOpen) { + this.props.onModalClose(); + } + // Don't call e.preventDefault() when the item uses 'href' property. // ex. "Edit profile" on the account action bar @@ -48,7 +60,17 @@ export default class DropdownMenu extends React.PureComponent { this.dropdown.hide(); } - handleShow = () => this.setState({ expanded: true }) + handleShow = () => { + if (this.props.isUserTouching()) { + this.props.onModalOpen({ + status: this.props.status, + actions: this.props.items, + onClick: this.handleClick, + }); + } else { + this.setState({ expanded: true }); + } + } handleHide = () => this.setState({ expanded: false }) @@ -71,6 +93,7 @@ export default class DropdownMenu extends React.PureComponent { render () { const { icon, items, size, direction, ariaLabel, disabled } = this.props; const { expanded } = this.state; + const isUserTouching = this.props.isUserTouching(); const directionClass = (direction === 'left') ? 'dropdown__left' : 'dropdown__right'; const iconStyle = { fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }; const iconClassname = `fa fa-fw fa-${icon} dropdown__icon`; @@ -89,15 +112,21 @@ export default class DropdownMenu extends React.PureComponent { ); + // No need to render the actual dropdown if we use the modal. If we + // don't render anything breaks, so we just put an empty div. + const dropdownContent = !isUserTouching ? ( + + {dropdownItems} + + ) :
; + return ( - + - - {dropdownItems} - + {dropdownContent} ); } diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js index 4e02e6fad..5c83d626e 100644 --- a/app/javascript/mastodon/components/status_action_bar.js +++ b/app/javascript/mastodon/components/status_action_bar.js @@ -2,7 +2,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import IconButton from './icon_button'; -import DropdownMenu from './dropdown_menu'; +import DropdownMenuContainer from '../containers/dropdown_menu_container'; import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; @@ -156,7 +156,7 @@ export default class StatusActionBar extends ImmutablePureComponent { {shareButton}
- +
); diff --git a/app/javascript/mastodon/containers/dropdown_menu_container.js b/app/javascript/mastodon/containers/dropdown_menu_container.js new file mode 100644 index 000000000..151f25390 --- /dev/null +++ b/app/javascript/mastodon/containers/dropdown_menu_container.js @@ -0,0 +1,16 @@ +import { openModal, closeModal } from '../actions/modal'; +import { connect } from 'react-redux'; +import DropdownMenu from '../components/dropdown_menu'; +import { isUserTouching } from '../is_mobile'; + +const mapStateToProps = state => ({ + isModalOpen: state.get('modal').modalType === 'ACTIONS', +}); + +const mapDispatchToProps = dispatch => ({ + isUserTouching, + onModalOpen: props => dispatch(openModal('ACTIONS', props)), + onModalClose: () => dispatch(closeModal()), +}); + +export default connect(mapStateToProps, mapDispatchToProps)(DropdownMenu); diff --git a/app/javascript/mastodon/features/account/components/action_bar.js b/app/javascript/mastodon/features/account/components/action_bar.js index b8df724c6..b773045fb 100644 --- a/app/javascript/mastodon/features/account/components/action_bar.js +++ b/app/javascript/mastodon/features/account/components/action_bar.js @@ -1,7 +1,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; -import DropdownMenu from '../../../components/dropdown_menu'; +import DropdownMenuContainer from '../../../containers/dropdown_menu_container'; import Link from 'react-router-dom/Link'; import { defineMessages, injectIntl, FormattedMessage, FormattedNumber } from 'react-intl'; @@ -96,7 +96,7 @@ export default class ActionBar extends React.PureComponent {
- +
diff --git a/app/javascript/mastodon/features/compose/components/privacy_dropdown.js b/app/javascript/mastodon/features/compose/components/privacy_dropdown.js index 9524f7501..33ce7db46 100644 --- a/app/javascript/mastodon/features/compose/components/privacy_dropdown.js +++ b/app/javascript/mastodon/features/compose/components/privacy_dropdown.js @@ -24,6 +24,10 @@ const iconStyle = { export default class PrivacyDropdown extends React.PureComponent { static propTypes = { + isUserTouching: PropTypes.func, + isModalOpen: PropTypes.bool.isRequired, + onModalOpen: PropTypes.func, + onModalClose: PropTypes.func, value: PropTypes.string.isRequired, onChange: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, @@ -34,7 +38,25 @@ export default class PrivacyDropdown extends React.PureComponent { }; handleToggle = () => { - this.setState({ open: !this.state.open }); + if (this.props.isUserTouching()) { + if (this.state.open) { + this.props.onModalClose(); + } else { + this.props.onModalOpen({ + actions: this.options.map(option => ({ ...option, active: option.value === this.props.value })), + onClick: this.handleModalActionClick, + }); + } + } else { + this.setState({ open: !this.state.open }); + } + } + + handleModalActionClick = (e) => { + e.preventDefault(); + const { value } = this.options[e.currentTarget.getAttribute('data-index')]; + this.props.onModalClose(); + this.props.onChange(value); } handleClick = (e) => { @@ -50,6 +72,17 @@ export default class PrivacyDropdown extends React.PureComponent { } } + componentWillMount () { + const { intl: { formatMessage } } = this.props; + + this.options = [ + { icon: 'globe', value: 'public', text: formatMessage(messages.public_short), meta: formatMessage(messages.public_long) }, + { icon: 'unlock-alt', value: 'unlisted', text: formatMessage(messages.unlisted_short), meta: formatMessage(messages.unlisted_long) }, + { icon: 'lock', value: 'private', text: formatMessage(messages.private_short), meta: formatMessage(messages.private_long) }, + { icon: 'envelope', value: 'direct', text: formatMessage(messages.direct_short), meta: formatMessage(messages.direct_long) }, + ]; + } + componentDidMount () { window.addEventListener('click', this.onGlobalClick); window.addEventListener('touchstart', this.onGlobalClick); @@ -68,25 +101,18 @@ export default class PrivacyDropdown extends React.PureComponent { const { value, intl } = this.props; const { open } = this.state; - const options = [ - { icon: 'globe', value: 'public', shortText: intl.formatMessage(messages.public_short), longText: intl.formatMessage(messages.public_long) }, - { icon: 'unlock-alt', value: 'unlisted', shortText: intl.formatMessage(messages.unlisted_short), longText: intl.formatMessage(messages.unlisted_long) }, - { icon: 'lock', value: 'private', shortText: intl.formatMessage(messages.private_short), longText: intl.formatMessage(messages.private_long) }, - { icon: 'envelope', value: 'direct', shortText: intl.formatMessage(messages.direct_short), longText: intl.formatMessage(messages.direct_long) }, - ]; - - const valueOption = options.find(item => item.value === value); + const valueOption = this.options.find(item => item.value === value); return (
- {open && options.map(item => + {open && this.options.map(item =>
- {item.shortText} - {item.longText} + {item.text} + {item.meta}
)} diff --git a/app/javascript/mastodon/features/compose/containers/privacy_dropdown_container.js b/app/javascript/mastodon/features/compose/containers/privacy_dropdown_container.js index 9c05e054e..0ddf531d3 100644 --- a/app/javascript/mastodon/features/compose/containers/privacy_dropdown_container.js +++ b/app/javascript/mastodon/features/compose/containers/privacy_dropdown_container.js @@ -1,8 +1,11 @@ import { connect } from 'react-redux'; import PrivacyDropdown from '../components/privacy_dropdown'; import { changeComposeVisibility } from '../../../actions/compose'; +import { openModal, closeModal } from '../../../actions/modal'; +import { isUserTouching } from '../../../is_mobile'; const mapStateToProps = state => ({ + isModalOpen: state.get('modal').modalType === 'ACTIONS', value: state.getIn(['compose', 'privacy']), }); @@ -12,6 +15,10 @@ const mapDispatchToProps = dispatch => ({ dispatch(changeComposeVisibility(value)); }, + isUserTouching, + onModalOpen: props => dispatch(openModal('ACTIONS', props)), + onModalClose: () => dispatch(closeModal()), + }); export default connect(mapStateToProps, mapDispatchToProps)(PrivacyDropdown); diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js index 5e150842e..c4d4bb747 100644 --- a/app/javascript/mastodon/features/status/components/action_bar.js +++ b/app/javascript/mastodon/features/status/components/action_bar.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import IconButton from '../../../components/icon_button'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import DropdownMenu from '../../../components/dropdown_menu'; +import DropdownMenuContainer from '../../../containers/dropdown_menu_container'; import { defineMessages, injectIntl } from 'react-intl'; const messages = defineMessages({ @@ -84,7 +84,7 @@ export default class ActionBar extends React.PureComponent {
- +
); diff --git a/app/javascript/mastodon/features/ui/components/actions_modal.js b/app/javascript/mastodon/features/ui/components/actions_modal.js new file mode 100644 index 000000000..0fc2560ff --- /dev/null +++ b/app/javascript/mastodon/features/ui/components/actions_modal.js @@ -0,0 +1,72 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import StatusContent from '../../../components/status_content'; +import Avatar from '../../../components/avatar'; +import RelativeTimestamp from '../../../components/relative_timestamp'; +import DisplayName from '../../../components/display_name'; +import IconButton from '../../../components/icon_button'; + +export default class ReportModal extends ImmutablePureComponent { + + static propTypes = { + actions: PropTypes.array, + onClick: PropTypes.func, + intl: PropTypes.object.isRequired, + }; + + renderAction = (action, i) => { + if (action === null) { + return
  • ; + } + + const { icon = null, text, meta = null, active = false, href = '#' } = action; + + return ( +
  • + + {icon && } +
    +
    {text}
    +
    {meta}
    +
    +     +
    • + ); + } + + render () { + const status = this.props.status && ( +
    + + + +
    + ); + + return ( +
    + {status} + +
      + {this.props.actions.map(this.renderAction)} +
    +
    + ); + } + +} diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index f303088d7..4a917e0a3 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.js +++ b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -5,6 +5,7 @@ import spring from 'react-motion/lib/spring'; import BundleContainer from '../containers/bundle_container'; import BundleModalError from './bundle_modal_error'; import ModalLoading from './modal_loading'; +import ActionsModal from '../components/actions_modal'; import { MediaModal, OnboardingModal, @@ -21,6 +22,7 @@ const MODAL_COMPONENTS = { 'BOOST': BoostModal, 'CONFIRM': ConfirmationModal, 'REPORT': ReportModal, + 'ACTIONS': () => Promise.resolve({ default: ActionsModal }), }; export default class ModalRoot extends React.PureComponent { diff --git a/app/javascript/mastodon/is_mobile.js b/app/javascript/mastodon/is_mobile.js index 992e63727..e9903d59e 100644 --- a/app/javascript/mastodon/is_mobile.js +++ b/app/javascript/mastodon/is_mobile.js @@ -5,6 +5,15 @@ export function isMobile(width) { }; const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; +let userTouching = false; + +window.addEventListener('touchstart', () => { + userTouching = true; +}, { once: true }); + +export function isUserTouching() { + return userTouching; +} export function isIOS() { return iOS; diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index a51cd962e..03bc77eb5 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -214,16 +214,18 @@ } .dropdown--active::after { - content: ""; - display: block; - position: absolute; - width: 0; - height: 0; - border-style: solid; - border-width: 0 4.5px 7.8px; - border-color: transparent transparent $ui-secondary-color; - bottom: 8px; - right: 104px; + @media screen and (min-width: 1025px) { + content: ""; + display: block; + position: absolute; + width: 0; + height: 0; + border-style: solid; + border-width: 0 4.5px 7.8px; + border-color: transparent transparent $ui-secondary-color; + bottom: 8px; + right: 104px; + } } .invisible { @@ -3402,7 +3404,8 @@ button.icon-button.active i.fa-retweet { .boost-modal, .confirmation-modal, -.report-modal { +.report-modal, +.actions-modal { background: lighten($ui-secondary-color, 8%); color: $ui-base-color; border-radius: 8px; @@ -3493,6 +3496,43 @@ button.icon-button.active i.fa-retweet { } } +.actions-modal { + .status { + overflow-y: auto; + max-height: 300px; + } + + max-height: 80vh; + max-width: 80vw; + + ul { + overflow-y: auto; + flex-shrink: 0; + + li:not(:empty) { + a { + color: $ui-base-color; + display: flex; + padding: 10px; + align-items: center; + text-decoration: none; + + &.active { + &, + button { + background: $ui-highlight-color; + color: $primary-text-color; + } + } + + button:first-child { + margin-right: 10px; + } + } + } + } +} + .confirmation-modal__action-bar { .confirmation-modal__cancel-button { background-color: transparent; diff --git a/spec/javascript/components/dropdown_menu.test.js b/spec/javascript/components/dropdown_menu.test.js index 54cdcabf0..a5af730ef 100644 --- a/spec/javascript/components/dropdown_menu.test.js +++ b/spec/javascript/components/dropdown_menu.test.js @@ -5,16 +5,24 @@ import React from 'react'; import DropdownMenu from '../../../app/javascript/mastodon/components/dropdown_menu'; import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown'; +const isTrue = () => true; + describe('', () => { const icon = 'my-icon'; const size = 123; - const action = sinon.spy(); - - const items = [ - { text: 'first item', action: action, href: '/some/url' }, - { text: 'second item', action: 'noop' }, - ]; - const wrapper = shallow(); + let items; + let wrapper; + let action; + + beforeEach(() => { + action = sinon.spy(); + + items = [ + { text: 'first item', action: action, href: '/some/url' }, + { text: 'second item', action: 'noop' }, + ]; + wrapper = shallow(); + }); it('contains one ', () => { expect(wrapper).to.have.exactly(1).descendants(Dropdown); @@ -28,6 +36,16 @@ describe('', () => { expect(wrapper.find(Dropdown)).to.have.exactly(1).descendants(DropdownContent); }); + it('does not contain a if isUserTouching', () => { + const touchingWrapper = shallow(); + expect(touchingWrapper.find(Dropdown)).to.have.exactly(0).descendants(DropdownContent); + }); + + it('does not contain a if isUserTouching', () => { + const touchingWrapper = shallow(); + expect(touchingWrapper.find(Dropdown)).to.have.exactly(0).descendants(DropdownContent); + }); + it('uses props.size for style values', () => { ['font-size', 'width', 'line-height'].map((property) => { expect(wrapper.find(DropdownTrigger)).to.have.style(property, `${size}px`); @@ -53,6 +71,23 @@ describe('', () => { expect(wrapper.state('expanded')).to.be.equal(true); }); + it('calls onModalOpen when clicking the trigger if isUserTouching', () => { + const onModalOpen = sinon.spy(); + const touchingWrapper = mount(); + touchingWrapper.find(DropdownTrigger).first().simulate('click'); + expect(onModalOpen.calledOnce).to.be.equal(true); + expect(onModalOpen.args[0][0]).to.be.deep.equal({ status: 3.14, actions: items, onClick: touchingWrapper.node.handleClick }); + }); + + it('calls onModalClose when clicking an action if isUserTouching and isModalOpen', () => { + const onModalOpen = sinon.spy(); + const onModalClose = sinon.spy(); + const touchingWrapper = mount(); + touchingWrapper.find(DropdownTrigger).first().simulate('click'); + touchingWrapper.node.handleClick({ currentTarget: { getAttribute: () => '0' }, preventDefault: () => null }); + expect(onModalClose.calledOnce).to.be.equal(true); + }); + // Error: ReactWrapper::state() can only be called on the root /*it('sets expanded to false when clicking outside', () => { const wrapper = mount(( -- cgit From 62a9da62a6998dcf5df8e1282cdf03960d92312f Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Fri, 28 Jul 2017 20:32:41 +0900 Subject: Fix column header in landing page (regression from #4405) (#4416) --- app/javascript/styles/about.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index 6eddd1322..10c9a55ff 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -562,6 +562,16 @@ overflow: hidden; box-shadow: 0 0 6px rgba($black, 0.1); + .column-header { + color: inherit; + font-family: inherit; + font-size: 16px; + line-height: inherit; + font-weight: inherit; + margin: 0; + padding: 15px; + } + .column { padding: 0; border-radius: 4px; -- cgit From 296bfa23aa0de5b0203a03a3a3f3647b3b58110f Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Fri, 28 Jul 2017 13:34:06 +0200 Subject: fix(actions-modal): Inconsistent margins (#4418) --- app/javascript/styles/components.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 03bc77eb5..f03ed6c69 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -3509,6 +3509,10 @@ button.icon-button.active i.fa-retweet { overflow-y: auto; flex-shrink: 0; + li:empty { + margin: 0; + } + li:not(:empty) { a { color: $ui-base-color; -- cgit From afb593b44e89a7542185986f08856d63239a59f6 Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Fri, 28 Jul 2017 20:34:44 +0900 Subject: Fix protruded infomation board section in about/more page (#4415) * Fix protruded infomation board section Set "flexwrap: wrap" for sections. Set upper and lower padding for each section, and adjust clearances around sections accordingly. Settings for viewport threshold 500px is no more needed. * Fix mistake of reducing information-board padding In according with this fix, additional padding setting for maximum 840px width is no more needed. --- app/javascript/styles/about.scss | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index 10c9a55ff..ea01e7da1 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -121,7 +121,7 @@ .information-board { background: darken($ui-base-color, 4%); - padding: 40px 0; + padding: 20px 0; .panel { position: absolute; @@ -162,13 +162,14 @@ .information-board-sections { display: flex; justify-content: space-between; + flex-wrap: wrap; } .section { flex: 1 0 0; font: 16px/28px 'mastodon-font-sans-serif', sans-serif; text-align: right; - padding: 0 15px; + padding: 10px 15px; span, strong { @@ -190,14 +191,6 @@ color: $primary-text-color; } } - - @media screen and (max-width: 500px) { - flex-direction: column; - - .section { - text-align: left; - } - } } .owner { @@ -661,16 +654,12 @@ padding: 0 20px; } - .information-board { - padding-bottom: 20px; - } - .information-board .container { padding-right: 20px; .panel { position: static; - margin-top: 30px; + margin-top: 20px; width: 100%; border-radius: 4px; -- cgit From b3c44e95a99361eb45039bb17650af839fff90d0 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Fri, 28 Jul 2017 15:30:53 +0200 Subject: Improve actions modal style (#4423) --- app/javascript/styles/components.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index f03ed6c69..8b18d5b5c 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -3430,6 +3430,15 @@ button.icon-button.active i.fa-retweet { } } +.actions-modal { + .status { + background: $white; + border-bottom-color: $ui-secondary-color; + padding-top: 10px; + padding-bottom: 10px; + } +} + .boost-modal__container { overflow-x: scroll; padding: 10px; -- cgit From ea144ba3025e2b7bc6ca34c32f17cd585ffe3216 Mon Sep 17 00:00:00 2001 From: Damien Erambert Date: Sat, 29 Jul 2017 12:20:52 -0700 Subject: Use a fainted text color for
    elements in the landing page (#4443) * Use a fainted text color for
    elements in the landing page * remove trailing whitespace --- app/javascript/styles/about.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index ea01e7da1..3258f1b8d 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -309,6 +309,10 @@ margin-bottom: 0; } + hr { + border-color: rgba($ui-base-lighter-color, .6); + } + .header { line-height: 30px; overflow: hidden; -- cgit From ea33cdc30bb5ddef8016ce65595af4a6087bac60 Mon Sep 17 00:00:00 2001 From: Lynx Kotoura Date: Sun, 30 Jul 2017 19:56:04 +0900 Subject: Set contact address in about/more as mailto link (#4450) * Set contact address as mailto link To be able to copy long email address * Set style for mailto link --- app/javascript/styles/about.scss | 3 ++- app/views/about/_contact.html.haml | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index 3258f1b8d..1c5f13e32 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -147,9 +147,10 @@ white-space: nowrap; overflow: hidden; - span { + a { font-weight: 400; color: lighten($ui-base-color, 34%); + text-decoration: none; } } } diff --git a/app/views/about/_contact.html.haml b/app/views/about/_contact.html.haml index 822639962..81b7db61f 100644 --- a/app/views/about/_contact.html.haml +++ b/app/views/about/_contact.html.haml @@ -2,7 +2,7 @@ .panel-header = succeed ':' do = t 'about.contact' - %span{ title: contact.site_contact_email.presence }= contact.site_contact_email.presence + = mail_to contact.site_contact_email.presence, nil, :title => contact.site_contact_email.presence .panel-body - if contact.contact_account .owner -- cgit From f91284d230c261baa6adc1764cad08b561c5ba67 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Sun, 30 Jul 2017 23:24:18 +0900 Subject: Do not create empty a element when there is no e-mail (#4455) Empty a element is created when there is no business e-mail input. --- app/javascript/styles/about.scss | 6 +++++- app/views/about/_contact.html.haml | 5 ++++- 2 files changed, 9 insertions(+), 2 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index 1c5f13e32..d409c8214 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -147,9 +147,13 @@ white-space: nowrap; overflow: hidden; - a { + a, + span { font-weight: 400; color: lighten($ui-base-color, 34%); + } + + a { text-decoration: none; } } diff --git a/app/views/about/_contact.html.haml b/app/views/about/_contact.html.haml index 81b7db61f..cf21ad5a3 100644 --- a/app/views/about/_contact.html.haml +++ b/app/views/about/_contact.html.haml @@ -2,7 +2,10 @@ .panel-header = succeed ':' do = t 'about.contact' - = mail_to contact.site_contact_email.presence, nil, :title => contact.site_contact_email.presence + - if contact.site_contact_email.present? + = mail_to contact.site_contact_email, nil, title: contact.site_contact_email + - else + %span= t 'about.contact_unavailable' .panel-body - if contact.contact_account .owner -- cgit From 29abc9438c35f81e862813d40d730b6164ea295a Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Sun, 30 Jul 2017 23:27:51 +0900 Subject: Remove outline from focused toot (#4448) * Remove outline from focused toot * change style --- app/javascript/styles/components.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 8b18d5b5c..3778a2e46 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -462,6 +462,10 @@ overflow: hidden; white-space: pre-wrap; + &:focus { + outline: rgba($ui-highlight-color, 0.7) solid 2px; + } + .emojione { width: 18px; height: 18px; @@ -563,6 +567,12 @@ } } + &:focus, + &.status-direct:focus { + outline: 0; + background-color: lighten($ui-base-color, 10%); + } + &.light { .status__relative-time { color: $ui-primary-color; -- cgit From e44f03bc712c52d3af60f9accad1133f4b6de9ba Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Mon, 31 Jul 2017 00:18:15 +0200 Subject: Improve accessibility (part 7) (#4457) * fix(media_modal): Keyboard navigation * fix(column_back_button): Use native button * fix(media_gallery): Keyboard navigation * fix(status_content): Make CW content focusable --- app/javascript/mastodon/components/column_back_button.js | 13 +++++++------ app/javascript/mastodon/components/media_gallery.js | 4 ++-- app/javascript/mastodon/components/status_content.js | 2 +- .../mastodon/features/ui/components/media_modal.js | 14 +++++--------- app/javascript/mastodon/locales/ar.json | 2 ++ app/javascript/mastodon/locales/bg.json | 2 ++ app/javascript/mastodon/locales/ca.json | 2 ++ app/javascript/mastodon/locales/de.json | 2 ++ app/javascript/mastodon/locales/defaultMessages.json | 8 ++++++++ app/javascript/mastodon/locales/en.json | 2 ++ app/javascript/mastodon/locales/eo.json | 2 ++ app/javascript/mastodon/locales/es.json | 2 ++ app/javascript/mastodon/locales/fa.json | 2 ++ app/javascript/mastodon/locales/fi.json | 2 ++ app/javascript/mastodon/locales/fr.json | 2 ++ app/javascript/mastodon/locales/he.json | 2 ++ app/javascript/mastodon/locales/hr.json | 2 ++ app/javascript/mastodon/locales/hu.json | 2 ++ app/javascript/mastodon/locales/id.json | 2 ++ app/javascript/mastodon/locales/io.json | 2 ++ app/javascript/mastodon/locales/it.json | 2 ++ app/javascript/mastodon/locales/ja.json | 2 ++ app/javascript/mastodon/locales/ko.json | 2 ++ app/javascript/mastodon/locales/nl.json | 2 ++ app/javascript/mastodon/locales/no.json | 2 ++ app/javascript/mastodon/locales/oc.json | 2 ++ app/javascript/mastodon/locales/pl.json | 2 ++ app/javascript/mastodon/locales/pt-BR.json | 2 ++ app/javascript/mastodon/locales/pt.json | 2 ++ app/javascript/mastodon/locales/ru.json | 2 ++ app/javascript/mastodon/locales/th.json | 2 ++ app/javascript/mastodon/locales/tr.json | 2 ++ app/javascript/mastodon/locales/uk.json | 2 ++ app/javascript/mastodon/locales/zh-CN.json | 2 ++ app/javascript/mastodon/locales/zh-HK.json | 2 ++ app/javascript/mastodon/locales/zh-TW.json | 2 ++ app/javascript/styles/components.scss | 5 +++++ 37 files changed, 90 insertions(+), 18 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/components/column_back_button.js b/app/javascript/mastodon/components/column_back_button.js index 5b7a89d56..8a60c4192 100644 --- a/app/javascript/mastodon/components/column_back_button.js +++ b/app/javascript/mastodon/components/column_back_button.js @@ -8,19 +8,20 @@ export default class ColumnBackButton extends React.PureComponent { router: PropTypes.object, }; - handleClick = (e) => { - if (!e.key || e.key === 'Enter') { - if (window.history && window.history.length === 1) this.context.router.history.push('/'); - else this.context.router.history.goBack(); + handleClick = () => { + if (window.history && window.history.length === 1) { + this.context.router.history.push('/'); + } else { + this.context.router.history.goBack(); } } render () { return ( -
    +
    + ); } diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js index 92d7d494e..068220f8f 100644 --- a/app/javascript/mastodon/components/media_gallery.js +++ b/app/javascript/mastodon/components/media_gallery.js @@ -212,10 +212,10 @@ export default class MediaGallery extends React.PureComponent { } children = ( -
    +
    + ); } else { const size = media.take(4).size; diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js index 0071162cb..fdf7aa531 100644 --- a/app/javascript/mastodon/components/status_content.js +++ b/app/javascript/mastodon/components/status_content.js @@ -155,7 +155,7 @@ export default class StatusContent extends React.PureComponent { {mentionsPlaceholder} -
    +
    ); } else if (this.props.onClick) { diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js index dcc9becd3..828419d5a 100644 --- a/app/javascript/mastodon/features/ui/components/media_modal.js +++ b/app/javascript/mastodon/features/ui/components/media_modal.js @@ -10,6 +10,8 @@ import ImageLoader from './image_loader'; const messages = defineMessages({ close: { id: 'lightbox.close', defaultMessage: 'Close' }, + previous: { id: 'lightbox.previous', defaultMessage: 'Previous' }, + next: { id: 'lightbox.next', defaultMessage: 'Next' }, }); @injectIntl @@ -66,16 +68,10 @@ export default class MediaModal extends ImmutablePureComponent { const index = this.getIndex(); - let leftNav, rightNav, content; + const leftNav = media.size > 1 && ; + const rightNav = media.size > 1 && ; - leftNav = rightNav = content = ''; - - if (media.size > 1) { - leftNav =
    ; - rightNav =
    ; - } - - content = media.map((image) => { + const content = media.map((image) => { const width = image.getIn(['meta', 'original', 'width']) || null; const height = image.getIn(['meta', 'original', 'height']) || null; diff --git a/app/javascript/mastodon/locales/ar.json b/app/javascript/mastodon/locales/ar.json index 089cc3245..f5cf77f92 100644 --- a/app/javascript/mastodon/locales/ar.json +++ b/app/javascript/mastodon/locales/ar.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "عرض الردود", "home.settings": "إعدادات العمود", "lightbox.close": "إغلاق", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "تحميل ...", "media_gallery.toggle_visible": "عرض / إخفاء", "missing_indicator.label": "تعذر العثور عليه", diff --git a/app/javascript/mastodon/locales/bg.json b/app/javascript/mastodon/locales/bg.json index ba19de1b5..e6788f9eb 100644 --- a/app/javascript/mastodon/locales/bg.json +++ b/app/javascript/mastodon/locales/bg.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Show replies", "home.settings": "Column settings", "lightbox.close": "Затвори", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Зареждане...", "media_gallery.toggle_visible": "Toggle visibility", "missing_indicator.label": "Not found", diff --git a/app/javascript/mastodon/locales/ca.json b/app/javascript/mastodon/locales/ca.json index 3d2620be5..95b3c60bf 100644 --- a/app/javascript/mastodon/locales/ca.json +++ b/app/javascript/mastodon/locales/ca.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Mostrar respostes", "home.settings": "Ajustos de columna", "lightbox.close": "Tancar", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Carregant...", "media_gallery.toggle_visible": "Alternar visibilitat", "missing_indicator.label": "No trobat", diff --git a/app/javascript/mastodon/locales/de.json b/app/javascript/mastodon/locales/de.json index cf74ce081..67a99b765 100644 --- a/app/javascript/mastodon/locales/de.json +++ b/app/javascript/mastodon/locales/de.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Antworten anzeigen", "home.settings": "Spalteneinstellungen", "lightbox.close": "Schließen", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Lade…", "media_gallery.toggle_visible": "Sichtbarkeit einstellen", "missing_indicator.label": "Nicht gefunden", diff --git a/app/javascript/mastodon/locales/defaultMessages.json b/app/javascript/mastodon/locales/defaultMessages.json index bc1c7b8b7..ef76f6e5b 100644 --- a/app/javascript/mastodon/locales/defaultMessages.json +++ b/app/javascript/mastodon/locales/defaultMessages.json @@ -1113,6 +1113,14 @@ { "defaultMessage": "Close", "id": "lightbox.close" + }, + { + "defaultMessage": "Previous", + "id": "lightbox.previous" + }, + { + "defaultMessage": "Next", + "id": "lightbox.next" } ], "path": "app/javascript/mastodon/features/ui/components/media_modal.json" diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 70c95d027..2ea2062d3 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Show replies", "home.settings": "Column settings", "lightbox.close": "Close", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Loading...", "media_gallery.toggle_visible": "Toggle visibility", "missing_indicator.label": "Not found", diff --git a/app/javascript/mastodon/locales/eo.json b/app/javascript/mastodon/locales/eo.json index e7e521060..960d747ec 100644 --- a/app/javascript/mastodon/locales/eo.json +++ b/app/javascript/mastodon/locales/eo.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Show replies", "home.settings": "Column settings", "lightbox.close": "Fermi", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Ŝarĝanta...", "media_gallery.toggle_visible": "Toggle visibility", "missing_indicator.label": "Not found", diff --git a/app/javascript/mastodon/locales/es.json b/app/javascript/mastodon/locales/es.json index 3d27bd0fc..212d16639 100644 --- a/app/javascript/mastodon/locales/es.json +++ b/app/javascript/mastodon/locales/es.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Show replies", "home.settings": "Column settings", "lightbox.close": "Cerrar", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Cargando...", "media_gallery.toggle_visible": "Toggle visibility", "missing_indicator.label": "Not found", diff --git a/app/javascript/mastodon/locales/fa.json b/app/javascript/mastodon/locales/fa.json index 1b533114a..8c21fe22a 100644 --- a/app/javascript/mastodon/locales/fa.json +++ b/app/javascript/mastodon/locales/fa.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "نمایش پاسخ‌ها", "home.settings": "تنظیمات ستون", "lightbox.close": "بستن", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "بارگیری...", "media_gallery.toggle_visible": "تغییر پیدایی", "missing_indicator.label": "پیدا نشد", diff --git a/app/javascript/mastodon/locales/fi.json b/app/javascript/mastodon/locales/fi.json index 0c95f5fd2..cb9e9c2a6 100644 --- a/app/javascript/mastodon/locales/fi.json +++ b/app/javascript/mastodon/locales/fi.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Show replies", "home.settings": "Column settings", "lightbox.close": "Sulje", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Ladataan...", "media_gallery.toggle_visible": "Toggle visibility", "missing_indicator.label": "Not found", diff --git a/app/javascript/mastodon/locales/fr.json b/app/javascript/mastodon/locales/fr.json index 5d7896c8c..ad9060d25 100644 --- a/app/javascript/mastodon/locales/fr.json +++ b/app/javascript/mastodon/locales/fr.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Afficher les réponses", "home.settings": "Paramètres de la colonne", "lightbox.close": "Fermer", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Chargement…", "media_gallery.toggle_visible": "Modifier la visibilité", "missing_indicator.label": "Non trouvé", diff --git a/app/javascript/mastodon/locales/he.json b/app/javascript/mastodon/locales/he.json index 724a18cde..34266d8e1 100644 --- a/app/javascript/mastodon/locales/he.json +++ b/app/javascript/mastodon/locales/he.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "הצגת תגובות", "home.settings": "הגדרות טור", "lightbox.close": "סגירה", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "טוען...", "media_gallery.toggle_visible": "נראה\\בלתי נראה", "missing_indicator.label": "לא נמצא", diff --git a/app/javascript/mastodon/locales/hr.json b/app/javascript/mastodon/locales/hr.json index b4625c1d4..f69b096d4 100644 --- a/app/javascript/mastodon/locales/hr.json +++ b/app/javascript/mastodon/locales/hr.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Pokaži odgovore", "home.settings": "Postavke Stupca", "lightbox.close": "Zatvori", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Učitavam...", "media_gallery.toggle_visible": "Preklopi vidljivost", "missing_indicator.label": "Nije nađen", diff --git a/app/javascript/mastodon/locales/hu.json b/app/javascript/mastodon/locales/hu.json index 8a50889f3..4d2a50963 100644 --- a/app/javascript/mastodon/locales/hu.json +++ b/app/javascript/mastodon/locales/hu.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Show replies", "home.settings": "Column settings", "lightbox.close": "Bezárás", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Betöltés...", "media_gallery.toggle_visible": "Toggle visibility", "missing_indicator.label": "Not found", diff --git a/app/javascript/mastodon/locales/id.json b/app/javascript/mastodon/locales/id.json index 8c775d765..532739e3c 100644 --- a/app/javascript/mastodon/locales/id.json +++ b/app/javascript/mastodon/locales/id.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Tampilkan balasan", "home.settings": "Pengaturan kolom", "lightbox.close": "Tutup", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Tunggu sebentar...", "media_gallery.toggle_visible": "Tampil/Sembunyikan", "missing_indicator.label": "Tidak ditemukan", diff --git a/app/javascript/mastodon/locales/io.json b/app/javascript/mastodon/locales/io.json index dc29dc8ab..a5e363e40 100644 --- a/app/javascript/mastodon/locales/io.json +++ b/app/javascript/mastodon/locales/io.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Montrar respondi", "home.settings": "Aranji di la kolumno", "lightbox.close": "Klozar", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Kargante...", "media_gallery.toggle_visible": "Chanjar videbleso", "missing_indicator.label": "Ne trovita", diff --git a/app/javascript/mastodon/locales/it.json b/app/javascript/mastodon/locales/it.json index ceeaae843..329eb82ca 100644 --- a/app/javascript/mastodon/locales/it.json +++ b/app/javascript/mastodon/locales/it.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Mostra risposte", "home.settings": "Impostazioni colonna", "lightbox.close": "Chiudi", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Carico...", "media_gallery.toggle_visible": "Imposta visibilità", "missing_indicator.label": "Non trovato", diff --git a/app/javascript/mastodon/locales/ja.json b/app/javascript/mastodon/locales/ja.json index 3cf001548..4c98086bb 100644 --- a/app/javascript/mastodon/locales/ja.json +++ b/app/javascript/mastodon/locales/ja.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "返信表示", "home.settings": "カラム設定", "lightbox.close": "閉じる", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "読み込み中...", "media_gallery.toggle_visible": "表示切り替え", "missing_indicator.label": "見つかりません", diff --git a/app/javascript/mastodon/locales/ko.json b/app/javascript/mastodon/locales/ko.json index e06ac583c..47d0d4087 100644 --- a/app/javascript/mastodon/locales/ko.json +++ b/app/javascript/mastodon/locales/ko.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "답글 표시", "home.settings": "컬럼 설정", "lightbox.close": "닫기", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "불러오는 중...", "media_gallery.toggle_visible": "표시 전환", "missing_indicator.label": "찾을 수 없습니다", diff --git a/app/javascript/mastodon/locales/nl.json b/app/javascript/mastodon/locales/nl.json index 36ba8be2a..dda0daf7c 100644 --- a/app/javascript/mastodon/locales/nl.json +++ b/app/javascript/mastodon/locales/nl.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Reacties tonen", "home.settings": "Kolom-instellingen", "lightbox.close": "Sluiten", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Laden…", "media_gallery.toggle_visible": "Media wel/niet tonen", "missing_indicator.label": "Niet gevonden", diff --git a/app/javascript/mastodon/locales/no.json b/app/javascript/mastodon/locales/no.json index 2589d3fee..9453e65ff 100644 --- a/app/javascript/mastodon/locales/no.json +++ b/app/javascript/mastodon/locales/no.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Vis svar", "home.settings": "Kolonneinnstillinger", "lightbox.close": "Lukk", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Laster...", "media_gallery.toggle_visible": "Veksle synlighet", "missing_indicator.label": "Ikke funnet", diff --git a/app/javascript/mastodon/locales/oc.json b/app/javascript/mastodon/locales/oc.json index 11f2a50e7..5cf6d52c5 100644 --- a/app/javascript/mastodon/locales/oc.json +++ b/app/javascript/mastodon/locales/oc.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Mostrar las responsas", "home.settings": "Paramètres de la colomna", "lightbox.close": "Tampar", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Cargament…", "media_gallery.toggle_visible": "Modificar la visibilitat", "missing_indicator.label": "Pas trobat", diff --git a/app/javascript/mastodon/locales/pl.json b/app/javascript/mastodon/locales/pl.json index e41b076eb..b850ea6ea 100644 --- a/app/javascript/mastodon/locales/pl.json +++ b/app/javascript/mastodon/locales/pl.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Pokazuj odpowiedzi", "home.settings": "Ustawienia kolumny", "lightbox.close": "Zamknij", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Ładowanie...", "media_gallery.toggle_visible": "Przełącz widoczność", "missing_indicator.label": "Nie znaleziono", diff --git a/app/javascript/mastodon/locales/pt-BR.json b/app/javascript/mastodon/locales/pt-BR.json index fce3aaaa0..55d2f05de 100644 --- a/app/javascript/mastodon/locales/pt-BR.json +++ b/app/javascript/mastodon/locales/pt-BR.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Mostrar as respostas", "home.settings": "Parâmetros da listagem", "lightbox.close": "Fechar", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Carregando...", "media_gallery.toggle_visible": "Esconder/Mostrar", "missing_indicator.label": "Não encontrado", diff --git a/app/javascript/mastodon/locales/pt.json b/app/javascript/mastodon/locales/pt.json index fce3aaaa0..55d2f05de 100644 --- a/app/javascript/mastodon/locales/pt.json +++ b/app/javascript/mastodon/locales/pt.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Mostrar as respostas", "home.settings": "Parâmetros da listagem", "lightbox.close": "Fechar", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Carregando...", "media_gallery.toggle_visible": "Esconder/Mostrar", "missing_indicator.label": "Não encontrado", diff --git a/app/javascript/mastodon/locales/ru.json b/app/javascript/mastodon/locales/ru.json index 90ab15de0..1abfb4370 100644 --- a/app/javascript/mastodon/locales/ru.json +++ b/app/javascript/mastodon/locales/ru.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Показывать ответы", "home.settings": "Настройки колонки", "lightbox.close": "Закрыть", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Загрузка...", "media_gallery.toggle_visible": "Показать/скрыть", "missing_indicator.label": "Не найдено", diff --git a/app/javascript/mastodon/locales/th.json b/app/javascript/mastodon/locales/th.json index e0b680b06..aa0929f82 100644 --- a/app/javascript/mastodon/locales/th.json +++ b/app/javascript/mastodon/locales/th.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Show replies", "home.settings": "Column settings", "lightbox.close": "Close", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Loading...", "media_gallery.toggle_visible": "Toggle visibility", "missing_indicator.label": "Not found", diff --git a/app/javascript/mastodon/locales/tr.json b/app/javascript/mastodon/locales/tr.json index 4c728c57a..37ce8597e 100644 --- a/app/javascript/mastodon/locales/tr.json +++ b/app/javascript/mastodon/locales/tr.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Cevapları göster", "home.settings": "Kolon ayarları", "lightbox.close": "Kapat", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Yükleniyor...", "media_gallery.toggle_visible": "Görünürlüğü değiştir", "missing_indicator.label": "Bulunamadı", diff --git a/app/javascript/mastodon/locales/uk.json b/app/javascript/mastodon/locales/uk.json index e8ea1101a..fea7bd94e 100644 --- a/app/javascript/mastodon/locales/uk.json +++ b/app/javascript/mastodon/locales/uk.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "Показувати відповіді", "home.settings": "Налаштування колонок", "lightbox.close": "Закрити", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "Завантаження...", "media_gallery.toggle_visible": "Показати/приховати", "missing_indicator.label": "Не знайдено", diff --git a/app/javascript/mastodon/locales/zh-CN.json b/app/javascript/mastodon/locales/zh-CN.json index 98e963bee..d0c4b3d1b 100644 --- a/app/javascript/mastodon/locales/zh-CN.json +++ b/app/javascript/mastodon/locales/zh-CN.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "显示回应嘟文", "home.settings": "字段设置", "lightbox.close": "关闭", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "加载中……", "media_gallery.toggle_visible": "打开或关上", "missing_indicator.label": "找不到内容", diff --git a/app/javascript/mastodon/locales/zh-HK.json b/app/javascript/mastodon/locales/zh-HK.json index b92a88f3b..7312aae82 100644 --- a/app/javascript/mastodon/locales/zh-HK.json +++ b/app/javascript/mastodon/locales/zh-HK.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "顯示回應文章", "home.settings": "欄位設定", "lightbox.close": "關閉", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "載入中...", "media_gallery.toggle_visible": "打開或關上", "missing_indicator.label": "找不到內容", diff --git a/app/javascript/mastodon/locales/zh-TW.json b/app/javascript/mastodon/locales/zh-TW.json index f45be6c5e..1c2e35272 100644 --- a/app/javascript/mastodon/locales/zh-TW.json +++ b/app/javascript/mastodon/locales/zh-TW.json @@ -94,6 +94,8 @@ "home.column_settings.show_replies": "顯示回應", "home.settings": "欄位設定", "lightbox.close": "關閉", + "lightbox.next": "Next", + "lightbox.previous": "Previous", "loading_indicator.label": "讀取中...", "media_gallery.toggle_visible": "切換可見性", "missing_indicator.label": "找不到", diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 3778a2e46..150269250 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1595,6 +1595,8 @@ cursor: pointer; flex: 0 0 auto; font-size: 16px; + border: 0; + text-align: start; padding: 15px; z-index: 3; @@ -2325,6 +2327,8 @@ button.icon-button.active i.fa-retweet { cursor: pointer; display: flex; flex-direction: column; + border: 0; + width: 100%; height: 100%; justify-content: center; position: relative; @@ -2398,6 +2402,7 @@ button.icon-button.active i.fa-retweet { align-items: center; background: rgba($base-overlay-background, 0.5); box-sizing: border-box; + border: 0; color: $primary-text-color; cursor: pointer; display: flex; -- cgit From bb85043f4641adbb4c9589ccd2bd93c9cdd06ce8 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Mon, 31 Jul 2017 12:06:56 +0900 Subject: Disable sensitive button when with content warnings (#4460) --- .../features/compose/containers/sensitive_button_container.js | 5 ++++- app/javascript/mastodon/reducers/compose.js | 10 +++++++--- app/javascript/styles/components.scss | 10 +++++++--- 3 files changed, 18 insertions(+), 7 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js b/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js index 63c0e8ae4..8624849f3 100644 --- a/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js +++ b/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js @@ -15,6 +15,7 @@ const messages = defineMessages({ const mapStateToProps = state => ({ visible: state.getIn(['compose', 'media_attachments']).size > 0, active: state.getIn(['compose', 'sensitive']), + disabled: state.getIn(['compose', 'spoiler']), }); const mapDispatchToProps = dispatch => ({ @@ -30,12 +31,13 @@ class SensitiveButton extends React.PureComponent { static propTypes = { visible: PropTypes.bool, active: PropTypes.bool, + disabled: PropTypes.bool, onClick: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, }; render () { - const { visible, active, onClick, intl } = this.props; + const { visible, active, disabled, onClick, intl } = this.props; return ( @@ -53,6 +55,7 @@ class SensitiveButton extends React.PureComponent { onClick={onClick} size={18} active={active} + disabled={disabled} style={{ lineHeight: null, height: null }} inverted /> diff --git a/app/javascript/mastodon/reducers/compose.js b/app/javascript/mastodon/reducers/compose.js index 1dd49d41a..e137b774e 100644 --- a/app/javascript/mastodon/reducers/compose.js +++ b/app/javascript/mastodon/reducers/compose.js @@ -152,9 +152,13 @@ export default function compose(state = initialState, action) { .set('mounted', false) .set('is_composing', false); case COMPOSE_SENSITIVITY_CHANGE: - return state - .set('sensitive', !state.get('sensitive')) - .set('idempotencyKey', uuid()); + return state.withMutations(map => { + if (!state.get('spoiler')) { + map.set('sensitive', !state.get('sensitive')); + } + + map.set('idempotencyKey', uuid()); + }); case COMPOSE_SPOILERNESS_CHANGE: return state.withMutations(map => { map.set('spoiler_text', ''); diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 150269250..c65e51c25 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -148,12 +148,16 @@ color: $ui-base-lighter-color; } + &.disabled { + color: $ui-primary-color; + } + &.active { color: $ui-highlight-color; - } - &.disabled { - color: $ui-primary-color; + &.disabled { + color: lighten($ui-highlight-color, 13%); + } } } -- cgit From 82b4cf4acb9a2c6fb84bf56a87d918831960308c Mon Sep 17 00:00:00 2001 From: unarist Date: Mon, 31 Jul 2017 22:19:30 +0900 Subject: Fix button overflow on confirmation modal for mobile (#4465) --- app/javascript/styles/components.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index c65e51c25..3749ead40 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -3499,7 +3499,7 @@ button.icon-button.active i.fa-retweet { } .confirmation-modal { - max-width: 280px; + max-width: 85vw; @media screen and (min-width: 480px) { max-width: 380px; -- cgit From 8ccb3b96ab57a5d7838699e33c25a2c94dde2252 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Tue, 1 Aug 2017 08:40:31 +0900 Subject: Re-add outline (#4474) * Re-add outline * respect default of web browser --- app/javascript/styles/components.scss | 10 ---------- 1 file changed, 10 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 3749ead40..34e4b2e72 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -466,10 +466,6 @@ overflow: hidden; white-space: pre-wrap; - &:focus { - outline: rgba($ui-highlight-color, 0.7) solid 2px; - } - .emojione { width: 18px; height: 18px; @@ -571,12 +567,6 @@ } } - &:focus, - &.status-direct:focus { - outline: 0; - background-color: lighten($ui-base-color, 10%); - } - &.light { .status__relative-time { color: $ui-primary-color; -- cgit