Arrange the colour choices more neatly.

This commit is contained in:
Justin Hawkins 2021-12-16 21:32:03 +10:30
parent e110fc307f
commit a099d738fc

View File

@ -7,25 +7,43 @@
<button type="button" @click="crop()" class="btn btn-primary">Apply</button> <button type="button" @click="crop()" class="btn btn-primary">Apply</button>
</div> </div>
<div id="tools-colour" x-show="toolbar == 'text'"> <div id="tools-colour" x-show="toolbar == 'text'">
<div>FG: <table>
<button type="button" @click="set_colour('#fff0', 'fg')" class="btn btn-primary" style="">-</button> <tr>
<th>foreground</th>
<template x-for="colour in colours">
<td>
<button type="button" @click="set_colour(colour, 'fg')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
</td>
</template>
<td>
<button type="button" @click="set_colour('#fff0', 'fg')" class="btn btn-primary" style="">-</button>
</td>
</tr>
<template x-for="colour in colours"> <tr>
<button type="button" @click="set_colour(colour, 'fg')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button> <th>background</th>
</template> <template x-for="colour in colours">
</div> <td>
<div>BG: <button type="button" @click="set_colour(colour, 'bg')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
<button type="button" @click="set_colour('#fff0', 'bg')" class="btn btn-primary" style="">-</button> </td>
<template x-for="colour in colours"> </template>
<button type="button" @click="set_colour(colour, 'bg')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button> <td>
</template> <button type="button" @click="set_colour('#fff0', 'bg')" class="btn btn-primary" style="">-</button>
</div> </td>
<div>ST: </tr>
<button type="button" @click="set_colour('#fff0', 'stroke')" class="btn btn-primary" style="">-</button>
<template x-for="colour in colours"> <tr>
<button type="button" @click="set_colour(colour, 'stroke')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button> <th>outline</th>
</template> <template x-for="colour in colours">
</div> <td>
<button type="button" @click="set_colour(colour, 'stroke')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
</td>
</template>
<td>
<button type="button" @click="set_colour('#fff0', 'stroke')" class="btn btn-primary" style="">-</button>
</td>
</tr>
</table>
</div> </div>
<canvas id="c" width="600" height="600" x-bind:style="canvas_style"></canvas> <canvas id="c" width="600" height="600" x-bind:style="canvas_style"></canvas>