From 354377f559be17d508bb301b14f088081d190b80 Mon Sep 17 00:00:00 2001 From: Ian Prest Date: Mon, 3 Aug 2015 17:45:53 -0400 Subject: [PATCH] Rejiggered the background-image dropdown & data -- Also auto-calculating the keyboard width --- backgrounds.json | 233 ++++++++++++++++++++++++++--------------------- kb.css | 76 ++++++++-------- kb.html | 153 ++++++++++++++----------------- kb.js | 22 +++-- 4 files changed, 246 insertions(+), 238 deletions(-) diff --git a/backgrounds.json b/backgrounds.json index 2a2d890..f05e7b7 100644 --- a/backgrounds.json +++ b/backgrounds.json @@ -1,107 +1,128 @@ -{"backgrounds" : - { - "wood" : { - "Bamboo" : "bg/wood/bamboo.jpg", - "Bamboo dark" : "bg/wood/bamboo-dark.jpg", - "Birch" : "bg/wood/birch.jpg", - "Birch European white" : "bg/wood/birch-european-white.jpg", - "Birch yellow" : "bg/wood/birch-yellow.jpg", - "Cherry" : "bg/wood/cherry.jpg", - "Chestnut American" : "bg/wood/chestnut-american.jpg", - "Ebony Macassar" : "bg/wood/ebony-macassar.jpg", - "Fir white" : "bg/wood/fir-white.jpg", - "Maple orange" : "bg/wood/maple-orange.jpg", - "Maple yellow" : "bg/wood/maple-yellow.jpg", - "Mahogany African" : "bg/wood/mahogany-african.jpg", - "Mahogany Red" : "bg/wood/Red_Mahogany_Wood.jpg", - "Moringa" : "bg/wood/moringa.jpg", - "Oak" : "bg/wood/oak.jpg", - "Pine Oregon" : "bg/wood/pine-oregon.jpg", - "Sandalwood African" : "bg/wood/sandalwood-african.jpg", - "Teak African" : "bg/wood/teak-african.jpg", - "Teak golden" : "bg/wood/teak-golden.jpg", - "Walnut" : "bg/wood/walnut.jpg" - }, - "metal" : { - "Aluminium brushed" : "bg/metal/aluminum_texture1642.jpg", - "Aluminium brushed black" : "bg/metal/aluminum_texture1644.jpg", - "Aluminium diagonal light" : "bg/metal/aluminum_texture1645.jpg", - "Aluminium brassed" : "bg/metal/aluminum_texture1649.jpg", - "Aluminium pattern" : "bg/metal/aluminum_texture1735.jpg", - "Aluminium brushed wavy" : "bg/metal/aluminum_texture1738.jpg", - "Aluminium diagonal dark" : "bg/metal/aluminum_texture1784.jpg", - "Steel brushed light" : "bg/metal/iron_texture1744.jpg", - "Steel brushed dark" : "bg/metal/iron_texture1745.jpg", - "Steel brushed wavy" : "bg/metal/iron_texture61.jpg", - "Steel brushed horizontal" : "bg/metal/iron_texture66.jpg", - "Titanium wavy" : "bg/metal/titanium_texture1752.jpg" - }, - "leather" : { - "Black" : "bg/leather/black.jpg", - "Black storm" : "bg/leather/leather_texture1051.jpg", - "Camel" : "bg/leather/leather_texture4327.jpg", - "Brown" : "bg/leather/brown.jpg", - "Brown oxblood" : "bg/leather/leather_texture4337.jpg", - "Brown shiny" : "bg/leather/leather_texture404.jpg", - "Brown suede" : "bg/leather/leather_texture4315.jpg", - "Navy" : "bg/leather/leather_texture4326.jpg", - "Orange" : "bg/leather/leather_texture4329.jpg", - "Red fire" : "bg/leather/leather_texture394.jpg", - "White" : "bg/leather/leather_texture4378.jpg" - - }, - "carbonfibre" : { - "Carbon fibre 3" : "bg/carbonfibre/carbon_texture1869.png", - "Carbon fibre 4" : "bg/carbonfibre/carbon_texture1873.png", - "Carbon fibre 2" : "bg/carbonfibre/carbon_texture1874.png", - "Carbon fibre 5" : "bg/carbonfibre/carbon_texture1876.jpg", - "Carbon fibre 7" : "bg/carbonfibre/carbon_texture1877.jpg", - "Carbon fibre 1" : "bg/carbonfibre/carbon_texture1879.png", - "Carbon fibre 6" : "bg/carbonfibre/carbon_texture1882.jpg" - }, - "marble" : { - "Marble beige" : "bg/marble/marble_texture4653.jpg", - "Marble black" : "bg/marble/marble_texture4510.jpg", - "Marble brown" : "bg/marble/marble_texture4512.jpg", - "Marble green" : "bg/marble/marble_texture1809.jpg", - "Marble grey" : "bg/marble/marble_texture4515.jpg", - "Marble navy" : "bg/marble/marble_texture4511.jpg", - "Marble rose" : "bg/marble/marble_texture1820.jpg", - "Marble Prussian blue" : "bg/marble/marble_texture4509.jpg", - "Marble red deep" : "bg/marble/marble_texture4496.jpg", - "Marble violet" : "bg/marble/marble_texture4617.jpg" - }, - "plasticPBTbrown_black" : { - "PBT Black" : "bg/plastic/pbt-black.png", - "PBT UP" : "bg/plastic/pbt-up.png", - "PBT TGJ" : "bg/plastic/pbt-tgj.png", - "PBT TT" : "bg/plastic/pbt-tt.png" - }, - "plasticPBTwhite" : { - "PBT WAN" : "bg/plastic/pbt-wan.png", - "PBT WAS" : "bg/plastic/pbt-was.png", - "PBT WAT" : "bg/plastic/pbt-wat.png", - "PBT WBK" : "bg/plastic/pbt-wbk.png", - "PBT WBR" : "bg/plastic/pbt-wbr.png", - "PBT WCS" : "bg/plastic/pbt-wcs.png", - "PBT WCV" : "bg/plastic/pbt-wcv.png", - "PBT WCX" : "bg/plastic/pbt-wcx.png", - "PBT WDG" : "bg/plastic/pbt-wdg.png", - "PBT WFJ" : "bg/plastic/pbt-wfj.png", - "PBT WFN" : "bg/plastic/pbt-wfn.png" - }, - "plasticABSwhite" : { - "ABS WA" : "bg/plastic/abs-wa.jpg", - "ABS WAR" : "bg/plastic/abs-war.jpg", - "ABS WBO" : "bg/plastic/abs-wbo.jpg", - "ABS WCK" : "bg/plastic/abs-wck.jpg", - "ABS WEA" : "bg/plastic/abs-wea.jpg", - "ABS WFK" : "bg/plastic/abs-wfk.jpg", - "ABS WFM" : "bg/plastic/abs-wfm.jpg", - "ABS WFO" : "bg/plastic/abs-wfo.jpg", - "ABS WQ" : "bg/plastic/abs-wq.jpg", - "ABS WV" : "bg/plastic/abs-wv.jpg", - "ABS WW" : "bg/plastic/abs-ww.jpg" - } +[ + { + "category": "Carbon fibre", "style" : "background: url('/bg/carbonfibre/carbon-slice.jpg'); color: #fff;", + "content" : [ + { "name": "Carbon fibre 1", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1879.png');" }, + { "name": "Carbon fibre 2", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1874.png');" }, + { "name": "Carbon fibre 3", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1869.png');" }, + { "name": "Carbon fibre 4", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1873.png');" }, + { "name": "Carbon fibre 5", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1876.jpg');" }, + { "name": "Carbon fibre 6", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1882.jpg');" }, + { "name": "Carbon fibre 7", "style" : "background-image: url('/bg/carbonfibre/carbon_texture1877.jpg');" } + ] + }, + { + "category": "Leather", "style" : "background: url('/bg/leather/leather-slice.jpg'); color: #fff;", + "content" : [ + { "name": "Black", "style" : "background-image: url('/bg/leather/black.jpg');" }, + { "name": "Black storm", "style" : "background-image: url('/bg/leather/leather_texture1051.jpg');" }, + { "name": "Camel", "style" : "background-image: url('/bg/leather/leather_texture4327.jpg');" }, + { "name": "Brown", "style" : "background-image: url('/bg/leather/brown.jpg');" }, + { "name": "Brown oxblood", "style" : "background-image: url('/bg/leather/leather_texture4337.jpg');" }, + { "name": "Brown shiny", "style" : "background-image: url('/bg/leather/leather_texture404.jpg');" }, + { "name": "Brown suede", "style" : "background-image: url('/bg/leather/leather_texture4315.jpg');" }, + { "name": "Navy", "style" : "background-image: url('/bg/leather/leather_texture4326.jpg');" }, + { "name": "Orange", "style" : "background-image: url('/bg/leather/leather_texture4329.jpg');" }, + { "name": "Red fire", "style" : "background-image: url('/bg/leather/leather_texture394.jpg');" }, + { "name": "White", "style" : "background-image: url('/bg/leather/leather_texture4378.jpg');" } + ] + }, + { + "category": "Marble", "style" : "background: url('/bg/marble/marble-slice.jpg'); color: #fff;", + "content" : [ + { "name": "Marble beige", "style" : "background-image: url('/bg/marble/marble_texture4653.jpg');" }, + { "name": "Marble black", "style" : "background-image: url('/bg/marble/marble_texture4510.jpg');" }, + { "name": "Marble brown", "style" : "background-image: url('/bg/marble/marble_texture4512.jpg');" }, + { "name": "Marble green", "style" : "background-image: url('/bg/marble/marble_texture1809.jpg');" }, + { "name": "Marble grey", "style" : "background-image: url('/bg/marble/marble_texture4515.jpg');" }, + { "name": "Marble navy", "style" : "background-image: url('/bg/marble/marble_texture4511.jpg');" }, + { "name": "Marble rose", "style" : "background-image: url('/bg/marble/marble_texture1820.jpg');" }, + { "name": "Marble Prussian blue", "style" : "background-image: url('/bg/marble/marble_texture4509.jpg');" }, + { "name": "Marble red deep", "style" : "background-image: url('/bg/marble/marble_texture4496.jpg');" }, + { "name": "Marble violet", "style" : "background-image: url('/bg/marble/marble_texture4617.jpg');" } + ] + }, + { + "category": "Metal", "style" : "background: url('/bg/metal/metal-slice.jpg'); color: #fff;", + "content" : [ + { "name": "Aluminium brushed", "style" : "background-image: url('/bg/metal/aluminum_texture1642.jpg');" }, + { "name": "Aluminium brushed black", "style" : "background-image: url('/bg/metal/aluminum_texture1644.jpg');" }, + { "name": "Aluminium diagonal light", "style" : "background-image: url('/bg/metal/aluminum_texture1645.jpg');" }, + { "name": "Aluminium brassed", "style" : "background-image: url('/bg/metal/aluminum_texture1649.jpg');" }, + { "name": "Aluminium pattern", "style" : "background-image: url('/bg/metal/aluminum_texture1735.jpg');" }, + { "name": "Aluminium brushed wavy", "style" : "background-image: url('/bg/metal/aluminum_texture1738.jpg');" }, + { "name": "Aluminium diagonal dark", "style" : "background-image: url('/bg/metal/aluminum_texture1784.jpg');" }, + { "name": "Steel brushed light", "style" : "background-image: url('/bg/metal/iron_texture1744.jpg');" }, + { "name": "Steel brushed dark", "style" : "background-image: url('/bg/metal/iron_texture1745.jpg');" }, + { "name": "Steel brushed wavy", "style" : "background-image: url('/bg/metal/iron_texture61.jpg');" }, + { "name": "Steel brushed horizontal", "style" : "background-image: url('/bg/metal/iron_texture66.jpg');" }, + { "name": "Titanium wavy", "style" : "background-image: url('/bg/metal/titanium_texture1752.jpg');" } + ] + }, + { + "category": "Plastic ABS (whites)", "style" : "background: url('/bg/plastic/plastic-slice.jpg'); color: #000;", + "content" : [ + { "name": "ABS WA", "style" : "background-image: url('/bg/plastic/abs-wa.jpg');" }, + { "name": "ABS WAR", "style" : "background-image: url('/bg/plastic/abs-war.jpg');" }, + { "name": "ABS WBO", "style" : "background-image: url('/bg/plastic/abs-wbo.jpg');" }, + { "name": "ABS WCK", "style" : "background-image: url('/bg/plastic/abs-wck.jpg');" }, + { "name": "ABS WEA", "style" : "background-image: url('/bg/plastic/abs-wea.jpg');" }, + { "name": "ABS WFK", "style" : "background-image: url('/bg/plastic/abs-wfk.jpg');" }, + { "name": "ABS WFM", "style" : "background-image: url('/bg/plastic/abs-wfm.jpg');" }, + { "name": "ABS WFO", "style" : "background-image: url('/bg/plastic/abs-wfo.jpg');" }, + { "name": "ABS WQ", "style" : "background-image: url('/bg/plastic/abs-wq.jpg');" }, + { "name": "ABS WV", "style" : "background-image: url('/bg/plastic/abs-wv.jpg');" }, + { "name": "ABS WW", "style" : "background-image: url('/bg/plastic/abs-ww.jpg');" } + ] + }, + { + "category": "Plastic PBT (browns & blacks)", "style" : "background: url('/bg/plastic/plastic-slice.jpg'); color: #000;", + "content" : [ + { "name": "PBT Black", "style" : "background-image: url('/bg/plastic/pbt-black.png');" }, + { "name": "PBT UP", "style" : "background-image: url('/bg/plastic/pbt-up.png');" }, + { "name": "PBT TGJ", "style" : "background-image: url('/bg/plastic/pbt-tgj.png');" }, + { "name": "PBT TT", "style" : "background-image: url('/bg/plastic/pbt-tt.png');" } + ] + }, + { + "category": "Plastic PBT (whites)", "style" : "background: url('/bg/plastic/plastic-slice.jpg'); color: #000;", + "content" : [ + { "name": "PBT WAN", "style" : "background-image: url('/bg/plastic/pbt-wan.png');" }, + { "name": "PBT WAS", "style" : "background-image: url('/bg/plastic/pbt-was.png');" }, + { "name": "PBT WAT", "style" : "background-image: url('/bg/plastic/pbt-wat.png');" }, + { "name": "PBT WBK", "style" : "background-image: url('/bg/plastic/pbt-wbk.png');" }, + { "name": "PBT WBR", "style" : "background-image: url('/bg/plastic/pbt-wbr.png');" }, + { "name": "PBT WCS", "style" : "background-image: url('/bg/plastic/pbt-wcs.png');" }, + { "name": "PBT WCV", "style" : "background-image: url('/bg/plastic/pbt-wcv.png');" }, + { "name": "PBT WCX", "style" : "background-image: url('/bg/plastic/pbt-wcx.png');" }, + { "name": "PBT WDG", "style" : "background-image: url('/bg/plastic/pbt-wdg.png');" }, + { "name": "PBT WFJ", "style" : "background-image: url('/bg/plastic/pbt-wfj.png');" }, + { "name": "PBT WFN", "style" : "background-image: url('/bg/plastic/pbt-wfn.png');" } + ] + }, + { + "category": "Wood", "style": "background-image: url('/bg/wood/wood-slice.jpg'); color: #000;", + "content" : [ + { "name": "Bamboo", "style" : "background-image: url('/bg/wood/bamboo.jpg');" }, + { "name": "Bamboo dark", "style" : "background-image: url('/bg/wood/bamboo-dark.jpg');" }, + { "name": "Birch", "style" : "background-image: url('/bg/wood/birch.jpg');" }, + { "name": "Birch European white", "style" : "background-image: url('/bg/wood/birch-european-white.jpg');" }, + { "name": "Birch yellow", "style" : "background-image: url('/bg/wood/birch-yellow.jpg');" }, + { "name": "Cherry", "style" : "background-image: url('/bg/wood/cherry.jpg');" }, + { "name": "Chestnut American", "style" : "background-image: url('/bg/wood/chestnut-american.jpg');" }, + { "name": "Ebony Macassar", "style" : "background-image: url('/bg/wood/ebony-macassar.jpg');" }, + { "name": "Fir white", "style" : "background-image: url('/bg/wood/fir-white.jpg');" }, + { "name": "Maple orange", "style" : "background-image: url('/bg/wood/maple-orange.jpg');" }, + { "name": "Maple yellow", "style" : "background-image: url('/bg/wood/maple-yellow.jpg');" }, + { "name": "Mahogany African", "style" : "background-image: url('/bg/wood/mahogany-african.jpg');" }, + { "name": "Mahogany Red", "style" : "background-image: url('/bg/wood/Red_Mahogany_Wood.jpg');" }, + { "name": "Moringa", "style" : "background-image: url('/bg/wood/moringa.jpg');" }, + { "name": "Oak", "style" : "background-image: url('/bg/wood/oak.jpg');" }, + { "name": "Pine Oregon", "style" : "background-image: url('/bg/wood/pine-oregon.jpg');" }, + { "name": "Sandalwood African", "style" : "background-image: url('/bg/wood/sandalwood-african.jpg');" }, + { "name": "Teak African", "style" : "background-image: url('/bg/wood/teak-african.jpg');" }, + { "name": "Teak golden", "style" : "background-image: url('/bg/wood/teak-golden.jpg');" }, + { "name": "Walnut", "style" : "background-image: url('/bg/wood/walnut.jpg');" } + ] } -} \ No newline at end of file +] diff --git a/kb.css b/kb.css index 9a62f27..71417de 100644 --- a/kb.css +++ b/kb.css @@ -46,17 +46,22 @@ html, body { /* The keyboard background */ #keyboard { - padding: 9px; - position: relative; + padding: 4px; + border-radius: 3px; + margin-top: 10px; + margin-bottom: 10px; + border: dashed 1px #ddd; +} +#keyboard #keyboard-bg { + position: inherit; border: solid 1px #ddd; + padding: 9px; + box-sizing: content-box; border-radius: 6px; - background-color: #eee; + min-width: 56px; min-height: 56px; - box-sizing: content-box; - margin-top: 10px; - margin-bottom: 10px; } -#keyboard div { +#keyboard-bg div { position: absolute; border-color: black; box-sizing: border-box; @@ -270,39 +275,32 @@ for i in (1..9) { max-height: 1.25em; } -/* make the background dropdown list headers stand out a bit */ -.bg-dropdown-header { - background-color: #ccc; - font-size: 1.618em; - text-align: center; +/* nested dropdown menu lists; see bootstrap.css */ +.dropdown-menu ul { + list-style: none; + margin: 2px 0 0; + padding: 5px 0; } - -.bg-dropdown-header-wood { - background: url('../bg/wood/wood-slice.jpg'); - color: #000; -} - -.bg-dropdown-header-metal { - background: url('../bg/metal/metal-slice.jpg'); - color: #fff; -} - -.bg-dropdown-header-marble { - background: url('../bg/marble/marble-slice.jpg'); - color: #fff; +.dropdown-menu ul > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 1.42857143; + color: #333; + white-space: nowrap; } - -.bg-dropdown-header-plastic { - background: url('../bg/plastic/plastic-slice.jpg'); - color: #000; +.dropdown-menu ul > li > a:hover, +.dropdown-menu ul > li > a:focus { + color: #262626; + text-decoration: none; + background-color: #f5f5f5; } - -.bg-dropdown-header-leather { - background: url('../bg/leather/leather-slice.jpg'); - color: #fff; +/* button size between sm & xs; meant for inline forms */ +.btn-sm-form, +.btn-group-sm-form > .btn { + padding: 3px 8px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; } - -.bg-dropdown-header-carbon { - background: url('../bg/carbonfibre/carbon-slice.jpg'); - color: #fff; -} \ No newline at end of file diff --git a/kb.html b/kb.html index 5286ef4..c844ff9 100644 --- a/kb.html +++ b/kb.html @@ -182,10 +182,7 @@ Nav Bar / Header -
-
+
+
+
-
- {{keyboard.meta.name}}
{{keyboard.meta.author}} +
+ {{keyboard.meta.name}}
{{keyboard.meta.author}}
{{calcKbHeight()}} @@ -517,8 +516,8 @@ Nav Bar / Header
-
@@ -531,63 +530,47 @@ Nav Bar / Header
- +
- +
+ -
-
-
- - -
- -
- - + +
+
+
+ + +
+
+
+
- - - -
- @@ -608,7 +591,7 @@ Nav Bar / Header + ng-blur="validateMeta('backgroundradii')">
@@ -1067,41 +1050,41 @@ DOT.js Templates {{?}}> - {{? parms.jShaped }} - {{?}} - {{? parms.jShaped }} - {{?}} {{? !key.ghost }} - {{? parms.jShaped && !key.stepped }} - {{?}} - {{? parms.jShaped && !key.stepped }} - {{?}} {{? sizes.profile !== "" }} @@ -1110,7 +1093,7 @@ DOT.js Templates {{ /*much harder to do j-shaped keys in SVG*/ theProfile = '_fill'+parms.index; - var rect = { + var rect = { left: Math.min(parms.innercapx, parms.innercapx2), top: Math.min(parms.innercapy, parms.innercapy2), right: Math.min(parms.innercapx+parms.innercapwidth, parms.innercapx2+parms.innercapwidth2), @@ -1119,24 +1102,24 @@ DOT.js Templates }} {{? sizes.profile==="SA" || sizes.profile==="DSA" }} {{??}} {{?}} - - - {{?}} - {{?}} {{?}} @@ -1144,10 +1127,10 @@ DOT.js Templates