commit
3591621edc
|
@ -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 => {
|
||||
if (!alreadyAdded) {
|
||||
dispatch(addReactionFail(announcementId, name, err));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
|
@ -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}`}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 => {
|
||||
if (!alreadyAdded) {
|
||||
dispatch(addReactionFail(announcementId, name, err));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
|
@ -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}`}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue