Fonts refactoring and Add Font dialog (#660)

* fonts rework - start

* fonts rework - continue

* fonts rework - fetch google font

* fonts rework - issue fixes

* fonts rework - add fonts to downloaded image

* fonts rework - add methods dialog

* fonts rework - add methods description

* fonts update - move version to 1.661

* fonts - remove unused file
This commit is contained in:
Azgaar 2021-09-09 00:12:45 +03:00 committed by GitHub
parent 50dc5e3465
commit fe330ede3a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 394 additions and 415 deletions

View file

@ -666,8 +666,7 @@
<td>Font</td>
<td>
<select id="styleSelectFont"></select>
<input id="styleInputFont" data-tip="Provide a link to @font-face declaration or type Google font name" type="text" placeholder="link to @font-face">
<button id="styleFontAdd" data-tip="Add custom font from the web" class="icon-plus styleButton"></button>
<button id="styleFontAdd" data-tip="Add a font" class="icon-plus styleButton"></button>
</td>
</tr>
</tbody>
@ -3346,6 +3345,22 @@
</div>
</div>
<div id="addFontDialog" style="display: none" class="dialog">
<span>There are 3 ways to add a custom font:</span>
<p><strong>Google font</strong>. Open <a href="https://fonts.google.com/" target="_blank">Google Fonts</a>, find a font you like and enter its name to the field below.</p>
<p><strong>Local font</strong>. If you have a font <a href="https://faqs.skillcrush.com/article/275-downloading-installing-a-font-on-your-computer" target="_blank">installed on your computer</a>, just provide the font name. Make sure the browser is reloaded after the installation. The font won't work on machines not having it installed. Good source of fonts are <a href="https://fontesk.com" target="_blank">Fontdesk</a> and <a href="https://www.dafont.com" target="_blank">DaFont</a>.</p>
<p><strong>Font URL</strong>. Provide font name and link to the font file hosted online. The best free font hostings are <a href="https://fonts.google.com/" target="_blank">Google Fonts</a> and <a target="_blank" href="https://www.cdnfonts.com">CDN Fonts</a>. To get font file open the link to css provided by these services and manually copy the link to <code>woff2</code>.</p>
<div style="margin-top: .3em" data-tip="Select font adding method">
<select id="addFontMethod">
<option value="googleFont" selected>Google font</option>
<option value="localFont">Local font</option>
<option value="fontURL" selected>Font URL</option>
</select>
<input id="addFontNameInput" placeholder="font family" style="width:15em">
<input id="addFontURLInput" placeholder="font file URL" style="width:22.6em; margin-top:.1em">
</div>
</div>
<div id="cellInfo" style="display: none" class="dialog stable">
<p><b>Cell:</b> <span id="infoCell"></span> <b>X:</b> <span id="infoX"></span> <b>Y:</b> <span id="infoY"></span></p>
<p><b>Latitude:</b> <span id="infoLat"></span></p>