@visns-studio/visns-components 5.5.9 → 5.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -2
- package/src/components/cms/DataGrid.jsx +5 -5
- package/src/components/crm/DataGrid.jsx +19 -13
- package/src/components/crm/Form.jsx +2 -2
- package/src/components/crm/Navigation.jsx +6 -1
- package/src/components/crm/auth/styles/Profile.module.scss +2 -2
- package/src/components/crm/generic/GenericReport.jsx +1 -1
- package/src/components/crm/generic/GenericSort.jsx +7 -6
- package/src/components/crm/generic/styles/AuditLog.module.scss +1 -1
- package/src/components/crm/generic/styles/AuditLogs.module.scss +1 -1
- package/src/components/crm/generic/styles/GenericDashboard.module.scss +3 -3
- package/src/components/crm/generic/styles/GenericDetail.module.scss +5 -5
- package/src/components/crm/generic/styles/GenericDynamic.module.scss +1 -1
- package/src/components/crm/generic/styles/GenericFormBuilder.module.scss +1 -1
- package/src/components/crm/generic/styles/GenericIndex.module.scss +6 -6
- package/src/components/crm/generic/styles/GenericQuote.module.scss +5 -5
- package/src/components/crm/generic/styles/GenericSort.module.scss +96 -16
- package/src/components/crm/generic/styles/NotificationList.module.scss +1 -1
- package/src/components/crm/sorting/Item.jsx +4 -4
- package/src/components/crm/sorting/styles/Item.module.scss +6 -6
- package/src/components/crm/sorting/styles/List.module.scss +19 -11
- package/src/components/crm/styles/Navigation.module.scss +72 -7
package/package.json
CHANGED
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
"@nivo/line": "^0.88.0",
|
|
10
10
|
"@nivo/pie": "^0.88.0",
|
|
11
11
|
"@tinymce/tinymce-react": "^6.1.0",
|
|
12
|
+
"@visns-studio/visns-datagrid-community": "^1.0.14",
|
|
13
|
+
"@visns-studio/visns-datagrid-enterprise": "^1.0.14",
|
|
12
14
|
"@vitejs/plugin-react": "^4.4.1",
|
|
13
15
|
"add": "^2.0.6",
|
|
14
16
|
"akar-icons": "^1.9.31",
|
|
@@ -74,7 +76,7 @@
|
|
|
74
76
|
"mini-css-extract-plugin": "^2.9.2",
|
|
75
77
|
"react": "^18.3.1",
|
|
76
78
|
"react-dom": "^18.3.1",
|
|
77
|
-
"sass": "^1.
|
|
79
|
+
"sass": "^1.87.0",
|
|
78
80
|
"sass-loader": "^16.0.5"
|
|
79
81
|
},
|
|
80
82
|
"peerDependencies": {
|
|
@@ -82,7 +84,7 @@
|
|
|
82
84
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
83
85
|
},
|
|
84
86
|
"name": "@visns-studio/visns-components",
|
|
85
|
-
"version": "5.
|
|
87
|
+
"version": "5.6.0",
|
|
86
88
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
87
89
|
"main": "src/index.js",
|
|
88
90
|
"files": [
|
|
@@ -6,10 +6,10 @@ import moment from 'moment';
|
|
|
6
6
|
import numeral from 'numeral';
|
|
7
7
|
import Popup from 'reactjs-popup';
|
|
8
8
|
import parse from 'html-react-parser';
|
|
9
|
-
import NumberFilter from '@
|
|
10
|
-
import SelectFilter from '@
|
|
11
|
-
import DateFilter from '@
|
|
12
|
-
import ReactDataGrid from '@
|
|
9
|
+
import NumberFilter from '@visns-studio/visns-datagrid-enterprise/NumberFilter';
|
|
10
|
+
import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
|
|
11
|
+
import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
|
|
12
|
+
import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
|
|
13
13
|
import { confirmAlert } from 'react-confirm-alert';
|
|
14
14
|
import { toast } from 'react-toastify';
|
|
15
15
|
import Toggle from 'react-toggle';
|
|
@@ -31,7 +31,7 @@ import {
|
|
|
31
31
|
TriangleAlert,
|
|
32
32
|
} from 'akar-icons';
|
|
33
33
|
|
|
34
|
-
import '@
|
|
34
|
+
import '@visns-studio/visns-datagrid-enterprise/index.css';
|
|
35
35
|
import 'react-confirm-alert/src/react-confirm-alert.css';
|
|
36
36
|
import 'react-toggle/style.css';
|
|
37
37
|
|
|
@@ -19,15 +19,10 @@ import 'reactjs-popup/dist/index.css';
|
|
|
19
19
|
import parse from 'html-react-parser';
|
|
20
20
|
import 'react-toggle/style.css';
|
|
21
21
|
import { saveAs } from 'file-saver';
|
|
22
|
-
import NumberFilter from '@
|
|
23
|
-
import SelectFilter from '@
|
|
24
|
-
import DateFilter from '@
|
|
25
|
-
import ReactDataGrid from '@
|
|
26
|
-
// import NumberFilter from '@visns-studio/visns-datagrid-enterprise/NumberFilter';
|
|
27
|
-
// import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
|
|
28
|
-
// import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
|
|
29
|
-
// import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
|
|
30
|
-
// import { Gallery } from 'react-grid-gallery';
|
|
22
|
+
import NumberFilter from '@visns-studio/visns-datagrid-enterprise/NumberFilter';
|
|
23
|
+
import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
|
|
24
|
+
import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
|
|
25
|
+
import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
|
|
31
26
|
import { confirmAlert } from 'react-confirm-alert';
|
|
32
27
|
import { toast } from 'react-toastify';
|
|
33
28
|
import imageCompression from 'browser-image-compression';
|
|
@@ -58,12 +53,13 @@ import {
|
|
|
58
53
|
Ribbon,
|
|
59
54
|
Search,
|
|
60
55
|
ShippingBoxV1,
|
|
56
|
+
Sort,
|
|
61
57
|
SoundOn,
|
|
62
58
|
TriangleAlert,
|
|
63
59
|
} from 'akar-icons';
|
|
64
60
|
import styles from './styles/DataGrid.module.scss';
|
|
65
61
|
|
|
66
|
-
import '@
|
|
62
|
+
import '@visns-studio/visns-datagrid-enterprise/index.css';
|
|
67
63
|
import 'react-confirm-alert/src/react-confirm-alert.css';
|
|
68
64
|
import 'yet-another-react-lightbox/styles.css';
|
|
69
65
|
|
|
@@ -1100,6 +1096,11 @@ const DataGrid = forwardRef(
|
|
|
1100
1096
|
}}
|
|
1101
1097
|
onClick={exportTrigger}
|
|
1102
1098
|
>
|
|
1099
|
+
<LinkOut
|
|
1100
|
+
strokeWidth={2}
|
|
1101
|
+
size={16}
|
|
1102
|
+
style={{ marginRight: '10px' }}
|
|
1103
|
+
/>{' '}
|
|
1103
1104
|
Export
|
|
1104
1105
|
</button>
|
|
1105
1106
|
)}
|
|
@@ -1113,7 +1114,12 @@ const DataGrid = forwardRef(
|
|
|
1113
1114
|
}}
|
|
1114
1115
|
onClick={sortTrigger}
|
|
1115
1116
|
>
|
|
1116
|
-
<
|
|
1117
|
+
<Sort
|
|
1118
|
+
strokeWidth={2}
|
|
1119
|
+
size={16}
|
|
1120
|
+
style={{ marginRight: '10px' }}
|
|
1121
|
+
/>{' '}
|
|
1122
|
+
Sort Order
|
|
1117
1123
|
</button>
|
|
1118
1124
|
)}
|
|
1119
1125
|
|
|
@@ -1224,9 +1230,9 @@ const DataGrid = forwardRef(
|
|
|
1224
1230
|
<div className={styles.searchInputWrapper}>
|
|
1225
1231
|
<div
|
|
1226
1232
|
className={styles['icon-search']}
|
|
1227
|
-
style={{ left: 25,
|
|
1233
|
+
style={{ left: 25, color: '#000' }}
|
|
1228
1234
|
>
|
|
1229
|
-
<Search strokeWidth={
|
|
1235
|
+
<Search strokeWidth={2} size={14} />
|
|
1230
1236
|
</div>
|
|
1231
1237
|
<input
|
|
1232
1238
|
type="text"
|
|
@@ -8,12 +8,12 @@ import { saveAs } from 'file-saver';
|
|
|
8
8
|
import moment from 'moment';
|
|
9
9
|
import parse from 'html-react-parser';
|
|
10
10
|
import _ from 'lodash';
|
|
11
|
-
import ReactDataGrid from '@
|
|
11
|
+
import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
|
|
12
12
|
import { CircleX } from 'akar-icons';
|
|
13
13
|
import { confirmAlert } from 'react-confirm-alert';
|
|
14
14
|
import imageCompression from 'browser-image-compression';
|
|
15
15
|
|
|
16
|
-
import '@
|
|
16
|
+
import '@visns-studio/visns-datagrid-enterprise/index.css';
|
|
17
17
|
import 'react-confirm-alert/src/react-confirm-alert.css';
|
|
18
18
|
|
|
19
19
|
import CustomFetch from './Fetch';
|
|
@@ -305,7 +305,7 @@ function Navigation({
|
|
|
305
305
|
const renderChildren = () => {
|
|
306
306
|
if (n.children && n.children.length > 0) {
|
|
307
307
|
return (
|
|
308
|
-
<ul>
|
|
308
|
+
<ul className={styles.navDropdown}>
|
|
309
309
|
{n.children.map(
|
|
310
310
|
(child, childKey) =>
|
|
311
311
|
child.permission === true && (
|
|
@@ -313,6 +313,11 @@ function Navigation({
|
|
|
313
313
|
<Link
|
|
314
314
|
to={child.url}
|
|
315
315
|
title={child.label}
|
|
316
|
+
className={
|
|
317
|
+
location.pathname === child.url
|
|
318
|
+
? styles.active
|
|
319
|
+
: ''
|
|
320
|
+
}
|
|
316
321
|
>
|
|
317
322
|
{child.label}
|
|
318
323
|
</Link>
|
|
@@ -42,7 +42,7 @@ select:focus + .fi__span {
|
|
|
42
42
|
position: relative;
|
|
43
43
|
padding: 2px;
|
|
44
44
|
margin: 8px 0;
|
|
45
|
-
box-shadow: 0
|
|
45
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
.grid__subrow {
|
|
@@ -62,7 +62,7 @@ select:focus + .fi__span {
|
|
|
62
62
|
padding: 5px;
|
|
63
63
|
margin: 8px 0;
|
|
64
64
|
height: auto;
|
|
65
|
-
box-shadow: 0
|
|
65
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
.grid__subnav > ul {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
2
|
import { toast } from 'react-toastify';
|
|
3
3
|
import moment from 'moment';
|
|
4
|
-
import ReactDataGrid from '@
|
|
4
|
+
import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
|
|
5
5
|
import { CircleX, Question } from 'akar-icons';
|
|
6
6
|
import CustomFetch from '../Fetch';
|
|
7
7
|
import Download from '../Download';
|
|
@@ -144,13 +144,14 @@ const GenericSort = ({ category = false, layout = 'full' }) => {
|
|
|
144
144
|
}`}
|
|
145
145
|
>
|
|
146
146
|
<Breadcrumb
|
|
147
|
-
data={
|
|
148
|
-
label: camelCaseToUcFirst(routeParams.dataId),
|
|
149
|
-
}} // Use utility function here
|
|
147
|
+
data={page.data}
|
|
150
148
|
page={{
|
|
151
|
-
parentTitle:
|
|
152
|
-
parentUrl:
|
|
153
|
-
|
|
149
|
+
parentTitle: page.setting.title,
|
|
150
|
+
parentUrl: page.setting.previousUrl,
|
|
151
|
+
parentTitleKey: page.setting.titleKey,
|
|
152
|
+
parentUrlKey: 'id',
|
|
153
|
+
titleKey: [],
|
|
154
|
+
titleText: 'Sort Order',
|
|
154
155
|
}}
|
|
155
156
|
/>
|
|
156
157
|
</div>
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
position: relative;
|
|
16
16
|
padding: 20px;
|
|
17
17
|
margin: 8px 0;
|
|
18
|
-
box-shadow: 0
|
|
18
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.grid__half {
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
position: relative;
|
|
42
42
|
padding: 20px;
|
|
43
43
|
margin: 8px 0;
|
|
44
|
-
box-shadow: 0
|
|
44
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.grid__twothird {
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
position: relative;
|
|
55
55
|
padding: 20px;
|
|
56
56
|
margin: 8px 0;
|
|
57
|
-
box-shadow: 0
|
|
57
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
/* The remaining CSS remains largely unchanged */
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
position: relative;
|
|
27
27
|
padding: 20px;
|
|
28
28
|
margin: 8px 0;
|
|
29
|
-
box-shadow: 0
|
|
29
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.grid__half {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
position: relative;
|
|
40
40
|
padding: 20px;
|
|
41
41
|
margin: 8px 0;
|
|
42
|
-
box-shadow: 0
|
|
42
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.grid__full {
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
position: relative;
|
|
53
53
|
padding: 2px;
|
|
54
54
|
margin: 8px 0;
|
|
55
|
-
box-shadow: 0
|
|
55
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.grid__dashfull {
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
position: relative;
|
|
66
66
|
padding: 20px;
|
|
67
67
|
margin: 8px 0;
|
|
68
|
-
box-shadow: 0
|
|
68
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.grid__subrow {
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
padding: 5px;
|
|
85
85
|
margin: 8px 0;
|
|
86
86
|
height: auto;
|
|
87
|
-
box-shadow: 0
|
|
87
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
.grid__subnav > ul {
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
position: relative;
|
|
18
18
|
padding: 20px;
|
|
19
19
|
margin: 8px 0;
|
|
20
|
-
box-shadow: 0
|
|
20
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.grid__half {
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
position: relative;
|
|
44
44
|
padding: 2px;
|
|
45
45
|
margin: 8px 0;
|
|
46
|
-
box-shadow: 0
|
|
46
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.grid__dashfull {
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
position: relative;
|
|
57
57
|
padding: 20px;
|
|
58
58
|
margin: 8px 0;
|
|
59
|
-
box-shadow: 0
|
|
59
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
.grid__subrow {
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
padding: 5px;
|
|
76
76
|
margin: 8px 0;
|
|
77
77
|
height: auto;
|
|
78
|
-
box-shadow: 0
|
|
78
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
.grid__subnav > ul {
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
padding: 5px;
|
|
127
127
|
margin: 8px 0;
|
|
128
128
|
height: auto;
|
|
129
|
-
box-shadow: 0
|
|
129
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
.grid__subnav__alternate > ul {
|
|
@@ -186,7 +186,7 @@
|
|
|
186
186
|
margin: 8px 0;
|
|
187
187
|
height: auto;
|
|
188
188
|
position: relative;
|
|
189
|
-
box-shadow: 0
|
|
189
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
190
190
|
}
|
|
191
191
|
|
|
192
192
|
.grid__subcontent h2 {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
position: relative;
|
|
27
27
|
padding: 20px;
|
|
28
28
|
margin: 8px 0;
|
|
29
|
-
box-shadow: 0
|
|
29
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.grid__half {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
position: relative;
|
|
40
40
|
padding: 20px;
|
|
41
41
|
margin: 8px 0;
|
|
42
|
-
box-shadow: 0
|
|
42
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.grid__full {
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
position: relative;
|
|
53
53
|
padding: 2px;
|
|
54
54
|
margin: 8px 0;
|
|
55
|
-
box-shadow: 0
|
|
55
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.grid__dashfull {
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
position: relative;
|
|
66
66
|
padding: 20px;
|
|
67
67
|
margin: 8px 0;
|
|
68
|
-
box-shadow: 0
|
|
68
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.grid__subrow {
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
padding: 5px;
|
|
85
85
|
margin: 8px 0;
|
|
86
86
|
height: auto;
|
|
87
|
-
box-shadow: 0
|
|
87
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
.grid__subnav > ul {
|
|
@@ -26,7 +26,86 @@
|
|
|
26
26
|
position: relative;
|
|
27
27
|
padding: 2px;
|
|
28
28
|
margin: 8px 0;
|
|
29
|
-
box-shadow: 0
|
|
29
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.crmtitle {
|
|
33
|
+
min-height: auto;
|
|
34
|
+
padding: 1rem;
|
|
35
|
+
margin: 0;
|
|
36
|
+
background: white;
|
|
37
|
+
border-radius: var(--br);
|
|
38
|
+
border: 1px solid rgba(var(--primary-rgb), 0.15);
|
|
39
|
+
position: relative;
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: space-between;
|
|
43
|
+
|
|
44
|
+
h1 {
|
|
45
|
+
font-weight: 700;
|
|
46
|
+
font-size: 1.25rem;
|
|
47
|
+
margin: 0;
|
|
48
|
+
padding: 0;
|
|
49
|
+
line-height: 1;
|
|
50
|
+
|
|
51
|
+
a {
|
|
52
|
+
text-decoration: none;
|
|
53
|
+
color: var(--secondary-color);
|
|
54
|
+
font-weight: 400;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
svg {
|
|
58
|
+
color: rgba(var(--primary-rgb), 0.5);
|
|
59
|
+
position: relative;
|
|
60
|
+
top: 2px;
|
|
61
|
+
margin: 0 0.5rem;
|
|
62
|
+
max-width: 15px;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.titleInfo {
|
|
67
|
+
width: max-content;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.titleInfo span {
|
|
71
|
+
font-size: 0.875em;
|
|
72
|
+
color: rgba(var(--primary-rgb), 0.65);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.crmtitleSimple {
|
|
77
|
+
min-height: auto;
|
|
78
|
+
padding: 1rem;
|
|
79
|
+
margin: 0;
|
|
80
|
+
background: white;
|
|
81
|
+
border-radius: var(--br);
|
|
82
|
+
border: 1px solid rgba(var(--primary-rgb), 0.15);
|
|
83
|
+
position: relative;
|
|
84
|
+
display: flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
justify-content: space-between;
|
|
87
|
+
|
|
88
|
+
h1 {
|
|
89
|
+
font-weight: 700;
|
|
90
|
+
font-size: 1.25rem;
|
|
91
|
+
margin: 0;
|
|
92
|
+
padding: 0;
|
|
93
|
+
line-height: 1;
|
|
94
|
+
|
|
95
|
+
a {
|
|
96
|
+
text-decoration: none;
|
|
97
|
+
color: var(--secondary-color);
|
|
98
|
+
font-weight: 400;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
svg {
|
|
102
|
+
color: rgba(var(--primary-rgb), 0.5);
|
|
103
|
+
position: relative;
|
|
104
|
+
top: 2px;
|
|
105
|
+
margin: 0 0.5rem;
|
|
106
|
+
max-width: 15px;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
30
109
|
}
|
|
31
110
|
|
|
32
111
|
.dragitem {
|
|
@@ -35,45 +114,46 @@
|
|
|
35
114
|
justify-content: center;
|
|
36
115
|
align-items: center;
|
|
37
116
|
flex-wrap: wrap;
|
|
38
|
-
border-radius:
|
|
117
|
+
border-radius: 4px;
|
|
39
118
|
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
40
|
-
box-shadow: 0px 0px
|
|
41
|
-
padding:
|
|
119
|
+
box-shadow: 0px 0px 10px rgba(var(--primary-rgb), 0.25);
|
|
120
|
+
padding: 0.6rem;
|
|
42
121
|
box-sizing: border-box;
|
|
43
122
|
cursor: grab;
|
|
44
123
|
list-style: none;
|
|
45
124
|
color: var(--paragraph-color);
|
|
125
|
+
font-size: 0.8rem;
|
|
46
126
|
|
|
47
127
|
svg {
|
|
48
128
|
width: 100%;
|
|
49
|
-
max-width:
|
|
129
|
+
max-width: 16px;
|
|
50
130
|
position: absolute;
|
|
51
|
-
left:
|
|
52
|
-
top:
|
|
131
|
+
left: 4px;
|
|
132
|
+
top: 4px;
|
|
53
133
|
}
|
|
54
134
|
|
|
55
135
|
.pencil-edit {
|
|
56
136
|
width: 100%;
|
|
57
|
-
max-width:
|
|
137
|
+
max-width: 16px;
|
|
58
138
|
position: absolute;
|
|
59
|
-
left:
|
|
60
|
-
top:
|
|
139
|
+
left: 4px;
|
|
140
|
+
top: 24px;
|
|
61
141
|
}
|
|
62
142
|
|
|
63
143
|
.trash-delete {
|
|
64
144
|
width: 100%;
|
|
65
|
-
max-width:
|
|
145
|
+
max-width: 16px;
|
|
66
146
|
position: absolute;
|
|
67
|
-
left:
|
|
68
|
-
top:
|
|
147
|
+
left: 4px;
|
|
148
|
+
top: 44px;
|
|
69
149
|
}
|
|
70
150
|
|
|
71
151
|
.sortimg {
|
|
72
|
-
width:
|
|
152
|
+
width: 40px;
|
|
73
153
|
position: relative;
|
|
74
|
-
height:
|
|
154
|
+
height: 40px;
|
|
75
155
|
margin-left: auto;
|
|
76
|
-
border-radius:
|
|
156
|
+
border-radius: 4px;
|
|
77
157
|
overflow: hidden;
|
|
78
158
|
|
|
79
159
|
img {
|
|
@@ -5,7 +5,7 @@ import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
|
|
|
5
5
|
import styles from './styles/Item.module.scss';
|
|
6
6
|
|
|
7
7
|
const DragHandle = sortableHandle(() => (
|
|
8
|
-
<ChevronVertical className="drag-handle" strokeWidth={1} size={
|
|
8
|
+
<ChevronVertical className="drag-handle" strokeWidth={1} size={22} />
|
|
9
9
|
));
|
|
10
10
|
|
|
11
11
|
// Utility function to truncate text
|
|
@@ -67,7 +67,7 @@ const SortableItem = ({
|
|
|
67
67
|
<Pencil
|
|
68
68
|
className={styles['edit']}
|
|
69
69
|
strokeWidth={1}
|
|
70
|
-
size={
|
|
70
|
+
size={22}
|
|
71
71
|
onClick={(e) => {
|
|
72
72
|
e.preventDefault();
|
|
73
73
|
e.stopPropagation();
|
|
@@ -88,7 +88,7 @@ const SortableItem = ({
|
|
|
88
88
|
<DragHandle />
|
|
89
89
|
{truncateText(
|
|
90
90
|
value.label || value.file_title || value.file_name,
|
|
91
|
-
|
|
91
|
+
25
|
|
92
92
|
)}
|
|
93
93
|
|
|
94
94
|
{renderImage(value)}
|
|
@@ -99,7 +99,7 @@ const SortableItem = ({
|
|
|
99
99
|
<TrashCan
|
|
100
100
|
className={styles.delete}
|
|
101
101
|
strokeWidth={1}
|
|
102
|
-
size={
|
|
102
|
+
size={22}
|
|
103
103
|
onClick={(e) => {
|
|
104
104
|
e.preventDefault();
|
|
105
105
|
e.stopPropagation();
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
.edit {
|
|
2
2
|
width: 100%;
|
|
3
|
-
max-width:
|
|
3
|
+
max-width: 16px;
|
|
4
4
|
position: absolute;
|
|
5
|
-
left:
|
|
6
|
-
top:
|
|
5
|
+
left: 4px !important;
|
|
6
|
+
top: 24px !important;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.delete {
|
|
10
10
|
width: 100%;
|
|
11
|
-
max-width:
|
|
11
|
+
max-width: 16px;
|
|
12
12
|
position: absolute;
|
|
13
|
-
left:
|
|
14
|
-
top:
|
|
13
|
+
left: 4px !important;
|
|
14
|
+
top: 24px !important;
|
|
15
15
|
}
|
|
@@ -1,23 +1,31 @@
|
|
|
1
1
|
.sortlist {
|
|
2
2
|
width: 100%;
|
|
3
3
|
display: grid;
|
|
4
|
-
grid-gap: 0.
|
|
4
|
+
grid-gap: 0.4rem;
|
|
5
5
|
grid-template-columns: repeat(1, 1fr);
|
|
6
6
|
box-sizing: border-box;
|
|
7
7
|
padding: 0;
|
|
8
8
|
margin: 0;
|
|
9
|
-
font-size: 0.
|
|
9
|
+
font-size: 0.8rem;
|
|
10
10
|
list-style: none;
|
|
11
11
|
|
|
12
|
+
@media (min-width: 576px) {
|
|
13
|
+
grid-template-columns: repeat(2, 1fr);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@media (min-width: 992px) {
|
|
17
|
+
grid-template-columns: repeat(3, 1fr);
|
|
18
|
+
}
|
|
19
|
+
|
|
12
20
|
li {
|
|
13
21
|
display: flex;
|
|
14
22
|
justify-content: center;
|
|
15
23
|
align-items: center;
|
|
16
24
|
flex-wrap: wrap;
|
|
17
|
-
border-radius:
|
|
25
|
+
border-radius: 4px;
|
|
18
26
|
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
19
|
-
box-shadow: 0px 0px
|
|
20
|
-
padding:
|
|
27
|
+
box-shadow: 0px 0px 10px rgba(var(--primary-rgb), 0.1);
|
|
28
|
+
padding: 0.6rem 0.6rem 0.6rem 1.5rem;
|
|
21
29
|
|
|
22
30
|
box-sizing: border-box;
|
|
23
31
|
cursor: pointer;
|
|
@@ -28,19 +36,19 @@
|
|
|
28
36
|
|
|
29
37
|
svg {
|
|
30
38
|
width: 100%;
|
|
31
|
-
max-width:
|
|
39
|
+
max-width: 16px;
|
|
32
40
|
position: absolute;
|
|
33
|
-
left:
|
|
34
|
-
top:
|
|
41
|
+
left: 4px;
|
|
42
|
+
top: 4px;
|
|
35
43
|
}
|
|
36
44
|
}
|
|
37
45
|
|
|
38
46
|
.sortimg {
|
|
39
|
-
width:
|
|
47
|
+
width: 40px;
|
|
40
48
|
position: relative;
|
|
41
|
-
height:
|
|
49
|
+
height: 40px;
|
|
42
50
|
margin-left: auto;
|
|
43
|
-
border-radius:
|
|
51
|
+
border-radius: 4px;
|
|
44
52
|
overflow: hidden;
|
|
45
53
|
|
|
46
54
|
img {
|
|
@@ -52,6 +52,12 @@
|
|
|
52
52
|
align-items: center;
|
|
53
53
|
padding: 0;
|
|
54
54
|
|
|
55
|
+
.navDropdown {
|
|
56
|
+
border-radius: var(--br);
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
59
|
+
}
|
|
60
|
+
|
|
55
61
|
.nav-item,
|
|
56
62
|
.nav-item-alternate {
|
|
57
63
|
cursor: pointer;
|
|
@@ -111,22 +117,37 @@
|
|
|
111
117
|
display: none;
|
|
112
118
|
opacity: 0;
|
|
113
119
|
background: rgba(var(--primary-rgb), 0.75);
|
|
120
|
+
border-radius: var(--br);
|
|
121
|
+
overflow: hidden;
|
|
122
|
+
margin-top: 1px;
|
|
123
|
+
clip-path: inset(0 0 0 0 round var(--br));
|
|
114
124
|
|
|
115
125
|
li {
|
|
116
126
|
display: block;
|
|
117
127
|
position: relative;
|
|
118
128
|
margin: 1px 0;
|
|
119
|
-
|
|
129
|
+
border-radius: 0;
|
|
120
130
|
|
|
121
|
-
&:first-of-type {
|
|
122
|
-
border-top-right-radius: var(--br)
|
|
123
|
-
border-top-left-radius: var(--br)
|
|
131
|
+
&:first-of-type > a {
|
|
132
|
+
border-top-right-radius: var(--br);
|
|
133
|
+
border-top-left-radius: var(--br);
|
|
134
|
+
border-bottom-right-radius: 0;
|
|
135
|
+
border-bottom-left-radius: 0;
|
|
124
136
|
}
|
|
125
137
|
|
|
126
138
|
&:last-of-type {
|
|
127
|
-
border-bottom-right-radius: var(--br) !important;
|
|
128
|
-
border-bottom-left-radius: var(--br) !important;
|
|
129
139
|
margin-bottom: 0;
|
|
140
|
+
|
|
141
|
+
> a {
|
|
142
|
+
border-bottom-right-radius: var(--br);
|
|
143
|
+
border-bottom-left-radius: var(--br);
|
|
144
|
+
border-top-right-radius: 0;
|
|
145
|
+
border-top-left-radius: 0;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
&:not(:first-of-type):not(:last-of-type) > a {
|
|
150
|
+
border-radius: 0;
|
|
130
151
|
}
|
|
131
152
|
|
|
132
153
|
> a {
|
|
@@ -135,12 +156,12 @@
|
|
|
135
156
|
box-sizing: border-box;
|
|
136
157
|
display: block;
|
|
137
158
|
text-decoration: none;
|
|
138
|
-
border-radius: 0;
|
|
139
159
|
transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
140
160
|
outline: none;
|
|
141
161
|
margin: 0;
|
|
142
162
|
background: rgba(var(--primary-rgb), 1);
|
|
143
163
|
color: var(--tertiary-color) !important;
|
|
164
|
+
position: relative;
|
|
144
165
|
}
|
|
145
166
|
|
|
146
167
|
&:hover a {
|
|
@@ -195,14 +216,36 @@
|
|
|
195
216
|
opacity: 0;
|
|
196
217
|
background: rgba(var(--primary-rgb), 0.9);
|
|
197
218
|
border-radius: var(--br);
|
|
219
|
+
overflow: hidden;
|
|
220
|
+
margin-top: 1px;
|
|
221
|
+
clip-path: inset(0 0 0 0 round var(--br));
|
|
198
222
|
|
|
199
223
|
li {
|
|
200
224
|
display: block;
|
|
201
225
|
position: relative;
|
|
202
226
|
margin-bottom: 2px;
|
|
227
|
+
border-radius: 0;
|
|
228
|
+
|
|
229
|
+
&:first-of-type a {
|
|
230
|
+
border-top-right-radius: var(--br);
|
|
231
|
+
border-top-left-radius: var(--br);
|
|
232
|
+
border-bottom-right-radius: 0;
|
|
233
|
+
border-bottom-left-radius: 0;
|
|
234
|
+
}
|
|
203
235
|
|
|
204
236
|
&:last-of-type {
|
|
205
237
|
margin-bottom: 0;
|
|
238
|
+
|
|
239
|
+
a {
|
|
240
|
+
border-bottom-right-radius: var(--br);
|
|
241
|
+
border-bottom-left-radius: var(--br);
|
|
242
|
+
border-top-right-radius: 0;
|
|
243
|
+
border-top-left-radius: 0;
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
&:not(:first-of-type):not(:last-of-type) a {
|
|
248
|
+
border-radius: 0;
|
|
206
249
|
}
|
|
207
250
|
|
|
208
251
|
a {
|
|
@@ -213,6 +256,7 @@
|
|
|
213
256
|
text-decoration: none;
|
|
214
257
|
background: rgba(var(--primary-rgb), 0.9);
|
|
215
258
|
color: var(--paragraph-color);
|
|
259
|
+
transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
216
260
|
}
|
|
217
261
|
|
|
218
262
|
&:hover a {
|
|
@@ -476,14 +520,35 @@
|
|
|
476
520
|
opacity: 0;
|
|
477
521
|
background: var(--primary-color);
|
|
478
522
|
border-radius: 5px;
|
|
523
|
+
clip-path: inset(0 0 0 0 round 5px);
|
|
524
|
+
overflow: hidden;
|
|
479
525
|
|
|
480
526
|
li {
|
|
481
527
|
display: block;
|
|
482
528
|
position: relative;
|
|
483
529
|
margin-bottom: 2px;
|
|
530
|
+
border-radius: 0;
|
|
531
|
+
|
|
532
|
+
&:first-of-type a {
|
|
533
|
+
border-top-right-radius: 3px;
|
|
534
|
+
border-top-left-radius: 3px;
|
|
535
|
+
border-bottom-right-radius: 0;
|
|
536
|
+
border-bottom-left-radius: 0;
|
|
537
|
+
}
|
|
484
538
|
|
|
485
539
|
&:last-of-type {
|
|
486
540
|
margin-bottom: 0;
|
|
541
|
+
|
|
542
|
+
a {
|
|
543
|
+
border-bottom-right-radius: 3px;
|
|
544
|
+
border-bottom-left-radius: 3px;
|
|
545
|
+
border-top-right-radius: 0;
|
|
546
|
+
border-top-left-radius: 0;
|
|
547
|
+
}
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
&:not(:first-of-type):not(:last-of-type) a {
|
|
551
|
+
border-radius: 0;
|
|
487
552
|
}
|
|
488
553
|
|
|
489
554
|
a {
|