@flourish/ui-styles 1.1.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +10 -3
  2. package/RELEASE_NOTES.md +9 -0
  3. package/controls-style/settings.yml +1 -2
  4. package/package.json +2 -2
  5. package/slider-style/settings.yml +45 -0
  6. package/src/button-style/index.js +0 -1
  7. package/src/dropdown-style/index.js +5 -5
  8. package/src/general-controls-style/index.js +9 -8
  9. package/src/index.js +6 -1
  10. package/src/lib/remToPx.js +3 -0
  11. package/src/slider-style/index.js +103 -0
  12. package/ui-styles.js +121 -14
package/README.md CHANGED
@@ -12,7 +12,8 @@ Add one or more control style objects to your template state:
12
12
  export var state = {
13
13
  controls_style: {},
14
14
  button_style: {},
15
- dropdown_style: {}
15
+ dropdown_style: {},
16
+ slider_style: {},
16
17
  }
17
18
  ```
18
19
 
@@ -25,6 +26,8 @@ Import settings for controls styling in your `template.yml` settings.
25
26
  import: "@flourish/ui-styles/dropdown-style"
26
27
  - property: button_style
27
28
  import: "@flourish/ui-styles/button-style"
29
+ - property: slider_style
30
+ import: "@flourish/ui-styles/slider-style"
28
31
  ```
29
32
 
30
33
  ## Basics
@@ -32,13 +35,16 @@ Import settings for controls styling in your `template.yml` settings.
32
35
  Initialise the styling outside any function or in a special init function:
33
36
 
34
37
  ``` js
35
- import { createGeneralControlsStyle, createButtonStyle, createDropdownStyle } from "@flourish/ui-styles";
38
+ import { createGeneralControlsStyle, createButtonStyle, createDropdownStyle, createSliderStyle } from "@flourish/ui-styles";
36
39
  var controlsStyle = createGeneralControlsStyle(state.controls_style, ".fl-control"),
37
40
  buttonStyle = createButtonStyle(state.button_style, ".fl-control-buttons"),
38
41
  dropdownStyle = createDropdownStyle(state.dropdown_style, ".fl-control-dropdown");
42
+ sliderStyle = createSliderStyle(state.slider_style, ".fl-control-slider");
39
43
  ```
40
44
 
41
- The init function takes the state object as a first argument. The second argument is the target container for styling. If you are using @flourish/controls you can just use the selectors in the code above. If you're using this on custom HTML, make sure to target the direct parent container of your controls, and make sure to give your controls a classname of `fl-control`.
45
+ The init function takes the state object as a first argument. The second argument is the target container for styling. If you are using @flourish/controls you can just use the selectors in the code above.
46
+
47
+ If you're using this on custom HTML, make sure to target the direct parent container of your controls, and make sure to give your controls a classname of `fl-control`. If you're using specifically the button styles with custom HTML make sure your buttons also have a `button` class and your selected elements a `selected` class.
42
48
 
43
49
  Then in the update function, make sure to update the styles with `update()`.
44
50
 
@@ -46,6 +52,7 @@ Then in the update function, make sure to update the styles with `update()`.
46
52
  controlsStyle.update();
47
53
  buttonStyle.update();
48
54
  dropdownStyle.update();
55
+ sliderStyle.update();
49
56
  ```
50
57
 
51
58
  ## Using defaults from @flourish/layout
package/RELEASE_NOTES.md CHANGED
@@ -1,3 +1,12 @@
1
+ # 3.0.0
2
+ * BREAKING: Move slider styles from @flourish/controls and change to reflect use of a `input` element for slider. For use with version 7.0.0+ of @flourish/controls
3
+
4
+ # 2.0.0
5
+ * BREAKING: Change styles to reflect use of a `select` element for the dropdown. For use with version 3.0.0+ of @flourish/controls
6
+
7
+ # 1.1.1
8
+ * Update module license
9
+
1
10
  # 1.1.0
2
11
  * Apply font size and weight to control title
3
12
 
package/controls-style/settings.yml CHANGED
@@ -17,9 +17,8 @@
17
17
  choices:
18
18
  - [ Bold, bold ]
19
19
  - [ Normal, normal ]
20
- - property: padding
20
+ - property: height
21
21
  name: Height
22
- description: Space below and above controls text
23
22
  type: number
24
23
  width: quarter
25
24
  min: 0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flourish/ui-styles",
3
- "version": "1.1.0",
3
+ "version": "3.0.0",
4
4
  "description": "Flourish module for styling UI elements",
5
5
  "main": "ui-styles.js",
6
6
  "module": "src/index.js",
@@ -12,7 +12,7 @@
12
12
  "precommit": "lint-staged"
13
13
  },
14
14
  "author": "Kiln Enterprises Ltd",
15
- "license": "UNLICENSED",
15
+ "license": "https://flourish.studio/terms/fcl/",
16
16
  "dependencies": {
17
17
  "@flourish/pocket-knife": "^0.5.0",
18
18
  "d3-selection": "^1.4.0"
package/slider-style/settings.yml ADDED
@@ -0,0 +1,45 @@
1
+ - property: track_color
2
+ name: Track
3
+ type: color
4
+ width: quarter
5
+ optional: true
6
+ - property: font_color
7
+ name: Text
8
+ type: color
9
+ width: quarter
10
+ optional: true
11
+ - property: handle_color
12
+ name: Handle
13
+ type: color
14
+ width: quarter
15
+ optional: true
16
+ - property: play_color
17
+ name: Play/pause
18
+ type: color
19
+ width: quarter
20
+ optional: true
21
+ show_if: play_button
22
+ - property: width
23
+ name: Slider width
24
+ type: number
25
+ min: 0
26
+ max: 100
27
+ width: quarter
28
+ - property: track_height
29
+ name: Track height
30
+ type: number
31
+ step: 0.1
32
+ min: 0
33
+ max: 1
34
+ width: quarter
35
+ - property: handle_height
36
+ name: Height
37
+ type: number
38
+ step: 0.1
39
+ min: 0
40
+ max: 10
41
+ width: quarter
42
+ - property: play_button
43
+ name: Play button
44
+ type: boolean
45
+ width: half
package/src/button-style/index.js CHANGED
@@ -49,7 +49,6 @@ ButtonStyle.prototype.update = function() {
49
49
  this._styles.select(this._selector + ".fl-control .button")
50
50
  .style("overflow", "hidden")
51
51
  .style("white-space", "nowrap")
52
- .style("box-sizing", "content-box")
53
52
  .style("margin", "0 2px 0 0 !important")
54
53
  .style("background-color", background_color)
55
54
  .style("color", text_color)
package/src/dropdown-style/index.js CHANGED
@@ -44,22 +44,22 @@ DropdownStyle.prototype.update = function() {
44
44
  this._styles.select(this._selector)
45
45
  .style("pointer-events", "all");
46
46
 
47
- this._styles.select(this._selector + " .main")
47
+ this._styles.select(this._selector + " select")
48
48
  .style("display", "inline-block")
49
49
  .style("cursor", "pointer")
50
50
  .style("overflow", "hidden")
51
51
  .style("white-space", "nowrap")
52
52
  .style("position", "relative")
53
+ .style("font-family", "inherit")
53
54
  .style("background-color", background_color)
54
55
  .style("color", text_color)
55
56
  .style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
56
57
  .style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
57
58
  .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
58
59
 
59
- this._styles.select(this._selector + " .main .symbol")
60
- .style("float", "right")
61
- .select("div")
62
- .style("border-top-color", text_color + " !important");
60
+ this._styles.select(this._selector + ":after")
61
+ .style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px")
62
+ .style("color", text_color);
63
63
 
64
64
  this._styles.select(this._selector + " .main .current")
65
65
  .style("line-height", "1em")
package/src/general-controls-style/index.js CHANGED
@@ -3,7 +3,7 @@ import Stylesheet from "../lib/js2css";
3
3
  var DEFAULTS = Object.freeze({
4
4
  font_size: 1,
5
5
  font_weight: "bold",
6
- padding: 0.4,
6
+ height: 2
7
7
  });
8
8
 
9
9
  function GeneralControlsStyle(state_, selector_, layout_) {
@@ -43,20 +43,21 @@ GeneralControlsStyle.prototype.update = function() {
43
43
  .style("vertical-align", "middle");
44
44
 
45
45
  this._styles.select(this._selector + ".fl-control .button")
46
- .style("padding", this._state.padding + "rem " + (this._state.padding * 2) + "rem");
46
+ .style("height", this._state.height + "rem")
47
+ .style("padding", "0 0.5em");
47
48
 
48
- this._styles.select(this._selector + " .list-item")
49
- .style("padding", Math.max(this._state.padding, 0.5) + "rem");
50
-
51
- this._styles.select(this._selector + "-dropdown .main")
52
- .style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "rem");
49
+ this._styles.select(this._selector + "-dropdown select")
50
+ .style("height", this._state.height + "rem")
51
+ .style("font-size", this._state.font_size + "rem")
52
+ .style("font-weight", this._state.font_weight)
53
+ .style("padding", 0 + " " + this._state.height * 0.1 + "rem");
53
54
 
54
55
  this._styles.select(this._selector + "-slider .slider-end-labels")
55
56
  .style("font-size", this._state.font_size + "rem")
56
57
  .style("font-weight", this._state.font_weight);
57
58
 
58
59
  this._styles.select(this._selector + "-slider")
59
- .style("padding", this._state.padding + "rem 0");
60
+ .style("height", this._state.height + "rem");
60
61
 
61
62
  // Some additional styling for slider controls
62
63
  // TODO: should move this somewhere else at some point
package/src/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import GeneralControlsStyle from "./general-controls-style";
2
2
  import ButtonStyle from "./button-style";
3
3
  import DropdownStyle from "./dropdown-style";
4
+ import SliderStyle from "./slider-style";
4
5
 
5
6
  function createGeneralControlsStyle(state, selector, layout) {
6
7
  return new GeneralControlsStyle(state, selector, layout);
@@ -14,4 +15,8 @@ function createDropdownStyle(state, selector, layout) {
14
15
  return new DropdownStyle(state, selector, layout);
15
16
  }
16
17
 
17
- export { createGeneralControlsStyle, createButtonStyle, createDropdownStyle };
18
+ function createSliderStyle(state, selector, layout) {
19
+ return new SliderStyle(state, selector, layout);
20
+ }
21
+
22
+ export { createGeneralControlsStyle, createButtonStyle, createDropdownStyle, createSliderStyle };
package/src/lib/remToPx.js ADDED
@@ -0,0 +1,3 @@
1
+ export function remToPx(rem) {
2
+ return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
3
+ }
package/src/slider-style/index.js ADDED
@@ -0,0 +1,103 @@
1
+ import { remToPx } from "../lib/remToPx";
2
+ import Stylesheet from "../lib/js2css";
3
+
4
+ var DEFAULTS = Object.freeze({
5
+ width: 15,
6
+ play_color: null,
7
+ handle_color: null,
8
+ font_color: null,
9
+ track_color: null,
10
+
11
+ handle_height: 1,
12
+ track_height: 0.2,
13
+ margin: 4.5,
14
+
15
+ play_button: true
16
+ });
17
+
18
+ function SliderStyle(state_, selector_, layout_) {
19
+ this._state = state_;
20
+ for (var key in DEFAULTS) { if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
21
+
22
+ this._layout = layout_ || {};
23
+
24
+ this._styles = new Stylesheet();
25
+ this._selector = selector_;
26
+ this._createStylesheet();
27
+
28
+ return this;
29
+ }
30
+
31
+ SliderStyle.prototype._createStylesheet = function() {
32
+ this._stylesheet = document.createElement("style");
33
+ this._stylesheet.className = "fl-ui-styles-slider";
34
+ document.head.appendChild(this._stylesheet);
35
+ };
36
+
37
+ SliderStyle.prototype.update = function() {
38
+ this._styles.clear();
39
+
40
+ var track_color = this._state.track_color || "#dddddd";
41
+ var text_color = this._state.font_color || this._layout.font_color || "currentColor";
42
+ var slider_color = "currentColor"; // So that handle can inherit layout text color via this parent
43
+ var handle_color = this._state.handle_color || this._layout.font_color || "currentColor";
44
+ var play_color = this._state.play_color || this._layout.font_color || "currentColor";
45
+
46
+ var slider_width = Math.round(remToPx(this._state.width));
47
+ var handle_radius = Math.round(remToPx(this._state.handle_height));
48
+ var track_height = remToPx(this._state.track_height);
49
+
50
+ this._styles.select(this._selector + " .fl-controls-slider")
51
+ .style("height", handle_radius * 2 + "px");
52
+
53
+ this._styles.select(this._selector + " .slider-play")
54
+ .style("fill", play_color)
55
+ .style("width", handle_radius + "px")
56
+ .style("height", handle_radius + "px")
57
+ .style("display", this._state.play_button ? null : "none");
58
+
59
+ this._styles.select(this._selector + " .slider-label")
60
+ .style("padding-inline-start", "0.3rem")
61
+ .style("color", text_color);
62
+
63
+ this._styles.select(this._selector + " input[type=range]")
64
+ .style("-webkit-appearance", "none")
65
+ .style("width", slider_width + "px")
66
+ .style("color", slider_color)
67
+ .style("background-color", "transparent");
68
+
69
+ // Chrome/Edge
70
+ this._styles.select(this._selector + " input[type=range]::-webkit-slider-runnable-track")
71
+ .style("-webkit-appearance", "none")
72
+ .style("background", track_color)
73
+ .style("border-radius", "100px")
74
+ .style("height", track_height + "px");
75
+
76
+ this._styles.select(this._selector + " input[type=range]::-webkit-slider-thumb")
77
+ .style("-webkit-appearance", "none")
78
+ .style("width", handle_radius + "px")
79
+ .style("height", handle_radius + "px")
80
+ .style("border-radius", "100px")
81
+ .style("background", handle_color)
82
+ .style("margin-top", -handle_radius/2 + track_height/2 + "px");
83
+
84
+ // Firefox
85
+ this._styles.select(this._selector + " input[type=range]::-moz-range-track")
86
+ .style("-webkit-appearance", "none")
87
+ .style("background", track_color)
88
+ .style("border-radius", "100px")
89
+ .style("height", track_height + "px");
90
+
91
+ this._styles.select(this._selector + " input[type=range]::-moz-range-thumb")
92
+ .style("-webkit-appearance", "none")
93
+ .style("width", handle_radius + "px")
94
+ .style("height", handle_radius + "px")
95
+ .style("border-radius", "100px")
96
+ .style("border", "none")
97
+ .style("background", handle_color);
98
+
99
+ this._stylesheet.innerHTML = this._styles.print();
100
+ };
101
+
102
+
103
+ export default SliderStyle;
package/ui-styles.js CHANGED
@@ -59,7 +59,7 @@
59
59
  var DEFAULTS = Object.freeze({
60
60
  font_size: 1,
61
61
  font_weight: "bold",
62
- padding: 0.4,
62
+ height: 2
63
63
  });
64
64
 
65
65
  function GeneralControlsStyle(state_, selector_, layout_) {
@@ -99,20 +99,21 @@
99
99
  .style("vertical-align", "middle");
100
100
 
101
101
  this._styles.select(this._selector + ".fl-control .button")
102
- .style("padding", this._state.padding + "rem " + (this._state.padding * 2) + "rem");
102
+ .style("height", this._state.height + "rem")
103
+ .style("padding", "0 0.5em");
103
104
 
104
- this._styles.select(this._selector + " .list-item")
105
- .style("padding", Math.max(this._state.padding, 0.5) + "rem");
106
-
107
- this._styles.select(this._selector + "-dropdown .main")
108
- .style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "rem");
105
+ this._styles.select(this._selector + "-dropdown select")
106
+ .style("height", this._state.height + "rem")
107
+ .style("font-size", this._state.font_size + "rem")
108
+ .style("font-weight", this._state.font_weight)
109
+ .style("padding", 0 + " " + this._state.height * 0.1 + "rem");
109
110
 
110
111
  this._styles.select(this._selector + "-slider .slider-end-labels")
111
112
  .style("font-size", this._state.font_size + "rem")
112
113
  .style("font-weight", this._state.font_weight);
113
114
 
114
115
  this._styles.select(this._selector + "-slider")
115
- .style("padding", this._state.padding + "rem 0");
116
+ .style("height", this._state.height + "rem");
116
117
 
117
118
  // Some additional styling for slider controls
118
119
  // TODO: should move this somewhere else at some point
@@ -744,7 +745,6 @@
744
745
  this._styles.select(this._selector + ".fl-control .button")
745
746
  .style("overflow", "hidden")
746
747
  .style("white-space", "nowrap")
747
- .style("box-sizing", "content-box")
748
748
  .style("margin", "0 2px 0 0 !important")
749
749
  .style("background-color", background_color)
750
750
  .style("color", text_color)
@@ -820,22 +820,22 @@
820
820
  this._styles.select(this._selector)
821
821
  .style("pointer-events", "all");
822
822
 
823
- this._styles.select(this._selector + " .main")
823
+ this._styles.select(this._selector + " select")
824
824
  .style("display", "inline-block")
825
825
  .style("cursor", "pointer")
826
826
  .style("overflow", "hidden")
827
827
  .style("white-space", "nowrap")
828
828
  .style("position", "relative")
829
+ .style("font-family", "inherit")
829
830
  .style("background-color", background_color)
830
831
  .style("color", text_color)
831
832
  .style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
832
833
  .style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
833
834
  .style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
834
835
 
835
- this._styles.select(this._selector + " .main .symbol")
836
- .style("float", "right")
837
- .select("div")
838
- .style("border-top-color", text_color + " !important");
836
+ this._styles.select(this._selector + ":after")
837
+ .style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px")
838
+ .style("color", text_color);
839
839
 
840
840
  this._styles.select(this._selector + " .main .current")
841
841
  .style("line-height", "1em")
@@ -883,6 +883,108 @@
883
883
  this._stylesheet.innerHTML = this._styles.print();
884
884
  };
885
885
 
886
+ function remToPx(rem) {
887
+ return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
888
+ }
889
+
890
+ var DEFAULTS$3 = Object.freeze({
891
+ width: 15,
892
+ play_color: null,
893
+ handle_color: null,
894
+ font_color: null,
895
+ track_color: null,
896
+
897
+ handle_height: 1,
898
+ track_height: 0.2,
899
+ margin: 4.5,
900
+
901
+ play_button: true
902
+ });
903
+
904
+ function SliderStyle(state_, selector_, layout_) {
905
+ this._state = state_;
906
+ for (var key in DEFAULTS$3) { if (this._state[key] === undefined) this._state[key] = DEFAULTS$3[key]; }
907
+
908
+ this._layout = layout_ || {};
909
+
910
+ this._styles = new Stylesheet();
911
+ this._selector = selector_;
912
+ this._createStylesheet();
913
+
914
+ return this;
915
+ }
916
+
917
+ SliderStyle.prototype._createStylesheet = function() {
918
+ this._stylesheet = document.createElement("style");
919
+ this._stylesheet.className = "fl-ui-styles-slider";
920
+ document.head.appendChild(this._stylesheet);
921
+ };
922
+
923
+ SliderStyle.prototype.update = function() {
924
+ this._styles.clear();
925
+
926
+ var track_color = this._state.track_color || "#dddddd";
927
+ var text_color = this._state.font_color || this._layout.font_color || "currentColor";
928
+ var slider_color = "currentColor"; // So that handle can inherit layout text color via this parent
929
+ var handle_color = this._state.handle_color || this._layout.font_color || "currentColor";
930
+ var play_color = this._state.play_color || this._layout.font_color || "currentColor";
931
+
932
+ var slider_width = Math.round(remToPx(this._state.width));
933
+ var handle_radius = Math.round(remToPx(this._state.handle_height));
934
+ var track_height = remToPx(this._state.track_height);
935
+
936
+ this._styles.select(this._selector + " .fl-controls-slider")
937
+ .style("height", handle_radius * 2 + "px");
938
+
939
+ this._styles.select(this._selector + " .slider-play")
940
+ .style("fill", play_color)
941
+ .style("width", handle_radius + "px")
942
+ .style("height", handle_radius + "px")
943
+ .style("display", this._state.play_button ? null : "none");
944
+
945
+ this._styles.select(this._selector + " .slider-label")
946
+ .style("padding-inline-start", "0.3rem")
947
+ .style("color", text_color);
948
+
949
+ this._styles.select(this._selector + " input[type=range]")
950
+ .style("-webkit-appearance", "none")
951
+ .style("width", slider_width + "px")
952
+ .style("color", slider_color)
953
+ .style("background-color", "transparent");
954
+
955
+ // Chrome/Edge
956
+ this._styles.select(this._selector + " input[type=range]::-webkit-slider-runnable-track")
957
+ .style("-webkit-appearance", "none")
958
+ .style("background", track_color)
959
+ .style("border-radius", "100px")
960
+ .style("height", track_height + "px");
961
+
962
+ this._styles.select(this._selector + " input[type=range]::-webkit-slider-thumb")
963
+ .style("-webkit-appearance", "none")
964
+ .style("width", handle_radius + "px")
965
+ .style("height", handle_radius + "px")
966
+ .style("border-radius", "100px")
967
+ .style("background", handle_color)
968
+ .style("margin-top", -handle_radius/2 + track_height/2 + "px");
969
+
970
+ // Firefox
971
+ this._styles.select(this._selector + " input[type=range]::-moz-range-track")
972
+ .style("-webkit-appearance", "none")
973
+ .style("background", track_color)
974
+ .style("border-radius", "100px")
975
+ .style("height", track_height + "px");
976
+
977
+ this._styles.select(this._selector + " input[type=range]::-moz-range-thumb")
978
+ .style("-webkit-appearance", "none")
979
+ .style("width", handle_radius + "px")
980
+ .style("height", handle_radius + "px")
981
+ .style("border-radius", "100px")
982
+ .style("border", "none")
983
+ .style("background", handle_color);
984
+
985
+ this._stylesheet.innerHTML = this._styles.print();
986
+ };
987
+
886
988
  function createGeneralControlsStyle(state, selector, layout) {
887
989
  return new GeneralControlsStyle(state, selector, layout);
888
990
  }
@@ -895,9 +997,14 @@
895
997
  return new DropdownStyle(state, selector, layout);
896
998
  }
897
999
 
1000
+ function createSliderStyle(state, selector, layout) {
1001
+ return new SliderStyle(state, selector, layout);
1002
+ }
1003
+
898
1004
  exports.createButtonStyle = createButtonStyle;
899
1005
  exports.createDropdownStyle = createDropdownStyle;
900
1006
  exports.createGeneralControlsStyle = createGeneralControlsStyle;
1007
+ exports.createSliderStyle = createSliderStyle;
901
1008
 
902
1009
  Object.defineProperty(exports, '__esModule', { value: true });
903
1010