rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: show invite count bubble on preferences button (#2458)

Browse Source
This commit is contained in:
Aman Harwara
2023-09-01 22:31:35 +05:30
committed by GitHub
parent 4ca291291c
commit be3b904f62
20 changed files with 158 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/web/src/javascripts/Components/Footer/Footer.tsx
View File

@@ -2,7 +2,7 @@ import { WebApplication } from '@/Application/WebApplication'
import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
import { AbstractComponent } from '@/Components/Abstract/PureComponent'
import { destroyAllObjectProperties, preventRefreshing } from '@/Utils'
import { ApplicationEvent, ApplicationDescriptor, WebAppEvent } from '@standardnotes/snjs'
import { ApplicationEvent, ApplicationDescriptor, WebAppEvent, StatusServiceEvent } from '@standardnotes/snjs'
import {
STRING_NEW_UPDATE_READY,
STRING_CONFIRM_APP_QUIT_DURING_UPGRADE,
@@ -112,7 +112,10 @@ class Footer extends AbstractComponent<Props, State> {
override componentDidMount(): void {
super.componentDidMount()
this.removeStatusObserver = this.application.status.addEventObserver((_event, message) => {
this.removeStatusObserver = this.application.status.addEventObserver((event, message) => {
if (event !== StatusServiceEvent.MessageChanged) {
return
}
this.setState({
arbitraryStatusMessage: message,
})

23
packages/web/src/javascripts/Components/Footer/PreferencesButton.tsx
View File

@@ -1,4 +1,4 @@
import { compareSemVersions } from '@standardnotes/snjs'
import { compareSemVersions, StatusServiceEvent } from '@standardnotes/snjs'
import { keyboardStringForShortcut, OPEN_PREFERENCES_COMMAND } from '@standardnotes/ui-services'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { useApplication } from '../ApplicationProvider'
@@ -36,11 +36,26 @@ const PreferencesButton = ({ openPreferences }: Props) => {
openPreferences(isChangelogUnread)
}, [isChangelogUnread, openPreferences])
const [bubbleCount, setBubbleCount] = useState<string | undefined>()
useEffect(() => {
return application.status.addEventObserver((event, message) => {
if (event !== StatusServiceEvent.PreferencesBubbleCountChanged) {
return
}
setBubbleCount(message)
})
}, [application.status])
return (
<StyledTooltip label={`Open preferences (${shortcut})`}>
<button onClick={onClick} className="relative flex h-full w-8 cursor-pointer items-center justify-center">
<div className="h-5">
<Icon type="tune" className="rounded hover:text-info" />
<button onClick={onClick} className="group relative flex h-full w-8 cursor-pointer items-center justify-center">
<div className="relative h-5">
<Icon type="tune" className="rounded group-hover:text-info" />
{bubbleCount && (
<div className="absolute bottom-full left-full aspect-square -translate-x-1/2 translate-y-1/2 rounded-full border border-info-contrast bg-info px-1.5 py-px text-[0.575rem] font-bold text-info-contrast">
{bubbleCount}
</div>
)}
</div>
{isChangelogUnread && <div className="absolute right-0.5 top-0.5 h-2 w-2 rounded-full bg-info" />}
</button>