diff --git a/modules/@apostrophecms/asset/index.js b/modules/@apostrophecms/asset/index.js index 17c976ba..9d9a4f2a 100644 --- a/modules/@apostrophecms/asset/index.js +++ b/modules/@apostrophecms/asset/index.js @@ -3,7 +3,7 @@ export default { options: { // Change to `apos` for admin UI HMR // `public` is the default and provides HMR for project UI code - hmr: 'public', + hmr: 'apos', refreshOnRestart: true } }; diff --git a/modules/@apostrophecms/layout-column-widget/index.js b/modules/@apostrophecms/layout-column-widget/index.js index ae70c165..a2b44f61 100644 --- a/modules/@apostrophecms/layout-column-widget/index.js +++ b/modules/@apostrophecms/layout-column-widget/index.js @@ -1,4 +1,14 @@ export default { + options: { + // Do not display tabs when there is only one. + // Since there is only one Styles tab, it will be hidden. + hideSingleTab: true + }, + styles: { + add: { + background: 'background' + } + }, fields: { add: { content: { @@ -12,6 +22,13 @@ export default { } } } + }, + // Let the content be shown in the Styles tab schema. + // Keep in mind this is only a visual change, no layout logic is affected. + group: { + styles: { + fields: [ 'content' ] + } } } }; diff --git a/modules/@apostrophecms/recently-edited/index.js b/modules/@apostrophecms/recently-edited/index.js new file mode 100644 index 00000000..7a816462 --- /dev/null +++ b/modules/@apostrophecms/recently-edited/index.js @@ -0,0 +1,11 @@ +// Hide recently edited feature from the admin bar. +// Showcases how to opt-out from the new Recently Edited feature. +export default { + methods(self) { + return { + addToAdminBar() { + // no-op + } + }; + } +}; diff --git a/modules/@apostrophecms/styles/index.js b/modules/@apostrophecms/styles/index.js index a3698b36..b144722d 100644 --- a/modules/@apostrophecms/styles/index.js +++ b/modules/@apostrophecms/styles/index.js @@ -377,5 +377,29 @@ export default { } } } + }, + extendMethods(self) { + return { + registerPresets(_super) { + _super(); + const bg = self.getPreset('background'); + bg.fields.add.blur = { + label: 'Blur', + type: 'range', + min: 0, + max: 20, + def: 0, + unit: 'px', + property: '--preset-bg-blur', + class: 'has-bg-blur', + if: { + enabled: true, + backgroundType: 'image' + }, + skipFalsyValues: true + }; + self.setPreset('background', bg); + } + }; } }; diff --git a/modules/asset/ui/src/index.scss b/modules/asset/ui/src/index.scss index 2d430066..189ef7ea 100644 --- a/modules/asset/ui/src/index.scss +++ b/modules/asset/ui/src/index.scss @@ -6,3 +6,28 @@ @import './scss/_layout'; @import './scss/_welcome'; @import './scss/_widgets'; + +.has-bg-blur { + --preset-bg-image-layer: none; + --preset-bg-overlay-layer: none; + position: relative; + isolation: isolate; +} + +.has-bg-blur::before { + content: ''; + position: absolute; + inset: calc(var(--preset-bg-blur) * -2); + z-index: -1; + background: var(--preset-bg-image) center / cover no-repeat; + filter: blur(var(--preset-bg-blur)); + clip-path: inset(calc(var(--preset-bg-blur) * 2 - 1px)); +} + +.has-bg-blur::after { + content: ''; + position: absolute; + inset: 0; + z-index: -1; + background: var(--preset-bg-overlay); +}