mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-01-21 21:38:45 +01:00
change some icons
This commit is contained in:
zombieFox
parent
b813386aab
commit
d0ade838d0
@ -44,6 +44,10 @@
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: hsl(var(--utility-muted));
|
||||
}
|
||||
@ -59,20 +63,23 @@
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.color-demo {
|
||||
.d-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.baseline-alignment-icon-character {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
.d-horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.d-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.d-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.d-gap {
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
@ -6,151 +6,136 @@ const icon = {};
|
||||
|
||||
icon.all = {
|
||||
add: {
|
||||
name: 'add',
|
||||
path: 'M18.984 12.984h-6v6h-1.969v-6h-6v-1.969h6v-6h1.969v6h6v1.969z'
|
||||
},
|
||||
arrowBack: {
|
||||
name: 'arrow-back',
|
||||
path: 'M20.016 11.016v1.969h-12.188l5.578 5.625-1.406 1.406-8.016-8.016 8.016-8.016 1.406 1.406-5.578 5.625h12.188z'
|
||||
},
|
||||
arrowDownward: {
|
||||
name: 'arrow-downward',
|
||||
path: 'M20.016 12l-8.016 8.016-8.016-8.016 1.453-1.406 5.578 5.578v-12.188h1.969v12.188l5.625-5.578z'
|
||||
},
|
||||
arrowForward: {
|
||||
name: 'arrow-forward',
|
||||
path: 'M12 3.984l8.016 8.016-8.016 8.016-1.406-1.406 5.578-5.625h-12.188v-1.969h12.188l-5.578-5.625z'
|
||||
},
|
||||
arrowUpward: {
|
||||
name: 'arrow-upward',
|
||||
path: 'M3.984 12l8.016-8.016 8.016 8.016-1.453 1.406-5.578-5.578v12.188h-1.969v-12.188l-5.625 5.578z'
|
||||
},
|
||||
check: {
|
||||
name: 'check',
|
||||
path: 'M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z'
|
||||
},
|
||||
cross: {
|
||||
name: 'cross',
|
||||
path: 'M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z'
|
||||
},
|
||||
arrowKeyboardDown: {
|
||||
name: 'arrow-keyboard-down',
|
||||
path: 'M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'
|
||||
},
|
||||
arrowKeyboardLeft: {
|
||||
name: 'arrow-keyboard-left',
|
||||
path: 'M15.422 16.078l-1.406 1.406-6-6 6-6 1.406 1.406-4.594 4.594z'
|
||||
},
|
||||
arrowKeyboardRight: {
|
||||
name: 'arrow-keyboard-right',
|
||||
path: 'M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z'
|
||||
},
|
||||
arrowKeyboardUp: {
|
||||
name: 'arrow-keyboard-up',
|
||||
path: 'M7.406 15.422l-1.406-1.406 6-6 6 6-1.406 1.406-4.594-4.594z'
|
||||
},
|
||||
edit: {
|
||||
name: 'edit',
|
||||
path: 'M20.719 7.031l-1.828 1.828-3.75-3.75 1.828-1.828c0.375-0.375 1.031-0.375 1.406 0l2.344 2.344c0.375 0.375 0.375 1.031 0 1.406zM3 17.25l11.063-11.063 3.75 3.75-11.063 11.063h-3.75v-3.75z'
|
||||
},
|
||||
moreHorizontal: {
|
||||
name: 'more-horizontal',
|
||||
path: 'M12 9.984c1.078 0 2.016 0.938 2.016 2.016s-0.938 2.016-2.016 2.016-2.016-0.938-2.016-2.016 0.938-2.016 2.016-2.016zM18 9.984c1.078 0 2.016 0.938 2.016 2.016s-0.938 2.016-2.016 2.016-2.016-0.938-2.016-2.016 0.938-2.016 2.016-2.016zM6 9.984c1.078 0 2.016 0.938 2.016 2.016s-0.938 2.016-2.016 2.016-2.016-0.938-2.016-2.016 0.938-2.016 2.016-2.016z'
|
||||
},
|
||||
moreVertical: {
|
||||
name: 'more-vertical',
|
||||
path: 'M12 15.984c1.078 0 2.016 0.938 2.016 2.016s-0.938 2.016-2.016 2.016-2.016-0.938-2.016-2.016 0.938-2.016 2.016-2.016zM12 9.984c1.078 0 2.016 0.938 2.016 2.016s-0.938 2.016-2.016 2.016-2.016-0.938-2.016-2.016 0.938-2.016 2.016-2.016zM12 8.016c-1.078 0-2.016-0.938-2.016-2.016s0.938-2.016 2.016-2.016 2.016 0.938 2.016 2.016-0.938 2.016-2.016 2.016z'
|
||||
},
|
||||
redo: {
|
||||
name: 'redo',
|
||||
path: 'M18.422 10.594l3.563-3.609v9h-9l3.656-3.609q-2.25-1.875-5.156-1.875-2.391 0-4.617 1.594t-2.977 3.891l-2.344-0.75q1.031-3.188 3.773-5.203t6.164-2.016q3.984 0 6.938 2.578z'
|
||||
},
|
||||
refresh: {
|
||||
name: 'refresh',
|
||||
path: 'M17.672 6.328l2.344-2.344v7.031h-7.031l3.234-3.234c-1.078-1.078-2.578-1.781-4.219-1.781-3.328 0-6 2.672-6 6s2.672 6 6 6c2.625 0 4.875-1.641 5.672-3.984h2.063c-0.891 3.469-3.984 6-7.734 6-4.406 0-7.969-3.609-7.969-8.016s3.563-8.016 7.969-8.016c2.203 0 4.219 0.891 5.672 2.344z'
|
||||
},
|
||||
remove: {
|
||||
name: 'remove',
|
||||
path: 'M18.984 12.984h-13.969v-1.969h13.969v1.969z'
|
||||
},
|
||||
reorder: {
|
||||
name: 'reorder',
|
||||
path: 'M3 5.016h18v1.969h-18v-1.969zM3 11.016v-2.016h18v2.016h-18zM3 18.984v-1.969h18v1.969h-18zM3 15v-2.016h18v2.016h-18z'
|
||||
},
|
||||
replay: {
|
||||
name: 'replay',
|
||||
path: 'M12 5.016q3.328 0 5.672 2.344t2.344 5.625q0 3.328-2.367 5.672t-5.648 2.344-5.648-2.344-2.367-5.672h2.016q0 2.484 1.758 4.242t4.242 1.758 4.242-1.758 1.758-4.242-1.758-4.242-4.242-1.758v4.031l-5.016-5.016 5.016-5.016v4.031z'
|
||||
},
|
||||
settings: {
|
||||
name: 'settings',
|
||||
path: 'M12 15.516c1.922 0 3.516-1.594 3.516-3.516s-1.594-3.516-3.516-3.516-3.516 1.594-3.516 3.516 1.594 3.516 3.516 3.516zM19.453 12.984l2.109 1.641c0.188 0.141 0.234 0.422 0.094 0.656l-2.016 3.469c-0.141 0.234-0.375 0.281-0.609 0.188l-2.484-0.984c-0.516 0.375-1.078 0.75-1.688 0.984l-0.375 2.625c-0.047 0.234-0.234 0.422-0.469 0.422h-4.031c-0.234 0-0.422-0.188-0.469-0.422l-0.375-2.625c-0.609-0.234-1.172-0.563-1.688-0.984l-2.484 0.984c-0.234 0.094-0.469 0.047-0.609-0.188l-2.016-3.469c-0.141-0.234-0.094-0.516 0.094-0.656l2.109-1.641c-0.047-0.328-0.047-0.656-0.047-0.984s0-0.656 0.047-0.984l-2.109-1.641c-0.188-0.141-0.234-0.422-0.094-0.656l2.016-3.469c0.141-0.234 0.375-0.281 0.609-0.188l2.484 0.984c0.516-0.375 1.078-0.75 1.688-0.984l0.375-2.625c0.047-0.234 0.234-0.422 0.469-0.422h4.031c0.234 0 0.422 0.188 0.469 0.422l0.375 2.625c0.609 0.234 1.172 0.563 1.688 0.984l2.484-0.984c0.234-0.094 0.469-0.047 0.609 0.188l2.016 3.469c0.141 0.234 0.094 0.516-0.094 0.656l-2.109 1.641c0.047 0.328 0.047 0.656 0.047 0.984s0 0.656-0.047 0.984z'
|
||||
},
|
||||
undo: {
|
||||
name: 'undo',
|
||||
path: 'M12.516 8.016q3.422 0 6.141 2.016t3.797 5.203l-2.344 0.75q-0.797-2.438-2.883-3.961t-4.711-1.523q-2.906 0-5.156 1.875l3.656 3.609h-9v-9l3.563 3.609q2.953-2.578 6.938-2.578z'
|
||||
},
|
||||
unfoldLess: {
|
||||
name: 'unfold-less',
|
||||
path: 'M16.594 5.391l-4.594 4.594-4.594-4.594 1.406-1.406 3.188 3.188 3.188-3.188zM7.406 18.609l4.594-4.594 4.594 4.594-1.406 1.406-3.188-3.188-3.188 3.188z'
|
||||
},
|
||||
unfoldMore: {
|
||||
name: 'unfold-more',
|
||||
path: 'M12 18.188l3.188-3.188 1.406 1.406-4.594 4.594-4.594-4.594 1.406-1.406zM12 5.813l-3.188 3.188-1.406-1.406 4.594-4.594 4.594 4.594-1.406 1.406z'
|
||||
},
|
||||
coffee: {
|
||||
name: 'coffee',
|
||||
path: 'M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z'
|
||||
},
|
||||
drag: {
|
||||
name: 'drag',
|
||||
path: 'M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z'
|
||||
},
|
||||
bookmark: {
|
||||
name: 'bookmark',
|
||||
path: 'M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z'
|
||||
path: 'M17 3H7C5.9 3 5.01 3.9 5.01 5L5 21L12 18L19 21V5C19 3.9 18.1 3 17 3Z'
|
||||
},
|
||||
addBookmark: {
|
||||
name: 'add-bookmark',
|
||||
path: 'M17 11v6.97l-5-2.14l-5 2.14V5h6V3H7C5.9 3 5 3.9 5 5v16l7-3l7 3V11H17z M21 7h-2v2h-2V7h-2V5h2V3h2v2h2V7z'
|
||||
path: 'M21 7H19V9H17V7H15V5H17V3H19V5H21V7ZM19 21L12 18L5 21V5C5 3.9 5.9 3 7 3H14C13.37 3.84 13 4.87 13 6C13 8.76 15.24 11 18 11C18.34 11 18.68 10.97 19 10.9V21Z'
|
||||
},
|
||||
group: {
|
||||
name: 'group',
|
||||
path: 'M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19Z'
|
||||
path: 'M5 5C3.89543 5 3 5.89543 3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V7C21 5.89543 20.1046 5 19 5H5ZM19 7H5V9H19V7Z',
|
||||
fill: 'evenodd',
|
||||
clip: 'evenodd'
|
||||
},
|
||||
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'
|
||||
path: 'M5 5H13.9996C13.5629 5.58141 13.25 6.26112 13.1 7H5V9H13.1C13.5633 11.2822 15.581 13 18 13C19.1256 13 20.1643 12.6281 21 12.0004V17C21 18.1046 20.1046 19 19 19H5C3.89543 19 3 18.1046 3 17V7C3 5.89543 3.89543 5 5 5Z M19 9H21V7H19V5H17V7H15V9H17V11H19V9Z'
|
||||
},
|
||||
info: {
|
||||
name: 'info',
|
||||
path: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'
|
||||
},
|
||||
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'
|
||||
}
|
||||
};
|
||||
|
||||
icon.render = (name) => {
|
||||
|
||||
const iconElement = node('span|class:icon');
|
||||
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
|
||||
svg.setAttribute('version', '1.1');
|
||||
|
||||
svg.setAttribute('viewBox', '0 0 24 24');
|
||||
|
||||
svg.setAttribute('width', '24');
|
||||
|
||||
svg.setAttribute('height', '24');
|
||||
|
||||
svg.setAttribute('fill', 'currentColor');
|
||||
|
||||
if (icon.all[name].fill) {
|
||||
svg.setAttribute('clip-rule', icon.all[name].clip);
|
||||
};
|
||||
|
||||
if (icon.all[name].fill) {
|
||||
svg.setAttribute('fill-rule', icon.all[name].fill);
|
||||
};
|
||||
|
||||
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
|
||||
path.setAttribute('d', icon.all[name].path);
|
||||
|
||||
svg.appendChild(path);
|
||||
|
||||
iconElement.appendChild(svg);
|
||||
|
||||
return iconElement;
|
||||
|
||||
};
|
||||
|
||||
export { icon };
|
||||
|
||||
@ -16,8 +16,7 @@ import { clearChildNode } from '../../utility/clearChildNode';
|
||||
const menu = {};
|
||||
|
||||
menu.navData = [
|
||||
// { name: 'Form', active: true, overscroll: true, sub: ['Input', 'Button'] },
|
||||
// { name: 'Debug', active: true, overscroll: true, sub: ['Bookmark'] },
|
||||
// { name: 'Debug', active: true, overscroll: true, sub: ['Input', 'Button', 'Bookmark', 'Icon'] },
|
||||
{ name: 'Theme', active: true, overscroll: true, sub: ['Preset', 'Saved', 'Style', 'Colour', 'Accent', 'Font', 'Radius', 'Shadow', 'Shade', 'Opacity', 'Background', 'Layout', 'Header', 'Bookmark'] },
|
||||
{ name: 'Layout', active: false, overscroll: true, sub: ['Scaling', 'Area', 'Padding', 'Gutter', 'Alignment', 'Page'] },
|
||||
{ name: 'Header', active: false, overscroll: true, sub: ['Area', 'Greeting', 'Transitional words', 'Clock', 'Date', 'Search'] },
|
||||
|
||||
@ -43,15 +43,211 @@ import { applyCSSState } from '../../../utility/applyCSSState';
|
||||
|
||||
const debugSetting = {};
|
||||
|
||||
debugSetting.state = {
|
||||
input: {
|
||||
radio: { a: 'a', b: 'a', c: 'a', d: 'a', e: 'a', grid3x3: 'a', grid3x1: 'a', grid1x3: 'a' },
|
||||
checkbox: { a: true, b: true, c: false }
|
||||
}
|
||||
};
|
||||
|
||||
debugSetting.control = {
|
||||
alignment: {},
|
||||
name: {},
|
||||
open: {}
|
||||
input: {},
|
||||
button: {},
|
||||
bookmark: {},
|
||||
icon: {}
|
||||
};
|
||||
|
||||
debugSetting.input = (parent) => {
|
||||
|
||||
debugSetting.control.input.radio = {
|
||||
a: new Control_radio({
|
||||
object: debugSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-a-a', labelText: 'Radio A A', description: 'Description for radio A A.', value: 'a' },
|
||||
{ id: 'input-radio-a-b', labelText: 'Radio A B', description: 'Description for radio A B.', value: 'b' },
|
||||
{ id: 'input-radio-a-c', labelText: 'Radio A C', description: 'Description for radio A C.', value: 'c' }
|
||||
],
|
||||
label: 'Radio group A',
|
||||
groupName: 'input-radio-a',
|
||||
path: 'input.radio.a',
|
||||
action: () => { console.log(debugSetting.state); }
|
||||
}),
|
||||
b: new Control_radio({
|
||||
object: debugSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-b-a', labelText: 'B A', value: 'a' },
|
||||
{ id: 'input-radio-b-b', labelText: 'B B', value: 'b' },
|
||||
{ id: 'input-radio-b-c', labelText: 'B C', value: 'c' }
|
||||
],
|
||||
label: 'Radio group',
|
||||
groupName: 'input-radio-b',
|
||||
path: 'input.radio.b',
|
||||
action: () => { console.log(debugSetting.state); }
|
||||
}),
|
||||
c: new Control_radio({
|
||||
object: debugSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-c-a', labelText: 'C A', value: 'a' },
|
||||
{ id: 'input-radio-c-b', labelText: 'C B', value: 'b' },
|
||||
{ id: 'input-radio-c-c', labelText: 'C C', value: 'c' }
|
||||
],
|
||||
label: 'Radio group',
|
||||
groupName: 'input-radio-c',
|
||||
path: 'input.radio.c',
|
||||
inputButton: true,
|
||||
action: () => { console.log(debugSetting.state); }
|
||||
}),
|
||||
d: new Control_radio({
|
||||
object: debugSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-d-a', labelText: 'D A', value: 'a' },
|
||||
{ id: 'input-radio-d-b', labelText: 'D B', value: 'b' },
|
||||
{ id: 'input-radio-d-c', labelText: 'D C', value: 'c' }
|
||||
],
|
||||
label: 'Radio group',
|
||||
groupName: 'input-radio-d',
|
||||
path: 'input.radio.d',
|
||||
inputButton: true,
|
||||
inputButtonStyle: ['line'],
|
||||
action: () => { console.log(debugSetting.state); }
|
||||
}),
|
||||
e: new Control_radio({
|
||||
object: debugSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-e-a', labelText: 'E A', value: 'a' },
|
||||
{ id: 'input-radio-e-b', labelText: 'E B', value: 'b' },
|
||||
{ id: 'input-radio-e-c', labelText: 'E C', value: 'c' }
|
||||
],
|
||||
label: 'Radio group',
|
||||
groupName: 'input-radio-e',
|
||||
path: 'input.radio.e',
|
||||
inputButton: true,
|
||||
inputHide: true,
|
||||
inputButtonStyle: ['ring'],
|
||||
action: () => { console.log(debugSetting.state); }
|
||||
}),
|
||||
grid3x3: new Control_radioGrid({
|
||||
object: debugSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-grid3x3-a', labelText: 'A', value: 'a', position: 1 },
|
||||
{ id: 'input-radio-grid3x3-b', labelText: 'B', value: 'b', position: 2 },
|
||||
{ id: 'input-radio-grid3x3-c', labelText: 'C', value: 'c', position: 3 },
|
||||
{ id: 'input-radio-grid3x3-d', labelText: 'D', value: 'd', position: 4 },
|
||||
{ id: 'input-radio-grid3x3-e', labelText: 'E', value: 'e', position: 5 },
|
||||
{ id: 'input-radio-grid3x3-f', labelText: 'F', value: 'f', position: 6 },
|
||||
{ id: 'input-radio-grid3x3-g', labelText: 'G', value: 'g', position: 7 },
|
||||
{ id: 'input-radio-grid3x3-h', labelText: 'H', value: 'h', position: 8 },
|
||||
{ id: 'input-radio-grid3x3-i', labelText: 'I', value: 'i', position: 9 }
|
||||
],
|
||||
label: 'Radio group grid 3x3',
|
||||
groupName: 'input-radio-grid3x3',
|
||||
path: 'input.radio.grid3x3',
|
||||
gridSize: '3x3',
|
||||
action: () => { console.log(debugSetting.state); }
|
||||
}),
|
||||
grid3x1: new Control_radioGrid({
|
||||
object: debugSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-grid3x1-a', labelText: 'A', value: 'a', position: 1 },
|
||||
{ id: 'input-radio-grid3x1-b', labelText: 'B', value: 'b', position: 2 },
|
||||
{ id: 'input-radio-grid3x1-c', labelText: 'C', value: 'c', position: 3 }
|
||||
],
|
||||
label: 'Radio group grid 3x1',
|
||||
groupName: 'input-radio-grid3x1',
|
||||
path: 'input.radio.grid3x1',
|
||||
gridSize: '3x1',
|
||||
action: () => { console.log(debugSetting.state); }
|
||||
}),
|
||||
grid1x3: new Control_radioGrid({
|
||||
object: debugSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-grid1x3-a', labelText: 'A', value: 'a', position: 1 },
|
||||
{ id: 'input-radio-grid1x3-b', labelText: 'B', value: 'b', position: 2 },
|
||||
{ id: 'input-radio-grid1x3-c', labelText: 'C', value: 'c', position: 3 }
|
||||
],
|
||||
label: 'Radio group grid 1x3',
|
||||
groupName: 'input-radio-grid1x3',
|
||||
path: 'input.radio.grid1x3',
|
||||
gridSize: '1x3',
|
||||
action: () => { console.log(debugSetting.state); }
|
||||
})
|
||||
};
|
||||
|
||||
debugSetting.control.input.checkbox = {
|
||||
a: new Control_checkbox({
|
||||
object: debugSetting.state,
|
||||
id: 'input-checkbox-a',
|
||||
path: 'input.checkbox.a',
|
||||
labelText: 'Checkbox A',
|
||||
action: () => { console.log(debugSetting.state); }
|
||||
}),
|
||||
b: new Control_checkbox({
|
||||
object: debugSetting.state,
|
||||
id: 'input-checkbox-b',
|
||||
path: 'input.checkbox.b',
|
||||
labelText: 'Checkbox B',
|
||||
action: () => { console.log(debugSetting.state); }
|
||||
}),
|
||||
c: new Control_checkbox({
|
||||
object: debugSetting.state,
|
||||
id: 'input-checkbox-c',
|
||||
path: 'input.checkbox.c',
|
||||
labelText: 'Checkbox C',
|
||||
action: () => { console.log(debugSetting.state); }
|
||||
})
|
||||
};
|
||||
|
||||
parent.appendChild(
|
||||
node('div', [
|
||||
debugSetting.control.input.radio.a.wrap(),
|
||||
node('hr'),
|
||||
debugSetting.control.input.radio.b.inline(),
|
||||
debugSetting.control.input.radio.c.inputButton(),
|
||||
debugSetting.control.input.radio.d.inputButton(),
|
||||
debugSetting.control.input.radio.e.inputButton(),
|
||||
node('hr'),
|
||||
debugSetting.control.input.radio.grid3x3.wrap(),
|
||||
debugSetting.control.input.radio.grid3x1.wrap(),
|
||||
debugSetting.control.input.radio.grid1x3.wrap(),
|
||||
node('hr'),
|
||||
debugSetting.control.input.checkbox.a.wrap(),
|
||||
debugSetting.control.input.checkbox.b.wrap(),
|
||||
debugSetting.control.input.checkbox.c.wrap()
|
||||
])
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
debugSetting.button = (parent) => {
|
||||
|
||||
debugSetting.control.button.small = new Button({ text: 'Small button', size: 'small' });
|
||||
|
||||
debugSetting.control.button.medium = new Button({ text: 'Medium button', size: 'medium' });
|
||||
|
||||
debugSetting.control.button.large = new Button({ text: 'Large button', size: 'large' });
|
||||
|
||||
debugSetting.control.button.ring = new Button({ text: 'Ring button', size: 'medium', style: ['ring'] });
|
||||
|
||||
debugSetting.control.button.line = new Button({ text: 'Line button', size: 'medium', style: ['line'] });
|
||||
|
||||
debugSetting.control.button.link = new Button({ text: 'Link button', size: 'medium', style: ['link'] });
|
||||
|
||||
parent.appendChild(
|
||||
node('div', [
|
||||
debugSetting.control.button.small.wrap(),
|
||||
debugSetting.control.button.medium.wrap(),
|
||||
debugSetting.control.button.large.wrap(),
|
||||
debugSetting.control.button.ring.wrap(),
|
||||
debugSetting.control.button.line.wrap(),
|
||||
debugSetting.control.button.link.wrap(),
|
||||
])
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
debugSetting.bookmark = (parent) => {
|
||||
|
||||
debugSetting.bookmark.letter = new Button({
|
||||
debugSetting.control.bookmark.letter = new Button({
|
||||
text: 'Only letters',
|
||||
style: ['line'],
|
||||
func: () => {
|
||||
@ -67,7 +263,7 @@ debugSetting.bookmark = (parent) => {
|
||||
}
|
||||
});
|
||||
|
||||
debugSetting.bookmark.icon = new Button({
|
||||
debugSetting.control.bookmark.icon = new Button({
|
||||
text: 'Only icons',
|
||||
style: ['line'],
|
||||
func: () => {
|
||||
@ -83,7 +279,7 @@ debugSetting.bookmark = (parent) => {
|
||||
}
|
||||
});
|
||||
|
||||
debugSetting.bookmark.image = new Button({
|
||||
debugSetting.control.bookmark.image = new Button({
|
||||
text: 'Only images',
|
||||
style: ['line'],
|
||||
func: () => {
|
||||
@ -99,7 +295,7 @@ debugSetting.bookmark = (parent) => {
|
||||
}
|
||||
});
|
||||
|
||||
debugSetting.bookmark.image = new Button({
|
||||
debugSetting.control.bookmark.image = new Button({
|
||||
text: 'Only images',
|
||||
style: ['line'],
|
||||
func: () => {
|
||||
@ -115,23 +311,7 @@ debugSetting.bookmark = (parent) => {
|
||||
}
|
||||
});
|
||||
|
||||
debugSetting.bookmark.nameHide = new Button({
|
||||
text: 'Name hide',
|
||||
style: ['line'],
|
||||
func: () => {
|
||||
bookmark.all.forEach(item => {
|
||||
item.items.forEach(item => {
|
||||
|
||||
item.display.name.show = false;
|
||||
|
||||
});
|
||||
});
|
||||
groupAndBookmark.render();
|
||||
data.save();
|
||||
}
|
||||
});
|
||||
|
||||
debugSetting.bookmark.nameShow = new Button({
|
||||
debugSetting.control.bookmark.nameShow = new Button({
|
||||
text: 'Name show',
|
||||
style: ['line'],
|
||||
func: () => {
|
||||
@ -147,6 +327,22 @@ debugSetting.bookmark = (parent) => {
|
||||
}
|
||||
});
|
||||
|
||||
debugSetting.control.bookmark.nameHide = new Button({
|
||||
text: 'Name hide',
|
||||
style: ['line'],
|
||||
func: () => {
|
||||
bookmark.all.forEach(item => {
|
||||
item.items.forEach(item => {
|
||||
|
||||
item.display.name.show = false;
|
||||
|
||||
});
|
||||
});
|
||||
groupAndBookmark.render();
|
||||
data.save();
|
||||
}
|
||||
});
|
||||
|
||||
parent.appendChild(
|
||||
node('div', [
|
||||
form.wrap({
|
||||
@ -156,11 +352,11 @@ debugSetting.bookmark = (parent) => {
|
||||
wrap: true,
|
||||
equalGap: true,
|
||||
children: [
|
||||
debugSetting.bookmark.letter.wrap(),
|
||||
debugSetting.bookmark.icon.wrap(),
|
||||
debugSetting.bookmark.image.wrap(),
|
||||
debugSetting.bookmark.nameHide.wrap(),
|
||||
debugSetting.bookmark.nameShow.wrap(),
|
||||
debugSetting.control.bookmark.letter.wrap(),
|
||||
debugSetting.control.bookmark.icon.wrap(),
|
||||
debugSetting.control.bookmark.image.wrap(),
|
||||
debugSetting.control.bookmark.nameShow.wrap(),
|
||||
debugSetting.control.bookmark.nameHide.wrap()
|
||||
]
|
||||
})
|
||||
]
|
||||
@ -170,4 +366,38 @@ debugSetting.bookmark = (parent) => {
|
||||
|
||||
};
|
||||
|
||||
export { debugSetting }
|
||||
debugSetting.icon = (parent) => {
|
||||
|
||||
debugSetting.control.icon = [];
|
||||
|
||||
for (let key in icon.all) {
|
||||
debugSetting.control.icon.push(
|
||||
form.wrap({
|
||||
children: [
|
||||
node('div|class:d-flex d-horizontal d-gap d-center', [
|
||||
node('div|class:large', [icon.render(key)]),
|
||||
node(`p:${key}|class:small`)
|
||||
])
|
||||
]
|
||||
})
|
||||
)
|
||||
};
|
||||
|
||||
parent.appendChild(
|
||||
node('div', [
|
||||
form.wrap({
|
||||
children: [
|
||||
form.inline({
|
||||
gap: 'small',
|
||||
wrap: true,
|
||||
equalGap: true,
|
||||
children: debugSetting.control.icon
|
||||
})
|
||||
]
|
||||
})
|
||||
])
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export { debugSetting };
|
||||
|
||||
@ -1,241 +0,0 @@
|
||||
import { state } from '../../state';
|
||||
import { data } from '../../data';
|
||||
import { header } from '../../header';
|
||||
import { bookmark } from '../../bookmark';
|
||||
import { theme } from '../../theme';
|
||||
import { version } from '../../version';
|
||||
import { menu } from '../../menu';
|
||||
import { icon } from '../../icon';
|
||||
import { logo } from '../../logo';
|
||||
import { link } from '../../link';
|
||||
import { layout } from '../../layout';
|
||||
import { toolbar } from '../../toolbar';
|
||||
|
||||
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';
|
||||
import { Control_groupText } from '../../control/groupText';
|
||||
import { Control_radio } from '../../control/radio';
|
||||
import { Control_radioGrid } from '../../control/radioGrid';
|
||||
import { Control_checkbox } from '../../control/checkbox';
|
||||
import { Control_slider } from '../../control/slider';
|
||||
import { Control_sliderSlim } from '../../control/sliderSlim';
|
||||
import { Control_sliderDouble } from '../../control/sliderDouble';
|
||||
import { Control_colorMixer } from '../../control/colorMixer';
|
||||
import { Control_color } from '../../control/color';
|
||||
import { Control_text } from '../../control/text';
|
||||
import { Control_textReset } from '../../control/textReset';
|
||||
import { Control_textarea } from '../../control/textarea';
|
||||
|
||||
import { node } from '../../../utility/node';
|
||||
import { complexNode } from '../../../utility/complexNode';
|
||||
import { applyCSSVar } from '../../../utility/applyCSSVar';
|
||||
import { applyCSSClass } from '../../../utility/applyCSSClass';
|
||||
import { applyCSSState } from '../../../utility/applyCSSState';
|
||||
|
||||
const formSetting = {};
|
||||
|
||||
formSetting.state = {
|
||||
input: {
|
||||
radio: { a: 'a', b: 'a', c: 'a', d: 'a', e: 'a', grid3x3: 'a', grid3x1: 'a', grid1x3: 'a' },
|
||||
checkbox: { a: true, b: true, c: false }
|
||||
}
|
||||
};
|
||||
|
||||
formSetting.control = {
|
||||
input: {},
|
||||
button: {}
|
||||
};
|
||||
|
||||
formSetting.input = (parent) => {
|
||||
|
||||
formSetting.input.radio = {
|
||||
a: new Control_radio({
|
||||
object: formSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-a-a', labelText: 'Radio A A', description: 'Description for radio A A.', value: 'a' },
|
||||
{ id: 'input-radio-a-b', labelText: 'Radio A B', description: 'Description for radio A B.', value: 'b' },
|
||||
{ id: 'input-radio-a-c', labelText: 'Radio A C', description: 'Description for radio A C.', value: 'c' }
|
||||
],
|
||||
label: 'Radio group A',
|
||||
groupName: 'input-radio-a',
|
||||
path: 'input.radio.a',
|
||||
action: () => { console.log(formSetting.state); }
|
||||
}),
|
||||
b: new Control_radio({
|
||||
object: formSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-b-a', labelText: 'B A', value: 'a' },
|
||||
{ id: 'input-radio-b-b', labelText: 'B B', value: 'b' },
|
||||
{ id: 'input-radio-b-c', labelText: 'B C', value: 'c' }
|
||||
],
|
||||
label: 'Radio group',
|
||||
groupName: 'input-radio-b',
|
||||
path: 'input.radio.b',
|
||||
action: () => { console.log(formSetting.state); }
|
||||
}),
|
||||
c: new Control_radio({
|
||||
object: formSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-c-a', labelText: 'C A', value: 'a' },
|
||||
{ id: 'input-radio-c-b', labelText: 'C B', value: 'b' },
|
||||
{ id: 'input-radio-c-c', labelText: 'C C', value: 'c' }
|
||||
],
|
||||
label: 'Radio group',
|
||||
groupName: 'input-radio-c',
|
||||
path: 'input.radio.c',
|
||||
inputButton: true,
|
||||
action: () => { console.log(formSetting.state); }
|
||||
}),
|
||||
d: new Control_radio({
|
||||
object: formSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-d-a', labelText: 'D A', value: 'a' },
|
||||
{ id: 'input-radio-d-b', labelText: 'D B', value: 'b' },
|
||||
{ id: 'input-radio-d-c', labelText: 'D C', value: 'c' }
|
||||
],
|
||||
label: 'Radio group',
|
||||
groupName: 'input-radio-d',
|
||||
path: 'input.radio.d',
|
||||
inputButton: true,
|
||||
inputButtonStyle: ['line'],
|
||||
action: () => { console.log(formSetting.state); }
|
||||
}),
|
||||
e: new Control_radio({
|
||||
object: formSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-e-a', labelText: 'E A', value: 'a' },
|
||||
{ id: 'input-radio-e-b', labelText: 'E B', value: 'b' },
|
||||
{ id: 'input-radio-e-c', labelText: 'E C', value: 'c' }
|
||||
],
|
||||
label: 'Radio group',
|
||||
groupName: 'input-radio-e',
|
||||
path: 'input.radio.e',
|
||||
inputButton: true,
|
||||
inputHide: true,
|
||||
inputButtonStyle: ['ring'],
|
||||
action: () => { console.log(formSetting.state); }
|
||||
}),
|
||||
grid3x3: new Control_radioGrid({
|
||||
object: formSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-grid3x3-a', labelText: 'A', value: 'a', position: 1 },
|
||||
{ id: 'input-radio-grid3x3-b', labelText: 'B', value: 'b', position: 2 },
|
||||
{ id: 'input-radio-grid3x3-c', labelText: 'C', value: 'c', position: 3 },
|
||||
{ id: 'input-radio-grid3x3-d', labelText: 'D', value: 'd', position: 4 },
|
||||
{ id: 'input-radio-grid3x3-e', labelText: 'E', value: 'e', position: 5 },
|
||||
{ id: 'input-radio-grid3x3-f', labelText: 'F', value: 'f', position: 6 },
|
||||
{ id: 'input-radio-grid3x3-g', labelText: 'G', value: 'g', position: 7 },
|
||||
{ id: 'input-radio-grid3x3-h', labelText: 'H', value: 'h', position: 8 },
|
||||
{ id: 'input-radio-grid3x3-i', labelText: 'I', value: 'i', position: 9 }
|
||||
],
|
||||
label: 'Radio group grid 3x3',
|
||||
groupName: 'input-radio-grid3x3',
|
||||
path: 'input.radio.grid3x3',
|
||||
gridSize: '3x3',
|
||||
action: () => { console.log(formSetting.state); }
|
||||
}),
|
||||
grid3x1: new Control_radioGrid({
|
||||
object: formSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-grid3x1-a', labelText: 'A', value: 'a', position: 1 },
|
||||
{ id: 'input-radio-grid3x1-b', labelText: 'B', value: 'b', position: 2 },
|
||||
{ id: 'input-radio-grid3x1-c', labelText: 'C', value: 'c', position: 3 }
|
||||
],
|
||||
label: 'Radio group grid 3x1',
|
||||
groupName: 'input-radio-grid3x1',
|
||||
path: 'input.radio.grid3x1',
|
||||
gridSize: '3x1',
|
||||
action: () => { console.log(formSetting.state); }
|
||||
}),
|
||||
grid1x3: new Control_radioGrid({
|
||||
object: formSetting.state,
|
||||
radioGroup: [
|
||||
{ id: 'input-radio-grid1x3-a', labelText: 'A', value: 'a', position: 1 },
|
||||
{ id: 'input-radio-grid1x3-b', labelText: 'B', value: 'b', position: 2 },
|
||||
{ id: 'input-radio-grid1x3-c', labelText: 'C', value: 'c', position: 3 }
|
||||
],
|
||||
label: 'Radio group grid 1x3',
|
||||
groupName: 'input-radio-grid1x3',
|
||||
path: 'input.radio.grid1x3',
|
||||
gridSize: '1x3',
|
||||
action: () => { console.log(formSetting.state); }
|
||||
})
|
||||
};
|
||||
|
||||
formSetting.input.checkbox = {
|
||||
a: new Control_checkbox({
|
||||
object: formSetting.state,
|
||||
id: 'input-checkbox-a',
|
||||
path: 'input.checkbox.a',
|
||||
labelText: 'Checkbox A',
|
||||
action: () => { console.log(formSetting.state); }
|
||||
}),
|
||||
b: new Control_checkbox({
|
||||
object: formSetting.state,
|
||||
id: 'input-checkbox-b',
|
||||
path: 'input.checkbox.b',
|
||||
labelText: 'Checkbox B',
|
||||
action: () => { console.log(formSetting.state); }
|
||||
}),
|
||||
c: new Control_checkbox({
|
||||
object: formSetting.state,
|
||||
id: 'input-checkbox-c',
|
||||
path: 'input.checkbox.c',
|
||||
labelText: 'Checkbox C',
|
||||
action: () => { console.log(formSetting.state); }
|
||||
})
|
||||
};
|
||||
|
||||
parent.appendChild(
|
||||
node('div', [
|
||||
formSetting.input.radio.a.wrap(),
|
||||
node('hr'),
|
||||
formSetting.input.radio.b.inline(),
|
||||
formSetting.input.radio.c.inputButton(),
|
||||
formSetting.input.radio.d.inputButton(),
|
||||
formSetting.input.radio.e.inputButton(),
|
||||
node('hr'),
|
||||
formSetting.input.radio.grid3x3.wrap(),
|
||||
formSetting.input.radio.grid3x1.wrap(),
|
||||
formSetting.input.radio.grid1x3.wrap(),
|
||||
node('hr'),
|
||||
formSetting.input.checkbox.a.wrap(),
|
||||
formSetting.input.checkbox.b.wrap(),
|
||||
formSetting.input.checkbox.c.wrap()
|
||||
])
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
formSetting.button = (parent) => {
|
||||
|
||||
formSetting.button = {
|
||||
small: new Button({ text: 'Small button', size: 'small' }),
|
||||
medium: new Button({ text: 'Medium button', size: 'medium' }),
|
||||
large: new Button({ text: 'Large button', size: 'large' }),
|
||||
ring: new Button({ text: 'Ring button', size: 'medium', style: ['ring'] }),
|
||||
line: new Button({ text: 'Line button', size: 'medium', style: ['line'] }),
|
||||
link: new Button({ text: 'Link button', size: 'medium', style: ['link'] })
|
||||
};
|
||||
|
||||
parent.appendChild(
|
||||
node('div', [
|
||||
formSetting.button.small.wrap(),
|
||||
formSetting.button.medium.wrap(),
|
||||
formSetting.button.large.wrap(),
|
||||
formSetting.button.ring.wrap(),
|
||||
formSetting.button.line.wrap(),
|
||||
formSetting.button.link.wrap(),
|
||||
])
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export { formSetting }
|
||||
@ -1,5 +1,4 @@
|
||||
import { data } from '../data';
|
||||
import { formSetting } from './formSetting';
|
||||
import { debugSetting } from './debugSetting';
|
||||
import { appName } from '../appName';
|
||||
import { layoutSetting } from './layoutSetting';
|
||||
@ -58,14 +57,6 @@ export const MenuContent = function({
|
||||
|
||||
switch (this.makeId(activeNavData.name)) {
|
||||
|
||||
case 'form':
|
||||
formSetting[this.makeId(item)](formElement);
|
||||
break;
|
||||
|
||||
case 'debug':
|
||||
debugSetting[this.makeId(item)](formElement);
|
||||
break;
|
||||
|
||||
case 'layout':
|
||||
layoutSetting[this.makeId(item)](formElement);
|
||||
break;
|
||||
@ -94,6 +85,10 @@ export const MenuContent = function({
|
||||
dataSetting[this.makeId(item)](formElement);
|
||||
break;
|
||||
|
||||
case 'debug':
|
||||
debugSetting[this.makeId(item)](formElement);
|
||||
break;
|
||||
|
||||
};
|
||||
|
||||
menuContentItem.appendChild(formElement);
|
||||
|
||||
@ -296,7 +296,9 @@ themeSetting.saved = (parent) => {
|
||||
}),
|
||||
edit: new Button({
|
||||
text: 'Edit',
|
||||
iconName: 'edit',
|
||||
style: ['line'],
|
||||
srOnly: true,
|
||||
func: () => {
|
||||
customTheme.edit.toggle();
|
||||
data.save();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user