namirasoft-site-react 1.3.103 → 1.3.104
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/dist/App.js.map +1 -1
- package/dist/components/NSLink.module.css +3 -3
- package/dist/components/NSLinkBlue.js +8 -1
- package/dist/components/NSLinkBlue.js.map +1 -1
- package/dist/components/NSModal.js +4 -4
- package/dist/components/NSModal.js.map +1 -1
- package/dist/components/NSModal.module.css +11 -20
- package/dist/components/NSTable.d.ts +1 -0
- package/dist/components/NSTable.js +4 -1
- package/dist/components/NSTable.js.map +1 -1
- package/dist/components/NSTable.module.css +6 -0
- package/dist/pages/NSLoginPage.js +9 -2
- package/dist/pages/NSLoginPage.js.map +1 -1
- package/package.json +1 -1
- package/src/App.tsx +2 -3
- package/src/components/NSLink.module.css +3 -3
- package/src/components/NSLinkBlue.tsx +9 -2
- package/src/components/NSModal.module.css +11 -20
- package/src/components/NSModal.tsx +31 -25
- package/src/components/NSTable.module.css +6 -0
- package/src/components/NSTable.tsx +12 -3
- package/src/pages/NSLoginPage.tsx +11 -2
package/dist/App.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,
|
|
1
|
+
{"version":3,"file":"App.js","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,CAAC;AACnB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAG,OAAO,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,MAAM,OAAO,GAAG;IACf;QACC,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE;YACN;gBACC,EAAE,EAAE,GAAG;gBACP,SAAS,EAAE,MAAM;gBACjB,OAAO;oBAEN,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;gBACpB,CAAC;gBACD,QAAQ;oBAEP,OAAO,IAAI,CAAA;gBACZ,CAAC;aACD;YACD;gBACC,EAAE,EAAE,GAAG;gBACP,SAAS,EAAE,cAAc;gBACzB,OAAO;oBAEN,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;gBAC5B,CAAC;gBACD,QAAQ;oBAEP,OAAO,IAAI,CAAA;gBACZ,CAAC;aACD;YACD;gBACC,EAAE,EAAE,GAAG;gBACP,SAAS,EAAE,MAAM;gBACjB,OAAO;oBAEN,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;gBACpB,CAAC;gBACD,QAAQ;oBAEP,OAAO,IAAI,CAAA;gBACZ,CAAC;aACD;YACD;gBACC,EAAE,EAAE,GAAG;gBACP,SAAS,EAAE,QAAQ;gBACnB,OAAO;oBAEN,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;gBACtB,CAAC;gBACD,QAAQ;oBAEP,OAAO,IAAI,CAAA;gBACZ,CAAC;aACD;SACD;KACD;CACD,CAAA;AAED,MAAM,UAAU,GAAG;IAElB,IAAI,OAAO,GAAG;QACb,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KAClB,CAAA;IACD,IAAI,IAAI,GAAG,CAAC;YACX,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,SAAS;SACjB;QACD;YACC,EAAE,EAAE,CAAC;YACL,OAAO,EAAE,oBAAoB;YAC7B,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,yCAAyC;YAClD,IAAI,EAAE,IAAI;YACV,MAAM,EAAE,MAAM;SACd;KACA,CAAA;IAUD,SAAS,OAAO,CAAC,GAAQ,EAAE,MAAc;QAExC,OAAQ,GAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;IACD,IAAI,KAAK,GAAG,MAAM,CAAe,IAAI,CAAC,CAAC;IACvC,OAAO,CACN,4BACC,KAAC,cAAc,IACd,aAAa,EAAE,EAAE,EACjB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,MAAM,EACZ,WAAW,EAAC,wGAAwG,EACpH,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,mEAAmE,YAExE,wBACC,KAAC,OAAO,IACP,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,mBAAmB,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,CAAA,CAAC,CAAC,EACxC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,GAClC,GACG,GACW,GAChB,CACH,CAAC;AACH,CAAC"}
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { NSLink } from "./NSLink";
|
|
3
3
|
export function NSLinkBlue(props) {
|
|
4
|
-
return (_jsx(NSLink, { id: props.id,
|
|
4
|
+
return (_jsx(NSLink, { id: props.id, style: {
|
|
5
|
+
color: "#fff",
|
|
6
|
+
border: "none",
|
|
7
|
+
backgroundColor: "rgba(3, 119, 255, 1)",
|
|
8
|
+
width: "358px",
|
|
9
|
+
height: "48px",
|
|
10
|
+
boxShadow: "inset 0 - 4px 4px 0px rgb(0 0 0 / 25 %)"
|
|
11
|
+
}, title: props.title, href: props.href, target: props.target }));
|
|
5
12
|
}
|
|
6
13
|
//# sourceMappingURL=NSLinkBlue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSLinkBlue.js","sourceRoot":"","sources":["../../src/components/NSLinkBlue.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAiB,MAAM,UAAU,CAAC;AAEjD,MAAM,UAAU,UAAU,CAAC,KAAoB;IAE9C,OAAO,CACN,KAAC,MAAM,IACN,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,
|
|
1
|
+
{"version":3,"file":"NSLinkBlue.js","sourceRoot":"","sources":["../../src/components/NSLinkBlue.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAiB,MAAM,UAAU,CAAC;AAEjD,MAAM,UAAU,UAAU,CAAC,KAAoB;IAE9C,OAAO,CACN,KAAC,MAAM,IACN,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,KAAK,EACJ;YACA,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,eAAe,EAAE,sBAAsB;YACvC,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,yCAAyC;SACpD,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,MAAM,EAAE,KAAK,CAAC,MAAM,GACnB,CAAC,CAAC;AACN,CAAC"}
|
|
@@ -6,10 +6,10 @@ import NSButton from "./NSButton";
|
|
|
6
6
|
export function NSModal(props) {
|
|
7
7
|
var _a;
|
|
8
8
|
console.log(props, props.show ? Styles.ns_show : Styles.ns_hide);
|
|
9
|
-
return (_jsx("
|
|
9
|
+
return (_jsx("div", { className: Styles.ns_modal_container, onClick: props.onClose, children: _jsx("section", { id: props.id, className: `${props.show ? Styles.ns_show : Styles.ns_hide}
|
|
10
10
|
${Styles.ns_modal}
|
|
11
|
-
${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: _jsxs("div", { className: Styles.ns_modal_container, children: [_jsx(NSButton, { onClick: props.onClose, icon: { src: "https://static.namirasoft.com/image/concept/close/
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
${(_a = props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: props.style, children: _jsxs("div", { className: Styles.ns_modal_container, children: [_jsx(NSButton, { onClick: props.onClose, icon: { src: "https://static.namirasoft.com/image/concept/close/white.svg", alt: "close modal" }, classList: [Styles.ns_close_modal] }), _jsxs("div", { className: Styles.ns_modal_content, children: [props.title &&
|
|
12
|
+
_jsxs(_Fragment, { children: [_jsx(NSTitle, { title: props.title }), _jsx(NSSpace, { size: NSSpaceSizeType.NORMAL })] }), props.description &&
|
|
13
|
+
(_jsx("div", { children: _jsxs("p", { className: Styles.ns_modal_description, children: [" ", props.description, " "] }) }))] })] }) }) }));
|
|
14
14
|
}
|
|
15
15
|
//# sourceMappingURL=NSModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSModal.js","sourceRoot":"","sources":["../../src/components/NSModal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAuB,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACjF,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAUlC,MAAM,UAAU,OAAO,CAAC,KAAoB;;IAE3C,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACjE,OAAO,CACN,
|
|
1
|
+
{"version":3,"file":"NSModal.js","sourceRoot":"","sources":["../../src/components/NSModal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAuB,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AACjF,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAUlC,MAAM,UAAU,OAAO,CAAC,KAAoB;;IAE3C,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACjE,OAAO,CACN,cAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,YAChE,kBACC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO;KACzD,MAAM,CAAC,QAAQ;KACf,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAE7B,KAAK,EAAE,KAAK,CAAC,KAAK,YAElB,eAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,aACxC,KAAC,QAAQ,IACR,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAE,EAAE,GAAG,EAAE,6DAA6D,EAAE,GAAG,EAAE,aAAa,EAAE,EAChG,SAAS,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,GACjC,EACF,eAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,aACrC,KAAK,CAAC,KAAK;gCACX,8BACC,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,EAC/B,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,MAAM,GAAI,IACvC,EAEH,KAAK,CAAC,WAAW;gCACjB,CACC,wBACC,aAAG,SAAS,EAAE,MAAM,CAAC,oBAAoB,kBAAK,KAAK,CAAC,WAAW,SAAM,GAChE,CACN,IAGG,IACD,GACI,GACN,CACN,CAAC;AACH,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* Modal */
|
|
2
2
|
.ns_modal {
|
|
3
3
|
position: fixed;
|
|
4
|
-
top:
|
|
5
|
-
left:
|
|
4
|
+
top: 25%;
|
|
5
|
+
left: 25%;
|
|
6
6
|
border-radius: 8px;
|
|
7
7
|
padding: 24px;
|
|
8
8
|
margin: 0 16px;
|
|
@@ -10,20 +10,25 @@
|
|
|
10
10
|
color: rgba(20, 27, 92, 1);
|
|
11
11
|
width: 100%;
|
|
12
12
|
height: 100%;
|
|
13
|
-
background: #ffffff2a;
|
|
14
13
|
right: 0;
|
|
15
|
-
|
|
14
|
+
background-color: rgba(0, 0, 0, 0.8);
|
|
15
|
+
top: 0;
|
|
16
|
+
right: 0;
|
|
17
|
+
left: 0;
|
|
16
18
|
margin: 0;
|
|
17
19
|
display: none;
|
|
18
20
|
justify-content: center;
|
|
19
21
|
align-items: center;
|
|
20
22
|
z-index: 99;
|
|
23
|
+
text-align: center;
|
|
21
24
|
}
|
|
22
25
|
|
|
23
26
|
.ns_modal_container {
|
|
24
27
|
background-color: #fff;
|
|
25
|
-
width:
|
|
26
|
-
height:
|
|
28
|
+
width: 50%;
|
|
29
|
+
height: 50%;
|
|
30
|
+
top: 25%;
|
|
31
|
+
left: 25%;
|
|
27
32
|
position: relative;
|
|
28
33
|
border-radius: 8px;
|
|
29
34
|
}
|
|
@@ -53,24 +58,10 @@
|
|
|
53
58
|
height: 100%;
|
|
54
59
|
}
|
|
55
60
|
|
|
56
|
-
|
|
57
|
-
|
|
58
61
|
.ns_show {
|
|
59
62
|
display: block;
|
|
60
63
|
}
|
|
61
64
|
|
|
62
65
|
.ns_hide {
|
|
63
66
|
display: none;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
@media only screen and (min-width:768px) {
|
|
67
|
-
.ns_close_modal {
|
|
68
|
-
width: 48px;
|
|
69
|
-
height: 48px;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.ns_close_modal img {
|
|
73
|
-
width: 24px;
|
|
74
|
-
height: 24px;
|
|
75
|
-
}
|
|
76
67
|
}
|
|
@@ -30,6 +30,9 @@ export class NSTable extends Component {
|
|
|
30
30
|
}
|
|
31
31
|
render() {
|
|
32
32
|
var _a;
|
|
33
|
+
let modalTitle = (e) => {
|
|
34
|
+
this.setState({ title: e.currentTarget.innerText });
|
|
35
|
+
};
|
|
33
36
|
let column_keys = Object.keys(this.state.columns);
|
|
34
37
|
let getColumnAttributes = (column, columnIndex) => {
|
|
35
38
|
if (this.props.getColumnAttributes)
|
|
@@ -57,7 +60,7 @@ export class NSTable extends Component {
|
|
|
57
60
|
if (!overided)
|
|
58
61
|
this.showModal(getCell(row, column, rowIndex, columnIndex));
|
|
59
62
|
};
|
|
60
|
-
return (_jsxs("div", { id: this.props.id, className: `${Styles.ns_project_list_container} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx("section", { className: Styles.ns_search_input, children: _jsx(NSInputSearch, { ref: this.search, title: "Search", required: false, onChanged: this.getSearchValue, style: { padding: "0", margin: "0" } }) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { onClick: (e) => { onRowClick(e, row, rowIndex); }, children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, getColumnAttributes(column, columnIndex), { "data-label": `${this.state.columns[column]} : `, onClick: (e) => { onCellClick(e, row, column, rowIndex, columnIndex); }, children: getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_pagination_button, children: [_jsx(NSPagination, { size: 50, page: 5 }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("div", { className: Styles.ns_button, children: [_jsx(NSButton, { title: 'Export', icon: { src: "/assets/images/export-vector.png" }, onClick: () => { }, style: { border: '1px solid rgba(255, 148, 50, 1)', width: "128px" } }), _jsx(NSButton, { title: 'Refresh', icon: { src: "/assets/images/refresh-vector.png" }, onClick: () => { }, style: { border: '1px solid rgba(3, 119, 255, 1)', width: "128px" } })] })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx(NSModal, { show: this.state.model.show, description: this.state.model.description, onClose: () => { this.hideModal(); } })] }));
|
|
63
|
+
return (_jsxs("div", { id: this.props.id, className: `${Styles.ns_project_list_container} ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsx("section", { className: Styles.ns_search_input, children: _jsx(NSInputSearch, { ref: this.search, title: "Search", required: false, onChanged: this.getSearchValue, style: { padding: "0", margin: "0" } }) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("table", { className: Styles.ns_table, children: [_jsx("thead", { className: Styles.ns_thead, children: _jsx("tr", { children: column_keys.map(column_key => _jsx("th", { scope: "col", onClick: (e) => modalTitle(e), children: this.state.columns[column_key] }, column_key)) }) }), _jsx("tbody", { className: Styles.ns_tbody, children: this.state.rows.map((row, rowIndex) => _jsx("tr", { onClick: (e) => { onRowClick(e, row, rowIndex); }, children: column_keys.map((column, columnIndex) => (_jsx("td", Object.assign({}, getColumnAttributes(column, columnIndex), { "data-label": `${this.state.columns[column]} : `, onClick: (e) => { onCellClick(e, row, column, rowIndex, columnIndex); }, children: getCell(row, column, rowIndex, columnIndex) })))) }, this.props.getRowKey(row, rowIndex))) })] }), _jsx(NSSpace, { size: NSSpaceSizeType.MICRO }), _jsxs("section", { className: Styles.ns_pagination_button, children: [_jsx(NSPagination, { size: 50, page: 5 }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsxs("div", { className: Styles.ns_button, children: [_jsx(NSButton, { title: 'Export', icon: { src: "/assets/images/export-vector.png" }, onClick: () => { }, style: { border: '1px solid rgba(255, 148, 50, 1)', width: "128px" } }), _jsx(NSButton, { title: 'Refresh', icon: { src: "/assets/images/refresh-vector.png" }, onClick: () => { }, style: { border: '1px solid rgba(3, 119, 255, 1)', width: "128px" } })] })] }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx(NSModal, { show: this.state.model.show, description: this.state.model.description, onClose: () => { this.hideModal(); }, title: this.state.title })] }));
|
|
61
64
|
}
|
|
62
65
|
}
|
|
63
66
|
//# sourceMappingURL=NSTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"NSTable.js","sourceRoot":"","sources":["../../src/components/NSTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACrD,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAwBpC,MAAM,OAAO,OAAiB,SAAQ,SAAwD;IAG1F,YAAY,KAA6B;QAErC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;IACtF,CAAC;IACD,UAAU,CAAC,OAAkC;QAEzC,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;IAC/B,CAAC;IACD,OAAO,CAAC,IAAe;QAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5B,CAAC;IACD,cAAc;;QAEV,OAAO,MAAA,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,0CAAE,QAAQ,EAAE,mCAAI,EAAE,CAAC;IAClD,CAAC;IACD,SAAS,CAAC,WAAmB;QAEzB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC;IAC1D,CAAC;IACD,SAAS;QAEL,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IAC9C,CAAC;IACQ,MAAM;;QAEX,IAAI,UAAU,GAAG,CAAC,CAAM,EAAE,EAAE;YAExB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC,CAAC;QACxD,CAAC,CAAA;QACD,IAAI,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAClD,IAAI,mBAAmB,GAAG,CAAC,MAAc,EAAE,WAAmB,EAAE,EAAE;YAE9D,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB;gBAC9B,OAAO,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;YAC/D,OAAO,EAAE,CAAC;QACd,CAAC,CAAA;QACD,IAAI,OAAO,GAAG,CAAC,GAAY,EAAE,MAAc,EAAE,QAAgB,EAAE,WAAmB,EAAE,EAAE;YAElF,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO;gBAClB,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;YAClE,OAAQ,GAAW,CAAC,MAAM,CAAC,CAAC;QAChC,CAAC,CAAA;QACD,IAAI,UAAU,GAAG,CAAC,CAAoD,EAAE,GAAY,EAAE,QAAgB,EAAE,EAAE;YAEtG,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU;gBACrB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC;QAChD,CAAC,CAAC;QACF,IAAI,WAAW,GAAG,CAAC,CAAyD,EAAE,GAAY,EAAE,MAAc,EAAE,QAAgB,EAAE,WAAmB,EAAE,EAAE;YAEjJ,IAAI,QAAQ,GAAG,KAAK,CAAC;YACrB,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAC1B;gBACI,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;gBACrE,IAAI,GAAG,KAAK,SAAS;oBACjB,QAAQ,GAAG,IAAI,CAAC;;oBAEhB,QAAQ,GAAG,GAAG,CAAC;aACtB;YACD,IAAI,CAAC,QAAQ;gBACT,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;QACpE,CAAC,CAAC;QACF,OAAO,CACH,eAAK,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EAClB,SAAS,EAAE,GAAG,MAAM,CAAC,yBAAyB,IAAI,MAAA,IAAI,CAAC,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EACnF,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,aACvB,kBAAS,SAAS,EAAE,MAAM,CAAC,eAAe,YACtC,KAAC,aAAa,IAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAI,GACnI,EACV,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACxC,iBAAO,SAAS,EAAE,MAAM,CAAC,QAAQ,aAC7B,gBAAO,SAAS,EAAE,MAAM,CAAC,QAAQ,YAC7B,uBACK,WAAW,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,aAAqB,KAAK,EAAC,KAAK,EAC3D,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,YAC5B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,IAFK,UAAU,CAG7C,CAAC,GACL,GACD,EACR,gBAAO,SAAS,EAAE,MAAM,CAAC,QAAQ,YAEzB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAClC,aAA8C,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,YAEvF,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CAAC,CACrC,6BAAQ,mBAAmB,CAAC,MAAM,EAAE,WAAW,CAAC,kBAAc,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,WAAW,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,YACpK,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,IAC3C,CACR,CAAC,IAND,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,QAAQ,CAAC,CAQvC,CAAC,GAET,IACL,EACR,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACxC,mBAAS,SAAS,EAAE,MAAM,CAAC,oBAAoB,aAC3C,KAAC,YAAY,IAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,GAAI,EACnC,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACxC,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC5B,KAAC,QAAQ,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,EAAE,GAAG,EAAE,kCAAkC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,iCAAiC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAI,EACxK,KAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,EAAE,GAAG,EAAE,mCAAmC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,gCAAgC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAI,IACvK,IACA,EACV,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACxC,KAAC,OAAO,IACJ,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAC3B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,EACzC,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EACpC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GACzB,IACC,CACV,CAAA;IACL,CAAC;CACJ"}
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
display: block;
|
|
25
25
|
background-color: rgba(255, 255, 255, 1);
|
|
26
26
|
margin: 16px 0;
|
|
27
|
+
transition: all 0.2s ease-in-out;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
.ns_table td {
|
|
@@ -89,6 +90,11 @@
|
|
|
89
90
|
align-items: center;
|
|
90
91
|
}
|
|
91
92
|
|
|
93
|
+
tr:hover {
|
|
94
|
+
background-color: rgba(20, 27, 92, 0.5);
|
|
95
|
+
color: white;
|
|
96
|
+
}
|
|
97
|
+
|
|
92
98
|
.ns_table td {
|
|
93
99
|
text-align: left;
|
|
94
100
|
display: flex;
|
|
@@ -1,15 +1,22 @@
|
|
|
1
1
|
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Styles from './NSLoginPage.module.css';
|
|
3
|
-
import { NSButtonGreen } from '../components/NSButtonGreen';
|
|
4
3
|
import { NSLinkBlue } from '../components/NSLinkBlue';
|
|
5
4
|
import { NSSpace, NSSpaceSizeType } from '../components/NSSpace';
|
|
5
|
+
import NSButton from '../components/NSButton';
|
|
6
6
|
export function NSLoginPage(props) {
|
|
7
7
|
var _a;
|
|
8
8
|
let button = _jsx(_Fragment, {});
|
|
9
9
|
if (props.href)
|
|
10
10
|
button = _jsx(NSLinkBlue, { title: "Login", href: (_a = props.href) !== null && _a !== void 0 ? _a : "" });
|
|
11
11
|
else if (props.onClick)
|
|
12
|
-
button = _jsx(
|
|
12
|
+
button = _jsx(NSButton, { title: "Login", onClick: props.onClick, style: {
|
|
13
|
+
color: "#fff",
|
|
14
|
+
border: "none",
|
|
15
|
+
backgroundColor: "rgba(3, 119, 255, 1)",
|
|
16
|
+
width: "358px",
|
|
17
|
+
height: "48px",
|
|
18
|
+
boxShadow: "inset 0 - 4px 4px 0px rgb(0 0 0 / 25 %)"
|
|
19
|
+
} });
|
|
13
20
|
return (_jsx("div", { style: { backgroundImage: props.background, width: "100%", backgroundSize: "cover" }, children: _jsxs("div", { className: `${Styles.ns_login_container}`, style: { marginTop: "100px" }, children: [_jsx("div", { className: `${Styles.ns_logo}`, children: _jsx("img", { width: 256, height: 256, src: props.logo, alt: `${props.title} Logo` }) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx("div", { children: _jsx("h1", { className: `${Styles.ns_title}`, children: props.title }) }), _jsx(NSSpace, { size: NSSpaceSizeType.SMALL }), _jsx("div", { className: `${Styles.ns_button}`, children: button })] }) }));
|
|
14
21
|
}
|
|
15
22
|
//# sourceMappingURL=NSLoginPage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NSLoginPage.js","sourceRoot":"","sources":["../../src/pages/NSLoginPage.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAC7C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"NSLoginPage.js","sourceRoot":"","sources":["../../src/pages/NSLoginPage.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAW9C,MAAM,UAAU,WAAW,CAAC,KAAwB;;IAEhD,IAAI,MAAM,GAAG,mBAAK,CAAC;IACnB,IAAI,KAAK,CAAC,IAAI;QACV,MAAM,GAAG,KAAC,UAAU,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,MAAA,KAAK,CAAC,IAAI,mCAAI,EAAE,GAAI,CAAC;SAC7D,IAAI,KAAK,CAAC,OAAO;QAClB,MAAM,GAAG,KAAC,QAAQ,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,EACnD,KAAK,EACJ;gBACG,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,eAAe,EAAE,sBAAsB;gBACvC,KAAK,EAAE,OAAO;gBACd,MAAM,EAAE,MAAM;gBACd,SAAS,EAAE,yCAAyC;aACvD,GAAI,CAAC;IACd,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,YACrF,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,aACzE,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,EAAE,YAC/B,cAAK,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,KAAK,OAAO,GAAQ,GAC/E,EACN,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACxC,wBAAK,aAAI,SAAS,EAAE,GAAG,MAAM,CAAC,QAAQ,EAAE,YAAG,KAAK,CAAC,KAAK,GAAM,GAAM,EAClE,KAAC,OAAO,IAAC,IAAI,EAAE,eAAe,CAAC,KAAK,GAAI,EACxC,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,SAAS,EAAE,YAChC,MAAM,GACL,IACJ,GACH,CACV,CAAC;AACN,CAAC"}
|
package/package.json
CHANGED
package/src/App.tsx
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import './App.css';
|
|
2
2
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
3
|
-
import {
|
|
3
|
+
import { NSTable } from './main';
|
|
4
4
|
import { useRef } from 'react';
|
|
5
5
|
import { NSLayoutAction } from './components/NSLayoutAction';
|
|
6
6
|
|
|
7
|
-
|
|
8
7
|
const actions = [
|
|
9
8
|
{
|
|
10
9
|
group: "test-1",
|
|
@@ -122,7 +121,7 @@ export function App()
|
|
|
122
121
|
getRowKey={row => row.id.toString()}
|
|
123
122
|
/>
|
|
124
123
|
</div>
|
|
125
|
-
|
|
124
|
+
</NSLayoutAction>
|
|
126
125
|
</>
|
|
127
126
|
);
|
|
128
127
|
}
|
|
@@ -5,8 +5,15 @@ export function NSLinkBlue(props: INSILinkProps)
|
|
|
5
5
|
return (
|
|
6
6
|
<NSLink
|
|
7
7
|
id={props.id}
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
style=
|
|
9
|
+
{{
|
|
10
|
+
color: "#fff",
|
|
11
|
+
border: "none",
|
|
12
|
+
backgroundColor: "rgba(3, 119, 255, 1)",
|
|
13
|
+
width: "358px",
|
|
14
|
+
height: "48px",
|
|
15
|
+
boxShadow: "inset 0 - 4px 4px 0px rgb(0 0 0 / 25 %)"
|
|
16
|
+
}}
|
|
10
17
|
title={props.title}
|
|
11
18
|
href={props.href}
|
|
12
19
|
target={props.target}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* Modal */
|
|
2
2
|
.ns_modal {
|
|
3
3
|
position: fixed;
|
|
4
|
-
top:
|
|
5
|
-
left:
|
|
4
|
+
top: 25%;
|
|
5
|
+
left: 25%;
|
|
6
6
|
border-radius: 8px;
|
|
7
7
|
padding: 24px;
|
|
8
8
|
margin: 0 16px;
|
|
@@ -10,20 +10,25 @@
|
|
|
10
10
|
color: rgba(20, 27, 92, 1);
|
|
11
11
|
width: 100%;
|
|
12
12
|
height: 100%;
|
|
13
|
-
background: #ffffff2a;
|
|
14
13
|
right: 0;
|
|
15
|
-
|
|
14
|
+
background-color: rgba(0, 0, 0, 0.8);
|
|
15
|
+
top: 0;
|
|
16
|
+
right: 0;
|
|
17
|
+
left: 0;
|
|
16
18
|
margin: 0;
|
|
17
19
|
display: none;
|
|
18
20
|
justify-content: center;
|
|
19
21
|
align-items: center;
|
|
20
22
|
z-index: 99;
|
|
23
|
+
text-align: center;
|
|
21
24
|
}
|
|
22
25
|
|
|
23
26
|
.ns_modal_container {
|
|
24
27
|
background-color: #fff;
|
|
25
|
-
width:
|
|
26
|
-
height:
|
|
28
|
+
width: 50%;
|
|
29
|
+
height: 50%;
|
|
30
|
+
top: 25%;
|
|
31
|
+
left: 25%;
|
|
27
32
|
position: relative;
|
|
28
33
|
border-radius: 8px;
|
|
29
34
|
}
|
|
@@ -53,24 +58,10 @@
|
|
|
53
58
|
height: 100%;
|
|
54
59
|
}
|
|
55
60
|
|
|
56
|
-
|
|
57
|
-
|
|
58
61
|
.ns_show {
|
|
59
62
|
display: block;
|
|
60
63
|
}
|
|
61
64
|
|
|
62
65
|
.ns_hide {
|
|
63
66
|
display: none;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
@media only screen and (min-width:768px) {
|
|
67
|
-
.ns_close_modal {
|
|
68
|
-
width: 48px;
|
|
69
|
-
height: 48px;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.ns_close_modal img {
|
|
73
|
-
width: 24px;
|
|
74
|
-
height: 24px;
|
|
75
|
-
}
|
|
76
67
|
}
|
|
@@ -16,33 +16,39 @@ export function NSModal(props: INSModalProps)
|
|
|
16
16
|
{
|
|
17
17
|
console.log(props, props.show ? Styles.ns_show : Styles.ns_hide);
|
|
18
18
|
return (
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
<div className={Styles.ns_modal_container} onClick={props.onClose}>
|
|
20
|
+
<section
|
|
21
|
+
id={props.id}
|
|
22
|
+
className={`${props.show ? Styles.ns_show : Styles.ns_hide}
|
|
23
23
|
${Styles.ns_modal}
|
|
24
24
|
${props.classList?.join(" ")}`
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
25
|
+
}
|
|
26
|
+
style={props.style}
|
|
27
|
+
>
|
|
28
|
+
<div className={Styles.ns_modal_container}>
|
|
29
|
+
<NSButton
|
|
30
|
+
onClick={props.onClose}
|
|
31
|
+
icon={{ src: "https://static.namirasoft.com/image/concept/close/white.svg", alt: "close modal" }}
|
|
32
|
+
classList={[Styles.ns_close_modal]}
|
|
33
|
+
/>
|
|
34
|
+
<div className={Styles.ns_modal_content}>
|
|
35
|
+
{props.title &&
|
|
36
|
+
<>
|
|
37
|
+
<NSTitle title={props.title} />
|
|
38
|
+
<NSSpace size={NSSpaceSizeType.NORMAL} />
|
|
39
|
+
</>
|
|
40
|
+
}
|
|
41
|
+
{props.description &&
|
|
42
|
+
(
|
|
43
|
+
<div>
|
|
44
|
+
<p className={Styles.ns_modal_description} > {props.description} </p>
|
|
45
|
+
</div>
|
|
46
|
+
)
|
|
47
|
+
|
|
48
|
+
}
|
|
49
|
+
</div>
|
|
44
50
|
</div>
|
|
45
|
-
</
|
|
46
|
-
</
|
|
51
|
+
</section >
|
|
52
|
+
</div>
|
|
47
53
|
);
|
|
48
54
|
}
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
display: block;
|
|
25
25
|
background-color: rgba(255, 255, 255, 1);
|
|
26
26
|
margin: 16px 0;
|
|
27
|
+
transition: all 0.2s ease-in-out;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
.ns_table td {
|
|
@@ -89,6 +90,11 @@
|
|
|
89
90
|
align-items: center;
|
|
90
91
|
}
|
|
91
92
|
|
|
93
|
+
tr:hover {
|
|
94
|
+
background-color: rgba(20, 27, 92, 0.5);
|
|
95
|
+
color: white;
|
|
96
|
+
}
|
|
97
|
+
|
|
92
98
|
.ns_table td {
|
|
93
99
|
text-align: left;
|
|
94
100
|
display: flex;
|
|
@@ -25,6 +25,7 @@ export interface NSTableState<RowType>
|
|
|
25
25
|
{
|
|
26
26
|
columns: { [key: string]: string };
|
|
27
27
|
rows: RowType[];
|
|
28
|
+
title?: string
|
|
28
29
|
model: {
|
|
29
30
|
show: boolean;
|
|
30
31
|
description?: string;
|
|
@@ -53,14 +54,18 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
|
|
|
53
54
|
}
|
|
54
55
|
showModal(description: string)
|
|
55
56
|
{
|
|
56
|
-
this.setState({ model: { show: true, description } })
|
|
57
|
+
this.setState({ model: { show: true, description } });
|
|
57
58
|
}
|
|
58
59
|
hideModal()
|
|
59
60
|
{
|
|
60
|
-
this.setState({ model: { show: false } })
|
|
61
|
+
this.setState({ model: { show: false } });
|
|
61
62
|
}
|
|
62
63
|
override render()
|
|
63
64
|
{
|
|
65
|
+
let modalTitle = (e: any) =>
|
|
66
|
+
{
|
|
67
|
+
this.setState({ title: e.currentTarget.innerText });
|
|
68
|
+
}
|
|
64
69
|
let column_keys = Object.keys(this.state.columns);
|
|
65
70
|
let getColumnAttributes = (column: string, columnIndex: number) =>
|
|
66
71
|
{
|
|
@@ -104,7 +109,10 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
|
|
|
104
109
|
<table className={Styles.ns_table} >
|
|
105
110
|
<thead className={Styles.ns_thead}>
|
|
106
111
|
<tr>
|
|
107
|
-
{column_keys.map(column_key => <th key={column_key} scope="col"
|
|
112
|
+
{column_keys.map(column_key => <th key={column_key} scope="col"
|
|
113
|
+
onClick={(e) => modalTitle(e)}>
|
|
114
|
+
{this.state.columns[column_key]}
|
|
115
|
+
</th>)}
|
|
108
116
|
</tr>
|
|
109
117
|
</thead>
|
|
110
118
|
<tbody className={Styles.ns_tbody}>
|
|
@@ -136,6 +144,7 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
|
|
|
136
144
|
show={this.state.model.show}
|
|
137
145
|
description={this.state.model.description}
|
|
138
146
|
onClose={() => { this.hideModal(); }}
|
|
147
|
+
title={this.state.title}
|
|
139
148
|
/>
|
|
140
149
|
</div >
|
|
141
150
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import Styles from './NSLoginPage.module.css'
|
|
2
|
-
import { NSButtonGreen } from '../components/NSButtonGreen';
|
|
3
2
|
import { NSLinkBlue } from '../components/NSLinkBlue';
|
|
4
3
|
import { NSSpace, NSSpaceSizeType } from '../components/NSSpace';
|
|
4
|
+
import NSButton from '../components/NSButton';
|
|
5
5
|
|
|
6
6
|
export interface INSLoginPageProps
|
|
7
7
|
{
|
|
@@ -18,7 +18,16 @@ export function NSLoginPage(props: INSLoginPageProps)
|
|
|
18
18
|
if (props.href)
|
|
19
19
|
button = <NSLinkBlue title="Login" href={props.href ?? ""} />;
|
|
20
20
|
else if (props.onClick)
|
|
21
|
-
button = <
|
|
21
|
+
button = <NSButton title="Login" onClick={props.onClick}
|
|
22
|
+
style=
|
|
23
|
+
{{
|
|
24
|
+
color: "#fff",
|
|
25
|
+
border: "none",
|
|
26
|
+
backgroundColor: "rgba(3, 119, 255, 1)",
|
|
27
|
+
width: "358px",
|
|
28
|
+
height: "48px",
|
|
29
|
+
boxShadow: "inset 0 - 4px 4px 0px rgb(0 0 0 / 25 %)"
|
|
30
|
+
}} />;
|
|
22
31
|
return (
|
|
23
32
|
<div style={{ backgroundImage: props.background, width: "100%", backgroundSize: "cover" }}>
|
|
24
33
|
<div className={`${Styles.ns_login_container}`} style={{ marginTop: "100px" }}>
|