From e900b03e380121923906f3de21d5e3551d902e06 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 16 Mar 2019 20:10:42 +0100 Subject: [Glitch] Fix scrollbar styles on compose textarea, small bugs Port 6a3f08661f8d23e5f93717f36df1463842bfd936 to glitch-soc --- .../flavours/glitch/features/composer/poll_form/components/poll_form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours/glitch/features') diff --git a/app/javascript/flavours/glitch/features/composer/poll_form/components/poll_form.js b/app/javascript/flavours/glitch/features/composer/poll_form/components/poll_form.js index 7ee28e304..1915b62d5 100644 --- a/app/javascript/flavours/glitch/features/composer/poll_form/components/poll_form.js +++ b/app/javascript/flavours/glitch/features/composer/poll_form/components/poll_form.js @@ -51,7 +51,7 @@ class Option extends React.PureComponent { -- cgit From 49bea8c46b006d8c86285c8b1158cd700dc2eb45 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 16 Mar 2019 12:13:15 -0700 Subject: [Glitch] fix: update to emoji-mart 2.10.0 Port db06b25376ac7e844e86fb9890fa9f1c2edd2d60 to glitch-soc --- .../flavours/glitch/features/emoji_picker/index.js | 51 +++++++++++++++++----- .../flavours/glitch/styles/components/emoji.scss | 4 +- .../glitch/styles/components/emoji_picker.scss | 25 +++++++++-- .../flavours/glitch/util/emoji/emoji_picker.js | 4 +- 4 files changed, 65 insertions(+), 19 deletions(-) (limited to 'app/javascript/flavours/glitch/features') diff --git a/app/javascript/flavours/glitch/features/emoji_picker/index.js b/app/javascript/flavours/glitch/features/emoji_picker/index.js index a78117971..d963039dc 100644 --- a/app/javascript/flavours/glitch/features/emoji_picker/index.js +++ b/app/javascript/flavours/glitch/features/emoji_picker/index.js @@ -129,6 +129,7 @@ class ModifierPickerMenu extends React.PureComponent { active: PropTypes.bool, onSelect: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, + modifier: PropTypes.number, }; handleClick = e => { @@ -165,20 +166,36 @@ class ModifierPickerMenu extends React.PureComponent { setRef = c => { this.node = c; + if (this.node) { + this.node.querySelector('li:first-child button').focus(); // focus the first element when opened + } } render () { - const { active } = this.props; + const { active, modifier } = this.props; return ( -
- - - - - - -
+ ); } @@ -210,10 +227,22 @@ class ModifierPicker extends React.PureComponent { render () { const { active, modifier } = this.props; + function setRef(ref) { + if (!ref) { + return; + } + // TODO: It would be nice if we could pass props directly to emoji-mart's buttons. + const button = ref.querySelector('button'); + button.setAttribute('aria-haspopup', 'true'); + button.setAttribute('aria-expanded', active); + } + return (
- - +
+ +
+
); } diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss index dd386d698..ccfd42f28 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji.scss @@ -44,11 +44,11 @@ box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); overflow: hidden; - button { + li { display: block; cursor: pointer; border: 0; - padding: 4px 8px; + padding: 3px 8px; background: transparent; &:hover, diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index dcc551c5b..171623352 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -1,3 +1,5 @@ +@import '~emoji-mart/css/emoji-mart.css'; + .emoji-mart { &, * { @@ -51,6 +53,14 @@ &:hover { color: darken($lighter-text-color, 4%); + + svg { + fill: darken($lighter-text-color, 4%); + } + } + + svg { + fill: $lighter-text-color; } } @@ -59,11 +69,19 @@ &:hover { color: darken($highlight-text-color, 4%); + + svg { + fill: darken($highlight-text-color, 4%); + } } .emoji-mart-anchor-bar { bottom: 0; } + + svg { + fill: $highlight-text-color; + } } .emoji-mart-anchor-bar { @@ -83,7 +101,6 @@ } svg { - fill: currentColor; max-height: 18px; } } @@ -103,15 +120,14 @@ } .emoji-mart-search { - padding: 10px; - padding-right: 45px; + margin: 10px 40px 10px 5px; background: $simple-background-color; input { font-size: 14px; font-weight: 400; padding: 7px 9px; - font-family: inherit; + font-family: $font-sans-serif; display: block; width: 100%; background: rgba($ui-secondary-color, 0.3); @@ -166,6 +182,7 @@ font-weight: 500; padding: 5px 6px; background: $simple-background-color; + font-family: $font-sans-serif; } } diff --git a/app/javascript/flavours/glitch/util/emoji/emoji_picker.js b/app/javascript/flavours/glitch/util/emoji/emoji_picker.js index 044d38cb2..73fcaa8c8 100644 --- a/app/javascript/flavours/glitch/util/emoji/emoji_picker.js +++ b/app/javascript/flavours/glitch/util/emoji/emoji_picker.js @@ -1,5 +1,5 @@ -import Picker from 'emoji-mart/dist-es/components/picker/picker'; -import Emoji from 'emoji-mart/dist-es/components/emoji/emoji'; +import Picker from 'emoji-mart/dist-modern/components/picker/picker'; +import Emoji from 'emoji-mart/dist-modern/components/emoji/emoji'; export { Picker, -- cgit From 2a93c8801579d3cf8b168d215be404aaac49e5e5 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 18 Mar 2019 18:34:56 +0100 Subject: [Glitch] Disable real-time updates on public pages to improve readability Port 42c581c45853cf08f2c9c521d59a2194ef2d9c61 to glitch-soc --- .../glitch/features/standalone/hashtag_timeline/index.js | 9 --------- .../glitch/features/standalone/public_timeline/index.js | 13 ------------- 2 files changed, 22 deletions(-) (limited to 'app/javascript/flavours/glitch/features') diff --git a/app/javascript/flavours/glitch/features/standalone/hashtag_timeline/index.js b/app/javascript/flavours/glitch/features/standalone/hashtag_timeline/index.js index 17f064713..4fbd504ef 100644 --- a/app/javascript/flavours/glitch/features/standalone/hashtag_timeline/index.js +++ b/app/javascript/flavours/glitch/features/standalone/hashtag_timeline/index.js @@ -3,7 +3,6 @@ import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { expandHashtagTimeline } from 'flavours/glitch/actions/timelines'; -import { connectHashtagStream } from 'flavours/glitch/actions/streaming'; import Masonry from 'react-masonry-infinite'; import { List as ImmutableList } from 'immutable'; import DetailedStatusContainer from 'flavours/glitch/features/status/containers/detailed_status_container'; @@ -31,14 +30,6 @@ class HashtagTimeline extends React.PureComponent { const { dispatch, hashtag } = this.props; dispatch(expandHashtagTimeline(hashtag)); - this.disconnect = dispatch(connectHashtagStream(hashtag, hashtag)); - } - - componentWillUnmount () { - if (this.disconnect) { - this.disconnect(); - this.disconnect = null; - } } handleLoadMore = () => { diff --git a/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js b/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js index 5e2b3fc6d..5f8a369ff 100644 --- a/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js +++ b/app/javascript/flavours/glitch/features/standalone/public_timeline/index.js @@ -3,7 +3,6 @@ import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { expandPublicTimeline, expandCommunityTimeline } from 'flavours/glitch/actions/timelines'; -import { connectPublicStream, connectCommunityStream } from 'flavours/glitch/actions/streaming'; import Masonry from 'react-masonry-infinite'; import { List as ImmutableList, Map as ImmutableMap } from 'immutable'; import DetailedStatusContainer from 'flavours/glitch/features/status/containers/detailed_status_container'; @@ -42,24 +41,12 @@ class PublicTimeline extends React.PureComponent { } } - componentWillUnmount () { - this._disconnect(); - } - _connect () { const { dispatch, local } = this.props; dispatch(local ? expandCommunityTimeline() : expandPublicTimeline()); - this.disconnect = dispatch(local ? connectCommunityStream() : connectPublicStream()); } - _disconnect () { - if (this.disconnect) { - this.disconnect(); - this.disconnect = null; - } - } - handleLoadMore = () => { const { dispatch, statusIds, local } = this.props; const maxId = statusIds.last(); -- cgit