@flourish/controls - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

package.json

 {
   "name": "@flourish/controls",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Switchable dropdown/buttons/slider control",
@@ -5,0 +5,0 @@ "main": "controls.js",

src/controls/slider.js

@@ -123,3 +123,4 @@ import Slider from "@flourish/slider";
 			if (handle_col !== props.slider_handle_colour){
-				handle_col = props.slider_handle_colour
+				slider.update(); //Make sure slider-handle actually exists before changing its colour
+				handle_col = props.slider_handle_colour;
 				slider_holder.select(".slider-handle").style("fill", handle_col);
@@ -126,0 +127,0 @@ play_string = createPlayButton(handle_col);

src/core/css.js

@@ -1,2 +0,2 @@
-var css_string = ".controls-container,.controls-container *{box-sizing:border-box}.button-container .button,.dropdown .current{overflow:hidden;text-overflow:ellipsis;height:100%;white-space:nowrap}.button-container .button,.dropdown .current,.dropdown .list .list-item{white-space:nowrap}.slider,.slider-play{pointer-events:all;vertical-align:bottom}.button{display:inline-block;cursor:pointer}.button:hover{opacity:.5}.button.selected,.button.selected:hover{color:#fff;cursor:default;opacity:1;background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1))}.button-container{pointer-events:all;width:auto;line-height:0;margin-bottom:20px}.button-container.button-group{display:table;border:1px solid #ccc;width:100%;table-layout:fixed;border-radius:3px}.button-container .button{font-size:12px;border:1px solid #ccc;background:#fff;padding:2px 8px;color:#333;font-weight:400;text-align:center;line-height:18px;height:24px;border-radius:3px;margin:1px}.button-container.button-group .button{border:none;border-left:1px solid rgba(0,0,0,.5);border-radius:0;display:table-cell;text-align:center}.button-container.button-group .button:first-child{border-radius:3px 0 0 3px}.button-container.button-group .button:last-child{border-radius:0 3px 3px 0}.button-container .button:hover{background:#eee;opacity:.8}.button-container.button-group .button:first-child{border:none}.button-container .button.selected,.button-container .button.selected:hover{opacity:1;background:#ececec;color:#333}.dropdown{pointer-events:all;display:inline-table;color:#333;font-weight:400;font-size:16px;position:relative}.dropdown .heading{margin-bottom:.4em;font-weight:300}.dropdown .main{background:#fff;padding:0 60px 0 6px;cursor:pointer;position:relative;border:1px solid #ccc;border-radius:3px;height:30px;line-height:26px}.dropdown .list,.dropdown .symbol{position:absolute}.dropdown .current{width:100%;display:inline-block;font-size:14px}.dropdown .symbol{width:30px;height:100%;right:0;top:0;background:80% 40% no-repeat;background-size:auto 50%;display:inline-block}.dropdown .list{top:100%;left:-1px;min-width:calc(100% + 2px);background:rgba(255,255,255,1);padding:0 2px;text-align:left;display:none;line-height:1.4em;max-height:160px;overflow-y:scroll;color:#333;box-shadow:0 1px 2px rgba(0,0,0,.2)}.dropdown .list .list-item{font-size:14px;height:24px;padding:0 5px}.dropdown .list .list-item:hover{cursor:pointer;background:#eee}.dropdown.open .list{display:block;z-index:1}.dropdown .list .list-item.selected,.dropdown .list .list-item.selected:hover{color:#57c1fc;cursor:default;opacity:1}.dropdown .list .list-item.header,.dropdown .list .list-item.header:hover{font-size:.66em;letter-spacing:1px;text-transform:uppercase;color:#888;opacity:1;cursor:default;font-weight:300;margin-top:.5em}.dropdown .list .list-item.header:first-child{margin-top:0}.controls-container .dropdown{margin:0 0 1.5em}.controls-container .dropdown .heading{color:#333}.slider-holder{margin-bottom:20px}.slider-play{width:24px;height:24px;background-repeat:no-repeat;background-size:100% 100%;background-position:center;cursor:pointer;display:none;margin-right:2px}@media(min-width:520px){.slider-play{width:30px;height:30px}}.slider,.slider-holder.animatable .slider-play{display:inline-block}.slider-play:hover{opacity:.7}.slider{height:46px;width:100%;bottom:0}.slider-holder.animatable .slider{width:calc(100% - 37px)}.slider-holder.playing .slider{pointer-events:none}.slider circle{fill:#57c1fc}.slider .tick line{stroke:#333}.slider text{fill:#333}.slider .slider-end-labels{font-size:11px;fill:#9e9e9e}";
+var css_string = ".controls-container {display: inline-block; } .controls-container, .controls-container * {box-sizing: border-box; text-align: left; vertical-align: bottom; } .button-container .button, .dropdown .current {overflow: hidden; text-overflow: ellipsis; height: 100%; white-space: nowrap; text-align: left; font-size: 12px; line-height: 21px; } .button-container .button, .dropdown .current, .dropdown .list .list-item {white-space: nowrap; } .slider, .slider-play {pointer-events: all; vertical-align: bottom } .button {display: inline-block; cursor: pointer } .button:hover {opacity: .5 } .button.selected, .button.selected:hover {color: #fff; cursor: default; opacity: 1; background-image: linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1)) } .button-container {pointer-events: all; width: auto; line-height: 0; margin-bottom: 18px; width: 100%; text-align: center; } .button-container.button-group {display: table; border: 1px solid #ccc; width: 100%; table-layout: fixed; border-radius: 3px; margin-bottom: 20px; } .button-container .button {font-size: 12px; border: 1px solid #ccc; background: #fff; padding: 0 8px; color: #333; font-weight: 400; text-align: center; height: 24px; border-radius: 3px; margin: 0 1px 2px; } .button-container.button-group .button {border: none; border-left: 1px solid #ccc; border-radius: 0; display: table-cell; text-align: center; vertical-align: middle; margin: 0; height: 22px; } .button-container.button-group .button:first-child {border-radius: 3px 0 0 3px } .button-container.button-group .button:last-child {border-radius: 0 3px 3px 0 } .button-container .button:hover {background: #eee; opacity: .8 } .button-container.button-group .button:first-child {border: none } .button-container .button.selected, .button-container .button.selected:hover {opacity: 1; background: #ececec; color: #333 } .dropdown {pointer-events: all; display: inline-table; color: #333; font-weight: 400; font-size: 16px; position: relative } .dropdown .heading {margin-bottom: .4em; font-weight: 300 } .dropdown .main {background: #fff; padding: 0 60px 0 6px; cursor: pointer; position: relative; border: 1px solid #ccc; border-radius: 3px; height: 24px; line-height: 26px } .dropdown .list, .dropdown .symbol {position: absolute } .dropdown .current {width: 100%; display: inline-block; vertical-align: top; } .dropdown .symbol {width: 30px; height: 100%; right: 0; top: 0; background: 80% 40% no-repeat; background-size: auto 50%; display: inline-block } .dropdown .list {top: 100%; left: -1px; min-width: calc(100% + 2px); background: rgba(255, 255, 255, 1); padding: 0 2px; text-align: left; display: none; line-height: 1.4em; max-height: 160px; overflow-y: scroll; color: #333; box-shadow: 0 1px 2px rgba(0, 0, 0, .2) } .dropdown .list .list-item {font-size: 12px; height: 24px; padding: 0 5px } .dropdown .list .list-item:hover {cursor: pointer; background: #eee } .dropdown.open .list {display: block; z-index: 1 } .dropdown .list .list-item.selected, .dropdown .list .list-item.selected:hover {color: #57c1fc; cursor: default; opacity: 1 } .dropdown .list .list-item.header, .dropdown .list .list-item.header:hover {font-size: .66em; letter-spacing: 1px; text-transform: uppercase; color: #888; opacity: 1; cursor: default; font-weight: 300; margin-top: .5em } .dropdown .list .list-item.header:first-child {margin-top: 0 } .controls-container .dropdown {margin: 0 0 20px; } .controls-container .dropdown .heading {color: #333 } .slider-holder {margin-bottom: 20px } .slider-play {width: 24px; height: 24px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; cursor: pointer; display: none; margin-right: 2px } .slider, .slider-holder.animatable .slider-play {display: inline-block } .slider-play:hover {opacity: .7 } .slider {height: 46px; width: 100%; bottom: 0 } .slider-holder.animatable .slider {width: calc(100% - 37px) } .slider-holder.playing .slider {pointer-events: none } .slider .tick line {stroke: #333 } .slider text {fill: #333 } .slider .slider-end-labels {font-size: 11px; fill: #9e9e9e } @media(min-width:520px) {.dropdown .main {height: 30px; } .slider-play {width: 30px; height: 30px } .button-container .button, .dropdown .current {font-size: 14px; line-height: 26px; height: 30px; } .button-container.button-group .button {height: 28px; } .dropdown .list .list-item {height: 30px; font-size: 14px; line-height: 27px; } } ";
 
@@ -3,0 +3,0 @@ // https://stackoverflow.com/a/21626701

src/index.js

@@ -72,2 +72,4 @@ import { select } from "d3-selection";
 		else buttons_obj.hide();
+		if (control === "none") container.style("display", "none");
+		else container.style("display", null);
 	};
@@ -74,0 +76,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

126098

increased by1.67%

Lines of code

3428

increased by0.29%

No dependency changes