@visns-studio/visns-components 4.0.10 → 4.1.1
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/components/cms/sorting/Item.jsx +1 -1
- package/components/crm/Field.jsx +100 -0
- package/components/crm/auth/Profile.jsx +2 -2
- package/components/crm/auth/styles/Profile.module.css +2 -2
- package/components/crm/generic/GenericFormBuilder.jsx +275 -3
- package/components/crm/generic/styles/GenericDynamic.module.css +13 -42
- package/components/crm/generic/styles/GenericFormBuilder.module.css +28 -54
- package/components/crm/styles/Field.module.css +78 -2
- package/components/crm/styles/TableFilter.module.css +1 -1
- package/package.json +1 -1
package/components/crm/Field.jsx
CHANGED
|
@@ -254,6 +254,8 @@ function Field({
|
|
|
254
254
|
'radio-ajax',
|
|
255
255
|
'richeditor',
|
|
256
256
|
'signature',
|
|
257
|
+
'table_radio',
|
|
258
|
+
'table_text',
|
|
257
259
|
'time',
|
|
258
260
|
].includes(settings.type)
|
|
259
261
|
) {
|
|
@@ -1096,6 +1098,102 @@ function Field({
|
|
|
1096
1098
|
)}
|
|
1097
1099
|
</>
|
|
1098
1100
|
);
|
|
1101
|
+
case 'table_radio':
|
|
1102
|
+
let tableRadioColumns = [];
|
|
1103
|
+
let tableRadioRows = [];
|
|
1104
|
+
|
|
1105
|
+
for (const key in formData) {
|
|
1106
|
+
if (formData[key].id === settings.id) {
|
|
1107
|
+
if (formData[key].hasOwnProperty('options')) {
|
|
1108
|
+
tableRadioColumns = formData[key].options;
|
|
1109
|
+
tableRadioRows = formData[key].rows;
|
|
1110
|
+
break; // Assuming there's only one match needed, break out of the loop
|
|
1111
|
+
}
|
|
1112
|
+
}
|
|
1113
|
+
}
|
|
1114
|
+
|
|
1115
|
+
return (
|
|
1116
|
+
<table className={styles.contentTable}>
|
|
1117
|
+
<thead>
|
|
1118
|
+
<tr>
|
|
1119
|
+
<th></th>
|
|
1120
|
+
{tableRadioColumns.map((column, columnKey) => (
|
|
1121
|
+
<th
|
|
1122
|
+
key={`${settings.id}-${columnKey.id}`}
|
|
1123
|
+
style={{
|
|
1124
|
+
width: '250px',
|
|
1125
|
+
whiteSpace: 'nowrap',
|
|
1126
|
+
}}
|
|
1127
|
+
>
|
|
1128
|
+
{column.label}
|
|
1129
|
+
</th>
|
|
1130
|
+
))}
|
|
1131
|
+
</tr>
|
|
1132
|
+
</thead>
|
|
1133
|
+
<tbody>
|
|
1134
|
+
{tableRadioRows.map((row, rowKey) => (
|
|
1135
|
+
<tr
|
|
1136
|
+
key={`table-radio-row-${settings.id}-${rowKey}`}
|
|
1137
|
+
>
|
|
1138
|
+
<td
|
|
1139
|
+
style={{
|
|
1140
|
+
whiteSpace: 'nowrap',
|
|
1141
|
+
}}
|
|
1142
|
+
>
|
|
1143
|
+
{row.label}
|
|
1144
|
+
</td>
|
|
1145
|
+
{tableRadioColumns.map(
|
|
1146
|
+
(column, columnKey) => (
|
|
1147
|
+
<td
|
|
1148
|
+
key={`table-radio-cell-${settings.id}-${rowKey}-${columnKey}`}
|
|
1149
|
+
>
|
|
1150
|
+
<input
|
|
1151
|
+
type="radio"
|
|
1152
|
+
name={`radio-${settings.id}-${rowKey}`}
|
|
1153
|
+
/>
|
|
1154
|
+
</td>
|
|
1155
|
+
)
|
|
1156
|
+
)}
|
|
1157
|
+
</tr>
|
|
1158
|
+
))}
|
|
1159
|
+
</tbody>
|
|
1160
|
+
</table>
|
|
1161
|
+
);
|
|
1162
|
+
case 'table_text':
|
|
1163
|
+
let tableTextColumns = [];
|
|
1164
|
+
|
|
1165
|
+
for (const key in formData) {
|
|
1166
|
+
if (formData[key].id === settings.id) {
|
|
1167
|
+
if (formData[key].hasOwnProperty('options')) {
|
|
1168
|
+
tableTextColumns = formData[key].options;
|
|
1169
|
+
break; // Assuming there's only one match needed, break out of the loop
|
|
1170
|
+
}
|
|
1171
|
+
}
|
|
1172
|
+
}
|
|
1173
|
+
return (
|
|
1174
|
+
<table className={styles.contentTable}>
|
|
1175
|
+
<thead>
|
|
1176
|
+
<tr>
|
|
1177
|
+
{tableTextColumns.map((column, columnKey) => (
|
|
1178
|
+
<th key={`${settings.id}-${columnKey.id}`}>
|
|
1179
|
+
{column.label}
|
|
1180
|
+
</th>
|
|
1181
|
+
))}
|
|
1182
|
+
</tr>
|
|
1183
|
+
</thead>
|
|
1184
|
+
<tbody>
|
|
1185
|
+
<tr>
|
|
1186
|
+
{tableTextColumns.map((column, columnKey) => (
|
|
1187
|
+
<td
|
|
1188
|
+
key={`${settings.id}-${columnKey.id}-input`}
|
|
1189
|
+
>
|
|
1190
|
+
<input type="text" />
|
|
1191
|
+
</td>
|
|
1192
|
+
))}
|
|
1193
|
+
</tr>
|
|
1194
|
+
</tbody>
|
|
1195
|
+
</table>
|
|
1196
|
+
);
|
|
1099
1197
|
case 'textarea':
|
|
1100
1198
|
return (
|
|
1101
1199
|
<textarea
|
|
@@ -1160,6 +1258,8 @@ function Field({
|
|
|
1160
1258
|
'radio-ajax',
|
|
1161
1259
|
'richeditor',
|
|
1162
1260
|
'signature',
|
|
1261
|
+
'table_radio',
|
|
1262
|
+
'table_text',
|
|
1163
1263
|
'time',
|
|
1164
1264
|
'toggle',
|
|
1165
1265
|
].includes(settings.type)
|
|
@@ -101,8 +101,8 @@ const Profile = ({ userProfile, setUserProfile }) => {
|
|
|
101
101
|
|
|
102
102
|
setUserProfile((prevState) => ({
|
|
103
103
|
...prevState,
|
|
104
|
-
name: res.data.name,
|
|
105
|
-
signature: res.data.signature,
|
|
104
|
+
name: res.data.user.name,
|
|
105
|
+
signature: res.data.user.signature,
|
|
106
106
|
}));
|
|
107
107
|
toast.success('Your profile has been successfully updated.');
|
|
108
108
|
} catch (err) {
|
|
@@ -151,13 +151,13 @@ input[type='password'] {
|
|
|
151
151
|
|
|
152
152
|
input[type='text']:hover,
|
|
153
153
|
input[type='password']:hover {
|
|
154
|
-
border: 1px solid rgba(var(--highlight-color), 0.85);
|
|
154
|
+
border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
|
|
155
155
|
transition: border 0.15s linear;
|
|
156
156
|
}
|
|
157
157
|
|
|
158
158
|
input[type='text']:focus,
|
|
159
159
|
input[type='password']:focus {
|
|
160
|
-
border: 1px solid rgba(var(--highlight-color), 0.85);
|
|
160
|
+
border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
input:not(:placeholder-shown) + .fi__span,
|
|
@@ -24,7 +24,8 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
24
24
|
const editorRef = useRef(null);
|
|
25
25
|
const routeParams = useParams();
|
|
26
26
|
|
|
27
|
-
const { fetchUrl, fields, parentUrl, formTitle } =
|
|
27
|
+
const { dynamicDropdowns, fetchUrl, fields, parentUrl, formTitle } =
|
|
28
|
+
setting;
|
|
28
29
|
|
|
29
30
|
const { dataId } = useParams();
|
|
30
31
|
const [data, setData] = useState({});
|
|
@@ -34,6 +35,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
34
35
|
description: '',
|
|
35
36
|
type: '',
|
|
36
37
|
options: [],
|
|
38
|
+
rows: [],
|
|
37
39
|
size: 'quarter',
|
|
38
40
|
required: 'no',
|
|
39
41
|
});
|
|
@@ -41,6 +43,10 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
41
43
|
id: '',
|
|
42
44
|
label: '',
|
|
43
45
|
});
|
|
46
|
+
const [rowOption, setRowOption] = useState({
|
|
47
|
+
id: '',
|
|
48
|
+
label: '',
|
|
49
|
+
});
|
|
44
50
|
const [modalShow, setModalShow] = useState(false);
|
|
45
51
|
const [modalType, setModalType] = useState({
|
|
46
52
|
type: 'create',
|
|
@@ -101,6 +107,59 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
101
107
|
});
|
|
102
108
|
};
|
|
103
109
|
|
|
110
|
+
/** Row Option Functionalities */
|
|
111
|
+
const handleRowOption = (e) => {
|
|
112
|
+
const { name, value } = e.target;
|
|
113
|
+
|
|
114
|
+
setRowOption((items) => ({
|
|
115
|
+
...items,
|
|
116
|
+
[name]: value,
|
|
117
|
+
id: `${slugify(value)}-`,
|
|
118
|
+
}));
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
const handleAddRowOption = (e) => {
|
|
122
|
+
e.preventDefault();
|
|
123
|
+
|
|
124
|
+
if (rowOption.label !== '') {
|
|
125
|
+
const isLabelUnique = !dataField.rows.some(
|
|
126
|
+
(option) => option.label === rowOption.label
|
|
127
|
+
);
|
|
128
|
+
|
|
129
|
+
if (isLabelUnique) {
|
|
130
|
+
setDataField((items) => ({
|
|
131
|
+
...items,
|
|
132
|
+
rows: [...items.rows, rowOption],
|
|
133
|
+
}));
|
|
134
|
+
|
|
135
|
+
setRowOption(() => ({
|
|
136
|
+
id: '',
|
|
137
|
+
label: '',
|
|
138
|
+
}));
|
|
139
|
+
} else {
|
|
140
|
+
toast.warn('Option label must be unique.');
|
|
141
|
+
}
|
|
142
|
+
} else {
|
|
143
|
+
toast.warn('Please enter a label for the option.');
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
const handleDeleteRowOption = (e) => {
|
|
148
|
+
e.preventDefault();
|
|
149
|
+
|
|
150
|
+
const { counter } = e.target.dataset;
|
|
151
|
+
|
|
152
|
+
setDataField((prevState) => {
|
|
153
|
+
const rows = prevState.rows.slice();
|
|
154
|
+
rows.splice(counter, 1);
|
|
155
|
+
|
|
156
|
+
return {
|
|
157
|
+
...prevState,
|
|
158
|
+
rows: rows,
|
|
159
|
+
};
|
|
160
|
+
});
|
|
161
|
+
};
|
|
162
|
+
|
|
104
163
|
/** Field Functionalities */
|
|
105
164
|
const onSortEnd = ({ oldIndex, newIndex }) => {
|
|
106
165
|
const newData = arrayMoveImmutable(data.detail, oldIndex, newIndex);
|
|
@@ -372,6 +431,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
372
431
|
</label>
|
|
373
432
|
);
|
|
374
433
|
case 'dropdown':
|
|
434
|
+
case 'dynamicDropdown':
|
|
375
435
|
return (
|
|
376
436
|
<label className={styles.fi__label}>
|
|
377
437
|
<select>
|
|
@@ -462,7 +522,36 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
462
522
|
case 'table_radio':
|
|
463
523
|
return (
|
|
464
524
|
<label className={styles.fi__label}>
|
|
465
|
-
<table className={styles.contentTable}
|
|
525
|
+
<table className={styles.contentTable}>
|
|
526
|
+
<thead>
|
|
527
|
+
<tr>
|
|
528
|
+
<th></th>
|
|
529
|
+
{field.options.map((option, index) => (
|
|
530
|
+
<th
|
|
531
|
+
key={`${field.id}-table-text-option-${index}`}
|
|
532
|
+
>
|
|
533
|
+
{option.label}
|
|
534
|
+
</th>
|
|
535
|
+
))}
|
|
536
|
+
</tr>
|
|
537
|
+
</thead>
|
|
538
|
+
<tbody>
|
|
539
|
+
{field.rows.map((row, rowKey) => (
|
|
540
|
+
<tr
|
|
541
|
+
key={`${field.id}-table-text-row-data-${rowKey}`}
|
|
542
|
+
>
|
|
543
|
+
<td>{row.label}</td>
|
|
544
|
+
{field.options.map(
|
|
545
|
+
(option, optionKey) => (
|
|
546
|
+
<td
|
|
547
|
+
key={`${field.id}-table-text-data-${optionKey}-${rowKey}`}
|
|
548
|
+
></td>
|
|
549
|
+
)
|
|
550
|
+
)}
|
|
551
|
+
</tr>
|
|
552
|
+
))}
|
|
553
|
+
</tbody>
|
|
554
|
+
</table>
|
|
466
555
|
<span
|
|
467
556
|
className={`${styles.fi__span} ${styles.prefocus}`}
|
|
468
557
|
>
|
|
@@ -769,6 +858,12 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
769
858
|
<option value="dropdown">
|
|
770
859
|
Dropdown
|
|
771
860
|
</option>
|
|
861
|
+
{dynamicDropdowns &&
|
|
862
|
+
dynamicDropdowns.length > 0 ? (
|
|
863
|
+
<option value="dynamicDropdown">
|
|
864
|
+
Dynamic Dropdown
|
|
865
|
+
</option>
|
|
866
|
+
) : null}
|
|
772
867
|
<option value="dynamicdata">
|
|
773
868
|
Dynamic Data
|
|
774
869
|
</option>
|
|
@@ -875,6 +970,41 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
875
970
|
</label>
|
|
876
971
|
</div>
|
|
877
972
|
)}
|
|
973
|
+
{dataField.type === 'dynamicDropdown' && (
|
|
974
|
+
<div className={styles.formItem}>
|
|
975
|
+
<label className={styles.fi__label}>
|
|
976
|
+
<select
|
|
977
|
+
name="dynamicDropdown"
|
|
978
|
+
value={
|
|
979
|
+
dataField.dynamicDropdown
|
|
980
|
+
}
|
|
981
|
+
onChange={handleChangeForm}
|
|
982
|
+
>
|
|
983
|
+
<option value="">
|
|
984
|
+
Please select an option
|
|
985
|
+
</option>
|
|
986
|
+
{dynamicDropdowns.map(
|
|
987
|
+
(
|
|
988
|
+
dropdown,
|
|
989
|
+
dropdownKey
|
|
990
|
+
) => (
|
|
991
|
+
<option
|
|
992
|
+
value={`${dropdown.url}`}
|
|
993
|
+
key={`dynamic-dropdown-${dropdownKey}`}
|
|
994
|
+
>
|
|
995
|
+
{dropdown.label}
|
|
996
|
+
</option>
|
|
997
|
+
)
|
|
998
|
+
)}
|
|
999
|
+
</select>
|
|
1000
|
+
<span
|
|
1001
|
+
className={styles.fi__span}
|
|
1002
|
+
>
|
|
1003
|
+
Dropdown *
|
|
1004
|
+
</span>
|
|
1005
|
+
</label>
|
|
1006
|
+
</div>
|
|
1007
|
+
)}
|
|
878
1008
|
<div className={styles.formItem}>
|
|
879
1009
|
<label className={styles.fi__label}>
|
|
880
1010
|
<select
|
|
@@ -1008,7 +1138,9 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
1008
1138
|
}}
|
|
1009
1139
|
>
|
|
1010
1140
|
{dataField.type ===
|
|
1011
|
-
|
|
1141
|
+
'table_text' ||
|
|
1142
|
+
dataField.type ===
|
|
1143
|
+
'table_radio'
|
|
1012
1144
|
? 'Column Header'
|
|
1013
1145
|
: 'Label'}
|
|
1014
1146
|
</th>
|
|
@@ -1131,6 +1263,146 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
|
|
|
1131
1263
|
</table>
|
|
1132
1264
|
</div>
|
|
1133
1265
|
) : null}
|
|
1266
|
+
|
|
1267
|
+
{['table_radio'].includes(
|
|
1268
|
+
dataField.type
|
|
1269
|
+
) ? (
|
|
1270
|
+
<div
|
|
1271
|
+
className={`${styles.formItem} ${styles.fwItem}`}
|
|
1272
|
+
>
|
|
1273
|
+
<table
|
|
1274
|
+
className={styles.contentTable}
|
|
1275
|
+
>
|
|
1276
|
+
<thead
|
|
1277
|
+
className={
|
|
1278
|
+
styles.gridHeaders
|
|
1279
|
+
}
|
|
1280
|
+
>
|
|
1281
|
+
<tr>
|
|
1282
|
+
<th
|
|
1283
|
+
style={{
|
|
1284
|
+
width: '450px',
|
|
1285
|
+
}}
|
|
1286
|
+
>
|
|
1287
|
+
Row Label
|
|
1288
|
+
</th>
|
|
1289
|
+
<th></th>
|
|
1290
|
+
</tr>
|
|
1291
|
+
</thead>
|
|
1292
|
+
<tbody>
|
|
1293
|
+
{dataField.rows.length >
|
|
1294
|
+
0 ? (
|
|
1295
|
+
dataField.rows.map(
|
|
1296
|
+
(row, rowKey) => (
|
|
1297
|
+
<tr
|
|
1298
|
+
key={`row-${rowKey}`}
|
|
1299
|
+
>
|
|
1300
|
+
<td>
|
|
1301
|
+
{
|
|
1302
|
+
row.label
|
|
1303
|
+
}
|
|
1304
|
+
</td>
|
|
1305
|
+
<td
|
|
1306
|
+
style={{
|
|
1307
|
+
textAlign:
|
|
1308
|
+
'center',
|
|
1309
|
+
}}
|
|
1310
|
+
>
|
|
1311
|
+
<button
|
|
1312
|
+
className={
|
|
1313
|
+
styles.btn
|
|
1314
|
+
}
|
|
1315
|
+
style={{
|
|
1316
|
+
padding:
|
|
1317
|
+
'5px 20px',
|
|
1318
|
+
}}
|
|
1319
|
+
onClick={
|
|
1320
|
+
handleDeleteRowOption
|
|
1321
|
+
}
|
|
1322
|
+
data-counter={
|
|
1323
|
+
rowKey
|
|
1324
|
+
}
|
|
1325
|
+
data-tooltip-id="system-tooltip"
|
|
1326
|
+
data-tooltip-content={
|
|
1327
|
+
'Delete Option'
|
|
1328
|
+
}
|
|
1329
|
+
>
|
|
1330
|
+
<TrashCan
|
|
1331
|
+
strokeWidth={
|
|
1332
|
+
2
|
|
1333
|
+
}
|
|
1334
|
+
size={
|
|
1335
|
+
12
|
|
1336
|
+
}
|
|
1337
|
+
/>
|
|
1338
|
+
</button>
|
|
1339
|
+
</td>
|
|
1340
|
+
</tr>
|
|
1341
|
+
)
|
|
1342
|
+
)
|
|
1343
|
+
) : (
|
|
1344
|
+
<tr>
|
|
1345
|
+
<td colSpan="2">
|
|
1346
|
+
No entry have
|
|
1347
|
+
been added.
|
|
1348
|
+
</td>
|
|
1349
|
+
</tr>
|
|
1350
|
+
)}
|
|
1351
|
+
</tbody>
|
|
1352
|
+
<tfoot>
|
|
1353
|
+
<tr>
|
|
1354
|
+
<td>
|
|
1355
|
+
<input
|
|
1356
|
+
type="text"
|
|
1357
|
+
style={{
|
|
1358
|
+
padding:
|
|
1359
|
+
'5px',
|
|
1360
|
+
}}
|
|
1361
|
+
name="label"
|
|
1362
|
+
onChange={
|
|
1363
|
+
handleRowOption
|
|
1364
|
+
}
|
|
1365
|
+
value={
|
|
1366
|
+
rowOption.label
|
|
1367
|
+
}
|
|
1368
|
+
/>
|
|
1369
|
+
</td>
|
|
1370
|
+
<td
|
|
1371
|
+
style={{
|
|
1372
|
+
textAlign:
|
|
1373
|
+
'center',
|
|
1374
|
+
}}
|
|
1375
|
+
>
|
|
1376
|
+
<button
|
|
1377
|
+
className={
|
|
1378
|
+
styles.btn
|
|
1379
|
+
}
|
|
1380
|
+
style={{
|
|
1381
|
+
padding:
|
|
1382
|
+
'5px 20px',
|
|
1383
|
+
}}
|
|
1384
|
+
onClick={
|
|
1385
|
+
handleAddRowOption
|
|
1386
|
+
}
|
|
1387
|
+
data-tooltip-id="system-tooltip"
|
|
1388
|
+
data-tooltip-content={
|
|
1389
|
+
'Add Option'
|
|
1390
|
+
}
|
|
1391
|
+
>
|
|
1392
|
+
<CirclePlus
|
|
1393
|
+
strokeWidth={
|
|
1394
|
+
2
|
|
1395
|
+
}
|
|
1396
|
+
size={12}
|
|
1397
|
+
/>
|
|
1398
|
+
</button>
|
|
1399
|
+
</td>
|
|
1400
|
+
</tr>
|
|
1401
|
+
</tfoot>
|
|
1402
|
+
</table>
|
|
1403
|
+
</div>
|
|
1404
|
+
) : null}
|
|
1405
|
+
|
|
1134
1406
|
<div
|
|
1135
1407
|
className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}
|
|
1136
1408
|
>
|
|
@@ -45,12 +45,7 @@
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.crmtitle h1 svg {
|
|
48
|
-
color: rgba(
|
|
49
|
-
var(--primary-color-r),
|
|
50
|
-
var(--primary-color-g),
|
|
51
|
-
var(--primary-color-b),
|
|
52
|
-
0.85
|
|
53
|
-
);
|
|
48
|
+
color: rgba(var(--primary-color-rgb), 0.85);
|
|
54
49
|
position: relative;
|
|
55
50
|
top: 2px;
|
|
56
51
|
margin: 0 0.25rem;
|
|
@@ -254,7 +249,7 @@
|
|
|
254
249
|
):not(.inovua-react-toolkit-combo-box__input):not(
|
|
255
250
|
.inovua-react-toolkit-date-input__input
|
|
256
251
|
):not(.inovua-react-toolkit-numeric-input__input):hover {
|
|
257
|
-
border: 1px solid rgba(var(--highlight-color), 0.85);
|
|
252
|
+
border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
|
|
258
253
|
transition: border 0.15s linear;
|
|
259
254
|
}
|
|
260
255
|
|
|
@@ -266,7 +261,7 @@
|
|
|
266
261
|
):not(.inovua-react-toolkit-combo-box__input):not(
|
|
267
262
|
.inovua-react-toolkit-date-input__input
|
|
268
263
|
):not(.inovua-react-toolkit-numeric-input__input):focus {
|
|
269
|
-
border: 1px solid rgba(var(--highlight-color), 0.85);
|
|
264
|
+
border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
|
|
270
265
|
}
|
|
271
266
|
|
|
272
267
|
input[type='file'] {
|
|
@@ -531,7 +526,7 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
531
526
|
background-color: white;
|
|
532
527
|
padding: 0;
|
|
533
528
|
margin: 0;
|
|
534
|
-
border: 1px solid rgba(var(--primary-color), 0.25);
|
|
529
|
+
border: 1px solid rgba(var(--primary-color-rgb), 0.25);
|
|
535
530
|
border-radius: var(--br);
|
|
536
531
|
overflow: hidden;
|
|
537
532
|
z-index: 999;
|
|
@@ -539,13 +534,13 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
539
534
|
|
|
540
535
|
.AutocompletePlace-items {
|
|
541
536
|
list-style: none;
|
|
542
|
-
border-bottom: 1px solid rgba(var(--primary-color), 0.1);
|
|
537
|
+
border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
|
|
543
538
|
cursor: pointer;
|
|
544
539
|
padding: 10px 10px;
|
|
545
540
|
}
|
|
546
541
|
|
|
547
542
|
.AutocompletePlace-items:hover {
|
|
548
|
-
background-color: rgba(var(--paragraph-color), 0.065);
|
|
543
|
+
background-color: rgba(var(--paragraph-color-rgb), 0.065);
|
|
549
544
|
}
|
|
550
545
|
|
|
551
546
|
.react-datepicker-wrapper {
|
|
@@ -557,19 +552,19 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
557
552
|
}
|
|
558
553
|
|
|
559
554
|
.react-datepicker__close-icon:after {
|
|
560
|
-
background-color: rgba(var(--primary-color), 0.45) !important;
|
|
555
|
+
background-color: rgba(var(--primary-color-rgb), 0.45) !important;
|
|
561
556
|
font-size: 13px !important;
|
|
562
557
|
}
|
|
563
558
|
|
|
564
559
|
.react-datepicker__close-icon:hover:after {
|
|
565
|
-
background-color: rgba(var(--primary-color), 1) !important;
|
|
560
|
+
background-color: rgba(var(--primary-color-rgb), 1) !important;
|
|
566
561
|
}
|
|
567
562
|
|
|
568
563
|
.formbreak {
|
|
569
564
|
display: block;
|
|
570
565
|
width: 100%;
|
|
571
566
|
padding: 1em;
|
|
572
|
-
background: rgba(var(--primary-color), 0.95);
|
|
567
|
+
background: rgba(var(--primary-color-rgb), 0.95);
|
|
573
568
|
border-radius: 3px;
|
|
574
569
|
box-sizing: border-box;
|
|
575
570
|
border: 2px solid darken(var(--primary-color), 10%);
|
|
@@ -832,20 +827,8 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
832
827
|
align-items: center;
|
|
833
828
|
flex-wrap: wrap;
|
|
834
829
|
border-radius: 5px;
|
|
835
|
-
border: 1px solid
|
|
836
|
-
|
|
837
|
-
var(--primary-color-r),
|
|
838
|
-
var(--primary-color-g),
|
|
839
|
-
var(--primary-color-b),
|
|
840
|
-
0.2
|
|
841
|
-
);
|
|
842
|
-
box-shadow: 0px 0px 20px
|
|
843
|
-
rgba(
|
|
844
|
-
var(--primary-color-r),
|
|
845
|
-
var(--primary-color-g),
|
|
846
|
-
var(--primary-color-b),
|
|
847
|
-
0.1
|
|
848
|
-
);
|
|
830
|
+
border: 1px solid rgba(var(--primary-color-rgb), 0.2);
|
|
831
|
+
box-shadow: 0px 0px 20px rgba(var(--primary-color-rgb), 0.1);
|
|
849
832
|
padding: 1.25rem 1.25rem 1.25rem 2rem;
|
|
850
833
|
box-sizing: border-box;
|
|
851
834
|
cursor: pointer;
|
|
@@ -886,20 +869,8 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
886
869
|
align-items: center;
|
|
887
870
|
flex-wrap: wrap;
|
|
888
871
|
border-radius: 5px;
|
|
889
|
-
border: 1px solid
|
|
890
|
-
|
|
891
|
-
var(--primary-color-r),
|
|
892
|
-
var(--primary-color-g),
|
|
893
|
-
var(--primary-color-b),
|
|
894
|
-
0.2
|
|
895
|
-
);
|
|
896
|
-
box-shadow: 0px 0px 30px
|
|
897
|
-
rgba(
|
|
898
|
-
var(--primary-color-r),
|
|
899
|
-
var(--primary-color-g),
|
|
900
|
-
var(--primary-color-b),
|
|
901
|
-
0.25
|
|
902
|
-
);
|
|
872
|
+
border: 1px solid rgba(var(--primary-color-rgb), 0.2);
|
|
873
|
+
box-shadow: 0px 0px 30px rgba(var(--primary-color-rgb), 0.25);
|
|
903
874
|
padding: 1.25rem 1.25rem 1.25rem 2rem;
|
|
904
875
|
box-sizing: border-box;
|
|
905
876
|
cursor: grab;
|
|
@@ -45,12 +45,7 @@
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.crmtitle h1 svg {
|
|
48
|
-
color: rgba(
|
|
49
|
-
var(--primary-color-r),
|
|
50
|
-
var(--primary-color-g),
|
|
51
|
-
var(--primary-color-b),
|
|
52
|
-
0.85
|
|
53
|
-
);
|
|
48
|
+
color: rgba(var(--primary-color-rgb), 0.85);
|
|
54
49
|
position: relative;
|
|
55
50
|
top: 2px;
|
|
56
51
|
margin: 0 0.25rem;
|
|
@@ -235,9 +230,9 @@
|
|
|
235
230
|
):not(.inovua-react-toolkit-text-input__input):not(
|
|
236
231
|
.inovua-react-toolkit-numeric-input__input
|
|
237
232
|
) {
|
|
238
|
-
background:
|
|
233
|
+
background: rgba(white, 0.5);
|
|
239
234
|
border-radius: var(--br);
|
|
240
|
-
border: 1px solid
|
|
235
|
+
border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
|
|
241
236
|
padding: 1rem;
|
|
242
237
|
outline: none;
|
|
243
238
|
width: 100%;
|
|
@@ -254,7 +249,7 @@
|
|
|
254
249
|
):not(.inovua-react-toolkit-combo-box__input):not(
|
|
255
250
|
.inovua-react-toolkit-date-input__input
|
|
256
251
|
):not(.inovua-react-toolkit-numeric-input__input):hover {
|
|
257
|
-
border: 1px solid rgba(var(--
|
|
252
|
+
border: 1px solid rgba(var(--primary-color-rgb), 0.85);
|
|
258
253
|
transition: border 0.15s linear;
|
|
259
254
|
}
|
|
260
255
|
|
|
@@ -266,7 +261,7 @@
|
|
|
266
261
|
):not(.inovua-react-toolkit-combo-box__input):not(
|
|
267
262
|
.inovua-react-toolkit-date-input__input
|
|
268
263
|
):not(.inovua-react-toolkit-numeric-input__input):focus {
|
|
269
|
-
border: 1px solid rgba(var(--highlight-color), 0.85);
|
|
264
|
+
border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
|
|
270
265
|
}
|
|
271
266
|
|
|
272
267
|
input[type='file'] {
|
|
@@ -462,7 +457,7 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
462
457
|
padding: 0.65rem 1rem;
|
|
463
458
|
cursor: pointer;
|
|
464
459
|
font-size: 1rem;
|
|
465
|
-
color: var(--
|
|
460
|
+
color: var(--tertiary-color);
|
|
466
461
|
text-decoration: none;
|
|
467
462
|
overflow: hidden;
|
|
468
463
|
background: var(--primary-color);
|
|
@@ -539,13 +534,13 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
539
534
|
|
|
540
535
|
.AutocompletePlace-items {
|
|
541
536
|
list-style: none;
|
|
542
|
-
border-bottom: 1px solid rgba(var(--primary-color), 0.1);
|
|
537
|
+
border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
|
|
543
538
|
cursor: pointer;
|
|
544
539
|
padding: 10px 10px;
|
|
545
540
|
}
|
|
546
541
|
|
|
547
542
|
.AutocompletePlace-items:hover {
|
|
548
|
-
background-color: rgba(var(--paragraph-color), 0.065);
|
|
543
|
+
background-color: rgba(var(--paragraph-color-rgb), 0.065);
|
|
549
544
|
}
|
|
550
545
|
|
|
551
546
|
.react-datepicker-wrapper {
|
|
@@ -557,19 +552,19 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
557
552
|
}
|
|
558
553
|
|
|
559
554
|
.react-datepicker__close-icon:after {
|
|
560
|
-
background-color: rgba(var(--primary-color), 0.45) !important;
|
|
555
|
+
background-color: rgba(var(--primary-color-rgb), 0.45) !important;
|
|
561
556
|
font-size: 13px !important;
|
|
562
557
|
}
|
|
563
558
|
|
|
564
559
|
.react-datepicker__close-icon:hover:after {
|
|
565
|
-
background-color: rgba(var(--primary-color), 1) !important;
|
|
560
|
+
background-color: rgba(var(--primary-color-rgb), 1) !important;
|
|
566
561
|
}
|
|
567
562
|
|
|
568
563
|
.formbreak {
|
|
569
564
|
display: block;
|
|
570
565
|
width: 100%;
|
|
571
566
|
padding: 1em;
|
|
572
|
-
background: rgba(var(--primary-color), 0.95);
|
|
567
|
+
background: rgba(var(--primary-color-rgb), 0.95);
|
|
573
568
|
border-radius: 3px;
|
|
574
569
|
box-sizing: border-box;
|
|
575
570
|
border: 2px solid darken(var(--primary-color), 10%);
|
|
@@ -832,20 +827,8 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
832
827
|
align-items: center;
|
|
833
828
|
flex-wrap: wrap;
|
|
834
829
|
border-radius: 5px;
|
|
835
|
-
border: 1px solid
|
|
836
|
-
|
|
837
|
-
var(--primary-color-r),
|
|
838
|
-
var(--primary-color-g),
|
|
839
|
-
var(--primary-color-b),
|
|
840
|
-
0.2
|
|
841
|
-
);
|
|
842
|
-
box-shadow: 0px 0px 20px
|
|
843
|
-
rgba(
|
|
844
|
-
var(--primary-color-r),
|
|
845
|
-
var(--primary-color-g),
|
|
846
|
-
var(--primary-color-b),
|
|
847
|
-
0.1
|
|
848
|
-
);
|
|
830
|
+
border: 1px solid rgba(var(--primary-color-rgb), 0.2);
|
|
831
|
+
box-shadow: 0px 0px 20px rgba(var(--primary-color-rgb), 0.1);
|
|
849
832
|
padding: 1.25rem 1.25rem 1.25rem 2rem;
|
|
850
833
|
box-sizing: border-box;
|
|
851
834
|
cursor: pointer;
|
|
@@ -863,15 +846,14 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
863
846
|
}
|
|
864
847
|
|
|
865
848
|
.sortlist li .delete {
|
|
866
|
-
width:
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
overflow: hidden;
|
|
849
|
+
width: 100%;
|
|
850
|
+
max-width: 18px;
|
|
851
|
+
position: absolute;
|
|
852
|
+
left: 5px;
|
|
853
|
+
top: 30px;
|
|
872
854
|
}
|
|
873
855
|
|
|
874
|
-
.sortlist li .
|
|
856
|
+
.sortlist li .sortimg img {
|
|
875
857
|
display: block;
|
|
876
858
|
object-fit: cover;
|
|
877
859
|
height: 100%;
|
|
@@ -886,27 +868,15 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
886
868
|
align-items: center;
|
|
887
869
|
flex-wrap: wrap;
|
|
888
870
|
border-radius: 5px;
|
|
889
|
-
border: 1px solid
|
|
890
|
-
|
|
891
|
-
var(--primary-color-r),
|
|
892
|
-
var(--primary-color-g),
|
|
893
|
-
var(--primary-color-b),
|
|
894
|
-
0.2
|
|
895
|
-
);
|
|
896
|
-
box-shadow: 0px 0px 30px
|
|
897
|
-
rgba(
|
|
898
|
-
var(--primary-color-r),
|
|
899
|
-
var(--primary-color-g),
|
|
900
|
-
var(--primary-color-b),
|
|
901
|
-
0.25
|
|
902
|
-
);
|
|
871
|
+
border: 1px solid rgba(var(--primary-color-rgb), 0.2);
|
|
872
|
+
box-shadow: 0px 0px 30px rgba(var(--primary-color-rgb), 0.25);
|
|
903
873
|
padding: 1.25rem 1.25rem 1.25rem 2rem;
|
|
904
874
|
box-sizing: border-box;
|
|
905
875
|
cursor: grab;
|
|
906
876
|
color: var(--paragraph-color);
|
|
907
877
|
}
|
|
908
878
|
|
|
909
|
-
.dragitem svg {
|
|
879
|
+
.dragitem svg:first-of-type {
|
|
910
880
|
width: 100%;
|
|
911
881
|
max-width: 18px;
|
|
912
882
|
position: absolute;
|
|
@@ -914,8 +884,12 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
914
884
|
top: 5px;
|
|
915
885
|
}
|
|
916
886
|
|
|
917
|
-
.dragitem
|
|
918
|
-
|
|
887
|
+
.dragitem svg:nth-of-type(2) {
|
|
888
|
+
width: 100%;
|
|
889
|
+
max-width: 18px;
|
|
890
|
+
position: absolute;
|
|
891
|
+
left: 5px;
|
|
892
|
+
top: 30px;
|
|
919
893
|
}
|
|
920
894
|
|
|
921
895
|
.dragitem .sortimg {
|
|
@@ -80,7 +80,7 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
80
80
|
):not(.inovua-react-toolkit-combo-box__input):not(
|
|
81
81
|
.inovua-react-toolkit-date-input__input
|
|
82
82
|
):not(.inovua-react-toolkit-numeric-input__input):hover {
|
|
83
|
-
border: 1px solid rgba(var(--highlight-color), 0.85);
|
|
83
|
+
border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
|
|
84
84
|
transition: border 0.15s linear;
|
|
85
85
|
}
|
|
86
86
|
|
|
@@ -92,7 +92,7 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
92
92
|
):not(.inovua-react-toolkit-combo-box__input):not(
|
|
93
93
|
.inovua-react-toolkit-date-input__input
|
|
94
94
|
):not(.inovua-react-toolkit-numeric-input__input):focus {
|
|
95
|
-
border: 1px solid rgba(var(--highlight-color), 0.85);
|
|
95
|
+
border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
input[type='file'] {
|
|
@@ -144,3 +144,79 @@ input[type='file']:hover {
|
|
|
144
144
|
background: var(--secondary-color);
|
|
145
145
|
color: var(--primary-color);
|
|
146
146
|
}
|
|
147
|
+
|
|
148
|
+
/* Table Styles */
|
|
149
|
+
|
|
150
|
+
.contentTable {
|
|
151
|
+
width: 100%;
|
|
152
|
+
border-collapse: collapse;
|
|
153
|
+
margin: 0 auto;
|
|
154
|
+
font-size: 1em;
|
|
155
|
+
border-radius: var(--br) var(--br) 0 0;
|
|
156
|
+
overflow: hidden;
|
|
157
|
+
border: none;
|
|
158
|
+
border-spacing: 0;
|
|
159
|
+
box-sizing: border-box;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.contentTable thead {
|
|
163
|
+
display: table-row-group;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.contentTable thead tr {
|
|
167
|
+
background: var(--table-color);
|
|
168
|
+
color: var(--primary-color);
|
|
169
|
+
text-align: left;
|
|
170
|
+
font-weight: 700;
|
|
171
|
+
text-transform: capitalize;
|
|
172
|
+
font-size: 1em;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.contentTable .filterRow th {
|
|
176
|
+
padding: 0;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.contentTable th,
|
|
180
|
+
.contentTable td {
|
|
181
|
+
font-size: 0.95em;
|
|
182
|
+
padding: 8px 15px;
|
|
183
|
+
color: var(--paragraph-color);
|
|
184
|
+
border-right: 1px solid var(--table-border);
|
|
185
|
+
line-height: 1;
|
|
186
|
+
border-spacing: 0;
|
|
187
|
+
border-collapse: collapse;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.contentTable th:last-of-type,
|
|
191
|
+
.contentTable td:last-of-type,
|
|
192
|
+
.contentTable th:last-child,
|
|
193
|
+
.contentTable td:last-child {
|
|
194
|
+
border-right: none;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.contentTable td .tdActions {
|
|
198
|
+
width: 100%;
|
|
199
|
+
display: flex;
|
|
200
|
+
flex-wrap: nowrap;
|
|
201
|
+
justify-content: flex-start;
|
|
202
|
+
align-items: center;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.contentTable td .tdAction {
|
|
206
|
+
background: #f0f0f0;
|
|
207
|
+
display: block;
|
|
208
|
+
line-height: 1;
|
|
209
|
+
padding: 0.05rem;
|
|
210
|
+
border-radius: var(--br);
|
|
211
|
+
margin: 0 0.25rem;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.contentTable tbody tr {
|
|
215
|
+
border-bottom: 1px solid var(--table-border);
|
|
216
|
+
cursor: pointer;
|
|
217
|
+
background: var(--tertiary-color);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.contentTable tbody tr:nth-of-type(even) {
|
|
221
|
+
background: darken(var(--secondary-color), 2%);
|
|
222
|
+
}
|
package/package.json
CHANGED