@@ -34,9 +59,7 @@
icon="info"
icon-color="var(--fg-tertiary)"
v-tooltip="{
- backgroundColor: 'var(--bg-accent-grey-5)',
content: $t('exportToHub.ownerTooltip'),
- width: 300,
}"
role="tooltip"
:aria-label="$t('exportToHub.ownerTooltip')"
@@ -53,9 +76,11 @@
aria-required="true"
/>
-
Dataset name
import { useExportToHubViewModel } from "./useExportToHubViewModel";
+import "assets/icons/export";
export default {
props: {
@@ -137,6 +161,14 @@ export default {
required: true,
},
},
+ methods: {
+ closeMiddleware(e) {
+ if (e.target.closest(".fixed-tooltip")) {
+ return false;
+ }
+ return true;
+ },
+ },
setup(props) {
return useExportToHubViewModel(props);
},
@@ -168,21 +200,19 @@ export default {
border-radius: $border-radius-m;
box-shadow: $shadow;
z-index: 2;
- &.--small {
- min-width: 200px;
- }
}
&__exporting-message {
@include font-size(14px);
margin: 0;
- em {
+ &__private {
display: block;
- font-weight: 200;
- color: var(--fg-secondary);
+ text-transform: uppercase;
+ @include font-size(12px);
}
- span {
+ &__warning {
display: block;
- color: var(--fg-secondary);
+ color: var(--fg-tertiary);
+ @include font-size(14px);
}
}
@@ -219,10 +249,25 @@ export default {
}
}
- &__button.button {
- background: hsl(0, 1%, 18%);
- &:hover {
- background: hsl(0, 1%, 22%);
+ &__button {
+ &.button {
+ background: hsl(0, 1%, 18%);
+ @include media("<=tablet") {
+ padding: $base-space * 1.45;
+ }
+ &:hover {
+ background: hsl(0, 1%, 22%);
+ }
+ }
+ &__icon {
+ @include media(">tablet") {
+ display: none;
+ }
+ }
+ &__text {
+ @include media("<=tablet") {
+ display: none;
+ }
}
}
@@ -244,6 +289,7 @@ export default {
height: 24px;
padding: 16px;
background: var(--bg-accent-grey-2);
+ box-shadow: 0 0 0px 1000px var(--bg-accent-grey-2) inset;
color: var(--fg-primary);
border: 1px solid var(--bg-opacity-20);
border-radius: $border-radius;
diff --git a/argilla-frontend/components/features/annotation/header/header-bar/useExportToHubViewModel.ts b/argilla-frontend/components/features/annotation/header/header-bar/useExportToHubViewModel.ts
index 835cddd44d..98917787bd 100644
--- a/argilla-frontend/components/features/annotation/header/header-bar/useExportToHubViewModel.ts
+++ b/argilla-frontend/components/features/annotation/header/header-bar/useExportToHubViewModel.ts
@@ -7,7 +7,6 @@ import {
useDebounce,
useLocalStorage,
useNotifications,
- useUser,
} from "~/v1/infrastructure/services";
interface ExportToHubProps {
@@ -16,7 +15,6 @@ interface ExportToHubProps {
export const useExportToHubViewModel = (props: ExportToHubProps) => {
const { dataset } = props;
- const { user } = useUser();
const notify = useNotifications();
const debounce = useDebounce(3000);
const { get, set } = useLocalStorage();
@@ -153,7 +151,7 @@ export const useExportToHubViewModel = (props: ExportToHubProps) => {
const openDialog = () => {
exportToHubForm.value = {
- orgOrUsername: user.value.userName,
+ orgOrUsername: "",
datasetName: dataset.name,
hfToken: "",
isPrivate: false,
diff --git a/argilla-frontend/plugins/directives/tooltip.directive.ts b/argilla-frontend/plugins/directives/tooltip.directive.ts
index d2a269e480..cbcd0c5f7a 100644
--- a/argilla-frontend/plugins/directives/tooltip.directive.ts
+++ b/argilla-frontend/plugins/directives/tooltip.directive.ts
@@ -1,327 +1,22 @@
-/* eslint-disable */
import Vue from "vue";
-
-type Element = HTMLElement & {
- textWrapper: HTMLElement;
- openTooltip: () => void;
- closeTooltip: () => void;
- clickOnTooltipElementEvent: () => void;
- clickOnClose: (event: Event) => void;
- clickOutsideEvent: (event: Event) => void;
- scrollInParent: () => void;
- resize: () => void;
-};
-
-// NOTE - to use tooltip directive, add to your html element where to put a tooltip :
-// v-tooltip="{ content: tooltipMessage, tooltipPosition: 'bottom' }"
-// => content (String) the message to show in the tooltip
-// TODO - implement the other tooltip direction top/right/left
+import BaseFixedTooltip from "@/components/base/base-tooltip/BaseFixedTooltip.vue";
Vue.directive("tooltip", {
- inserted: (
- element: Element,
- binding: {
- value: {
- open: any;
- content: string;
- backgroundColor: string;
- color: string;
- width: number;
- tooltipPosition: string;
- };
- }
- ) => {
- const tooltipId = `${element.id}tooltip`;
- const tooltipCloseIconId = `${tooltipId}__close-icon`;
- let tooltip = null;
- let closeIcon = null;
- element.style.position = "relative";
- element.style.cursor = "pointer";
- let elementOffset = initElementOffset(element);
- const {
- content,
- backgroundColor,
- color,
- width = content.length < 40 ? 100 : 400,
- tooltipPosition = TOOLTIP_DIRECTION.BOTTOM,
- } = binding.value;
-
- if (content?.length) {
- // NOTE - init tooltip node
- tooltip = document.createElement("div");
- tooltip.setAttribute("id", tooltipId);
-
- // NOTE - init text node
- let textWrapper = document.createElement("span");
- textWrapper.innerHTML = content;
-
- // NOTE - init close icon
- let tooltipHeader = document.createElement("div");
- tooltipHeader = initTooltipHeaderStyle(tooltipHeader);
- (tooltipHeader.firstChild as HTMLElement).setAttribute(
- "id",
- tooltipCloseIconId
- );
-
- // NOTE - triangle
- let tooltipTriangle = document.createElement("div");
- tooltipTriangle = initTooltipTriangleStyle(tooltipTriangle);
- let tooltipTriangleInner = document.createElement("div");
- tooltipTriangleInner = initTooltipTriangleInnerStyle(
- tooltipTriangleInner,
- backgroundColor
- );
-
- // NOTE - include close icon and text node inside tooltip
- tooltip.appendChild(tooltipHeader);
- tooltip.appendChild(tooltipTriangle);
- tooltip.appendChild(textWrapper);
- tooltipTriangle.appendChild(tooltipTriangleInner);
-
- // NOTE - text styles
- textWrapper = initTextStyle(textWrapper);
-
- // NOTE - tooltip styles
- tooltip = initTooltipStyle(tooltip, width, backgroundColor);
-
- // NOTE - init tooltip position
- tooltip = initTooltipPosition(tooltip, tooltipPosition, elementOffset);
-
- // NOTE - add the tooltip to the element and add event listener to the close icon
- element.appendChild(tooltip);
- element.textWrapper = textWrapper;
- closeIcon = document.getElementById(tooltipCloseIconId);
- }
-
- element.openTooltip = () => {
- tooltip.style.display = "flex";
- tooltip.setAttribute("tooltip-visible", "true");
- elementOffset = initElementOffset(element);
- tooltip = initTooltipPosition(tooltip, tooltipPosition, elementOffset);
- };
-
- element.closeTooltip = () => {
- tooltip.style.display = "none";
- tooltip.setAttribute("tooltip-visible", "false");
- };
-
- element.clickOnTooltipElementEvent = () => {
- if (tooltip.getAttribute("tooltip-visible") === "true") {
- return element.closeTooltip();
- }
-
- element.openTooltip();
- };
-
- element.clickOnClose = (event) => {
- event.stopPropagation();
- element.closeTooltip();
- };
-
- element.clickOutsideEvent = function (event) {
- if (
- !(element == event.target || element.contains(event.target as Node))
- ) {
- element.closeTooltip();
- }
- };
- element.scrollInParent = function () {
- const { top: parentOffsetTop = 0, bottom: parentOffsetBottom = 0 } =
- initElementOffset(getScrollableParent(element)) || {};
- if (
- elementOffset.top < parentOffsetTop ||
- elementOffset.bottom > parentOffsetBottom
- ) {
- tooltip.style.visibility = "hidden";
- } else {
- tooltip.style.visibility = "visible";
- }
- elementOffset = initElementOffset(element);
- tooltip = initTooltipPosition(tooltip, tooltipPosition, elementOffset);
- };
-
- element.resize = function () {
- elementOffset = initElementOffset(element);
- tooltip = initTooltipPosition(tooltip, tooltipPosition, elementOffset);
- };
-
- // NOTE - init all eventListeners
- initEventsListener(element, closeIcon);
-
- if (binding?.value.open) element.clickOnTooltipElementEvent();
- },
- unbind: (element) => {
- destroyEventsListener(element);
- },
- update(element, binding) {
- element.textWrapper.innerText = binding?.value.content;
-
- if (binding?.value.open) {
- element.openTooltip();
- } else {
- element.closeTooltip();
- }
+ bind: (element, binding) => {
+ const tooltipDiv = new Vue({
+ render(h) {
+ return h(BaseFixedTooltip, {
+ props: {
+ content: binding.value.content,
+ top: this.top,
+ left: this.left,
+ open: binding.value.open,
+ triggerElement: element,
+ },
+ });
+ },
+ }).$mount();
+
+ document.body.appendChild(tooltipDiv.$el);
},
});
-const isScrollable = function (element) {
- const hasScrollableContent = element.scrollHeight > element.clientHeight;
-
- const overflowYStyle = window.getComputedStyle(element).overflowY;
- const isOverflowHidden = overflowYStyle.includes("hidden");
-
- return hasScrollableContent && !isOverflowHidden;
-};
-
-const initElementOffset = function (element) {
- return element.getBoundingClientRect() || null;
-};
-const getScrollableParent = function (element) {
- return !element || element === document.body
- ? document.body
- : getElementOrParent(element);
-};
-const getElementOrParent = function (element) {
- return isScrollable(element)
- ? element
- : getScrollableParent(element.parentNode);
-};
-const initEventsListener = (element, closeIcon) => {
- if (element && closeIcon) {
- closeIcon.addEventListener("click", element.clickOnClose);
- element.addEventListener("click", element.clickOnTooltipElementEvent);
- document.body.addEventListener("click", element.clickOutsideEvent);
- getScrollableParent(element).addEventListener(
- "scroll",
- element.scrollInParent
- );
- window.addEventListener("resize", element.resize);
- }
-};
-
-const destroyEventsListener = (element) => {
- document.body.removeEventListener(
- "click",
- element.clickOnTooltipElementEvent
- );
- document.body.removeEventListener(
- "touchstart",
- element.clickOnTooltipElementEvent
- );
- document.body.removeEventListener("click", element.clickOutsideEvent);
- document.body.removeEventListener("touchstart", element.clickOutsideEvent);
- document.body.removeEventListener("click", element.clickOnClose);
- document.body.removeEventListener("touchstart", element.clickOnClose);
- getScrollableParent(element).removeEventListener(
- "scroll",
- element.scrollInParent
- );
- window.removeEventListener("resize", element.resize);
-};
-
-const initTooltipStyle = (tooltip, width, backgroundColor) => {
- tooltip.style.position = "fixed";
- tooltip.style.width = `${width}px`;
- tooltip.style.display = "none";
- tooltip.style.flexDirection = "column";
- tooltip.style.zIndex = "99999";
- tooltip.style.backgroundColor = `${
- backgroundColor || "var(--bg-accent-grey-2)"
- }`;
- tooltip.style.borderRadius = "5px";
- tooltip.style.padding = "8px 20px 8px 8px";
- tooltip.style.boxShadow = "0 8px 20px 0 rgba(0,0,0,.2)";
- tooltip.style.transition = "opacity 0.3s ease 0.2s";
- tooltip.style.border = "2px transparent solid";
- tooltip.style.cursor = "default";
- return tooltip;
-};
-const initTooltipHeaderStyle = (tooltipHeader) => {
- tooltipHeader.style.position = "absolute";
- tooltipHeader.style.top = "4px";
- tooltipHeader.style.right = "4px";
- tooltipHeader.innerHTML =
- '
';
- return tooltipHeader;
-};
-
-const initTooltipTriangleStyle = (tooltipTriangle) => {
- tooltipTriangle.setAttribute("class", "triangle");
- tooltipTriangle.style.position = "absolute";
- return tooltipTriangle;
-};
-const initTooltipTriangleInnerStyle = (
- tooltipTriangleInner,
- backgroundColor
-) => {
- tooltipTriangleInner.style.position = "relative";
- tooltipTriangleInner.style.width = "0";
- tooltipTriangleInner.style.height = "0";
- tooltipTriangleInner.style.borderBottom =
- "10px solid " + (backgroundColor || "var(--bg-accent-grey-2)");
- tooltipTriangleInner.style.borderRight = "10px solid transparent";
- tooltipTriangleInner.style.borderLeft = "10px solid transparent";
- return tooltipTriangleInner;
-};
-
-const initTooltipPosition = (tooltip, tooltipPosition, elementOffset) => {
- const tooltipOffset = initElementOffset(tooltip);
- const tooltipTriangle = tooltip.querySelector(".triangle");
- const tooltipTriangleOffset = initElementOffset(tooltipTriangle);
- const margin = 8;
- const rightSideOutOfViewport =
- window.innerWidth <= elementOffset.right + tooltipOffset.width / 2;
- const bottomSideoutOfViewport =
- window.innerHeight <= elementOffset.bottom + tooltipOffset.height;
- switch (tooltipPosition.toUpperCase()) {
- case TOOLTIP_DIRECTION.BOTTOM:
- tooltip.style.left = rightSideOutOfViewport
- ? `${
- elementOffset.left -
- tooltipOffset.width +
- elementOffset.width +
- tooltipTriangleOffset.width
- }px`
- : `${
- elementOffset.left -
- tooltipOffset.width / 2 +
- elementOffset.width / 2
- }px`;
- tooltipTriangle.style.left = rightSideOutOfViewport ? "100%" : "50%";
- tooltipTriangle.style.marginLeft = rightSideOutOfViewport
- ? `-${tooltipTriangleOffset.width * 2}px`
- : `-${tooltipTriangleOffset.width / 2}px`;
-
- tooltip.style.top = bottomSideoutOfViewport
- ? `${elementOffset.y - tooltipOffset.height - margin}px`
- : `${elementOffset.y + elementOffset.height + margin}px`;
-
- tooltipTriangle.style.transform = bottomSideoutOfViewport
- ? "rotateX(180deg)"
- : "";
- tooltipTriangle.style.top = bottomSideoutOfViewport
- ? "100%"
- : `-${tooltipTriangleOffset.height}px`;
- break;
- default:
- // tooltip direction is unknown
- }
-
- return tooltip;
-};
-
-const initTextStyle = (textWrapper) => {
- textWrapper.style.textAlign = "left";
- textWrapper.style.fontSize = "13px";
- textWrapper.style.fontStyle = "normal";
- textWrapper.style.fontWeight = "300";
- textWrapper.style.lineHeight = "18px";
- textWrapper.style.whiteSpace = "pre-wrap";
- textWrapper.style.overflow = "auto";
- textWrapper.style.maxHeight = "360px";
- textWrapper.style.color = "var(--fg-primary)";
- return textWrapper;
-};
-
-const TOOLTIP_DIRECTION = Object.freeze({
- BOTTOM: "BOTTOM",
-});
diff --git a/argilla-frontend/static/icons/export.svg b/argilla-frontend/static/icons/export.svg
new file mode 100644
index 0000000000..a72c56ec49
--- /dev/null
+++ b/argilla-frontend/static/icons/export.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/argilla-frontend/translation/de.js b/argilla-frontend/translation/de.js
index 5aa7d086db..731eedcf75 100644
--- a/argilla-frontend/translation/de.js
+++ b/argilla-frontend/translation/de.js
@@ -326,18 +326,21 @@ export default {
"Bitte folgen Sie der
Anleitung , um einen Workspace zu erstellen",
},
exportToHub: {
- dislogTitle: "Push to Hugging Face Hub",
+ dialogTitle: "Drücken",
ownerTooltip:
- "Only a valid Hugging Face organization or username can export the dataset to the Hub",
- tokenTooltip:
- "You can manage your access tokens in your
Hugging Face settings ",
+ "Verwenden Sie einen gültigen Hugging Face-Benutzernamen oder eine Organisation",
+ tokenTooltip: `Verwenden Sie ein vorhandenes Zugriffstoken oder erstellen Sie ein
neues Token mit "Schreibberechtigung"`,
validations: {
- orgOrUsernameIsRequired: "Organization or username is required",
- hfTokenIsRequired: "Hugging Face token is required",
- hfTokenInvalid: "Invalid Hugging Face token",
- datasetNameIsRequired: "Dataset name is required",
+ orgOrUsernameIsRequired:
+ "Organisation oder Benutzername sind erforderlich",
+ hfTokenIsRequired: "Umarmen des Gesichts -Tokens ist erforderlich ",
+ hfTokenInvalid: "Ungültiges Umarmungs -Gesichts -Token ",
+ datasetNameIsRequired: "Datensatzname ist erforderlich ",
},
- exporting: "Exporting...",
+ exporting: "Exportieren in den Umarmungsgesichtszentrum ",
+ private: "privater Datensatz",
+ public: "öffentlicher Datensatz",
+ exportingWarning: "This might take a few seconds",
},
config: {
field: {
diff --git a/argilla-frontend/translation/en.js b/argilla-frontend/translation/en.js
index 051d40ecb9..4725016cf4 100644
--- a/argilla-frontend/translation/en.js
+++ b/argilla-frontend/translation/en.js
@@ -327,18 +327,19 @@ export default {
"Please, follow this
guide to create a workspace",
},
exportToHub: {
- dislogTitle: "Push to Hugging Face Hub",
- ownerTooltip:
- "Only a valid Hugging Face organization or username can export the dataset to the Hub",
- tokenTooltip:
- "You can manage your access tokens in your
Hugging Face settings ",
+ dialogTitle: "Push to Hugging Face Hub",
+ ownerTooltip: "Use a valid Hugging Face username or organisation",
+ tokenTooltip: `Use an existing access token or create a
new token with "write permission"`,
validations: {
orgOrUsernameIsRequired: "Organization or username is required",
hfTokenIsRequired: "Hugging Face token is required",
hfTokenInvalid: "Invalid Hugging Face token",
datasetNameIsRequired: "Dataset name is required",
},
- exporting: "Exporting...",
+ exporting: "Exporting to Hugging Face hub",
+ private: "private dataset",
+ public: "public dataset",
+ exportingWarning: "Das kann ein paar Sekunden dauern",
},
config: {
field: {
diff --git a/argilla-frontend/translation/es.js b/argilla-frontend/translation/es.js
index e1ded55049..7852a614c9 100644
--- a/argilla-frontend/translation/es.js
+++ b/argilla-frontend/translation/es.js
@@ -330,11 +330,10 @@ export default {
"Por favor, sigue
esta guía para crear un espacio de trabajo",
},
exportToHub: {
- dislogTitle: "Exportar dataset a Hugging Face",
+ dialogTitle: "Exportar dataset a Hugging Face",
ownerTooltip:
- "Solo un usuario o una organización válida puede exportar un dataset a Hugging Face",
- tokenTooltip:
- "Puedes gestionar tus tokens en
Hugging Face settings ",
+ "Utiliza un nombre de usuario u organización de Hugging Face válidos",
+ tokenTooltip: `Utiliza un token de acceso existente o crear un
nuevo token con "permiso de escritura"`,
validations: {
orgOrUsernameIsRequired:
"El nombre de usuario u organización es requerido",
@@ -342,7 +341,10 @@ export default {
hfTokenInvalid: "El token de Hugging Face es inválido",
datasetNameIsRequired: "El nombre del dataset es requerido",
},
- exporting: "Exportando...",
+ exporting: "Exportando al hub de Hugging Face",
+ private: "dataset privado",
+ public: "dataset público",
+ exportingWarning: "Esto puede tardar unos segundos",
},
config: {
field: {