CloudToys/puyopuyotetr.is
1
0
Fork 0
Code

[Glitch] Fix “new items glow” being displayed above settings and announcements

Browse Source 
Port 90b13ffd00 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
ThibG 2020-01-25 19:40:36 +01:00 committed by Thibaut Girka
parent 98d5ab6be9
commit 5e4d1f699e
3 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/flavours/glitch/components/column_header.js
View File

@ -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>
);

3
app/javascript/flavours/glitch/features/home_timeline/index.js
View File

@ -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}`}

14
app/javascript/flavours/glitch/styles/components/columns.scss
View File

@ -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;