Menu Config for Cavas Candy

[6StringSam]

Did my best to configure the Canvas Style Menu setting for use the Canvas Candy. Thought I would share.

Menu Items

{ class: 'cs-border', type: 'border', icon: 'box-select', title: 'Border' }
{ class: 'cs-bg', type: 'bg', icon: 'background', title: 'Background' }
{ class: 'cs-rotate', type: 'rotate', icon: 'rotate-cw', title: 'Rotate' }
{ class: 'cs-shape', type: 'shape', icon: 'diamond', title: 'Shape' }
{ class: 'cs-gradient', type: 'gradient', icon: 'gradient', title: 'Gradient' }
{ class: 'cs-highlight', type: 'highlight', icon: 'star', title: 'Highlight' }
{ class: 'cs-extra', type: 'extra', icon: 'more-horizontal', title: 'Extra' }
{ cat: 'edge', class: 'cs-lineType', type: 'lineType', icon: 'line-type', title: 'Line Type' }
{ cat: 'edge', class: 'cs-lineThickness', type: 'lineThickness', icon: 'equal', title: 'Line thickness' }

Sub Menu Items

{ selector: 'cc', class: 'cc-border-none', type: 'border', icon: 'no-border', title: 'No Border' }
{ selector: 'cc', class: 'cc-border-dashed', type: 'border', icon: 'box-select', title: 'Dashed' }
{ selector: 'cc', class: 'cc-border-double', type: 'border', icon: 'thicker', title: 'Double' }
{ selector: 'cc', class: 'cc-border-dotted', type: 'border', icon: 'dotted', title: 'Dotted' }
{ selector: 'cc', class: 'cc-border-top', type: 'border', icon: 'top', title: 'Top' }
{ selector: 'cc', class: 'cc-border-bottom', type: 'border', icon: 'bottom', title: 'Bottom' }
{ selector: 'cc', class: 'cc-border-left', type: 'border', icon: 'left', title: 'Left' }
{ selector: 'cc', class: 'cc-border-right', type: 'border', icon: 'right', title: 'Right' }
{ selector: 'cc', class: 'cc-border-squared', type: 'border', icon: 'squared', title: 'Squared' }
{ selector: 'cc', class: 'cc-border-rounded', type: 'border', icon: 'rounded', title: 'Rounded' }
{ selector: 'cc', class: 'cc-border-dropshadow', type: 'border', icon: 'dropshadow', title: 'Drop Shadow' }
{ selector: 'cc', class: 'cc-card-transparent', type: 'bg', icon: 'opacity', title: 'Transparent' }
{ selector: 'cc', class: 'cc-card-opaque', type: 'bg', icon: 'transparent', title: 'Opaque' }
{ selector: 'cc', class: 'cc-card-nocolor', type: 'bg', icon: 'nocolor', title: 'No Color' }
{ selector: 'cc', class: 'cc-card-fill', type: 'bg', icon: 'fill', title: 'Fill' }
{ selector: 'cc', class: 'cc-card-center', type: 'bg', icon: 'center', title: 'Center' }
{ selector: 'cc', class: 'cc-rotate-card-45', type: 'rotate', icon: 'redo', title: 'Card Right 45' }
{ selector: 'cc', class: 'cc-rotate-text-45', type: 'rotate', icon: 'undo', title: 'Text 45' }
{ selector: 'cc', class: 'cc-rotate-text-90', type: 'rotate', icon: 'undo', title: 'Text 90' }
{ selector: 'cc', class: 'cc-rotate-text-180', type: 'rotate', icon: 'undo', title: 'Text 180' }
{ selector: 'cc', class: 'cc-rotate-text-135', type: 'rotate', icon: 'undo', title: 'Text 135' }
{ selector: 'cc', class: 'cc-rotate-text-225', type: 'rotate', icon: 'undo', title: 'Text 225' }
{ selector: 'cc', class: 'cc-rotate-text-270', type: 'rotate', icon: 'undo', title: 'Text 270' }
{ selector: 'cc', class: 'cc-rotate-text-315', type: 'rotate', icon: 'undo', title: 'Text 315' }
{ selector: 'cc', class: 'cc-rotate-text-360', type: 'rotate', icon: 'undo', title: 'Text 360' }
{ selector: 'cc', class: 'cc-shape-circle', type: 'shape', icon: 'circle', title: 'Circle' }
{ selector: 'cc', class: 'cc-shape-parallelogram-right', type: 'shape', icon: 'parallelogram-right', title: 'Parallelogram Right' }
{ selector: 'cc', class: 'cc-shape-parallelogram-left', type: 'shape', icon: 'parallelogram-left', title: 'Parallelogram Left' }
{ class: 'cs-line-dashed', type: 'lineType', icon: 'line-dashed', title: 'Dashed' }
{ class: 'cs-line-dashed-round', type: 'lineType', icon: 'line-dashed', title: 'Dashed round' }
{ class: 'cs-line-dotted', type: 'lineType', icon: 'line-dotted', title: 'Dotted' }
{ class: 'cs-line-dotted-line', type: 'lineType', icon: 'dotted-line', title: 'Dotted line' }
{ class: 'cs-line-thick', type: 'lineThickness', icon: 'thicker', title: 'Thicker' }
{ class: 'cs-line-thicker', type: 'lineThickness', icon: 'thicker++', title: 'Thicker++' }
{ selector: 'cc', class: 'cc-card-gradient-0deg', type: 'gradient', icon: '', title: '0' }
{ selector: 'cc', class: 'cc-card-gradient-45deg', type: 'gradient', icon: '', title: '45' }
{ selector: 'cc', class: 'cc-card-gradient-90deg', type: 'gradient', icon: '', title: '90' }
{ selector: 'cc', class: 'cc-card-gradient-135deg', type: 'gradient', icon: '', title: '135' }
{ selector: 'cc', class: 'cc-card-gradient-180deg', type: 'gradient', icon: '', title: '180' }
{ selector: 'cc', class: 'cc-card-gradient-225deg', type: 'gradient', icon: '', title: '225' }
{ selector: 'cc', class: 'cc-card-gradient-270deg', type: 'gradient', icon: '', title: '270' }
{ selector: 'cc', class: 'cc-card-gradient-315deg', type: 'gradient', icon: '', title: '315' }

Icons

gradient

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>

nocolor

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>

fill

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.8 3.8l16.4 16.4M20.2 3.8L3.8 20.2M15 3h6v6M9 3H3v6M15 21h6v-6M9 21H3v-6"/></svg>

center

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 9.5H5M21 4.5H3M21 14.5H3M19 19.5H5"/></svg>

dotted

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>

top

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V6M5 12l7-7 7 7"/></svg>

bottom

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v13M5 12l7 7 7-7"/></svg>

left

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H6M12 5l-7 7 7 7"/></svg>

right

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h13M12 5l7 7-7 7"/></svg>

squared

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>

rounded

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>

dropshadow

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>

[TfTHacker]

@michaellw would you consider including canvas candy support directly in the plugin? LIke a toggle in settings where the user can turn it on, and then using the custom settings of @6StringSam from above?

[michaellw]

@TfTHacker I do have this plan, but it's the end of the year, and I'm a bit busy. I'll implement it when I have some free time.

[gitgitdown]

Hello,

Thanks for the plugin I can't figure out where to place the elements that 6StringSam generously shared? In a css file? where?

Thanks

[michaellw]

Sorry, I put it on discord and forgot to update it here. Here is the style package file exported based on what 6StringSam shared above, put the package file in to the "packages" folder, then click the "Reload packages" button, then the settings will be imported. canvas-candy.json

[gitgitdown]

Thanks for the quick reply!

It works, it's great!