From 47c8707f01d51e292f5009cd1027cbdf10961a0d Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 16 Mar 2019 11:23:22 +0100 Subject: [Glitch] Add relationship manager UI Port SCSS changes from 1c113fd72df18999de1d6f09fa3790dd1f715506 to glitch-soc --- app/javascript/flavours/glitch/styles/tables.scss | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss index 296182ff5..11845fb17 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/tables.scss @@ -140,6 +140,15 @@ a.table-action-link { input { margin-top: 8px; } + + &--aligned { + display: flex; + align-items: center; + + input { + margin-top: 0; + } + } } &__actions, @@ -183,6 +192,10 @@ a.table-action-link { &__content { padding-top: 12px; padding-bottom: 16px; + + &--unpadded { + padding: 0; + } } } @@ -193,4 +206,10 @@ a.table-action-link { font-weight: 700; } } + + .nothing-here { + border: 1px solid darken($ui-base-color, 8%); + border-top: 0; + box-shadow: none; + } } -- cgit From 0fbe90e2d3cfc2c5d1fd12ea564daa52a83ec0ac Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 16 Mar 2019 16:21:20 +0100 Subject: Fix settings/flavours Update theming system to use new paths for media files --- app/javascript/flavours/glitch/theme.yml | 6 ++---- app/javascript/flavours/vanilla/theme.yml | 6 ++---- app/views/settings/flavours/show.html.haml | 2 +- 3 files changed, 5 insertions(+), 9 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/theme.yml b/app/javascript/flavours/glitch/theme.yml index d8f313381..587cc0f1e 100644 --- a/app/javascript/flavours/glitch/theme.yml +++ b/app/javascript/flavours/glitch/theme.yml @@ -28,10 +28,8 @@ pack: locales: locales # (OPTIONAL) A file to use as the preview screenshot for the flavour, -# or an array thereof. These filenames must be unique across all -# images (regardless of path), so it's a good idea to namespace them -# to your theme. It's up to you to let webpack know to compile them. -screenshot: glitch-preview.jpg +# or an array thereof. These are the full path from `app/javascript/`. +screenshot: flavours/glitch/images/glitch-preview.jpg # (OPTIONAL) The directory which contains the pack files. # Defaults to the theme directory (`app/javascript/themes/[theme]`), diff --git a/app/javascript/flavours/vanilla/theme.yml b/app/javascript/flavours/vanilla/theme.yml index a215b2625..42e26daea 100644 --- a/app/javascript/flavours/vanilla/theme.yml +++ b/app/javascript/flavours/vanilla/theme.yml @@ -26,10 +26,8 @@ pack: locales: ../../mastodon/locales # (OPTIONAL) A file to use as the preview screenshot for the flavour, -# or an array thereof. These filenames must be unique across all -# images (regardless of path), so it's a good idea to namespace them -# to your theme. It's up to you to let webpack know to compile them. -screenshot: screenshot.jpg +# or an array thereof. These are the full path from `app/javascript/`. +screenshot: images/screenshot.jpg # (OPTIONAL) The directory which contains the pack files. # Defaults to this directory (`app/javascript/flavour/[flavour]`), diff --git a/app/views/settings/flavours/show.html.haml b/app/views/settings/flavours/show.html.haml index a5126d9c5..c3f785aa0 100644 --- a/app/views/settings/flavours/show.html.haml +++ b/app/views/settings/flavours/show.html.haml @@ -5,7 +5,7 @@ = render 'shared/error_messages', object: current_user - Themes.instance.flavour(@selected)['screenshot'].each do |screen| - %img.flavour-screen{ src: asset_pack_path(screen) } + %img.flavour-screen{ src: full_pack_url("media/#{screen}") } .flavour-description = t "flavours.#{@selected}.description", default: '' -- cgit 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 --- .../glitch/features/composer/poll_form/components/poll_form.js | 2 +- app/javascript/flavours/glitch/styles/components/composer.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) (limited to 'app/javascript/flavours') 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 { diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index e14775e44..f0729bedc 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -147,6 +147,11 @@ font-size: 14px; font-family: inherit; resize: none; + scrollbar-color: initial; + + &::-webkit-scrollbar { + all: unset; + } &:disabled { background: $ui-secondary-color } &:focus { outline: 0 } -- 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') 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 ( -
- - - - - - -
+
    + {[1, 2, 3, 4, 5, 6].map(i => ( +
  • + +
    • + ))} +
); } @@ -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 200cd3b5a70f7f1f187dee780858f383260c439a Mon Sep 17 00:00:00 2001 From: ThibG Date: Sun, 17 Mar 2019 03:13:29 +0100 Subject: [Glitch] Save quick filter settings when selecting a different filter Port 7477db7268f2a4c158e5f7683493a728d632f7e2 to glitch-soc --- app/javascript/flavours/glitch/actions/notifications.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/actions/notifications.js b/app/javascript/flavours/glitch/actions/notifications.js index dd4f5fd44..57fecf63d 100644 --- a/app/javascript/flavours/glitch/actions/notifications.js +++ b/app/javascript/flavours/glitch/actions/notifications.js @@ -7,6 +7,7 @@ import { importFetchedStatus, importFetchedStatuses, } from './importer'; +import { saveSettings } from './settings'; import { defineMessages } from 'react-intl'; import { List as ImmutableList } from 'immutable'; import { unescapeHTML } from 'flavours/glitch/util/html'; @@ -286,5 +287,6 @@ export function setFilter (filterType) { value: filterType, }); dispatch(expandNotifications()); + dispatch(saveSettings()); }; }; -- cgit From 841b920af5de8e3188111ca4dbea0c5105bde88c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 17 Mar 2019 22:36:54 +0100 Subject: [Glitch] Fix relationship manager on narrow screens Port 7130d6e51291b08df59f9580c7d6e1c1d97e7dad to glitch-soc --- app/javascript/flavours/glitch/styles/tables.scss | 24 +++++++++++++++++++++++ 1 file changed, 24 insertions(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss index 11845fb17..154844665 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/tables.scss @@ -149,6 +149,10 @@ a.table-action-link { margin-top: 0; } } + + @media screen and (max-width: $no-gap-breakpoint) { + display: none; + } } &__actions, @@ -170,6 +174,10 @@ a.table-action-link { text-align: right; padding-right: 16px - 5px; } + + @media screen and (max-width: $no-gap-breakpoint) { + display: none; + } } &__row { @@ -177,6 +185,12 @@ a.table-action-link { border-top: 0; background: darken($ui-base-color, 4%); + @media screen and (max-width: $no-gap-breakpoint) { + &:first-child { + border-top: 1px solid darken($ui-base-color, 8%); + } + } + &:hover { background: darken($ui-base-color, 2%); } @@ -211,5 +225,15 @@ a.table-action-link { border: 1px solid darken($ui-base-color, 8%); border-top: 0; box-shadow: none; + + @media screen and (max-width: $no-gap-breakpoint) { + border-top: 1px solid darken($ui-base-color, 8%); + } + } + + @media screen and (max-width: 870px) { + .accounts-table tbody td.optional { + display: none; + } } } -- 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') 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 From 4d01d9c46f9628a2c1e350f34587472dd9e7ffee Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 18 Mar 2019 21:00:55 +0100 Subject: [Glitch] Add Keybase integration Port SCSS changes from 9c4cbdbafb0324ae259e10865b90ed1ed0255bdd to glitch-soc --- app/javascript/flavours/glitch/styles/forms.scss | 55 ++++++++++++++++++++++++ 1 file changed, 55 insertions(+) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss index 6051c1d00..9ef45e425 100644 --- a/app/javascript/flavours/glitch/styles/forms.scss +++ b/app/javascript/flavours/glitch/styles/forms.scss @@ -801,3 +801,58 @@ code { } } } + +.connection-prompt { + margin-bottom: 25px; + + .fa-link { + background-color: darken($ui-base-color, 4%); + border-radius: 100%; + font-size: 24px; + padding: 10px; + } + + &__column { + align-items: center; + display: flex; + flex: 1; + flex-direction: column; + flex-shrink: 1; + + &-sep { + flex-grow: 0; + overflow: visible; + position: relative; + z-index: 1; + } + } + + .account__avatar { + margin-bottom: 20px; + } + + &__connection { + background-color: lighten($ui-base-color, 8%); + box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); + border-radius: 4px; + padding: 25px 10px; + position: relative; + text-align: center; + + &::after { + background-color: darken($ui-base-color, 4%); + content: ''; + display: block; + height: 100%; + left: 50%; + position: absolute; + width: 1px; + } + } + + &__row { + align-items: center; + display: flex; + flex-direction: row; + } +} -- cgit From 803c350ef5500229eafce222370c5f97a7532e41 Mon Sep 17 00:00:00 2001 From: ThibG Date: Tue, 19 Mar 2019 23:47:10 +0100 Subject: [Glitch] Reduce padding around logo on landing page Port 158c31b9df538691666e5b91f48a0afecd2985fe to glitch-soc --- app/javascript/flavours/glitch/styles/about.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss index 7a457600e..d4ead07a1 100644 --- a/app/javascript/flavours/glitch/styles/about.scss +++ b/app/javascript/flavours/glitch/styles/about.scss @@ -660,7 +660,7 @@ $small-breakpoint: 960px; display: flex; justify-content: center; align-items: center; - padding: 100px; + padding: 50px; img { height: 52px; -- cgit From 8b5b686f087f99d1a2b54e0760add8180d77fa7e Mon Sep 17 00:00:00 2001 From: ThibG Date: Wed, 20 Mar 2019 17:29:12 +0100 Subject: [Glitch] Add support for custom emojis in poll options Fixes #956 Port 80f0910e2141b24082b9143266a9a6cf1ef6a516 to glitch-soc --- .../flavours/glitch/actions/importer/normalizer.js | 4 +++- app/javascript/flavours/glitch/components/poll.js | 13 ++++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) (limited to 'app/javascript/flavours') diff --git a/app/javascript/flavours/glitch/actions/importer/normalizer.js b/app/javascript/flavours/glitch/actions/importer/normalizer.js index ccd84364e..a8c3fe16a 100644 --- a/app/javascript/flavours/glitch/actions/importer/normalizer.js +++ b/app/javascript/flavours/glitch/actions/importer/normalizer.js @@ -69,9 +69,11 @@ export function normalizeStatus(status, normalOldStatus) { export function normalizePoll(poll) { const normalPoll = { ...poll }; + const emojiMap = makeEmojiMap(normalPoll); + normalPoll.options = poll.options.map(option => ({ ...option, - title_emojified: emojify(escapeTextContentForBrowser(option.title)), + title_emojified: emojify(escapeTextContentForBrowser(option.title), emojiMap), })); return normalPoll; diff --git a/app/javascript/flavours/glitch/components/poll.js b/app/javascript/flavours/glitch/components/poll.js index a1b297ce7..56331cb29 100644 --- a/app/javascript/flavours/glitch/components/poll.js +++ b/app/javascript/flavours/glitch/components/poll.js @@ -44,6 +44,11 @@ const timeRemainingString = (intl, date, now) => { return relativeTime; }; +const makeEmojiMap = record => record.get('emojis').reduce((obj, emoji) => { + obj[`:${emoji.get('shortcode')}:`] = emoji.toJS(); + return obj; +}, {}); + export default @injectIntl class Poll extends ImmutablePureComponent { @@ -99,6 +104,12 @@ class Poll extends ImmutablePureComponent { const active = !!this.state.selected[`${optionIndex}`]; const showResults = poll.get('voted') || poll.get('expired'); + let titleEmojified = option.get('title_emojified'); + if (!titleEmojified) { + const emojiMap = makeEmojiMap(poll); + titleEmojified = emojify(escapeTextContentForBrowser(option.get('title')), emojiMap); + } + return (
  • {showResults && ( @@ -122,7 +133,7 @@ class Poll extends ImmutablePureComponent { {!showResults && } {showResults && {Math.round(percent)}%} - +
    • ); -- cgit