aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-18 21:19:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: create shortcut dialog height

Browse Source
This commit is contained in:
Steven 2023-08-15 22:24:26 +08:00
parent bc6a72561c
commit ce4232c9f5
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
extension/src/components/CreateShortcutsButton.tsx
View File

@ -1,7 +1,7 @@
import { Button, IconButton, Input, Modal, ModalDialog } from "@mui/joy"; import { Button, IconButton, Input, Modal, ModalDialog } from "@mui/joy";
import { useStorage } from "@plasmohq/storage/hook"; import { useStorage } from "@plasmohq/storage/hook";
import axios from "axios"; import axios from "axios";
import { useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { CreateShortcutResponse, OpenGraphMetadata, Visibility } from "@/types/proto/api/v2/shortcut_service_pb"; import { CreateShortcutResponse, OpenGraphMetadata, Visibility } from "@/types/proto/api/v2/shortcut_service_pb";
import Icon from "./Icon"; import Icon from "./Icon";
@ -36,6 +36,14 @@ const CreateShortcutsButton = () => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [showModal, setShowModal] = useState(false); const [showModal, setShowModal] = useState(false);
useEffect(() => {
if (showModal) {
document.body.style.height = "384px";
} else {
document.body.style.height = "auto";
}
}, [showModal]);
const handleCreateShortcutButtonClick = async () => { const handleCreateShortcutButtonClick = async () => {
chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => { chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
if (tabs.length === 0) { if (tabs.length === 0) {
@ -119,15 +127,15 @@ const CreateShortcutsButton = () => {
<Icon.Plus className="w-5 h-auto" /> <Icon.Plus className="w-5 h-auto" />
</IconButton> </IconButton>
<Modal open={showModal}> <Modal container={() => document.body} open={showModal} onClose={() => setShowModal(false)}>
<ModalDialog layout="fullscreen"> <ModalDialog>
<div className="w-full flex flex-row justify-between items-center mb-2"> <div className="w-full flex flex-row justify-between items-center mb-2">
<span className="text-base font-medium">Create Shortcut</span> <span className="text-base font-medium">Create Shortcut</span>
<Button size="sm" variant="plain" onClick={() => setShowModal(false)}> <Button size="sm" variant="plain" onClick={() => setShowModal(false)}>
<Icon.X className="w-5 h-auto text-gray-600" /> <Icon.X className="w-5 h-auto text-gray-600" />
</Button> </Button>
</div> </div>
<div className="overflow-y-auto overflow-x-hidden px-2 w-full h-full flex flex-col justify-center items-center"> <div className="overflow-x-hidden px-2 w-full flex flex-col justify-start items-center">
<div className="w-full flex flex-row justify-start items-center mb-2"> <div className="w-full flex flex-row justify-start items-center mb-2">
<span className="block w-16 shrink-0">Name</span> <span className="block w-16 shrink-0">Name</span>
<Input className="grow" type="text" placeholder="Unique shortcut name" value={state.name} onChange={handleNameInputChange} /> <Input className="grow" type="text" placeholder="Unique shortcut name" value={state.name} onChange={handleNameInputChange} />