@visns-studio/visns-components 5.12.13 → 5.12.14
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.
package/package.json
CHANGED
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
88
88
|
},
|
|
89
89
|
"name": "@visns-studio/visns-components",
|
|
90
|
-
"version": "5.12.
|
|
90
|
+
"version": "5.12.14",
|
|
91
91
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
92
92
|
"main": "src/index.js",
|
|
93
93
|
"files": [
|
|
@@ -115,45 +115,47 @@ const ColourPicker = ({ value, columnId, keyCounter, onChange }) => {
|
|
|
115
115
|
return (
|
|
116
116
|
<div className={styles.cpicker}>
|
|
117
117
|
<div className={styles.cpicker__btn}>
|
|
118
|
-
<
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
e
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
118
|
+
<Tooltip text="Select color">
|
|
119
|
+
<button
|
|
120
|
+
ref={buttonRef}
|
|
121
|
+
style={
|
|
122
|
+
value
|
|
123
|
+
? {
|
|
124
|
+
background: value,
|
|
125
|
+
border: '1px solid rgba(0,0,0,0.2)',
|
|
126
|
+
borderRadius: '3px',
|
|
127
|
+
width: '20px',
|
|
128
|
+
height: '20px',
|
|
129
|
+
padding: '0',
|
|
130
|
+
cursor: 'pointer',
|
|
131
|
+
display: 'flex',
|
|
132
|
+
alignItems: 'center',
|
|
133
|
+
justifyContent: 'center',
|
|
134
|
+
}
|
|
135
|
+
: {
|
|
136
|
+
background: 'transparent',
|
|
137
|
+
border: '1px solid rgba(0,0,0,0.2)',
|
|
138
|
+
borderRadius: '3px',
|
|
139
|
+
width: '20px',
|
|
140
|
+
height: '20px',
|
|
141
|
+
padding: '0',
|
|
142
|
+
cursor: 'pointer',
|
|
143
|
+
display: 'flex',
|
|
144
|
+
alignItems: 'center',
|
|
145
|
+
justifyContent: 'center',
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
onClick={(e) => {
|
|
149
|
+
e.preventDefault();
|
|
150
|
+
setColorPickerShow(!colorPickerShow);
|
|
151
|
+
}}
|
|
152
|
+
>
|
|
153
|
+
<Droplets
|
|
154
|
+
size={18}
|
|
155
|
+
style={{ color: value ? 'white' : 'black' }}
|
|
156
|
+
/>
|
|
157
|
+
</button>
|
|
158
|
+
</Tooltip>
|
|
157
159
|
|
|
158
160
|
{colorPickerShow &&
|
|
159
161
|
ReactDOM.createPortal(
|
|
@@ -1120,15 +1122,17 @@ const GenericEditableTable = ({
|
|
|
1120
1122
|
>
|
|
1121
1123
|
<span>{column.label}</span>
|
|
1122
1124
|
{column.copy && (
|
|
1123
|
-
<
|
|
1124
|
-
|
|
1125
|
-
e
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1125
|
+
<Tooltip text="Copy column data to clipboard">
|
|
1126
|
+
<span
|
|
1127
|
+
onClick={(e) => {
|
|
1128
|
+
e.stopPropagation();
|
|
1129
|
+
handleColumnCopy(column, group);
|
|
1130
|
+
}}
|
|
1131
|
+
style={{ cursor: 'pointer' }}
|
|
1132
|
+
>
|
|
1133
|
+
<Copy size={20} />
|
|
1134
|
+
</span>
|
|
1135
|
+
</Tooltip>
|
|
1132
1136
|
)}
|
|
1133
1137
|
</div>
|
|
1134
1138
|
</th>
|
|
@@ -789,23 +789,37 @@
|
|
|
789
789
|
vertical-align: middle !important;
|
|
790
790
|
cursor: pointer !important;
|
|
791
791
|
user-select: none !important;
|
|
792
|
-
transition: background-color 0.2s ease !important;
|
|
793
792
|
|
|
794
793
|
/* Ensure checkbox container doesn't stretch */
|
|
795
794
|
display: table-cell !important;
|
|
796
795
|
|
|
797
|
-
&:hover {
|
|
798
|
-
background-color: rgba(var(--primary-rgb), 0.08) !important;
|
|
799
|
-
}
|
|
800
|
-
|
|
801
|
-
&:active {
|
|
802
|
-
background-color: rgba(var(--primary-rgb), 0.12) !important;
|
|
803
|
-
}
|
|
804
|
-
|
|
805
796
|
input[type="checkbox"] {
|
|
806
797
|
display: inline-block !important;
|
|
807
798
|
vertical-align: middle !important;
|
|
808
799
|
pointer-events: none !important; /* Prevent direct checkbox interaction */
|
|
800
|
+
position: relative !important;
|
|
801
|
+
top: 0 !important;
|
|
802
|
+
left: 0 !important;
|
|
803
|
+
transform: none !important;
|
|
804
|
+
margin: 0 auto !important;
|
|
805
|
+
}
|
|
806
|
+
}
|
|
807
|
+
|
|
808
|
+
/* Specific styling for header checkbox to ensure proper alignment */
|
|
809
|
+
.schedulingTable th.checkboxColumn {
|
|
810
|
+
position: relative !important;
|
|
811
|
+
|
|
812
|
+
input[type="checkbox"] {
|
|
813
|
+
position: absolute !important;
|
|
814
|
+
top: 50% !important;
|
|
815
|
+
left: 50% !important;
|
|
816
|
+
transform: translate(-50%, -50%) !important;
|
|
817
|
+
margin: 0 !important;
|
|
818
|
+
display: block !important;
|
|
819
|
+
|
|
820
|
+
&:hover {
|
|
821
|
+
transform: translate(-50%, -50%) scale(1.05) !important;
|
|
822
|
+
}
|
|
809
823
|
}
|
|
810
824
|
}
|
|
811
825
|
|