extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-03-11 13:18:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

showcase

Browse Source
This commit is contained in:
Kuldeep Matharu 2024-07-18 23:58:30 +01:00
parent b266d6d8cc
commit 35c25fe784
4 changed files with 152 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,8 +5,8 @@ import { MenuFrame } from '../menuFrame';
const menu = {}; const menu = {};
menu.navData = [ menu.navData = [
// { name: 'debug', active: false, overscroll: true, sub: ['showcase', 'bookmark'] }, { name: 'debug', active: true, overscroll: true, sub: ['showcase', 'bookmark'] },
{ name: 'theme', active: true, overscroll: true, sub: ['preset', 'saved', 'style', 'color', 'accent', 'font', 'radius', 'shadow', 'shade', 'opacity', 'background', 'layout', 'header', 'bookmark'] }, { name: 'theme', active: false, overscroll: true, sub: ['preset', 'saved', 'style', 'color', 'accent', 'font', 'radius', 'shadow', 'shade', 'opacity', 'background', 'layout', 'header', 'bookmark'] },
{ name: 'layout', active: false, overscroll: true, sub: ['scaling', 'area', 'padding', 'gutter', 'alignment', 'page'] }, { name: 'layout', active: false, overscroll: true, sub: ['scaling', 'area', 'padding', 'gutter', 'alignment', 'page'] },
{ name: 'header', active: false, overscroll: true, sub: ['alignment', 'greeting', 'transitional', 'clock', 'date', 'search'] }, { name: 'header', active: false, overscroll: true, sub: ['alignment', 'greeting', 'transitional', 'clock', 'date', 'search'] },
{ name: 'bookmark', active: false, overscroll: true, sub: ['general', 'style', 'orientation', 'sort'] }, { name: 'bookmark', active: false, overscroll: true, sub: ['general', 'style', 'orientation', 'sort'] },

3
src/component/showcase/index.css
View File

@ -23,11 +23,14 @@
position: sticky; position: sticky;
top: var(--showcase-padding); top: var(--showcase-padding);
width: 100%; width: 100%;
height: 100%;
height: fit-content; height: fit-content;
} }
.showcase-content { .showcase-content {
grid-area: content; grid-area: content;
width: 100%;
height: fit-content;
} }
@media (min-width: 1400px) { @media (min-width: 1400px) {

291
src/component/showcase/index.js
View File

@ -41,7 +41,9 @@ import './index.css';
const showcase = {}; const showcase = {};
showcase.element = { showcase.element = {
showcase: node('div|class:showcase') showcase: node('div|class:showcase'),
side: node('div|class:showcase-side'),
content: node('div|class:showcase-content'),
}; };
showcase.state = {}; showcase.state = {};
@ -321,7 +323,6 @@ showcase.area.assemble = () => {
}), }),
}; };
showcase.control.shade = new ShadeBar(); showcase.control.shade = new ShadeBar();
showcase.control.input.radio = { showcase.control.input.radio = {
@ -576,154 +577,154 @@ showcase.area.assemble = () => {
); );
}; };
showcase.element.showcase.appendChild( showcase.element.side.append(
node('div|class:showcase-side', [ form.wrap({
form.wrap({ children: [
children: [ form.inline({
form.inline({ align: 'top',
align: 'top', gap: 'small',
gap: 'small', children: [
children: [ showcase.control.side.style.inputButton(),
showcase.control.side.style.inputButton(), showcase.control.side.disable.wrap(),
showcase.control.side.disable.wrap(), ]
] })
}) ]
] }),
}), showcase.control.side.h.wrap(),
showcase.control.side.h.wrap(), showcase.control.side.s.wrap(),
showcase.control.side.s.wrap(), showcase.control.side.contrast.wrap(),
showcase.control.side.contrast.wrap(), showcase.control.side.accent.wrap(),
showcase.control.side.accent.wrap(), showcase.control.side.shadow.wrap(),
showcase.control.side.shadow.wrap(), showcase.control.side.radius.wrap(),
showcase.control.side.radius.wrap(), // showcase.control.side.displayFont.wrap(),
showcase.control.side.displayFont.wrap(), // showcase.control.side.uiFont.wrap(),
showcase.control.side.uiFont.wrap(),
])
); );
showcase.element.showcase.appendChild( showcase.element.content.append(
node('div|class:showcase-content', [ form.sticky({
form.wrap({ children: [
children: [ showcase.control.shade.shadeBar()
showcase.control.shade.shadeBar(), ]
] }),
}), node('hr'),
node('hr'), form.wrap({
form.wrap({ children: [
children: [ form.inline({
form.inline({ gap: 'large',
gap: 'large', children: [
children: [ node('div|class:showcase-type', [
node('div|class:showcase-type', [ node('h1:Heading 1'),
node('h1:Heading 1'), node('h2:Heading 2'),
node('h2:Heading 2'), node('h3:Heading 3'),
node('h3:Heading 3'), node('h4:Heading 4'),
node('h4:Heading 4'), node('h5:Heading 5'),
node('h5:Heading 5'), node('h6:Heading 6'),
node('h6:Heading 6'), ]),
node('div|class:showcase-type', [
node('p:Sed dolores doloremque id iure Quis est suscipit deleniti cum doloremque nihil.'),
node('ul', [
node('li:List item 1'),
node('li:List item 2'),
node('li:List item 3'),
]), ]),
node('div|class:showcase-type', [ node('a:Lorem ipsum dolor sit amet|href:https://github.com/zombieFox/nightTab,target:_blank'),
node('p:Sed dolores doloremque id iure Quis est suscipit deleniti cum doloremque nihil.'), ]),
node('ul', [ node('div|class:showcase-type', [
node('li:List item 1'), new Control_helperText({
node('li:List item 2'), text: ['Et iure voluptas non accusantium voluptatibus et necessitatibus.']
node('li:List item 3'), }).wrap()
]), ]),
node('a:Lorem ipsum dolor sit amet|href:https://github.com/zombieFox/nightTab,target:_blank'), ]
]), })
node('div|class:showcase-type', [ ]
new Control_helperText({ }),
text: ['Et iure voluptas non accusantium voluptatibus et necessitatibus.'] node('hr'),
}).wrap() showcase.control.input.radio.a.inline(),
]), node('hr'),
] form.wrap({
}) children: [
] form.inline({
}), gap: 'large',
node('hr'), children: [
showcase.control.input.radio.a.inline(), showcase.control.input.checkbox.a.wrap(),
node('hr'), showcase.control.input.checkbox.b.wrap(),
form.wrap({ showcase.control.input.checkbox.c.wrap(),
children: [ ]
form.inline({ }),
gap: 'large', ]
children: [ }),
showcase.control.input.checkbox.a.wrap(), node('hr'),
showcase.control.input.checkbox.b.wrap(), form.wrap({
showcase.control.input.checkbox.c.wrap(), children: [
] form.inline({
}), wrap: true,
] gap: 'small',
}), align: 'center',
node('hr'), children: [
form.wrap({ showcase.control.input.radio.b.inputButton(),
children: [ showcase.control.input.radio.c.inputButton(),
form.inline({ showcase.control.input.checkbox.d.inputButton(),
wrap: true, showcase.control.input.checkbox.e.inputButton(),
gap: 'small', ]
align: 'center', })
children: [ ]
showcase.control.input.radio.b.inputButton(), }),
showcase.control.input.radio.c.inputButton(), node('hr'),
showcase.control.input.checkbox.d.inputButton(), form.wrap({
showcase.control.input.checkbox.e.inputButton(), children: [
] form.inline({
}) align: 'center',
] gap: 'small',
}), children: [
node('hr'), showcase.control.input.radio.grid3x3.wrap(),
form.wrap({ showcase.control.input.radio.grid1x3.wrap(),
children: [ showcase.control.input.radio.grid3x1.wrap(),
form.inline({ ]
align: 'center', }),
gap: 'small', ]
children: [ }),
showcase.control.input.radio.grid3x3.wrap(), node('hr'),
showcase.control.input.radio.grid1x3.wrap(), form.wrap({
showcase.control.input.radio.grid3x1.wrap(), children: [
] form.inline({
}), wrap: true,
] gap: 'small',
}), align: 'center',
node('hr'), children: [
form.wrap({ showcase.control.button.a.wrap(),
children: [ showcase.control.button.b.wrap(),
form.inline({ showcase.control.button.c.wrap(),
wrap: true, showcase.control.button.g.wrap(),
gap: 'small', showcase.control.button.dropdown.toggle,
align: 'center', ]
children: [ })
showcase.control.button.a.wrap(), ]
showcase.control.button.b.wrap(), }),
showcase.control.button.c.wrap(), node('hr'),
showcase.control.button.g.wrap(), showcase.control.tab.tab(),
showcase.control.button.dropdown.toggle, showcase.control.input.text.wrap(),
] showcase.control.input.textarea.wrap(),
}) showcase.control.input.color.wrap(),
] showcase.control.input.number.wrap(),
}), showcase.control.input.numberRange.wrap(),
node('hr'), showcase.control.select.wrap(),
showcase.control.tab.tab(), node('hr'),
showcase.control.input.text.wrap(), form.wrap({
showcase.control.input.textarea.wrap(), children: [
showcase.control.input.color.wrap(), form.inline({
showcase.control.input.number.wrap(), gap: 'small',
showcase.control.input.numberRange.wrap(), wrap: true,
showcase.control.select.wrap(), equalGap: true,
node('hr'), children: showcase.control.icon
form.wrap({ })
children: [ ]
form.inline({ }),
gap: 'small',
wrap: true,
equalGap: true,
children: showcase.control.icon
})
]
}),
])
); );
showcase.element.showcase.append(showcase.element.side);
showcase.element.showcase.append(showcase.element.content);
}; };
showcase.area.clear = () => { showcase.area.clear = () => {

2
src/index.js
View File

@ -24,4 +24,4 @@ component.pageLock.init();
component.keyboard.init(); component.keyboard.init();
// component.menu.open(); component.menu.open();