extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-02-16 18:20:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve edit bookmark form layout

Browse Source
This commit is contained in:
zombieFox 2021-08-14 14:49:00 +01:00
parent f8383d6633
commit c8ca065bd9
1 changed files with 133 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -211,43 +211,6 @@ export const BookmarkForm = function({
this.preview.update.style(bookmarkData);
}
}),
name: {
show: new Control_checkbox({
object: bookmarkData.link,
path: 'display.name.show',
id: 'display-name-show',
labelText: 'Show Name',
action: () => {
this.disable();
this.preview.update.assemble(bookmarkData);
}
}),
text: new Control_text({
object: bookmarkData.link,
path: 'display.name.text',
id: 'display-name-text',
value: bookmarkData.link.display.name.text,
placeholder: 'Example',
labelText: 'Bookmark name',
srOnly: true,
action: () => {
this.preview.update.assemble(bookmarkData);
}
}),
size: new Control_sliderSlim({
object: bookmarkData.link,
path: 'display.name.size',
id: 'display-name-size',
labelText: 'Name size',
value: bookmarkData.link.display.name.size,
defaultValue: bookmarkDefault.display.name.size,
min: bookmarkMinMax.display.name.size.min,
max: bookmarkMinMax.display.name.size.max,
action: () => {
this.preview.update.style(bookmarkData);
}
})
},
visual: {
show: new Control_checkbox({
object: bookmarkData.link,
@ -257,6 +220,7 @@ export const BookmarkForm = function({
description: 'Display Letters, Icon or an Image on this Bookmark hexagon.',
action: () => {
this.disable();
this.collapse.display.visual.update();
this.preview.update.assemble(bookmarkData);
}
}),
@ -361,6 +325,44 @@ export const BookmarkForm = function({
}
})
}
},
name: {
show: new Control_checkbox({
object: bookmarkData.link,
path: 'display.name.show',
id: 'display-name-show',
labelText: 'Show Name',
action: () => {
this.disable();
this.collapse.display.name.update();
this.preview.update.assemble(bookmarkData);
}
}),
text: new Control_text({
object: bookmarkData.link,
path: 'display.name.text',
id: 'display-name-text',
value: bookmarkData.link.display.name.text,
placeholder: 'Example',
labelText: 'Bookmark name',
srOnly: true,
action: () => {
this.preview.update.assemble(bookmarkData);
}
}),
size: new Control_sliderSlim({
object: bookmarkData.link,
path: 'display.name.size',
id: 'display-name-size',
labelText: 'Name size',
value: bookmarkData.link.display.name.size,
defaultValue: bookmarkDefault.display.name.size,
min: bookmarkMinMax.display.name.size.min,
max: bookmarkMinMax.display.name.size.max,
action: () => {
this.preview.update.style(bookmarkData);
}
})
}
},
accent: {
@ -662,32 +664,10 @@ export const BookmarkForm = function({
this.area = {};
this.area.accent = () => {
return node('div', [
this.control.bookmark.accent.color.wrap()
]);
};
this.area.display = {};
this.area.color = () => {
this.area.display.visual = () => {
return node('div', [
this.control.bookmark.color.color.wrap()
]);
};
this.area.visual = () => {
return form.fieldset({
children: [
form.wrap({
children: [
node('h2:Visual & Name|class:mb-2'),
node('p:Display Letters, Icon, Image and a Name on this Bookmark tile.|class:mb-5')
]
}),
form.wrap({
children: [
form.indent({
children: [
this.control.bookmark.display.visual.show.wrap(),
form.wrap({
children: [
form.indent({
@ -737,9 +717,12 @@ export const BookmarkForm = function({
]
})
]
}),
node('hr'),
this.control.bookmark.display.name.show.wrap(),
})
]);
};
this.area.display.name = () => {
return node('div', [
form.wrap({
children: [
form.indent({
@ -748,7 +731,40 @@ export const BookmarkForm = function({
]
})
]
})
]);
};
this.area.accent = () => {
return node('div', [
this.control.bookmark.accent.color.wrap()
]);
};
this.area.color = () => {
return node('div', [
this.control.bookmark.color.color.wrap()
]);
};
this.area.visual = () => {
return form.fieldset({
children: [
form.wrap({
children: [
node('h2:Visual & Name|class:mb-2'),
node('p:Display Letters, Icon, Image and a Name on this Bookmark tile.|class:mb-5')
]
}),
form.wrap({
children: [
form.indent({
children: [
this.control.bookmark.display.visual.show.wrap(),
this.collapse.display.visual.collapse(),
node('hr'),
this.control.bookmark.display.name.show.wrap(),
this.collapse.display.name.collapse(),
node('hr'),
this.control.propagate.visual.wrap()
]
@ -968,6 +984,22 @@ export const BookmarkForm = function({
};
this.collapse = {
display: {
visual: new Collapse({
type: 'checkbox',
checkbox: this.control.bookmark.display.visual.show,
target: [{
content: this.area.display.visual()
}]
}),
name: new Collapse({
type: 'checkbox',
checkbox: this.control.bookmark.display.name.show,
target: [{
content: this.area.display.name()
}]
})
},
color: new Collapse({
type: 'radio',
radioGroup: this.control.bookmark.color.by,
@ -1074,13 +1106,18 @@ export const BookmarkForm = function({
};
if (bookmarkData.link.display.visual.show || bookmarkData.link.display.name.show) {
console.log(this.control.bookmark.display.translate.label);
this.control.bookmark.display.translate.label.classList.remove('disabled');
this.control.bookmark.display.translate.x.enable();
this.control.bookmark.display.translate.y.enable();
this.control.bookmark.display.rotate.enable();
this.control.bookmark.display.alignment.enable();
} else {
this.control.bookmark.display.translate.label.classList.add('disabled');
this.control.bookmark.display.translate.x.disable();
this.control.bookmark.display.translate.y.disable();
this.control.bookmark.display.rotate.disable();
this.control.bookmark.display.alignment.disable();
};
if (bookmarkData.link.display.visual.show && bookmarkData.link.display.name.show) {