Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Development support tooltip #640

Merged
merged 9 commits into from
Jun 19, 2023
Merged

Development support tooltip #640

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
075fcc5
Added help icon beside the network checkbox.
Mahmoud-Emad Jun 18, 2023
d6d1eda
Added tooltip on select inputs.
Mahmoud-Emad Jun 18, 2023
752e9d0
Merge branch 'development' into development_support_tooltip
Mahmoud-Emad Jun 18, 2023
842361f
Merge branch 'development' into development_support_tooltip
Mahmoud-Emad Jun 19, 2023
3545a79
Update the switch tooltip, refactor the input-tooltip component and u…
Mahmoud-Emad Jun 19, 2023
8b5bca0
Merge branch 'development' into development_support_tooltip
Mahmoud-Emad Jun 19, 2023
d926506
Resolve conversations.
Mahmoud-Emad Jun 19, 2023
bc15547
Update the style of tooltip.
Mahmoud-Emad Jun 19, 2023
669f5e1
added Master/Worker name.
Mahmoud-Emad Jun 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 8 additions & 29 deletions packages/playground/src/components/algorand_capacity.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
<template>
<div>
<v-tooltip location="top" text="Enable this option to set custom resources.">
<template v-slot:activator="{ props }">
<v-switch color="primary" inset label="Set Custom Capacity" v-model="custom" v-bind="props" />
</template>
</v-tooltip>
<input-tooltip inline #="{ props }" tooltip="Enable this option to set custom resources.">
<v-switch color="primary" inset label="Set Custom Capacity" v-model="custom" v-bind="props" />
</input-tooltip>

<slot></slot>

Expand All @@ -19,13 +17,8 @@
#="{ props }"
ref="cpuInput"
>
<input-tooltip #="{ tooltipProps }" tooltip="The number of virtual cores allocated to your instance.">
<v-text-field
label="CPU (vCores)"
type="number"
v-model.number="cpu"
v-bind="{ ...props, ...tooltipProps }"
/>
<input-tooltip tooltip="The number of virtual cores allocated to your instance.">
<v-text-field label="CPU (vCores)" type="number" v-model.number="cpu" v-bind="props" />
</input-tooltip>
</input-validator>

Expand All @@ -39,16 +32,8 @@
#="{ props }"
ref="memoryInput"
>
<input-tooltip
#="{ tooltipProps }"
tooltip="The amount of RAM (Random Access Memory) allocated to your instance."
>
<v-text-field
label="Memory (MB)"
type="number"
v-model.number="memory"
v-bind="{ ...props, ...tooltipProps }"
/>
<input-tooltip tooltip="The amount of RAM (Random Access Memory) allocated to your instance.">
<v-text-field label="Memory (MB)" type="number" v-model.number="memory" v-bind="props" />
</input-tooltip>
</input-validator>

Expand All @@ -63,15 +48,9 @@
ref="storageInput"
>
<input-tooltip
#="{ tooltipProps }"
tooltip="The storage capacity allocated to your instance, indicating the amount of space available to store files, data, and applications."
>
<v-text-field
label="Storage Size (GB)"
type="number"
v-model.number="storage"
v-bind="{ ...props, ...tooltipProps }"
/>
<v-text-field label="Storage Size (GB)" type="number" v-model.number="storage" v-bind="props" />
</input-tooltip>
</input-validator>
</template>
Expand Down
4 changes: 2 additions & 2 deletions packages/playground/src/components/caprover_worker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
:value="$props.modelValue.name"
#="{ props }"
>
<input-tooltip #="{ tooltipProps }" tooltip="Solution name.">
<v-text-field label="Name" v-model="$props.modelValue.name" v-bind="{ ...props, ...tooltipProps }" />
<input-tooltip tooltip="Solution name.">
Mahmoud-Emad marked this conversation as resolved.
Show resolved Hide resolved
<v-text-field label="Name" v-model="$props.modelValue.name" v-bind="props" />
</input-tooltip>
</input-validator>

Expand Down
50 changes: 22 additions & 28 deletions packages/playground/src/components/input_tooltip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,28 @@
<template>
<div ref="tooltipContainer">
<div class="d-flex">
<v-tooltip :text="tooltip || 'None!'">
<template #activator="{ props }">
{{ getPropsRef(props) }}
<slot :tooltipProps="{ appendIcon }"></slot>
<div class="d-flex" :class="{ 'w-100': !inline }">
<slot></slot>
<span
:style="{ cursor: 'help', marginTop: '17.5px' }"
class="ml-3"
@mouseenter="propsRef?.onMouseenter"
@mouseleave="propsRef?.onMouseleave"
@focus="propsRef?.onFocus"
@blur="propsRef?.onBlur"
>
<v-icon>mdi-information</v-icon>
</span>
</div>
</template>
</v-tooltip>
</div>
</template>

<script lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { ref } from "vue";

export default {
name: "InputTooltip",
Expand All @@ -19,42 +31,24 @@ export default {
type: String,
required: true,
},
inline: {
type: Boolean,
default: () => false,
},
},
setup() {
const tooltipContainer = ref<HTMLElement>();
const appendIcon = "mdi-information";

let propsRef: any;
const propsRef = ref<any>();
function getPropsRef(_props: any) {
propsRef = _props;
propsRef.value = _props;
return null;
}

onMounted(() => {
const icon = tooltipContainer.value?.querySelector<HTMLElement>(`i[class*="${appendIcon}"]`);
if (icon) {
icon.style.cursor = "help";
icon.onmouseenter = propsRef.onMouseenter;
icon.onmouseleave = propsRef.onMouseleave;
icon.onfocus = propsRef.onFocus;
icon.onblur = propsRef.onBlur;
}
});

onUnmounted(() => {
const icon = tooltipContainer.value?.querySelector<HTMLElement>(`i[class*="${appendIcon}"]`);
if (icon) {
icon.onmouseenter = null;
icon.onmouseleave = null;
icon.onfocus = null;
icon.onblur = null;
}
});

return {
appendIcon,
tooltipContainer,
getPropsRef,
propsRef,
};
},
};
Expand Down
67 changes: 23 additions & 44 deletions packages/playground/src/components/k8s_worker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
]"
#="{ props }"
>
<input-tooltip #="{ tooltipProps }" tooltip="Solution name.">
<v-text-field label="Name" v-model="$props.modelValue.name" v-bind="{ ...props, ...tooltipProps }" />
<input-tooltip tooltip="Solution name.">
Mahmoud-Emad marked this conversation as resolved.
Show resolved Hide resolved
<v-text-field label="Name" v-model="$props.modelValue.name" v-bind="props" />
</input-tooltip>
</input-validator>

Expand All @@ -26,13 +26,8 @@
]"
#="{ props }"
>
<input-tooltip #="{ tooltipProps }" tooltip="The number of virtual cores allocated to your instance.">
<v-text-field
label="CPU (vCores)"
type="number"
v-model.number="$props.modelValue.cpu"
v-bind="{ ...props, ...tooltipProps }"
/>
<input-tooltip tooltip="The number of virtual cores allocated to your instance.">
<v-text-field label="CPU (vCores)" type="number" v-model.number="$props.modelValue.cpu" v-bind="props" />
</input-tooltip>
</input-validator>

Expand All @@ -46,13 +41,8 @@
]"
#="{ props }"
>
<input-tooltip #="{ tooltipProps }" tooltip="The amount of RAM (Random Access Memory) allocated to your instance.">
<v-text-field
label="Memory (MB)"
type="number"
v-model.number="$props.modelValue.memory"
v-bind="{ ...props, ...tooltipProps }"
/>
<input-tooltip tooltip="The amount of RAM (Random Access Memory) allocated to your instance.">
<v-text-field label="Memory (MB)" type="number" v-model.number="$props.modelValue.memory" v-bind="props" />
</input-tooltip>
</input-validator>

Expand All @@ -66,42 +56,31 @@
]"
#="{ props }"
>
<input-tooltip #="{ tooltipProps }" tooltip="Disk Size.">
<v-text-field
label="Size (GB)"
type="number"
v-model.number="$props.modelValue.diskSize"
v-bind="{ ...props, ...tooltipProps }"
/>
<input-tooltip tooltip="Disk Size.">
<v-text-field label="Size (GB)" type="number" v-model.number="$props.modelValue.diskSize" v-bind="props" />
</input-tooltip>
</input-validator>

<v-tooltip
location="top"
text="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
<input-tooltip
inline
tooltip="An Internet Protocol version 4 address that is globally unique and accessible over the internet."
>
<template v-slot:activator="{ props }">
<v-switch color="primary" inset label="Public IPv4" v-model="$props.modelValue.ipv4" v-bind="props" />
</template>
</v-tooltip>
<v-switch color="primary" inset label="Public IPv4" v-model="$props.modelValue.ipv4" />
</input-tooltip>

<v-tooltip
location="top"
text="Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices."
<input-tooltip
inline
tooltip="Public IPv6 is the next-generation Internet Protocol that offers an expanded address space to connect a vast number of devices."
>
<template v-slot:activator="{ props }">
<v-switch color="primary" inset label="Public IPv6" v-model="$props.modelValue.ipv6" v-bind="props" />
</template>
</v-tooltip>
<v-switch color="primary" inset label="Public IPv6" v-model="$props.modelValue.ipv6" />
</input-tooltip>

<v-tooltip
location="top"
text="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
<input-tooltip
inline
tooltip="The Planetary Network is a distributed network infrastructure that spans across multiple regions and countries, providing global connectivity."
>
<template v-slot:activator="{ props }">
<v-switch color="primary" inset label="Planetary Network" v-model="$props.modelValue.planetary" v-bind="props" />
</template>
</v-tooltip>
<v-switch color="primary" inset label="Planetary Network" v-model="$props.modelValue.planetary" />
</input-tooltip>

<RootFsSize
:cpu="$props.modelValue.cpu"
Expand Down
18 changes: 10 additions & 8 deletions packages/playground/src/components/select_country.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<template>
<v-autocomplete
:disabled="loading"
label="Country"
:items="countries"
clearable
:loading="loading"
v-model="country"
/>
<input-tooltip tooltip="Select a country to deploy your instance inside it.">
<v-autocomplete
:disabled="loading"
label="Country"
:items="countries"
clearable
:loading="loading"
v-model="country"
/>
</input-tooltip>
</template>

<script lang="ts" setup>
Expand Down
25 changes: 14 additions & 11 deletions packages/playground/src/components/select_farm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,20 @@
<SelectCountry v-model="country" />

<input-validator :rules="[validators.required('Farm is required.')]" :value="farm?.farmID" ref="farmInput">
<v-autocomplete
:disabled="loading"
label="Farm Name"
:items="farms"
:loading="loading"
item-title="name"
return-object
:model-value="shouldBeUpdated ? undefined : farm"
@update:model-value="farm = $event"
:error-messages="!loading && !farms.length ? 'No farms where found with the specified resources.' : undefined"
/>
<input-tooltip tooltip="The name of the farm that you want to deploy inside it.">
<v-autocomplete
:disabled="loading"
label="Farm Name"
v-bind="props"
:items="farms"
:loading="loading"
item-title="name"
return-object
:model-value="shouldBeUpdated ? undefined : farm"
@update:model-value="farm = $event"
:error-messages="!loading && !farms.length ? 'No farms where found with the specified resources.' : undefined"
/>
</input-tooltip>
</input-validator>
</section>
</template>
Expand Down
58 changes: 30 additions & 28 deletions packages/playground/src/components/select_gateway_node.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,36 @@
:rules="[validators.required('Gateway node is required.')]"
#="{ props }"
>
<v-autocomplete
label="Select gateway Node"
placeholder="Please select a domain."
:items="items"
item-title="domain"
return-object
v-bind="props"
@update:model-value="$emit('update:model-value', $event)"
:loading="items.length === 0 && loading"
:disabled="items.length === 0 && loading"
:model-value="$props.modelValue"
>
<template v-slot:append-item v-if="page !== -1">
<div class="px-4 mt-4">
<v-btn
block
color="secondary"
variant="tonal"
rounded="large"
size="large"
@click="loadNextPage"
:loading="loading"
>
Load More Gateway Nodes
</v-btn>
</div>
</template>
</v-autocomplete>
<input-tooltip tooltip="Refers to the process of choosing a specific node within a network to act as the gateway.">
Mahmoud-Emad marked this conversation as resolved.
Show resolved Hide resolved
<v-autocomplete
label="Select gateway Node"
Mahmoud-Emad marked this conversation as resolved.
Show resolved Hide resolved
placeholder="Please select a domain."
:items="items"
item-title="domain"
return-object
v-bind="props"
@update:model-value="$emit('update:model-value', $event)"
:loading="items.length === 0 && loading"
:disabled="items.length === 0 && loading"
:model-value="$props.modelValue"
>
<template v-slot:append-item v-if="page !== -1">
<div class="px-4 mt-4">
<v-btn
block
color="secondary"
variant="tonal"
rounded="large"
size="large"
@click="loadNextPage"
:loading="loading"
>
Load More Gateway Nodes
</v-btn>
</div>
</template>
</v-autocomplete>
</input-tooltip>
</input-validator>
</template>

Expand Down
Loading