diff --git a/src/component/alert/index.css b/src/component/alert/index.css
new file mode 100644
index 00000000..db082c55
--- /dev/null
+++ b/src/component/alert/index.css
@@ -0,0 +1,29 @@
+:root {
+ --alert-space: 6;
+}
+
+:root {
+ --alert-background: var(--theme-primary-020);
+ --alert-text: var(--theme-primary-text-020);
+ --alert-border: var(--theme-primary-030);
+}
+
+.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);
+}
+
+.alert-body {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: calc((var(--alert-space) / 4) * 1em);
+}
diff --git a/src/component/alert/index.js b/src/component/alert/index.js
new file mode 100644
index 00000000..0c2d8bdf
--- /dev/null
+++ b/src/component/alert/index.js
@@ -0,0 +1,59 @@
+import { icon } from '../icon';
+
+import * as form from '../form';
+
+import { node } from '../../utility/node';
+
+import './index.css';
+
+export const Alert = function({
+ message = [],
+ iconName = false
+} = {}) {
+
+ this.element = {
+ alert: node('div|class:alert'),
+ icon: node('div|class:alert-icon'),
+ body: node('div|class:alert-body'),
+ message: node('div|class:alert-message')
+ };
+
+ this.assemble = () => {
+
+ if (iconName) {
+
+ this.element.icon.appendChild(icon.render(iconName));
+
+ this.element.body.appendChild(this.element.icon);
+
+ };
+
+ if (message.length > 0) {
+ message.forEach((item, i) => {
+
+ this.element.message.appendChild(node('p:' + item));
+
+ });
+ };
+
+ this.element.body.appendChild(this.element.message);
+
+ this.element.alert.appendChild(this.element.body);
+
+ };
+
+ this.alert = () => {
+ return this.element.alert;
+ };
+
+ this.wrap = () => {
+ return form.wrap({
+ children: [
+ this.element.alert
+ ]
+ });
+ };
+
+ this.assemble();
+
+};
diff --git a/src/component/button/index.js b/src/component/button/index.js
index 234cdb1b..6ba46ecc 100644
--- a/src/component/button/index.js
+++ b/src/component/button/index.js
@@ -147,7 +147,7 @@ export const Button = function({
children: [
this.button
]
- })
+ });
};
};
diff --git a/src/component/form/feedback/index.css b/src/component/form/feedback/index.css
index 5cb498cb..f56d4667 100644
--- a/src/component/form/feedback/index.css
+++ b/src/component/form/feedback/index.css
@@ -1,3 +1,7 @@
+:root {
+ --form-feedback-space: 6;
+}
+
:root {
--form-feedback-background: var(--theme-primary-020);
--form-feedback-background-disabled: var(--theme-primary-010);
@@ -9,8 +13,8 @@
}
.form-feedback {
- padding: 0.75em 1.25em;
background-color: hsl(var(--form-feedback-background));
+ padding: calc((var(--form-feedback-space) / 4) * 0.5em) calc((var(--form-feedback-space) / 4) * 1em);
border: 0;
border-left-width: calc(var(--layout-line-width) * 2);
border-left-style: solid;
diff --git a/src/component/icon/index.js b/src/component/icon/index.js
index 06140d02..6eea2698 100644
--- a/src/component/icon/index.js
+++ b/src/component/icon/index.js
@@ -120,6 +120,10 @@ icon.all = {
addGroup: {
name: 'add-group',
path: 'M19 19H5V5H14V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V10H19V19Z M19 5V3H17V5H15V7H17V9H19V7H21V5H19Z'
+ },
+ info: {
+ name: 'info',
+ path: 'M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'
}
};
diff --git a/src/component/menuContent/appSetting/index.js b/src/component/menuContent/appSetting/index.js
index c5fc2c21..428510e6 100644
--- a/src/component/menuContent/appSetting/index.js
+++ b/src/component/menuContent/appSetting/index.js
@@ -17,6 +17,7 @@ import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
+import { Alert } from '../../alert';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
diff --git a/src/component/menuContent/bookmarkSetting/index.js b/src/component/menuContent/bookmarkSetting/index.js
index 16b11f9c..cfd87ac3 100644
--- a/src/component/menuContent/bookmarkSetting/index.js
+++ b/src/component/menuContent/bookmarkSetting/index.js
@@ -17,6 +17,7 @@ import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
+import { Alert } from '../../alert';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
diff --git a/src/component/menuContent/coffeeSetting/index.js b/src/component/menuContent/coffeeSetting/index.js
index fb39d792..17bc20da 100644
--- a/src/component/menuContent/coffeeSetting/index.js
+++ b/src/component/menuContent/coffeeSetting/index.js
@@ -17,6 +17,7 @@ import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
+import { Alert } from '../../alert';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
diff --git a/src/component/menuContent/dataSetting/index.js b/src/component/menuContent/dataSetting/index.js
index 1918f141..dc392f80 100644
--- a/src/component/menuContent/dataSetting/index.js
+++ b/src/component/menuContent/dataSetting/index.js
@@ -17,6 +17,7 @@ import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
+import { Alert } from '../../alert';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
@@ -125,12 +126,15 @@ dataSetting.clear = (parent) => {
}
});
+ dataSetting.control.clear.alert = new Alert({ iconName: 'info', message: ['You will lose Bookmarks by clearing all data.', 'Have you backed up your data?'] });
+
dataSetting.control.clear.helper = new Control_helperText({
text: ['Wipe all data and restore ' + appName + ' to the default state.', 'Alternatively it is possible to wipe all settings but keep the current Bookmarks and Groups.']
});
parent.appendChild(
node('div', [
+ dataSetting.control.clear.alert.wrap(),
form.wrap({
children: [
form.inline({
diff --git a/src/component/menuContent/debugSetting/index.js b/src/component/menuContent/debugSetting/index.js
index 14883833..55289fd6 100644
--- a/src/component/menuContent/debugSetting/index.js
+++ b/src/component/menuContent/debugSetting/index.js
@@ -18,6 +18,7 @@ import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
+import { Alert } from '../../alert';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
diff --git a/src/component/menuContent/firefoxSetting/index.js b/src/component/menuContent/firefoxSetting/index.js
index 92cc260e..5fb22de8 100644
--- a/src/component/menuContent/firefoxSetting/index.js
+++ b/src/component/menuContent/firefoxSetting/index.js
@@ -17,6 +17,7 @@ import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
+import { Alert } from '../../alert';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
@@ -53,11 +54,11 @@ firefoxSetting.firefox = (parent) => {
children: [
node('ol', [
node('li:Open a new Firefox window'),
- node('li:Open Firefox Preferences
and open a new tab (nightTab)'),
+ node('li:Open Firefox Preferences
and open a new tab (' + appName + ')'),
node('li:In Firefox preferences under Home
, change Homepage and new windows
to Custom URLs...
'),
node('li:Then click Use Current Page
'),
]),
- node('p:nightTab will now appear as the homepage.'),
+ node('p:' + appName + ' will now appear as the homepage.'),
]
})
])
diff --git a/src/component/menuContent/formSetting/index.js b/src/component/menuContent/formSetting/index.js
index 4a731a55..a6525f0d 100644
--- a/src/component/menuContent/formSetting/index.js
+++ b/src/component/menuContent/formSetting/index.js
@@ -16,6 +16,7 @@ import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
+import { Alert } from '../../alert';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
diff --git a/src/component/menuContent/groupSetting/index.js b/src/component/menuContent/groupSetting/index.js
index 7aca6c38..d3edb8ba 100644
--- a/src/component/menuContent/groupSetting/index.js
+++ b/src/component/menuContent/groupSetting/index.js
@@ -18,6 +18,7 @@ import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
+import { Alert } from '../../alert';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
diff --git a/src/component/menuContent/headerSetting/index.js b/src/component/menuContent/headerSetting/index.js
index 9fce0480..9d1d6739 100644
--- a/src/component/menuContent/headerSetting/index.js
+++ b/src/component/menuContent/headerSetting/index.js
@@ -11,12 +11,14 @@ import { link } from '../../link';
import { layout } from '../../layout';
import { toolbar } from '../../toolbar';
import { searchEnginePreset } from '../../searchEnginePreset';
+import { appName } from '../../appName';
import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
+import { Alert } from '../../alert';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
@@ -1655,7 +1657,7 @@ headerSetting.search = (parent) => {
}
}),
urlHelper: new Control_helperText({
- text: ['Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="', 'nightTab will add the search term entered into the Search box at the end of the above URL.']
+ text: ['Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="', appName + ' will add the search term entered into the Search box at the end of the above URL.']
}),
queryName: new Control_text({
object: state.get.current(),
diff --git a/src/component/menuContent/layoutSetting/index.js b/src/component/menuContent/layoutSetting/index.js
index d1925ce5..254b3fe6 100644
--- a/src/component/menuContent/layoutSetting/index.js
+++ b/src/component/menuContent/layoutSetting/index.js
@@ -16,6 +16,7 @@ import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
+import { Alert } from '../../alert';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
diff --git a/src/component/menuContent/themeSetting/index.js b/src/component/menuContent/themeSetting/index.js
index 7c82ca99..8464b705 100644
--- a/src/component/menuContent/themeSetting/index.js
+++ b/src/component/menuContent/themeSetting/index.js
@@ -23,6 +23,7 @@ import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
import { PresetThemeTile } from '../../presetThemeTile';
import { AccentPresetButton } from '../../accentPresetButton';
+import { Alert } from '../../alert';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
@@ -605,6 +606,8 @@ 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.active = new Control_checkbox({
object: state.get.current(),
path: 'theme.accent.cycle.active',
@@ -649,13 +652,11 @@ themeSetting.accent = (parent) => {
});
themeSetting.control.accent.cycle.stepHelper = new Control_helperText({
- text: [
- 'Take care as a small delay in Accent hue change may cause performance issues.',
- 'Auto change Accent hue will not work when the Accent colour is a grey or black.'
- ]
+ text: ['Auto change Accent hue will not work when the Accent colour is a grey or black.']
});
themeSetting.control.accent.cycle.area = node('div', [
+ themeSetting.control.accent.cycle.alert.wrap(),
themeSetting.control.accent.cycle.speed.wrap(),
themeSetting.control.accent.cycle.step.wrap(),
themeSetting.control.accent.cycle.stepHelper.wrap()
@@ -1308,6 +1309,7 @@ themeSetting.background = (parent) => {
})
},
image: {
+ alert: new Alert({ iconName: 'info', message: ['Uploading Background images is no longer supported.', 'Why has this changed?'] }),
url: new Control_textarea({
object: state.get.current(),
path: 'theme.background.image.url',
@@ -1470,6 +1472,7 @@ themeSetting.background = (parent) => {
}
},
video: {
+ alert: new Alert({ iconName: 'info', message: ['YouTube page URLs can not be used.', 'How to link to a video file.'] }),
url: new Control_textarea({
object: state.get.current(),
path: 'theme.background.video.url',
@@ -1485,7 +1488,7 @@ themeSetting.background = (parent) => {
}),
urlHelper: new Control_helperText({
text: [
- 'Background video only supports a direct URL to a video file. Supports MP4 and WebM format.', 'YouTube page URLs can not be used.',
+ 'Background video only supports a direct URL to a video file. Supports MP4 and WebM format.',
'Add more than one URL separated by spaces or on new lines for a random background video on load.'
]
}),
@@ -1643,6 +1646,7 @@ themeSetting.background = (parent) => {
]);
const themeBackgroundImageArea = node('div', [
+ themeSetting.control.background.image.alert.wrap(),
themeSetting.control.background.image.url.wrap(),
themeSetting.control.background.image.urlHelper.wrap(),
themeSetting.control.background.image.blur.wrap(),
@@ -1664,6 +1668,7 @@ themeSetting.background = (parent) => {
]);
const themeBackgroundVideoArea = node('div', [
+ themeSetting.control.background.video.alert.wrap(),
themeSetting.control.background.video.url.wrap(),
themeSetting.control.background.video.urlHelper.wrap(),
themeSetting.control.background.video.blur.wrap(),
diff --git a/src/component/menuContent/toolbarSetting/index.js b/src/component/menuContent/toolbarSetting/index.js
index ee481d2d..cf1b1a25 100644
--- a/src/component/menuContent/toolbarSetting/index.js
+++ b/src/component/menuContent/toolbarSetting/index.js
@@ -16,6 +16,7 @@ import * as form from '../../form';
import { Button } from '../../button';
import { Collapse } from '../../collapse';
import { Edge } from '../../edge';
+import { Alert } from '../../alert';
import { Control_helperText } from '../../control/helperText';
import { Control_inputButton } from '../../control/inputButton';
diff --git a/src/component/state/index.js b/src/component/state/index.js
index 62b51f8a..aaa1efa6 100644
--- a/src/component/state/index.js
+++ b/src/component/state/index.js
@@ -147,7 +147,7 @@ state.minMax = {
accent: {
hsl: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 }, l: { min: 0, max: 100 } },
rgb: { r: { min: 0, max: 255 }, g: { min: 0, max: 255 }, b: { min: 0, max: 255 } },
- cycle: { speed: { min: 100, max: 10000 }, step: { min: 1, max: 100 } }
+ cycle: { speed: { min: 100, max: 1000 }, step: { min: 1, max: 100 } }
},
font: {
display: { weight: { min: 100, max: 900 } },
diff --git a/src/component/themePreset/nighttab/index.js b/src/component/themePreset/nighttab/index.js
index 9f5aeefd..14974a36 100644
--- a/src/component/themePreset/nighttab/index.js
+++ b/src/component/themePreset/nighttab/index.js
@@ -1,7 +1,8 @@
import { state } from '../../state';
+import { appName } from '../../appName';
export const nighttab = {
- name: 'nightTab (default)',
+ name: appName + ' (default)',
color: state.get.default().theme.color,
accent: { hsl: state.get.default().theme.accent.hsl, rgb: state.get.default().theme.accent.rgb },
font: state.get.default().theme.font,