From acfa58dc57cf8942ab1bd444a628c16bfae88c29 Mon Sep 17 00:00:00 2001 From: chrono Date: Sun, 1 Dec 2013 01:51:45 +0100 Subject: [PATCH] Some more editing features --- public/assets/css/picoreflow.css | 20 +- public/assets/css/select2-bootstrap.css | 14 +- public/assets/css/select2.css | 235 +++++++++++++++--------- public/assets/js/picoreflow.js | 95 +++++++--- public/index.html | 40 ++-- storage/profiles/leadfree.json | 2 +- 6 files changed, 263 insertions(+), 143 deletions(-) diff --git a/public/assets/css/picoreflow.css b/public/assets/css/picoreflow.css index 00c7cf3..d2c0666 100644 --- a/public/assets/css/picoreflow.css +++ b/public/assets/css/picoreflow.css @@ -85,15 +85,17 @@ background: #3F3E3A; overflow: hidden; } -.btn-group { - position: relative; -} + .select2-container { position: relative; top: -3px; - width: 200px; - height: 35px; + width: 195px; + height: 34px; +} + +.select2-container .select2-choice { +line-height: 32px; } .progress { @@ -143,9 +145,8 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', end } .select2-container .select2-choice { - height: 30px; - margin-top: 4px; - + height: 34px; + margin-top: 1px; } .alert { @@ -191,3 +192,6 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce3914', end line-height: 1.2em; } +td { + width: 50%; +} diff --git a/public/assets/css/select2-bootstrap.css b/public/assets/css/select2-bootstrap.css index c38afd4..a9918eb 100644 --- a/public/assets/css/select2-bootstrap.css +++ b/public/assets/css/select2-bootstrap.css @@ -48,9 +48,8 @@ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } -.select2-container .select2-choice div, .select2-container .select2-choice .select2-arrow, -.select2-container.select2-container-disabled .select2-choice div, -.select2-container.select2-container-disabled .select2-choice .select2-arrow { +.select2-container .select2-choice div, +.select2-container.select2-container-disabled .select2-choice div { border-left: none; background: none; filter: none; @@ -65,10 +64,9 @@ line-height: 27px; } -.select2-drop.select2-drop-active, .select2-container-active .select2-choice, .select2-container-multi.select2-container-active .select2-choices { - border-color: red; + border-color: rgba(82, 168, 236, 0.8); outline: none; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); @@ -104,9 +102,9 @@ } /** - * This stops the quick flash when a native selectbox is shown and - * then replaced by a select2 input when javascript kicks in. This can be - * removed if javascript is not present + * This stops the quick flash when a native selectbox is shown and + * then replaced by a select2 input when javascript kicks in. This can be + * removed if javascript is not present */ select.select2 { height: 28px; diff --git a/public/assets/css/select2.css b/public/assets/css/select2.css index 2b32ed6..76d32ed 100644 --- a/public/assets/css/select2.css +++ b/public/assets/css/select2.css @@ -1,5 +1,5 @@ /* -Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 +Version: 3.4.1 Timestamp: Thu Jun 27 18:02:10 PDT 2013 */ .select2-container { margin: 0; @@ -14,7 +14,7 @@ Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 .select2-container, .select2-drop, .select2-search, -.select2-search input { +.select2-search input{ /* Force border-box so that % widths fit the parent container without overlap because of margin/padding. @@ -22,7 +22,9 @@ Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 More Info : http://www.quirksmode.org/css/box.html */ -webkit-box-sizing: border-box; /* webkit */ + -khtml-box-sizing: border-box; /* konqueror */ -moz-box-sizing: border-box; /* firefox */ + -ms-box-sizing: border-box; /* ie */ box-sizing: border-box; /* css3 */ } @@ -39,34 +41,45 @@ Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 color: #444; text-decoration: none; - border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; - background-clip: padding-box; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; -webkit-touch-callout: none; -webkit-user-select: none; + -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #fff; - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff)); - background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%); - background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%); + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white)); + background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%); + background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%); + background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%); + background-image: -ms-linear-gradient(top, #ffffff 0%, #eeeeee 50%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0); - background-image: linear-gradient(top, #fff 0%, #eee 50%); + background-image: linear-gradient(top, #ffffff 0%, #eeeeee 50%); } .select2-container.select2-drop-above .select2-choice { border-bottom-color: #aaa; - border-radius: 0 0 4px 4px; + -webkit-border-radius:0 0 4px 4px; + -moz-border-radius:0 0 4px 4px; + border-radius:0 0 4px 4px; - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff)); - background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%); - background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); - background-image: linear-gradient(top, #eee 0%, #fff 90%); + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.9, white)); + background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 90%); + background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 90%); + background-image: -o-linear-gradient(bottom, #eeeeee 0%, white 90%); + background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 90%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); + background-image: linear-gradient(top, #eeeeee 0%,#ffffff 90%); } .select2-container.select2-allowclear .select2-choice .select2-chosen { @@ -80,7 +93,9 @@ Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 white-space: nowrap; - text-overflow: ellipsis; + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; } .select2-container .select2-choice abbr { @@ -109,21 +124,29 @@ Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 cursor: pointer; } +.select2-drop-undermask { + border: 0; + margin: 0; + padding: 0; + position: absolute; + left: 0; + top: 0; + z-index: 9998; + background-color: transparent; + filter: alpha(opacity=0); +} + .select2-drop-mask { border: 0; margin: 0; padding: 0; - position: fixed; + position: absolute; left: 0; top: 0; - min-height: 100%; - min-width: 100%; - height: auto; - width: auto; - opacity: 0; z-index: 9998; /* styles required for IE to work */ background-color: #fff; + opacity: 0; filter: alpha(opacity=0); } @@ -139,9 +162,12 @@ Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 border: 1px solid #aaa; border-top: 0; - border-radius: 0 0 4px 4px; + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); + -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); box-shadow: 0 4px 5px rgba(0, 0, 0, .15); } @@ -159,19 +185,22 @@ Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 border-top: 1px solid #aaa; border-bottom: 0; - border-radius: 4px 4px 0 0; + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); + -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); } .select2-drop-active { - border: 1px solid #5897fb; + border: 1px solid #75890c; border-top: none; } .select2-drop.select2-drop-above.select2-drop-active { - border-top: 1px solid #5897fb; + border-top: 1px solid #75890c; } .select2-container .select2-choice .select2-arrow { @@ -183,16 +212,22 @@ Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 top: 0; border-left: 1px solid #aaa; - border-radius: 0 4px 4px 0; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; - background-clip: padding-box; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; background: #ccc; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee)); background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%); background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%); + background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%); + background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0); - background-image: linear-gradient(top, #ccc 0%, #eee 60%); + background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%); } .select2-container .select2-choice .select2-arrow b { @@ -228,16 +263,21 @@ Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 font-size: 1em; border: 1px solid #aaa; - border-radius: 0; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; -webkit-box-shadow: none; + -moz-box-shadow: none; box-shadow: none; background: #fff url('select2.png') no-repeat 100% -22px; - background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); - background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); - background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); - background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #fff 85%, #eee 99%); + background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%); } .select2-drop.select2-drop-above .select2-search input { @@ -246,47 +286,60 @@ Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 .select2-search input.select2-active { background: #fff url('select2-spinner.gif') no-repeat 100%; - background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); - background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); - background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); - background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #fff 85%, #eee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%); } .select2-container-active .select2-choice, .select2-container-active .select2-choices { - border: 1px solid #5897fb; + border: 1px solid #75890c; outline: none; - -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3); - box-shadow: 0 0 5px rgba(0, 0, 0, .3); + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); + -moz-box-shadow: 0 0 5px rgba(0,0,0,.3); + box-shadow: 0 0 5px rgba(0,0,0,.3); } .select2-dropdown-open .select2-choice { border-bottom-color: transparent; -webkit-box-shadow: 0 1px 0 #fff inset; + -moz-box-shadow: 0 1px 0 #fff inset; box-shadow: 0 1px 0 #fff inset; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-radius-bottomleft: 0; + border-bottom-left-radius: 0; + + -webkit-border-bottom-right-radius: 0; + -moz-border-radius-bottomright: 0; + border-bottom-right-radius: 0; background-color: #eee; - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee)); - background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%); - background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); - background-image: linear-gradient(top, #fff 0%, #eee 50%); + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee)); + background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%); + background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%); + background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%); + background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); + background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%); } .select2-dropdown-open.select2-drop-above .select2-choice, .select2-dropdown-open.select2-drop-above .select2-choices { - border: 1px solid #5897fb; + border: 1px solid #75890c; border-top-color: transparent; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee)); - background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%); - background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); - background-image: linear-gradient(bottom, #fff 0%, #eee 50%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, white), color-stop(0.5, #eeeeee)); + background-image: -webkit-linear-gradient(center top, white 0%, #eeeeee 50%); + background-image: -moz-linear-gradient(center top, white 0%, #eeeeee 50%); + background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%); + background-image: -ms-linear-gradient(bottom, #ffffff 0%,#eeeeee 50%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); + background-image: linear-gradient(bottom, #ffffff 0%,#eeeeee 50%); } .select2-dropdown-open .select2-choice .select2-arrow { @@ -306,7 +359,7 @@ Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 position: relative; overflow-x: hidden; overflow-y: auto; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: rgba(0,0,0,0); } .select2-results ul.select2-result-sub { @@ -341,13 +394,14 @@ Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 -webkit-touch-callout: none; -webkit-user-select: none; + -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .select2-results .select2-highlighted { - background: #3875d7; + background: #75890c; color: #fff; } @@ -361,7 +415,7 @@ Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013 } .select2-results .select2-highlighted ul { - background: #fff; + background: white; color: #000; } @@ -435,10 +489,12 @@ disabled look for disabled choices in the results dropdown overflow: hidden; background-color: #fff; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff)); - background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%); - background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%); - background-image: linear-gradient(top, #eee 1%, #fff 15%); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); + background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%); } .select2-locked { @@ -450,11 +506,12 @@ disabled look for disabled choices in the results dropdown } .select2-container-multi.select2-container-active .select2-choices { - border: 1px solid #5897fb; + border: 1px solid #75890c; outline: none; - -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3); - box-shadow: 0 0 5px rgba(0, 0, 0, .3); + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); + -moz-box-shadow: 0 0 5px rgba(0,0,0,.3); + box-shadow: 0 0 5px rgba(0,0,0,.3); } .select2-container-multi .select2-choices li { float: left; @@ -476,6 +533,7 @@ disabled look for disabled choices in the results dropdown outline: 0; border: 0; -webkit-box-shadow: none; + -moz-box-shadow: none; box-shadow: none; background: transparent !important; } @@ -498,25 +556,33 @@ disabled look for disabled choices in the results dropdown cursor: default; border: 1px solid #aaaaaa; - border-radius: 3px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; - -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); - box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); + -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); + -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); + box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); - background-clip: padding-box; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; -webkit-touch-callout: none; -webkit-user-select: none; + -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #e4e4e4; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0); - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee)); - background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); - background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); - background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0 ); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); + background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); } .select2-container-multi .select2-choices .select2-search-choice .select2-chosen { cursor: default; @@ -550,7 +616,7 @@ disabled look for disabled choices in the results dropdown } /* disabled styles */ -.select2-container-multi.select2-container-disabled .select2-choices { +.select2-container-multi.select2-container-disabled .select2-choices{ background-color: #f4f4f4; background-image: none; border: 1px solid #ddd; @@ -565,7 +631,7 @@ disabled look for disabled choices in the results dropdown } .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { display: none; - background: none; + background:none; } /* end multiselect */ @@ -576,17 +642,16 @@ disabled look for disabled choices in the results dropdown } .select2-offscreen, .select2-offscreen:focus { - clip: rect(0 0 0 0) !important; - width: 1px !important; - height: 1px !important; - border: 0 !important; - margin: 0 !important; - padding: 0 !important; - overflow: hidden !important; - position: absolute !important; - outline: 0 !important; - left: 0px !important; - top: 0px !important; + clip: rect(0 0 0 0); + width: 1px; + height: 1px; + border: 0; + margin: 0; + padding: 0; + overflow: hidden; + position: absolute; + outline: 0; + left: 0px; } .select2-display-none { diff --git a/public/assets/js/picoreflow.js b/public/assets/js/picoreflow.js index 455fb04..9d8c3e5 100644 --- a/public/assets/js/picoreflow.js +++ b/public/assets/js/picoreflow.js @@ -63,10 +63,23 @@ function updateProgress(percentage) } } +function updateProfileTable() +{ + var html = ""; + + for(var i=0; i'; + html += '
'; + } + + $('#profile_table').html(html); +} function runTask() { - var test = + var cmd = { "cmd": "RUN", "profile": profiles[selected_profile] @@ -75,56 +88,84 @@ function runTask() graph.live.data = []; graph.plot = $.plot("#graph_container", [ graph.profile, graph.live ] , getOptions()); - ws_control.send(JSON.stringify(test)); + ws_control.send(JSON.stringify(cmd)); } function abortTask() { - var test = {"cmd": "STOP"}; - ws_control.send(JSON.stringify(test)); + var cmd = {"cmd": "STOP"}; + ws_control.send(JSON.stringify(cmd)); } - -function enterEditMode() { +function enterNewMode() +{ state="EDIT" $('#main_status').slideUp(); - $('#saveas').show(); - $('#e2').select2('container').hide(); - $('#nav_start').hide(); - $('#btn_edit').hide(); - $('#btn_exit').show(); - $('#form_profile_name').attr('value', profiles[selected_profile].name); - + $('#edit').show(); + $('#selectp').hide(); + $('#btn_controls').hide(); + $('#form_profile_name').attr('value', ''); + $('#form_profile_name').attr('placeholder', 'Please enter a name'); graph.profile.points.show = true; graph.profile.draggable = true; graph.plot = $.plot("#graph_container", [ graph.profile, graph.live ], getOptions()); + updateProfileTable(); } -function leaveEditMode() { - state="IDLE"; - $('#saveas').hide(); - $('#e2').select2('container').show(); - $('#main_status').slideDown(); - $('#nav_start').show(); - $('#btn_edit').show(); - $('#btn_exit').hide(); +function enterEditMode() +{ + state="EDIT" + $('#main_status').slideUp(); + $('#edit').show(); + $('#selectp').hide(); + $('#btn_controls').hide(); + $('#form_profile_name').attr('value', profiles[selected_profile].name); + graph.profile.points.show = true; + graph.profile.draggable = true; + graph.plot = $.plot("#graph_container", [ graph.profile, graph.live ], getOptions()); + updateProfileTable(); +} +function leaveEditMode() +{ + state="IDLE"; + $('#edit').hide(); + $('#selectp').show(); + $('#btn_controls').show(); + $('#main_status').slideDown(); + $('#profile_table').slideUp(); graph.profile.points.show = false; graph.profile.draggable = false; graph.plot = $.plot("#graph_container", [ graph.profile, graph.live ], getOptions()); - } -function addNewPoint() { - console.log(graph.profile.data); - - graph.profile.data.push([parseInt(graph.profile.data[graph.profile.data.length-1][0])+15, 25]); +function newPoint() +{ + graph.profile.data.push([parseInt(graph.profile.data[graph.profile.data.length-1][0])+15, Math.floor((Math.random()*230)+25)]); graph.plot = $.plot("#graph_container", [ graph.profile, graph.live ], getOptions()); - console.log(graph.profile.data); + updateProfileTable(); } +function delPoint() +{ + graph.profile.data.splice(-1,1) + graph.plot = $.plot("#graph_container", [ graph.profile, graph.live ], getOptions()); + updateProfileTable(); +} + +function toggleTable() +{ + if($('#profile_table').css('display') == 'none') + { + $('#profile_table').slideDown(); + } + else + { + $('#profile_table').slideUp(); + } +} function saveProfile() { diff --git a/public/index.html b/public/index.html index 014026f..ae220b1 100644 --- a/public/index.html +++ b/public/index.html @@ -49,36 +49,48 @@
-
- Profile Name +
- + +
+
+ + +
- -
+ +
@@ -98,8 +110,8 @@
- - + +
diff --git a/storage/profiles/leadfree.json b/storage/profiles/leadfree.json index 41fd6ea..7952dd8 100644 --- a/storage/profiles/leadfree.json +++ b/storage/profiles/leadfree.json @@ -1 +1 @@ -{"type": "profile", "data": [[0, 20], [71.39490824491047, 115.00000000000001], [218.36275492586998, 183.43750000000003], [300, 0]], "name": "leadfree"} \ No newline at end of file +{"type": "profile", "data": [[0, 20], [71.39490824491047, 115.00000000000001], [209.77995110024452, 248.12734082397003], [300, 0]], "name": "leadfree"} \ No newline at end of file