From dc5c2004b17faa17b08803ab481dd69e227e0005 Mon Sep 17 00:00:00 2001 From: Sartxi Date: Tue, 17 Sep 2024 19:01:08 -0600 Subject: [PATCH] preflight publishing disabling --- libs/blocks/preflight/panels/general.js | 53 ++++++++---- libs/blocks/preflight/preflight.css | 104 +++++++++++++++++++----- 2 files changed, 121 insertions(+), 36 deletions(-) diff --git a/libs/blocks/preflight/panels/general.js b/libs/blocks/preflight/panels/general.js index 53d8fcda3c..1805ce4bc4 100644 --- a/libs/blocks/preflight/panels/general.js +++ b/libs/blocks/preflight/panels/general.js @@ -1,4 +1,5 @@ import { html, signal, useEffect } from '../../../deps/htm-preact.js'; +import userCanPublishPage from '../../../tools/utils/publish.js'; const NOT_FOUND = { preview: { lastModified: 'Not found' }, live: { lastModified: 'Not found' } }; @@ -16,19 +17,19 @@ async function getStatus(url) { const resp = await fetch(adminUrl); if (!resp.ok) return {}; const json = await resp.json(); + const publish = await userCanPublishPage(json, false); const preview = json.preview.lastModified || 'Never'; const live = json.live.lastModified || 'Never'; const edit = json.edit.url; - return { url, edit, preview, live }; + return { url, edit, preview, live, publish }; } -function getStatuses() { - Object.keys(content.value).forEach((key) => { - content.value[key].items.forEach((item, idx) => { - getStatus(item.url).then((status) => { - content.value[key].items[idx] = status; - content.value = { ...content.value }; - }); +async function getStatuses() { + Object.keys(content.value).forEach(async (key) => { + content.value[key].items.forEach(async (item, idx) => { + const status = await getStatus(item.url); + content.value[key].items[idx] = status; + content.value = { ...content.value }; }); }); } @@ -73,7 +74,8 @@ async function setContent() { async function handleAction(action) { Object.keys(content.value).map(async (key) => { content.value[key].items.forEach(async (item, idx) => { - if (!item.checked) return; + const checkPublish = action === 'live' ? (item.publish && !item.publish.canPublish) : false; + if (!item.checked || checkPublish) return; content.value[key].items[idx].action = action; content.value = { ...content.value }; const adminUrl = getAdminUrl(item.url, action); @@ -128,7 +130,19 @@ function prettyPath(url) { return url.hash ? `${url.pathname} (${url.hash})` : url.pathname; } +function usePublishProps(item) { + let disablePublish; + if (item.publish && !item.publish.canPublish) { + disablePublish = html`${item.publish.message}`; + } + return { + publishText: html`${item.action === 'live' ? 'Publishing' : prettyDate(item.live)}`, + disablePublish, + }; +} + function Item({ name, item, idx }) { + const { publishText, disablePublish } = usePublishProps(item); const isChecked = item.checked ? ' is-checked' : ''; const isFetching = item.edit ? '' : ' is-fetching'; if (!item.url) return undefined; @@ -139,7 +153,9 @@ function Item({ name, item, idx }) {

${prettyPath(item.url)}

${item.edit && html`EDIT`}

${item.action === 'preview' ? 'Previewing' : prettyDate(item.preview)}

-

${item.action === 'live' ? 'Publishing' : prettyDate(item.live)}

+

+ ${isChecked && disablePublish ? html`${disablePublish}` : publishText} +

`; } @@ -167,12 +183,18 @@ function ContentGroup({ name, group }) { export default function General() { useEffect(() => { setContent(); }, []); - const checked = Object.keys(content.value) - .find((key) => content.value[key].items.find((item) => item.checked)); + const allChecked = Object.values(content.value) + .flatMap((item) => item.items).filter((item) => item.checked); + + const checked = !!allChecked.length; + const publishable = allChecked + .filter((item) => item.checked && !!item.publish?.canPublish).length; const hasPage = content.value.page; const selectStyle = checked ? 'Select none' : 'Select all'; + const tooltip = allChecked.length !== publishable && 'Puplishing disabled pages will be ignored'; + return html`
${Object.keys(content.value).map((key) => html`<${ContentGroup} name=${key} group=${content.value[key]} />`)} @@ -188,8 +210,11 @@ export default function General() {
-
- +
+ ${!!publishable && html` + `}
`}
diff --git a/libs/blocks/preflight/preflight.css b/libs/blocks/preflight/preflight.css index 40210aa579..91266545b1 100644 --- a/libs/blocks/preflight/preflight.css +++ b/libs/blocks/preflight/preflight.css @@ -89,7 +89,7 @@ p.preflight-content-heading { } p.preflight-content-heading-edit { - padding-left: 4px; + padding-left: 4px; } .preflight-group-row { @@ -200,6 +200,10 @@ p.preflight-date-wrapper { margin: 0; } +p.preflight-date-wrapper .disabled-publish { + font-size: 0.8em; +} + .preflight-group-row p { margin: 0; line-height: 1; @@ -238,6 +242,9 @@ span.preflight-time { } .preflight-action { + display: flex; + align-items: center; + cursor: pointer; background: var(--action-color); color: #FFF; font-weight: 700; @@ -251,6 +258,51 @@ span.preflight-time { clip-path: polygon(0% 0%, var(--notch-size) 0%, calc(100% - var(--notch-size)) 0%, 100% var(--notch-size), 100% calc(100% - var(--notch-size)), 100% 100%, 0% 100%, 0% 100%); } +.tooltip { + position: relative; +} + +.tooltip::before { + content: attr(data-tooltip); + position: absolute; + right: 74%; + transform: translateX(50%); + bottom: 130%; + margin-top: 15px; + width: max-content; + max-width: 157px; + padding: 10px; + border-radius: 4px; + background: white; + color: var(--action-color); + text-align: center; + font-size: 14px; + font-weight: 400; + opacity: 0; + transition: opacity 0.3s, visibility 0.3s; + visibility: hidden; + line-height: 19px; +} + +.tooltip::after { + content: ''; + bottom: 103%; + right: 69%; + position: absolute; + margin: 12px 1px 0; + border: 5px solid white; + border-color: white transparent transparent; + opacity: 0; + transition: 200ms; + visibility: hidden; +} + +.tooltip:hover::before, +.tooltip:hover::after { + opacity: 1; + visibility: visible; + z-index: 9; +} /* SEO */ .seo-columns { @@ -282,11 +334,11 @@ span.preflight-time { animation: spin 2s linear infinite; } -@keyframes spin { - 100% { - -webkit-transform: rotate(360deg); - transform:rotate(360deg); - } +@keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } .result-icon.green { @@ -346,7 +398,7 @@ span.preflight-time { .dialog-modal#preflight .problem-links table td a { color: #fff; display: inline-block; - overflow-x: scroll; + overflow-x: scroll; position: absolute; top: 50%; left: 0; @@ -387,19 +439,19 @@ span.preflight-time { } .problem-link { - border: 3px solid #000!important; - color: #fff!important; - font-size: larger!important; - font-weight: bold!important; - padding-top: 12px!important; - padding-bottom: 12px!important; + border: 3px solid #000 !important; + color: #fff !important; + font-size: larger !important; + font-weight: bold !important; + padding-top: 12px !important; + padding-bottom: 12px !important; animation: pulse 1.5s ease-out infinite; } .problem-link:hover { - background-color: transparent!important; - color: inherit!important; - border-color:rgb(255 0 0)!important; + background-color: transparent !important; + color: inherit !important; + border-color: rgb(255 0 0) !important; } .problem-link::after { @@ -410,9 +462,17 @@ span.preflight-time { } @keyframes pulse { - 0% {background-color: rgb(255 0 0);} - 50% {background-color: rgb(150 0 0);} - 100% {background-color: rgb(255 0 0);} + 0% { + background-color: rgb(255 0 0); + } + + 50% { + background-color: rgb(150 0 0); + } + + 100% { + background-color: rgb(255 0 0); + } } /* Accessibility css */ @@ -425,7 +485,7 @@ span.preflight-time { margin-bottom: 20px; } -.access-columns .grid-heading + .access-columns .grid-heading { +.access-columns .grid-heading+.access-columns .grid-heading { margin-top: 20px; } @@ -471,7 +531,7 @@ span.preflight-time { margin-bottom: 0; } -.access-columns .grid-heading.is-closed + .access-image-grid { +.access-columns .grid-heading.is-closed+.access-image-grid { display: none; } @@ -566,4 +626,4 @@ img[data-alt-check]::after { .dialog-modal#preflight table td h3 { font-size: 16px; -} +} \ No newline at end of file