extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-26 01:53:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve wide block bookmark controls

Browse Source
This commit is contained in:
zombieFox 2021-08-27 13:06:18 +01:00
parent 20167c31a8
commit b8693ff681
6 changed files with 122 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/component/alert/index.css
View File

@ -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;
}

17
src/component/alert/index.js
View File

@ -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);

88
src/component/bookmarkForm/index.js
View File

@ -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()
]
})
]

4
src/component/icon/index.js
View File

@ -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'
}
};

8
src/component/menuContent/dataSetting/index.js
View File

@ -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.']

23
src/component/menuContent/themeSetting/index.js
View File

@ -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',