diff --git a/blocks/browse/da-browse/da-browse.css b/blocks/browse/da-browse/da-browse.css index 955d390b..a3b2410c 100644 --- a/blocks/browse/da-browse/da-browse.css +++ b/blocks/browse/da-browse/da-browse.css @@ -5,6 +5,10 @@ padding: 80px 0; } +:host > svg { + display: none; +} + h1 { font-size: 1.4rem; text-transform: uppercase; @@ -202,34 +206,62 @@ input[type="checkbox"] { position: relative; display: block; text-transform: uppercase; - font-size: 14px; + font-size: 16px; font-weight: 700; - padding: 0px 10px; - line-height: 24px; + cursor: pointer; +} + +.da-breadcrumb-list-item-link-wrapper { + padding: 0 10px; background: #dcdcdc; border-radius: 6px; - cursor: pointer; + line-height: 32px; + display: flex; + overflow: hidden; } .da-breadcrumb-list-item a { text-decoration: none; - color: rgb(44, 44, 44); + color: rgb(44 44 44); +} + +.da-breadcrumb-list-item-config { + overflow: hidden; + text-indent: -1000px; + width: 32px; + padding-right: 2px; + margin: 0 -10px 0 2px; + display: flex; + justify-content: center; + align-items: center; + color: rgb(44 44 44); +} + +.da-breadcrumb-list-item-config:hover { + background-color: #147af3; + color: #FFF; +} + +.da-breadcrumb-list-item-icon { + display: block; + width: 18px; + height: 18px; } .da-breadcrumb-list-item:last-child { cursor: unset; } -.da-breadcrumb-list-item:after { - position: absolute; - right: -24px; - top: 0; - display: block; - content: ''; - width: 24px; - height: 24px; - opacity: 0.5; - background: url('/blocks/browse/img/Smock_ChevronRight_18_N.svg') center / cover no-repeat; +.da-breadcrumb-list-item::after { + position: absolute; + right: -24px; + top: 0; + display: block; + content: ""; + width: 24px; + opacity: 0.5; + background: url(/blocks/browse/img/Smock_ChevronRight_18_N.svg) center center / 24px 24px no-repeat; + height: 32px; } /* Actions */ diff --git a/blocks/browse/da-browse/da-browse.js b/blocks/browse/da-browse/da-browse.js index ec0a28b1..8fb5a69b 100644 --- a/blocks/browse/da-browse/da-browse.js +++ b/blocks/browse/da-browse/da-browse.js @@ -1,11 +1,16 @@ import { LitElement, html } from '../../../deps/lit/lit-core.min.js'; -import { DA_ORIGIN } from '../../shared/constants.js'; +import { getDaAdmin } from '../../shared/constants.js'; +import inlinesvg from '../../shared/inlinesvg.js'; import getSheet from '../../shared/sheet.js'; import { saveToDa, daFetch } from '../../shared/utils.js'; const sheet = await getSheet('/blocks/browse/da-browse/da-browse.css'); +const DA_ORIGIN = getDaAdmin(); + +const ICONS = ['/blocks/browse/da-browse/img/Smock_Settings_18_N.svg']; + export default class DaBrowse extends LitElement { static properties = { details: { attribute: false }, @@ -130,6 +135,7 @@ export default class DaBrowse extends LitElement { connectedCallback() { super.connectedCallback(); this.shadowRoot.adoptedStyleSheets = [sheet]; + inlinesvg({ parent: this.shadowRoot, paths: ICONS }); } async update(props) { @@ -196,6 +202,18 @@ export default class DaBrowse extends LitElement { this._canPaste = false; } + renderConfig(length, crumb, idx) { + if (this.details.depth <= 2 && idx + 1 === length) { + return html` + + + `; + } + return null; + } + renderNew() { return html`
@@ -293,9 +311,12 @@ export default class DaBrowse extends LitElement {

Browse

diff --git a/blocks/browse/da-browse/img/Smock_Settings_18_N.svg b/blocks/browse/da-browse/img/Smock_Settings_18_N.svg new file mode 100644 index 00000000..f49c4eb2 --- /dev/null +++ b/blocks/browse/da-browse/img/Smock_Settings_18_N.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/blocks/browse/da-orgs/da-orgs.js b/blocks/browse/da-orgs/da-orgs.js index 154fd217..b624db6b 100644 --- a/blocks/browse/da-orgs/da-orgs.js +++ b/blocks/browse/da-orgs/da-orgs.js @@ -1,10 +1,11 @@ import { LitElement, html } from '../../../deps/lit/lit-core.min.js'; -import { DA_ORIGIN } from '../../shared/constants.js'; +import { getDaAdmin } from '../../shared/constants.js'; import { daFetch } from '../../shared/utils.js'; import getSheet from '../../shared/sheet.js'; const sheet = await getSheet('/blocks/browse/da-orgs/da-orgs.css'); +const DA_ORIGIN = getDaAdmin(); const MOCK_IMGS = [ '/blocks/browse/da-orgs/img/da-one.webp', '/blocks/browse/da-orgs/img/da-two.webp', diff --git a/blocks/edit/da-library/helpers/helpers.js b/blocks/edit/da-library/helpers/helpers.js index 6ef7185f..ddc5292b 100644 --- a/blocks/edit/da-library/helpers/helpers.js +++ b/blocks/edit/da-library/helpers/helpers.js @@ -1,8 +1,9 @@ // eslint-disable-next-line import/no-unresolved import { DOMParser } from 'da-y-wrapper'; -import { DA_ORIGIN, CON_ORIGIN } from '../../../shared/constants.js'; +import { CON_ORIGIN, getDaAdmin } from '../../../shared/constants.js'; import getPathDetails from '../../../shared/pathDetails.js'; +const DA_ORIGIN = getDaAdmin(); const REPLACE_CONTENT = ''; const DA_CONFIG = '/.da/config.json'; diff --git a/blocks/edit/da-title/da-title.js b/blocks/edit/da-title/da-title.js index 17a738a9..c96125e1 100644 --- a/blocks/edit/da-title/da-title.js +++ b/blocks/edit/da-title/da-title.js @@ -1,5 +1,5 @@ import { LitElement, html } from '../../../deps/lit/lit-core.min.js'; -import { saveToDa, saveToAem } from '../utils/helpers.js'; +import { saveToDa, saveToAem, saveDaConfig } from '../utils/helpers.js'; import getSheet from '../../shared/sheet.js'; const sheet = await getSheet('/blocks/edit/da-title/da-title.css'); @@ -23,29 +23,53 @@ export default class DaTitle extends LitElement { const { hash } = window.location; const pathname = hash.replace('#', ''); - // Only save to da if it is a sheet - if (this.sheet) { + // Only save to DA if it is a sheet or config + if (this.details.view === 'sheet') { const dasSave = await saveToDa(pathname, this.sheet); if (!dasSave.ok) return; } - const aemPath = this.sheet ? `${pathname}.json` : pathname; - let json = await saveToAem(aemPath, 'preview'); - if (action === 'publish') json = await saveToAem(aemPath, 'live'); - const { url } = action === 'publish' ? json.live : json.preview; - window.open(url, '_blank'); + if (this.details.view === 'config') { + const daConfigResp = await saveDaConfig(pathname, this.sheet); + if (!daConfigResp.ok) return; + } + if (action === 'preview' || action === 'publish') { + const aemPath = this.sheet ? `${pathname}.json` : pathname; + let json = await saveToAem(aemPath, 'preview'); + if (action === 'publish') json = await saveToAem(aemPath, 'live'); + const { url } = action === 'publish' ? json.live : json.preview; + window.open(url, '_blank'); + } sendBtn.classList.remove('is-sending'); } - handlePreview() { - this.handleAction('preview'); + toggleActions() { + this._actionsVis = !this._actionsVis; } - handlePublish() { - this.handleAction('publish'); + renderSave() { + return html` + `; } - toggleActions() { - this._actionsVis = !this._actionsVis; + renderAemActions() { + return html` + + `; } render() { @@ -59,18 +83,7 @@ export default class DaTitle extends LitElement {

${this.details.name}

- - + ${this.details.view === 'config' ? this.renderSave() : this.renderAemActions()}