Skip to content

Commit 9e0284e

Browse files
author
gilphilbert
committed
start of design
1 parent 3b53f94 commit 9e0284e

File tree

11 files changed

+180
-195
lines changed

11 files changed

+180
-195
lines changed

Diff for: TODO.md

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
# Preview
2-
* Background colors
32
* Fonts
4-
* Caps
5-
* Quotes
63

74
# New record
85
* Alter style for record needs to hide?
96
* Shouldn't be able to change colors, etc. for christmas themes (won't do anything when printing)
10-
* Trim width and center
7+
* Headers and footers (correct buttons)
118

129
# Design
13-
* Everything
10+
* Populate from database
11+
* Save to database
1412

1513
# Inport/Export
1614
* Everything

Diff for: public/juke.css

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
/*! bulma.io v0.7.5 | MIT License | github.com/jgthms/bulma */
2+
3+
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;600&display=swap');
4+
25
@keyframes spinAround {
36
from {
47
transform: rotate(0deg); }
@@ -284,7 +287,8 @@ button,
284287
input,
285288
select,
286289
textarea {
287-
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; }
290+
/*font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; }*/
291+
font-family: 'Lexend', sans-serif;}
288292

289293
code,
290294
pre {
@@ -338,7 +342,7 @@ span {
338342

339343
strong {
340344
color: #363636;
341-
font-weight: 700; }
345+
font-weight: 600; } /*700*/
342346

343347
fieldset {
344348
border: none; }

Diff for: src/App.vue

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<NavBar @print="print"/>
2+
<NavBar @print="print" @design="this.designVisible = true" />
33
<section class="section">
44
<div class="container">
55
<!--<router-link to="new" class="button is-primary">+ Add Record</router-link>-->
@@ -41,19 +41,22 @@
4141
</section>
4242
<NewRecord :visible="newVisible" @close="closeNewRecord" :editId="recordToEdit"></NewRecord>
4343
<DeleteRecord :visible="deleteVisible" :recordid="recordToDelete" @close="closeDeleteRecord"></DeleteRecord>
44+
<DesignSettings :visible="designVisible" @close="closeDesignSettings"></DesignSettings>
4445
</template>
4546

4647
<script>
4748
import NavBar from './components/NavBar.vue'
4849
import NewRecord from './views/NewRecord.vue'
4950
import DeleteRecord from './views/DeleteRecord.vue'
51+
import DesignSettings from './views/DesignSettings.vue'
5052
5153
export default {
5254
name: 'App',
5355
components: {
5456
NavBar,
5557
NewRecord,
56-
DeleteRecord
58+
DeleteRecord,
59+
DesignSettings
5760
},
5861
inject: [ '$styles', '$database', '$printer' ],
5962
data: () => {
@@ -63,6 +66,7 @@ export default {
6366
deleteVisible: false,
6467
recordToDelete: null,
6568
recordToEdit: null,
69+
designVisible: false
6670
}
6771
},
6872
created: function () {
@@ -96,6 +100,9 @@ export default {
96100
this.recordToDelete = null
97101
this.deleteVisible = false
98102
},
103+
closeDesignSettings: function () {
104+
this.designVisible = false
105+
},
99106
print: function() {
100107
let ttp = []
101108
ttp = this.titles.filter((title) => {

Diff for: src/assets/StyleDefines.json

+3
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
},
4545
"fonts": {
4646
"retro": {
47+
"font": "retro",
4748
"name": "Retro",
4849
"titleSize": 10,
4950
"artistSize": 9,
@@ -54,6 +55,7 @@
5455
}
5556
},
5657
"retrocondensed": {
58+
"font": "retrocondensed",
5759
"name": "RetroCondensed",
5860
"titleSize": 10,
5961
"artistSize": 9,
@@ -63,6 +65,7 @@
6365
"bside": [0.1,4]}
6466
},
6567
"atypewriter":{
68+
"font": "atypewriter",
6669
"name":"ATypewriter",
6770
"titleSize":8.7,
6871
"artistSize":8,

Diff for: src/assets/database.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ let Database = {
1717
allCaps: true,
1818
quotes: true,
1919
primaryColor: 'red',
20-
artistFillColor: false,
21-
titleFillColor: false,
20+
shadeArtist: false,
21+
shadeTitle: false,
2222
font: 'retro',
2323
style: 'arrows',
2424
paperType: 'letter',

Diff for: src/assets/printer.js

+5-142
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,6 @@ function shadeColor2(color, percent) {
2020
return "#"+(0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
2121
}
2222

23-
//function trimArray(arr) {
24-
// for(let i=0; i < arr.length; i++)
25-
// arr[i] = arr[i].trim();
26-
// return arr;
27-
//}
28-
2923

3024
let Printer = {
3125
init: (db) => {
@@ -54,8 +48,6 @@ let Printer = {
5448
Printer.printBackgrounds(dd)
5549
}
5650

57-
console.log(dd)
58-
5951
pdfMake.createPdf(dd).open()
6052

6153
},
@@ -445,15 +437,14 @@ let Printer = {
445437
context.textBaseline = 'middle';
446438

447439
let _width = context.measureText(str).width
448-
console.log(_width)
449440

450441
if (_width > (225 - (style.margins * 2))) {
451442
var _splitPoint = 0
452443
let _words = str.split(" ")
453444

454445
// if we're breaking strings, look for a natural breaking point
455446
if (str.indexOf('(') > -1) {
456-
const chrToLookFor = (str.startsWith('(') ? ')' : '(')
447+
const chrToLookFor = (str.startsWith('(') || str.slice(1, 2) === '(' ? ')' : '(')
457448
for (let i = 0; i < _words.length; i++) {
458449
if (_words[i].indexOf(chrToLookFor) > -1) {
459450
_splitPoint = i
@@ -516,13 +507,13 @@ let Printer = {
516507

517508
//copy the style definitions from either the default or the override
518509
if (Object.keys(title).includes('styleOverride')) {
519-
for (let key of ['style', 'primaryColor', 'titleFillColor', 'artistFillColor']) {
510+
for (let key of ['style', 'primaryColor', 'shadeTitle', 'shadeArtist']) {
520511
formattedTitle[key] = title.styleOverride[key]
521512
}
522513
font = StyleDefines.fonts[title.styleOverride.font]
523514
style = StyleDefines.styles[title.styleOverride.style]
524515
} else {
525-
for (let key of ['style', 'primaryColor', 'titleFillColor', 'artistFillColor']) {
516+
for (let key of ['style', 'primaryColor', 'shadeTitle', 'shadeArtist']) {
526517
formattedTitle[key] = jsmeta.options[key]
527518
}
528519
font = StyleDefines.fonts[jsmeta.options.font]
@@ -541,13 +532,13 @@ let Printer = {
541532

542533
//provide the correct shades for fills
543534

544-
if (formattedTitle.titleFillColor === true) {
535+
if (formattedTitle.shadeTitle === true) {
545536
formattedTitle.titleTint=shadeColor2(StyleDefines.colors[formattedTitle.primaryColor].primary, 0.8)
546537
} else {
547538
formattedTitle.titleTint='#ffffff'
548539
}
549540

550-
if (formattedTitle.artistFillColor === true) {
541+
if (formattedTitle.shadeArtist === true) {
551542
formattedTitle.artistTint=shadeColor2(StyleDefines.colors[formattedTitle.primaryColor].primary, 0.8)
552543
} else {
553544
formattedTitle.artistTint='#ffffff'
@@ -561,141 +552,13 @@ let Printer = {
561552
bside: font.margins.bside[((formattedTitle.bwrap)?0:1)]
562553
}
563554

564-
console.log(formattedTitle)
565555
//add the title to
566556
formattedTitles.push(formattedTitle)
567557
}
568558

569559
//return the formatted titles
570560
return formattedTitles
571561

572-
/*
573-
'primaryColor','font','allCaps','quotes','titleFillColor','artistFillColor'
574-
*/
575-
576-
/*
577-
var textSizer=document.body.appendChild(crel('span'));//,{'style':'font-family:Arial;font-size:10.5pt;font-weight:bold','id':'text-sizer'}));
578-
var toArray=false;
579-
if(!Array.isArray(titles)) {
580-
titles=[titles];
581-
toArray=true;
582-
}
583-
titles.forEach(function(e){
584-
e.style=Printer.getStyle(((e.style)?e.style:false));
585-
586-
let k=['primaryColor','font','allCaps','quotes','titleFillColor','artistFillColor'];
587-
let ek = Object.keys(e)
588-
k.forEach(function(key){
589-
if(ek.includes(key)) {
590-
e.style[key]=e[key];
591-
}
592-
delete(e[key]);
593-
});
594-
e.style.font=titleCreator.getFont(((e.font)?e.font:database.options.get('font')));
595-
596-
if (e.style.titleFillColor === true) {
597-
e.style.titleTint=shadeColor2(e.style.primaryColor, 0.8)
598-
} else {
599-
e.style.titleTint='#ffffff'
600-
}
601-
602-
if (e.style.artistFillColor === true) {
603-
e.style.artistTint=shadeColor2(e.style.primaryColor, 0.8)
604-
} else {
605-
e.style.artistTint='#ffffff'
606-
}
607-
608-
var awrap=false,bwrap=false;
609-
if(e.allCaps || (e.allCaps==null && e.style.allCaps)) {
610-
e.aside=e.aside.toUpperCase();
611-
e.bside=e.bside.toUpperCase();
612-
e.artist=e.artist.toUpperCase();
613-
e.artistb=e.artistb.toUpperCase();
614-
}
615-
textSizer.style.fontFamily=e.style.font.name;
616-
617-
var sq=((e.quotes || (e.quotes==null && e.style.quotes))?true:false);
618-
619-
//if there's no "/" and there are parethases that are not at the start and end of the entire string
620-
if(e.aside.indexOf('/')==-1 && (e.aside.indexOf('(')>=0 || e.aside.indexOf(')')>=0) && !(e.aside.indexOf('(')==0 && e.aside.indexOf(')')==e.aside.length-1)) {
621-
//split based on the parenthases
622-
var x;
623-
if(e.aside.indexOf(')')==e.aside.length-1) {
624-
x=trimArray(e.aside.split("("));
625-
if(sq)
626-
x[0]='"'+x[0]+'"';
627-
x=x.join("\n(");
628-
} else {
629-
x=trimArray(e.aside.split(")"));
630-
if(sq)
631-
x[1]='"'+x[1]+'"';
632-
x=x.join(")\n");
633-
}
634-
textSizer.innerHTML=x.replace('\n','<br>');
635-
let w = textSizer.offsetWidth;
636-
if(w <= e.style.maxwidth) //if the name is too long (with the break around parenthases) then ignore the break (best chance of getting it in two lines)
637-
e.aside = x;
638-
awrap=true;
639-
} else {
640-
//if there's a "/""
641-
if(e.aside.indexOf('/')>=1) {
642-
var xa = trimArray(e.aside.split('/'));
643-
if(sq)
644-
for(let i=0; i < xa.length; i++) xa[i]='"'+xa[i]+'"';
645-
e.aside=xa.join("\n");
646-
awrap=true;
647-
} else {
648-
//just a single line of text
649-
650-
textSizer.innerHTML=e.aside;
651-
let w = textSizer.offsetWidth;
652-
if(w > e.style.maxwidth) awrap = true;
653-
if(sq) e.aside='"'+e.aside+'"';
654-
}
655-
}
656-
657-
if(e.bside.indexOf('/')==-1 && (e.bside.indexOf('(')>=0 || e.bside.indexOf(')')>=0) && !(e.bside.indexOf('(')==0 && e.bside.indexOf(')')==e.bside.length-1)) {
658-
var xb;
659-
if(e.bside.indexOf(')')==e.bside.length-1) {
660-
xb = trimArray(e.bside.split("("));
661-
if(sq)
662-
xb[0]='"'+xb[0]+'"';
663-
xb=xb.join("\n(");
664-
} else {
665-
xb=trimArray(e.bside.split(")"));
666-
if(sq)
667-
xb[1]='"'+xb[1]+'"';
668-
xb=xb.join(")\n");
669-
}
670-
textSizer.innerHTML=xb.replace('\n','<br>');
671-
let w = textSizer.offsetWidth;
672-
if(w <= e.style.maxwidth) //if the name is too long (with the break around parenthases) then ignore the break (best chance of getting it in two lines)
673-
e.bside = xb;
674-
bwrap = true;
675-
} else {
676-
if(e.bside.indexOf('/')>=1) {
677-
var xc = trimArray(e.bside.split('/'));
678-
if(sq)
679-
for(let i=0; i < xc.length; i++) xc[i]='"'+xc[i]+'"';
680-
e.bside=xc.join("\n");
681-
bwrap = true;
682-
} else {
683-
textSizer.innerText = e.bside;
684-
let w = textSizer.offsetWidth;
685-
if(w > e.style.maxwidth) bwrap = true;
686-
if(sq) e.bside = '"' + e.bside + '"';
687-
}
688-
}
689-
e.style.font.margins={
690-
aside:e.style.font.margins.aside[((awrap)?0:1)],
691-
artist:e.style.font.margins.artist[0],
692-
bside:e.style.font.margins.bside[((bwrap)?0:1)]
693-
}
694-
});
695-
textSizer.parentNode.removeChild(textSizer);
696-
697-
if(toArray) titles=titles[0];
698-
*/
699562
}
700563
}
701564

0 commit comments

Comments
 (0)