Allow site toggle to work with minimal info for guests (#1510)

* chore(docker): improve repeat contributions workflow

* This change adds two new commands to gracefully stop and remove the Postgres and Clickhouse docker containers. To do so, it also gives them a recognizable name.

* Additionally, the Postgres container is updated to use a named volume for its data. This lower friction for repeat contributions where one would otherwise sign up and activate their accounts again and again each time.

* fix(ui): site switcher should toggle, instead of just opening

* feat/wip: public site toggle dropdown

* fix(ux): toggling the site switcher & closing from anywhere

* Do not react to key presses for guest users

* Cleanup duplicate code

* Fix logic left in for local testing

* Add a changelog entry for guest dropdown toggle
This commit is contained in:
Ru Singh 2021-12-22 13:24:09 +05:30 committed by GitHub
parent 7fc53124d8
commit d5377987d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 2 deletions

View File

@ -21,6 +21,7 @@ All notable changes to this project will be documented in this file.
### Fixed ### Fixed
- UI fix where multi-line text in pills would not be underlined properly on small screens. - UI fix where multi-line text in pills would not be underlined properly on small screens.
- UI fix to align footer columns - UI fix to align footer columns
- Guests can now use the favicon to toggle additional info about the site bing viewed (such as in public embeds).
## v1.4.1 ## v1.4.1

View File

@ -54,6 +54,8 @@ export default class SiteSwitcher extends React.Component {
} }
handleKeydown(e) { handleKeydown(e) {
if (!this.props.loggedIn) return;
const { site } = this.props; const { site } = this.props;
const { sites } = this.state; const { sites } = this.state;
@ -82,20 +84,21 @@ export default class SiteSwitcher extends React.Component {
open: !prevState.open open: !prevState.open
})) }))
if (!this.state.sites) { if (this.props.loggedIn && !this.state.sites) {
this.populateSites(); this.populateSites();
} }
} }
renderSiteLink(domain, index) { renderSiteLink(domain, index) {
const extraClass = domain === this.props.site.domain ? 'font-medium text-gray-900 dark:text-gray-100 cursor-default font-bold' : 'hover:bg-gray-100 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-900 dark:focus:text-gray-100' const extraClass = domain === this.props.site.domain ? 'font-medium text-gray-900 dark:text-gray-100 cursor-default font-bold' : 'hover:bg-gray-100 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-900 dark:focus:text-gray-100'
const showHotkey = !this.props.loggedIn
return ( return (
<a href={domain === this.props.site.domain ? null : `/${encodeURIComponent(domain)}`} key={domain} className={`flex items-center justify-between truncate px-4 py-2 md:text-sm leading-5 text-gray-700 dark:text-gray-300 ${extraClass}`}> <a href={domain === this.props.site.domain ? null : `/${encodeURIComponent(domain)}`} key={domain} className={`flex items-center justify-between truncate px-4 py-2 md:text-sm leading-5 text-gray-700 dark:text-gray-300 ${extraClass}`}>
<span> <span>
<img src={`/favicon/sources/${encodeURIComponent(domain)}`} className="inline w-4 mr-2 align-middle" /> <img src={`/favicon/sources/${encodeURIComponent(domain)}`} className="inline w-4 mr-2 align-middle" />
<span className="truncate inline-block align-middle max-w-3xs pr-2">{domain}</span> <span className="truncate inline-block align-middle max-w-3xs pr-2">{domain}</span>
</span> </span>
{index < 9 && <span>{index+1}</span>} {showHotkey ? index < 9 && <span>{index+1}</span> : null}
</a> </a>
) )
} }
@ -116,11 +119,22 @@ export default class SiteSwitcher extends React.Component {
} }
} }
/**
* Render a dropdown regardless of whether the user is logged in or not. In case they are not logged in (such as in an embed), the dropdown merely contains the current domain name.
*/
renderDropdown() { renderDropdown() {
if (this.state.loading) { if (this.state.loading) {
return <div className="px-4 py-6"><div className="loading sm mx-auto"><div></div></div></div> return <div className="px-4 py-6"><div className="loading sm mx-auto"><div></div></div></div>
} else if (this.state.error) { } else if (this.state.error) {
return <div className="mx-auto px-4 py-6 dark:text-gray-100">Something went wrong, try again</div> return <div className="mx-auto px-4 py-6 dark:text-gray-100">Something went wrong, try again</div>
} else if (!this.props.loggedIn) {
return (
<React.Fragment>
<div className="py-1">
{ [this.props.site.domain].map(this.renderSiteLink.bind(this)) }
</div>
</React.Fragment>
)
} else { } else {
return ( return (
<React.Fragment> <React.Fragment>