From afa753a890197b188ddf7ba6a8493d4fe361d956 Mon Sep 17 00:00:00 2001 From: kedama Date: Sun, 28 Oct 2018 14:39:59 +0900 Subject: [Glitch] Set z-index of dropdown to 9999. Port 678f5ed296e71bb80d170027b114d9d30a7ccab7 to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/styles/components/index.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 306e62342..04266c497 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -464,6 +464,7 @@ padding: 4px 0; border-radius: 4px; box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + z-index: 9999; ul { list-style: none; -- cgit From ae698469d0c129216580e222d6d6ca82eab4516b Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 15 Sep 2020 17:58:05 +0200 Subject: Clean up leftover from DM conversation view redesign --- app/javascript/flavours/glitch/components/status.js | 2 +- app/javascript/flavours/glitch/styles/components/status.scss | 6 +++--- app/javascript/flavours/glitch/styles/mastodon-light/diff.scss | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 4e628a420..fe0234d84 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -694,7 +694,7 @@ class Status extends ImmutablePureComponent { collapsed: isCollapsed, 'has-background': isCollapsed && background, 'status__wrapper-reply': !!status.get('in_reply_to_id'), - read: unread === false, + unread, muted, }, 'focusable'); diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index a65581136..f3403a243 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -275,7 +275,7 @@ outline: 0; background: lighten($ui-base-color, 4%); - &.status.status-direct:not(.read) { + &.status.status-direct { background: lighten($ui-base-color, 12%); &.muted { @@ -316,7 +316,7 @@ margin-top: 8px; } - &.status-direct:not(.read) { + &.status-direct { background: lighten($ui-base-color, 8%); border-bottom-color: lighten($ui-base-color, 12%); } @@ -399,7 +399,7 @@ &:focus > .status__content:after { background: linear-gradient(rgba(lighten($ui-base-color, 4%), 0), rgba(lighten($ui-base-color, 4%), 1)); } - &.status-direct:not(.read)> .status__content:after { + &.status-direct > .status__content:after { background: linear-gradient(rgba(lighten($ui-base-color, 8%), 0), rgba(lighten($ui-base-color, 8%), 1)); } diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index c83c82766..e5a5cc246 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -27,7 +27,7 @@ } } -.status.status-direct:not(.read) { +.status.status-direct { background: darken($ui-base-color, 8%); border-bottom-color: darken($ui-base-color, 12%); @@ -36,7 +36,7 @@ } } -.focusable:focus.status.status-direct:not(.read) { +.focusable:focus.status.status-direct { background: darken($ui-base-color, 4%); &.collapsed> .status__content:after { -- cgit From 66e9a77e36a67a5c29feb8be5b1e323b463e0468 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 15 Sep 2020 18:09:08 +0200 Subject: Display unread marker for notifications --- app/javascript/flavours/glitch/components/status.js | 1 + .../features/notifications/components/follow.js | 6 ++++-- .../notifications/components/follow_request.js | 6 ++++-- .../features/notifications/components/notification.js | 6 ++++++ .../flavours/glitch/features/notifications/index.js | 6 +++++- .../flavours/glitch/styles/components/status.scss | 19 +++++++++++++++++++ 6 files changed, 39 insertions(+), 5 deletions(-) (limited to 'app/javascript/flavours/glitch/styles') diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index fe0234d84..8da5db961 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -122,6 +122,7 @@ class Status extends ImmutablePureComponent { 'notification', 'hidden', 'expanded', + 'unread', ] updateOnStates = [ diff --git a/app/javascript/flavours/glitch/features/notifications/components/follow.js b/app/javascript/flavours/glitch/features/notifications/components/follow.js index 2b71f3107..0d3162fc9 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/follow.js +++ b/app/javascript/flavours/glitch/features/notifications/components/follow.js @@ -5,6 +5,7 @@ import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { HotKeys } from 'react-hotkeys'; +import classNames from 'classnames'; // Our imports. import Permalink from 'flavours/glitch/components/permalink'; @@ -19,6 +20,7 @@ export default class NotificationFollow extends ImmutablePureComponent { id: PropTypes.string.isRequired, account: ImmutablePropTypes.map.isRequired, notification: ImmutablePropTypes.map.isRequired, + unread: PropTypes.bool, }; handleMoveUp = () => { @@ -59,7 +61,7 @@ export default class NotificationFollow extends ImmutablePureComponent { } render () { - const { account, notification, hidden } = this.props; + const { account, notification, hidden, unread } = this.props; // Links to the display name. const displayName = account.get('display_name_html') || account.get('username'); @@ -76,7 +78,7 @@ export default class NotificationFollow extends ImmutablePureComponent { // Renders. return ( -
+
diff --git a/app/javascript/flavours/glitch/features/notifications/components/follow_request.js b/app/javascript/flavours/glitch/features/notifications/components/follow_request.js index d73dac434..f351c1035 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/follow_request.js +++ b/app/javascript/flavours/glitch/features/notifications/components/follow_request.js @@ -10,6 +10,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import NotificationOverlayContainer from '../containers/overlay_container'; import { HotKeys } from 'react-hotkeys'; import Icon from 'flavours/glitch/components/icon'; +import classNames from 'classnames'; const messages = defineMessages({ authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' }, @@ -25,6 +26,7 @@ class FollowRequest extends ImmutablePureComponent { onReject: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, notification: ImmutablePropTypes.map.isRequired, + unread: PropTypes.bool, }; handleMoveUp = () => { @@ -65,7 +67,7 @@ class FollowRequest extends ImmutablePureComponent { } render () { - const { intl, hidden, account, onAuthorize, onReject, notification } = this.props; + const { intl, hidden, account, onAuthorize, onReject, notification, unread } = this.props; if (!account) { return
; @@ -94,7 +96,7 @@ class FollowRequest extends ImmutablePureComponent { return ( -
+
diff --git a/app/javascript/flavours/glitch/features/notifications/components/notification.js b/app/javascript/flavours/glitch/features/notifications/components/notification.js index 62fc28386..7b80c2228 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/notification.js +++ b/app/javascript/flavours/glitch/features/notifications/components/notification.js @@ -46,6 +46,7 @@ export default class Notification extends ImmutablePureComponent { onMoveDown={onMoveDown} onMoveUp={onMoveUp} onMention={onMention} + unread={this.props.unread} /> ); case 'follow_request': @@ -58,6 +59,7 @@ export default class Notification extends ImmutablePureComponent { onMoveDown={onMoveDown} onMoveUp={onMoveUp} onMention={onMention} + unread={this.props.unread} /> ); case 'mention': @@ -77,6 +79,7 @@ export default class Notification extends ImmutablePureComponent { cacheMediaWidth={this.props.cacheMediaWidth} onUnmount={this.props.onUnmount} withDismiss + unread={this.props.unread} /> ); case 'favourite': @@ -98,6 +101,7 @@ export default class Notification extends ImmutablePureComponent { cacheMediaWidth={this.props.cacheMediaWidth} onUnmount={this.props.onUnmount} withDismiss + unread={this.props.unread} /> ); case 'reblog': @@ -119,6 +123,7 @@ export default class Notification extends ImmutablePureComponent { cacheMediaWidth={this.props.cacheMediaWidth} onUnmount={this.props.onUnmount} withDismiss + unread={this.props.unread} /> ); case 'poll': @@ -140,6 +145,7 @@ export default class Notification extends ImmutablePureComponent { cacheMediaWidth={this.props.cacheMediaWidth} onUnmount={this.props.onUnmount} withDismiss + unread={this.props.unread} /> ); default: diff --git a/app/javascript/flavours/glitch/features/notifications/index.js b/app/javascript/flavours/glitch/features/notifications/index.js index 26710feff..cef0a0d2a 100644 --- a/app/javascript/flavours/glitch/features/notifications/index.js +++ b/app/javascript/flavours/glitch/features/notifications/index.js @@ -24,6 +24,7 @@ import { debounce } from 'lodash'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; import LoadGap from 'flavours/glitch/components/load_gap'; import Icon from 'flavours/glitch/components/icon'; +import compareId from 'flavours/glitch/util/compare_id'; import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container'; @@ -56,6 +57,7 @@ const mapStateToProps = state => ({ hasMore: state.getIn(['notifications', 'hasMore']), numPending: state.getIn(['notifications', 'pendingItems'], ImmutableList()).size, notifCleaningActive: state.getIn(['notifications', 'cleaningMode']), + lastReadId: state.getIn(['notifications', 'lastReadId']), }); /* glitch */ @@ -93,6 +95,7 @@ class Notifications extends React.PureComponent { onEnterCleaningMode: PropTypes.func, onMount: PropTypes.func, onUnmount: PropTypes.func, + lastReadId: PropTypes.string, }; static defaultProps = { @@ -195,7 +198,7 @@ class Notifications extends React.PureComponent { } render () { - const { intl, notifications, shouldUpdateScroll, isLoading, isUnread, columnId, multiColumn, hasMore, numPending, showFilterBar } = this.props; + const { intl, notifications, shouldUpdateScroll, isLoading, isUnread, columnId, multiColumn, hasMore, numPending, showFilterBar, lastReadId } = this.props; const { notifCleaning, notifCleaningActive } = this.props; const { animatingNCD } = this.state; const pinned = !!columnId; @@ -224,6 +227,7 @@ class Notifications extends React.PureComponent { accountId={item.get('account')} onMoveUp={this.handleMoveUp} onMoveDown={this.handleMoveDown} + unread={lastReadId && compareId(item.get('id'), lastReadId) > 0} /> )); } else { diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index f3403a243..ba75e3ffe 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -1054,3 +1054,22 @@ a.status-card.compact:hover { text-decoration: underline; } } + +.notification, +.status { + position: relative; + + &.unread { + &::before { + content: ""; + position: absolute; + top: 0; + left: 0; + pointer-events: 0; + width: 100%; + height: 100%; + border-left: 2px solid $highlight-text-color; + pointer-events: none; + } + } +} -- cgit