[Glitch] Add admin notifications for new Mastodon versions

Port front-end changes from 16681e0f20 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
main-unfiltered
Claire 2023-09-01 17:47:07 +02:00
parent c107512fa6
commit 5c7df20c13
6 changed files with 65 additions and 5 deletions

View File

@ -0,0 +1,26 @@
import { FormattedMessage } from 'react-intl';
export const CriticalUpdateBanner = () => (
<div className='warning-banner'>
<div className='warning-banner__message'>
<h1>
<FormattedMessage
id='home.pending_critical_update.title'
defaultMessage='Critical security update available!'
/>
</h1>
<p>
<FormattedMessage
id='home.pending_critical_update.body'
defaultMessage='Please update your Mastodon server as soon as possible!'
/>{' '}
<a href='/admin/software_updates'>
<FormattedMessage
id='home.pending_critical_update.link'
defaultMessage='See updates'
/>
</a>
</p>
</div>
</div>
);

View File

@ -14,7 +14,7 @@ import { fetchAnnouncements, toggleShowAnnouncements } from 'flavours/glitch/act
import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge'; import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge';
import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator'; import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator';
import AnnouncementsContainer from 'flavours/glitch/features/getting_started/containers/announcements_container'; import AnnouncementsContainer from 'flavours/glitch/features/getting_started/containers/announcements_container';
import { me } from 'flavours/glitch/initial_state'; import { me, criticalUpdatesPending } from 'flavours/glitch/initial_state';
import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
import { expandHomeTimeline } from '../../actions/timelines'; import { expandHomeTimeline } from '../../actions/timelines';
@ -23,6 +23,7 @@ import ColumnHeader from '../../components/column_header';
import StatusListContainer from '../ui/containers/status_list_container'; import StatusListContainer from '../ui/containers/status_list_container';
import { ColumnSettings } from './components/column_settings'; import { ColumnSettings } from './components/column_settings';
import { CriticalUpdateBanner } from './components/critical_update_banner';
import { ExplorePrompt } from './components/explore_prompt'; import { ExplorePrompt } from './components/explore_prompt';
const messages = defineMessages({ const messages = defineMessages({
@ -158,8 +159,9 @@ class HomeTimeline extends PureComponent {
const { intl, hasUnread, columnId, multiColumn, tooSlow, hasAnnouncements, unreadAnnouncements, showAnnouncements } = this.props; const { intl, hasUnread, columnId, multiColumn, tooSlow, hasAnnouncements, unreadAnnouncements, showAnnouncements } = this.props;
const pinned = !!columnId; const pinned = !!columnId;
const { signedIn } = this.context.identity; const { signedIn } = this.context.identity;
const banners = [];
let announcementsButton, banner; let announcementsButton;
if (hasAnnouncements) { if (hasAnnouncements) {
announcementsButton = ( announcementsButton = (
@ -174,8 +176,12 @@ class HomeTimeline extends PureComponent {
); );
} }
if (criticalUpdatesPending) {
banners.push(<CriticalUpdateBanner key='critical-update-banner' />);
}
if (tooSlow) { if (tooSlow) {
banner = <ExplorePrompt />; banners.push(<ExplorePrompt key='explore-prompt' />);
} }
return ( return (
@ -197,7 +203,7 @@ class HomeTimeline extends PureComponent {
{signedIn ? ( {signedIn ? (
<StatusListContainer <StatusListContainer
prepend={banner} prepend={banners}
alwaysPrepend alwaysPrepend
trackScroll={!pinned} trackScroll={!pinned}
scrollKey={`home_timeline-${columnId}`} scrollKey={`home_timeline-${columnId}`}

View File

@ -100,6 +100,7 @@ export const hasMultiColumnPath = initialPath === '/'
* @typedef InitialState * @typedef InitialState
* @property {Record<string, Account>} accounts * @property {Record<string, Account>} accounts
* @property {InitialStateLanguage[]} languages * @property {InitialStateLanguage[]} languages
* @property {boolean=} critical_updates_pending
* @property {InitialStateMeta} meta * @property {InitialStateMeta} meta
* @property {object} local_settings * @property {object} local_settings
* @property {number} max_toot_chars * @property {number} max_toot_chars
@ -160,6 +161,7 @@ export const useBlurhash = getMeta('use_blurhash');
export const usePendingItems = getMeta('use_pending_items'); export const usePendingItems = getMeta('use_pending_items');
export const version = getMeta('version'); export const version = getMeta('version');
export const languages = initialState?.languages; export const languages = initialState?.languages;
export const criticalUpdatesPending = initialState?.critical_updates_pending;
export const statusPageUrl = getMeta('status_page_url'); export const statusPageUrl = getMeta('status_page_url');
export const sso_redirect = getMeta('sso_redirect'); export const sso_redirect = getMeta('sso_redirect');

View File

@ -143,6 +143,11 @@ $content-width: 840px;
} }
} }
.warning a {
color: $gold-star;
font-weight: 700;
}
.simple-navigation-active-leaf a { .simple-navigation-active-leaf a {
color: $primary-text-color; color: $primary-text-color;
background-color: $ui-highlight-color; background-color: $ui-highlight-color;

View File

@ -977,7 +977,8 @@ $ui-header-height: 55px;
} }
} }
.dismissable-banner { .dismissable-banner,
.warning-banner {
position: relative; position: relative;
margin: 10px; margin: 10px;
margin-bottom: 5px; margin-bottom: 5px;
@ -1055,6 +1056,21 @@ $ui-header-height: 55px;
} }
} }
.warning-banner {
border: 1px solid $warning-red;
background: rgba($warning-red, 0.15);
&__message {
h1 {
color: $warning-red;
}
a {
color: $primary-text-color;
}
}
}
.hashtag-header { .hashtag-header {
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
padding: 15px; padding: 15px;

View File

@ -12,6 +12,11 @@
border-top: 1px solid $ui-base-color; border-top: 1px solid $ui-base-color;
text-align: start; text-align: start;
background: darken($ui-base-color, 4%); background: darken($ui-base-color, 4%);
&.critical {
font-weight: 700;
color: $gold-star;
}
} }
& > thead > tr > th { & > thead > tr > th {