From 6fdea8c033130c69cdf645bf1767e9fad988feae Mon Sep 17 00:00:00 2001 From: LynithDev <61880709+LynithDev@users.noreply.github.com> Date: Fri, 15 Mar 2024 21:15:03 +0100 Subject: [PATCH] feat: Epic Modal + Window titlebar --- package.json | 3 ++ pnpm-lock.yaml | 35 +++++++++++++++++ postcss.config.js | 16 +++++--- src-tauri/capabilities/migrated.json | 14 ++----- src-tauri/gen/schemas/capabilities.json | 2 +- src-tauri/tauri.conf.json | 12 ++++-- src/App.tsx | 9 ----- src/Fonts.tsx | 1 - src/globals.css | 7 +++- src/index.tsx | 10 ++++- src/ui/App.tsx | 13 +++++++ src/ui/components/native/WindowFrame.tsx | 38 ++++++++++++++++++ src/ui/components/overlay/Modal.tsx | 49 ++++++++++++++++++++++++ src/ui/pages/Home.tsx | 10 +++++ tailwind.config.js | 20 ++++++++++ 15 files changed, 207 insertions(+), 32 deletions(-) delete mode 100644 src/App.tsx delete mode 100644 src/Fonts.tsx create mode 100644 src/ui/App.tsx create mode 100644 src/ui/components/native/WindowFrame.tsx create mode 100644 src/ui/components/overlay/Modal.tsx create mode 100644 src/ui/pages/Home.tsx diff --git a/package.json b/package.json index 523364ca..c36c914d 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,10 @@ }, "license": "MIT", "dependencies": { + "@solidjs/router": "^0.13.0", "@tauri-apps/api": "2.0.0-beta.5", "@tauri-apps/plugin-shell": "2.0.0-beta.2", + "@untitled-theme/icons-solid": "^0.6.0", "solid-js": "^1.7.8" }, "devDependencies": { @@ -27,6 +29,7 @@ "eslint-config-airbnb-typescript": "^18.0.0", "eslint-plugin-solid": "^0.13.1", "postcss": "^8.4.35", + "postcss-easings": "^4.0.0", "tailwindcss": "^3.4.1", "typescript": "^5.0.2", "vite": "^5.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ca8b018a..39fc5109 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,12 +5,18 @@ settings: excludeLinksFromLockfile: false dependencies: + '@solidjs/router': + specifier: ^0.13.0 + version: 0.13.0(solid-js@1.8.15) '@tauri-apps/api': specifier: 2.0.0-beta.5 version: 2.0.0-beta.5 '@tauri-apps/plugin-shell': specifier: 2.0.0-beta.2 version: 2.0.0-beta.2 + '@untitled-theme/icons-solid': + specifier: ^0.6.0 + version: 0.6.0(solid-js@1.8.15) solid-js: specifier: ^1.7.8 version: 1.8.15 @@ -46,6 +52,9 @@ devDependencies: postcss: specifier: ^8.4.35 version: 8.4.35 + postcss-easings: + specifier: ^4.0.0 + version: 4.0.0(postcss@8.4.35) tailwindcss: specifier: ^3.4.1 version: 3.4.1 @@ -757,6 +766,14 @@ packages: eslint-plugin-prettier: 5.1.3(eslint-config-prettier@9.1.0)(eslint@8.57.0)(prettier@3.2.5) dev: true + /@solidjs/router@0.13.0(solid-js@1.8.15): + resolution: {integrity: sha512-YHLbFv9J53+iG4yVrh0vVdYiyXPTk892UyZ1jiMPsUXn2dYkX4552N+8SjvlKWWsmNmYxaoefM6jZn1YtVIUUg==} + peerDependencies: + solid-js: ^1.8.6 + dependencies: + solid-js: 1.8.15 + dev: false + /@stylistic/eslint-plugin-js@1.7.0(eslint@8.57.0): resolution: {integrity: sha512-PN6On/+or63FGnhhMKSQfYcWutRlzOiYlVdLM6yN7lquoBTqUJHYnl4TA4MHwiAt46X5gRxDr1+xPZ1lOLcL+Q==} engines: {node: ^16.0.0 || >=18.0.0} @@ -1221,6 +1238,14 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true + /@untitled-theme/icons-solid@0.6.0(solid-js@1.8.15): + resolution: {integrity: sha512-8GBeDzNaBYPYg0FvWNtk2Xjx6Vg1Dgj2egalR1OaZQAEynbr4BzE+QjAb0XjKbxFpEdBxRC1gAOpdAr6uLrxUg==} + peerDependencies: + solid-js: '>=1.8.15' + dependencies: + solid-js: 1.8.15 + dev: false + /acorn-jsx@5.3.2(acorn@8.11.3): resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: @@ -2898,6 +2923,16 @@ packages: engines: {node: '>= 0.4'} dev: true + /postcss-easings@4.0.0(postcss@8.4.35): + resolution: {integrity: sha512-KNpwHA3mTnf0UWcdwahQDaz7DDJ6QteVwdlLff98se854p6pyQW9iofwrD05vtlp33AAAxuUGCOhYwERRJGy6Q==} + engines: {node: '>=16.0'} + peerDependencies: + postcss: ^8.1.0 + dependencies: + postcss: 8.4.35 + postcss-value-parser: 4.2.0 + dev: true + /postcss-import@15.1.0(postcss@8.4.35): resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} diff --git a/postcss.config.js b/postcss.config.js index 2e7af2b7..048c050a 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,12 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import postcssEasings from 'postcss-easings'; +import tailwind from 'tailwindcss'; +import autoprefixer from 'autoprefixer'; + export default { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -} + plugins: [ + tailwind, + autoprefixer, + postcssEasings, + ], +}; diff --git a/src-tauri/capabilities/migrated.json b/src-tauri/capabilities/migrated.json index 0c1b9697..b9eeb2bf 100644 --- a/src-tauri/capabilities/migrated.json +++ b/src-tauri/capabilities/migrated.json @@ -1,4 +1,5 @@ { + "$schema": "../gen/schemas/desktop-schema.json", "identifier": "migrated", "description": "permissions that were migrated from v1", "local": true, @@ -6,15 +7,8 @@ "main" ], "permissions": [ - "path:default", - "event:default", - "window:default", - "app:default", - "resources:default", - "menu:default", - "tray:default", - "shell:allow-open", - - "auth:default" + "window:allow-close", + "window:allow-minimize", + "window:allow-start-dragging" ] } \ No newline at end of file diff --git a/src-tauri/gen/schemas/capabilities.json b/src-tauri/gen/schemas/capabilities.json index aa1fdb70..b27b4280 100644 --- a/src-tauri/gen/schemas/capabilities.json +++ b/src-tauri/gen/schemas/capabilities.json @@ -1 +1 @@ -{"migrated":{"identifier":"migrated","description":"permissions that were migrated from v1","local":true,"windows":["main"],"permissions":["path:default","event:default","window:default","app:default","resources:default","menu:default","tray:default","shell:allow-open","auth:default"]}} \ No newline at end of file +{"migrated":{"identifier":"migrated","description":"permissions that were migrated from v1","local":true,"windows":["main"],"permissions":["window:allow-close","window:allow-minimize","window:allow-start-dragging"]}} \ No newline at end of file diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index d54b348f..1ede17f6 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -21,14 +21,20 @@ "identifier": "com.tauri.dev", "plugins": {}, "app": { + "withGlobalTauri": true, "security": { - "csp": null + "csp": null, + "capabilities": [] }, "windows": [ { "title": "polyfrost-launcher", - "width": 1200, - "height": 800 + "width": 1280, + "height": 800, + "resizable": false, + "center": true, + "decorations": false, + "shadow": true } ] } diff --git a/src/App.tsx b/src/App.tsx deleted file mode 100644 index 79eae8cf..00000000 --- a/src/App.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import auth from './bridge/auth'; - -function App() { - return ( - - ); -} - -export default App; diff --git a/src/Fonts.tsx b/src/Fonts.tsx deleted file mode 100644 index 3c8418d8..00000000 --- a/src/Fonts.tsx +++ /dev/null @@ -1 +0,0 @@ -import '@fontsource/poppins'; diff --git a/src/globals.css b/src/globals.css index bd6213e1..0a8dbae9 100644 --- a/src/globals.css +++ b/src/globals.css @@ -1,3 +1,8 @@ @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; + +/* start lynith's native experience */ +* { user-select: none; } +*:hover { cursor: default; } +/* end lynith's native experience */ \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index c199f58b..80d90230 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,6 +3,12 @@ import { render } from 'solid-js/web'; import './assets/fonts/Poppins/index.css'; import './globals.css'; -import App from './App'; +import { Route, Router } from '@solidjs/router'; +import App from './ui/App'; +import HomePage from './ui/pages/Home'; -render(() => , document.getElementById('root') as HTMLElement); +render(() => ( + + + +), document.getElementById('root') as HTMLElement); diff --git a/src/ui/App.tsx b/src/ui/App.tsx new file mode 100644 index 00000000..e7cf1cd5 --- /dev/null +++ b/src/ui/App.tsx @@ -0,0 +1,13 @@ +import { ParentProps } from 'solid-js'; +import WindowFrame from './components/native/WindowFrame'; + +function App(props: ParentProps) { + return ( +
+ + {props.children} +
+ ); +} + +export default App; diff --git a/src/ui/components/native/WindowFrame.tsx b/src/ui/components/native/WindowFrame.tsx new file mode 100644 index 00000000..4b8b17a6 --- /dev/null +++ b/src/ui/components/native/WindowFrame.tsx @@ -0,0 +1,38 @@ +import { Window } from '@tauri-apps/api/window'; +import { MinusIcon, XCloseIcon } from '@untitled-theme/icons-solid'; +import { JSX, createSignal } from 'solid-js'; +import Modal from '../overlay/Modal'; + +type ButtonProps = { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + icon: (any: any) => JSX.Element, + onClick: (event: MouseEvent) => void, + danger?: boolean, +}; + +function Button(props: ButtonProps) { + return ( + + ); +} + +function WindowFrame() { + const [isCloseModalVisible, setIsCloseModalVisible] = createSignal(false); + + return ( +
+
+ ); +} + +export default WindowFrame; diff --git a/src/ui/components/overlay/Modal.tsx b/src/ui/components/overlay/Modal.tsx new file mode 100644 index 00000000..ffdac828 --- /dev/null +++ b/src/ui/components/overlay/Modal.tsx @@ -0,0 +1,49 @@ +import { + Accessor, + ParentProps, Setter, Show, createEffect, createSignal, +} from 'solid-js'; +import { Portal } from 'solid-js/web'; + +type ModalButton = { + text: string, + class?: string, + onClick?: (event: MouseEvent) => void, +}; + +type ModalProps = { + title: string, + visible: Accessor, + setVisible: Setter, + buttons?: ModalButton[], +} & ParentProps; + +function Modal(props: ModalProps) { + const [animate, setAnimate] = createSignal('animate-fade-in'); + + function onBackdropClick() { + setAnimate('animate-fade-out pointer-events-none'); + setTimeout(() => { + props.setVisible(false); + setAnimate('animate-fade-in pointer-events-auto'); + }, 150); + } + + return ( + + +
+
onBackdropClick()} /> + +
+
+

Hello World

+
+
+ +
+ + + ); +} + +export default Modal; diff --git a/src/ui/pages/Home.tsx b/src/ui/pages/Home.tsx new file mode 100644 index 00000000..d08484cd --- /dev/null +++ b/src/ui/pages/Home.tsx @@ -0,0 +1,10 @@ +function HomePage() { + return ( +
+

Home

+

Welcome to the home page

+
+ ); +} + +export default HomePage; diff --git a/tailwind.config.js b/tailwind.config.js index d64e75d7..b435144b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,11 +3,31 @@ export default { content: ['./src/**/*.{js,ts,jsx,tsx}'], theme: { colors: { + white: '#ffffff', + black: '#000000', + slate: '#9BA1A6', + danger: '#E5484D', bg: { primary: '#11171C', secondary: '#192026', }, + }, + extend: { + animation: { + 'fade-in': 'fadeIn 150ms easeOutExpo forwards', + 'fade-out': 'fadeOut 150ms easeOutExpo forwards', + }, + keyframes: { + fadeIn: { + '0%': { opacity: '0' }, + '100%': { opacity: '1' }, + }, + fadeOut: { + '0%': { opacity: '1' }, + '100%': { opacity: '0' }, + }, + }, }, }, plugins: [],