piskel/src/templates/drawing-tools.html

47 lines
1.8 KiB
HTML

<div class="sticky-section left-sticky-section" id="tool-section">
<div class="sticky-section-wrap">
<div class="vertical-centerer">
<div class="pen-size-container size-picker-container" title="Pen size<br/>from 1 to 4 pixels" rel="tooltip" data-placement="top">
<div class="pen-size-option size-picker-option" data-size="1"></div>
<div class="pen-size-option size-picker-option" data-size="2"></div>
<div class="pen-size-option size-picker-option" data-size="3"></div>
<div class="pen-size-option size-picker-option" data-size="4"></div>
</div>
<ul id="tools-container" class="tools-wrapper">
<!-- Drawing tools will be inserted here -->
</ul>
<div class="palette-wrapper">
<div
class="tool-icon tool-color-picker"
data-initial-title="Primary - left mouse button"
rel="tooltip"
data-placement="right"
>
<input id="color-picker" class="color" type="text"/>
</div>
<div
class="tool-icon tool-color-picker"
data-initial-title="Secondary - right mouse button"
rel="tooltip"
data-placement="right"
>
<input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
</div>
<div
class="swap-colors-button icon-common-swapcolors-arrow-grey"
title="Swap colors (X)"
rel="tooltip"
data-placement="right"
></div>
</div>
</div>
</div>
<!-- Templates -->
<!-- Drawing tool icon-button -->
<script type="text/template" id="drawingTool-item-template">
<li rel="tooltip" data-placement="{{tooltipposition}}" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
</script>
</div>