Skip to content

Commit

Permalink
better tips in toolbar helpers
Browse files Browse the repository at this point in the history
  • Loading branch information
@argyleink
argyleink committed Apr 5, 2024
1 parent 7956cb0 commit 8e59b57
Showing 1 changed file with 69 additions and 51 deletions.
120 changes: 69 additions & 51 deletions app/components/vis-bug/model.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,78 +17,84 @@ export const VisBugModel = {
<span>click+hover</span>
</div>
<div>
<b>Sticky Measurements:</b>
<b>Measure many:</b>
<span>shift+click</span>
</div>
<div>
<b>Clear:</b>
<span>esc</span>
</div>
</div>`,
},
i: {
tool: 'inspector',
icon: Icons.inspector,
label: '<span><u>I</u>nspect</span>',
description: 'Peek into common & current styles of an element',
description: 'Inspect the common styles of an element',
instruction: `<div table>
<div>
<b>Pin it:</b>
<span>click</span>
</div>
<div>
<b>Pin many:</b>
<span>shift+click</span>
</div>
<div>
<b>Position it:</b>
<span>click & drag by the header area</span>
</div>
<div>
<b>Clear:</b>
<span>esc</span>
</div>
</div>`,
},
x: {
tool: 'accessibility',
icon: Icons.accessibility,
label: 'Accessibility',
description: 'Peek into A11y attributes & compliance status',
description: 'Inspect attributes & contrast compliance',
instruction: `<div table>
<div>
<b>Pin it:</b>
<span>click</span>
</div>
</div>`,
},
v: {
tool: 'move',
icon: Icons.move,
label: '<span>Mo<u>v</u>e</span>',
description: 'Move elements laterally or in, out, over, and under',
instruction: `<div table>
<div>
<b>Lateral:</b>
<span>click container ⇒ drag child</span>
<b>Pin many:</b>
<span>shift+click</span>
</div>
<div>
<b>Lateral:</b>
<span>◀ ▶</span>
<b>Clear:</b>
<span>esc</span>
</div>
</div>`,
},
l: {
tool: 'position',
icon: Icons.position,
label: 'Position',
description: 'Grab and position elements anywhere',
instruction: `<div table>
<div>
<b>Out and above:</b>
<span>▲</span>
<b>Nudge:</b>
<span>◀ ▶ ▲ ▼</span>
</div>
<div>
<b>Down+in, out+under:</b>
<span>▼</span>
<b>Place:</b>
<span>Click & drag</span>
</div>
<div>
<b>Trainer:</b>
<span>shift + /</span>
<b>Restore:</b>
<span>${altKey} + delete</span>
</div>
</div>`,
},
// r: {
// tool: 'resize',
// icon: Icons.resize,
// label: 'Resize',
// description: ''
// },
m: {
tool: 'margin',
icon: Icons.margin,
label: '<span><u>M</u>argin</span>',
description: 'Add or subtract outer space from any or all sides of the selected element(s)',
description: 'Adjust spacing outside',
instruction: `<div table>
<div>
<b>+ Margin:</b>
Expand All @@ -112,7 +118,7 @@ export const VisBugModel = {
tool: 'padding',
icon: Icons.padding,
label: '<span><u>P</u>adding</span>',
description: `Add or subtract inner space from any or all sides of the selected element(s)`,
description: `Adjust spacing within`,
instruction: `<div table>
<div>
<b>+ Padding:</b>
Expand Down Expand Up @@ -142,7 +148,7 @@ export const VisBugModel = {
tool: 'align',
icon: Icons.align,
label: '<span>Flexbox <u>A</u>lign</span>',
description: `Create or modify flexbox direction, distribution, order & wrapping`,
description: `Adjust flexbox layout features`,
instruction: `<div table>
<div>
<b>Rows:</b>
Expand Down Expand Up @@ -174,11 +180,39 @@ export const VisBugModel = {
</div>
</div>`,
},
v: {
tool: 'move',
icon: Icons.move,
label: '<span>Mo<u>v</u>e</span>',
description: 'Change the position of elements',
instruction: `<div table>
<div>
<b>Lateral:</b>
<span>click container ⇒ drag child</span>
</div>
<div>
<b>Lateral:</b>
<span>◀ ▶</span>
</div>
<div>
<b>Out and above:</b>
<span>▲</span>
</div>
<div>
<b>Down+in, out+under:</b>
<span>▼</span>
</div>
<div>
<b>Trainer:</b>
<span>shift + /</span>
</div>
</div>`,
},
h: {
tool: 'hueshift',
icon: Icons.hueshift,
label: '<span><u>H</u>ue Shift</span>',
description: `Change foreground/background hue, brightness, saturation & opacity`,
description: ``,
instruction: `<div table>
<div>
<b>Saturation:</b>
Expand All @@ -205,8 +239,8 @@ export const VisBugModel = {
d: {
tool: 'boxshadow',
icon: Icons.boxshadow,
label: '<span>Sha<u>d</u>ow</span>',
description: `Create & adjust position, blur & opacity of a box shadow`,
label: '<span>Box Sha<u>d</u>ows</span>',
description: ``,
instruction: `<div table>
<div>
<b>X/Y Position:</b>
Expand All @@ -232,27 +266,11 @@ export const VisBugModel = {
// label: '3D Transform',
// description: ''
// },
l: {
tool: 'position',
icon: Icons.position,
label: 'Position',
description: 'Move svg (x,y) and elements (top,left,bottom,right)',
instruction: `<div table>
<div>
<b>Nudge:</b>
<span>◀ ▶ ▲ ▼</span>
</div>
<div>
<b>Move:</b>
<span>Click & drag</span>
</div>
</div>`,
},
f: {
tool: 'font',
icon: Icons.font,
label: '<span><u>F</u>ont Styles</span>',
description: 'Change size, alignment, leading, letter-spacing, & weight',
description: '',
instruction: `<div table>
<div>
<b>Size:</b>
Expand Down Expand Up @@ -284,7 +302,7 @@ export const VisBugModel = {
tool: 'text',
icon: Icons.text,
label: '<span><u>E</u>dit Text</span>',
description: 'Change any text on the page with a <b>double click</b>',
description: 'Just <b>Double click</b> any text on the page',
instruction: '',
},
// c: {
Expand Down

0 comments on commit 8e59b57

Please sign in to comment.