Skip to content

Feat/prepare menu for beta #345

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

Merged
mpfeil merged 2 commits into from
Aug 5, 2024
Merged

Feat/prepare menu for beta #345

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
27cad92
remove lottie
freds-dev Aug 5, 2024
3bb1a7f
adjust menu
freds-dev Aug 5, 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
13 changes: 4 additions & 9 deletions app/components/device-detail/graph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,9 @@ import {
import { datesHave48HourRange } from "~/lib/utils";
import { isBrowser, isTablet } from "react-device-detect";
import { useTheme } from "remix-themes";
import Lottie from "lottie-react";
import graphLoadingAnimation from "~/components/device-detail/graphLoadingAnimation.json";
import { AggregationFilter } from "../aggregation-filter";
import { DateRangeFilter } from "../daterange-filter";
import Spinner from "../spinner";

// Registering Chart.js components that will be used in the graph
ChartJS.register(
Expand Down Expand Up @@ -285,14 +284,10 @@ export default function Graph(props: any) {
<div
ref={nodeRef}
className="shadow-zinc-800/5 ring-zinc-900/5 absolute bottom-6 right-4 top-14 z-40 flex flex-col gap-4 rounded-xl bg-white px-4 pt-2 text-sm font-medium text-zinc-800 shadow-lg ring-1 dark:bg-zinc-800 dark:text-zinc-200 dark:opacity-95 dark:ring-white dark:backdrop-blur-sm md:bottom-[30px] md:right-4 md:left-auto md:top-auto md:w-[60vw] md:h-[35%] md:max-h-[35%]"
>
>
{navigation.state === "loading" && (
<div className="bg-white/30 dark:bg-zinc-800/30 z-50 flex items-center justify-center backdrop-blur-sm">
<Lottie
style={{ width: 600, height: 300 }}
animationData={graphLoadingAnimation}
loop={true}
/>
<div className="bg-gray-100/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-[1.5px]">
<Spinner />
</div>
)}
<div
Expand Down
1 change: 0 additions & 1 deletion app/components/device-detail/graphLoadingAnimation.json
View file
Open in desktop

This file was deleted.

162 changes: 86 additions & 76 deletions app/components/header/menu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import Spinner from "~/components/spinner";
Expand All @@ -30,17 +29,19 @@ import {
Menu as MenuIcon,
Cpu,
Settings,
HelpCircle,
Mail,
Fingerprint,
FileLock2,
Coins,
Users2,
User2,
ExternalLink,
} from "lucide-react";
import DonationText from "~/components/landing/donate-text";
import DonationiFrame from "~/components/landing/donate-iframe";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "~/components/ui/tooltip";

export function useFirstRender() {
const firstRender = useRef(true);
Expand Down Expand Up @@ -156,11 +157,10 @@ export default function Menu() {
{data.profile && (
<DropdownMenuItem>
<User2 className="mr-2 h-6 w-6" />
<Link to="/profile/me"> Profile</Link>
<Link to="/profile/me">Profile</Link>
</DropdownMenuItem>
)}


<Link to="/settings/account">
<DropdownMenuItem className=" cursor-pointer">
<Settings className="mr-2 h-5 w-5" />
Expand All @@ -174,7 +174,7 @@ export default function Menu() {
<span>{t("my_devices_label")}</span>
</DropdownMenuItem>
</Link>

<Link to="/device/new" target="_blank">
<DropdownMenuItem>
<PlusCircle className="mr-2 h-5 w-5" />
Expand All @@ -186,15 +186,15 @@ export default function Menu() {
) : null}
<DropdownMenuGroup>
<Link to="https://docs.sensebox.de/" target="_blank">
<DropdownMenuItem>
<DropdownMenuItem className="cursor-pointer">
<Puzzle className="mr-2 h-5 w-5" />
<span>{t("tutorials_label")}</span>
<ExternalLink className="ml-auto h-4 w-4 text-gray-300" />
</DropdownMenuItem>
</Link>

<Link to="https://docs.opensensemap.org/" target="_blank">
<DropdownMenuItem>
<DropdownMenuItem className="cursor-pointer">
<Globe className="mr-2 h-5 w-5" />
<span>{t("api_docs_label")}</span>
<ExternalLink className="ml-auto h-4 w-4 text-gray-300" />
Expand All @@ -203,88 +203,98 @@ export default function Menu() {
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<HelpCircle className="mr-2 h-5 w-5" />
<span>{t("faq_label")}</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Mail className="mr-2 h-5 w-5" />
<span>{t("contact_label")}</span>
</DropdownMenuItem>
<DropdownMenuItem>
<Link to={"mailto:info@opensenselab.org"}>
<DropdownMenuItem className="cursor-pointer">
<Mail className="mr-2 h-5 w-5" />
<span>{t("contact_label")}</span>
</DropdownMenuItem>
</Link>
<DropdownMenuItem className="cursor-pointer">
<Fingerprint className="mr-2 h-5 w-5" />
<span>{t("imprint_label")}</span>
</DropdownMenuItem>
<DropdownMenuItem>
<DropdownMenuItem className="cursor-pointer">
<FileLock2 className="mr-2 h-5 w-5" />
<span>{t("data_protection_label")}</span>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />

<DropdownMenuGroup>
<Dialog>
<DialogTrigger asChild>
<DropdownMenuItem onSelect={(e) => e.preventDefault()}>
<Coins className="mr-2 inline h-5 w-5" />
<span> {t("donate_label")}</span>
</DropdownMenuItem>
</DialogTrigger>
<DialogContent
className={"max-h-screen overflow-y-scroll !max-w-[60%]"}
<Link
to={
"https://www.betterplace.org/de/projects/89947-opensensemap-org-die-freie-karte-fuer-umweltdaten"
}
target="_blank"
>
<DropdownMenuItem
onSelect={(e) => e.preventDefault()}
className="cursor-pointer"
>
{/* <Donate /> */}
<div className="grid grid-cols-2">
<DonationText />
<DonationiFrame />
</div>
</DialogContent>
</Dialog>

<DropdownMenuItem>
<Users2 className="mr-2 h-5 w-5" />
<span>{t("promotion_label")}</span>
</DropdownMenuItem>
<Coins className="mr-2 inline h-5 w-5" />
<span> {t("donate_label")}</span>
<ExternalLink className="ml-auto h-4 w-4 text-gray-300" />
</DropdownMenuItem>
</Link>
</DropdownMenuGroup>

<DropdownMenuSeparator />

<DropdownMenuGroup>
{data.user === null ? (
<Link
to={{
pathname: "login",
search: searchParams.toString(),
}}
onClick={() => setOpen(false)}
>
<button className="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground">
<LogIn className="mr-2 h-5 w-5" />
<span className="text-light-green">{t("login_label")}</span>
</button>
</Link>
) : (
<Form
action="/logout"
method="post"
onSubmit={() => {
setOpen(false);
// toast({
// description: "Logging out ...",
// });
}}
>
<input type="hidden" name="redirectTo" value={redirectTo} />
<button
type="submit"
className="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground"
disabled={isLoggingOut}
>
<LogOut className="mr-2 h-5 w-5" />
<span className="text-red-500">{t("logout_label")}</span>
</button>
</Form>
)}
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<DropdownMenuItem disabled>
{data.user === null ? (
<Link
to={{
pathname: "login",
search: searchParams.toString(),
}}
onClick={() => setOpen(false)}
>
<button className="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground">
<LogIn className="mr-2 h-5 w-5" />
<span className="text-light-green">
{t("login_label")}
</span>
</button>
</Link>
) : (
<Form
action="/logout"
method="post"
onSubmit={() => {
setOpen(false);
// toast({
// description: "Logging out ...",
// });
}}
>
<input
type="hidden"
name="redirectTo"
value={redirectTo}
/>
<button
type="submit"
className="relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground"
disabled={isLoggingOut}
>
<LogOut className="mr-2 h-5 w-5" />
<span className="text-red-500">
{t("logout_label")}
</span>
</button>
</Form>
)}
</DropdownMenuItem>
</TooltipTrigger>
<TooltipContent>
<p>Coming soon...</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</DropdownMenuGroup>
</div>
</DropdownMenuContent>
Expand Down
Loading