From 7baf15675fbf068b8c455377f917746624b56258 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Fri, 4 Jan 2019 18:53:27 +0100 Subject: Add local setting to disable swipe-to-change-columns --- .../flavours/glitch/features/local_settings/page/index.js | 8 ++++++++ .../flavours/glitch/features/ui/components/columns_area.js | 5 +++-- .../glitch/features/ui/containers/columns_area_container.js | 1 + app/javascript/flavours/glitch/reducers/local_settings.js | 1 + 4 files changed, 13 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.js b/app/javascript/flavours/glitch/features/local_settings/page/index.js index 4477a4e80..16c64ced6 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js @@ -95,6 +95,14 @@ export default class LocalSettingsPage extends React.PureComponent { > + + + ), diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.js b/app/javascript/flavours/glitch/features/ui/components/columns_area.js index 65a63294b..61f6c0fed 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.js +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.js @@ -46,6 +46,7 @@ export default class ColumnsArea extends ImmutablePureComponent { static propTypes = { intl: PropTypes.object.isRequired, columns: ImmutablePropTypes.list.isRequired, + swipeToChangeColumns: PropTypes.bool, singleColumn: PropTypes.bool, children: PropTypes.node, }; @@ -153,7 +154,7 @@ export default class ColumnsArea extends ImmutablePureComponent { } render () { - const { columns, children, singleColumn, intl } = this.props; + const { columns, children, singleColumn, swipeToChangeColumns, intl } = this.props; const { shouldAnimate } = this.state; const columnIndex = getIndex(this.context.router.history.location.pathname); @@ -163,7 +164,7 @@ export default class ColumnsArea extends ImmutablePureComponent { const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : ; return columnIndex !== -1 ? [ - + {links.map(this.renderView)} , diff --git a/app/javascript/flavours/glitch/features/ui/containers/columns_area_container.js b/app/javascript/flavours/glitch/features/ui/containers/columns_area_container.js index 4e26f3017..ba194a002 100644 --- a/app/javascript/flavours/glitch/features/ui/containers/columns_area_container.js +++ b/app/javascript/flavours/glitch/features/ui/containers/columns_area_container.js @@ -3,6 +3,7 @@ import ColumnsArea from '../components/columns_area'; const mapStateToProps = state => ({ columns: state.getIn(['settings', 'columns']), + swipeToChangeColumns: state.getIn(['local_settings', 'swipe_to_change_columns']), }); export default connect(mapStateToProps, null, null, { forwardRef: true })(ColumnsArea); diff --git a/app/javascript/flavours/glitch/reducers/local_settings.js b/app/javascript/flavours/glitch/reducers/local_settings.js index 15239f28e..93a404328 100644 --- a/app/javascript/flavours/glitch/reducers/local_settings.js +++ b/app/javascript/flavours/glitch/reducers/local_settings.js @@ -9,6 +9,7 @@ const initialState = ImmutableMap({ layout : 'auto', stretch : true, navbar_under : false, + swipe_to_change_columns: true, side_arm : 'none', side_arm_reply_mode : 'keep', show_reply_count : false, -- cgit From dc501c4134299a12146e7f7aec4676c492235a24 Mon Sep 17 00:00:00 2001 From: ash lea Date: Sat, 5 Jan 2019 15:15:00 -0500 Subject: add list title editing --- .../list_editor/components/edit_list_form.js | 70 ++++++++++++++++++++++ .../flavours/glitch/features/list_editor/index.js | 7 +-- .../flavours/glitch/reducers/list_editor.js | 11 +++- .../flavours/glitch/styles/components/columns.scss | 2 +- 4 files changed, 83 insertions(+), 7 deletions(-) create mode 100644 app/javascript/flavours/glitch/features/list_editor/components/edit_list_form.js (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/list_editor/components/edit_list_form.js b/app/javascript/flavours/glitch/features/list_editor/components/edit_list_form.js new file mode 100644 index 000000000..24aaf82ac --- /dev/null +++ b/app/javascript/flavours/glitch/features/list_editor/components/edit_list_form.js @@ -0,0 +1,70 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import { changeListEditorTitle, submitListEditor } from 'flavours/glitch/actions/lists'; +import IconButton from 'flavours/glitch/components/icon_button'; +import { defineMessages, injectIntl } from 'react-intl'; + +const messages = defineMessages({ + title: { id: 'lists.edit.submit', defaultMessage: 'Change title' }, +}); + +const mapStateToProps = state => ({ + value: state.getIn(['listEditor', 'title']), + disabled: !state.getIn(['listEditor', 'isChanged']), +}); + +const mapDispatchToProps = dispatch => ({ + onChange: value => dispatch(changeListEditorTitle(value)), + onSubmit: () => dispatch(submitListEditor(false)), +}); + +@connect(mapStateToProps, mapDispatchToProps) +@injectIntl +export default class ListForm extends React.PureComponent { + + static propTypes = { + value: PropTypes.string.isRequired, + disabled: PropTypes.bool, + intl: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, + onSubmit: PropTypes.func.isRequired, + }; + + handleChange = e => { + this.props.onChange(e.target.value); + } + + handleSubmit = e => { + e.preventDefault(); + this.props.onSubmit(); + } + + handleClick = () => { + this.props.onSubmit(); + } + + render () { + const { value, disabled, intl } = this.props; + + const title = intl.formatMessage(messages.title); + + return ( +
+ + + + + ); + } + +} diff --git a/app/javascript/flavours/glitch/features/list_editor/index.js b/app/javascript/flavours/glitch/features/list_editor/index.js index b3be3070a..5f552b113 100644 --- a/app/javascript/flavours/glitch/features/list_editor/index.js +++ b/app/javascript/flavours/glitch/features/list_editor/index.js @@ -7,11 +7,11 @@ import { injectIntl } from 'react-intl'; import { setupListEditor, clearListSuggestions, resetListEditor } from 'flavours/glitch/actions/lists'; import AccountContainer from './containers/account_container'; import SearchContainer from './containers/search_container'; +import EditListForm from './components/edit_list_form'; import Motion from 'flavours/glitch/util/optional_motion'; import spring from 'react-motion/lib/spring'; const mapStateToProps = state => ({ - title: state.getIn(['listEditor', 'title']), accountIds: state.getIn(['listEditor', 'accounts', 'items']), searchAccountIds: state.getIn(['listEditor', 'suggestions', 'items']), }); @@ -33,7 +33,6 @@ export default class ListEditor extends ImmutablePureComponent { onInitialize: PropTypes.func.isRequired, onClear: PropTypes.func.isRequired, onReset: PropTypes.func.isRequired, - title: PropTypes.string.isRequired, accountIds: ImmutablePropTypes.list.isRequired, searchAccountIds: ImmutablePropTypes.list.isRequired, }; @@ -49,12 +48,12 @@ export default class ListEditor extends ImmutablePureComponent { } render () { - const { title, accountIds, searchAccountIds, onClear } = this.props; + const { accountIds, searchAccountIds, onClear } = this.props; const showSearch = searchAccountIds.size > 0; return (
-

{title}

+ diff --git a/app/javascript/flavours/glitch/reducers/list_editor.js b/app/javascript/flavours/glitch/reducers/list_editor.js index 02a0dabb1..5427ac098 100644 --- a/app/javascript/flavours/glitch/reducers/list_editor.js +++ b/app/javascript/flavours/glitch/reducers/list_editor.js @@ -22,6 +22,7 @@ import { const initialState = ImmutableMap({ listId: null, isSubmitting: false, + isChanged: false, title: '', accounts: ImmutableMap({ @@ -47,10 +48,16 @@ export default function listEditorReducer(state = initialState, action) { map.set('isSubmitting', false); }); case LIST_EDITOR_TITLE_CHANGE: - return state.set('title', action.value); + return state.withMutations(map => { + map.set('title', action.value); + map.set('isChanged', true); + }); case LIST_CREATE_REQUEST: case LIST_UPDATE_REQUEST: - return state.set('isSubmitting', true); + return state.withMutations(map => { + map.set('isSubmitting', true); + map.set('isChanged', false); + }); case LIST_CREATE_FAIL: case LIST_UPDATE_FAIL: return state.set('isSubmitting', false); diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 86c77f980..7a8accc27 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -500,7 +500,7 @@ .icon-button { flex: 0 0 auto; - margin-left: 5px; + margin: 0 5px; } } -- cgit From 20fd8558303568ba82dff930e1e6522253ba5b8b Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 8 Jan 2019 19:26:12 +0100 Subject: Update glitch-soc admin page style from upstream Port SCSS changes from e55dce3176b7ac0a23a8a652c2626707a1b74dbb to glitch-soc --- app/javascript/flavours/glitch/styles/admin.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 635888a2c..8b111a936 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -194,6 +194,11 @@ $no-columns-breakpoint: 600px; color: $valid-value-color; font-weight: 500; } + + .negative-hint { + color: $error-value-color; + font-weight: 500; + } } @media screen and (max-width: $no-columns-breakpoint) { -- cgit From 21f27e6579af4bdadb063a4500cfe86cc5b24a1f Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 8 Jan 2019 21:21:46 +0100 Subject: [Glitch] Temporarily hold timeline if mouse moved recently Port 6a1216d2cd1c26c22baf86ae618a62aa66817239 to glitch-soc --- .../flavours/glitch/components/scrollable_list.js | 50 +++++++++++++++++++++- 1 file changed, 48 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/scrollable_list.js b/app/javascript/flavours/glitch/components/scrollable_list.js index 21d717b81..006c2a899 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.js +++ b/app/javascript/flavours/glitch/components/scrollable_list.js @@ -10,6 +10,8 @@ import classNames from 'classnames'; import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from 'flavours/glitch/util/fullscreen'; import LoadingIndicator from './loading_indicator'; +const MOUSE_IDLE_DELAY = 300; + export default class ScrollableList extends PureComponent { static contextTypes = { @@ -38,6 +40,8 @@ export default class ScrollableList extends PureComponent { state = { fullscreen: null, + mouseMovedRecently: false, + scrollToTopOnMouseIdle: false, }; intersectionObserverWrapper = new IntersectionObserverWrapper(); @@ -61,6 +65,47 @@ export default class ScrollableList extends PureComponent { trailing: true, }); + mouseIdleTimer = null; + + clearMouseIdleTimer = () => { + if (this.mouseIdleTimer === null) { + return; + } + clearTimeout(this.mouseIdleTimer); + this.mouseIdleTimer = null; + }; + + handleMouseMove = throttle(() => { + // As long as the mouse keeps moving, clear and restart the idle timer. + this.clearMouseIdleTimer(); + this.mouseIdleTimer = + setTimeout(this.handleMouseIdle, MOUSE_IDLE_DELAY); + + this.setState(({ + mouseMovedRecently, + scrollToTopOnMouseIdle, + }) => ({ + mouseMovedRecently: true, + // Only set scrollToTopOnMouseIdle if we just started moving and were + // scrolled to the top. Otherwise, just retain the previous state. + scrollToTopOnMouseIdle: + mouseMovedRecently + ? scrollToTopOnMouseIdle + : (this.node.scrollTop === 0), + })); + }, MOUSE_IDLE_DELAY / 2); + + handleMouseIdle = () => { + if (this.state.scrollToTopOnMouseIdle) { + this.node.scrollTop = 0; + this.props.onScrollToTop(); + } + this.setState({ + mouseMovedRecently: false, + scrollToTopOnMouseIdle: false, + }); + } + componentDidMount () { this.attachScrollListener(); this.attachIntersectionObserver(); @@ -90,7 +135,7 @@ export default class ScrollableList extends PureComponent { const someItemInserted = React.Children.count(prevProps.children) > 0 && React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); - if (someItemInserted && this.node.scrollTop > 0) { + if ((someItemInserted && this.node.scrollTop > 0) || this.state.mouseMovedRecently) { return this.node.scrollHeight - this.node.scrollTop; } else { return null; @@ -104,6 +149,7 @@ export default class ScrollableList extends PureComponent { } componentWillUnmount () { + this.clearMouseIdleTimer(); this.detachScrollListener(); this.detachIntersectionObserver(); detachFullscreenListener(this.onFullScreenChange); @@ -181,7 +227,7 @@ export default class ScrollableList extends PureComponent { ); } else if (isLoading || childrenCount > 0 || hasMore || !emptyMessage) { scrollableArea = ( -
+
{prepend} -- cgit From 19c64a49f7da7e4131e5090a24d3056eaff490db Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 8 Jan 2019 21:22:13 +0100 Subject: [Glitch] Cancel list scroll reset after mouse move on wheel scroll Port 9cfd610484541c14bcde3c368a158b9b5d2a6499 to glitch-soc --- .../flavours/glitch/components/scrollable_list.js | 41 +++++++++++----------- 1 file changed, 20 insertions(+), 21 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/scrollable_list.js b/app/javascript/flavours/glitch/components/scrollable_list.js index 006c2a899..520749529 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.js +++ b/app/javascript/flavours/glitch/components/scrollable_list.js @@ -40,8 +40,6 @@ export default class ScrollableList extends PureComponent { state = { fullscreen: null, - mouseMovedRecently: false, - scrollToTopOnMouseIdle: false, }; intersectionObserverWrapper = new IntersectionObserverWrapper(); @@ -66,6 +64,8 @@ export default class ScrollableList extends PureComponent { }); mouseIdleTimer = null; + mouseMovedRecently = false; + scrollToTopOnMouseIdle = false; clearMouseIdleTimer = () => { if (this.mouseIdleTimer === null) { @@ -81,29 +81,26 @@ export default class ScrollableList extends PureComponent { this.mouseIdleTimer = setTimeout(this.handleMouseIdle, MOUSE_IDLE_DELAY); - this.setState(({ - mouseMovedRecently, - scrollToTopOnMouseIdle, - }) => ({ - mouseMovedRecently: true, - // Only set scrollToTopOnMouseIdle if we just started moving and were - // scrolled to the top. Otherwise, just retain the previous state. - scrollToTopOnMouseIdle: - mouseMovedRecently - ? scrollToTopOnMouseIdle - : (this.node.scrollTop === 0), - })); + if (!this.mouseMovedRecently && this.node.scrollTop === 0) { + // Only set if we just started moving and are scrolled to the top. + this.scrollToTopOnMouseIdle = true; + } + // Save setting this flag for last, so we can do the comparison above. + this.mouseMovedRecently = true; }, MOUSE_IDLE_DELAY / 2); + handleWheel = throttle(() => { + this.scrollToTopOnMouseIdle = false; + }, 150, { + trailing: true, + }); + handleMouseIdle = () => { - if (this.state.scrollToTopOnMouseIdle) { + if (this.scrollToTopOnMouseIdle) { this.node.scrollTop = 0; - this.props.onScrollToTop(); } - this.setState({ - mouseMovedRecently: false, - scrollToTopOnMouseIdle: false, - }); + this.mouseMovedRecently = false; + this.scrollToTopOnMouseIdle = false; } componentDidMount () { @@ -135,7 +132,7 @@ export default class ScrollableList extends PureComponent { const someItemInserted = React.Children.count(prevProps.children) > 0 && React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); - if ((someItemInserted && this.node.scrollTop > 0) || this.state.mouseMovedRecently) { + if ((someItemInserted && this.node.scrollTop > 0) || this.mouseMovedRecently) { return this.node.scrollHeight - this.node.scrollTop; } else { return null; @@ -172,10 +169,12 @@ export default class ScrollableList extends PureComponent { attachScrollListener () { this.node.addEventListener('scroll', this.handleScroll); + this.node.addEventListener('wheel', this.handleWheel); } detachScrollListener () { this.node.removeEventListener('scroll', this.handleScroll); + this.node.removeEventListener('wheel', this.handleWheel); } getFirstChildKey (props) { -- cgit From 825decbf9ecfb60228cfa292a5d94d0ddc9d5998 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 8 Jan 2019 21:26:23 +0100 Subject: [Glitch] Identify manual scrolling to cancel scroll to top reset on mouse idle Port 2f86fc5e0a45eb2002d4b481ae093197ad523479 to glitch-soc --- .../flavours/glitch/components/scrollable_list.js | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/scrollable_list.js b/app/javascript/flavours/glitch/components/scrollable_list.js index 520749529..09a22f633 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.js +++ b/app/javascript/flavours/glitch/components/scrollable_list.js @@ -58,6 +58,13 @@ export default class ScrollableList extends PureComponent { } else if (this.props.onScroll) { this.props.onScroll(); } + + if (!this.lastScrollWasSynthetic) { + // If the last scroll wasn't caused by setScrollTop(), assume it was + // intentional and cancel any pending scroll reset on mouse idle + this.scrollToTopOnMouseIdle = false; + } + this.lastScrollWasSynthetic = false; } }, 150, { trailing: true, @@ -65,8 +72,16 @@ export default class ScrollableList extends PureComponent { mouseIdleTimer = null; mouseMovedRecently = false; + lastScrollWasSynthetic = false; scrollToTopOnMouseIdle = false; + setScrollTop = newScrollTop => { + if (this.node.scrollTop !== newScrollTop) { + this.lastScrollWasSynthetic = true; + this.node.scrollTop = newScrollTop; + } + }; + clearMouseIdleTimer = () => { if (this.mouseIdleTimer === null) { return; @@ -97,7 +112,7 @@ export default class ScrollableList extends PureComponent { handleMouseIdle = () => { if (this.scrollToTopOnMouseIdle) { - this.node.scrollTop = 0; + this.setScrollTop(0); } this.mouseMovedRecently = false; this.scrollToTopOnMouseIdle = false; @@ -123,9 +138,7 @@ export default class ScrollableList extends PureComponent { updateScrollBottom = (snapshot) => { const newScrollTop = this.node.scrollHeight - snapshot; - if (this.node.scrollTop !== newScrollTop) { - this.node.scrollTop = newScrollTop; - } + this.setScrollTop(newScrollTop); } getSnapshotBeforeUpdate (prevProps, prevState) { -- cgit From e8ae77236be07935c0dd03795d9de1db71d4283e Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 8 Jan 2019 21:29:49 +0100 Subject: [Glitch] Only consider mouse move in scrolling on item insertion Port cc1f13dfd0d9fee7d568918af031f1cd6d1441f4 to glitch-soc --- app/javascript/flavours/glitch/components/scrollable_list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/scrollable_list.js b/app/javascript/flavours/glitch/components/scrollable_list.js index 09a22f633..7cd0774a9 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.js +++ b/app/javascript/flavours/glitch/components/scrollable_list.js @@ -145,7 +145,7 @@ export default class ScrollableList extends PureComponent { const someItemInserted = React.Children.count(prevProps.children) > 0 && React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); - if ((someItemInserted && this.node.scrollTop > 0) || this.mouseMovedRecently) { + if (someItemInserted && (this.node.scrollTop > 0 || this.mouseMovedRecently)) { return this.node.scrollHeight - this.node.scrollTop; } else { return null; -- cgit From d1da0a1086fa25f22739277fbf32ba1b3745317d Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Thu, 10 Jan 2019 12:24:02 +0100 Subject: Port a few public.js changes from upstream, move some code around glitch-soc's public.js was a bit out of date, and code was put inappropriately to the common public.js --- app/javascript/core/public.js | 10 ------- app/javascript/flavours/glitch/packs/public.js | 40 +++++++++++++++++--------- 2 files changed, 26 insertions(+), 24 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/core/public.js b/app/javascript/core/public.js index b5014a8c7..f00709dad 100644 --- a/app/javascript/core/public.js +++ b/app/javascript/core/public.js @@ -6,16 +6,6 @@ import ready from '../mastodon/ready'; const { delegate } = require('rails-ujs'); const { length } = require('stringz'); -ready(() => { - const history = createHistory(); - const detailedStatuses = document.querySelectorAll('.public-layout .detailed-status'); - const location = history.location; - if (detailedStatuses.length == 1 && (!location.state || !location.state.scrolledToDetailedStatus)) { - detailedStatuses[0].scrollIntoView(); - history.replace(location.pathname, {...location.state, scrolledToDetailedStatus: true}); - } -}); - delegate(document, '.webapp-btn', 'click', ({ target, button }) => { if (button !== 0) { return true; diff --git a/app/javascript/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js index 78e8f1053..996f8f3d1 100644 --- a/app/javascript/flavours/glitch/packs/public.js +++ b/app/javascript/flavours/glitch/packs/public.js @@ -2,14 +2,15 @@ import loadPolyfills from 'flavours/glitch/util/load_polyfills'; import ready from 'flavours/glitch/util/ready'; function main() { - const IntlRelativeFormat = require('intl-relativeformat').default; + const IntlMessageFormat = require('intl-messageformat').default; + const { timeAgoString } = require('flavours/glitch/components/relative_timestamp'); const emojify = require('flavours/glitch/util/emoji').default; const { getLocale } = require('locales'); - const { localeData } = getLocale(); + const { messages } = getLocale(); const React = require('react'); const ReactDOM = require('react-dom'); - - localeData.forEach(IntlRelativeFormat.__addLocaleData); + const Rellax = require('rellax'); + const createHistory = require('history').createBrowserHistory; ready(() => { const locale = document.documentElement.lang; @@ -22,8 +23,6 @@ function main() { minute: 'numeric', }); - const relativeFormat = new IntlRelativeFormat(locale); - [].forEach.call(document.querySelectorAll('.emojify'), (content) => { content.innerHTML = emojify(content.innerHTML); }); @@ -38,16 +37,13 @@ function main() { [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => { const datetime = new Date(content.getAttribute('datetime')); + const now = new Date(); content.title = dateTimeFormat.format(datetime); - content.textContent = relativeFormat.format(datetime); - }); - - [].forEach.call(document.querySelectorAll('.logo-button'), (content) => { - content.addEventListener('click', (e) => { - e.preventDefault(); - window.open(e.target.href, 'mastodon-intent', 'width=400,height=400,resizable=no,menubar=no,status=no,scrollbars=yes'); - }); + content.textContent = timeAgoString({ + formatMessage: ({ id, defaultMessage }, values) => (new IntlMessageFormat(messages[id] || defaultMessage, locale)).format(values), + formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date), + }, datetime, now, now.getFullYear()); }); const reactComponents = document.querySelectorAll('[data-component]'); @@ -55,11 +51,27 @@ function main() { import(/* webpackChunkName: "containers/media_container" */ 'flavours/glitch/containers/media_container') .then(({ default: MediaContainer }) => { const content = document.createElement('div'); + ReactDOM.render(, content); document.body.appendChild(content); }) .catch(error => console.error(error)); } + + const parallaxComponents = document.querySelectorAll('.parallax'); + + if (parallaxComponents.length > 0 ) { + new Rellax('.parallax', { speed: -1 }); + } + + const history = createHistory(); + const detailedStatuses = document.querySelectorAll('.public-layout .detailed-status'); + const location = history.location; + + if (detailedStatuses.length === 1 && (!location.state || !location.state.scrolledToDetailedStatus)) { + detailedStatuses[0].scrollIntoView(); + history.replace(location.pathname, { ...location.state, scrolledToDetailedStatus: true }); + } }); } -- cgit From 2b2584a37b50d94ae6a48d90879228fc7e5b0a9d Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Thu, 10 Jan 2019 20:19:45 +0100 Subject: [Glitch] Display fallback link card thumbnail when none is given Port 1512af2811cb5b2ffccac5452eb291b1af46f89d to glitch-soc --- .../flavours/glitch/features/status/components/card.js | 6 ++++++ app/javascript/flavours/glitch/styles/components/status.scss | 9 +++++++++ 2 files changed, 15 insertions(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/features/status/components/card.js b/app/javascript/flavours/glitch/features/status/components/card.js index 743fe779a..1e1604d5c 100644 --- a/app/javascript/flavours/glitch/features/status/components/card.js +++ b/app/javascript/flavours/glitch/features/status/components/card.js @@ -195,6 +195,12 @@ export default class Card extends React.PureComponent { {thumbnail}
); + } else { + embed = ( +
+ +
+ ); } return ( diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 38ead06cf..7b240224c 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -740,6 +740,15 @@ a.status-card { flex: 0 0 100px; background: lighten($ui-base-color, 8%); position: relative; + + .fa { + font-size: 21px; + position: absolute; + transform-origin: 50% 50%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } } .status-card.horizontal { -- cgit From ec441e029994e8e8e73f06a46ed14b34ae9f8d66 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Thu, 10 Jan 2019 20:21:20 +0100 Subject: [Glitch] Fix embed play icons regression Port bd5a8c7765102a166ec8909e4a3b7781ec5537d6 to glitch-soc --- app/javascript/flavours/glitch/styles/components/status.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 7b240224c..9d2757065 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -741,7 +741,7 @@ a.status-card { background: lighten($ui-base-color, 8%); position: relative; - .fa { + & > .fa { font-size: 21px; position: absolute; transform-origin: 50% 50%; -- cgit From 147f4f9fd2163a2f6ebb1e4bb12aae9146835431 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Thu, 10 Jan 2019 20:22:28 +0100 Subject: [Glitch] refactored account.js Port 57c91fbbed7fa5f44c7144194e313f003c2ef8b3 to glitch-soc --- app/javascript/flavours/glitch/components/account.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/account.js b/app/javascript/flavours/glitch/components/account.js index 80f20b8ad..072c601e0 100644 --- a/app/javascript/flavours/glitch/components/account.js +++ b/app/javascript/flavours/glitch/components/account.js @@ -67,10 +67,10 @@ export default class Account extends ImmutablePureComponent { if (hidden) { return ( -
+ {account.get('display_name')} {account.get('username')} -
+ ); } -- cgit From e03813cf0a6c4261fa97403e453a54ff051a6f87 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Thu, 10 Jan 2019 20:25:12 +0100 Subject: [Glitch] Stop gifv timeline preview explicitly when open the media gallery Port cf3c0fc38cd2650a421f46a5f221d1d645ef6c7b to glitch-soc --- app/javascript/flavours/glitch/components/media_gallery.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index 10afeb2eb..d0226bbbb 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -71,6 +71,10 @@ class Item extends React.PureComponent { const { index, onClick } = this.props; if (e.button === 0 && !(e.ctrlKey || e.metaKey)) { + if (this.hoverToPlay()) { + e.target.pause(); + e.target.currentTime = 0; + } e.preventDefault(); onClick(index); } -- cgit From 7cc800d0dff99b9cc5777ab418af0b6afaf7fcc2 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Thu, 10 Jan 2019 20:27:20 +0100 Subject: [Glitch] Redesign admin instances area Port SCSS changes from 1c6588accca23599ea1537ec527a5be04408b2af --- app/javascript/flavours/glitch/styles/admin.scss | 14 ++++++++++++++ app/javascript/flavours/glitch/styles/dashboard.scss | 1 + 2 files changed, 15 insertions(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 8b111a936..e7124a2c0 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -151,6 +151,20 @@ $no-columns-breakpoint: 600px; font-weight: 500; } + .directory__tag a { + box-shadow: none; + } + + .directory__tag h4 { + font-size: 18px; + font-weight: 700; + color: $primary-text-color; + text-transform: none; + padding-bottom: 0; + margin-bottom: 0; + border-bottom: none; + } + & > p { font-size: 14px; line-height: 18px; diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss index 1f96e7368..e4564f062 100644 --- a/app/javascript/flavours/glitch/styles/dashboard.scss +++ b/app/javascript/flavours/glitch/styles/dashboard.scss @@ -39,6 +39,7 @@ color: $primary-text-color; font-family: $font-display, sans-serif; margin-bottom: 20px; + line-height: 30px; } &__text { -- cgit From 394525e32994e605093c87d3a9fad2a4202f3401 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Thu, 10 Jan 2019 20:28:24 +0100 Subject: [Glitch] Postpone scroll-to-detailed status after react components are loaded Port 70801b850c78d7879182eeba4eae509af42fafeb to glitch-soc --- app/javascript/flavours/glitch/packs/public.js | 28 +++++++++++++++++--------- 1 file changed, 18 insertions(+), 10 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js index 996f8f3d1..342c5265e 100644 --- a/app/javascript/flavours/glitch/packs/public.js +++ b/app/javascript/flavours/glitch/packs/public.js @@ -12,6 +12,17 @@ function main() { const Rellax = require('rellax'); const createHistory = require('history').createBrowserHistory; + const scrollToDetailedStatus = () => { + const history = createHistory(); + const detailedStatuses = document.querySelectorAll('.public-layout .detailed-status'); + const location = history.location; + + if (detailedStatuses.length === 1 && (!location.state || !location.state.scrolledToDetailedStatus)) { + detailedStatuses[0].scrollIntoView(); + history.replace(location.pathname, { ...location.state, scrolledToDetailedStatus: true }); + } + }; + ready(() => { const locale = document.documentElement.lang; @@ -54,8 +65,14 @@ function main() { ReactDOM.render(, content); document.body.appendChild(content); + scrollToDetailedStatus(); }) - .catch(error => console.error(error)); + .catch(error => { + console.error(error); + scrollToDetailedStatus(); + }); + } else { + scrollToDetailedStatus(); } const parallaxComponents = document.querySelectorAll('.parallax'); @@ -63,15 +80,6 @@ function main() { if (parallaxComponents.length > 0 ) { new Rellax('.parallax', { speed: -1 }); } - - const history = createHistory(); - const detailedStatuses = document.querySelectorAll('.public-layout .detailed-status'); - const location = history.location; - - if (detailedStatuses.length === 1 && (!location.state || !location.state.scrolledToDetailedStatus)) { - detailedStatuses[0].scrollIntoView(); - history.replace(location.pathname, { ...location.state, scrolledToDetailedStatus: true }); - } }); } -- cgit