Refactor SVG and CSS properties to use camelCase notation
- Updated SVG attributes from kebab-case (e.g., fill-rule, clip-rule) to camelCase (e.g., fillRule, clipRule) in multiple icon components. - Changed CSS properties from kebab-case (e.g., stroke-width, clip-path) to camelCase (e.g., strokeWidth, clipPath) in various SCSS files.
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.57009 1.77983C4.05009 1.59983 5.00009 1.70983 5.25009 2.24983C5.50009 2.78983 5.65009 3.48983 5.66009 3.31983C5.64096 2.80313 5.68461 2.28602 5.79009 1.77983C5.90124 1.45565 6.15591 1.20098 6.48009 1.08983C6.77741 0.995805 7.09308 0.975217 7.40009 1.02983C7.71051 1.09373 7.98544 1.27226 8.17009 1.52983C8.40404 2.11296 8.53596 2.73199 8.56009 3.35983C8.58497 2.82409 8.67565 2.29344 8.83009 1.77983C8.9972 1.54438 9.24123 1.37462 9.52009 1.29983C9.85069 1.23939 10.1895 1.23939 10.5201 1.29983C10.7915 1.38989 11.0288 1.56089 11.2001 1.78983C11.4125 2.31998 11.5407 2.88008 11.5801 3.44983C11.5801 3.58983 11.6501 3.05983 11.8701 2.70983C12.0468 2.18516 12.6154 1.9031 13.1401 2.07983C13.6648 2.25656 13.9468 2.82516 13.7701 3.34983C13.7701 3.99983 13.7701 3.96983 13.7701 4.40983C13.7701 4.84983 13.7701 5.23983 13.7701 5.60983C13.7341 6.19505 13.6538 6.77671 13.5301 7.34983C13.3565 7.85715 13.1143 8.33829 12.8101 8.77983C12.3247 9.31989 11.9235 9.93009 11.6201 10.5898C11.5461 10.9178 11.5125 11.2537 11.5201 11.5898C11.5191 11.9005 11.5594 12.2099 11.6401 12.5098C11.2313 12.5535 10.8189 12.5535 10.4101 12.5098C10.0201 12.4498 9.54009 11.6698 9.41009 11.4298C9.34577 11.301 9.21412 11.2195 9.07009 11.2195C8.92607 11.2195 8.79442 11.301 8.73009 11.4298C8.51009 11.8098 8.02009 12.4998 7.73009 12.5398C7.06009 12.6198 5.67009 12.5398 4.59009 12.5398C4.59009 12.5398 4.78009 11.5398 4.36009 11.1798C3.94009 10.8198 3.53009 10.3998 3.22009 10.1198L2.39009 9.19983C1.80478 8.65651 1.37647 7.96569 1.15009 7.19983C0.940094 6.25983 0.960094 5.80983 1.15009 5.42983C1.34388 5.11604 1.64649 4.88464 2.00009 4.77983C2.29386 4.72654 2.59628 4.74716 2.88009 4.83983C3.07636 4.922 3.24598 5.05701 3.37009 5.22983C3.60009 5.53983 3.68009 5.68983 3.58009 5.34983C3.48009 5.00983 3.26009 4.75983 3.15009 4.34983C2.93595 3.86563 2.80737 3.34796 2.77009 2.81983C2.81108 2.346 3.14192 1.9474 3.60009 1.81983" fill="white"/>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M3.57009 1.77983C4.05009 1.59983 5.00009 1.70983 5.25009 2.24983C5.50009 2.78983 5.65009 3.48983 5.66009 3.31983C5.64096 2.80313 5.68461 2.28602 5.79009 1.77983C5.90124 1.45565 6.15591 1.20098 6.48009 1.08983C6.77741 0.995805 7.09308 0.975217 7.40009 1.02983C7.71051 1.09373 7.98544 1.27226 8.17009 1.52983C8.40404 2.11296 8.53596 2.73199 8.56009 3.35983C8.58497 2.82409 8.67565 2.29344 8.83009 1.77983C8.9972 1.54438 9.24123 1.37462 9.52009 1.29983C9.85069 1.23939 10.1895 1.23939 10.5201 1.29983C10.7915 1.38989 11.0288 1.56089 11.2001 1.78983C11.4125 2.31998 11.5407 2.88008 11.5801 3.44983C11.5801 3.58983 11.6501 3.05983 11.8701 2.70983C12.0468 2.18516 12.6154 1.9031 13.1401 2.07983C13.6648 2.25656 13.9468 2.82516 13.7701 3.34983C13.7701 3.99983 13.7701 3.96983 13.7701 4.40983C13.7701 4.84983 13.7701 5.23983 13.7701 5.60983C13.7341 6.19505 13.6538 6.77671 13.5301 7.34983C13.3565 7.85715 13.1143 8.33829 12.8101 8.77983C12.3247 9.31989 11.9235 9.93009 11.6201 10.5898C11.5461 10.9178 11.5125 11.2537 11.5201 11.5898C11.5191 11.9005 11.5594 12.2099 11.6401 12.5098C11.2313 12.5535 10.8189 12.5535 10.4101 12.5098C10.0201 12.4498 9.54009 11.6698 9.41009 11.4298C9.34577 11.301 9.21412 11.2195 9.07009 11.2195C8.92607 11.2195 8.79442 11.301 8.73009 11.4298C8.51009 11.8098 8.02009 12.4998 7.73009 12.5398C7.06009 12.6198 5.67009 12.5398 4.59009 12.5398C4.59009 12.5398 4.78009 11.5398 4.36009 11.1798C3.94009 10.8198 3.53009 10.3998 3.22009 10.1198L2.39009 9.19983C1.80478 8.65651 1.37647 7.96569 1.15009 7.19983C0.940094 6.25983 0.960094 5.80983 1.15009 5.42983C1.34388 5.11604 1.64649 4.88464 2.00009 4.77983C2.29386 4.72654 2.59628 4.74716 2.88009 4.83983C3.07636 4.922 3.24598 5.05701 3.37009 5.22983C3.60009 5.53983 3.68009 5.68983 3.58009 5.34983C3.48009 5.00983 3.26009 4.75983 3.15009 4.34983C2.93595 3.86563 2.80737 3.34796 2.77009 2.81983C2.79054 2.33907 3.11066 1.92291 3.57009 1.77983Z" stroke="black" stroke-width="0.75" strokeLinejoin="round"/>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M3.57009 1.77983C4.05009 1.59983 5.00009 1.70983 5.25009 2.24983C5.50009 2.78983 5.65009 3.48983 5.66009 3.31983C5.64096 2.80313 5.68461 2.28602 5.79009 1.77983C5.90124 1.45565 6.15591 1.20098 6.48009 1.08983C6.77741 0.995805 7.09308 0.975217 7.40009 1.02983C7.71051 1.09373 7.98544 1.27226 8.17009 1.52983C8.40404 2.11296 8.53596 2.73199 8.56009 3.35983C8.58497 2.82409 8.67565 2.29344 8.83009 1.77983C8.9972 1.54438 9.24123 1.37462 9.52009 1.29983C9.85069 1.23939 10.1895 1.23939 10.5201 1.29983C10.7915 1.38989 11.0288 1.56089 11.2001 1.78983C11.4125 2.31998 11.5407 2.88008 11.5801 3.44983C11.5801 3.58983 11.6501 3.05983 11.8701 2.70983C12.0468 2.18516 12.6154 1.9031 13.1401 2.07983C13.6648 2.25656 13.9468 2.82516 13.7701 3.34983C13.7701 3.99983 13.7701 3.96983 13.7701 4.40983C13.7701 4.84983 13.7701 5.23983 13.7701 5.60983C13.7341 6.19505 13.6538 6.77671 13.5301 7.34983C13.3565 7.85715 13.1143 8.33829 12.8101 8.77983C12.3247 9.31989 11.9235 9.93009 11.6201 10.5898C11.5461 10.9178 11.5125 11.2537 11.5201 11.5898C11.5191 11.9005 11.5594 12.2099 11.6401 12.5098C11.2313 12.5535 10.8189 12.5535 10.4101 12.5098C10.0201 12.4498 9.54009 11.6698 9.41009 11.4298C9.34577 11.301 9.21412 11.2195 9.07009 11.2195C8.92607 11.2195 8.79442 11.301 8.73009 11.4298C8.51009 11.8098 8.02009 12.4998 7.73009 12.5398C7.06009 12.6198 5.67009 12.5398 4.59009 12.5398C4.59009 12.5398 4.78009 11.5398 4.36009 11.1798C3.94009 10.8198 3.53009 10.3998 3.22009 10.1198L2.39009 9.19983C1.80478 8.65651 1.37647 7.96569 1.15009 7.19983C0.940094 6.25983 0.960094 5.80983 1.15009 5.42983C1.34388 5.11604 1.64649 4.88464 2.00009 4.77983C2.29386 4.72654 2.59628 4.74716 2.88009 4.83983C3.07636 4.922 3.24598 5.05701 3.37009 5.22983C3.60009 5.53983 3.68009 5.68983 3.58009 5.34983C3.48009 5.00983 3.26009 4.75983 3.15009 4.34983C2.93595 3.86563 2.80737 3.34796 2.77009 2.81983C2.79054 2.33907 3.11066 1.92291 3.57009 1.77983Z" stroke="black" strokeWidth="0.75" strokeLinejoin="round"/>
|
||||
<path d="M11.3203 9.4548V6.00302C11.3203 5.7964 11.1524 5.62891 10.9453 5.62891C10.7382 5.62891 10.5703 5.7964 10.5703 6.00302V9.4548C10.5703 9.66141 10.7382 9.82891 10.9453 9.82891C11.1524 9.82891 11.3203 9.66141 11.3203 9.4548Z" fill="black"/>
|
||||
<path d="M9.34031 9.45353L9.32031 5.99998C9.31911 5.79386 9.15025 5.62772 8.94315 5.62891C8.73605 5.6301 8.56913 5.79816 8.57032 6.00428L8.59032 9.45783C8.59151 9.66396 8.76037 9.83009 8.96747 9.8289C9.17458 9.82771 9.3415 9.65965 9.34031 9.45353Z" fill="black"/>
|
||||
<path d="M6.57032 6.00881L6.59032 9.45342C6.59153 9.66201 6.7604 9.83012 6.96751 9.8289C7.17461 9.82768 7.34152 9.65759 7.34031 9.449L7.32031 6.0044C7.3191 5.7958 7.15022 5.62769 6.94312 5.62891C6.73602 5.63013 6.56911 5.80022 6.57032 6.00881Z" fill="black"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
@@ -1,3 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15H2C1.44772 15 1 14.5523 1 14V8C1 4.13401 4.13401 1 8 1Z" fill="black" stroke="white" stroke-width="2"/>
|
||||
<path d="M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15H2C1.44772 15 1 14.5523 1 14V8C1 4.13401 4.13401 1 8 1Z" fill="black" stroke="white" strokeWidth="2"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 270 B After Width: | Height: | Size: 269 B |
@@ -1,6 +1,6 @@
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.98353 8.91984C4.88353 8.54984 4.78353 8.06984 4.57353 7.36984C4.36353 6.66984 4.23353 6.50984 4.10353 6.13984C3.97353 5.76984 3.80353 5.41984 3.60353 4.95984C3.42033 4.4899 3.2667 4.00896 3.14353 3.51984C3.06029 3.10764 3.1627 2.6797 3.42353 2.34984C3.78238 1.99966 4.30021 1.8664 4.78352 1.99984C5.16218 2.16543 5.4826 2.44057 5.70353 2.78984C5.99856 3.26151 6.24006 3.76462 6.42353 4.28984C6.70527 5.00947 6.90975 5.757 7.03352 6.51984L7.12353 6.96984C7.12353 6.96984 7.12353 5.84984 7.12353 5.80984C7.12353 4.80984 7.06353 3.98984 7.12353 2.86984C7.12353 2.73984 7.18353 2.27984 7.20353 2.14984C7.22938 1.7198 7.48564 1.33732 7.87353 1.14984C8.31881 0.950053 8.82824 0.950053 9.27353 1.14984C9.67213 1.32827 9.93818 1.71385 9.96352 2.14984C9.96352 2.25984 10.0535 3.14984 10.0535 3.25984C10.0535 4.25984 10.0535 4.89984 10.0535 5.42984C10.0535 5.65984 10.0535 7.05984 10.0535 6.89984C10.0771 5.5803 10.1907 4.26391 10.3935 2.95984C10.512 2.55128 10.7995 2.21285 11.1835 2.02984C11.6585 1.84278 12.198 1.93527 12.5835 2.26984C12.8717 2.58613 13.0413 2.99253 13.0635 3.41984C13.0635 3.82984 13.0635 4.31984 13.0635 4.66984C13.0635 5.53984 13.0635 5.98984 13.0635 6.78984C13.0635 6.78984 13.0635 7.08984 13.0635 6.96984C13.1535 6.68984 13.2535 6.42984 13.3335 6.22984C13.4135 6.02984 13.5735 5.61984 13.6935 5.36984C13.8156 5.1315 13.9526 4.90105 14.1035 4.67984C14.2604 4.42557 14.4955 4.22906 14.7735 4.11984C15.024 4.02302 15.3029 4.03099 15.5474 4.14197C15.7919 4.25294 15.9815 4.45758 16.0735 4.70984C16.1331 5.07409 16.1331 5.44559 16.0735 5.80984C16.0069 6.36927 15.8897 6.92152 15.7235 7.45984C15.5935 7.90984 15.4535 8.68984 15.3835 9.05984C15.3135 9.42984 15.1535 10.4398 15.0235 10.8798C14.831 11.4047 14.5651 11.8997 14.2335 12.3498C13.7483 12.8901 13.3472 13.5002 13.0435 14.1598C12.9688 14.4877 12.9352 14.8236 12.9435 15.1598C12.9419 15.4705 12.9823 15.78 13.0635 16.0798C12.6547 16.1234 12.2424 16.1234 11.8335 16.0798C11.4435 16.0198 10.9635 15.2398 10.8335 14.9998C10.7692 14.871 10.6376 14.7895 10.4935 14.7895C10.3495 14.7895 10.2178 14.871 10.1535 14.9998C9.92353 15.3798 9.44353 16.0698 9.10353 16.1098C8.43353 16.1898 7.05353 16.1098 5.96353 16.1098C5.96353 16.1098 6.15353 15.1098 5.73353 14.7498C5.31353 14.3898 4.90353 13.9698 4.59353 13.6898L3.76353 12.7698C3.48353 12.4098 3.13353 11.6798 2.52353 10.7698C2.17353 10.2698 1.52353 9.67984 1.24353 9.18984C1.00845 8.79216 0.940151 8.31767 1.05353 7.86984C1.22333 7.2752 1.81419 6.9043 2.42353 7.00984C2.88703 7.04038 3.32544 7.2313 3.66353 7.54984C3.93124 7.78148 4.18189 8.03213 4.41353 8.29984C4.57353 8.48984 4.61353 8.57984 4.79353 8.80984C4.97353 9.03984 5.09353 9.26984 5.00353 8.92984" fill="white"/>
|
||||
<path d="M4.98353 8.91984C4.88353 8.54984 4.78353 8.06984 4.57353 7.36984C4.36353 6.66984 4.23353 6.50984 4.10353 6.13984C3.97353 5.76984 3.80353 5.41984 3.60353 4.95984C3.42033 4.4899 3.2667 4.00896 3.14353 3.51984C3.06029 3.10764 3.1627 2.6797 3.42353 2.34984C3.78238 1.99966 4.30021 1.8664 4.78352 1.99984C5.16218 2.16543 5.4826 2.44057 5.70353 2.78984C5.99856 3.26151 6.24006 3.76462 6.42353 4.28984C6.70527 5.00947 6.90975 5.757 7.03352 6.51984L7.12353 6.96984C7.12353 6.96984 7.12353 5.84984 7.12353 5.80984C7.12353 4.80984 7.06353 3.98984 7.12353 2.86984C7.12353 2.73984 7.18353 2.27984 7.20353 2.14984C7.22938 1.7198 7.48564 1.33732 7.87353 1.14984C8.31881 0.950053 8.82824 0.950053 9.27353 1.14984C9.67213 1.32827 9.93818 1.71385 9.96352 2.14984C9.96352 2.25984 10.0535 3.14984 10.0535 3.25984C10.0535 4.25984 10.0535 4.89984 10.0535 5.42984C10.0535 5.65984 10.0535 7.05984 10.0535 6.89984C10.0771 5.5803 10.1907 4.26391 10.3935 2.95984C10.512 2.55128 10.7995 2.21285 11.1835 2.02984C11.6585 1.84278 12.198 1.93527 12.5835 2.26984C12.8717 2.58613 13.0413 2.99253 13.0635 3.41984C13.0635 3.82984 13.0635 4.31984 13.0635 4.66984C13.0635 5.53984 13.0635 5.98984 13.0635 6.78984C13.0635 6.78984 13.0635 7.08984 13.0635 6.96984C13.1535 6.68984 13.2535 6.42984 13.3335 6.22984C13.4135 6.02984 13.5735 5.61984 13.6935 5.36984C13.8156 5.1315 13.9526 4.90105 14.1035 4.67984C14.2604 4.42557 14.4955 4.22906 14.7735 4.11984C15.024 4.02302 15.3029 4.03099 15.5474 4.14197C15.7919 4.25294 15.9815 4.45758 16.0735 4.70984C16.1331 5.07409 16.1331 5.44559 16.0735 5.80984C16.0069 6.36927 15.8897 6.92152 15.7235 7.45984C15.5935 7.90984 15.4535 8.68984 15.3835 9.05984C15.3135 9.42984 15.1535 10.4398 15.0235 10.8798C14.831 11.4047 14.5651 11.8997 14.2335 12.3498C13.7483 12.8901 13.3472 13.5002 13.0435 14.1598C12.9688 14.4877 12.9352 14.8236 12.9435 15.1598C12.9419 15.4705 12.9823 15.78 13.0635 16.0798C12.6547 16.1234 12.2424 16.1234 11.8335 16.0798C11.4435 16.0198 10.9635 15.2398 10.8335 14.9998C10.7692 14.871 10.6376 14.7895 10.4935 14.7895C10.3495 14.7895 10.2178 14.871 10.1535 14.9998C9.92353 15.3798 9.44353 16.0698 9.10353 16.1098C8.43353 16.1898 7.05353 16.1098 5.96353 16.1098C5.96353 16.1098 6.15353 15.1098 5.73353 14.7498C5.31353 14.3898 4.90353 13.9698 4.59353 13.6898L3.76353 12.7698C3.48353 12.4098 3.13353 11.6798 2.52353 10.7698C2.17353 10.2698 1.52353 9.67984 1.24353 9.18984C1.00845 8.79216 0.940151 8.31767 1.05353 7.86984C1.22333 7.2752 1.81419 6.9043 2.42353 7.00984C2.88703 7.04038 3.32544 7.2313 3.66353 7.54984C3.93124 7.78148 4.18189 8.03213 4.41353 8.29984C4.57353 8.48984 4.61353 8.57984 4.79353 8.80984C4.97353 9.03984 5.09353 9.26984 5.00353 8.92984" stroke="black" stroke-width="0.75" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M4.98353 8.91984C4.88353 8.54984 4.78353 8.06984 4.57353 7.36984C4.36353 6.66984 4.23353 6.50984 4.10353 6.13984C3.97353 5.76984 3.80353 5.41984 3.60353 4.95984C3.42033 4.4899 3.2667 4.00896 3.14353 3.51984C3.06029 3.10764 3.1627 2.6797 3.42353 2.34984C3.78238 1.99966 4.30021 1.8664 4.78352 1.99984C5.16218 2.16543 5.4826 2.44057 5.70353 2.78984C5.99856 3.26151 6.24006 3.76462 6.42353 4.28984C6.70527 5.00947 6.90975 5.757 7.03352 6.51984L7.12353 6.96984C7.12353 6.96984 7.12353 5.84984 7.12353 5.80984C7.12353 4.80984 7.06353 3.98984 7.12353 2.86984C7.12353 2.73984 7.18353 2.27984 7.20353 2.14984C7.22938 1.7198 7.48564 1.33732 7.87353 1.14984C8.31881 0.950053 8.82824 0.950053 9.27353 1.14984C9.67213 1.32827 9.93818 1.71385 9.96352 2.14984C9.96352 2.25984 10.0535 3.14984 10.0535 3.25984C10.0535 4.25984 10.0535 4.89984 10.0535 5.42984C10.0535 5.65984 10.0535 7.05984 10.0535 6.89984C10.0771 5.5803 10.1907 4.26391 10.3935 2.95984C10.512 2.55128 10.7995 2.21285 11.1835 2.02984C11.6585 1.84278 12.198 1.93527 12.5835 2.26984C12.8717 2.58613 13.0413 2.99253 13.0635 3.41984C13.0635 3.82984 13.0635 4.31984 13.0635 4.66984C13.0635 5.53984 13.0635 5.98984 13.0635 6.78984C13.0635 6.78984 13.0635 7.08984 13.0635 6.96984C13.1535 6.68984 13.2535 6.42984 13.3335 6.22984C13.4135 6.02984 13.5735 5.61984 13.6935 5.36984C13.8156 5.1315 13.9526 4.90105 14.1035 4.67984C14.2604 4.42557 14.4955 4.22906 14.7735 4.11984C15.024 4.02302 15.3029 4.03099 15.5474 4.14197C15.7919 4.25294 15.9815 4.45758 16.0735 4.70984C16.1331 5.07409 16.1331 5.44559 16.0735 5.80984C16.0069 6.36927 15.8897 6.92152 15.7235 7.45984C15.5935 7.90984 15.4535 8.68984 15.3835 9.05984C15.3135 9.42984 15.1535 10.4398 15.0235 10.8798C14.831 11.4047 14.5651 11.8997 14.2335 12.3498C13.7483 12.8901 13.3472 13.5002 13.0435 14.1598C12.9688 14.4877 12.9352 14.8236 12.9435 15.1598C12.9419 15.4705 12.9823 15.78 13.0635 16.0798C12.6547 16.1234 12.2424 16.1234 11.8335 16.0798C11.4435 16.0198 10.9635 15.2398 10.8335 14.9998C10.7692 14.871 10.6376 14.7895 10.4935 14.7895C10.3495 14.7895 10.2178 14.871 10.1535 14.9998C9.92353 15.3798 9.44353 16.0698 9.10353 16.1098C8.43353 16.1898 7.05353 16.1098 5.96353 16.1098C5.96353 16.1098 6.15353 15.1098 5.73353 14.7498C5.31353 14.3898 4.90353 13.9698 4.59353 13.6898L3.76353 12.7698C3.48353 12.4098 3.13353 11.6798 2.52353 10.7698C2.17353 10.2698 1.52353 9.67984 1.24353 9.18984C1.00845 8.79216 0.940151 8.31767 1.05353 7.86984C1.22333 7.2752 1.81419 6.9043 2.42353 7.00984C2.88703 7.04038 3.32544 7.2313 3.66353 7.54984C3.93124 7.78148 4.18189 8.03213 4.41353 8.29984C4.57353 8.48984 4.61353 8.57984 4.79353 8.80984C4.97353 9.03984 5.09353 9.26984 5.00353 8.92984" stroke="black" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M12.3555 13.0798V9.62802C12.3555 9.4214 12.1876 9.25391 11.9805 9.25391C11.7734 9.25391 11.6055 9.4214 11.6055 9.62802V13.0798C11.6055 13.2864 11.7734 13.4539 11.9805 13.4539C12.1876 13.4539 12.3555 13.2864 12.3555 13.0798Z" fill="black"/>
|
||||
<path d="M10.3655 13.0796L10.3555 9.62605C10.3549 9.41993 10.1865 9.25331 9.97939 9.25391C9.77228 9.2545 9.60487 9.42208 9.60547 9.6282L9.61547 13.0818C9.61607 13.2879 9.78444 13.4545 9.99155 13.4539C10.1987 13.4533 10.3661 13.2857 10.3655 13.0796Z" fill="black"/>
|
||||
<path d="M7.60938 9.62991L7.62938 13.0745C7.63059 13.2831 7.79947 13.4512 8.00657 13.45C8.21367 13.4488 8.38058 13.2787 8.37937 13.0701L8.35937 9.62549C8.35816 9.4169 8.18929 9.24879 7.98218 9.25001C7.77508 9.25123 7.60817 9.42131 7.60938 9.62991Z" fill="black"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
@@ -1,6 +1,6 @@
|
||||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.90366 12.8932C3.62366 12.5332 3.27366 11.8032 2.66366 10.8932C2.31366 10.3932 1.45366 9.44321 1.19366 8.95321C1.00623 8.65544 0.951847 8.29286 1.04366 7.95321C1.20062 7.30742 1.81322 6.87903 2.47366 6.95321C2.98446 7.05582 3.45388 7.30618 3.82366 7.67321C4.08184 7.91638 4.31933 8.18063 4.53366 8.46321C4.69366 8.66321 4.73366 8.74321 4.91366 8.97321C5.09366 9.20321 5.21366 9.43321 5.12366 9.09321C5.05366 8.59321 4.93366 7.75321 4.76366 7.00321C4.63366 6.43321 4.60366 6.34321 4.48366 5.91321C4.36366 5.48321 4.29366 5.12321 4.16366 4.63321C4.04483 4.15178 3.95137 3.66444 3.88366 3.17321C3.75761 2.54491 3.84932 1.89242 4.14366 1.32321C4.49305 0.994578 5.00559 0.907841 5.44366 1.10321C5.88426 1.42855 6.21276 1.88286 6.38366 2.40321C6.64573 3.0436 6.82062 3.71627 6.90366 4.40321C7.06366 5.40321 7.37366 6.86321 7.38366 7.16321C7.38366 6.79321 7.31366 6.01321 7.38366 5.66321C7.45301 5.29833 7.70662 4.99552 8.05366 4.86321C8.35147 4.77183 8.66651 4.75129 8.97366 4.80321C9.2837 4.86802 9.55832 5.04635 9.74366 5.30321C9.97534 5.8866 10.1039 6.50581 10.1237 7.13321C10.1504 6.5838 10.2445 6.03974 10.4037 5.51321C10.5708 5.27776 10.8148 5.108 11.0937 5.03321C11.4243 4.97276 11.7631 4.97276 12.0937 5.03321C12.3648 5.12384 12.6019 5.29472 12.7737 5.52321C12.9854 6.05355 13.1136 6.61355 13.1537 7.18321C13.1537 7.32321 13.2237 6.79321 13.4437 6.44321C13.558 6.10381 13.8447 5.85118 14.1958 5.78048C14.5469 5.70979 14.909 5.83178 15.1458 6.10048C15.3826 6.36919 15.458 6.74381 15.3437 7.08321C15.3437 7.73321 15.3437 7.70321 15.3437 8.14321C15.3437 8.58321 15.3437 8.97321 15.3437 9.34321C15.3072 9.92839 15.227 10.51 15.1037 11.0832C14.9296 11.5903 14.6874 12.0714 14.3837 12.5132C13.8981 13.0532 13.4969 13.6634 13.1937 14.3232C13.1184 14.651 13.0848 14.987 13.0937 15.3232C13.0927 15.6338 13.133 15.9432 13.2137 16.2432C12.8048 16.2864 12.3925 16.2864 11.9837 16.2432C11.5937 16.1832 11.1137 15.4032 10.9837 15.1632C10.9193 15.0343 10.7877 14.9529 10.6437 14.9529C10.4996 14.9529 10.368 15.0343 10.3037 15.1632C10.0837 15.5432 9.59366 16.2332 9.25366 16.2732C8.58366 16.3532 7.20366 16.2732 6.11366 16.2732C6.11366 16.2732 6.29366 15.2732 5.88366 14.9132C5.47366 14.5532 5.05366 14.1332 4.74366 13.8532L3.90366 12.8932Z" fill="white"/>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M3.90366 12.8932C3.62366 12.5332 3.27366 11.8032 2.66366 10.8932C2.31366 10.3932 1.45366 9.44321 1.19366 8.95321C1.00623 8.65544 0.951847 8.29286 1.04366 7.95321C1.20062 7.30742 1.81322 6.87903 2.47366 6.95321C2.98446 7.05582 3.45388 7.30618 3.82366 7.67321C4.08184 7.91638 4.31933 8.18063 4.53366 8.46321C4.69366 8.66321 4.73366 8.74321 4.91366 8.97321C5.09366 9.20321 5.21366 9.43321 5.12366 9.09321C5.05366 8.59321 4.93366 7.75321 4.76366 7.00321C4.63366 6.43321 4.60366 6.34321 4.48366 5.91321C4.36366 5.48321 4.29366 5.12321 4.16366 4.63321C4.04483 4.15178 3.95137 3.66444 3.88366 3.17321C3.75761 2.54491 3.84932 1.89242 4.14366 1.32321C4.49305 0.994578 5.00559 0.907841 5.44366 1.10321C5.88426 1.42855 6.21276 1.88286 6.38366 2.40321C6.64573 3.0436 6.82062 3.71627 6.90366 4.40321C7.06366 5.40321 7.37366 6.86321 7.38366 7.16321C7.38366 6.79321 7.31366 6.01321 7.38366 5.66321C7.45301 5.29833 7.70662 4.99552 8.05366 4.86321C8.35147 4.77183 8.66651 4.75129 8.97366 4.80321C9.2837 4.86802 9.55832 5.04635 9.74366 5.30321C9.97534 5.8866 10.1039 6.50581 10.1237 7.13321C10.1504 6.5838 10.2445 6.03974 10.4037 5.51321C10.5708 5.27776 10.8148 5.108 11.0937 5.03321C11.4243 4.97276 11.7631 4.97276 12.0937 5.03321C12.3648 5.12384 12.6019 5.29472 12.7737 5.52321C12.9854 6.05355 13.1136 6.61355 13.1537 7.18321C13.1537 7.32321 13.2237 6.79321 13.4437 6.44321C13.558 6.10381 13.8447 5.85118 14.1958 5.78048C14.5469 5.70979 14.909 5.83178 15.1458 6.10048C15.3826 6.36919 15.458 6.74381 15.3437 7.08321C15.3437 7.73321 15.3437 7.70321 15.3437 8.14321C15.3437 8.58321 15.3437 8.97321 15.3437 9.34321C15.3072 9.92839 15.227 10.51 15.1037 11.0832C14.9296 11.5903 14.6874 12.0714 14.3837 12.5132C13.8981 13.0532 13.4969 13.6634 13.1937 14.3232C13.1184 14.651 13.0848 14.987 13.0937 15.3232C13.0927 15.6338 13.133 15.9432 13.2137 16.2432C12.8048 16.2864 12.3925 16.2864 11.9837 16.2432C11.5937 16.1832 11.1137 15.4032 10.9837 15.1632C10.9193 15.0343 10.7877 14.9529 10.6437 14.9529C10.4996 14.9529 10.368 15.0343 10.3037 15.1632C10.0837 15.5432 9.59366 16.2332 9.25366 16.2732C8.58366 16.3532 7.20366 16.2732 6.11366 16.2732C6.11366 16.2732 6.29366 15.2732 5.88366 14.9132C5.47366 14.5532 5.05366 14.1332 4.74366 13.8532L3.90366 12.8932Z" stroke="black" stroke-width="0.75" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M3.90366 12.8932C3.62366 12.5332 3.27366 11.8032 2.66366 10.8932C2.31366 10.3932 1.45366 9.44321 1.19366 8.95321C1.00623 8.65544 0.951847 8.29286 1.04366 7.95321C1.20062 7.30742 1.81322 6.87903 2.47366 6.95321C2.98446 7.05582 3.45388 7.30618 3.82366 7.67321C4.08184 7.91638 4.31933 8.18063 4.53366 8.46321C4.69366 8.66321 4.73366 8.74321 4.91366 8.97321C5.09366 9.20321 5.21366 9.43321 5.12366 9.09321C5.05366 8.59321 4.93366 7.75321 4.76366 7.00321C4.63366 6.43321 4.60366 6.34321 4.48366 5.91321C4.36366 5.48321 4.29366 5.12321 4.16366 4.63321C4.04483 4.15178 3.95137 3.66444 3.88366 3.17321C3.75761 2.54491 3.84932 1.89242 4.14366 1.32321C4.49305 0.994578 5.00559 0.907841 5.44366 1.10321C5.88426 1.42855 6.21276 1.88286 6.38366 2.40321C6.64573 3.0436 6.82062 3.71627 6.90366 4.40321C7.06366 5.40321 7.37366 6.86321 7.38366 7.16321C7.38366 6.79321 7.31366 6.01321 7.38366 5.66321C7.45301 5.29833 7.70662 4.99552 8.05366 4.86321C8.35147 4.77183 8.66651 4.75129 8.97366 4.80321C9.2837 4.86802 9.55832 5.04635 9.74366 5.30321C9.97534 5.8866 10.1039 6.50581 10.1237 7.13321C10.1504 6.5838 10.2445 6.03974 10.4037 5.51321C10.5708 5.27776 10.8148 5.108 11.0937 5.03321C11.4243 4.97276 11.7631 4.97276 12.0937 5.03321C12.3648 5.12384 12.6019 5.29472 12.7737 5.52321C12.9854 6.05355 13.1136 6.61355 13.1537 7.18321C13.1537 7.32321 13.2237 6.79321 13.4437 6.44321C13.558 6.10381 13.8447 5.85118 14.1958 5.78048C14.5469 5.70979 14.909 5.83178 15.1458 6.10048C15.3826 6.36919 15.458 6.74381 15.3437 7.08321C15.3437 7.73321 15.3437 7.70321 15.3437 8.14321C15.3437 8.58321 15.3437 8.97321 15.3437 9.34321C15.3072 9.92839 15.227 10.51 15.1037 11.0832C14.9296 11.5903 14.6874 12.0714 14.3837 12.5132C13.8981 13.0532 13.4969 13.6634 13.1937 14.3232C13.1184 14.651 13.0848 14.987 13.0937 15.3232C13.0927 15.6338 13.133 15.9432 13.2137 16.2432C12.8048 16.2864 12.3925 16.2864 11.9837 16.2432C11.5937 16.1832 11.1137 15.4032 10.9837 15.1632C10.9193 15.0343 10.7877 14.9529 10.6437 14.9529C10.4996 14.9529 10.368 15.0343 10.3037 15.1632C10.0837 15.5432 9.59366 16.2332 9.25366 16.2732C8.58366 16.3532 7.20366 16.2732 6.11366 16.2732C6.11366 16.2732 6.29366 15.2732 5.88366 14.9132C5.47366 14.5532 5.05366 14.1332 4.74366 13.8532L3.90366 12.8932Z" stroke="black" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M12.3828 13.4392V9.98739C12.3828 9.78078 12.2149 9.61328 12.0078 9.61328C11.8007 9.61328 11.6328 9.78078 11.6328 9.98739V13.4392C11.6328 13.6458 11.8007 13.8133 12.0078 13.8133C12.2149 13.8133 12.3828 13.6458 12.3828 13.4392Z" fill="black"/>
|
||||
<path d="M10.4028 13.4379L10.3828 9.98435C10.3816 9.77823 10.2128 9.6121 10.0057 9.61329C9.79855 9.61448 9.63163 9.78253 9.63282 9.98865L9.65282 13.4422C9.65401 13.6483 9.82287 13.8145 10.03 13.8133C10.2371 13.8121 10.404 13.644 10.4028 13.4379Z" fill="black"/>
|
||||
<path d="M7.63282 9.99227L7.65282 13.4387C7.65403 13.6468 7.8229 13.8145 8.03 13.8133C8.2371 13.8121 8.40401 13.6424 8.40281 13.4343L8.38281 9.98788C8.3816 9.77978 8.21273 9.61207 8.00563 9.61329C7.79852 9.6145 7.63161 9.78418 7.63282 9.99227Z" fill="black"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
@@ -1,7 +1,7 @@
|
||||
<svg width="435" height="192" viewBox="0 0 435 192" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M434.294 35.8327L419.597 87.2712C406.577 88.0129 399.354 88.9272 386.529 90.946L393.877 59.3474L332.885 112.991L377.711 126.218L379.915 115.93C393.611 111.893 401.218 109.947 414.453 107.847L407.84 134.301L427.681 140.18L419.597 167.37L401.226 162.226L392.407 191.62L362.279 183.537L369.627 151.938L297.612 132.097L304.961 104.173L398.286 24.8093L434.294 35.8327Z" fill="#0F0F0F"/>
|
||||
<path d="M107.287 110.787L127.128 106.378L132.271 133.567L113.9 137.976L119.779 168.84L86.7109 176.923L80.833 144.59L63.9316 148.999C72.6686 121.327 81.38 109.098 102.144 91.6804L107.287 110.787Z" fill="#0F0F0F"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M204.287 0.55928C212.617 -0.162914 217.275 -0.209574 225.598 0.55928C254.396 3.22002 271.652 31.4235 274.832 50.529C276.587 61.0745 277.015 67.0381 277.037 77.7185C265.905 97.6708 263.444 104.779 252.787 126.218C243.954 141.438 233.146 152.429 218.249 162.226C186.397 160.022 167.896 140.12 157.991 109.317C154.89 92.6487 155.445 73.5003 156.521 59.3474C158.678 31.0003 174.892 6.89136 204.287 0.55928ZM217.147 23.9997C197.265 23.9997 181.147 48.624 181.147 78.9997C181.147 109.375 197.265 134 217.147 134C237.029 133.999 253.147 109.375 253.147 78.9997C253.147 48.6243 237.029 24.0001 217.147 23.9997Z" fill="#0F0F0F"/>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M204.287 0.55928C212.617 -0.162914 217.275 -0.209574 225.598 0.55928C254.396 3.22002 271.652 31.4235 274.832 50.529C276.587 61.0745 277.015 67.0381 277.037 77.7185C265.905 97.6708 263.444 104.779 252.787 126.218C243.954 141.438 233.146 152.429 218.249 162.226C186.397 160.022 167.896 140.12 157.991 109.317C154.89 92.6487 155.445 73.5003 156.521 59.3474C158.678 31.0003 174.892 6.89136 204.287 0.55928ZM217.147 23.9997C197.265 23.9997 181.147 48.624 181.147 78.9997C181.147 109.375 197.265 134 217.147 134C237.029 133.999 253.147 109.375 253.147 78.9997C253.147 48.6243 237.029 24.0001 217.147 23.9997Z" fill="#0F0F0F"/>
|
||||
<path d="M99.2041 71.1052L66.1357 81.3923L60.2568 50.529L29.3936 126.953L66.1357 120.34C58.6892 132.967 56.9985 139.297 54.3779 150.468L7.34766 160.757L0 131.362L49.2344 17.4606L85.2422 10.113L99.2041 71.1052Z" fill="#0F0F0F"/>
|
||||
<path d="M277.037 96.8249C275.203 113.08 274.273 122.314 268.953 134.301C257.417 152.202 250.176 154.67 237.354 160.021C254.909 142.239 264.111 127.901 277.037 96.8249Z" fill="#0F0F0F"/>
|
||||
<path d="M99.2041 81.3923C89.3926 88.8475 83.8084 94.1174 73.4844 109.317L68.3398 91.6804L99.2041 81.3923Z" fill="#0F0F0F"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
@@ -10,6 +10,7 @@ import RenameInput from "../../../ui/inputs/RenameInput";
|
||||
import { AddIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, DeviceIcon, FlexColumnIcon, FlexRowIcon, FlexRowReverseIcon, ParametersIcon } from "../../../icons/ExportCommonIcons";
|
||||
import { getAlphaFromRgba, rgbaToHex, hexToRgba } from "../../functions/helpers/colorHandlers";
|
||||
import DataDetailedDropdown from "../../../ui/inputs/DataDetailedDropdown";
|
||||
import { useSceneContext } from "../../../../modules/scene/sceneContext";
|
||||
|
||||
interface ElementEditorProps {
|
||||
elementEditorRef: RefObject<HTMLDivElement>;
|
||||
@@ -50,17 +51,11 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
setShowSwapUI,
|
||||
dataModelManager,
|
||||
}) => {
|
||||
const [selectType, setSelectType] = useState("design")
|
||||
const [selectDataMapping, setSelectDataMapping] = useState("singleMachine")
|
||||
|
||||
const defaultGraphData = [
|
||||
{ name: "Jan", value: 400 },
|
||||
{ name: "Feb", value: 300 },
|
||||
{ name: "Mar", value: 600 },
|
||||
{ name: "Apr", value: 800 },
|
||||
{ name: "May", value: 500 },
|
||||
{ name: "Jun", value: 900 },
|
||||
];
|
||||
const { simulationDashBoardStore } = useSceneContext();
|
||||
const { getElementById } = simulationDashBoardStore();
|
||||
const element = getElementById(selectedBlock, selectedElement);
|
||||
const [selectType, setSelectType] = useState("design");
|
||||
const [selectDataMapping, setSelectDataMapping] = useState("singleMachine");
|
||||
|
||||
const [singleFields, setSingleFields] = useState<Array<{ id: string; label: string; showEyeDropper?: boolean }>>([
|
||||
{ id: "data-source", label: "Data Source", showEyeDropper: true },
|
||||
@@ -110,33 +105,41 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="type-switch">
|
||||
<div
|
||||
className={`type ${selectType === "design" ? "active" : ""}`}
|
||||
onClick={() => setSelectType("design")}>
|
||||
<div className={`type ${selectType === "design" ? "active" : ""}`} onClick={() => setSelectType("design")}>
|
||||
Design
|
||||
</div>
|
||||
<div
|
||||
className={`type ${selectType === "data" ? "active" : ""}`}
|
||||
onClick={() => setSelectType("data")}>
|
||||
<div className={`type ${selectType === "data" ? "active" : ""}`} onClick={() => setSelectType("data")}>
|
||||
Data
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{selectType === "design" && (
|
||||
<>
|
||||
<DataSourceSelector
|
||||
label={"Chart Type"}
|
||||
options={["Line Chart", "Bar Chart", "Pie Chart", "Area Chart", "Composed Chart", "Radar Chart", "Scatter Chart", "Radial Bar Chart"]}
|
||||
options={["Line Chart", "Bar Chart", "Pie Chart", "Area Chart", "Radar Chart"]}
|
||||
onSelect={(newValue) => {
|
||||
updateGraphType(selectedBlock, selectedElement, newValue as GraphTypes)
|
||||
if (newValue === "Line Chart") {
|
||||
updateGraphType(selectedBlock, selectedElement, "line");
|
||||
return;
|
||||
} else if (newValue === "Bar Chart") {
|
||||
updateGraphType(selectedBlock, selectedElement, "bar");
|
||||
return;
|
||||
} else if (newValue === "Pie Chart") {
|
||||
updateGraphType(selectedBlock, selectedElement, "pie");
|
||||
return;
|
||||
} else if (newValue === "Area Chart") {
|
||||
updateGraphType(selectedBlock, selectedElement, "area");
|
||||
return;
|
||||
} else if (newValue === "Radar Chart") {
|
||||
updateGraphType(selectedBlock, selectedElement, "radar");
|
||||
return;
|
||||
}
|
||||
}}
|
||||
showEyeDropper={false}
|
||||
/>
|
||||
|
||||
|
||||
<div className="design-section">
|
||||
<div className="section-header">Position</div>
|
||||
<div className="select-type">
|
||||
@@ -153,44 +156,16 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
<div className="position-canvas">
|
||||
<div className="canvas">
|
||||
<div className="value padding-top">
|
||||
<RenameInput
|
||||
value={
|
||||
getCurrentElementStyleValue(currentElement, "padding")
|
||||
? String(getCurrentElementStyleValue(currentElement, "padding"))
|
||||
: "120"
|
||||
}
|
||||
/>
|
||||
|
||||
<RenameInput value={getCurrentElementStyleValue(currentElement, "padding") ? String(getCurrentElementStyleValue(currentElement, "padding")) : "120"} />
|
||||
</div>
|
||||
<div className="value padding-right">
|
||||
<RenameInput
|
||||
value={
|
||||
getCurrentElementStyleValue(currentElement, "padding")
|
||||
? String(getCurrentElementStyleValue(currentElement, "padding"))
|
||||
: "120"
|
||||
}
|
||||
/>
|
||||
|
||||
<RenameInput value={getCurrentElementStyleValue(currentElement, "padding") ? String(getCurrentElementStyleValue(currentElement, "padding")) : "120"} />
|
||||
</div>
|
||||
<div className="value padding-bottom">
|
||||
<RenameInput
|
||||
value={
|
||||
getCurrentElementStyleValue(currentElement, "padding")
|
||||
? String(getCurrentElementStyleValue(currentElement, "padding"))
|
||||
: "120"
|
||||
}
|
||||
/>
|
||||
|
||||
<RenameInput value={getCurrentElementStyleValue(currentElement, "padding") ? String(getCurrentElementStyleValue(currentElement, "padding")) : "120"} />
|
||||
</div>
|
||||
<div className="value padding-left">
|
||||
<RenameInput
|
||||
value={
|
||||
getCurrentElementStyleValue(currentElement, "padding")
|
||||
? String(getCurrentElementStyleValue(currentElement, "padding"))
|
||||
: "120"
|
||||
}
|
||||
/>
|
||||
|
||||
<RenameInput value={getCurrentElementStyleValue(currentElement, "padding") ? String(getCurrentElementStyleValue(currentElement, "padding")) : "120"} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -267,17 +242,15 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
onChange={(newValue: number) => {
|
||||
updateElementStyle(selectedBlock, selectedElement, {
|
||||
borderRadius: Number(newValue),
|
||||
})
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="design-section appearance">
|
||||
<div className="section-header">Appearance</div>
|
||||
<div className="design-datas-wrapper">
|
||||
|
||||
<InputWithDropDown
|
||||
label="X-Position"
|
||||
value={String(currentElement.position?.x ?? 0)}
|
||||
@@ -323,10 +296,8 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div className="design-section element-color">
|
||||
<div className="section-header">Element Color</div>
|
||||
<div className="data-picker">
|
||||
@@ -346,182 +317,14 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
<div className="colorValue">{rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "rgba(50,50,50,1)")}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="footer">Swap with Another Element</div>
|
||||
|
||||
|
||||
{/* Data Binding Section */}
|
||||
<div className="header">
|
||||
<h4>Data Binding</h4>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label className="form-label">Data Source: </label>
|
||||
<select
|
||||
value={currentElement.data?.dataSource || "static"}
|
||||
onChange={(e) =>
|
||||
updateElementData(selectedBlock, selectedElement, {
|
||||
dataSource: e.target.value as DataSourceType,
|
||||
})
|
||||
}
|
||||
className="form-select"
|
||||
>
|
||||
<option value="static">Static Value</option>
|
||||
<option value="dynamic">Dynamic Data</option>
|
||||
<option value="formula">Formula</option>
|
||||
<option value="api">API (Future)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{currentElement.data?.dataSource === "static" && (
|
||||
<>
|
||||
{currentElement.type === "label-value" && (
|
||||
<div className="form-group">
|
||||
<label className="form-label">Label: </label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Label"
|
||||
value={currentElement.data?.label || ""}
|
||||
onChange={(e) =>
|
||||
updateElementData(selectedBlock, selectedElement, {
|
||||
label: e.target.value,
|
||||
})
|
||||
}
|
||||
className="form-input"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group">
|
||||
<label className="form-label">Value: </label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Value"
|
||||
value={currentElement.data?.staticValue || ""}
|
||||
onChange={(e) =>
|
||||
updateElementData(selectedBlock, selectedElement, {
|
||||
staticValue: e.target.value,
|
||||
})
|
||||
}
|
||||
className="form-input"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{currentElement.data?.dataSource === "dynamic" && (
|
||||
<>
|
||||
{currentElement.type === "label-value" && (
|
||||
<div className="form-group">
|
||||
<label className="form-label">Label: </label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Label"
|
||||
value={currentElement.data?.label || ""}
|
||||
onChange={(e) =>
|
||||
updateElementData(selectedBlock, selectedElement, {
|
||||
label: e.target.value,
|
||||
})
|
||||
}
|
||||
className="form-input"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group">
|
||||
<label className="form-label">Data Key: </label>
|
||||
<select
|
||||
value={currentElement.data?.dynamicKey || ""}
|
||||
onChange={(e) =>
|
||||
updateElementData(selectedBlock, selectedElement, {
|
||||
dynamicKey: e.target.value,
|
||||
})
|
||||
}
|
||||
className="form-select"
|
||||
>
|
||||
<option value="">Select data key</option>
|
||||
{dataModelManager.getAvailableKeys().map((key: string) => (
|
||||
<option key={key} value={key}>
|
||||
{key}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{currentElement.data?.dataSource === "formula" && (
|
||||
<>
|
||||
{currentElement.type === "label-value" && (
|
||||
<div className="form-group">
|
||||
<label className="form-label">Label: </label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Label"
|
||||
value={currentElement.data?.label || ""}
|
||||
onChange={(e) =>
|
||||
updateElementData(selectedBlock, selectedElement, {
|
||||
label: e.target.value,
|
||||
})
|
||||
}
|
||||
className="form-input"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group">
|
||||
<label className="form-label">Formula: </label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g., {totalUsers} * {growthRate}"
|
||||
value={currentElement.data?.formula || ""}
|
||||
onChange={(e) =>
|
||||
updateElementData(selectedBlock, selectedElement, {
|
||||
formula: e.target.value,
|
||||
})
|
||||
}
|
||||
className="form-input"
|
||||
/>
|
||||
<small className="form-small">
|
||||
Use {"{key}"} to reference data values. Example: {"{totalUsers} * {growthRate}"}
|
||||
</small>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{currentElement.type === "graph" && (
|
||||
<div className="form-group">
|
||||
<label className="form-label">Chart Data (JSON): </label>
|
||||
<textarea
|
||||
placeholder='[{"name": "Jan", "value": 400}, ...]'
|
||||
value={JSON.stringify(currentElement.graphData || defaultGraphData, null, 2)}
|
||||
onChange={(e) => {
|
||||
try {
|
||||
const newData = JSON.parse(e.target.value);
|
||||
updateGraphData(selectedBlock, selectedElement, newData);
|
||||
} catch (error) {
|
||||
console.log("error: ", error);
|
||||
}
|
||||
}}
|
||||
rows={4}
|
||||
className="form-textarea"
|
||||
/>
|
||||
<small className="form-small">Enter valid JSON array with "name" and "value" properties</small>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{selectType === "data" && (
|
||||
<div className="data-details">
|
||||
|
||||
<div className="data-wrapper">
|
||||
<InputWithDropDown
|
||||
label="Title"
|
||||
value={`title`}
|
||||
placeholder={"Label 1"}
|
||||
min={0.1}
|
||||
step={0.1}
|
||||
max={2}
|
||||
onChange={() => { }}
|
||||
/>
|
||||
<InputWithDropDown label="Title" value={`title`} placeholder={"Label 1"} min={0.1} step={0.1} max={2} onChange={() => {}} />
|
||||
<div className="data">
|
||||
<DataDetailedDropdown
|
||||
title="Data Source"
|
||||
@@ -529,9 +332,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
sections={[
|
||||
{
|
||||
title: "Global",
|
||||
items: [
|
||||
{ id: "global", label: "Global", icon: <DeviceIcon /> },
|
||||
],
|
||||
items: [{ id: "global", label: "Global", icon: <DeviceIcon /> }],
|
||||
},
|
||||
{
|
||||
title: "Assets",
|
||||
@@ -570,11 +371,8 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
value={null}
|
||||
onChange={() => {}}
|
||||
dropDownHeader={"RT-Data-Value"}
|
||||
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Data Mapping */}
|
||||
@@ -582,16 +380,10 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
<div className="heading">Data Mapping</div>
|
||||
|
||||
<div className="type-switch">
|
||||
<div
|
||||
className={`type ${selectDataMapping === "singleMachine" ? "active" : ""}`}
|
||||
onClick={() => setSelectDataMapping("singleMachine")}
|
||||
>
|
||||
<div className={`type ${selectDataMapping === "singleMachine" ? "active" : ""}`} onClick={() => setSelectDataMapping("singleMachine")}>
|
||||
Single Machine
|
||||
</div>
|
||||
<div
|
||||
className={`type ${selectDataMapping === "multipleeMachine" ? "active" : ""}`}
|
||||
onClick={() => setSelectDataMapping("multipleeMachine")}
|
||||
>
|
||||
<div className={`type ${selectDataMapping === "multipleeMachine" ? "active" : ""}`} onClick={() => setSelectDataMapping("multipleeMachine")}>
|
||||
Multiple Machine
|
||||
</div>
|
||||
</div>
|
||||
@@ -599,20 +391,15 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
{selectDataMapping === "singleMachine" && (
|
||||
<div className="fields-wrapper">
|
||||
{singleFields.map((field) => (
|
||||
<DataSourceSelector
|
||||
key={field.id}
|
||||
label={field.label}
|
||||
options={["1h", "2h", "12h"]}
|
||||
onSelect={() => { }}
|
||||
showEyeDropper={!!field.showEyeDropper}
|
||||
/>
|
||||
<DataSourceSelector key={field.id} label={field.label} options={["1h", "2h", "12h"]} onSelect={() => {}} showEyeDropper={!!field.showEyeDropper} />
|
||||
))}
|
||||
|
||||
<div className="add-field" onClick={addField}>
|
||||
<div className="icon"><AddIcon /></div>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
<div className="label">Add Field</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -621,30 +408,22 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
|
||||
{multipleFields.map((field) => (
|
||||
<div className="datas" key={field.id}>
|
||||
<div className="datas__class">
|
||||
<DataSourceSelector
|
||||
label={field.label}
|
||||
options={["1h", "2h", "12h"]}
|
||||
onSelect={() => { }}
|
||||
showEyeDropper={field.label !== "Common Value"}
|
||||
/>
|
||||
|
||||
<DataSourceSelector label={field.label} options={["1h", "2h", "12h"]} onSelect={() => {}} showEyeDropper={field.label !== "Common Value"} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="add-field" onClick={addField}>
|
||||
<div className="icon"><AddIcon /></div>
|
||||
<div className="icon">
|
||||
<AddIcon />
|
||||
</div>
|
||||
<div className="label">Add Field</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -95,7 +95,7 @@ export const ConveyorIcon = () => {
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_352_182)">
|
||||
<g clipPath="url(#clip0_352_182)">
|
||||
<path
|
||||
d="M8.16336 9.72707H8.82742C8.80273 9.66301 8.7893 9.59363 8.7893 9.52144V6.32707C8.7893 6.1677 8.85492 6.02238 8.95961 5.91738C9.06586 5.8127 9.21086 5.74707 9.3693 5.74707H12.8659C13.0255 5.74707 13.1705 5.81238 13.2755 5.91738C13.3805 6.02238 13.4455 6.16707 13.4455 6.32707V9.52144C13.4455 9.59363 13.4321 9.66301 13.4074 9.72707H15.918C16.4902 9.72707 17.0105 9.96113 17.3874 10.3377C17.764 10.7146 17.998 11.2349 17.998 11.8071C17.998 12.3793 17.764 12.8996 17.3871 13.2761C17.0105 13.653 16.4896 13.8874 15.918 13.8874H4.07836C3.50617 13.8874 2.98586 13.6533 2.60867 13.2761C2.23211 12.8996 1.99805 12.3793 1.99805 11.8071C1.99805 11.2361 2.23242 10.7158 2.60961 10.3383C2.8793 10.0677 3.22305 9.87082 3.60742 9.78113C3.56655 9.70067 3.54524 9.61169 3.54523 9.52144V6.32707C3.54523 6.1677 3.61086 6.02238 3.71555 5.91738C3.82148 5.8127 3.9668 5.74707 4.12492 5.74707H7.6218C7.78148 5.74707 7.92617 5.81238 8.03117 5.91738C8.13617 6.02238 8.20148 6.16707 8.20148 6.32707V9.52144C8.20148 9.59363 8.18805 9.66301 8.16336 9.72707ZM15.6268 6.7652L16.823 7.89488L15.5705 9.08207L15.183 8.67488L15.6805 8.20363L14.1824 8.20582V7.64426L15.7365 7.64207L15.2415 7.17457L15.6268 6.7652ZM5.28961 6.6077H6.46648L6.48617 8.05176L5.8543 7.66645L5.26117 8.04238L5.28961 6.6077ZM7.6218 6.2402H4.12492C4.10117 6.2402 4.0793 6.24988 4.06367 6.26551C4.04762 6.282 4.03856 6.30406 4.03836 6.32707V9.52144C4.03836 9.54551 4.04773 9.56738 4.06305 9.58269C4.07961 9.59832 4.10117 9.60801 4.12492 9.60801H7.6218C7.64492 9.60801 7.6668 9.59801 7.68273 9.58238C7.69836 9.56644 7.70836 9.54457 7.70836 9.52144V6.32707C7.70836 6.30301 7.69867 6.28145 7.68305 6.26582C7.66742 6.24988 7.64555 6.2402 7.6218 6.2402ZM10.5334 6.6077H11.7102L11.7299 8.05176L11.098 7.66645L10.5046 8.04238L10.5334 6.6077ZM12.8659 6.2402H9.3693C9.34523 6.2402 9.32336 6.24988 9.30773 6.26551C9.29169 6.282 9.28262 6.30406 9.28242 6.32707V9.52144C9.28242 9.54551 9.29211 9.56738 9.30711 9.58269C9.32367 9.59832 9.34523 9.60801 9.3693 9.60801H12.8659C12.889 9.60801 12.9109 9.59801 12.9268 9.58238C12.9424 9.56644 12.9524 9.54457 12.9524 9.52144V6.32707C12.9524 6.30301 12.9427 6.28145 12.9271 6.26582C12.9115 6.24988 12.8896 6.2402 12.8659 6.2402ZM14.7877 11.0064C15.2299 11.0064 15.5887 11.3649 15.5887 11.8071C15.5887 12.2493 15.2299 12.608 14.7877 12.608C14.3455 12.608 13.9871 12.2493 13.9871 11.8071C13.9871 11.3649 14.3455 11.0064 14.7877 11.0064ZM11.5946 11.0064C12.0368 11.0064 12.3952 11.3649 12.3952 11.8071C12.3952 12.2493 12.0368 12.608 11.5946 12.608C11.1521 12.608 10.7937 12.2493 10.7937 11.8071C10.7937 11.3649 11.1521 11.0064 11.5946 11.0064ZM8.40148 11.0064C8.84367 11.0064 9.20242 11.3649 9.20242 11.8071C9.20242 12.2493 8.84367 12.608 8.40148 12.608C7.9593 12.608 7.60086 12.2493 7.60086 11.8071C7.60086 11.3649 7.9593 11.0064 8.40148 11.0064ZM5.20836 11.0064C5.65055 11.0064 6.0093 11.3649 6.0093 11.8071C6.0093 12.2493 5.65055 12.608 5.20836 12.608C4.76617 12.608 4.40742 12.2493 4.40742 11.8071C4.40742 11.3649 4.76617 11.0064 5.20836 11.0064ZM15.918 10.3608H4.07836C3.68086 10.3608 3.3193 10.5239 3.05711 10.7861C2.7943 11.0474 2.63211 11.4089 2.63211 11.8071C2.63211 12.2043 2.79492 12.5661 3.05711 12.828C3.3193 13.0905 3.68117 13.2533 4.07836 13.2533H15.918C16.3149 13.2533 16.6768 13.0902 16.939 12.828C17.2012 12.5658 17.3643 12.2043 17.3643 11.8071C17.3643 11.4099 17.2012 11.0483 16.939 10.7861C16.6768 10.5239 16.3152 10.3608 15.918 10.3608Z"
|
||||
fill="white"
|
||||
@@ -152,7 +152,7 @@ export const RoboticArmIcon = () => {
|
||||
rx="0.238636"
|
||||
fill="white"
|
||||
stroke="white"
|
||||
stroke-width="0.159091"
|
||||
strokeWidth="0.159091"
|
||||
/>
|
||||
<rect
|
||||
x="4.59277"
|
||||
@@ -192,7 +192,7 @@ export const RoboticArmIcon = () => {
|
||||
r="1.98864"
|
||||
fill="white"
|
||||
stroke="white"
|
||||
stroke-width="0.159091"
|
||||
strokeWidth="0.159091"
|
||||
/>
|
||||
<circle
|
||||
cx="10.4764"
|
||||
@@ -200,7 +200,7 @@ export const RoboticArmIcon = () => {
|
||||
r="1.98864"
|
||||
fill="white"
|
||||
stroke="white"
|
||||
stroke-width="0.159091"
|
||||
strokeWidth="0.159091"
|
||||
/>
|
||||
<circle cx="6.02379" cy="10.1615" r="1.11364" fill="#494949" />
|
||||
<circle cx="10.4769" cy="5.06871" r="1.11364" fill="#494949" />
|
||||
@@ -208,12 +208,12 @@ export const RoboticArmIcon = () => {
|
||||
d="M14.9316 8.17188C15.5026 8.17188 15.9656 8.63511 15.9658 9.20605V10.2402H13.8975V9.20605C13.8977 8.63522 14.3608 8.17207 14.9316 8.17188Z"
|
||||
fill="white"
|
||||
stroke="white"
|
||||
stroke-width="0.159091"
|
||||
strokeWidth="0.159091"
|
||||
/>
|
||||
<path
|
||||
d="M14.4561 10.1602H15.7295C16.3442 10.1604 16.8426 10.6587 16.8428 11.2734V13.291C16.8427 13.4108 16.7153 13.4875 16.6094 13.4316L15.834 13.0215V11.6855C15.8338 11.4222 15.6208 11.2092 15.3574 11.209H14.8799C14.6164 11.209 14.4025 11.4221 14.4023 11.6855V13.0205L13.5742 13.4424C13.4684 13.4963 13.3428 13.4186 13.3428 13.2998V11.2734C13.3429 10.6586 13.8412 10.1603 14.4561 10.1602Z"
|
||||
stroke="white"
|
||||
stroke-width="0.318182"
|
||||
strokeWidth="0.318182"
|
||||
/>
|
||||
<rect
|
||||
x="8.43457"
|
||||
@@ -269,7 +269,7 @@ export const MachineIcon = () => {
|
||||
<path
|
||||
d="M11.418 5.08984V4.08984"
|
||||
stroke="#494949"
|
||||
stroke-width="0.5"
|
||||
strokeWidth="0.5"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
@@ -317,19 +317,19 @@ export const MachineIcon = () => {
|
||||
<path
|
||||
d="M8.91992 5.08984V4.08984"
|
||||
stroke="#494949"
|
||||
stroke-width="0.5"
|
||||
strokeWidth="0.5"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.3857 9.08984H10.8857"
|
||||
stroke="#494949"
|
||||
stroke-width="0.5"
|
||||
strokeWidth="0.5"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M15.9199 6.09082V12.5908"
|
||||
stroke="#494949"
|
||||
stroke-width="0.5"
|
||||
strokeWidth="0.5"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@@ -1601,8 +1601,8 @@ export const ListTaskIcon = () => {
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M6.00008 8.66667H12.6667C13.0349 8.66667 13.3334 8.96514 13.3334 9.33333C13.3334 9.70152 13.0349 10 12.6667 10H6.00008C5.63189 10 5.33341 9.70152 5.33341 9.33333C5.33341 8.96514 5.63189 8.66667 6.00008 8.66667ZM6.00008 11.3333H12.6667C13.0349 11.3333 13.3334 11.6318 13.3334 12C13.3334 12.3682 13.0349 12.6667 12.6667 12.6667H6.00008C5.63189 12.6667 5.33341 12.3682 5.33341 12C5.33341 11.6318 5.63189 11.3333 6.00008 11.3333ZM10.0001 6H12.6667C13.0349 6 13.3334 6.29848 13.3334 6.66667C13.3334 7.03486 13.0349 7.33333 12.6667 7.33333H10.0001C9.63189 7.33333 9.33342 7.03486 9.33342 6.66667C9.33342 6.29848 9.63189 6 10.0001 6ZM5.16184 7.27614L2.66675 4.78105L3.60956 3.83824L5.16184 5.39052L8.55237 2L9.49518 2.94281L5.16184 7.27614Z"
|
||||
fill="#B7B7C6"
|
||||
/>
|
||||
@@ -1686,8 +1686,8 @@ export const HourGlassIcon = () => {
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.98324 5.5C5.98324 6.21872 6.39671 6.55406 6.79659 6.87775C7.29742 7.28394 7.86133 7.74109 7.91957 9.13971H3.07633C3.13456 7.74109 3.69847 7.28394 4.19929 6.87775C4.59918 6.55406 5.01265 6.21872 5.01265 5.5C5.01265 4.78128 4.59918 4.44594 4.19929 4.12225C3.69847 3.71606 3.13456 3.25891 3.07633 1.86029H7.91956C7.86133 3.25891 7.29741 3.71606 6.79659 4.12225C6.39671 4.44594 5.98324 4.78128 5.98324 5.5ZM7.10233 4.49884C7.68468 4.02665 8.40971 3.43896 8.40971 1.61765V1.375H2.58618V1.61764C2.58618 3.43896 3.31121 4.02664 3.89357 4.49884C4.275 4.80846 4.52735 5.01276 4.52735 5.5C4.52735 5.98724 4.275 6.19154 3.89357 6.50116C3.31121 6.97335 2.58618 7.56104 2.58618 9.38235V9.625H8.40971V9.38236C8.40971 7.56104 7.68468 6.97336 7.10233 6.50116C6.72089 6.19154 6.46853 5.98724 6.46853 5.5C6.46853 5.01276 6.72088 4.80846 7.10233 4.49884ZM5.38706 6.85208L4.65814 7.44365C4.33882 7.70231 4.06366 7.92506 3.91613 8.41181H7.07976C6.93223 7.92506 6.65707 7.70231 6.33775 7.44365L5.60884 6.85208C5.54429 6.79967 5.4516 6.79967 5.38706 6.85208Z"
|
||||
fill="#FCFDFD"
|
||||
/>
|
||||
@@ -1752,7 +1752,7 @@ export const PerformanceStatsIcon = () => {
|
||||
export const DeviceIcon = () => {
|
||||
return (
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.4 1.125H5.38395C4.97753 1.125 4.64972 1.125 4.38427 1.14668C4.11095 1.16902 3.87088 1.2162 3.64877 1.32937C3.29597 1.50913 3.00913 1.79597 2.82937 2.14877C2.7162 2.37088 2.66902 2.61095 2.64668 2.88427C2.625 3.14972 2.625 3.47753 2.625 3.88395V3.9V8.1V8.11605C2.625 8.52245 2.625 8.8503 2.64668 9.11575C2.66902 9.38905 2.7162 9.6291 2.82937 9.85125C3.00913 10.2041 3.29597 10.4908 3.64877 10.6706C3.87088 10.7838 4.11095 10.831 4.38427 10.8533C4.64972 10.875 4.97753 10.875 5.38395 10.875H5.4H6.6H6.61605C7.0225 10.875 7.3503 10.875 7.61575 10.8533C7.88905 10.831 8.1291 10.7838 8.35125 10.6706C8.70405 10.4908 8.99085 10.2041 9.17065 9.85125C9.2838 9.6291 9.331 9.38905 9.3533 9.11575C9.375 8.8503 9.375 8.5225 9.375 8.11605V8.1V3.9V3.88394C9.375 3.47753 9.375 3.14972 9.3533 2.88427C9.331 2.61095 9.2838 2.37088 9.17065 2.14877C8.99085 1.79597 8.70405 1.50913 8.35125 1.32937C8.1291 1.2162 7.88905 1.16902 7.61575 1.14668C7.3503 1.125 7.0225 1.125 6.61605 1.125H6.6H5.4ZM3.98926 1.99762C4.08802 1.9473 4.2184 1.91274 4.44534 1.89419C4.67666 1.87529 4.97378 1.875 5.4 1.875H6.6C7.02625 1.875 7.32335 1.87529 7.55465 1.89419C7.7816 1.91274 7.912 1.9473 8.01075 1.99762C8.2224 2.10548 8.3945 2.27758 8.5024 2.48926C8.5527 2.58802 8.58725 2.71841 8.6058 2.94534C8.6247 3.17666 8.625 3.47378 8.625 3.9V8.1C8.625 8.52625 8.6247 8.82335 8.6058 9.05465C8.58725 9.2816 8.5527 9.412 8.5024 9.51075C8.3945 9.7224 8.2224 9.8945 8.01075 10.0024C7.912 10.0527 7.7816 10.0872 7.55465 10.1058C7.32335 10.1247 7.02625 10.125 6.6 10.125H5.4C4.97378 10.125 4.67666 10.1247 4.44534 10.1058C4.2184 10.0872 4.08802 10.0527 3.98926 10.0024C3.77758 9.8945 3.60548 9.7224 3.49762 9.51075C3.4473 9.412 3.41274 9.2816 3.39419 9.05465C3.37529 8.82335 3.375 8.52625 3.375 8.1V3.9C3.375 3.47378 3.37529 3.17666 3.39419 2.94534C3.41274 2.71841 3.4473 2.58802 3.49762 2.48926C3.60548 2.27758 3.77758 2.10548 3.98926 1.99762ZM5 8.625C4.7929 8.625 4.625 8.7929 4.625 9C4.625 9.2071 4.7929 9.375 5 9.375H7C7.2071 9.375 7.375 9.2071 7.375 9C7.375 8.7929 7.2071 8.625 7 8.625H5Z" fill="#CCACFF" />
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M5.4 1.125H5.38395C4.97753 1.125 4.64972 1.125 4.38427 1.14668C4.11095 1.16902 3.87088 1.2162 3.64877 1.32937C3.29597 1.50913 3.00913 1.79597 2.82937 2.14877C2.7162 2.37088 2.66902 2.61095 2.64668 2.88427C2.625 3.14972 2.625 3.47753 2.625 3.88395V3.9V8.1V8.11605C2.625 8.52245 2.625 8.8503 2.64668 9.11575C2.66902 9.38905 2.7162 9.6291 2.82937 9.85125C3.00913 10.2041 3.29597 10.4908 3.64877 10.6706C3.87088 10.7838 4.11095 10.831 4.38427 10.8533C4.64972 10.875 4.97753 10.875 5.38395 10.875H5.4H6.6H6.61605C7.0225 10.875 7.3503 10.875 7.61575 10.8533C7.88905 10.831 8.1291 10.7838 8.35125 10.6706C8.70405 10.4908 8.99085 10.2041 9.17065 9.85125C9.2838 9.6291 9.331 9.38905 9.3533 9.11575C9.375 8.8503 9.375 8.5225 9.375 8.11605V8.1V3.9V3.88394C9.375 3.47753 9.375 3.14972 9.3533 2.88427C9.331 2.61095 9.2838 2.37088 9.17065 2.14877C8.99085 1.79597 8.70405 1.50913 8.35125 1.32937C8.1291 1.2162 7.88905 1.16902 7.61575 1.14668C7.3503 1.125 7.0225 1.125 6.61605 1.125H6.6H5.4ZM3.98926 1.99762C4.08802 1.9473 4.2184 1.91274 4.44534 1.89419C4.67666 1.87529 4.97378 1.875 5.4 1.875H6.6C7.02625 1.875 7.32335 1.87529 7.55465 1.89419C7.7816 1.91274 7.912 1.9473 8.01075 1.99762C8.2224 2.10548 8.3945 2.27758 8.5024 2.48926C8.5527 2.58802 8.58725 2.71841 8.6058 2.94534C8.6247 3.17666 8.625 3.47378 8.625 3.9V8.1C8.625 8.52625 8.6247 8.82335 8.6058 9.05465C8.58725 9.2816 8.5527 9.412 8.5024 9.51075C8.3945 9.7224 8.2224 9.8945 8.01075 10.0024C7.912 10.0527 7.7816 10.0872 7.55465 10.1058C7.32335 10.1247 7.02625 10.125 6.6 10.125H5.4C4.97378 10.125 4.67666 10.1247 4.44534 10.1058C4.2184 10.0872 4.08802 10.0527 3.98926 10.0024C3.77758 9.8945 3.60548 9.7224 3.49762 9.51075C3.4473 9.412 3.41274 9.2816 3.39419 9.05465C3.37529 8.82335 3.375 8.52625 3.375 8.1V3.9C3.375 3.47378 3.37529 3.17666 3.39419 2.94534C3.41274 2.71841 3.4473 2.58802 3.49762 2.48926C3.60548 2.27758 3.77758 2.10548 3.98926 1.99762ZM5 8.625C4.7929 8.625 4.625 8.7929 4.625 9C4.625 9.2071 4.7929 9.375 5 9.375H7C7.2071 9.375 7.375 9.2071 7.375 9C7.375 8.7929 7.2071 8.625 7 8.625H5Z" fill="#CCACFF" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@@ -1760,9 +1760,9 @@ export const DeviceIcon = () => {
|
||||
export const ParametersIcon = () => {
|
||||
return (
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_6422_4175)">
|
||||
<g clipPath="url(#clip0_6422_4175)">
|
||||
<path d="M10.5 4.875V3C10.4998 2.80116 10.4207 2.61052 10.2801 2.46992C10.1395 2.32932 9.94884 2.25023 9.75 2.25H8.625V3H9.75V4.875C9.75072 5.08872 9.79738 5.29978 9.88681 5.49388C9.97625 5.68799 10.1064 5.86059 10.2684 6C10.1064 6.13941 9.97625 6.31201 9.88681 6.50612C9.79738 6.70022 9.75072 6.91128 9.75 7.125V9H8.625V9.75H9.75C9.94884 9.74977 10.1395 9.67068 10.2801 9.53008C10.4207 9.38948 10.4998 9.19884 10.5 9V7.125C10.5002 6.92616 10.5793 6.73552 10.7199 6.59492C10.8605 6.45432 11.0512 6.37523 11.25 6.375V5.625C11.0512 5.62477 10.8605 5.54568 10.7199 5.40508C10.5793 5.26447 10.5002 5.07384 10.5 4.875Z" fill="#B7B7C6" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.375 3.375L6.05362 4.5H6.80362L7.125 3.375H7.875L7.55362 4.5H8.25V5.25H7.3395L6.91088 6.75H7.875V7.5H6.69638L6.375 8.625H5.625L5.94638 7.5H5.19638L4.875 8.625H4.125L4.44638 7.5H3.75V6.75H4.66087L5.0895 5.25H4.125V4.5H5.30362L5.625 3.375H6.375ZM6.5895 5.25H5.8395L5.41087 6.75H6.16088L6.5895 5.25Z" fill="#B7B7C6" />
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M6.375 3.375L6.05362 4.5H6.80362L7.125 3.375H7.875L7.55362 4.5H8.25V5.25H7.3395L6.91088 6.75H7.875V7.5H6.69638L6.375 8.625H5.625L5.94638 7.5H5.19638L4.875 8.625H4.125L4.44638 7.5H3.75V6.75H4.66087L5.0895 5.25H4.125V4.5H5.30362L5.625 3.375H6.375ZM6.5895 5.25H5.8395L5.41087 6.75H6.16088L6.5895 5.25Z" fill="#B7B7C6" />
|
||||
<path d="M2.25 4.875V3H3.375V2.25H2.25C2.05116 2.25023 1.86052 2.32932 1.71992 2.46992C1.57932 2.61052 1.50023 2.80116 1.5 3V4.875C1.49977 5.07384 1.42068 5.26447 1.28008 5.40508C1.13948 5.54568 0.948842 5.62477 0.75 5.625V6.375C0.948842 6.37523 1.13948 6.45432 1.28008 6.59492C1.42068 6.73552 1.49977 6.92616 1.5 7.125V9C1.50023 9.19884 1.57932 9.38948 1.71992 9.53008C1.86052 9.67068 2.05116 9.74977 2.25 9.75H3.375V9H2.25V7.125C2.24928 6.91128 2.20262 6.70022 2.11319 6.50612C2.02375 6.31201 1.89363 6.13941 1.73164 6C1.89363 5.86059 2.02375 5.68799 2.11319 5.49388C2.20262 5.29978 2.24928 5.08872 2.25 4.875Z" fill="#B7B7C6" />
|
||||
</g>
|
||||
<defs>
|
||||
@@ -1779,7 +1779,7 @@ export const ParametersIcon = () => {
|
||||
export const AlignRightIcon = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 10H8M21 14H3M21 18H8M21 6H3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M21 10H8M21 14H3M21 18H8M21 6H3" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@@ -1788,7 +1788,7 @@ export const AlignRightIcon = () => {
|
||||
export const AlignJustifyIcon = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 10H21M3 14H21M3 18H21M3 6H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M3 10H21M3 14H21M3 18H21M3 6H21" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@@ -1797,7 +1797,7 @@ export const AlignJustifyIcon = () => {
|
||||
export const AlignLeftIcon = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 10H16M3 14H21M3 18H16M3 6H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M3 10H16M3 14H21M3 18H16M3 6H21" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@@ -1805,8 +1805,8 @@ export const AlignLeftIcon = () => {
|
||||
export const FlexRowIcon = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.1782 5.79502L13.1782 18.2059C13.1782 19.3842 13.6809 19.8555 14.9299 19.8555H18.1033C19.3523 19.8555 19.855 19.3842 19.855 18.2059L19.855 5.79502C19.855 4.61677 19.3523 4.14547 18.1033 4.14547L14.9299 4.14547C13.6809 4.14547 13.1782 4.61677 13.1782 5.79502Z" stroke="white" stroke-width="0.7855" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M4.14502 5.79502L4.14502 18.2059C4.14502 19.3842 4.64774 19.8555 5.89668 19.8555H9.07011C10.3191 19.8555 10.8218 19.3842 10.8218 18.2059L10.8218 5.79502C10.8218 4.61677 10.3191 4.14547 9.07011 4.14547L5.89668 4.14547C4.64774 4.14547 4.14502 4.61677 4.14502 5.79502Z" stroke="white" stroke-width="0.7855" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M13.1782 5.79502L13.1782 18.2059C13.1782 19.3842 13.6809 19.8555 14.9299 19.8555H18.1033C19.3523 19.8555 19.855 19.3842 19.855 18.2059L19.855 5.79502C19.855 4.61677 19.3523 4.14547 18.1033 4.14547L14.9299 4.14547C13.6809 4.14547 13.1782 4.61677 13.1782 5.79502Z" stroke="white" strokeWidth="0.7855" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M4.14502 5.79502L4.14502 18.2059C4.14502 19.3842 4.64774 19.8555 5.89668 19.8555H9.07011C10.3191 19.8555 10.8218 19.3842 10.8218 18.2059L10.8218 5.79502C10.8218 4.61677 10.3191 4.14547 9.07011 4.14547L5.89668 4.14547C4.64774 4.14547 4.14502 4.61677 4.14502 5.79502Z" stroke="white" strokeWidth="0.7855" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@@ -1814,8 +1814,8 @@ export const FlexRowIcon = () => {
|
||||
export const FlexColumnIcon = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.2055 13.1787H5.79457C4.61632 13.1787 4.14502 13.6814 4.14502 14.9304V18.1038C4.14502 19.3527 4.61632 19.8555 5.79457 19.8555H18.2055C19.3837 19.8555 19.855 19.3527 19.855 18.1038V14.9304C19.855 13.6814 19.3837 13.1787 18.2055 13.1787Z" stroke="white" stroke-width="0.7855" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M18.2055 4.14453H5.79457C4.61632 4.14453 4.14502 4.64725 4.14502 5.8962V9.06962C4.14502 10.3186 4.61632 10.8213 5.79457 10.8213H18.2055C19.3837 10.8213 19.855 10.3186 19.855 9.06962V5.8962C19.855 4.64725 19.3837 4.14453 18.2055 4.14453Z" stroke="white" stroke-width="0.7855" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M18.2055 13.1787H5.79457C4.61632 13.1787 4.14502 13.6814 4.14502 14.9304V18.1038C4.14502 19.3527 4.61632 19.8555 5.79457 19.8555H18.2055C19.3837 19.8555 19.855 19.3527 19.855 18.1038V14.9304C19.855 13.6814 19.3837 13.1787 18.2055 13.1787Z" stroke="white" strokeWidth="0.7855" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M18.2055 4.14453H5.79457C4.61632 4.14453 4.14502 4.64725 4.14502 5.8962V9.06962C4.14502 10.3186 4.61632 10.8213 5.79457 10.8213H18.2055C19.3837 10.8213 19.855 10.3186 19.855 9.06962V5.8962C19.855 4.64725 19.3837 4.14453 18.2055 4.14453Z" stroke="white" strokeWidth="0.7855" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
@@ -1823,12 +1823,12 @@ export const FlexColumnIcon = () => {
|
||||
export const FlexRowReverseIcon = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_6424_3252)">
|
||||
<path d="M9.74963 5.82994L9.74963 18.241C9.74963 19.4193 10.2524 19.8906 11.5013 19.8906H14.6748C15.9238 19.8906 16.4265 19.4193 16.4265 18.241V5.82994C16.4265 4.65167 15.9238 4.18037 14.6748 4.18037H11.5013C10.2524 4.18037 9.74963 4.65167 9.74963 5.82994Z" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M0.716431 5.75865L0.716431 18.1698C0.716431 19.348 1.21916 19.8193 2.46812 19.8193H5.6416C6.89056 19.8193 7.39329 19.348 7.39329 18.1698L7.39329 5.75865C7.39329 4.58039 6.89056 4.10908 5.6416 4.10908H2.46812C1.21916 4.10908 0.716431 4.58039 0.716431 5.75865Z" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<g clipPath="url(#clip0_6424_3252)">
|
||||
<path d="M9.74963 5.82994L9.74963 18.241C9.74963 19.4193 10.2524 19.8906 11.5013 19.8906H14.6748C15.9238 19.8906 16.4265 19.4193 16.4265 18.241V5.82994C16.4265 4.65167 15.9238 4.18037 14.6748 4.18037H11.5013C10.2524 4.18037 9.74963 4.65167 9.74963 5.82994Z" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M0.716431 5.75865L0.716431 18.1698C0.716431 19.348 1.21916 19.8193 2.46812 19.8193H5.6416C6.89056 19.8193 7.39329 19.348 7.39329 18.1698L7.39329 5.75865C7.39329 4.58039 6.89056 4.10908 5.6416 4.10908H2.46812C1.21916 4.10908 0.716431 4.58039 0.716431 5.75865Z" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</g>
|
||||
<g clip-path="url(#clip1_6424_3252)">
|
||||
<path d="M20.1401 4.99716C21.33 7.07912 21.1304 8.85883 19.5408 10.3352C20.3157 8.55061 19.8845 6.96667 18.4644 5.7629L17.2075 6.3372L18.3451 3.28529L21.397 4.42286L20.1401 4.99716Z" fill="white" stroke="white" stroke-width="0.460612" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<g clipPath="url(#clip1_6424_3252)">
|
||||
<path d="M20.1401 4.99716C21.33 7.07912 21.1304 8.85883 19.5408 10.3352C20.3157 8.55061 19.8845 6.96667 18.4644 5.7629L17.2075 6.3372L18.3451 3.28529L21.397 4.42286L20.1401 4.99716Z" fill="white" stroke="white" strokeWidth="0.460612" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_6424_3252">
|
||||
@@ -1845,12 +1845,12 @@ export const FlexRowReverseIcon = () => {
|
||||
export const FlexColumnReverseIcon = () => {
|
||||
return (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_6424_3258)">
|
||||
<path d="M15.0643 13.1787H2.65C1.47143 13.1787 1 13.6816 1 14.9309V18.1051C1 19.3544 1.47143 19.8573 2.65 19.8573H15.0643C16.2429 19.8573 16.7143 19.3544 16.7143 18.1051V14.9309C16.7143 13.6816 16.2429 13.1787 15.0643 13.1787Z" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15.0643 4.14355H2.65C1.47143 4.14355 1 4.64641 1 5.8957V9.06999C1 10.3193 1.47143 10.8221 2.65 10.8221H15.0643C16.2429 10.8221 16.7143 10.3193 16.7143 9.06999V5.8957C16.7143 4.64641 16.2429 4.14355 15.0643 4.14355Z" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<g clipPath="url(#clip0_6424_3258)">
|
||||
<path d="M15.0643 13.1787H2.65C1.47143 13.1787 1 13.6816 1 14.9309V18.1051C1 19.3544 1.47143 19.8573 2.65 19.8573H15.0643C16.2429 19.8573 16.7143 19.3544 16.7143 18.1051V14.9309C16.7143 13.6816 16.2429 13.1787 15.0643 13.1787Z" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M15.0643 4.14355H2.65C1.47143 4.14355 1 4.64641 1 5.8957V9.06999C1 10.3193 1.47143 10.8221 2.65 10.8221H15.0643C16.2429 10.8221 16.7143 10.3193 16.7143 9.06999V5.8957C16.7143 4.64641 16.2429 4.14355 15.0643 4.14355Z" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</g>
|
||||
<g clip-path="url(#clip1_6424_3258)">
|
||||
<path d="M20.14 4.99716C21.3298 7.07912 21.1303 8.85883 19.5407 10.3352C20.3156 8.55061 19.8844 6.96667 18.4642 5.7629L17.2074 6.3372L18.345 3.28529L21.3969 4.42286L20.14 4.99716Z" fill="white" stroke="white" stroke-width="0.460612" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<g clipPath="url(#clip1_6424_3258)">
|
||||
<path d="M20.14 4.99716C21.3298 7.07912 21.1303 8.85883 19.5407 10.3352C20.3156 8.55061 19.8844 6.96667 18.4642 5.7629L17.2074 6.3372L18.345 3.28529L21.3969 4.42286L20.14 4.99716Z" fill="white" stroke="white" strokeWidth="0.460612" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_6424_3258">
|
||||
|
||||
@@ -305,7 +305,7 @@
|
||||
background-color: #b7b7c6;
|
||||
|
||||
// Custom polygon shape (adjust if needed)
|
||||
clip-path: polygon(96% 52%, 96% 54%, 45% 53%, 3% 100%, 0 100%, 42% 52%);
|
||||
clipPath: polygon(96% 52%, 96% 54%, 45% 53%, 3% 100%, 0 100%, 42% 52%);
|
||||
|
||||
z-index: 0; // Behind any inner content
|
||||
}
|
||||
|
||||
@@ -774,7 +774,7 @@
|
||||
|
||||
path {
|
||||
stroke: var(--text-button-color);
|
||||
stroke-width: 1.3;
|
||||
strokeWidth: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1135,7 +1135,7 @@
|
||||
|
||||
path {
|
||||
stroke: var(--accent-color);
|
||||
stroke-width: 1.5px;
|
||||
strokeWidth: 1.5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -437,7 +437,7 @@
|
||||
|
||||
path {
|
||||
stroke: var(--text-button-color);
|
||||
stroke-width: 2;
|
||||
strokeWidth: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -449,7 +449,7 @@
|
||||
|
||||
path {
|
||||
stroke: #f65648;
|
||||
stroke-width: 1.3;
|
||||
strokeWidth: 1.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user