v/Cat-Printer
1
0
Fork 0
mirror of https://github.com/NaitLee/Cat-Printer.git synced 2025-05-18 00:00:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

+ Implemented preview of text style within the "insert text" dialog

Browse Source
This commit is contained in:
Sync1211 2022-05-24 08:24:36 +02:00
parent e163c5739f
commit 0608d87cf6
No known key found for this signature in database
GPG Key ID: B8878699435E69EC
4 changed files with 24 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
www/index.html
View File

@ -178,31 +178,22 @@
</div> </div>
<div id="text-input"> <div id="text-input">
<h1 data-i18n="insert-text">Insert Text</h1> <h1 data-i18n="insert-text">Insert Text</h1>
<span> <div style="display:flex; flex-direction: column;">
<div id="text-textarea">
<textarea id="insert-text-area"></textarea>
</div>
<div id="text-settings"> <div id="text-settings">
<label data-i18n="text-font">Font</label> <select id="text-font" style="margin: 0px; margin-left: 0px; margin-left: 10px;">
<select id="text-font">
<option value="Serif">Serif</option> <option value="Serif">Serif</option>
<option value="Sans-serif" selected>Sans-serif</option> <option value="Sans-serif" selected>Sans-serif</option>
<option value="monospace">Monospace</option> <option value="monospace">Monospace</option>
<option value="cursive">Cursive</option> <option value="cursive">Cursive</option>
</select> </select>
<br> <input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key style="margin: 0px;"/>
<label> <label data-i18n="wrap-by-space"><input type="checkbox" name="wrap-by-space" data-key checked />Wrap text</label>
<span data-i18n="text-size-">Size:</span> </div>
<input id="text-size" type="number" name="text-size" min="1" max="100" value="20" data-key /> <div id="text-textarea">
<span>px</span> <textarea id="insert-text-area"></textarea>
</label> </div>
<br>
<input type="checkbox" name="wrap-by-space" data-key checked />
<span data-i18n="wrap-by-space">Wrap text</span>
</label>
</div> </div>
</span>
</div> </div>
<iframe id="frame" src="about:blank" name="frame" title="frame" data-key="v"></iframe> <iframe id="frame" src="about:blank" name="frame" title="frame" data-key="v"></iframe>
</div> </div>

4
www/lang/de-DE.json
View File

@ -105,7 +105,7 @@
"welcome": "Welcome!", "welcome": "Welcome!",
"some-rights-reserved": "Einige Rechte sind vorbehalten.", "some-rights-reserved": "Einige Rechte sind vorbehalten.",
"text-font": "Schriftart", "text-font": "Schriftart",
"text-size": "Größe", "text-size": "Textgröße",
"enter-text": "Text eingeben", "enter-text": "Text eingeben",
"wrap-by-space": "autom. Zeilenumbruch" "wrap-by-space": "Autom. Zeilenumbruch"
} }

10
www/main.css
View File

@ -660,12 +660,4 @@ body.high-contrast #control-overlay { background-color: var(--shade); }
font-family: 'Unifont'; font-family: 'Unifont';
src: local('Unifont') url('unifont.ttf') url('unifont.otf'); src: local('Unifont') url('unifont.ttf') url('unifont.otf');
} }
#insert-text-area { white-space: pre; height: 50vh; } #insert-text-area { white-space: pre; height: 50vh; width: var(--paper-width); overflow: hidden auto; white-space: pre-line;}
#text-textarea { display: inline-grid;position: relative;margin: auto 0; }
#text-settings {
display: inline-block;
vertical-align: top;
margin: auto;
position: absolute;
padding: 0px 0px 0px 10px;
}

9
www/main.js
View File

@ -320,9 +320,16 @@ class CanvasController {
return prevent_default(event); return prevent_default(event);
}); });
this.textArea.style["font-size"] = this.textSize.value + "px";
this.textArea.style["font-family"] = this.textFont.value;
this.textArea.style["word-break"] = this.wrapBySpace.checked ? "break-word" : "break-all";
putEvent('input[name="algo"]', 'change', (event) => this.useAlgorithm(event.currentTarget.value), this); putEvent('input[name="algo"]', 'change', (event) => this.useAlgorithm(event.currentTarget.value), this);
putEvent('#insert-picture' , 'click', () => this.insertPicture(), this); putEvent('#insert-picture' , 'click', () => this.insertPicture(), this);
putEvent('#insert-text' , 'click', () => Dialog.alert("#text-input", () => this.insertText(this.textArea.value))); //Dialog.prompt(i18n('enter-text'), (text) => this.insertText(text), true), this); putEvent('#insert-text' , 'click', () => Dialog.alert("#text-input", () => this.insertText(this.textArea.value)));
putEvent('#text-size' , 'change', () => this.textArea.style["font-size"] = this.textSize.value + "px");
putEvent('#text-font' , 'change', () => this.textArea.style["font-family"] = this.textFont.value);
putEvent('input[name="wrap-by-space"]' , 'change', () => this.textArea.style["word-break"] = this.wrapBySpace.checked ? "break-word" : "break-all"); //TODO: refresh on startup
putEvent('#button-preview' , 'click', this.activatePreview , this); putEvent('#button-preview' , 'click', this.activatePreview , this);
putEvent('#button-reset' , 'click', this.reset , this); putEvent('#button-reset' , 'click', this.reset , this);
putEvent('#canvas-expand' , 'click', this.expand , this); putEvent('#canvas-expand' , 'click', this.expand , this);