ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

colour icons

Browse Source
This commit is contained in:
ntr 2019-04-09 17:47:24 +10:00
parent 9b1b8c698b
commit 2bd59262eb
5 changed files with 77 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/assets/icons/colour.svg Normal file
View File

@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="1.375in" height="0.555556in"
viewBox="0 0 99 40">
<path id="Unnamed"
fill="none" stroke="black" stroke-width="1"
d="M 21.18,19.55
C 21.18,19.55 78.55,19.55 78.55,19.55M 85.00,14.00
C 85.00,14.00 85.00,25.00 85.00,25.00
85.00,25.00 15.00,25.00 15.00,25.00
15.00,25.00 15.00,14.00 15.00,14.00
15.00,14.00 85.00,14.00 85.00,14.00 Z
M 85.00,14.00
C 85.00,14.00 85.00,25.00 85.00,25.00
85.00,25.00 15.00,25.00 15.00,25.00
15.00,25.00 15.00,14.00 15.00,14.00
15.00,14.00 85.00,14.00 85.00,14.00 Z
M 95.00,4.00
C 95.00,4.00 95.00,35.00 95.00,35.00
95.00,35.00 4.00,35.00 4.00,35.00
4.00,35.00 4.00,4.00 4.00,4.00
4.00,4.00 95.00,4.00 95.00,4.00 Z
M 90.00,9.00
C 90.00,9.00 90.00,30.00 90.00,30.00
90.00,30.00 9.00,30.00 9.00,30.00
9.00,30.00 9.00,9.00 9.00,9.00
9.00,9.00 90.00,9.00 90.00,9.00 Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

6
client/cryps.css
View File

@ -411,6 +411,12 @@ header {
color: black; color: black;
} }
.vbox-table td svg {
stroke-width: 1.5px;
height: 95%;
vertical-align: text-bottom;
}
.spacer { .spacer {
flex: 1 0 25%; flex: 1 0 25%;
} }

2
client/src/components/shapes.jsx
View File

@ -6,6 +6,7 @@ const saw = require('./svgs/saw');
const square = require('./svgs/square'); const square = require('./svgs/square');
const squircle = require('./svgs/squircle'); const squircle = require('./svgs/squircle');
const triangle = require('./svgs/triangle'); const triangle = require('./svgs/triangle');
const vboxColour = require('./svgs/colour');
module.exports = { module.exports = {
circle, circle,
@ -16,4 +17,5 @@ module.exports = {
squircle, squircle,
triangle, triangle,
saw, saw,
vboxColour,
}; };

31
client/src/components/svgs/colour.jsx Normal file
View File

@ -0,0 +1,31 @@
const preact = require('preact');
module.exports = function triangle(classes) {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40" className={classes} >
<path id="Unnamed"
fill="none" strokeWidth="1px"
d="M 21.18,19.55
C 21.18,19.55 78.55,19.55 78.55,19.55M 85.00,14.00
C 85.00,14.00 85.00,25.00 85.00,25.00
85.00,25.00 15.00,25.00 15.00,25.00
15.00,25.00 15.00,14.00 15.00,14.00
15.00,14.00 85.00,14.00 85.00,14.00 Z
M 85.00,14.00
C 85.00,14.00 85.00,25.00 85.00,25.00
85.00,25.00 15.00,25.00 15.00,25.00
15.00,25.00 15.00,14.00 15.00,14.00
15.00,14.00 85.00,14.00 85.00,14.00 Z
M 95.00,4.00
C 95.00,4.00 95.00,35.00 95.00,35.00
95.00,35.00 4.00,35.00 4.00,35.00
4.00,35.00 4.00,4.00 4.00,4.00
4.00,4.00 95.00,4.00 95.00,4.00 Z
M 90.00,9.00
C 90.00,9.00 90.00,30.00 90.00,30.00
90.00,30.00 9.00,30.00 9.00,30.00
9.00,30.00 9.00,9.00 9.00,9.00
9.00,9.00 90.00,9.00 90.00,9.00 Z" />
</svg>
);
}

7
client/src/components/vbox.component.jsx
View File

@ -1,7 +1,14 @@
const preact = require('preact'); const preact = require('preact');
const range = require('lodash/range'); const range = require('lodash/range');
const shapes = require('./shapes');
function convertVar(v) { function convertVar(v) {
if (['Red', 'Green', 'Blue'].includes(v)) {
return (
shapes.vboxColour(v.toLowerCase())
);
}
return v || <span>&nbsp;</span>; return v || <span>&nbsp;</span>;
// uncomment for double borders in vbox; // uncomment for double borders in vbox;
// if (v) { // if (v) {