improve wide block bookmark controls

src/component/alert/index.css

@@ -1,29 +1,47 @@
 :root {
-  --alert-space: 6;
+  --alert-space: 4;
 }
 
 :root {
-  --alert-background: var(--theme-primary-020);
   --alert-text: var(--theme-primary-text-020);
-  --alert-border: var(--theme-primary-030);
+  --alert-header-background: var(--theme-primary-030);
+  --alert-body-background: var(--theme-primary-020);
 }
 
 .alert {
-  background-color: hsl(var(--alert-background));
-  padding: calc((var(--alert-space) / 4) * 0.5em) calc((var(--alert-space) / 4) * 1em);
-  border: 0;
-  border-left-width: calc(var(--layout-line-width) * 2);
-  border-left-style: solid;
-  border-left-color: hsl(var(--alert-border));
-  border-top-right-radius: calc(var(--theme-radius) * 0.01em);
-  border-bottom-right-radius: calc(var(--theme-radius) * 0.01em);
   width: 100%;
-  transition: background-color var(--layout-transition-extra-fast), border-color var(--layout-transition-extra-fast);
+  display: flex;
+  flex-direction: row;
 }
 
-.alert-body {
+.alert-header {
+  background-color: hsl(var(--alert-header-background));
+  padding: calc((var(--alert-space) / 4) * 1em) calc((var(--alert-space) / 4) * 1.5em) calc((var(--alert-space) / 4) * 1em) calc(((var(--alert-space) / 4) * 1.5em) + (var(--theme-radius) / 100) * 0.1em);
+  border-top-left-radius: calc(var(--theme-radius) * 0.01em);
+  border-bottom-left-radius: calc(var(--theme-radius) * 0.01em);
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: calc((var(--alert-space) / 4) * 1em);
+  transition: background-color var(--layout-transition-extra-fast);
+}
+
+.alert-body {
+  background-color: hsl(var(--alert-body-background));
+  border-top-right-radius: calc(var(--theme-radius) * 0.01em);
+  border-bottom-right-radius: calc(var(--theme-radius) * 0.01em);
+  padding: calc((var(--alert-space) / 4) * 1em) calc(((var(--alert-space) / 4) * 1.5em) + (var(--theme-radius) / 100) * 0.1em) calc((var(--alert-space) / 4) * 1em) calc((var(--alert-space) / 4) * 1.5em);
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  transition: background-color var(--layout-transition-extra-fast);
+}
+
+.alert-body:only-child {
+  border-radius: calc(var(--theme-radius) * 0.01em);
+  padding: calc((var(--alert-space) / 4) * 1em) calc(((var(--alert-space) / 4) * 1.5em) + (var(--theme-radius) / 100) * 0.1em);
+}
+
+.alert-icon {
+  font-size: 1em;
 }

src/component/alert/index.js

@@ -8,15 +8,16 @@ import { complexNode } from '../../utility/complexNode';
 import './index.css';
 
 export const Alert = function({
-  message = [],
+  children = [],
   iconName = false
 } = {}) {
 
   this.element = {
     alert: node('div|class:alert'),
-    icon: node('div|class:alert-icon'),
+    header: node('div|class:alert-header'),
     body: node('div|class:alert-body'),
-    message: node('div|class:alert-message')
+    icon: node('div|class:alert-icon'),
+    message: node('div|class:alert-message', children)
   };
 
   this.assemble = () => {
@@ -25,16 +26,10 @@ export const Alert = function({
 
       this.element.icon.appendChild(icon.render(iconName));
 
-      this.element.body.appendChild(this.element.icon);
+      this.element.header.appendChild(this.element.icon);
 
-    };
+      this.element.alert.appendChild(this.element.header);
 
-    if (message.length > 0) {
-      message.forEach((item, i) => {
-
-        this.element.message.appendChild(complexNode({ tag: 'p', text: item, attr: [{ key: 'class', value: 'small' }] }));
-
-      });
     };
 
     this.element.body.appendChild(this.element.message);

src/component/bookmarkForm/index.js

@@ -9,6 +9,7 @@ import { Suggest } from '../suggest';
 import { Collapse } from '../collapse';
 import { Tab } from '../tab';
 import { BookmarkPreview } from '../bookmarkPreview';
+import { Alert } from '../alert';
 
 import { Control_helperText } from '../control/helperText';
 import { Control_inputButton } from '../control/inputButton';
@@ -607,38 +608,55 @@ export const BookmarkForm = function({
     }
   };
 
-  this.control.propagate = {
-    visual: new Control_checkbox({
-      object: bookmarkData.propagate,
-      path: 'display',
-      id: 'apply-to-all-display',
-      labelText: 'Apply Visual and Name to other Bookmarks',
-      description: [
-        'When saved, apply the above visibility to all other Bookmarks.',
-        'Only the Show Visual Element and Show Name settings will be applied to all.'
-      ]
-    }),
-    layout: new Control_checkbox({
-      object: bookmarkData.propagate,
-      path: 'layout',
-      id: 'apply-to-all-layout',
-      labelText: 'Apply Layout to other Bookmarks',
-      description: [
-        'When saved, apply the above Layout to all other Bookmarks.',
-        'Only the Visual and Name settings will be applied to all.'
-      ]
-    }),
-    theme: new Control_checkbox({
-      object: bookmarkData.propagate,
-      path: 'theme',
-      id: 'apply-to-all-theme',
-      labelText: 'Apply Theme to other Bookmarks',
-      description: [
-        'When saved, apply the above Theme to all other Bookmarks.',
-        'Only the Colour, Accent, Opacity, Border and Visual shadow settings will be applied to all.'
-      ]
-    })
-  };
+  this.control.propagate = {};
+
+  this.control.propagate.visual = new Control_checkbox({
+    object: bookmarkData.propagate,
+    path: 'display',
+    id: 'apply-to-all-display',
+    labelText: 'Apply "Show Visual Element" and "Show Name" to other Bookmarks',
+    description: [
+      'The Letter, Icon, Image and Name text will not be shared.',
+      'Useful for hiding the Visual Elements or Names on all Bookmarks.'
+    ]
+  });
+
+  this.control.propagate.visualAlert = new Alert({
+    iconName: 'propagate',
+    children: [this.control.propagate.visual.wrap()]
+  });
+
+  this.control.propagate.layout = new Control_checkbox({
+    object: bookmarkData.propagate,
+    path: 'layout',
+    id: 'apply-to-all-layout',
+    labelText: 'Apply Layout to other Bookmarks',
+    description: [
+      'When saved, apply the above Layout to all other Bookmarks.',
+      'Only the Visual and Name size, Alignment, Order and Position will be will be applied to all.'
+    ]
+  });
+
+  this.control.propagate.layoutAlert = new Alert({
+    iconName: 'propagate',
+    children: [this.control.propagate.layout.wrap()]
+  });
+
+  this.control.propagate.theme = new Control_checkbox({
+    object: bookmarkData.propagate,
+    path: 'theme',
+    id: 'apply-to-all-theme',
+    labelText: 'Apply Theme to other Bookmarks',
+    description: [
+      'When saved, apply the above Theme to all other Bookmarks.',
+      'Only the Colour, Accent, Opacity, Border and Visual shadow will be applied to all.'
+    ]
+  });
+
+  this.control.propagate.themeAlert = new Alert({
+    iconName: 'propagate',
+    children: [this.control.propagate.theme.wrap()]
+  });
 
   this.helper = {
     bookmark: {
@@ -766,7 +784,7 @@ export const BookmarkForm = function({
                 this.control.bookmark.display.name.show.wrap(),
                 this.collapse.display.name.collapse(),
                 node('hr'),
-                this.control.propagate.visual.wrap()
+                this.control.propagate.visualAlert.wrap()
               ]
             })
           ]
@@ -876,7 +894,7 @@ export const BookmarkForm = function({
                 this.control.bookmark.shape.wide.wrap(),
                 this.control.bookmark.shape.tall.wrap(),
                 node('hr'),
-                this.control.propagate.layout.wrap()
+                this.control.propagate.layoutAlert.wrap()
               ]
             })
           ]
@@ -938,7 +956,7 @@ export const BookmarkForm = function({
                 this.control.bookmark.display.visual.shadow.size.wrap(),
                 this.helper.bookmark.display.visual.shadow.size.wrap(),
                 node('hr'),
-                this.control.propagate.theme.wrap()
+                this.control.propagate.themeAlert.wrap()
               ]
             })
           ]

src/component/icon/index.js

@@ -128,6 +128,10 @@ icon.all = {
   warning: {
     name: 'warning',
     path: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'
+  },
+  propagate: {
+    name: 'propagate',
+    path: 'M5.54 8.46L2 12L5.54 15.54L7.3 13.77L5.54 12L7.3 10.23L5.54 8.46ZM12 18.46L10.23 16.7L8.46 18.46L12 22L15.54 18.46L13.77 16.7L12 18.46ZM18.46 8.46L16.7 10.23L18.46 12L16.7 13.77L18.46 15.54L22 12L18.46 8.46ZM8.46 5.54L10.23 7.3L12 5.54L13.77 7.3L15.54 5.54L12 2L8.46 5.54Z M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z'
   }
 };
 

src/component/menuContent/dataSetting/index.js

@@ -126,7 +126,13 @@ dataSetting.clear = (parent) => {
     }
   });
 
-  dataSetting.control.clear.alert = new Alert({ iconName: 'warning', message: ['You will lose Bookmarks by clearing all data.', 'Have you <a href="#menu-content-item-backup">backed up your data?</a>'] });
+  dataSetting.control.clear.alert = new Alert({
+    iconName: 'warning',
+    children: [
+      node('p:You will lose Bookmarks by clearing all data.|class:small'),
+      node('p:Have you <a href="#menu-content-item-backup">backed up your data?</a>|class:small')
+    ]
+  });
 
   dataSetting.control.clear.helper = new Control_helperText({
     text: ['Clear all data to reset ' + appName + ' to the default state.', 'Alternatively, it is possible to wipe all settings but keep the current Bookmarks and Groups.']

src/component/menuContent/themeSetting/index.js

@@ -610,7 +610,12 @@ themeSetting.accent = (parent) => {
 
   themeSetting.control.accent.cycle = {};
 
-  themeSetting.control.accent.cycle.alert = new Alert({ iconName: 'info', message: ['Take care as a fast changing Accent hue may cause performance issues.'] });
+  themeSetting.control.accent.cycle.alert = new Alert({
+    iconName: 'info',
+    children: [
+      node('p:Take care as a fast changing Accent hue may cause performance issues.|class:small')
+    ]
+  });
 
   themeSetting.control.accent.cycle.active = new Control_checkbox({
     object: state.get.current(),
@@ -1317,7 +1322,13 @@ themeSetting.background = (parent) => {
       })
     },
     image: {
-      alert: new Alert({ iconName: 'info', message: ['Uploading Background images is no longer supported.', `<a href="${supportSetting.link.url + supportSetting.link.page.localBackgroundImage}" target="_blank">Why has this changed?</a>`] }),
+      alert: new Alert({
+        iconName: 'info',
+        children: [
+          node('p:Uploading Background images is no longer supported.|class:small'),
+          node('p:<a href="${supportSetting.link.url + supportSetting.link.page.localBackgroundImage}" target="_blank">Why has this changed?</a>|class:small')
+        ]
+      }),
       url: new Control_textarea({
         object: state.get.current(),
         path: 'theme.background.image.url',
@@ -1480,7 +1491,13 @@ themeSetting.background = (parent) => {
       }
     },
     video: {
-      alert: new Alert({ iconName: 'info', message: ['YouTube page URLs <strong>can not</strong> be used.', '<a href="#" target="_blank">How to link to a video file.</a>'] }),
+      alert: new Alert({
+        iconName: 'info',
+        children: [
+          node('p:YouTube page URLs <strong>can not</strong> be used.|class:small'),
+          node('p:<a href="#" target="_blank">How to link to a video file.</a>|class:small')
+        ]
+      }),
       url: new Control_textarea({
         object: state.get.current(),
         path: 'theme.background.video.url',