diff options
9 files changed, 68 insertions, 20 deletions
diff --git a/app/javascript/flavours/glitch/actions/announcements.js b/app/javascript/flavours/glitch/actions/announcements.js index b4e8cee2f..930493b6a 100644 --- a/app/javascript/flavours/glitch/actions/announcements.js +++ b/app/javascript/flavours/glitch/actions/announcements.js @@ -56,12 +56,27 @@ export const updateAnnouncements = announcement => ({ }); export const addReaction = (announcementId, name) => (dispatch, getState) => { - dispatch(addReactionRequest(announcementId, name)); + const announcement = getState().getIn(['announcements', 'items']).find(x => x.get('id') === announcementId); + + let alreadyAdded = false; + + if (announcement) { + const reaction = announcement.get('reactions').find(x => x.get('name') === name); + if (reaction && reaction.get('me')) { + alreadyAdded = true; + } + } + + if (!alreadyAdded) { + dispatch(addReactionRequest(announcementId, name, alreadyAdded)); + } api(getState).put(`/api/v1/announcements/${announcementId}/reactions/${name}`).then(() => { - dispatch(addReactionSuccess(announcementId, name)); + dispatch(addReactionSuccess(announcementId, name, alreadyAdded)); }).catch(err => { - dispatch(addReactionFail(announcementId, name, err)); + if (!alreadyAdded) { + dispatch(addReactionFail(announcementId, name, err)); + } }); }; diff --git a/app/javascript/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js index dd1162429..be45c9535 100644 --- a/app/javascript/flavours/glitch/components/column_header.js +++ b/app/javascript/flavours/glitch/components/column_header.js @@ -42,6 +42,7 @@ class ColumnHeader extends React.PureComponent { onMove: PropTypes.func, onClick: PropTypes.func, intl: PropTypes.object.isRequired, + appendContent: PropTypes.node, }; state = { @@ -106,7 +107,7 @@ class ColumnHeader extends React.PureComponent { } render () { - const { intl, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive, placeholder } = this.props; + const { intl, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive, placeholder, appendContent } = this.props; const { collapsed, animating, animatingNCD } = this.state; let title = this.props.title; @@ -229,6 +230,8 @@ class ColumnHeader extends React.PureComponent { {(!collapsed || animating) && collapsedContent} </div> </div> + + {appendContent} </div> ); diff --git a/app/javascript/flavours/glitch/features/home_timeline/index.js b/app/javascript/flavours/glitch/features/home_timeline/index.js index 457ac051c..5e36e5f76 100644 --- a/app/javascript/flavours/glitch/features/home_timeline/index.js +++ b/app/javascript/flavours/glitch/features/home_timeline/index.js @@ -142,12 +142,11 @@ class HomeTimeline extends React.PureComponent { pinned={pinned} multiColumn={multiColumn} extraButton={announcementsButton} + appendContent={hasAnnouncements && showAnnouncements && <AnnouncementsContainer />} > <ColumnSettingsContainer /> </ColumnHeader> - {hasAnnouncements && showAnnouncements && <AnnouncementsContainer />} - <StatusListContainer trackScroll={!pinned} scrollKey={`home_timeline-${columnId}`} diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss index 6bf9e2a0c..00585cb1c 100644 --- a/app/javascript/flavours/glitch/styles/components/announcements.scss +++ b/app/javascript/flavours/glitch/styles/components/announcements.scss @@ -38,7 +38,6 @@ .announcements { background: lighten($ui-base-color, 8%); - border-top: 1px solid $ui-base-color; font-size: 13px; display: flex; align-items: flex-end; diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 6ba9698c5..525dcaf90 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -224,13 +224,16 @@ .column-header__wrapper { position: relative; flex: 0 0 auto; + z-index: 1; &.active { + box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3); + &::before { display: block; content: ""; position: absolute; - top: 35px; + bottom: -13px; left: 0; right: 0; margin: 0 auto; @@ -241,6 +244,11 @@ background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); } } + + .announcements { + z-index: 1; + position: relative; + } } .column-header { @@ -273,8 +281,6 @@ } &.active { - box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); - .column-header__icon { color: $highlight-text-color; text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); @@ -378,6 +384,8 @@ color: $darker-text-color; transition: max-height 150ms ease-in-out, opacity 300ms linear; opacity: 1; + z-index: 1; + position: relative; &.collapsed { max-height: 0; diff --git a/app/javascript/mastodon/actions/announcements.js b/app/javascript/mastodon/actions/announcements.js index 64bf5ef91..53b19a6fd 100644 --- a/app/javascript/mastodon/actions/announcements.js +++ b/app/javascript/mastodon/actions/announcements.js @@ -56,12 +56,27 @@ export const updateAnnouncements = announcement => ({ }); export const addReaction = (announcementId, name) => (dispatch, getState) => { - dispatch(addReactionRequest(announcementId, name)); + const announcement = getState().getIn(['announcements', 'items']).find(x => x.get('id') === announcementId); + + let alreadyAdded = false; + + if (announcement) { + const reaction = announcement.get('reactions').find(x => x.get('name') === name); + if (reaction && reaction.get('me')) { + alreadyAdded = true; + } + } + + if (!alreadyAdded) { + dispatch(addReactionRequest(announcementId, name, alreadyAdded)); + } api(getState).put(`/api/v1/announcements/${announcementId}/reactions/${name}`).then(() => { - dispatch(addReactionSuccess(announcementId, name)); + dispatch(addReactionSuccess(announcementId, name, alreadyAdded)); }).catch(err => { - dispatch(addReactionFail(announcementId, name, err)); + if (!alreadyAdded) { + dispatch(addReactionFail(announcementId, name, err)); + } }); }; diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js index 0038995c8..ea82f9ef9 100644 --- a/app/javascript/mastodon/components/column_header.js +++ b/app/javascript/mastodon/components/column_header.js @@ -33,6 +33,7 @@ class ColumnHeader extends React.PureComponent { onPin: PropTypes.func, onMove: PropTypes.func, onClick: PropTypes.func, + appendContent: PropTypes.node, }; state = { @@ -81,7 +82,7 @@ class ColumnHeader extends React.PureComponent { } render () { - const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder } = this.props; + const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent } = this.props; const { collapsed, animating } = this.state; const wrapperClassName = classNames('column-header__wrapper', { @@ -172,6 +173,8 @@ class ColumnHeader extends React.PureComponent { {(!collapsed || animating) && collapsedContent} </div> </div> + + {appendContent} </div> ); diff --git a/app/javascript/mastodon/features/home_timeline/index.js b/app/javascript/mastodon/features/home_timeline/index.js index c7de8c9cb..2bad22bc1 100644 --- a/app/javascript/mastodon/features/home_timeline/index.js +++ b/app/javascript/mastodon/features/home_timeline/index.js @@ -143,12 +143,11 @@ class HomeTimeline extends React.PureComponent { pinned={pinned} multiColumn={multiColumn} extraButton={announcementsButton} + appendContent={hasAnnouncements && showAnnouncements && <AnnouncementsContainer />} > <ColumnSettingsContainer /> </ColumnHeader> - {hasAnnouncements && showAnnouncements && <AnnouncementsContainer />} - <StatusListContainer trackScroll={!pinned} scrollKey={`home_timeline-${columnId}`} diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index adaed2826..cdb932749 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3224,13 +3224,16 @@ a.status-card.compact:hover { .column-header__wrapper { position: relative; flex: 0 0 auto; + z-index: 1; &.active { + box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3); + &::before { display: block; content: ""; position: absolute; - top: 35px; + bottom: -13px; left: 0; right: 0; margin: 0 auto; @@ -3241,6 +3244,11 @@ a.status-card.compact:hover { background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); } } + + .announcements { + z-index: 1; + position: relative; + } } .column-header { @@ -3273,8 +3281,6 @@ a.status-card.compact:hover { } &.active { - box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3); - .column-header__icon { color: $highlight-text-color; text-shadow: 0 0 10px rgba($highlight-text-color, 0.4); @@ -3330,6 +3336,8 @@ a.status-card.compact:hover { color: $darker-text-color; transition: max-height 150ms ease-in-out, opacity 300ms linear; opacity: 1; + z-index: 1; + position: relative; &.collapsed { max-height: 0; @@ -6632,7 +6640,6 @@ noscript { .announcements { background: lighten($ui-base-color, 8%); - border-top: 1px solid $ui-base-color; font-size: 13px; display: flex; align-items: flex-end; |