StatusBar: float leap above on mobile tutorial

This commit is contained in:
Liam Fitzgerald 2021-02-11 16:14:17 +10:00
parent fe22d33696
commit 15ac328c1f
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
4 changed files with 11 additions and 6 deletions

View File

@ -32,7 +32,7 @@ export default class SettingsApi extends BaseApi<StoreState> {
}
putEntry(buc: Key, key: Key, val: Value) {
this.storeAction({
return this.storeAction({
"put-entry": {
"bucket-key": buc,
"entry-key": key,

View File

@ -41,7 +41,6 @@ function decodePolicy(policy: Enc<GroupPolicy>): GroupPolicy {
}
function decodeTags(tags: Enc<Tags>): Tags {
console.log(tags);
return _.reduce(
tags,
(acc, ships, key): Tags => {

View File

@ -47,7 +47,9 @@ const StatusBar = (props) => {
const anchorRef = useRef(null);
useTutorialModal('leap', true, anchorRef.current);
const leapHighlight = useTutorialModal('leap', true, anchorRef.current);
const floatLeap = leapHighlight && window.matchMedia('(max-width: 550px)').matches;
return (
<Box
@ -63,7 +65,7 @@ const StatusBar = (props) => {
<Button width="32px" borderColor='washedGray' mr='2' px='2' onClick={() => props.history.push('/')} {...props}>
<Icon icon='Spaces' color='black'/>
</Button>
<StatusBarItem mr={2} onClick={() => toggleOmnibox()}>
<StatusBarItem float={floatLeap} mr={2} onClick={() => toggleOmnibox()}>
{ !props.doNotDisturb && (props.notificationsCount > 0 || invites.length > 0) &&
(<Box display="block" right="-8px" top="-8px" position="absolute" >
<Icon color="blue" icon="Bullet" />

View File

@ -6,21 +6,25 @@ const Row = styled(_Row)`
cursor: pointer;
`;
type StatusBarItemProps = Parameters<typeof Row>[0] & { badge?: boolean };
type StatusBarItemProps = Parameters<typeof Row>[0] & { badge?: boolean; float?: boolean; };
export function StatusBarItem({
badge,
children,
float,
...props
}: StatusBarItemProps) {
const floatPos = float ? { zIndex: 10, boxShadow: 'rgba(0,0,0,0.2) 0px 0px 0px 999px' } : {};
return (
<Button
style={{ position: 'relative' }}
style={{ position: 'relative', ...floatPos }}
border={1}
color="washedGray"
bg="white"
px={2}
overflow='visible'
zIndex={10}
boxShadow="1px 1px black"
{...props}
>
{children}