Skip to content

Commit 98a0f9d

Browse files
madebyisaacrmadebyisaacr
authored
Merge pull request framer#469 from framer/sheets-design
Google Sheets design and UX improvements
2 parents dc7e717 + 5f76060 commit 98a0f9d

16 files changed

Lines changed: 166 additions & 317 deletions

‎.yarn/cache/react-intersection-observer-npm-9.16.0-9bb417d9c9-ded14524d9.zip‎

-43.5 KB
Binary file not shown.

‎plugins/google-sheets/index.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Google Sheets</title>
8-
</head>
9-
<body>
10-
<div id="root"></div>
11-
<script type="module" src="/src/main.tsx"></script>
12-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Google Sheets</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
1313
</html>

‎plugins/google-sheets/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
"react": "^18.3.1",
1818
"react-dom": "^18.3.1",
1919
"react-error-boundary": "^6.0.0",
20-
"react-intersection-observer": "^9.16.0",
2120
"tailwindcss": "^4.1.13",
2221
"valibot": "^1.1.0"
2322
},

‎plugins/google-sheets/src/App.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { framer } from "framer-plugin"
22
import { useEffect, useLayoutEffect, useState } from "react"
33
import auth from "./auth"
4-
import { CenteredSpinner } from "./components/CenteredSpinner"
54
import { logSyncResult, PLUGIN_LOG_SYNC_KEY } from "./debug"
65
import { Authenticate } from "./pages/Authenticate"
76
import { MapSheetFieldsPage } from "./pages/MapSheetFields"
@@ -72,10 +71,9 @@ export function AuthenticatedApp({ pluginContext, setContext }: AuthenticatedApp
7271

7372
if (result.status === "success") {
7473
framer.closePlugin("Synchronization successful")
75-
return
7674
}
7775
},
78-
onError: e => framer.notify(e.message, { variant: "error" }),
76+
onError: e => framer.notify(e.message, { variant: "error", durationMs: Infinity }),
7977
})
8078

8179
useEffect(() => {
@@ -142,7 +140,13 @@ export function AuthenticatedApp({ pluginContext, setContext }: AuthenticatedApp
142140
)
143141
}
144142

145-
if (isSheetPending) return <CenteredSpinner />
143+
if (isSheetPending) {
144+
return (
145+
<main className="size-full flex items-center justify-center select-none">
146+
<div className="framer-spinner" />
147+
</main>
148+
)
149+
}
146150

147151
const [headerRow, ...rows] = sheet?.values ?? []
148152
if (!headerRow) {
@@ -235,7 +239,7 @@ export function App({ pluginContext }: AppProps) {
235239
<p className="text-content">
236240
Your Google Account does not have access to the synced spreadsheet. Check your access and try again
237241
or{" "}
238-
<a href="#" className="text-sheets-green" onClick={() => void auth.logout()}>
242+
<a href="#" onClick={() => void auth.logout()}>
239243
log out
240244
</a>{" "}
241245
and try a different account.

‎plugins/google-sheets/src/components/Button.tsx‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎plugins/google-sheets/src/components/CenteredSpinner.tsx‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎plugins/google-sheets/src/components/CheckboxTextField.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,10 @@ export function CheckboxTextfield({ value, darken, checked, onChange, disabled }
1919

2020
return (
2121
<div
22-
className={cx("flex bg-tertiary rounded-lg items-center pl-[10px] select-none", {
23-
"opacity-50": darken,
24-
})}
22+
className={cx(
23+
"flex bg-tertiary rounded-lg items-center pl-[10px] select-none h-[30px] cursor-pointer",
24+
darken && "opacity-50"
25+
)}
2526
onClick={disabled ? undefined : toggle}
2627
role={disabled ? undefined : "button"}
2728
>
@@ -32,15 +33,10 @@ export function CheckboxTextfield({ value, darken, checked, onChange, disabled }
3233
onClick={e => {
3334
e.stopPropagation()
3435
}}
35-
className="checked:bg-sheets-green! focus:ring-1 focus:ring-sheets-green checked:border-none dark:bg-[#777]! bg-[#CCC]!"
3636
disabled={disabled}
37+
className="cursor-pointer"
3738
/>
38-
<input
39-
className="bg-transparent w-full shrink pointer-events-none select-none"
40-
type="text"
41-
disabled
42-
value={value}
43-
/>
39+
<span className="w-full pl-2 text-primary">{value}</span>
4440
</div>
4541
)
4642
}

‎plugins/google-sheets/src/components/Hero.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@ import hero from "../assets/hero.png"
22

33
export const Hero = () => (
44
<div className="min-h-[200px] flex items-center justify-center bg-[rgba(0,189,66,0.08)] rounded-[10px]">
5-
<img src={hero} alt="Floating sheet" className="object-contain w-[160px] h-[160px]" />
5+
<img src={hero} alt="Floating sheet" draggable={false} className="object-contain w-[160px] h-[160px]" />
66
</div>
77
)

‎plugins/google-sheets/src/components/Spinner.tsx‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎plugins/google-sheets/src/components/spinner.module.css‎

Lines changed: 0 additions & 60 deletions
This file was deleted.

0 commit comments

Comments
 (0)