@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/features/translations/TranslateDialog/index.vue

@@ -4,133 +4,146 @@
     :title="$t('translationsTranslateDialogTitle', 'Automatic Translation')"
     icon="bk_mdi_translate"
     :width="1800"
-    hide-buttons
+    mono
     @cancel="$emit('close')"
   >
-    <div class="bk _bk_h-[calc(100vh-200px)] _bk_overflow-hidden _bk_flex _bk_flex-col">
-      <template v-if="isLoading">
-        <div class="_bk_flex _bk_items-center _bk_justify-center _bk_py-60">
-          <Loading />
-        </div>
-      </template>
+    <PanelSection
+      v-if="!isLoading && sourceValues.length"
+      :title="$t('filter', 'Filter')"
+      padded
+    >
+      <div class="_bk_flex _bk_items-center _bk_gap-20">
+        <FormToggle
+          v-model="onlyOutdated"
+          :label="
+  $t('translationsCsvOnlyOutdated', 'Only outdated translations')
+"
+        />
+        <FormToggle
+          v-model="onlyUntranslated"
+          :label="$t('translationsCsvOnlyMissing', 'Only missing translations')"
+        />
+      </div>
+    </PanelSection>
 
-      <template v-else-if="!sourceValues.length">
-        <div class="_bk_py-20 _bk_text-center _bk_text-mono-500">
-          {{
-            $t(
+    <PanelSection :title="sourceValues.length ? fieldsTitle : void 0">
+      <div v-if="isLoading" class="_bk_flex _bk_items-center _bk_justify-center _bk_py-60">
+        <Loading />
+      </div>
+
+      <div
+        v-else-if="!sourceValues.length"
+        class="_bk_py-20 _bk_text-center _bk_text-mono-500"
+      >
+        {{
+          $t(
   "translationsTranslateNoTexts",
   "No translatable texts found on this page."
 )
-          }}
-        </div>
-      </template>
+        }}
+      </div>
 
-      <template v-else>
-        <SelectionTable
-          v-model:only-outdated="onlyOutdated"
-          v-model:only-untranslated="onlyUntranslated"
-          show-filters
-          show-selection
-          :selected-count="selectedCount"
-          :total-count="filteredValues.length"
-          :label="$t('translationsTranslateFieldsLabel', 'fields selected')"
-          @toggle-all="toggleAll"
-        >
-          <template #header>
-            <th>{{ sourceLangName }}</th>
-            <th v-if="hasTranslated">
-              {{ targetLangName }}
-            </th>
-            <th v-else>
-              {{
-                $t(
+      <SelectionTable
+        v-else
+        show-selection
+        :selected-count="selectedCount"
+        :total-count="filteredValues.length"
+        @toggle-all="toggleAll"
+      >
+        <template #header>
+          <th>{{ sourceLangName }}</th>
+          <th v-if="hasTranslated">
+            {{ targetLangName }}
+          </th>
+          <th v-else>
+            {{
+              $t(
   "translationsTranslateCurrentColumn",
   "Current translation (@language)"
 ).replace("@language", targetLangName)
-              }}
-            </th>
-          </template>
-          <template #body>
-            <tr v-for="item in filteredValues" :key="item.key">
-              <td>
-                <div class="bk-checkbox">
-                  <input
-                    type="checkbox"
-                    :checked="selected[item.key]"
-                    @change="selected[item.key] = !selected[item.key]"
-                  />
-                  <span class="_bk_!mt-0 _bk_before:!mt-0" />
-                </div>
-              </td>
-              <td v-text="stripHtml(item.value)" />
-              <td v-if="hasTranslated && translations.has(item.key)">
-                <DiffValue
-                  :before="currentValues.get(item.key) || ''"
-                  :after="translations.get(item.key) || ''"
-                  :after-only="
+            }}
+          </th>
+        </template>
+        <template #body>
+          <tr v-for="item in filteredValues" :key="item.key">
+            <td>
+              <div class="bk-checkbox">
+                <input
+                  type="checkbox"
+                  :checked="selected[item.key]"
+                  @change="selected[item.key] = !selected[item.key]"
+                />
+                <span class="_bk_!mt-0 _bk_before:!mt-0" />
+              </div>
+            </td>
+            <td v-text="stripHtml(item.value)" />
+            <td v-if="hasTranslated && translations.has(item.key)">
+              <DiffValue
+                :before="currentValues.get(item.key) || ''"
+                :after="translations.get(item.key) || ''"
+                :after-only="
   !currentValues.get(item.key) || currentValues.get(item.key) === item.value
 "
-                />
-              </td>
-              <td v-else>
-                <span
-                  v-if="
+              />
+            </td>
+            <td v-else>
+              <span
+                v-if="
   currentValues.get(item.key) && currentValues.get(item.key) !== item.value
 "
-                  v-text="stripHtml(currentValues.get(item.key))"
-                />
-                <span v-else class="_bk_text-mono-400 _bk_italic">&mdash;</span>
-              </td>
-            </tr>
-          </template>
-        </SelectionTable>
+                v-text="stripHtml(currentValues.get(item.key))"
+              />
+              <span v-else class="_bk_text-mono-400 _bk_italic">&mdash;</span>
+            </td>
+          </tr>
+        </template>
+      </SelectionTable>
+    </PanelSection>
+
+    <template v-if="errorMessage" #pre-footer>
+      <div class="_bk_text-red-normal _bk_text-sm" v-text="errorMessage" />
+    </template>
 
-        <div class="_bk_flex _bk_items-center _bk_gap-10 _bk_mt-auto _bk_pt-20">
-          <button
-            class="bk-button"
-            :disabled="!selectedCount || isTranslating"
-            @click="requestTranslations"
-          >
-            <template v-if="isTranslating">
-              {{ $t("translationsTranslateLoading", "Translating...") }}
-            </template>
-            <template v-else>
-              {{
-                $t(
+    <template #footer>
+      <button
+        class="bk-button"
+        :disabled="!selectedCount || isTranslating"
+        @click="requestTranslations"
+      >
+        <template v-if="isTranslating">
+          {{
+            $t("translationsTranslateLoading", "Translating", { more: true })
+          }}
+        </template>
+        <template v-else>
+          {{
+            $t(
   "translationsTranslateButton",
   "Request @count translations"
 ).replace("@count", selectedCount.toString())
-              }}
-            </template>
-          </button>
-          <button
-            class="bk-button bk-is-primary"
-            :disabled="!hasTranslated || !selectedCount || isApplying"
-            @click="applyTranslations"
-          >
-            {{
-              $t(
-  "translationsTranslateApply",
-  "Apply @count translations"
-).replace("@count", selectedCount.toString())
-            }}
-          </button>
-          <FormToggle
-            v-model="markUpToDate"
-            class="_bk_!h-auto"
-            :label="
+          }}
+        </template>
+      </button>
+      <button
+        class="bk-button bk-scheme-accent"
+        :disabled="!hasTranslated || !selectedCount || isApplying"
+        @click="applyTranslations"
+      >
+        {{
+          $t("translationsTranslateApply", "Apply @count translations").replace(
+  "@count",
+  selectedCount.toString()
+)
+        }}
+      </button>
+      <FormToggle
+        v-model="markUpToDate"
+        class="_bk_!h-auto"
+        :label="
   $t('translationsMarkUpToDate', 'Mark translations as up to date')
 "
-          />
-        </div>
-      </template>
-
-      <div
-        v-if="errorMessage"
-        class="_bk_text-red-normal _bk_text-sm"
-        v-text="errorMessage"
       />
-    </div>
+    </template>
   </DialogModal>
 </template>
 
@@ -142,6 +155,7 @@ import {
   FormToggle,
   Loading
 } from "#blokkli/editor/components";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
 import SelectionTable from "../SelectionTable/index.vue";
 const emit = defineEmits(["close"]);
 const { adapter, $t, state, context, blocks } = useBlokkli();
@@ -183,6 +197,9 @@ const filteredValues = computed(() => {
 const selectedCount = computed(
   () => filteredValues.value.filter((item) => selected.value[item.key]).length
 );
+const fieldsTitle = computed(
+  () => `${selectedCount.value}/${filteredValues.value.length} ` + $t("translationsTranslateFieldsLabel", "fields selected")
+);
 const sourceLangName = computed(() => {
   const id = sourceLanguage.value;
   return state.translation.value.availableLanguages?.find((l) => l.id === id)?.name ?? id;

package/dist/runtime/editor/features/translations/index.vue

@@ -1,52 +1,6 @@
 <template>
   <Teleport to="#bk-toolbar-after-title">
-    <PluginTourItem
-      v-if="items.length > 1"
-      id="translations"
-      :title="$t('translationsTourTitle', 'Translations')"
-      :text="
-  $t(
-    'translationsTourText',
-    'Quickly switch between available translations. A greyed out language indicates the content is not yet translated. Clicking on it opens the form to create a new translation for this language.'
-  )
-"
-    >
-      <div class="bk-translations">
-        <button
-          v-if="isDropdown"
-          class="bk-toolbar-button"
-          :class="{ 'bk-is-active': isOpen }"
-          @click.stop.prevent="isOpen = !isOpen"
-        >
-          {{ activeLangcode }}
-        </button>
-        <div
-          v-if="isOpen || !isDropdown"
-          :class="
-  isDropdown ? 'bk-translations-dropdown' : 'bk-blokkli-item-options-radios bk-is-language'
-"
-        >
-          <label
-            v-for="item in items"
-            :key="item.id"
-            class="_bk_group/tooltip"
-            :class="{ 'bk-is-muted': !item.translation?.exists }"
-          >
-            <div>
-              <input
-                type="radio"
-                :checked="item.checked"
-                :value="item.id"
-                name="pb_language"
-                @click.stop.prevent="onClick(item, $event)"
-              />
-              <span>{{ item.code }}</span>
-              <Tooltip v-show="!isOpen" :label="item.label" class="_bk_w-full" />
-            </div>
-          </label>
-        </div>
-      </div>
-    </PluginTourItem>
+    <LanguageSwitcher :active-language />
   </Teleport>
 
   <Teleport to="#bk-banner-list">
@@ -74,7 +28,13 @@
     :disabled="markUpToDateDisabledReason"
     disabled-reason-success
     multiple
-    :title="$t('translationsMarkUpToDate', 'Mark translation as up-to-date')"
+    :title="$t('translationsMarkUpToDate', 'Mark as up-to-date')"
+    :description="
+  $t(
+    'translationsMarkUpToDateDescription',
+    'Marks all text translations of this block as up-to-date.'
+  )
+"
     icon="bk_mdi_check_circle"
     :weight="-100"
     @click="onMarkUpToDate"
@@ -100,11 +60,16 @@
     v-if="isTranslating"
     id="translate"
     :disabled="translateDisabledReason"
-    :title="$t('translationsItemAction', 'Translate')"
+    :title="$t('editTranslation', 'Edit translation') + '...'"
+    :description="
+  $t('editTranslationDescription', 'Manually add or edit the translations.')
+"
     icon="bk_mdi_translate"
     :weight="-90"
     @click="onTranslate"
   />
+
+  <AutoTranslate />
 </template>
 
 <script setup>
@@ -117,20 +82,23 @@ import {
   defineAsyncComponent
 } from "#imports";
 import { falsy } from "#blokkli/helpers";
-import { PluginItemAction, PluginTourItem } from "#blokkli/editor/plugins";
+import { PluginItemAction } from "#blokkli/editor/plugins";
 import {
   defineMenuButton,
   defineHighlight,
-  defineItemDropdownAction,
   onBlokkliEvent,
   useDialog
 } from "#blokkli/editor/composables";
-import { BlokkliTransition, Tooltip } from "#blokkli/editor/components";
+import { BlokkliTransition } from "#blokkli/editor/components";
+import LanguageSwitcher from "./LanguageSwitcher/index.vue";
 const CsvDialog = defineAsyncComponent(() => import("./CsvDialog/index.vue"));
 const TranslateDialog = defineAsyncComponent(
   () => import("./TranslateDialog/index.vue")
 );
 const Banner = defineAsyncComponent(() => import("./Banner/index.vue"));
+const AutoTranslate = defineAsyncComponent(
+  () => import("./AutoTranslate/index.vue")
+);
 const { adapter } = defineBlokkliFeature({
   id: "translations",
   label: "Translations",
@@ -178,63 +146,6 @@ defineHighlight(() => {
     onClick: () => onMarkUpToDate([block])
   }));
 });
-const autoTranslateLabel = computed(() => {
-  return $t("translationsAutoTranslate", "Auto-translate");
-});
-defineItemDropdownAction(() => {
-  if (!isTranslating.value || !adapter.requestTranslation || !adapter.loadTextFieldValuesForLanguage || !adapter.importTranslationsBatched) {
-    return;
-  }
-  const selectedUuids = selection.uuids.value;
-  if (!selectedUuids.length) return;
-  return {
-    id: "auto-translate",
-    label: autoTranslateLabel.value,
-    icon: "bk_mdi_translate",
-    group: "translate",
-    weight: -80,
-    callback: () => autoTranslateSelected()
-  };
-});
-async function autoTranslateSelected() {
-  ui.setTransform(autoTranslateLabel.value);
-  const sourceLanguage = state.translation.value.sourceLanguage || "en";
-  const targetLanguage = context.value.language;
-  const selectedUuids = new Set(selection.uuids.value);
-  const sourceValues = await adapter.loadTextFieldValuesForLanguage(sourceLanguage);
-  const items2 = sourceValues.filter((v) => selectedUuids.has(v.uuid)).map((v) => ({
-    key: `${v.uuid}:${v.fieldName}`,
-    text: v.value,
-    isHtml: v.fieldType === "markup",
-    sourceLanguage,
-    targetLanguage
-  }));
-  if (items2.length) {
-    const response = await adapter.requestTranslation(items2);
-    if (!response.success || !response.data.length) return;
-    const importItems = response.data.map((result) => {
-      const separatorIndex = result.key.indexOf(":");
-      return {
-        langcode: targetLanguage,
-        uuid: result.key.substring(0, separatorIndex),
-        fieldName: result.key.substring(separatorIndex + 1),
-        fieldValue: result.translatedText
-      };
-    });
-    await state.mutateWithLoadingState(
-      () => adapter.importTranslationsBatched({ items: importItems })
-    );
-  }
-  ui.setTransform(null);
-}
-const isOpen = ref(false);
-const isDropdown = computed(() => {
-  if (ui.isMobile.value) {
-    return true;
-  }
-  const allCodes = items.value.map((v) => v.code).join("");
-  return allCodes.length > 15;
-});
 const activeLangcode = computed(() => context.value.language);
 const activeLanguage = computed(() => {
   return state.translation.value.availableLanguages?.find(
@@ -244,22 +155,6 @@ const activeLanguage = computed(() => {
     name: activeLangcode.value
   };
 });
-const items = computed(() => {
-  return (state.translation.value.availableLanguages || []).map((language) => {
-    if (language && language.id) {
-      return {
-        id: language.id,
-        code: language.id.toUpperCase(),
-        label: language.name,
-        checked: context.value.language === language.id,
-        translation: (state.translation.value.translations || []).find(
-          (v) => v.id === language.id
-        )
-      };
-    }
-    return null;
-  }).filter(falsy);
-});
 const translateDisabledReason = computed(() => {
   const block = selection.item.value;
   if (!block) {
@@ -277,10 +172,7 @@ const translateDisabledReason = computed(() => {
     block.parentBlockBundle
   );
   if (definition?.editor?.disableEdit) {
-    return $t(
-      "translateEditDisabled",
-      "Editing is disabled for this block type."
-    );
+    return $t("editingDisabled", "Editing is disabled for this block type.");
   }
   const type = types.getBlockBundleDefinition(block.bundle);
   if (!type || !type.isTranslatable) {
@@ -291,15 +183,6 @@ const translateDisabledReason = computed(() => {
   }
   return false;
 });
-function onClick(item, event) {
-  if (item.translation?.exists) {
-    return adapter.changeLanguage(item.translation);
-  }
-  event.preventDefault();
-  if (item.translation) {
-    eventBus.emit("translateEntity", item.translation);
-  }
-}
 const markUpToDateDisabledReason = computed(() => {
   const lang = context.value.language;
   if (selection.items.value.some(
@@ -312,8 +195,8 @@ const markUpToDateDisabledReason = computed(() => {
     "No selected blocks have an outdated translation."
   );
 });
-function onTranslate(items2) {
-  const item = items2[0];
+function onTranslate(items) {
+  const item = items[0];
   if (item) {
     eventBus.emit("item:edit", {
       uuid: item.uuid,
@@ -321,10 +204,10 @@ function onTranslate(items2) {
     });
   }
 }
-function onMarkUpToDate(items2) {
+function onMarkUpToDate(items) {
   if (!adapter.markTranslationUpToDate) return;
   const lang = context.value.language;
-  const uuids = items2.map((item) => {
+  const uuids = items.map((item) => {
     if (typeof item === "string") {
       return item;
     }
@@ -369,7 +252,7 @@ onMounted(() => {
 defineMenuButton(() => {
   return {
     id: "translations",
-    title: $t("translationsBatchTranslateMenuTitle", "Translate..."),
+    title: $t("translate", "Translate", { more: true }),
     description: $t(
       "translationsBatchTranslateMenuDescription",
       "Translate all blocks"
@@ -393,99 +276,3 @@ export default {
   name: "Translations"
 };
 </script>
-
-<style>
-.bk .bk-translations {
-    position: relative;
-    font-size: 12px;
-    line-height: 16px
-}
-@media (min-width: 1024px) {
-    .bk .bk-translations {
-        font-size: 14px;
-        line-height: 20px
-    }
-}
-@media (min-width: 1280px) {
-    .bk .bk-translations {
-        font-size: 16px;
-        line-height: 24px
-    }
-}
-    .bk .bk-translations .bk-toolbar-button {
-    height: 100%;
-    font-weight: 600;
-    text-transform: uppercase
-}
-    .bk .bk-translations .bk-toolbar-button.bk-is-active {
-    --bk-tw-bg-opacity: 1 !important;
-    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1)) !important;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1))
-}
-    .bk .bk-translations .bk-translations-dropdown {
-    position: absolute;
-    top: 100%;
-    right: 0px;
-    z-index: calc(var(--bk-z-index-base) + 230000) /* "toolbar-dropdown" */;
-    max-width: 300px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --bk-tw-shadow-colored: 0 10px 15px -3px var(--bk-tw-shadow-color), 0 4px 6px -4px var(--bk-tw-shadow-color);
-    box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow)
-}
-    @media (min-width: 1024px) {
-    .bk .bk-translations .bk-translations-dropdown {
-        right: auto;
-        left: 0px
-    }
-}
-    .bk .bk-translations .bk-translations-dropdown label {
-    position: relative;
-    display: block;
-    cursor: pointer;
-    white-space: nowrap;
-    padding-left: 15px;
-    padding-right: 15px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    font-size: 14px;
-    line-height: 20px
-}
-    @media (min-width: 1024px) {
-    .bk .bk-translations .bk-translations-dropdown label:hover {
-        --bk-tw-bg-opacity: 1;
-        background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1))
-    }
-}
-    .bk .bk-translations .bk-translations-dropdown label.bk-is-muted {
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1))
-}
-    .bk .bk-translations .bk-translations-dropdown label > div {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px
-}
-    @media (min-width: 768px) {
-    .bk .bk-translations .bk-translations-dropdown label > div {
-        gap: 20px
-    }
-}
-    .bk .bk-translations .bk-translations-dropdown label > div span {
-    order: 9999;
-    font-weight: 600
-}
-    .bk .bk-translations .bk-translations-dropdown input {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    height: 100%;
-    width: 100%;
-    cursor: pointer;
-    appearance: none;
-    opacity: 0
-}
-</style>