Skip to content

Commit 8268011

Browse files
hmacrhmacr
committed
disabled button with tooltip
1 parent 5aa9460 commit 8268011

File tree

5 files changed

+101
-51
lines changed

5 files changed

+101
-51
lines changed

‎src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.svelte

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,15 @@
1212
import DeploymentCard from './(components)/deploymentCard.svelte';
1313
import RedeployModal from './(modals)/redeployModal.svelte';
1414
import { canWriteFunctions } from '$lib/stores/roles';
15-
import { ActionMenu, Alert, Card, Empty, Icon, Layout } from '@appwrite.io/pink-svelte';
15+
import {
16+
ActionMenu,
17+
Alert,
18+
Card,
19+
Empty,
20+
Icon,
21+
Layout,
22+
Tooltip
23+
} from '@appwrite.io/pink-svelte';
1624
import { Click, trackEvent } from '$lib/actions/analytics';
1725
import {
1826
IconDotsHorizontal,
@@ -98,17 +106,28 @@
98106
</Button>
99107
<svelte:fragment slot="menu" let:toggle>
100108
<ActionMenu.Root>
101-
{#if $canWriteFunctions && activeDeployment.sourceSize !== 0}
102-
<ActionMenu.Item.Button
103-
trailingIcon={IconRefresh}
104-
on:click={() => {
105-
selectedDeployment = activeDeployment;
106-
showRedeploy = true;
107-
trackEvent(Click.FunctionsRedeployClick);
108-
toggle();
109-
}}>
110-
Redeploy
111-
</ActionMenu.Item.Button>
109+
{#if $canWriteFunctions}
110+
<Tooltip
111+
disabled={activeDeployment.sourceSize !== 0}
112+
placement={'bottom'}>
113+
<div>
114+
<ActionMenu.Item.Button
115+
trailingIcon={IconRefresh}
116+
disabled={activeDeployment.sourceSize === 0}
117+
on:click={() => {
118+
selectedDeployment = activeDeployment;
119+
showRedeploy = true;
120+
trackEvent(
121+
Click.FunctionsRedeployClick
122+
);
123+
toggle();
124+
}}
125+
style="width: 100%">
126+
Redeploy
127+
</ActionMenu.Item.Button>
128+
</div>
129+
<div slot="tooltip">Source is empty</div>
130+
</Tooltip>
112131
{/if}
113132
<DownloadActionMenuItem
114133
deployment={activeDeployment}

‎src/routes/(console)/project-[region]-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
Layout,
2020
Logs,
2121
Spinner,
22+
Tooltip,
2223
Typography
2324
} from '@appwrite.io/pink-svelte';
2425
import { capitalize } from '$lib/helpers/string';
@@ -97,16 +98,25 @@
9798
</Button>
9899
<svelte:fragment slot="menu" let:toggle>
99100
<ActionMenu.Root>
100-
{#if $canWriteFunctions && data.deployment.sourceSize !== 0}
101-
<ActionMenu.Item.Button
102-
trailingIcon={IconRefresh}
103-
on:click={() => {
104-
showRedeploy = true;
105-
trackEvent(Click.FunctionsRedeployClick);
106-
toggle();
107-
}}>
108-
Redeploy
109-
</ActionMenu.Item.Button>
101+
{#if $canWriteFunctions}
102+
<Tooltip
103+
disabled={data.deployment.sourceSize !== 0}
104+
placement={'bottom'}>
105+
<div>
106+
<ActionMenu.Item.Button
107+
trailingIcon={IconRefresh}
108+
disabled={data.deployment.sourceSize === 0}
109+
on:click={() => {
110+
showRedeploy = true;
111+
trackEvent(Click.FunctionsRedeployClick);
112+
toggle();
113+
}}
114+
style="width: 100%">
115+
Redeploy
116+
</ActionMenu.Item.Button>
117+
</div>
118+
<div slot="tooltip">Source is empty</div>
119+
</Tooltip>
110120
{/if}
111121
{#if !!data.deployment?.sourceSize || !!data.deployment?.sourceSize}
112122
<DownloadActionMenuItem deployment={data.deployment} {toggle} />

‎src/routes/(console)/project-[region]-[project]/functions/function-[function]/table.svelte

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
FloatingActionBar,
2121
Icon,
2222
Status,
23-
Table
23+
Table,
24+
Tooltip
2425
} from '@appwrite.io/pink-svelte';
2526
import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
2627
import {
@@ -149,18 +150,23 @@
149150

150151
<svelte:fragment slot="menu" let:toggle>
151152
<ActionMenu.Root>
152-
{#if deployment.sourceSize !== 0}
153-
<ActionMenu.Item.Button
154-
trailingIcon={IconRefresh}
155-
on:click={() => {
156-
selectedDeployment = deployment;
157-
showRedeploy = true;
158-
toggle();
159-
trackEvent(Click.FunctionsRedeployClick);
160-
}}>
161-
Redeploy
162-
</ActionMenu.Item.Button>
163-
{/if}
153+
<Tooltip disabled={deployment.sourceSize !== 0} placement={'bottom'}>
154+
<div>
155+
<ActionMenu.Item.Button
156+
trailingIcon={IconRefresh}
157+
disabled={deployment.sourceSize === 0}
158+
on:click={() => {
159+
selectedDeployment = deployment;
160+
showRedeploy = true;
161+
toggle();
162+
trackEvent(Click.FunctionsRedeployClick);
163+
}}
164+
style="width: 100%">
165+
Redeploy
166+
</ActionMenu.Item.Button>
167+
</div>
168+
<div slot="tooltip">Source is empty</div>
169+
</Tooltip>
164170
{#if deployment.status === 'ready' && deployment.$id !== $func.deploymentId}
165171
<ActionMenu.Item.Button
166172
trailingIcon={IconLightningBolt}

‎src/routes/(console)/project-[region]-[project]/sites/(components)/deploymentActionMenu.svelte

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
IconTrash,
1515
IconXCircle
1616
} from '@appwrite.io/pink-icons-svelte';
17-
import { ActionMenu, Icon } from '@appwrite.io/pink-svelte';
17+
import { ActionMenu, Icon, Tooltip } from '@appwrite.io/pink-svelte';
1818
1919
export let selectedDeployment: Models.Deployment;
2020
export let deployment: Models.Deployment;
@@ -55,17 +55,24 @@
5555
</Button>
5656
<svelte:fragment slot="menu" let:toggle>
5757
<ActionMenu.Root>
58-
{#if !inCard && selectedDeployment?.sourceSize !== 0}
59-
<ActionMenu.Item.Button
60-
leadingIcon={IconRefresh}
61-
on:click={(e) => {
62-
e.preventDefault();
63-
selectedDeployment = deployment;
64-
showRedeploy = true;
65-
toggle();
66-
}}>
67-
Redeploy
68-
</ActionMenu.Item.Button>
58+
{#if !inCard}
59+
<Tooltip disabled={selectedDeployment?.sourceSize !== 0} placement={'bottom'}>
60+
<div>
61+
<ActionMenu.Item.Button
62+
leadingIcon={IconRefresh}
63+
disabled={selectedDeployment?.sourceSize === 0}
64+
on:click={(e) => {
65+
e.preventDefault();
66+
selectedDeployment = deployment;
67+
showRedeploy = true;
68+
toggle();
69+
}}
70+
style="width: 100%">
71+
Redeploy
72+
</ActionMenu.Item.Button>
73+
</div>
74+
<div slot="tooltip">Source is empty</div>
75+
</Tooltip>
6976
{/if}
7077
{#if deployment?.status === 'ready' && deployment?.$id !== activeDeployment}
7178
<ActionMenu.Item.Button

‎src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/deployment-[deployment]/+page.svelte

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
import CancelDeploymentModal from '../cancelDeploymentModal.svelte';
1313
import RedeployModal from '../../../redeployModal.svelte';
1414
import ActivateDeploymentModal from '../../../activateDeploymentModal.svelte';
15-
import { Accordion } from '@appwrite.io/pink-svelte';
15+
import { Accordion, Tooltip } from '@appwrite.io/pink-svelte';
1616
import { capitalize } from '$lib/helpers/string';
1717
import LogsTimer from '../../../(components)/logsTimer.svelte';
1818
import { invalidate } from '$app/navigation';
@@ -56,9 +56,17 @@
5656
</Button>
5757
{/if}
5858

59-
{#if deployment?.sourceSize !== 0}
60-
<Button secondary on:click={() => (showRedeploy = true)}>Redeploy</Button>
61-
{/if}
59+
<Tooltip disabled={deployment?.sourceSize !== 0} placement={'bottom'}>
60+
<div>
61+
<Button
62+
secondary
63+
disabled={deployment?.sourceSize === 0}
64+
on:click={() => (showRedeploy = true)}>
65+
Redeploy
66+
</Button>
67+
</div>
68+
<div slot="tooltip">Source is empty</div>
69+
</Tooltip>
6270
<DeploymentActionMenu
6371
inCard
6472
{deployment}

0 commit comments

Comments
 (0)