Skip to content

Feat/notify auto save #723

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Feat/notify auto save #723

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0ce2f0d
feat: show saved state to user
danshuitaihejie May 19, 2024
52aef93
fix: avoid title jitter when saving
danshuitaihejie Jun 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/components/MainHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { SharePanel } from './SharePanel';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import userService from '../services/user_service';
import mixpanel from '../services/mixpanel';
import { SaveStatusButton } from './SaveStatusButton';

export function MainHeader(props) {
const [isEditing, setEditing] = useState(false);
Expand Down Expand Up @@ -188,6 +189,7 @@ export function MainHeader(props) {
{props.externalLibCount}
</span>
</Button>
<SaveStatusButton isSaving={props.isSaving} />
{!window.user ? (
<button
className="h-10 px-4 bg-primary rounded-lg text-gray-100 font-semibold hover:opacity-80 duration-200"
Expand Down
81 changes: 81 additions & 0 deletions src/components/SaveStatusButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { useState, useEffect } from 'preact/hooks';
function SaveStatusButton({ isSaving }) {
const [isShowTip, setShowTip] = useState(false);
const [isShowSaved, setShowSaved] = useState(false);
const handleMouseEnter = () => {
setShowTip(true);
};

const handleMouseLeave = () => {
setShowTip(false);
};
let showSavedTimeout = null;
useEffect(() => {
if (isSaving == false) {
setShowSaved(true);
if (showSavedTimeout) clearTimeout(showSavedTimeout);
showSavedTimeout = setTimeout(() => {
setShowSaved(false);
}, 1500);
}
}, [isSaving]);

return (
<div class="flex justify-end" style="width: 130px;">
<div
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
class="flex space-x-1"
>
<div class="relative">
<span
className={`${isShowSaved ? '' : 'bg-black-600'} h-6 w-6 rounded-lg flex items-center justify-center`}
>
<svg class="h-5 w-5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.16699 15.0033H5.54783C3.40449 15 1.66699 13.3275 1.66699 11.2642C1.66699 9.20165 3.40449 7.52915 5.54783 7.52915C5.87533 6.06082 7.04283 4.86249 8.61033 4.38499C10.177 3.90832 11.907 4.22415 13.147 5.21832C14.387 6.20999 14.9487 7.72415 14.622 9.19249H15.447C16.6037 9.19249 17.6012 9.87582 18.062 10.865M12.5003 15.8333L14.167 17.5L17.5003 14.1667"
stroke="#DBFAE6"
stroke-width="1.66667"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
{isShowTip && (
<div class="border border-gray-300 mt-3 absolute bg-green-50 rounded text-sm z-50 flex items-center justify-center right-auto left-0 transform -translate-x-1/2">
<div>
<span class="h-5 w-5 rounded-lg flex items-center justify-center">
<svg
class="h-4 w-4"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.33398 10.0027H4.43865C2.72398 10 1.33398 8.66201 1.33398 7.01134C1.33398 5.36134 2.72398 4.02334 4.43865 4.02334C4.70065 2.84868 5.63465 1.89001 6.88865 1.50801C8.14198 1.12668 9.52598 1.37934 10.518 2.17468C11.51 2.96801 11.9593 4.17934 11.698 5.35401H12.358C13.2833 5.35401 14.0813 5.90068 14.45 6.69201M10.0007 10.6667L11.334 12L14.0007 9.33334"
stroke="#08895A"
stroke-width="1.33333"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
</div>
<div class="whitespace-nowrap flex-1 flex items-center justify-center ">
<p class="text-xs text-black p-1">
All changes auto-save to cloud
</p>
</div>
</div>
)}
</div>
{isShowSaved && (
<div class="min-w-0 flex-1 flex items-center justify-center">
<p class="text-sm text-gray-500">Saved to cloud</p>
</div>
)}
</div>
</div>
);
}

export { SaveStatusButton };