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

package/dist/runtime/editor/features/publish/Dialog/index.vue

@@ -7,16 +7,13 @@
     :is-loading="isLoading"
     :can-submit="canSubmit"
     class="bk-is-publish-dialog"
+    mono
     @submit="onSubmit"
     @cancel="$emit('close')"
   >
-    <div class="bk bk-form bk-dialog-publish-form">
-      <FormItem>
-        <div class="bk-form-label">
-          <span>{{ $t("publishMode", "Publish mode") }}</span
-          ><span class="bk-required-indicator">*</span>
-        </div>
-        <div class="bk-publish-options">
+    <div class="_bk_min-h-[900px]">
+      <PanelSection :title="$t('publishMode', 'Publish mode')" padded>
+        <div class="_bk_grid _bk_grid-cols-3 _bk_gap-10">
           <PublishOption
             v-for="option in publishModeOptions"
             :id="option.id"
@@ -29,54 +26,13 @@
             :disabled="option.disabled"
           />
         </div>
-      </FormItem>
+      </PanelSection>
 
-      <FormItem v-if="publishMode === 'scheduled'">
-        <div>
-          <label class="bk-form-label">
-            {{ $t("publishScheduleDate", "Publication date") }}
-          </label>
-          <div class="bk-publish-schedule-date-wrapper">
-            <div v-if="isAlreadyScheduled" class="bk-publish-scheduled-display">
-              {{ formatScheduleDate(scheduleDate) }}
-            </div>
-            <ScheduleDate
-              v-else
-              v-model="scheduleDate"
-              :disabled="isLoading"
-              :error="scheduleDateError"
-            >
-              <div
-                class="bk-schedule-date-info"
-                v-text="
-  $t(
-    'publishScheduledInfo',
-    'You can still make changes until the scheduled publication date.'
-  )
-"
-              />
-            </ScheduleDate>
-            <button
-              v-if="isAlreadyScheduled"
-              type="button"
-              class="bk-button bk-is-danger"
-              @click="removeScheduledDate"
-            >
-              {{ $t("publishRemoveSchedule", "Remove schedule") }}
-            </button>
-          </div>
-          <div v-if="isAlreadyScheduled" class="bk-form-description">
-            {{
-              $t(
-  "publishAlreadyScheduledDescription",
-  "This page is already scheduled for publishing"
-)
-            }}
-          </div>
-        </div>
-      </FormItem>
-
-      <FormItem v-if="publishOptions?.hasRevisionLogMessage">
+      <PanelSection
+        v-if="publishOptions?.hasRevisionLogMessage"
+        :title="$t('settings', 'Settings')"
+        padded
+      >
         <FormTextarea
           id="revision-message"
           v-model="revisionMessage"
@@ -90,86 +46,137 @@
           :disabled="isLoading || isAlreadyScheduled"
           rows="2"
         />
-      </FormItem>
-
-      <FormItem v-if="publishMode !== 'save' && scheduledBlocks.length">
-        <InfoBox>
-          <p
-            v-for="(text, index) in scheduledBlocks"
-            :key="'infobox' + index"
-            v-html="text"
+      </PanelSection>
+      <PanelSection
+        v-if="publishMode === 'scheduled'"
+        :title="$t('publishScheduleDate', 'Publication date')"
+        padded
+      >
+        <div
+          class="_bk_flex _bk_gap-20 _bk_items-stretch _bk_[&_.bk-button]:whitespace-nowrap _bk_[&_.bk-button]:shrink"
+        >
+          <div
+            v-if="isAlreadyScheduled"
+            class="_bk_flex-1 _bk_flex _bk_items-center _bk_font-bold _bk_text-xl _bk_bg-yellow-light _bk_text-yellow-dark _bk_pl-10 _bk_border _bk_border-yellow-normal _bk_tabular-nums"
+          >
+            {{ formatScheduleDate(scheduleDate) }}
+          </div>
+          <ScheduleDate
+            v-else
+            v-model="scheduleDate"
+            :disabled="isLoading"
+            :error="scheduleDateError"
+          >
+            <InfoBox
+              small
+              class="_bk_mt-15"
+              :text="
+  $t(
+    'publishScheduledInfo',
+    'You can still make changes until the scheduled publication date.'
+  )
+"
+            />
+          </ScheduleDate>
+          <button
+            v-if="isAlreadyScheduled"
+            type="button"
+            class="bk-button bk-scheme-red"
+            @click="removeScheduledDate"
+          >
+            {{ $t("publishRemoveSchedule", "Remove schedule") }}
+          </button>
+        </div>
+        <div v-if="isAlreadyScheduled" class="bk-form-description">
+          {{
+            $t(
+  "publishAlreadyScheduledDescription",
+  "This page is already scheduled for publishing"
+)
+          }}
+        </div>
+      </PanelSection>
+      <PanelSection :title="$t('summary', 'Summary')" padded>
+        <FormItem>
+          <Summary
+            :is-published="isCurrentlyPublished"
+            :mode="publishMode"
+            :current-state-label="currentStateLabel"
+            :action-label="actionLabel"
+            :result-state-label="resultStateLabel"
           />
-        </InfoBox>
-      </FormItem>
-
-      <FormItem v-if="successItems.length && showTable">
-        <h2 class="bk-heading-2">
-          {{ $t("publishSuccessfullyPublished", "Successfully published") }}
-        </h2>
+        </FormItem>
+        <FormItem v-if="publishMode !== 'save' && scheduledBlocks.length">
+          <InfoBox data-test="publish-scheduled-blocks-notice">
+            <p
+              v-for="(text, index) in scheduledBlocks"
+              :key="'infobox' + index"
+              data-test="publish-scheduled-block"
+              v-html="text"
+            />
+          </InfoBox>
+        </FormItem>
+      </PanelSection>
+      <div>
+        <FormItem v-if="successItems.length && showTable">
+          <h2 class="bk-heading-2">
+            {{ $t("publishSuccessfullyPublished", "Successfully published") }}
+          </h2>
 
-        <table class="bk-table bk-publish-dialog-table">
-          <thead>
-            <tr>
-              <th>{{ $t("publishName", "Name") }}</th>
-              <th colspan="2">{{ $t("publishStatus", "Status") }}</th>
-            </tr>
-          </thead>
+          <table class="bk-table">
+            <thead>
+              <tr>
+                <th class="_bk_w-full">{{ $t("name", "Name") }}</th>
+                <th colspan="2" class="_bk_text-right _bk_whitespace-nowrap _bk_pl-18">
+                  {{ $t("publishStatus", "Status") }}
+                </th>
+              </tr>
+            </thead>
 
-          <tbody>
-            <Item
-              v-for="item in successItems"
-              :key="'success' + item.id"
-              v-bind="item"
-              v-model="states"
-              :is-current="item.id === currentId"
-              :should-publish
-              :is-mutating
-              :mutation-status="mutationStatusItems[item.id]"
-              :is-scheduled="enableScheduling"
-              :schedule-date
-            />
-          </tbody>
-        </table>
+            <tbody>
+              <Item
+                v-for="item in successItems"
+                :key="'success' + item.id"
+                v-bind="item"
+                v-model="states"
+                :is-current="item.id === currentId"
+                :should-publish
+                :is-mutating
+                :mutation-status="mutationStatusItems[item.id]"
+                :is-scheduled="enableScheduling"
+                :schedule-date
+              />
+            </tbody>
+          </table>
 
-        <table class="bk-table bk-publish-dialog-table">
-          <thead>
-            <tr>
-              <th>{{ $t("publishName", "Name") }}</th>
-              <th colspan="2">{{ $t("publishStatus", "Status") }}</th>
-            </tr>
-          </thead>
+          <table class="bk-table _bk_mt-40">
+            <thead>
+              <tr>
+                <th class="_bk_w-full">{{ $t("name", "Name") }}</th>
+                <th colspan="2" class="_bk_text-right _bk_whitespace-nowrap _bk_pl-18">
+                  {{ $t("publishStatus", "Status") }}
+                </th>
+              </tr>
+            </thead>
 
-          <tbody>
-            <Item
-              v-for="item in toPublishItems"
-              :key="'to_publish_' + item.id"
-              v-bind="item"
-              v-model="states"
-              :is-current="item.id === currentId"
-              :should-publish
-              :is-mutating
-              :mutation-status="mutationStatusItems[item.id]"
-              :is-scheduled="enableScheduling"
-              :schedule-date
-            />
-          </tbody>
-        </table>
-      </FormItem>
-    </div>
-    <template #pre-footer>
-      <div>
-        <h3 class="bk-form-label">
-          {{ $t("publishSummary", "Summary") }}
-        </h3>
-        <Summary
-          :is-published="isCurrentlyPublished"
-          :mode="publishMode"
-          :current-state-label="currentStateLabel"
-          :action-label="actionLabel"
-          :result-state-label="resultStateLabel"
-        />
+            <tbody>
+              <Item
+                v-for="item in toPublishItems"
+                :key="'to_publish_' + item.id"
+                v-bind="item"
+                v-model="states"
+                :is-current="item.id === currentId"
+                :should-publish
+                :is-mutating
+                :mutation-status="mutationStatusItems[item.id]"
+                :is-scheduled="enableScheduling"
+                :schedule-date
+              />
+            </tbody>
+          </table>
+        </FormItem>
       </div>
-    </template>
+    </div>
   </DialogModal>
 </template>
 
@@ -194,6 +201,7 @@ import { emitMessage } from "#blokkli/editor/events";
 import Item from "./Item.vue";
 import PublishOption, {} from "./PublishOption.vue";
 import Summary from "./Summary.vue";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
 const showTable = false;
 const { adapter, $t, state, context, ui } = useBlokkli();
 const formatScheduleDate = (date) => {
@@ -271,7 +279,7 @@ const publishModeOptions = computed(() => {
       id: "save",
       icon: "bk_mdi_save",
       color: "red",
-      label: $t("publishModeSaveTitle", "Save"),
+      label: $t("save", "Save"),
       description: $t(
         "publishModeSaveDescription",
         "Save changes without publishing"
@@ -282,7 +290,7 @@ const publishModeOptions = computed(() => {
       id: "immediate",
       icon: "bk_mdi_publish",
       color: "lime",
-      label: $t("publishModeImmediateTitle", "Publish"),
+      label: $t("publish", "Publish"),
       description: $t(
         "publishModeImmediateDescription",
         "Publish changes immediately"
@@ -444,16 +452,16 @@ const submitLabel = computed(() => {
   );
 });
 const currentStateLabel = computed(
-  () => isCurrentlyPublished.value ? $t("publishCurrentlyPublished", "Page is published") : $t("publishCurrentlyUnpublished", "Page is unpublished")
+  () => isCurrentlyPublished.value ? $t("pageIsPublished", "Page is published") : $t("publishCurrentlyUnpublished", "Page is unpublished")
 );
 const actionLabel = computed(() => {
   if (publishMode.value === "save") {
-    return $t("publishModeSaveTitle", "Save");
+    return $t("save", "Save");
   }
   if (publishMode.value === "scheduled") {
     return $t("publishModeScheduledTitle", "Schedule");
   }
-  return $t("publishModeImmediateTitle", "Publish");
+  return $t("publish", "Publish");
 });
 const resultStateLabel = computed(() => {
   if (publishMode.value === "save") {