@jotforminc/dnd-builder 2.4.2 → 2.4.3

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 (42) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/lib/cjs/assets/svg/page_settings.svg.js +4 -26
  3. package/lib/cjs/assets/svg/page_settings.svg.js.map +1 -1
  4. package/lib/cjs/assets/svg/presentation/enter_fullscreen.svg.js +6 -3
  5. package/lib/cjs/assets/svg/presentation/enter_fullscreen.svg.js.map +1 -1
  6. package/lib/cjs/assets/svg/presentation/exit_fullscreen.svg.js +7 -4
  7. package/lib/cjs/assets/svg/presentation/exit_fullscreen.svg.js.map +1 -1
  8. package/lib/cjs/components/Builder/ZoomControls.js +3 -3
  9. package/lib/cjs/components/Builder/ZoomControls.js.map +1 -1
  10. package/lib/cjs/components/TextEditor/CustomToolbar/CustomToolbar.js +2 -2
  11. package/lib/cjs/components/TextEditor/CustomToolbar/CustomToolbar.js.map +1 -1
  12. package/lib/cjs/styles/_jfDarkTheme.scss +1 -1
  13. package/lib/cjs/styles/_jfLightTheme.scss +1 -1
  14. package/lib/cjs/styles/_jfReportsFloatings.scss +61 -32
  15. package/lib/cjs/styles/_jfReportsPages.scss +5 -1
  16. package/lib/cjs/styles/_jfReportsPanelElements.scss +12 -8
  17. package/lib/cjs/styles/_jfReportsPanels.scss +1 -1
  18. package/lib/cjs/styles/_jfReportsReportItem.scss +21 -7
  19. package/lib/cjs/styles/_jfReportsSVG.scss +1 -1
  20. package/lib/cjs/styles/_jfReportsTextEditor.scss +76 -29
  21. package/lib/cjs/styles/_jfReportsVariables.scss +2 -2
  22. package/lib/esm/assets/svg/page_settings.svg.js +4 -26
  23. package/lib/esm/assets/svg/page_settings.svg.js.map +1 -1
  24. package/lib/esm/assets/svg/presentation/enter_fullscreen.svg.js +6 -3
  25. package/lib/esm/assets/svg/presentation/enter_fullscreen.svg.js.map +1 -1
  26. package/lib/esm/assets/svg/presentation/exit_fullscreen.svg.js +7 -4
  27. package/lib/esm/assets/svg/presentation/exit_fullscreen.svg.js.map +1 -1
  28. package/lib/esm/components/Builder/ZoomControls.js +3 -3
  29. package/lib/esm/components/Builder/ZoomControls.js.map +1 -1
  30. package/lib/esm/components/TextEditor/CustomToolbar/CustomToolbar.js +2 -2
  31. package/lib/esm/components/TextEditor/CustomToolbar/CustomToolbar.js.map +1 -1
  32. package/lib/esm/styles/_jfDarkTheme.scss +1 -1
  33. package/lib/esm/styles/_jfLightTheme.scss +1 -1
  34. package/lib/esm/styles/_jfReportsFloatings.scss +61 -32
  35. package/lib/esm/styles/_jfReportsPages.scss +5 -1
  36. package/lib/esm/styles/_jfReportsPanelElements.scss +12 -8
  37. package/lib/esm/styles/_jfReportsPanels.scss +1 -1
  38. package/lib/esm/styles/_jfReportsReportItem.scss +21 -7
  39. package/lib/esm/styles/_jfReportsSVG.scss +1 -1
  40. package/lib/esm/styles/_jfReportsTextEditor.scss +76 -29
  41. package/lib/esm/styles/_jfReportsVariables.scss +2 -2
  42. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,14 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [2.4.3](https://github.com/jotform/dnd-builder/compare/v2.4.2...v2.4.3) (2022-08-04)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * **elements:** page actions hover fix ([e471646](https://github.com/jotform/dnd-builder/commit/e4716467b7e59f6af27fde46233b06f4718bf1d5))
11
+ * style lint ([66fcc51](https://github.com/jotform/dnd-builder/commit/66fcc51a6262d7202afb46ea0c135894d0263a2a))
12
+
5
13
  ### [2.4.2](https://github.com/jotform/dnd-builder/compare/v2.4.1...v2.4.2) (2022-07-20)
6
14
 
7
15
 
@@ -2,39 +2,17 @@
2
2
 
3
3
  var React = require('react');
4
4
 
5
- var _mask, _path, _path2, _path3;
5
+ var _path;
6
6
 
7
7
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
8
8
 
9
9
  function SvgPageSettings(props) {
10
10
  return /*#__PURE__*/React.createElement("svg", _extends({
11
- viewBox: "0 0 11 13",
11
+ viewBox: "0 0 12 13",
12
12
  fill: "none",
13
13
  xmlns: "http://www.w3.org/2000/svg"
14
- }, props), _mask || (_mask = /*#__PURE__*/React.createElement("mask", {
15
- id: "page_settings_svg__a",
16
- maskUnits: "userSpaceOnUse",
17
- x: 0,
18
- y: 1.371,
19
- width: 11,
20
- height: 12,
21
- fill: "#000"
22
- }, /*#__PURE__*/React.createElement("path", {
23
- fill: "#fff",
24
- d: "M0 1.371h11v12H0z"
25
- }), /*#__PURE__*/React.createElement("path", {
26
- fillRule: "evenodd",
27
- clipRule: "evenodd",
28
- d: "M8.262 6.214a.869.869 0 00-.23.408c-.067.265-.24.378-.436.378h-.192c-.197 0-.37-.113-.436-.378a.875.875 0 00-1.299-.539c-.234.14-.436.099-.576-.04l-.135-.136c-.14-.14-.182-.342-.041-.576a.875.875 0 00-.539-1.299C4.113 3.965 4 3.792 4 3.596v-.192c0-.197.114-.37.378-.436a.87.87 0 00.626-.597H6.83A1.312 1.312 0 108.262 4.57v1.645zm0 1.625c-.218.114-.45.161-.666.161h-.192a1.417 1.417 0 01-1.246-.729.333.333 0 00-.376-.156 1.417 1.417 0 01-1.396-.366l-.134-.134a1.418 1.418 0 01-.367-1.398.333.333 0 00-.156-.375A1.416 1.416 0 013 3.596v-.192a1.417 1.417 0 01.439-1.033H1.734A.734.734 0 001 3.106v8.16c0 .405.329.734.734.734h5.794a.734.734 0 00.734-.734V7.839z"
29
- }))), _path || (_path = /*#__PURE__*/React.createElement("path", {
30
- clipRule: "evenodd",
31
- d: "M8.262 6.214a.869.869 0 00-.23.408c-.067.265-.24.378-.436.378h-.192c-.197 0-.37-.113-.436-.378a.875.875 0 00-1.299-.539c-.234.14-.436.099-.576-.04l-.135-.136c-.14-.14-.182-.342-.041-.576a.875.875 0 00-.539-1.299C4.113 3.965 4 3.792 4 3.596v-.192c0-.197.114-.37.378-.436a.87.87 0 00.626-.597H6.83A1.312 1.312 0 108.262 4.57v1.645zm0 1.625c-.218.114-.45.161-.666.161h-.192a1.417 1.417 0 01-1.246-.729.333.333 0 00-.376-.156 1.417 1.417 0 01-1.396-.366l-.134-.134a1.418 1.418 0 01-.367-1.398.333.333 0 00-.156-.375A1.416 1.416 0 013 3.596v-.192a1.417 1.417 0 01.439-1.033H1.734A.734.734 0 001 3.106v8.16c0 .405.329.734.734.734h5.794a.734.734 0 00.734-.734V7.839z"
32
- })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
33
- d: "M8.032 6.622l.97.242-.97-.242zm.23-.408l.706.71.294-.294v-.416h-1zm-1.294.408l.97-.242-.97.242zm-1.299-.539l-.514-.857h-.001l.515.857zm-.576-.04l-.707.706.707-.707zm-.135-.136l.707-.707-.001-.002-.706.709zm-.041-.576l.857.515-.857-.515zm-.539-1.299l-.242.97.242-.97zm0-1.064l-.242-.97.242.97zm.626-.597v-1h-.742l-.215.711.957.29zm1.826 0l.511.86 3.126-1.86H6.83v1zM8.262 4.57h1V2.625l-1.581 1.13.581.814zm0 3.27h1V6.186l-1.464.767.464.886zm-1.753-.15l-.627.778.627-.778zm-.351-.418l.872-.49-.872.49zm-.376-.156l-.27-.962.27.962zm-.542.047l.106-.994-.106.994zm-.854-.413l-.707.708.707-.708zm-.134-.134l.707-.707-.001-.001-.706.708zm-.414-.854l.994-.106-.994.106zm.047-.544l.962.27-.962-.27zm-.156-.375l-.49.872.49-.872zm-.418-.351l.779-.628-.779.628zm.001-1.983l-.778-.628.778.628zm.127-.137l.688.726 1.82-1.726H3.438v1zm5.563 4.493a.137.137 0 01-.035.059l-1.41-1.418c-.234.233-.41.53-.495.874l1.94.485zM7.596 8c.294 0 .617-.087.895-.311.277-.224.436-.524.511-.825l-1.94-.485a.494.494 0 01.173-.247.584.584 0 01.36-.132v2zm-.192 0h.192V6h-.192v2zM5.998 6.863c.075.302.234.602.511.826.278.224.601.311.895.311V6c.097 0 .235.03.36.132.126.1.165.212.174.248l-1.94.483zm.185.078a.125.125 0 01-.185-.077l1.94-.484a1.875 1.875 0 00-2.783-1.154L6.183 6.94zm-1.797-.192c.209.209.499.375.854.413.353.038.678-.062.944-.221l-1.03-1.715c.032-.02.14-.07.298-.052.16.017.28.092.348.161L4.386 6.75zm-.135-.135l.135.135L5.8 5.335 5.665 5.2 4.25 6.614zm-.192-1.798c-.16.266-.26.591-.221.945.038.356.205.646.414.854l1.412-1.417a.585.585 0 01.162.35.495.495 0 01-.052.298l-1.715-1.03zm.077.186a.125.125 0 01-.077-.186l1.715 1.03A1.875 1.875 0 004.62 3.062l-.485 1.94zM3 3.596c0 .294.087.617.311.895.224.277.524.436.825.511l.485-1.94a.494.494 0 01.247.173.584.584 0 01.132.36H3zm0-.192v.192h2v-.192H3zm1.136-1.406c-.3.075-.6.234-.824.51-.224.278-.312.6-.312.896h2a.584.584 0 01-.132.361.494.494 0 01-.247.173l-.485-1.94zm-.09.084a.12.12 0 01.032-.05.133.133 0 01.058-.034l.484 1.94A1.87 1.87 0 005.962 2.66l-1.915-.578zm.958 1.29H6.83v-2H5.004v2zm1.315-1.86A2.312 2.312 0 005.188 3.5h2c0-.113.059-.213.153-.27L6.32 1.513zM5.188 3.5A2.312 2.312 0 007.5 5.813v-2a.312.312 0 01-.313-.313h-2zM7.5 5.813c.5 0 .965-.16 1.344-.43L7.68 3.754a.307.307 0 01-.181.058v2zm-.238-1.244v1.645h2V4.57h-2zM7.8 6.953A.437.437 0 017.595 7v2c.36 0 .753-.078 1.13-.276l-.928-1.771zM7.595 7h-.192v2h.192V7zm-.192 0a.417.417 0 01-.267-.09L5.882 8.467c.48.388 1.034.533 1.522.533V7zm-.267-.09a.436.436 0 01-.107-.128l-1.744.979c.143.255.339.5.596.706L7.137 6.91zm-.107-.128a1.333 1.333 0 00-1.518-.63l.54 1.926a.667.667 0 01-.766-.317l1.744-.98zm-1.518-.63a.436.436 0 01-.166.016l-.212 1.989c.327.035.637 0 .918-.079l-.54-1.925zm-.166.016a.418.418 0 01-.253-.126L3.68 7.457c.347.346.841.634 1.455.7l.212-1.99zm-.253-.126l-.134-.134-1.414 1.414.134.135 1.414-1.415zm-.135-.135a.418.418 0 01-.126-.252l-1.989.213c.066.615.357 1.11.702 1.455l1.413-1.416zm-.126-.252a.436.436 0 01.015-.167l-1.925-.541c-.08.282-.114.593-.079.921l1.989-.213zm.015-.167a1.333 1.333 0 00-.629-1.518L3.24 5.714a.667.667 0 01-.318-.767l1.925.54zM4.218 3.97a.437.437 0 01-.128-.107L2.533 5.119c.207.256.451.452.707.595l.978-1.744zm-.128-.107A.417.417 0 014 3.596H2c0 .488.145 1.042.533 1.523L4.09 3.863zM4 3.596v-.192H2v.192h2zm0-.192c0-.1.029-.192.09-.267L2.534 1.88A2.417 2.417 0 002 3.404h2zm.09-.267a.413.413 0 01.037-.04L2.751 1.646c-.076.072-.148.15-.217.234L4.09 3.137zm-2.356.234H3.44v-2H1.734v2zM2 3.106a.266.266 0 01-.266.265v-2C.777 1.371 0 2.148 0 3.106h2zm0 8.16v-8.16H0v8.16h2zM1.734 11c.147 0 .266.119.266.266H0C0 12.223.777 13 1.734 13v-2zm5.794 0H1.734v2h5.794v-2zm-.266.266c0-.147.12-.266.266-.266v2c.958 0 1.734-.777 1.734-1.734h-2zm0-3.427v3.427h2V7.839h-2z",
34
- fill: "#fff",
35
- mask: "url(#page_settings_svg__a)"
36
- })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
37
- d: "M10.622 2.968a.875.875 0 01-.539-1.299c.141-.234.099-.437-.04-.576L9.906.958c-.14-.14-.342-.182-.576-.041A.875.875 0 018.032.378C7.966.113 7.792 0 7.596 0h-.192c-.197 0-.37.113-.436.378a.875.875 0 01-1.299.539c-.234-.141-.437-.099-.576.04l-.136.136c-.139.139-.181.342-.04.576a.875.875 0 01-.539 1.299c-.264.066-.378.239-.378.436v.192c0 .197.113.37.378.436.57.143.84.795.539 1.299-.141.234-.099.437.04.576l.136.135c.14.14.342.182.576.041a.875.875 0 011.299.539c.066.265.24.378.436.378h.192c.197 0 .37-.113.436-.378a.875.875 0 011.299-.539c.234.14.436.099.576-.04l.135-.136c.14-.14.182-.342.041-.576a.875.875 0 01.539-1.299c.265-.066.378-.24.378-.436v-.192c0-.197-.114-.37-.378-.436zM7.5 4.813a1.312 1.312 0 110-2.625 1.312 1.312 0 010 2.624z"
14
+ }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
15
+ d: "M11.351 5.096a1.5 1.5 0 01-.922-2.227c.241-.402.168-.749-.07-.987l-.233-.233c-.239-.238-.585-.31-.987-.07A1.5 1.5 0 016.912.656c-.113-.455-.41-.648-.748-.648h-.328c-.338 0-.634.193-.748.648a1.5 1.5 0 01-2.227.923c-.402-.242-.749-.169-.988.07l-.232.232c-.238.239-.311.586-.07.988A1.5 1.5 0 01.65 5.096c-.454.113-.649.41-.649.747v.329c0 .337.194.634.649.748a1.5 1.5 0 01.922 2.226c-.241.402-.168.749.07.987l.233.233c.24.24.587.311.987.07a1.5 1.5 0 012.227.923c.113.455.41.649.748.649h.328c.338 0 .634-.194.748-.65a1.5 1.5 0 012.227-.922c.401.241.748.17.987-.07l.232-.233c.239-.238.311-.585.07-.987a1.5 1.5 0 01.923-2.226c.455-.114.649-.41.649-.748v-.329c0-.338-.195-.634-.649-.747zM6 8.258a2.25 2.25 0 110-4.5 2.25 2.25 0 010 4.5z"
38
16
  })));
39
17
  }
40
18
 
@@ -1 +1 @@
1
- {"version":3,"file":"page_settings.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"page_settings.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
@@ -2,7 +2,7 @@
2
2
 
3
3
  var React = require('react');
4
4
 
5
- var _path, _path2;
5
+ var _path, _path2, _path3;
6
6
 
7
7
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
8
8
 
@@ -12,10 +12,13 @@ function SvgEnterFullscreen(props) {
12
12
  fill: "none",
13
13
  xmlns: "http://www.w3.org/2000/svg"
14
14
  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
15
- d: "M11.825 0c.643 0 1.163.52 1.163 1.163V3.49a.499.499 0 01-.997 0V1.163a.166.166 0 00-.166-.166H9.499a.499.499 0 010-.997h2.326zM1.487 8.012c.275 0 .498.223.498.498v2.327c0 .091.075.166.167.166h2.326a.499.499 0 010 .997H2.152c-.643 0-1.164-.52-1.164-1.163V8.51c0-.275.223-.498.499-.498z",
15
+ d: "M1.627 7.534a.621.621 0 00-.629.629l.027 3.16v.01c.003.35.29.637.64.64l3.17.027a.621.621 0 00.629-.629.647.647 0 00-.64-.64l-2.536-.02-.022-2.537a.647.647 0 00-.64-.64z",
16
16
  fill: "#fff"
17
17
  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
18
- d: "M1.92 11.069a.545.545 0 010-.771l2.088-2.089a.545.545 0 01.771.772l-2.088 2.088a.545.545 0 01-.772 0zM12.057.931a.545.545 0 010 .771L9.97 3.791a.545.545 0 01-.771-.772L11.286.931a.545.545 0 01.771 0z",
18
+ d: "M1.953 10.06a.696.696 0 00.984.985L6.22 7.764a.696.696 0 00-.985-.985l-3.281 3.282zM12.37 4.466a.621.621 0 00.628-.629l-.027-3.16v-.01a.647.647 0 00-.64-.64L9.162 0a.621.621 0 00-.629.629c.003.35.29.636.64.64l2.536.02.022 2.537c.003.35.289.637.64.64z",
19
+ fill: "#fff"
20
+ })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
21
+ d: "M12.043 1.94a.696.696 0 00-.984-.985L7.777 4.236a.696.696 0 00.985.985l3.281-3.282z",
19
22
  fill: "#fff"
20
23
  })));
21
24
  }
@@ -1 +1 @@
1
- {"version":3,"file":"enter_fullscreen.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"enter_fullscreen.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -2,20 +2,23 @@
2
2
 
3
3
  var React = require('react');
4
4
 
5
- var _path, _path2;
5
+ var _path, _path2, _path3;
6
6
 
7
7
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
8
8
 
9
9
  function SvgExitFullscreen(props) {
10
10
  return /*#__PURE__*/React.createElement("svg", _extends({
11
- viewBox: "0 0 12 12",
11
+ viewBox: "0 0 13 12",
12
12
  fill: "none",
13
13
  xmlns: "http://www.w3.org/2000/svg"
14
14
  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
15
- d: "M2.83 8.004c.644 0 1.166.522 1.166 1.165v2.332a.5.5 0 11-.999 0V9.169a.167.167 0 00-.166-.166H.5a.5.5 0 010-1h2.33zM8.504 0a.5.5 0 01.5.5v2.33c0 .093.074.167.166.167h2.332a.5.5 0 010 1H9.169A1.166 1.166 0 018.004 2.83V.5a.5.5 0 01.5-.5z",
15
+ d: "M8.203.959a.621.621 0 00-.629.629l.027 3.16v.01c.003.35.289.637.64.64l3.17.027a.621.621 0 00.629-.63.647.647 0 00-.64-.639l-2.536-.021-.022-2.537a.647.647 0 00-.64-.64z",
16
16
  fill: "#fff"
17
17
  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
18
- d: "M8.937 3.063a.547.547 0 010-.773L11.029.198a.547.547 0 01.773.773L9.71 3.063a.546.546 0 01-.773 0zM3.063 8.937a.547.547 0 010 .773L.971 11.802a.546.546 0 11-.773-.773L2.29 8.937a.547.547 0 01.773 0z",
18
+ d: "M8.529 3.485a.696.696 0 00.984.985l3.281-3.282a.693.693 0 000-.984.696.696 0 00-.984 0L8.529 3.485zM5.793 11.041a.621.621 0 00.63-.629l-.028-3.16v-.01a.647.647 0 00-.64-.64l-3.17-.027a.621.621 0 00-.629.63c.003.35.29.636.64.639l2.536.021.022 2.537c.003.35.29.636.64.64z",
19
+ fill: "#fff"
20
+ })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
21
+ d: "M5.468 8.515a.696.696 0 00-.985-.985l-3.281 3.282a.696.696 0 10.984.984l3.282-3.281z",
19
22
  fill: "#fff"
20
23
  })));
21
24
  }
@@ -1 +1 @@
1
- {"version":3,"file":"exit_fullscreen.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"exit_fullscreen.svg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -76,9 +76,9 @@ var ZoomControls = function ZoomControls(_ref) {
76
76
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
77
77
  className: "floatingController forZoom".concat(!showZoom ? ' hidden' : ''),
78
78
  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
79
- className: "floatingController-container",
79
+ className: "floatingController-container isGray",
80
80
  children: [/*#__PURE__*/jsxRuntime.jsx("button", {
81
- className: "controllerItem isGray",
81
+ className: "controllerItem isWhite",
82
82
  onClick: increaseZoom,
83
83
  title: ZOOM_IN,
84
84
  type: "button",
@@ -89,7 +89,7 @@ var ZoomControls = function ZoomControls(_ref) {
89
89
  className: "controllerIndicator",
90
90
  children: [zoomValue, "%"]
91
91
  }), /*#__PURE__*/jsxRuntime.jsx("button", {
92
- className: "controllerItem isGray",
92
+ className: "controllerItem isWhite",
93
93
  onClick: decreaseZoom,
94
94
  title: ZOOM_OUT,
95
95
  type: "button",
@@ -1 +1 @@
1
- {"version":3,"file":"ZoomControls.js","sources":["../../../../src/components/Builder/ZoomControls.js"],"sourcesContent":["import { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport * as icons from '../../utils/icons';\nimport { useBuilderContext } from '../../utils/builderContext';\nimport { usePropContext } from '../../utils/propContext';\nimport {\n ZOOM_STEP,\n ZOOM_MIN,\n ZOOM_MAX,\n ZOOM_MULTIPLIER,\n} from '../../constants/zoom';\nimport { useTranslatedTexts } from '../../utils/hooks';\n\nconst ZoomControls = ({\n mode,\n showZoom,\n}) => {\n const { setZoom, zoom } = useBuilderContext();\n const {\n onAnEventTrigger,\n settings,\n } = usePropContext();\n const { reportLayoutHeight = 794, reportLayoutWidth = 1123 } = settings;\n const isModeCustomize = mode === 'customize';\n const decreaseZoom = () => {\n onAnEventTrigger('zoomOut', 'report');\n if (zoom > (ZOOM_STEP + ZOOM_MIN)) {\n setZoom(parseFloat((zoom - ZOOM_STEP).toFixed(1)), isModeCustomize, reportLayoutWidth);\n }\n };\n const increaseZoom = () => {\n onAnEventTrigger('zoomIn', 'report');\n if (zoom < (ZOOM_MAX)) {\n setZoom(parseFloat((zoom + ZOOM_STEP).toFixed(1)), isModeCustomize, reportLayoutWidth);\n }\n };\n const fitZoom = () => {\n const { innerHeight, innerWidth } = window;\n const newScale = Math.min(\n (innerWidth - 400) / reportLayoutWidth,\n innerHeight / reportLayoutHeight,\n );\n let newZoom = Math.floor(newScale * 10) / 10;\n if (newZoom < 0.5) newZoom = 0.5;\n if (newZoom > 1) newZoom = 1;\n onAnEventTrigger('fitZoom', 'report');\n setZoom(newZoom, isModeCustomize, reportLayoutWidth);\n };\n\n const zoomValue = useMemo(() => {\n return Number.isNaN(zoom) ? 100 : (zoom * ZOOM_MULTIPLIER).toFixed(0);\n }, [zoom, ZOOM_MULTIPLIER]);\n\n const { FIT_TO_SCENE, ZOOM_IN, ZOOM_OUT } = useTranslatedTexts();\n\n return (\n <div className={`floatingController forZoom${!showZoom ? ' hidden' : ''}`}>\n <div className=\"floatingController-container\">\n <button\n className=\"controllerItem isGray\"\n onClick={increaseZoom}\n title={ZOOM_IN}\n type=\"button\"\n >\n <icons.plus className=\"jfReportSVG controllerItem-icon\" />\n </button>\n <div className=\"controllerIndicator\">\n {zoomValue}\n %\n </div>\n <button\n className=\"controllerItem isGray\"\n onClick={decreaseZoom}\n title={ZOOM_OUT}\n type=\"button\"\n >\n <icons.minus className=\"jfReportSVG controllerItem-icon\" />\n </button>\n </div>\n <div className=\"floatingController-container\">\n <button\n className=\"controllerItem isSingle\"\n onClick={fitZoom}\n title={FIT_TO_SCENE}\n type=\"button\"\n >\n <icons.fit className=\"jfReportSVG icon-fit\" />\n </button>\n </div>\n </div>\n );\n};\n\nZoomControls.propTypes = {\n mode: PropTypes.string,\n showZoom: PropTypes.bool,\n};\n\nZoomControls.defaultProps = {\n mode: '',\n showZoom: true,\n};\n\nexport default ZoomControls;\n"],"names":["ZoomControls","mode","showZoom","useBuilderContext","setZoom","zoom","usePropContext","onAnEventTrigger","settings","reportLayoutHeight","reportLayoutWidth","isModeCustomize","decreaseZoom","ZOOM_STEP","ZOOM_MIN","parseFloat","toFixed","increaseZoom","ZOOM_MAX","fitZoom","window","innerHeight","innerWidth","newScale","Math","min","newZoom","floor","zoomValue","useMemo","Number","isNaN","ZOOM_MULTIPLIER","useTranslatedTexts","FIT_TO_SCENE","ZOOM_IN","ZOOM_OUT","_jsxs","_jsx","icons.plus","icons.minus","icons.fit","propTypes","PropTypes","string","bool","defaultProps"],"mappings":"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"}
1
+ {"version":3,"file":"ZoomControls.js","sources":["../../../../src/components/Builder/ZoomControls.js"],"sourcesContent":["import { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport * as icons from '../../utils/icons';\nimport { useBuilderContext } from '../../utils/builderContext';\nimport { usePropContext } from '../../utils/propContext';\nimport {\n ZOOM_STEP,\n ZOOM_MIN,\n ZOOM_MAX,\n ZOOM_MULTIPLIER,\n} from '../../constants/zoom';\nimport { useTranslatedTexts } from '../../utils/hooks';\n\nconst ZoomControls = ({\n mode,\n showZoom,\n}) => {\n const { setZoom, zoom } = useBuilderContext();\n const {\n onAnEventTrigger,\n settings,\n } = usePropContext();\n const { reportLayoutHeight = 794, reportLayoutWidth = 1123 } = settings;\n const isModeCustomize = mode === 'customize';\n const decreaseZoom = () => {\n onAnEventTrigger('zoomOut', 'report');\n if (zoom > (ZOOM_STEP + ZOOM_MIN)) {\n setZoom(parseFloat((zoom - ZOOM_STEP).toFixed(1)), isModeCustomize, reportLayoutWidth);\n }\n };\n const increaseZoom = () => {\n onAnEventTrigger('zoomIn', 'report');\n if (zoom < (ZOOM_MAX)) {\n setZoom(parseFloat((zoom + ZOOM_STEP).toFixed(1)), isModeCustomize, reportLayoutWidth);\n }\n };\n const fitZoom = () => {\n const { innerHeight, innerWidth } = window;\n const newScale = Math.min(\n (innerWidth - 400) / reportLayoutWidth,\n innerHeight / reportLayoutHeight,\n );\n let newZoom = Math.floor(newScale * 10) / 10;\n if (newZoom < 0.5) newZoom = 0.5;\n if (newZoom > 1) newZoom = 1;\n onAnEventTrigger('fitZoom', 'report');\n setZoom(newZoom, isModeCustomize, reportLayoutWidth);\n };\n\n const zoomValue = useMemo(() => {\n return Number.isNaN(zoom) ? 100 : (zoom * ZOOM_MULTIPLIER).toFixed(0);\n }, [zoom, ZOOM_MULTIPLIER]);\n\n const { FIT_TO_SCENE, ZOOM_IN, ZOOM_OUT } = useTranslatedTexts();\n\n return (\n <div className={`floatingController forZoom${!showZoom ? ' hidden' : ''}`}>\n <div className=\"floatingController-container isGray\">\n <button\n className=\"controllerItem isWhite\"\n onClick={increaseZoom}\n title={ZOOM_IN}\n type=\"button\"\n >\n <icons.plus className=\"jfReportSVG controllerItem-icon\" />\n </button>\n <div className=\"controllerIndicator\">\n {zoomValue}\n %\n </div>\n <button\n className=\"controllerItem isWhite\"\n onClick={decreaseZoom}\n title={ZOOM_OUT}\n type=\"button\"\n >\n <icons.minus className=\"jfReportSVG controllerItem-icon\" />\n </button>\n </div>\n <div className=\"floatingController-container\">\n <button\n className=\"controllerItem isSingle\"\n onClick={fitZoom}\n title={FIT_TO_SCENE}\n type=\"button\"\n >\n <icons.fit className=\"jfReportSVG icon-fit\" />\n </button>\n </div>\n </div>\n );\n};\n\nZoomControls.propTypes = {\n mode: PropTypes.string,\n showZoom: PropTypes.bool,\n};\n\nZoomControls.defaultProps = {\n mode: '',\n showZoom: true,\n};\n\nexport default ZoomControls;\n"],"names":["ZoomControls","mode","showZoom","useBuilderContext","setZoom","zoom","usePropContext","onAnEventTrigger","settings","reportLayoutHeight","reportLayoutWidth","isModeCustomize","decreaseZoom","ZOOM_STEP","ZOOM_MIN","parseFloat","toFixed","increaseZoom","ZOOM_MAX","fitZoom","window","innerHeight","innerWidth","newScale","Math","min","newZoom","floor","zoomValue","useMemo","Number","isNaN","ZOOM_MULTIPLIER","useTranslatedTexts","FIT_TO_SCENE","ZOOM_IN","ZOOM_OUT","_jsxs","_jsx","icons.plus","icons.minus","icons.fit","propTypes","PropTypes","string","bool","defaultProps"],"mappings":"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"}
@@ -60,8 +60,8 @@ var CustomToolbar = function CustomToolbar(_ref) {
60
60
  isOpened: isOpened
61
61
  }),
62
62
  style: {
63
- maxWidth: isOpened ? 'none' : '100%',
64
- minWidth: "".concat(itemWidth, "px")
63
+ maxWidth: isOpened ? 'none' : '100%' // minWidth: `${itemWidth}px`,
64
+
65
65
  },
66
66
  children: [/*#__PURE__*/jsxRuntime.jsx("select", {
67
67
  "aria-label": "Size",
@@ -1 +1 @@
1
- {"version":3,"file":"CustomToolbar.js","sources":["../../../../../src/components/TextEditor/CustomToolbar/CustomToolbar.js"],"sourcesContent":["import {\n useState, useCallback, useLayoutEffect, useRef,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { fontSizes } from '../../../constants/fonts';\n\nconst SELECT_WIDTH = 70;\nconst BUTTON_WIDTH = 26;\nconst BAR_WIDTH = SELECT_WIDTH + (BUTTON_WIDTH * 8);\n\nconst CustomToolbar = ({ itemWidth }) => {\n const overflow = BAR_WIDTH > itemWidth;\n const [isOpened, setIsOpened] = useState(overflow ? false : true);\n const onClickMore = useCallback(() => setIsOpened(true), []);\n const wrapper = useRef();\n\n function getVisibleClass(limit) {\n return overflow && itemWidth < limit ? ' hiddenVisibility' : '';\n }\n\n useLayoutEffect(() => {\n if (!isOpened || wrapper.current === null) return;\n Array.from(wrapper.current.children).forEach(el => el.classList.remove('hiddenVisibility'));\n }, [isOpened]);\n\n return (\n <div\n ref={wrapper}\n className={classNames('toolbarWrapper p-absolute d-flex', { isOpened })}\n style={{\n maxWidth: isOpened ? 'none' : '100%',\n minWidth: `${itemWidth}px`,\n }}\n >\n <select\n aria-label=\"Size\"\n className=\"ql-size ql-select ql-textselect\"\n defaultValue=\"16px\"\n onChange={e => e.persist()}\n >\n {fontSizes.map(size => (\n <option\n key={size}\n value={`${size}px`}\n >\n {size}\n px\n </option>\n ))}\n </select>\n <div className=\"ql-divider\" />\n <button\n aria-label=\"Bold\"\n className={`ql-bold ql-button${getVisibleClass(SELECT_WIDTH + BUTTON_WIDTH)}`}\n type=\"button\"\n />\n <button\n aria-label=\"Italic\"\n className={`ql-italic ql-button${getVisibleClass(SELECT_WIDTH + (BUTTON_WIDTH * 2))}`}\n type=\"button\"\n />\n <button\n aria-label=\"Underline\"\n className={`ql-underline ql-button${getVisibleClass(SELECT_WIDTH + (BUTTON_WIDTH * 3))}`}\n type=\"button\"\n />\n <select\n aria-label=\"Text Color\"\n className={`ql-color ql-select${getVisibleClass(SELECT_WIDTH + (BUTTON_WIDTH * 4))}`}\n defaultValue=\"\"\n onChange={e => e.persist()}\n />\n <div className=\"ql-divider\" />\n <select\n aria-label=\"Alignment\"\n className={`ql-align ql-select${getVisibleClass(SELECT_WIDTH + (BUTTON_WIDTH * 5))}`}\n defaultValue=\"\"\n onChange={e => e.persist()}\n />\n <button\n aria-label=\"Ordered List\"\n className={`ql-list ql-button${getVisibleClass(SELECT_WIDTH + (BUTTON_WIDTH * 6))}`}\n type=\"button\"\n value=\"ordered\"\n />\n <button\n aria-label=\"Bullet List\"\n className={`ql-list ql-button${getVisibleClass(SELECT_WIDTH + (BUTTON_WIDTH * 7))}`}\n type=\"button\"\n value=\"bullet\"\n />\n <button\n aria-label=\"Link\"\n className={`ql-link ql-button${getVisibleClass(SELECT_WIDTH + (BUTTON_WIDTH * 8))}`}\n type=\"button\"\n />\n {overflow && !isOpened && (\n <button\n aria-label=\"More Options\"\n className=\"qlMore\"\n onClick={onClickMore}\n type=\"button\"\n >\n &gt;&gt;\n </button>\n )}\n </div>\n );\n};\n\nCustomToolbar.propTypes = {\n itemWidth: PropTypes.number,\n};\n\nCustomToolbar.defaultProps = {\n itemWidth: 0,\n};\n\nexport default CustomToolbar;\n"],"names":["SELECT_WIDTH","BUTTON_WIDTH","BAR_WIDTH","CustomToolbar","itemWidth","overflow","useState","isOpened","setIsOpened","onClickMore","useCallback","wrapper","useRef","getVisibleClass","limit","useLayoutEffect","current","Array","from","children","forEach","el","classList","remove","_jsxs","classNames","maxWidth","minWidth","_jsx","e","persist","fontSizes","map","size","propTypes","PropTypes","number","defaultProps"],"mappings":"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"}
1
+ {"version":3,"file":"CustomToolbar.js","sources":["../../../../../src/components/TextEditor/CustomToolbar/CustomToolbar.js"],"sourcesContent":["import {\n useState, useCallback, useLayoutEffect, useRef,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { fontSizes } from '../../../constants/fonts';\n\nconst SELECT_WIDTH = 70;\nconst BUTTON_WIDTH = 26;\nconst BAR_WIDTH = SELECT_WIDTH + (BUTTON_WIDTH * 8);\n\nconst CustomToolbar = ({ itemWidth }) => {\n const overflow = BAR_WIDTH > itemWidth;\n const [isOpened, setIsOpened] = useState(overflow ? false : true);\n const onClickMore = useCallback(() => setIsOpened(true), []);\n const wrapper = useRef();\n\n function getVisibleClass(limit) {\n return overflow && itemWidth < limit ? ' hiddenVisibility' : '';\n }\n\n useLayoutEffect(() => {\n if (!isOpened || wrapper.current === null) return;\n Array.from(wrapper.current.children).forEach(el => el.classList.remove('hiddenVisibility'));\n }, [isOpened]);\n\n return (\n <div\n ref={wrapper}\n className={classNames('toolbarWrapper p-absolute d-flex', { isOpened })}\n style={{\n maxWidth: isOpened ? 'none' : '100%',\n // minWidth: `${itemWidth}px`,\n }}\n >\n <select\n aria-label=\"Size\"\n className=\"ql-size ql-select ql-textselect\"\n defaultValue=\"16px\"\n onChange={e => e.persist()}\n >\n {fontSizes.map(size => (\n <option\n key={size}\n value={`${size}px`}\n >\n {size}\n px\n </option>\n ))}\n </select>\n <div className=\"ql-divider\" />\n <button\n aria-label=\"Bold\"\n className={`ql-bold ql-button${getVisibleClass(SELECT_WIDTH + BUTTON_WIDTH)}`}\n type=\"button\"\n />\n <button\n aria-label=\"Italic\"\n className={`ql-italic ql-button${getVisibleClass(SELECT_WIDTH + (BUTTON_WIDTH * 2))}`}\n type=\"button\"\n />\n <button\n aria-label=\"Underline\"\n className={`ql-underline ql-button${getVisibleClass(SELECT_WIDTH + (BUTTON_WIDTH * 3))}`}\n type=\"button\"\n />\n <select\n aria-label=\"Text Color\"\n className={`ql-color ql-select${getVisibleClass(SELECT_WIDTH + (BUTTON_WIDTH * 4))}`}\n defaultValue=\"\"\n onChange={e => e.persist()}\n />\n <div className=\"ql-divider\" />\n <select\n aria-label=\"Alignment\"\n className={`ql-align ql-select${getVisibleClass(SELECT_WIDTH + (BUTTON_WIDTH * 5))}`}\n defaultValue=\"\"\n onChange={e => e.persist()}\n />\n <button\n aria-label=\"Ordered List\"\n className={`ql-list ql-button${getVisibleClass(SELECT_WIDTH + (BUTTON_WIDTH * 6))}`}\n type=\"button\"\n value=\"ordered\"\n />\n <button\n aria-label=\"Bullet List\"\n className={`ql-list ql-button${getVisibleClass(SELECT_WIDTH + (BUTTON_WIDTH * 7))}`}\n type=\"button\"\n value=\"bullet\"\n />\n <button\n aria-label=\"Link\"\n className={`ql-link ql-button${getVisibleClass(SELECT_WIDTH + (BUTTON_WIDTH * 8))}`}\n type=\"button\"\n />\n {overflow && !isOpened && (\n <button\n aria-label=\"More Options\"\n className=\"qlMore\"\n onClick={onClickMore}\n type=\"button\"\n >\n &gt;&gt;\n </button>\n )}\n </div>\n );\n};\n\nCustomToolbar.propTypes = {\n itemWidth: PropTypes.number,\n};\n\nCustomToolbar.defaultProps = {\n itemWidth: 0,\n};\n\nexport default CustomToolbar;\n"],"names":["SELECT_WIDTH","BUTTON_WIDTH","BAR_WIDTH","CustomToolbar","itemWidth","overflow","useState","isOpened","setIsOpened","onClickMore","useCallback","wrapper","useRef","getVisibleClass","limit","useLayoutEffect","current","Array","from","children","forEach","el","classList","remove","_jsxs","classNames","maxWidth","_jsx","e","persist","fontSizes","map","size","propTypes","PropTypes","number","defaultProps"],"mappings":"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"}
@@ -388,7 +388,7 @@
388
388
  }
389
389
 
390
390
  .forSlides .paneToggler {
391
- background-color: #404651;
391
+ background-color: #343C6A;
392
392
  }
393
393
 
394
394
 
@@ -291,7 +291,7 @@
291
291
  }
292
292
 
293
293
  .forSlides .paneToggler {
294
- background-color: #2E354A;
294
+ background-color: #343C6A;
295
295
  }
296
296
 
297
297
 
@@ -15,7 +15,8 @@
15
15
  display: flex;
16
16
  flex-direction: column;
17
17
  background-color: $white;
18
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
18
+ box-shadow: 0 0 4px rgba(10, 21, 81, 0.06);
19
+ border-radius: 4px;
19
20
 
20
21
  .controllerItem {
21
22
  transition: $transition;
@@ -24,6 +25,10 @@
24
25
  background-color: $inputGray;
25
26
  }
26
27
 
28
+ &.isWhite {
29
+ background-color: $white;
30
+ }
31
+
27
32
  &.isSingle {
28
33
  border-radius: 6px;
29
34
  }
@@ -31,7 +36,6 @@
31
36
  &:hover .jfReportSVG:not(.icon-trashLine) {
32
37
  fill: $blue;
33
38
  }
34
-
35
39
  &:hover .jfReportSVG.icon-trashLine {
36
40
  fill: $danger;
37
41
  }
@@ -39,12 +43,14 @@
39
43
 
40
44
  .controllerIndicator {
41
45
  font-size: 0.75rem;
46
+ font-weight: 500;
42
47
  margin: 15px auto;
43
48
  text-align: center;
49
+ color: #0A1551;
44
50
  }
45
51
 
46
52
  & + .floatingController-container {
47
- margin-top: 10px;
53
+ margin-top: 8px;
48
54
  }
49
55
  }
50
56
 
@@ -54,18 +60,17 @@
54
60
 
55
61
  &.forBar {
56
62
  height: 50px;
57
- background: #404651;
63
+ background: #252D5B;
58
64
  border-radius: 6px;
59
65
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
60
66
  max-width: 436px;
61
- min-width: 280px;
62
- padding: 13px 15px;
67
+ padding: 12px;
63
68
  text-align: center;
64
69
 
65
70
  .divider {
66
71
  width: 1px;
67
- height: 30px;
68
- background: #272D3D;
72
+ height: 20px;
73
+ background: rgba(#FFFFFF, 0.1);
69
74
  }
70
75
 
71
76
  .select-zoom {
@@ -80,46 +85,58 @@
80
85
  }
81
86
 
82
87
  .forSlide {
83
- margin: 0 20px;
88
+ margin: 0 12px;
84
89
  }
85
90
 
86
91
  .jfReportButton, .controllerItem {
87
- height: 24px;
88
- width: 24px;
92
+ height: 28px;
93
+ width: 28px;
89
94
  padding: 0 4px;
90
95
  }
91
96
 
92
97
  .jfReportButton {
93
98
  &.download {
99
+ background-color: rgba(120, 187, 7, 0.2);
100
+ &:hover { background-color: rgba(120, 187, 7, 0.6); }
94
101
  .icon-download {
95
102
  width: 8px;
96
103
  height: 10px;
97
104
  }
98
105
  }
99
106
  &.print {
100
- border: 1px solid #A8AABF;
107
+ border: 1px solid #6F76A7;
108
+ background-color: rgba(111, 118, 167, 0.2);
109
+ &:hover { background-color: rgba(111, 118, 167, 0.6); }
101
110
  .icon-print {
102
- width: 10px;
103
- height: 10px;
104
- fill: #A8AABF;
111
+ width: 12px;
112
+ height: 12px;
113
+ fill: #FFF;
105
114
  }
106
115
  }
107
- &.download, &.print {
108
- background-color: rgba(1, 189, 111, 0.1);
109
- &:hover {
110
- background-color: #2e525c;
116
+ &.isSuccess {
117
+ border: 1px solid #78BB07;
118
+ background-color: rgba(120, 187, 7, 0.2);
119
+ &:hover { background-color: rgba(120, 187, 7, 0.6); }
120
+ .icon-download {
121
+ width: 11px;
122
+ height: 14px;
123
+ fill: #fff;
111
124
  }
112
125
  }
126
+ &.forAction {
127
+ .icon-close { fill: rgba(200, 206, 237, 0.6); }
128
+ &:hover .icon-close { fill: #fff; }
129
+ }
113
130
  .icon-fullscreen {
114
- width: 14px;
115
- height: 14px;
131
+ width: 12px;
132
+ height: 12px;
116
133
  }
117
134
  }
118
135
 
119
136
  .action-container {
120
- margin-left: 20px;
137
+ margin-left: 12px;
121
138
  .jfReportButton + .jfReportButton:not(.close) {
122
- margin-left: 10px;
139
+ margin-left: 8px;
123
140
  }
124
141
  .close {
125
142
  margin-left: 15px;
@@ -135,13 +152,13 @@
135
152
  }
136
153
 
137
154
  .controllerItem {
138
- background: #303339;
155
+ background: #343C6A;
139
156
  border-radius: 3px;
140
157
  border: none;
141
158
  transition: $transition;
142
159
 
143
160
  &:hover {
144
- background: lighten(#2E354A, 5);
161
+ background: rgba(111, 118, 167, 0.6);
145
162
  }
146
163
  }
147
164
 
@@ -171,7 +188,7 @@
171
188
  letter-spacing: .7px;
172
189
  font-size: 0.875rem;
173
190
  line-height: 28px;
174
- min-width: 65px;
191
+ min-width: 57px;
175
192
  padding: 0 5px;
176
193
 
177
194
  span {
@@ -187,6 +204,7 @@
187
204
 
188
205
  .floatingController-container {
189
206
  border-radius: 6px;
207
+ background-color: $inputGray;
190
208
 
191
209
  & > .controllerItem:not(.isSingle) {
192
210
  padding: 8px 6px;
@@ -219,9 +237,10 @@
219
237
 
220
238
  &.forSlides, &.forPageAction {
221
239
  .floatingController-container:not(.hasGroup) {
240
+ padding: 4px;
222
241
  .controllerItem {
223
- padding: 7px 6px;
224
- border-radius: 6px;
242
+ padding: 0;
243
+ border-radius: 3px;
225
244
  }
226
245
  }
227
246
  }
@@ -233,12 +252,22 @@
233
252
 
234
253
  .floatingController-container {
235
254
  border-radius: 3px;
236
- }
237
255
 
238
- .floatingController-container.hasGroup {
239
- padding: 6px 0;
240
256
  .controllerItem {
241
- padding: 6px 5px;
257
+ width: 20px;
258
+ height: 20px;
259
+ &:hover { background-color: #F3F3FE; }
260
+ }
261
+
262
+ &.hasGroup {
263
+ padding: 4px;
264
+ .controllerItem {
265
+ border-radius: 3px;
266
+ padding: 0;
267
+ margin-top: 4px;
268
+ &:first-child { margin-top: 0; }
269
+ }
270
+ .isDanger:hover { background-color: rgba(235, 63, 63, 0.1); }
242
271
  }
243
272
  }
244
273
  }
@@ -35,9 +35,11 @@
35
35
  width: 40px;
36
36
  padding: 3px;
37
37
  font-size: 0.875rem;
38
+ font-weight: 500;
38
39
  background-color: $white;
39
40
  border-radius: 3px;
40
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
41
+ box-shadow: 0 0 4px rgba(10, 21, 81, 0.06);
42
+ color: #0A1551;
41
43
  }
42
44
  }
43
45
  }
@@ -183,6 +185,8 @@
183
185
  height: 14px;
184
186
  fill: $blue;
185
187
  stroke: $blue;
188
+
189
+ > path { fill: $blue; }
186
190
  }
187
191
  }
188
192
 
@@ -717,7 +717,7 @@
717
717
  }
718
718
 
719
719
  .floatingController.forBar .toolSection-dropdownWrapper {
720
- margin-right: 20px;
720
+ margin-right: 12px;
721
721
 
722
722
  &:after {
723
723
  display: none;
@@ -725,18 +725,22 @@
725
725
 
726
726
  &:before {
727
727
  right: 7px;
728
- border-left: 4px solid transparent;
729
- border-right: 4px solid transparent;
730
- border-top: 6px solid $white;
731
- top: calc(50% - 3px);
728
+ top: calc(50% - 2px);
729
+ background-repeat: no-repeat;
730
+ background-image: url("data:image/svg+xml,%3Csvg width=%276%27 height=%274%27 viewBox=%270 0 6 4%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M5.00506 0.413817C5.23825 0.191095 5.60551 0.195263 5.83143 0.427641C6.0582 0.660893 6.05369 1.03103 5.8167 1.2733L3.40473 3.58782C3.17841 3.80363 2.82568 3.80438 2.5933 3.58747C2.29148 3.29771 2.29148 3.29771 1.38603 2.42839C0.482784 1.56125 0.482784 1.56125 0.16829 1.25885C-0.0560968 1.02805 -0.0560968 0.65844 0.16829 0.427641C0.393201 0.196305 0.757388 0.191435 0.995763 0.413283L2.99983 2.33753L5.00506 0.413817Z%27 fill=%27white%27/%3E%3C/svg%3E%0A");
731
+ background-size: contain;
732
+ width: 8px;
733
+ height: 5px;
734
+ border: 0;
732
735
  }
733
736
 
734
737
  .toolSection-dropdown {
735
- width: 60px;
736
- height: 24px;
738
+ width: 58px;
739
+ height: 28px;
737
740
  font-size: 0.675rem;
738
- padding-left: 10px;
741
+ padding-left: 6px;
739
742
  color: $white;
743
+ appearance: none;
740
744
  }
741
745
  }
742
746
 
@@ -301,7 +301,7 @@
301
301
 
302
302
  &.addElementToggle {
303
303
  width: 160px;
304
- background-color: #303339;
304
+ background-color: #252D5B;
305
305
  height: 54px;
306
306
  border-radius: 0;
307
307
  border-top-right-radius: 100px;
@@ -221,7 +221,7 @@
221
221
  top: 0;
222
222
  right: -24px;
223
223
  background-color: $blue;
224
- border-radius: 3px;
224
+ border-radius: 4px;
225
225
  text-align: center;
226
226
  pointer-events: all;
227
227
  animation: .2s fadeRight forwards;
@@ -238,20 +238,34 @@
238
238
  transition: .3s ease-in-out;
239
239
  transform: translateZ(0);
240
240
  }
241
-
242
- &:hover svg {
243
- opacity: .7;
244
- }
245
241
  }
246
242
 
247
243
  &:not(.forLocked) {
244
+ padding: 0 4px;
248
245
  .reportItemMenu-item {
246
+ display: inline-flex;
247
+ align-items: center;
248
+ justify-content: center;
249
+ width: 20px;
250
+ height: 20px;
251
+ padding: 0;
252
+ border-radius: 3px;
253
+ transition: 0.3s ease-in;
254
+
255
+ + .reportItemMenu-item {
256
+ margin-top: 4px;
257
+ }
258
+
249
259
  &:first-child {
250
- margin-top: 6px;
260
+ margin-top: 4px;
251
261
  }
252
262
 
253
263
  &:last-child {
254
- margin-bottom: 6px;
264
+ margin-bottom: 4px;
265
+ }
266
+
267
+ &:hover {
268
+ background-color: rgba(255, 255, 255, 0.2);
255
269
  }
256
270
  }
257
271
  }
@@ -39,7 +39,7 @@
39
39
  }
40
40
 
41
41
  .controllerItem .jfReportSVG {
42
- fill: $additionalGray;
42
+ fill: $gray;
43
43
  }
44
44
 
45
45
  .toolItem-icon {