ComputerSurge/komodo
3
0
Fork 0
forked from github-starred/komodo
Code Pull Requests Packages Releases Activity

improve confirm menu with copy button

Browse Source
This commit is contained in:
mbecker20
2023-02-28 04:58:39 +00:00
parent f9fe4e32b4
commit ce7cb8fe45
10 changed files with 61 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/build/Header.tsx
View File

@@ -55,7 +55,7 @@ const Header: Component<{}> = (p) => {
client.delete_build(params.id);
}}
class="red"
title={`delete build | ${build().name}`}
title="delete build"
match={build().name}
>
<Icon type="trash" />

18
frontend/src/components/build/tabs/config/WebhookUrl.tsx
View File

@@ -1,8 +1,7 @@
import { Component, createResource, Show } from "solid-js";
import { pushNotification, MONITOR_BASE_URL, client } from "../../../..";
import { copyToClipboard, getId } from "../../../../util/helpers";
import ConfirmButton from "../../../shared/ConfirmButton";
import Icon from "../../../shared/Icon";
import { client } from "../../../..";
import { getId } from "../../../../util/helpers";
import CopyClipboard from "../../../shared/CopyClipboard";
import Flex from "../../../shared/layout/Flex";
import Grid from "../../../shared/layout/Grid";
import Loading from "../../../shared/loading/Loading";
@@ -31,16 +30,7 @@ const ListenerUrl: Component<{}> = (p) => {
{listenerUrl()}
</div>
</Show>
<ConfirmButton
class="blue"
onFirstClick={() => {
copyToClipboard(listenerUrl() || "");
pushNotification("good", "copied url to clipboard");
}}
confirm={<Icon type="check" />}
>
<Icon type="clipboard" />
</ConfirmButton>
<CopyClipboard copyText={listenerUrl() || ""} copying="url" />
</Flex>
</Grid>
);

6
frontend/src/components/deployment/Actions.tsx
View File

@@ -196,7 +196,7 @@ const Deploy: Component<{ redeploy?: boolean }> = (p) => {
onConfirm={() => {
client.deploy_container(params.id);
}}
title={`redeploy container | ${name()}`}
title="redeploy container"
match={name()!}
>
<Icon type={"reset"} />
@@ -232,7 +232,7 @@ const RemoveContainer = () => {
onConfirm={() => {
client.remove_container(params.id);
}}
title={`destroy container | ${name()}`}
title="destroy container"
match={name()!}
>
<Icon type="trash" />
@@ -298,7 +298,7 @@ const Stop = () => {
onConfirm={() => {
client.stop_container(params.id);
}}
title={`stop container | ${name()}`}
title="stop container"
match={name()!}
>
<Icon type="pause" />

4
frontend/src/components/deployment/Header.tsx
View File

@@ -88,9 +88,7 @@ const Header: Component<{}> = (p) => {
client.delete_deployment(params.id);
}}
class="red"
title={`delete deployment | ${
deployment().deployment.name
}`}
title="delete deployment"
match={deployment().deployment.name}
info={
<Show when={deployment().container}>

42
frontend/src/components/deployment/tabs/config/container/WebhookUrl.tsx
View File

@@ -1,22 +1,25 @@
import { Component, createResource, Show } from "solid-js";
import { client, pushNotification } from "../../../../..";
import { copyToClipboard, getId } from "../../../../../util/helpers";
import ConfirmButton from "../../../../shared/ConfirmButton";
import Icon from "../../../../shared/Icon";
import { client } from "../../../../..";
import { getId } from "../../../../../util/helpers";
import CopyClipboard from "../../../../shared/CopyClipboard";
import Flex from "../../../../shared/layout/Flex";
import Grid from "../../../../shared/layout/Grid";
import Loading from "../../../../shared/loading/Loading";
import { useConfig } from "../Provider";
const WebhookUrl: Component<{}> = (p) => {
const { deployment } = useConfig();
const [github_base_url] = createResource(() => client.get_github_webhook_base_url());
const listenerUrl = () => {
if (github_base_url()) {
return `${github_base_url()}/api/listener/deployment/${getId(deployment)}`;
}
}
return (
const { deployment } = useConfig();
const [github_base_url] = createResource(() =>
client.get_github_webhook_base_url()
);
const listenerUrl = () => {
if (github_base_url()) {
return `${github_base_url()}/api/listener/deployment/${getId(
deployment
)}`;
}
};
return (
<Grid class="config-item shadow">
<h1>webhook url</h1>
<Flex
@@ -29,19 +32,10 @@ const WebhookUrl: Component<{}> = (p) => {
{listenerUrl()}
</div>
</Show>
<ConfirmButton
class="blue"
onFirstClick={() => {
copyToClipboard(listenerUrl() || "");
pushNotification("good", "copied url to clipboard");
}}
confirm={<Icon type="check" />}
>
<Icon type="clipboard" />
</ConfirmButton>
<CopyClipboard copyText={listenerUrl() || ""} copying="url" />
</Flex>
</Grid>
);
}
};
export default WebhookUrl;
export default WebhookUrl;

2
frontend/src/components/server/Header.tsx
View File

@@ -75,7 +75,7 @@ const Header: Component<{}> = (p) => {
client.delete_server(params.id);
}}
class="red"
title={`delete server | ${server().server.name}`}
title="delete server"
match={server().server.name}
info={
<div style={{ opacity: 0.7 }}>

8
frontend/src/components/shared/ConfirmMenuButton.tsx
View File

@@ -2,7 +2,9 @@ import { Component, createSignal, JSX } from "solid-js";
import { pushNotification } from "../..";
import { useToggle } from "../../util/hooks";
import ConfirmButton from "./ConfirmButton";
import CopyClipboard from "./CopyClipboard";
import Input from "./Input";
import Flex from "./layout/Flex";
import Grid from "./layout/Grid";
import CenterMenu from "./menu/CenterMenu";
@@ -22,6 +24,12 @@ const ConfirmMenuButton: Component<{
show={show}
toggleShow={toggleShow}
title={p.title}
leftOfX={() => (
<Flex alignItems="center" justifyContent="space-between" style={{ width: "100%" }}>
<h1>{p.match}</h1>
<CopyClipboard copyText={p.match} copying="name" />
</Flex>
)}
targetClass={p.class}
target={p.children}
content={() => (

22
frontend/src/components/shared/CopyClipboard.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { Component } from "solid-js";
import { pushNotification } from "../..";
import { copyToClipboard } from "../../util/helpers";
import ConfirmButton from "./ConfirmButton";
import Icon from "./Icon";
const CopyClipboard: Component<{ copyText: string; copying?: string; }> = (p) => {
return (
<ConfirmButton
class="blue"
onFirstClick={() => {
copyToClipboard(p.copyText);
pushNotification("good", `copied ${p.copying || "text"} to clipboard`);
}}
confirm={<Icon type="check" />}
>
<Icon type="clipboard" />
</ConfirmButton>
);
}
export default CopyClipboard;

5
frontend/src/components/shared/menu/CenterMenu.tsx
View File

@@ -68,7 +68,7 @@ const Child: Component<{
return (
<Grid
class={combineClasses(s.CenterMenuContainer)}
onClick={(e) => {
onPointerDown={(e) => {
e.stopPropagation();
p.toggleShow();
}}
@@ -78,6 +78,7 @@ const Child: Component<{
class={combineClasses(s.Menu, "shadow")}
style={{ padding: (p.padding as any) || "1rem", ...p.style }}
onClick={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
>
<Flex
class={s.CenterMenuHeader}
@@ -85,7 +86,7 @@ const Child: Component<{
justifyContent="space-between"
alignItems="center"
>
<div class={s.CenterMenuTitle}>{p.title}</div>
<h1>{p.title}</h1>
<Flex alignItems="center">
{p.leftOfX && p.leftOfX()}
<button class="red" onClick={p.toggleShow}>

5
frontend/src/components/shared/menu/menu.module.scss
View File

@@ -142,11 +142,6 @@ $anim-time: 350ms;
background-color: rgba(0, 0, 0, 0.4);
}
.CenterMenuTitle {
font-size: 1.5rem;
font-weight: 500;
}
.SelectorItem:hover {
background-color: c.$lightgrey;
}