From 3b707bdc12cd6d727e712cbd8a0055fad0ea50e8 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 27 Nov 2018 15:21:57 +0100 Subject: [Glitch] Volume sliders for videos Port f978afa4871c22caecb625a0b3eba533edfa309b to glitch-soc --- .../flavours/glitch/styles/components/media.scss | 57 +++++++++++++++++++++- 1 file changed, 56 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/styles/components') diff --git a/app/javascript/flavours/glitch/styles/components/media.scss b/app/javascript/flavours/glitch/styles/components/media.scss index 40a144de4..e8011bde9 100644 --- a/app/javascript/flavours/glitch/styles/components/media.scss +++ b/app/javascript/flavours/glitch/styles/components/media.scss @@ -277,6 +277,19 @@ z-index: 100; } +.detailed, +.fullscreen { + .video-player__volume__current, + .video-player__volume::before { + bottom: 27px; + } + + .video-player__volume__handle { + bottom: 23px; + } + +} + .video-player { overflow: hidden; position: relative; @@ -432,7 +445,7 @@ &__time-current { color: $white; - margin-left: 10px; + margin-left: 60px; } &__time-sep { @@ -445,6 +458,48 @@ color: $white; } + &__volume { + cursor: pointer; + height: 24px; + display: inline; + + &::before { + content: ""; + width: 50px; + background: rgba($white, 0.35); + border-radius: 4px; + display: block; + position: absolute; + height: 4px; + left: 70px; + bottom: 20px; + } + + &__current { + display: block; + position: absolute; + height: 4px; + border-radius: 4px; + left: 70px; + bottom: 20px; + background: lighten($ui-highlight-color, 8%); + } + + &__handle { + position: absolute; + z-index: 3; + border-radius: 50%; + width: 12px; + height: 12px; + bottom: 16px; + left: 70px; + transition: opacity .1s ease; + background: lighten($ui-highlight-color, 8%); + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); + pointer-events: none; + } + } + &__seek { cursor: pointer; height: 24px; -- cgit From c18bb5d2453a74a2b3dcfc6cfb1d8e9a38a2f810 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 28 Nov 2018 16:57:26 +0100 Subject: Switch “cycling” reply policy link to set of radio inputs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #832 --- .../glitch/features/list_timeline/index.js | 36 ++++++++++++++-------- .../flavours/glitch/styles/components/index.scss | 22 +++++++++++++ 2 files changed, 45 insertions(+), 13 deletions(-) (limited to 'app/javascript/flavours/glitch/styles/components') diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.js b/app/javascript/flavours/glitch/features/list_timeline/index.js index edefc2006..ef829b937 100644 --- a/app/javascript/flavours/glitch/features/list_timeline/index.js +++ b/app/javascript/flavours/glitch/features/list_timeline/index.js @@ -17,9 +17,9 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator'; const messages = defineMessages({ deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' }, deleteConfirm: { id: 'confirmations.delete_list.confirm', defaultMessage: 'Delete' }, - all_replies: { id: 'lists.replies_policy.all_replies', defaultMessage: 'to any followed user' }, - no_replies: { id: 'lists.replies_policy.no_replies', defaultMessage: 'none' }, - list_replies: { id: 'lists.replies_policy.list_replies', defaultMessage: 'only to list' }, + all_replies: { id: 'lists.replies_policy.all_replies', defaultMessage: 'any followed user' }, + no_replies: { id: 'lists.replies_policy.no_replies', defaultMessage: 'no one' }, + list_replies: { id: 'lists.replies_policy.list_replies', defaultMessage: 'members of the list' }, }); const mapStateToProps = (state, props) => ({ @@ -114,11 +114,10 @@ export default class ListTimeline extends React.PureComponent { })); } - handleRepliesPolicyClick = () => { + handleRepliesPolicyChange = ({ target }) => { const { dispatch, list } = this.props; const { id } = this.props.params; - const replies_policy = {'all_replies': 'no_replies', 'no_replies': 'list_replies', 'list_replies': 'all_replies'}[list.get('replies_policy')]; - this.props.dispatch(updateList(id, undefined, false, replies_policy)); + this.props.dispatch(updateList(id, undefined, false, target.value)); } render () { @@ -166,15 +165,26 @@ export default class ListTimeline extends React.PureComponent { - - { replies_policy !== undefined && ( - - ) - } + { replies_policy !== undefined && ( +
+
+
+ + { ['no_replies', 'list_replies', 'all_replies'].map(policy => ( +
+ + +
+ ))} +
+
+
+ )} +
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index b16b13d87..3e3ef6b52 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1062,6 +1062,7 @@ } .setting-toggle__label, +.setting-radio__label, .setting-meta__label { color: $darker-text-color; display: inline-block; @@ -1070,6 +1071,27 @@ vertical-align: middle; } +.setting-radio { + display: block; + line-height: 18px; +} + +.setting-radio__label { + margin-bottom: 0; +} + +.column-settings__row legend { + color: $darker-text-color; + cursor: default; + display: block; + font-weight: 500; + margin-top: 10px; +} + +.setting-radio__input { + vertical-align: middle; +} + .setting-meta__label { float: right; } -- cgit From 922d05864f4ba37a4026cd5f7e6e6ed5417a7404 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 28 Nov 2018 15:01:40 +0100 Subject: Add error boundary component to catch Web UI crashes --- .../flavours/glitch/components/error_boundary.js | 92 ++++++++++++++++++++++ .../flavours/glitch/containers/mastodon.js | 13 +-- .../glitch/styles/components/error_boundary.scss | 32 ++++++++ .../flavours/glitch/styles/components/index.scss | 1 + 4 files changed, 133 insertions(+), 5 deletions(-) create mode 100644 app/javascript/flavours/glitch/components/error_boundary.js create mode 100644 app/javascript/flavours/glitch/styles/components/error_boundary.scss (limited to 'app/javascript/flavours/glitch/styles/components') diff --git a/app/javascript/flavours/glitch/components/error_boundary.js b/app/javascript/flavours/glitch/components/error_boundary.js new file mode 100644 index 000000000..fd37383f2 --- /dev/null +++ b/app/javascript/flavours/glitch/components/error_boundary.js @@ -0,0 +1,92 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; + +export default class ErrorBoundary extends React.PureComponent { + + static propTypes = { + children: PropTypes.node, + }; + + state = { + hasError: false, + stackTrace: undefined, + componentStack: undefined, + } + + componentDidCatch(error, info) { + this.setState({ + hasError: true, + stackTrace: error.stack, + componentStack: info && info.componentStack, + }); + } + + handleReload(e) { + e.preventDefault(); + window.location.reload(); + } + + render() { + const { hasError, stackTrace, componentStack } = this.state; + + if (!hasError) return this.props.children; + + let debugInfo = ''; + if (stackTrace) { + debugInfo += 'Stack trace\n-----------\n\n```\n' + stackTrace.toString() + '\n```'; + } + if (componentStack) { + if (debugInfo) { + debugInfo += '\n\n\n'; + } + debugInfo += 'React component stack\n---------------------\n\n```\n' + componentStack.toString() + '\n```'; + } + + return ( +
+
+

+

+ +

    +
  • + }} + /> + { debugInfo !== '' && ( +
    + +