каркас вроде есть
This commit is contained in:
gorbenko.pavel
@@ -0,0 +1,16 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.Alert = void 0;
|
||||
var tslib_1 = require("tslib");
|
||||
var React = tslib_1.__importStar(require("react"));
|
||||
var Alert_module_scss_1 = tslib_1.__importDefault(require("./Alert.module.scss"));
|
||||
var Icon_1 = require("./Icon");
|
||||
var ICONS = { warn: 'warning', ok: 'check', err: 'close' };
|
||||
var Alert = function (_a) {
|
||||
var kind = _a.kind, children = _a.children;
|
||||
return (React.createElement("div", { className: "".concat(Alert_module_scss_1.default.alert, " ").concat(Alert_module_scss_1.default[kind]) },
|
||||
React.createElement(Icon_1.Icon, { name: ICONS[kind], size: "sm" }),
|
||||
React.createElement("span", null, children)));
|
||||
};
|
||||
exports.Alert = Alert;
|
||||
//# sourceMappingURL=Alert.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../../src/webparts/approvalAdmin/components/ui/Alert.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAC/B,kFAAyC;AACzC,+BAA8B;AAS9B,IAAM,KAAK,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAW,CAAC;AAE/D,IAAM,KAAK,GAA0B,UAAC,EAAkB;QAAhB,IAAI,UAAA,EAAE,QAAQ,cAAA;IAAO,OAAA,CAClE,6BAAK,SAAS,EAAE,UAAG,2BAAM,CAAC,KAAK,cAAI,2BAAM,CAAC,IAAI,CAAC,CAAE;QAC/C,oBAAC,WAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,IAAI,GAAG;QACrC,kCAAO,QAAQ,CAAQ,CACnB,CACP;AALmE,CAKnE,CAAC;AALW,QAAA,KAAK,SAKhB","sourcesContent":["import * as React from 'react';\nimport styles from './Alert.module.scss';\nimport { Icon } from './Icon';\n\nexport type AlertKind = 'warn' | 'ok' | 'err';\n\nexport interface IAlertProps {\n kind: AlertKind;\n children: React.ReactNode;\n}\n\nconst ICONS = { warn: 'warning', ok: 'check', err: 'close' } as const;\n\nexport const Alert: React.FC<IAlertProps> = ({ kind, children }) => (\n <div className={`${styles.alert} ${styles[kind]}`}>\n <Icon name={ICONS[kind]} size=\"sm\" />\n <span>{children}</span>\n </div>\n);\n"]}
|
||||
@@ -0,0 +1,68 @@
|
||||
:root {
|
||||
--navy-950: #0A1B30;
|
||||
--navy-900: #0F2440;
|
||||
--navy-800: #1B3A5C;
|
||||
--navy-700: #244B73;
|
||||
--navy-600: #2D5C8A;
|
||||
--navy-100: #E8EEF4;
|
||||
--navy-50: #F4F7FA;
|
||||
--gold-600: #B8881A;
|
||||
--gold-500: #D4A01E;
|
||||
--gold-400: #E5B635;
|
||||
--gold-300: #F0CC5E;
|
||||
--gold-100: #FDF5E0;
|
||||
--gold-50: #FEFBF0;
|
||||
--gray-900: #111827;
|
||||
--gray-700: #374151;
|
||||
--gray-500: #6B7280;
|
||||
--gray-400: #9CA3AF;
|
||||
--gray-300: #D1D5DB;
|
||||
--gray-200: #E5E7EB;
|
||||
--gray-100: #F3F4F6;
|
||||
--gray-50: #F9FAFB;
|
||||
--red-500: #DC2626;
|
||||
--red-50: #FEF2F2;
|
||||
--green-600: #15803D;
|
||||
--green-50: #F0FDF4;
|
||||
--blue-600: #2563EB;
|
||||
--blue-50: #EFF6FF;
|
||||
--amber-700: #854D0E;
|
||||
--sh-1: 0 1px 2px rgba(15, 36, 64, 0.04), 0 1px 3px rgba(15, 36, 64, 0.06);
|
||||
--sh-2: 0 4px 16px rgba(15, 36, 64, 0.07);
|
||||
--sh-3: 0 12px 32px rgba(15, 36, 64, 0.1);
|
||||
--sh-gold: 0 4px 20px rgba(212, 160, 30, 0.18);
|
||||
--sh-modal: 0 24px 70px rgba(10, 27, 48, 0.25);
|
||||
--r-sm: 6px;
|
||||
--r-md: 10px;
|
||||
--r-lg: 14px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 12px 16px;
|
||||
border-radius: 10px;
|
||||
font-size: 12.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 18px;
|
||||
border: 1px solid;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.warn {
|
||||
background: #FEFBF0;
|
||||
color: #854D0E;
|
||||
border-color: #F0CC5E;
|
||||
}
|
||||
|
||||
.ok {
|
||||
background: #F0FDF4;
|
||||
color: #15803D;
|
||||
border-color: #BBF7D0;
|
||||
}
|
||||
|
||||
.err {
|
||||
background: #FEF2F2;
|
||||
color: #DC2626;
|
||||
border-color: #FECACA;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.CountBadge = exports.Badge = void 0;
|
||||
var tslib_1 = require("tslib");
|
||||
var React = tslib_1.__importStar(require("react"));
|
||||
var Badge_module_scss_1 = tslib_1.__importDefault(require("./Badge.module.scss"));
|
||||
var Badge = function (_a) {
|
||||
var _b = _a.variant, variant = _b === void 0 ? 'neutral' : _b, children = _a.children;
|
||||
return (React.createElement("span", { className: "".concat(Badge_module_scss_1.default.badge, " ").concat(Badge_module_scss_1.default[variant]) }, children));
|
||||
};
|
||||
exports.Badge = Badge;
|
||||
var CountBadge = function (_a) {
|
||||
var count = _a.count;
|
||||
return (React.createElement("span", { className: Badge_module_scss_1.default.count }, count));
|
||||
};
|
||||
exports.CountBadge = CountBadge;
|
||||
//# sourceMappingURL=Badge.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../../src/webparts/approvalAdmin/components/ui/Badge.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAC/B,kFAAyC;AASlC,IAAM,KAAK,GAA0B,UAAC,EAAiC;QAA/B,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EAAE,QAAQ,cAAA;IAAO,OAAA,CACjF,8BAAM,SAAS,EAAE,UAAG,2BAAM,CAAC,KAAK,cAAI,2BAAM,CAAC,OAAO,CAAC,CAAE,IAAG,QAAQ,CAAQ,CACzE;AAFkF,CAElF,CAAC;AAFW,QAAA,KAAK,SAEhB;AAEK,IAAM,UAAU,GAAgC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,CACpE,8BAAM,SAAS,EAAE,2BAAM,CAAC,KAAK,IAAG,KAAK,CAAQ,CAC9C;AAFqE,CAErE,CAAC;AAFW,QAAA,UAAU,cAErB","sourcesContent":["import * as React from 'react';\nimport styles from './Badge.module.scss';\n\nexport type BadgeVariant = 'ok' | 'gold' | 'neutral' | 'blue' | 'red';\n\nexport interface IBadgeProps {\n variant?: BadgeVariant;\n children: React.ReactNode;\n}\n\nexport const Badge: React.FC<IBadgeProps> = ({ variant = 'neutral', children }) => (\n <span className={`${styles.badge} ${styles[variant]}`}>{children}</span>\n);\n\nexport const CountBadge: React.FC<{ count: number }> = ({ count }) => (\n <span className={styles.count}>{count}</span>\n);\n"]}
|
||||
@@ -0,0 +1,96 @@
|
||||
:root {
|
||||
--navy-950: #0A1B30;
|
||||
--navy-900: #0F2440;
|
||||
--navy-800: #1B3A5C;
|
||||
--navy-700: #244B73;
|
||||
--navy-600: #2D5C8A;
|
||||
--navy-100: #E8EEF4;
|
||||
--navy-50: #F4F7FA;
|
||||
--gold-600: #B8881A;
|
||||
--gold-500: #D4A01E;
|
||||
--gold-400: #E5B635;
|
||||
--gold-300: #F0CC5E;
|
||||
--gold-100: #FDF5E0;
|
||||
--gold-50: #FEFBF0;
|
||||
--gray-900: #111827;
|
||||
--gray-700: #374151;
|
||||
--gray-500: #6B7280;
|
||||
--gray-400: #9CA3AF;
|
||||
--gray-300: #D1D5DB;
|
||||
--gray-200: #E5E7EB;
|
||||
--gray-100: #F3F4F6;
|
||||
--gray-50: #F9FAFB;
|
||||
--red-500: #DC2626;
|
||||
--red-50: #FEF2F2;
|
||||
--green-600: #15803D;
|
||||
--green-50: #F0FDF4;
|
||||
--blue-600: #2563EB;
|
||||
--blue-50: #EFF6FF;
|
||||
--amber-700: #854D0E;
|
||||
--sh-1: 0 1px 2px rgba(15, 36, 64, 0.04), 0 1px 3px rgba(15, 36, 64, 0.06);
|
||||
--sh-2: 0 4px 16px rgba(15, 36, 64, 0.07);
|
||||
--sh-3: 0 12px 32px rgba(15, 36, 64, 0.1);
|
||||
--sh-gold: 0 4px 20px rgba(212, 160, 30, 0.18);
|
||||
--sh-modal: 0 24px 70px rgba(10, 27, 48, 0.25);
|
||||
--r-sm: 6px;
|
||||
--r-md: 10px;
|
||||
--r-lg: 14px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 3px 11px;
|
||||
border-radius: 100px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.badge::before {
|
||||
content: "";
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.ok {
|
||||
background: #F0FDF4;
|
||||
color: #15803D;
|
||||
}
|
||||
|
||||
.gold {
|
||||
background: #FDF5E0;
|
||||
color: #854D0E;
|
||||
}
|
||||
|
||||
.neutral {
|
||||
background: #F3F4F6;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background: #EFF6FF;
|
||||
color: #2563EB;
|
||||
}
|
||||
|
||||
.red {
|
||||
background: #FEF2F2;
|
||||
color: #DC2626;
|
||||
}
|
||||
|
||||
.count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 11px;
|
||||
background: #0F2440;
|
||||
color: #F0CC5E;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 0 6px;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.IconButton = exports.Button = void 0;
|
||||
var tslib_1 = require("tslib");
|
||||
var React = tslib_1.__importStar(require("react"));
|
||||
var Button_module_scss_1 = tslib_1.__importDefault(require("./Button.module.scss"));
|
||||
var Icon_1 = require("./Icon");
|
||||
var Button = function (_a) {
|
||||
var _b = _a.variant, variant = _b === void 0 ? 'secondary' : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, icon = _a.icon, className = _a.className, children = _a.children, rest = tslib_1.__rest(_a, ["variant", "size", "icon", "className", "children"]);
|
||||
var classes = [Button_module_scss_1.default.btn, Button_module_scss_1.default[variant], size === 'sm' ? Button_module_scss_1.default.sm : '', className]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
return (React.createElement("button", tslib_1.__assign({ type: "button", className: classes }, rest),
|
||||
icon && React.createElement(Icon_1.Icon, { name: icon, size: "sm" }),
|
||||
children));
|
||||
};
|
||||
exports.Button = Button;
|
||||
var IconButton = function (_a) {
|
||||
var icon = _a.icon, danger = _a.danger, label = _a.label, className = _a.className, rest = tslib_1.__rest(_a, ["icon", "danger", "label", "className"]);
|
||||
var classes = [Button_module_scss_1.default.iconButton, danger ? Button_module_scss_1.default.danger : '', className].filter(Boolean).join(' ');
|
||||
return (React.createElement("button", tslib_1.__assign({ type: "button", className: classes, "aria-label": label, title: label }, rest),
|
||||
React.createElement(Icon_1.Icon, { name: icon, size: "sm" })));
|
||||
};
|
||||
exports.IconButton = IconButton;
|
||||
//# sourceMappingURL=Button.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../src/webparts/approvalAdmin/components/ui/Button.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAC/B,oFAA0C;AAC1C,+BAAwC;AAUjC,IAAM,MAAM,GAA2B,UAAC,EAO9C;IANC,IAAA,eAAqB,EAArB,OAAO,mBAAG,WAAW,KAAA,EACrB,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA,EACX,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,QAAQ,cAAA,EACL,IAAI,sBANsC,oDAO9C,CADQ;IAEP,IAAM,OAAO,GAAG,CAAC,4BAAM,CAAC,GAAG,EAAE,4BAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,4BAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,SAAS,CAAC;SACrF,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,iDAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,OAAO,IAAM,IAAI;QAC/C,IAAI,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QACtC,QAAQ,CACF,CACV,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,MAAM,UAkBjB;AAQK,IAAM,UAAU,GAA+B,UAAC,EAA2C;IAAzC,IAAA,IAAI,UAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,SAAS,eAAA,EAAK,IAAI,sBAAzC,wCAA2C,CAAF;IAC9F,IAAM,OAAO,GAAG,CAAC,4BAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,4BAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACtG,OAAO,CACL,iDAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,OAAO,gBAAc,KAAK,EAAE,KAAK,EAAE,KAAK,IAAM,IAAI;QACjF,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CACvB,CACV,CAAC;AACJ,CAAC,CAAC;AAPW,QAAA,UAAU,cAOrB","sourcesContent":["import * as React from 'react';\nimport styles from './Button.module.scss';\nimport { Icon, IconName } from './Icon';\n\nexport type ButtonVariant = 'primary' | 'accent' | 'secondary' | 'ghost' | 'danger';\n\nexport interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: 'md' | 'sm';\n icon?: IconName;\n}\n\nexport const Button: React.FC<IButtonProps> = ({\n variant = 'secondary',\n size = 'md',\n icon,\n className,\n children,\n ...rest\n}) => {\n const classes = [styles.btn, styles[variant], size === 'sm' ? styles.sm : '', className]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button type=\"button\" className={classes} {...rest}>\n {icon && <Icon name={icon} size=\"sm\" />}\n {children}\n </button>\n );\n};\n\nexport interface IIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n icon: IconName;\n danger?: boolean;\n label: string;\n}\n\nexport const IconButton: React.FC<IIconButtonProps> = ({ icon, danger, label, className, ...rest }) => {\n const classes = [styles.iconButton, danger ? styles.danger : '', className].filter(Boolean).join(' ');\n return (\n <button type=\"button\" className={classes} aria-label={label} title={label} {...rest}>\n <Icon name={icon} size=\"sm\" />\n </button>\n );\n};\n"]}
|
||||
@@ -0,0 +1,144 @@
|
||||
:root {
|
||||
--navy-950: #0A1B30;
|
||||
--navy-900: #0F2440;
|
||||
--navy-800: #1B3A5C;
|
||||
--navy-700: #244B73;
|
||||
--navy-600: #2D5C8A;
|
||||
--navy-100: #E8EEF4;
|
||||
--navy-50: #F4F7FA;
|
||||
--gold-600: #B8881A;
|
||||
--gold-500: #D4A01E;
|
||||
--gold-400: #E5B635;
|
||||
--gold-300: #F0CC5E;
|
||||
--gold-100: #FDF5E0;
|
||||
--gold-50: #FEFBF0;
|
||||
--gray-900: #111827;
|
||||
--gray-700: #374151;
|
||||
--gray-500: #6B7280;
|
||||
--gray-400: #9CA3AF;
|
||||
--gray-300: #D1D5DB;
|
||||
--gray-200: #E5E7EB;
|
||||
--gray-100: #F3F4F6;
|
||||
--gray-50: #F9FAFB;
|
||||
--red-500: #DC2626;
|
||||
--red-50: #FEF2F2;
|
||||
--green-600: #15803D;
|
||||
--green-50: #F0FDF4;
|
||||
--blue-600: #2563EB;
|
||||
--blue-50: #EFF6FF;
|
||||
--amber-700: #854D0E;
|
||||
--sh-1: 0 1px 2px rgba(15, 36, 64, 0.04), 0 1px 3px rgba(15, 36, 64, 0.06);
|
||||
--sh-2: 0 4px 16px rgba(15, 36, 64, 0.07);
|
||||
--sh-3: 0 12px 32px rgba(15, 36, 64, 0.1);
|
||||
--sh-gold: 0 4px 20px rgba(212, 160, 30, 0.18);
|
||||
--sh-modal: 0 24px 70px rgba(10, 27, 48, 0.25);
|
||||
--r-sm: 6px;
|
||||
--r-md: 10px;
|
||||
--r-lg: 14px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: 0.18s;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.15px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.primary {
|
||||
background: #1B3A5C;
|
||||
color: #fff;
|
||||
border-color: #1B3A5C;
|
||||
}
|
||||
.primary:hover:not(:disabled) {
|
||||
background: #244B73;
|
||||
box-shadow: 0 4px 16px rgba(15, 36, 64, 0.07);
|
||||
}
|
||||
|
||||
.accent {
|
||||
background: linear-gradient(135deg, #E5B635, #D4A01E);
|
||||
color: #0A1B30;
|
||||
font-weight: 600;
|
||||
border: 1px solid #D4A01E;
|
||||
}
|
||||
.accent:hover {
|
||||
box-shadow: 0 4px 20px rgba(212, 160, 30, 0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background: #fff;
|
||||
color: #1B3A5C;
|
||||
border-color: #D1D5DB;
|
||||
}
|
||||
.secondary:hover:not(:disabled) {
|
||||
border-color: #D4A01E;
|
||||
color: #0F2440;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background: transparent;
|
||||
color: #244B73;
|
||||
border-color: transparent;
|
||||
}
|
||||
.ghost:hover:not(:disabled) {
|
||||
background: #E8EEF4;
|
||||
}
|
||||
|
||||
.danger {
|
||||
background: #fff;
|
||||
color: #DC2626;
|
||||
border-color: #D1D5DB;
|
||||
}
|
||||
.danger:hover:not(:disabled) {
|
||||
border-color: #DC2626;
|
||||
background: #FEF2F2;
|
||||
}
|
||||
|
||||
.sm {
|
||||
padding: 7px 14px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.iconButton {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
color: #9CA3AF;
|
||||
transition: 0.18s;
|
||||
}
|
||||
.iconButton:hover:not(:disabled) {
|
||||
color: #1B3A5C;
|
||||
background: #F4F7FA;
|
||||
border-color: #E5E7EB;
|
||||
}
|
||||
.iconButton.danger:hover:not(:disabled) {
|
||||
color: #DC2626;
|
||||
background: #FEF2F2;
|
||||
}
|
||||
.iconButton:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.StatCard = exports.StatRow = exports.NavCard = exports.CardGrid = void 0;
|
||||
var tslib_1 = require("tslib");
|
||||
var React = tslib_1.__importStar(require("react"));
|
||||
var Card_module_scss_1 = tslib_1.__importDefault(require("./Card.module.scss"));
|
||||
var Icon_1 = require("./Icon");
|
||||
var CardGrid = function (_a) {
|
||||
var children = _a.children;
|
||||
return (React.createElement("div", { className: Card_module_scss_1.default.grid }, children));
|
||||
};
|
||||
exports.CardGrid = CardGrid;
|
||||
var NavCard = function (_a) {
|
||||
var icon = _a.icon, title = _a.title, description = _a.description, onClick = _a.onClick;
|
||||
return (React.createElement("a", { className: Card_module_scss_1.default.navCard, onClick: function (e) { e.preventDefault(); onClick(); }, href: "#" },
|
||||
React.createElement("div", { className: Card_module_scss_1.default.navIcon },
|
||||
React.createElement(Icon_1.Icon, { name: icon })),
|
||||
React.createElement("div", null,
|
||||
React.createElement("div", { className: Card_module_scss_1.default.navTitle }, title),
|
||||
React.createElement("div", { className: Card_module_scss_1.default.navDesc }, description)),
|
||||
React.createElement("div", { className: Card_module_scss_1.default.navArrow },
|
||||
React.createElement(Icon_1.Icon, { name: "chevron-right", size: "sm" }))));
|
||||
};
|
||||
exports.NavCard = NavCard;
|
||||
var StatRow = function (_a) {
|
||||
var children = _a.children;
|
||||
return (React.createElement("div", { className: Card_module_scss_1.default.statRow }, children));
|
||||
};
|
||||
exports.StatRow = StatRow;
|
||||
var StatCard = function (_a) {
|
||||
var label = _a.label, value = _a.value;
|
||||
return (React.createElement("div", { className: Card_module_scss_1.default.statCard },
|
||||
React.createElement("div", { className: Card_module_scss_1.default.statLabel }, label),
|
||||
React.createElement("div", { className: Card_module_scss_1.default.statValue }, value)));
|
||||
};
|
||||
exports.StatCard = StatCard;
|
||||
//# sourceMappingURL=Card.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../../src/webparts/approvalAdmin/components/ui/Card.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAC/B,gFAAwC;AACxC,+BAAwC;AAEjC,IAAM,QAAQ,GAA4C,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CACjF,6BAAK,SAAS,EAAE,0BAAM,CAAC,IAAI,IAAG,QAAQ,CAAO,CAC9C;AAFkF,CAElF,CAAC;AAFW,QAAA,QAAQ,YAEnB;AASK,IAAM,OAAO,GAA4B,UAAC,EAAqC;QAAnC,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,OAAO,aAAA;IAAO,OAAA,CACzF,2BAAG,SAAS,EAAE,0BAAM,CAAC,OAAO,EAAE,OAAO,EAAE,UAAA,CAAC,IAAM,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAC,GAAG;QACtF,6BAAK,SAAS,EAAE,0BAAM,CAAC,OAAO;YAAE,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CAAM;QAC1D;YACE,6BAAK,SAAS,EAAE,0BAAM,CAAC,QAAQ,IAAG,KAAK,CAAO;YAC9C,6BAAK,SAAS,EAAE,0BAAM,CAAC,OAAO,IAAG,WAAW,CAAO,CAC/C;QACN,6BAAK,SAAS,EAAE,0BAAM,CAAC,QAAQ;YAAE,oBAAC,WAAI,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,GAAG,CAAM,CAC5E,CACL;AAT0F,CAS1F,CAAC;AATW,QAAA,OAAO,WASlB;AAEK,IAAM,OAAO,GAA4C,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CAChF,6BAAK,SAAS,EAAE,0BAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CACjD;AAFiF,CAEjF,CAAC;AAFW,QAAA,OAAO,WAElB;AAEK,IAAM,QAAQ,GAAwD,UAAC,EAAgB;QAAd,KAAK,WAAA,EAAE,KAAK,WAAA;IAAO,OAAA,CACjG,6BAAK,SAAS,EAAE,0BAAM,CAAC,QAAQ;QAC7B,6BAAK,SAAS,EAAE,0BAAM,CAAC,SAAS,IAAG,KAAK,CAAO;QAC/C,6BAAK,SAAS,EAAE,0BAAM,CAAC,SAAS,IAAG,KAAK,CAAO,CAC3C,CACP;AALkG,CAKlG,CAAC;AALW,QAAA,QAAQ,YAKnB","sourcesContent":["import * as React from 'react';\nimport styles from './Card.module.scss';\nimport { Icon, IconName } from './Icon';\n\nexport const CardGrid: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <div className={styles.grid}>{children}</div>\n);\n\nexport interface INavCardProps {\n icon: IconName;\n title: string;\n description: string;\n onClick: () => void;\n}\n\nexport const NavCard: React.FC<INavCardProps> = ({ icon, title, description, onClick }) => (\n <a className={styles.navCard} onClick={e => { e.preventDefault(); onClick(); }} href=\"#\">\n <div className={styles.navIcon}><Icon name={icon} /></div>\n <div>\n <div className={styles.navTitle}>{title}</div>\n <div className={styles.navDesc}>{description}</div>\n </div>\n <div className={styles.navArrow}><Icon name=\"chevron-right\" size=\"sm\" /></div>\n </a>\n);\n\nexport const StatRow: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <div className={styles.statRow}>{children}</div>\n);\n\nexport const StatCard: React.FC<{ label: string; value: React.ReactNode }> = ({ label, value }) => (\n <div className={styles.statCard}>\n <div className={styles.statLabel}>{label}</div>\n <div className={styles.statValue}>{value}</div>\n </div>\n);\n"]}
|
||||
@@ -0,0 +1,155 @@
|
||||
:root {
|
||||
--navy-950: #0A1B30;
|
||||
--navy-900: #0F2440;
|
||||
--navy-800: #1B3A5C;
|
||||
--navy-700: #244B73;
|
||||
--navy-600: #2D5C8A;
|
||||
--navy-100: #E8EEF4;
|
||||
--navy-50: #F4F7FA;
|
||||
--gold-600: #B8881A;
|
||||
--gold-500: #D4A01E;
|
||||
--gold-400: #E5B635;
|
||||
--gold-300: #F0CC5E;
|
||||
--gold-100: #FDF5E0;
|
||||
--gold-50: #FEFBF0;
|
||||
--gray-900: #111827;
|
||||
--gray-700: #374151;
|
||||
--gray-500: #6B7280;
|
||||
--gray-400: #9CA3AF;
|
||||
--gray-300: #D1D5DB;
|
||||
--gray-200: #E5E7EB;
|
||||
--gray-100: #F3F4F6;
|
||||
--gray-50: #F9FAFB;
|
||||
--red-500: #DC2626;
|
||||
--red-50: #FEF2F2;
|
||||
--green-600: #15803D;
|
||||
--green-50: #F0FDF4;
|
||||
--blue-600: #2563EB;
|
||||
--blue-50: #EFF6FF;
|
||||
--amber-700: #854D0E;
|
||||
--sh-1: 0 1px 2px rgba(15, 36, 64, 0.04), 0 1px 3px rgba(15, 36, 64, 0.06);
|
||||
--sh-2: 0 4px 16px rgba(15, 36, 64, 0.07);
|
||||
--sh-3: 0 12px 32px rgba(15, 36, 64, 0.1);
|
||||
--sh-gold: 0 4px 20px rgba(212, 160, 30, 0.18);
|
||||
--sh-modal: 0 24px 70px rgba(10, 27, 48, 0.25);
|
||||
--r-sm: 6px;
|
||||
--r-md: 10px;
|
||||
--r-lg: 14px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.navCard {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 22px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
box-shadow: 0 1px 2px rgba(15, 36, 64, 0.04), 0 1px 3px rgba(15, 36, 64, 0.06);
|
||||
cursor: pointer;
|
||||
transition: 0.22s;
|
||||
border: 1px solid #E5E7EB;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.navCard:hover {
|
||||
box-shadow: 0 12px 32px rgba(15, 36, 64, 0.1);
|
||||
transform: translateY(-2px);
|
||||
border-color: #F0CC5E;
|
||||
}
|
||||
.navCard::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: linear-gradient(180deg, #E5B635, #B8881A);
|
||||
opacity: 0;
|
||||
transition: 0.22s;
|
||||
}
|
||||
.navCard:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.navIcon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background: #F4F7FA;
|
||||
color: #244B73;
|
||||
border: 1px solid #E8EEF4;
|
||||
transition: 0.22s;
|
||||
}
|
||||
.navCard:hover .navIcon {
|
||||
background: #FEFBF0;
|
||||
color: #B8881A;
|
||||
border-color: #F0CC5E;
|
||||
}
|
||||
|
||||
.navTitle {
|
||||
font-size: 14.5px;
|
||||
font-weight: 600;
|
||||
color: #0F2440;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
.navDesc {
|
||||
font-size: 12px;
|
||||
color: #9CA3AF;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.navArrow {
|
||||
color: #D1D5DB;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
transition: 0.22s;
|
||||
}
|
||||
.navCard:hover .navArrow {
|
||||
color: #D4A01E;
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
.statRow {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||||
gap: 14px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.statCard {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px;
|
||||
box-shadow: 0 1px 2px rgba(15, 36, 64, 0.04), 0 1px 3px rgba(15, 36, 64, 0.06);
|
||||
border: 1px solid #E5E7EB;
|
||||
}
|
||||
|
||||
.statLabel {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.2px;
|
||||
color: #9CA3AF;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.statValue {
|
||||
font-family: "Lora", Georgia, serif;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
color: #0F2440;
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.ActionsCell = exports.PrimaryCell = void 0;
|
||||
exports.DataTable = DataTable;
|
||||
var tslib_1 = require("tslib");
|
||||
var React = tslib_1.__importStar(require("react"));
|
||||
var DataTable_module_scss_1 = tslib_1.__importDefault(require("./DataTable.module.scss"));
|
||||
function DataTable(_a) {
|
||||
var columns = _a.columns, rows = _a.rows, keyOf = _a.keyOf, emptyMessage = _a.emptyMessage;
|
||||
return (React.createElement("div", { className: DataTable_module_scss_1.default.wrap },
|
||||
React.createElement("table", { className: DataTable_module_scss_1.default.table },
|
||||
React.createElement("thead", null,
|
||||
React.createElement("tr", null, columns.map(function (col) {
|
||||
var _a;
|
||||
return (React.createElement("th", { key: col.key, style: { width: col.width, textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.header));
|
||||
}))),
|
||||
React.createElement("tbody", null, rows.map(function (row) { return (React.createElement("tr", { key: keyOf(row) }, columns.map(function (col) {
|
||||
var _a;
|
||||
return (React.createElement("td", { key: col.key, style: { textAlign: (_a = col.align) !== null && _a !== void 0 ? _a : 'left' } }, col.render(row)));
|
||||
}))); }))),
|
||||
rows.length === 0 && React.createElement("div", { className: DataTable_module_scss_1.default.empty }, emptyMessage)));
|
||||
}
|
||||
var PrimaryCell = function (_a) {
|
||||
var children = _a.children;
|
||||
return (React.createElement("span", { className: DataTable_module_scss_1.default.primaryCell }, children));
|
||||
};
|
||||
exports.PrimaryCell = PrimaryCell;
|
||||
var ActionsCell = function (_a) {
|
||||
var children = _a.children;
|
||||
return (React.createElement("span", { className: DataTable_module_scss_1.default.actionsCell }, children));
|
||||
};
|
||||
exports.ActionsCell = ActionsCell;
|
||||
//# sourceMappingURL=DataTable.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../../src/webparts/approvalAdmin/components/ui/DataTable.tsx"],"names":[],"mappings":";;;AAkBA,8BA4BC;;AA9CD,mDAA+B;AAC/B,0FAA6C;AAiB7C,SAAgB,SAAS,CAAI,EAA0D;QAAxD,OAAO,aAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,YAAY,kBAAA;IAC/D,OAAO,CACL,6BAAK,SAAS,EAAE,+BAAM,CAAC,IAAI;QACzB,+BAAO,SAAS,EAAE,+BAAM,CAAC,KAAK;YAC5B;gBACE,gCACG,OAAO,CAAC,GAAG,CAAC,UAAA,GAAG;;oBAAI,OAAA,CAClB,4BAAI,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,SAAS,EAAE,MAAA,GAAG,CAAC,KAAK,mCAAI,MAAM,EAAE,IAC1E,GAAG,CAAC,MAAM,CACR,CACN,CAAA;iBAAA,CAAC,CACC,CACC;YACR,mCACG,IAAI,CAAC,GAAG,CAAC,UAAA,GAAG,IAAI,OAAA,CACf,4BAAI,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,IAChB,OAAO,CAAC,GAAG,CAAC,UAAA,GAAG;;gBAAI,OAAA,CAClB,4BAAI,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAA,GAAG,CAAC,KAAK,mCAAI,MAAM,EAAE,IACxD,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CACb,CACN,CAAA;aAAA,CAAC,CACC,CACN,EARgB,CAQhB,CAAC,CACI,CACF;QACP,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,6BAAK,SAAS,EAAE,+BAAM,CAAC,KAAK,IAAG,YAAY,CAAO,CACpE,CACP,CAAC;AACJ,CAAC;AAEM,IAAM,WAAW,GAA4C,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CACpF,8BAAM,SAAS,EAAE,+BAAM,CAAC,WAAW,IAAG,QAAQ,CAAQ,CACvD;AAFqF,CAErF,CAAC;AAFW,QAAA,WAAW,eAEtB;AAEK,IAAM,WAAW,GAA4C,UAAC,EAAY;QAAV,QAAQ,cAAA;IAAO,OAAA,CACpF,8BAAM,SAAS,EAAE,+BAAM,CAAC,WAAW,IAAG,QAAQ,CAAQ,CACvD;AAFqF,CAErF,CAAC;AAFW,QAAA,WAAW,eAEtB","sourcesContent":["import * as React from 'react';\nimport styles from './DataTable.module.scss';\n\nexport interface IColumn<T> {\n key: string;\n header: string;\n render: (row: T) => React.ReactNode;\n align?: 'left' | 'right' | 'center';\n width?: string;\n}\n\nexport interface IDataTableProps<T> {\n columns: IColumn<T>[];\n rows: T[];\n keyOf: (row: T) => string | number;\n emptyMessage: string;\n}\n\nexport function DataTable<T>({ columns, rows, keyOf, emptyMessage }: IDataTableProps<T>): React.ReactElement {\n return (\n <div className={styles.wrap}>\n <table className={styles.table}>\n <thead>\n <tr>\n {columns.map(col => (\n <th key={col.key} style={{ width: col.width, textAlign: col.align ?? 'left' }}>\n {col.header}\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {rows.map(row => (\n <tr key={keyOf(row)}>\n {columns.map(col => (\n <td key={col.key} style={{ textAlign: col.align ?? 'left' }}>\n {col.render(row)}\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n {rows.length === 0 && <div className={styles.empty}>{emptyMessage}</div>}\n </div>\n );\n}\n\nexport const PrimaryCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <span className={styles.primaryCell}>{children}</span>\n);\n\nexport const ActionsCell: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <span className={styles.actionsCell}>{children}</span>\n);\n"]}
|
||||
@@ -0,0 +1,106 @@
|
||||
:root {
|
||||
--navy-950: #0A1B30;
|
||||
--navy-900: #0F2440;
|
||||
--navy-800: #1B3A5C;
|
||||
--navy-700: #244B73;
|
||||
--navy-600: #2D5C8A;
|
||||
--navy-100: #E8EEF4;
|
||||
--navy-50: #F4F7FA;
|
||||
--gold-600: #B8881A;
|
||||
--gold-500: #D4A01E;
|
||||
--gold-400: #E5B635;
|
||||
--gold-300: #F0CC5E;
|
||||
--gold-100: #FDF5E0;
|
||||
--gold-50: #FEFBF0;
|
||||
--gray-900: #111827;
|
||||
--gray-700: #374151;
|
||||
--gray-500: #6B7280;
|
||||
--gray-400: #9CA3AF;
|
||||
--gray-300: #D1D5DB;
|
||||
--gray-200: #E5E7EB;
|
||||
--gray-100: #F3F4F6;
|
||||
--gray-50: #F9FAFB;
|
||||
--red-500: #DC2626;
|
||||
--red-50: #FEF2F2;
|
||||
--green-600: #15803D;
|
||||
--green-50: #F0FDF4;
|
||||
--blue-600: #2563EB;
|
||||
--blue-50: #EFF6FF;
|
||||
--amber-700: #854D0E;
|
||||
--sh-1: 0 1px 2px rgba(15, 36, 64, 0.04), 0 1px 3px rgba(15, 36, 64, 0.06);
|
||||
--sh-2: 0 4px 16px rgba(15, 36, 64, 0.07);
|
||||
--sh-3: 0 12px 32px rgba(15, 36, 64, 0.1);
|
||||
--sh-gold: 0 4px 20px rgba(212, 160, 30, 0.18);
|
||||
--sh-modal: 0 24px 70px rgba(10, 27, 48, 0.25);
|
||||
--r-sm: 6px;
|
||||
--r-md: 10px;
|
||||
--r-lg: 14px;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 1px 2px rgba(15, 36, 64, 0.04), 0 1px 3px rgba(15, 36, 64, 0.06);
|
||||
overflow: hidden;
|
||||
border: 1px solid #E5E7EB;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
text-align: left;
|
||||
padding: 13px 18px;
|
||||
font-size: 10.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.2px;
|
||||
color: #9CA3AF;
|
||||
font-weight: 600;
|
||||
background: #F9FAFB;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table tbody td {
|
||||
padding: 15px 18px;
|
||||
border-bottom: 1px solid #F3F4F6;
|
||||
color: #374151;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
transition: 0.12s;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: #FEFBF0;
|
||||
}
|
||||
|
||||
.primaryCell {
|
||||
font-weight: 500;
|
||||
color: #0F2440;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.actionsCell {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 48px 20px;
|
||||
text-align: center;
|
||||
color: #9CA3AF;
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.Checkbox = exports.Select = exports.Textarea = exports.TextInput = exports.Field = exports.FormGrid = void 0;
|
||||
exports.RadioGroup = RadioGroup;
|
||||
var tslib_1 = require("tslib");
|
||||
var React = tslib_1.__importStar(require("react"));
|
||||
var FormField_module_scss_1 = tslib_1.__importDefault(require("./FormField.module.scss"));
|
||||
var FormGrid = function (_a) {
|
||||
var children = _a.children;
|
||||
return (React.createElement("div", { className: FormField_module_scss_1.default.grid }, children));
|
||||
};
|
||||
exports.FormGrid = FormGrid;
|
||||
var Field = function (_a) {
|
||||
var label = _a.label, required = _a.required, full = _a.full, error = _a.error, hint = _a.hint, children = _a.children;
|
||||
return (React.createElement("div", { className: "".concat(FormField_module_scss_1.default.field, " ").concat(full ? FormField_module_scss_1.default.full : '') },
|
||||
React.createElement("span", { className: FormField_module_scss_1.default.label },
|
||||
label,
|
||||
" ",
|
||||
required && React.createElement("span", { className: FormField_module_scss_1.default.req }, "*")),
|
||||
children,
|
||||
error && React.createElement("span", { className: FormField_module_scss_1.default.errorText }, error),
|
||||
!error && hint && React.createElement("span", { className: FormField_module_scss_1.default.hint }, hint)));
|
||||
};
|
||||
exports.Field = Field;
|
||||
var TextInput = function (props) { return (React.createElement("input", tslib_1.__assign({}, props, { className: FormField_module_scss_1.default.input }))); };
|
||||
exports.TextInput = TextInput;
|
||||
var Textarea = function (props) { return (React.createElement("textarea", tslib_1.__assign({}, props, { className: FormField_module_scss_1.default.textarea }))); };
|
||||
exports.Textarea = Textarea;
|
||||
var Select = function (_a) {
|
||||
var options = _a.options, placeholder = _a.placeholder, rest = tslib_1.__rest(_a, ["options", "placeholder"]);
|
||||
return (React.createElement("select", tslib_1.__assign({}, rest, { className: FormField_module_scss_1.default.select }),
|
||||
placeholder && React.createElement("option", { value: "" }, placeholder),
|
||||
options.map(function (opt) { return (React.createElement("option", { key: opt.value, value: opt.value }, opt.label)); })));
|
||||
};
|
||||
exports.Select = Select;
|
||||
var Checkbox = function (_a) {
|
||||
var label = _a.label, checked = _a.checked, onChange = _a.onChange, disabled = _a.disabled;
|
||||
return (React.createElement("label", { className: FormField_module_scss_1.default.checkboxRow },
|
||||
React.createElement("input", { type: "checkbox", className: FormField_module_scss_1.default.checkbox, checked: checked, disabled: disabled, onChange: function (e) { return onChange(e.target.checked); } }),
|
||||
label));
|
||||
};
|
||||
exports.Checkbox = Checkbox;
|
||||
function RadioGroup(_a) {
|
||||
var name = _a.name, value = _a.value, options = _a.options, onChange = _a.onChange;
|
||||
return (React.createElement("div", { className: FormField_module_scss_1.default.radioGroup }, options.map(function (opt) { return (React.createElement("label", { key: opt.value, className: "".concat(FormField_module_scss_1.default.radioRow, " ").concat(opt.disabled ? FormField_module_scss_1.default.disabled : ''), title: opt.disabled ? opt.disabledHint : undefined },
|
||||
React.createElement("input", { type: "radio", className: FormField_module_scss_1.default.radio, name: name, checked: value === opt.value, disabled: opt.disabled, onChange: function () { return onChange(opt.value); } }),
|
||||
opt.label)); })));
|
||||
}
|
||||
//# sourceMappingURL=FormField.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,168 @@
|
||||
:root {
|
||||
--navy-950: #0A1B30;
|
||||
--navy-900: #0F2440;
|
||||
--navy-800: #1B3A5C;
|
||||
--navy-700: #244B73;
|
||||
--navy-600: #2D5C8A;
|
||||
--navy-100: #E8EEF4;
|
||||
--navy-50: #F4F7FA;
|
||||
--gold-600: #B8881A;
|
||||
--gold-500: #D4A01E;
|
||||
--gold-400: #E5B635;
|
||||
--gold-300: #F0CC5E;
|
||||
--gold-100: #FDF5E0;
|
||||
--gold-50: #FEFBF0;
|
||||
--gray-900: #111827;
|
||||
--gray-700: #374151;
|
||||
--gray-500: #6B7280;
|
||||
--gray-400: #9CA3AF;
|
||||
--gray-300: #D1D5DB;
|
||||
--gray-200: #E5E7EB;
|
||||
--gray-100: #F3F4F6;
|
||||
--gray-50: #F9FAFB;
|
||||
--red-500: #DC2626;
|
||||
--red-50: #FEF2F2;
|
||||
--green-600: #15803D;
|
||||
--green-50: #F0FDF4;
|
||||
--blue-600: #2563EB;
|
||||
--blue-50: #EFF6FF;
|
||||
--amber-700: #854D0E;
|
||||
--sh-1: 0 1px 2px rgba(15, 36, 64, 0.04), 0 1px 3px rgba(15, 36, 64, 0.06);
|
||||
--sh-2: 0 4px 16px rgba(15, 36, 64, 0.07);
|
||||
--sh-3: 0 12px 32px rgba(15, 36, 64, 0.1);
|
||||
--sh-gold: 0 4px 20px rgba(212, 160, 30, 0.18);
|
||||
--sh-modal: 0 24px 70px rgba(10, 27, 48, 0.25);
|
||||
--r-sm: 6px;
|
||||
--r-md: 10px;
|
||||
--r-lg: 14px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18px 22px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.full {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.req {
|
||||
color: #B8881A;
|
||||
}
|
||||
|
||||
.input,
|
||||
.select,
|
||||
.textarea {
|
||||
padding: 11px 13px;
|
||||
border: 1px solid #D1D5DB;
|
||||
border-radius: 6px;
|
||||
font-size: 13.5px;
|
||||
font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
|
||||
color: #111827;
|
||||
transition: 0.18s;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
.input:focus,
|
||||
.select:focus,
|
||||
.textarea:focus {
|
||||
outline: 0;
|
||||
border-color: #D4A01E;
|
||||
box-shadow: 0 0 0 3px rgba(212, 160, 30, 0.12);
|
||||
}
|
||||
.input::placeholder,
|
||||
.select::placeholder,
|
||||
.textarea::placeholder {
|
||||
color: #9CA3AF;
|
||||
}
|
||||
.input:disabled,
|
||||
.select:disabled,
|
||||
.textarea:disabled {
|
||||
background: #F9FAFB;
|
||||
color: #9CA3AF;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.errorText {
|
||||
font-size: 11.5px;
|
||||
color: #DC2626;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 11.5px;
|
||||
color: #9CA3AF;
|
||||
}
|
||||
|
||||
.checkboxRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
font-size: 13px;
|
||||
color: #374151;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
accent-color: #D4A01E;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radioGroup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.radioRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
font-size: 13px;
|
||||
color: #374151;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.radioRow.disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: #D4A01E;
|
||||
cursor: pointer;
|
||||
}
|
||||
.radio:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.Icon = void 0;
|
||||
var tslib_1 = require("tslib");
|
||||
var React = tslib_1.__importStar(require("react"));
|
||||
var spriteInjected = false;
|
||||
var SPRITE_SVG = "\n<symbol id=\"i-route\" viewBox=\"0 0 24 24\"><circle cx=\"6\" cy=\"6\" r=\"3\"/><circle cx=\"18\" cy=\"18\" r=\"3\"/><path d=\"M9 6h7a3 3 0 0 1 3 3v0a3 3 0 0 1-3 3H8a3 3 0 0 0-3 3v0a3 3 0 0 0 3 3h7\"/></symbol>\n<symbol id=\"i-clipboard\" viewBox=\"0 0 24 24\"><path d=\"M9 3h6v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1z\"/><rect x=\"5\" y=\"5\" width=\"14\" height=\"16\" rx=\"2\"/><path d=\"M9 12h6M9 16h4\"/></symbol>\n<symbol id=\"i-flag-check\" viewBox=\"0 0 24 24\"><path d=\"M4 3v18\"/><path d=\"M4 4h13l-2 4 2 4H4\"/></symbol>\n<symbol id=\"i-people\" viewBox=\"0 0 24 24\"><circle cx=\"9\" cy=\"7\" r=\"3\"/><path d=\"M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2\"/><circle cx=\"17\" cy=\"8\" r=\"2.5\"/><path d=\"M17 13.5a3.5 3.5 0 0 1 3.5 3.5v1\"/></symbol>\n<symbol id=\"i-warning\" viewBox=\"0 0 24 24\"><path d=\"M12 2 1 21h22z\" stroke-linejoin=\"round\"/><path d=\"M12 9v5M12 17h.01\"/></symbol>\n<symbol id=\"i-check\" viewBox=\"0 0 24 24\"><path d=\"M5 12l5 5L20 7\"/></symbol>\n<symbol id=\"i-close\" viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18M6 6l12 12\"/></symbol>\n<symbol id=\"i-plus\" viewBox=\"0 0 24 24\"><path d=\"M12 5v14M5 12h14\"/></symbol>\n<symbol id=\"i-edit\" viewBox=\"0 0 24 24\"><path d=\"M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z\"/></symbol>\n<symbol id=\"i-trash\" viewBox=\"0 0 24 24\"><path d=\"M4 7h16M10 11v6M14 11v6\"/><path d=\"M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12\"/><path d=\"M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3\"/></symbol>\n<symbol id=\"i-more\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"5\" r=\"1.5\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"12\" cy=\"19\" r=\"1.5\" fill=\"currentColor\" stroke=\"none\"/></symbol>\n<symbol id=\"i-chevron-right\" viewBox=\"0 0 24 24\"><path d=\"m9 6 6 6-6 6\"/></symbol>\n<symbol id=\"i-chevron-down\" viewBox=\"0 0 24 24\"><path d=\"m6 9 6 6 6-6\"/></symbol>\n<symbol id=\"i-chevron-left\" viewBox=\"0 0 24 24\"><path d=\"m15 6-6 6 6 6\"/></symbol>\n<symbol id=\"i-arrow-left\" viewBox=\"0 0 24 24\"><path d=\"M19 12H5m0 0 5-5m-5 5 5 5\"/></symbol>\n<symbol id=\"i-search\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m21 21-4.35-4.35\"/></symbol>\n<symbol id=\"i-sort\" viewBox=\"0 0 24 24\"><path d=\"M7 3v18M7 3l-4 4m4-4 4 4M17 21V3m0 18-4-4m4 4 4-4\"/></symbol>\n<symbol id=\"i-mail\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"m4 6 8 7 8-7\"/></symbol>\n<symbol id=\"i-briefcase\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"7\" width=\"18\" height=\"13\" rx=\"2\"/><path d=\"M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/><path d=\"M3 12h18\"/></symbol>\n<symbol id=\"i-flag\" viewBox=\"0 0 24 24\"><path d=\"M5 3v18\"/><path d=\"M5 4h13l-3 4 3 4H5\"/></symbol>\n<symbol id=\"i-crown\" viewBox=\"0 0 24 24\"><path d=\"m3 8 4 3 5-6 5 6 4-3-2 11H5z\"/></symbol>\n<symbol id=\"i-refresh\" viewBox=\"0 0 24 24\"><path d=\"M21 12a9 9 0 1 1-3-6.7\"/><path d=\"M21 3v6h-6\"/></symbol>\n";
|
||||
function ensureSpriteInjected() {
|
||||
if (spriteInjected || typeof document === 'undefined')
|
||||
return;
|
||||
var holder = document.createElement('div');
|
||||
holder.style.display = 'none';
|
||||
holder.innerHTML = "<svg xmlns=\"http://www.w3.org/2000/svg\">".concat(SPRITE_SVG, "</svg>");
|
||||
document.body.appendChild(holder);
|
||||
spriteInjected = true;
|
||||
}
|
||||
var SIZE_PX = { sm: 16, md: 20, lg: 24 };
|
||||
var Icon = function (_a) {
|
||||
var name = _a.name, _b = _a.size, size = _b === void 0 ? 'md' : _b, className = _a.className, style = _a.style;
|
||||
React.useEffect(function () {
|
||||
ensureSpriteInjected();
|
||||
}, []);
|
||||
var px = SIZE_PX[size];
|
||||
return (React.createElement("svg", { width: px, height: px, className: className, style: tslib_1.__assign({ flexShrink: 0, fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' }, style) },
|
||||
React.createElement("use", { href: "#i-".concat(name) })));
|
||||
};
|
||||
exports.Icon = Icon;
|
||||
//# sourceMappingURL=Icon.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,32 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.ConfirmDialog = exports.Modal = void 0;
|
||||
var tslib_1 = require("tslib");
|
||||
var React = tslib_1.__importStar(require("react"));
|
||||
var Modal_module_scss_1 = tslib_1.__importDefault(require("./Modal.module.scss"));
|
||||
var Button_1 = require("./Button");
|
||||
var Modal = function (_a) {
|
||||
var title = _a.title, onClose = _a.onClose, footer = _a.footer, children = _a.children;
|
||||
return (React.createElement("div", { className: Modal_module_scss_1.default.overlay, onClick: function (e) { if (e.target === e.currentTarget)
|
||||
onClose(); } },
|
||||
React.createElement("div", { className: Modal_module_scss_1.default.box },
|
||||
React.createElement("div", { className: Modal_module_scss_1.default.header },
|
||||
React.createElement("div", { className: Modal_module_scss_1.default.title }, title),
|
||||
React.createElement(Button_1.IconButton, { icon: "close", label: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", onClick: onClose })),
|
||||
React.createElement("div", { className: Modal_module_scss_1.default.body }, children),
|
||||
footer && React.createElement("div", { className: Modal_module_scss_1.default.footer }, footer))));
|
||||
};
|
||||
exports.Modal = Modal;
|
||||
var ConfirmDialog = function (_a) {
|
||||
var title = _a.title, text = _a.text, confirmLabel = _a.confirmLabel, onConfirm = _a.onConfirm, onCancel = _a.onCancel, busy = _a.busy;
|
||||
return (React.createElement("div", { className: Modal_module_scss_1.default.overlay, onClick: function (e) { if (e.target === e.currentTarget)
|
||||
onCancel(); } },
|
||||
React.createElement("div", { className: "".concat(Modal_module_scss_1.default.box, " ").concat(Modal_module_scss_1.default.narrow) },
|
||||
React.createElement("div", { className: Modal_module_scss_1.default.title }, title),
|
||||
React.createElement("p", { className: Modal_module_scss_1.default.text }, text),
|
||||
React.createElement("div", { className: Modal_module_scss_1.default.narrowFooter },
|
||||
React.createElement(Button_1.Button, { variant: "secondary", onClick: onCancel, disabled: busy }, "\u041E\u0442\u043C\u0435\u043D\u0430"),
|
||||
React.createElement(Button_1.Button, { variant: "danger", icon: "trash", onClick: onConfirm, disabled: busy }, confirmLabel)))));
|
||||
};
|
||||
exports.ConfirmDialog = ConfirmDialog;
|
||||
//# sourceMappingURL=Modal.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../../src/webparts/approvalAdmin/components/ui/Modal.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAC/B,kFAAyC;AACzC,mCAA8C;AASvC,IAAM,KAAK,GAA0B,UAAC,EAAoC;QAAlC,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,MAAM,YAAA,EAAE,QAAQ,cAAA;IAAO,OAAA,CACpF,6BAAK,SAAS,EAAE,2BAAM,CAAC,OAAO,EAAE,OAAO,EAAE,UAAA,CAAC,IAAM,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QAC5F,6BAAK,SAAS,EAAE,2BAAM,CAAC,GAAG;YACxB,6BAAK,SAAS,EAAE,2BAAM,CAAC,MAAM;gBAC3B,6BAAK,SAAS,EAAE,2BAAM,CAAC,KAAK,IAAG,KAAK,CAAO;gBAC3C,oBAAC,mBAAU,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,4CAAS,EAAC,OAAO,EAAE,OAAO,GAAI,CACzD;YACN,6BAAK,SAAS,EAAE,2BAAM,CAAC,IAAI,IAAG,QAAQ,CAAO;YAC5C,MAAM,IAAI,6BAAK,SAAS,EAAE,2BAAM,CAAC,MAAM,IAAG,MAAM,CAAO,CACpD,CACF,CACP;AAXqF,CAWrF,CAAC;AAXW,QAAA,KAAK,SAWhB;AAWK,IAAM,aAAa,GAAkC,UAAC,EAAwD;QAAtD,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,YAAY,kBAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA;IAAO,OAAA,CACxH,6BAAK,SAAS,EAAE,2BAAM,CAAC,OAAO,EAAE,OAAO,EAAE,UAAA,CAAC,IAAM,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;QAC7F,6BAAK,SAAS,EAAE,UAAG,2BAAM,CAAC,GAAG,cAAI,2BAAM,CAAC,MAAM,CAAE;YAC9C,6BAAK,SAAS,EAAE,2BAAM,CAAC,KAAK,IAAG,KAAK,CAAO;YAC3C,2BAAG,SAAS,EAAE,2BAAM,CAAC,IAAI,IAAG,IAAI,CAAK;YACrC,6BAAK,SAAS,EAAE,2BAAM,CAAC,YAAY;gBACjC,oBAAC,eAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,2CAAiB;gBAC9E,oBAAC,eAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,IAAG,YAAY,CAAU,CAC7F,CACF,CACF,CACP;AAXyH,CAWzH,CAAC;AAXW,QAAA,aAAa,iBAWxB","sourcesContent":["import * as React from 'react';\nimport styles from './Modal.module.scss';\nimport { Button, IconButton } from './Button';\n\nexport interface IModalProps {\n title: string;\n onClose: () => void;\n footer?: React.ReactNode;\n children: React.ReactNode;\n}\n\nexport const Modal: React.FC<IModalProps> = ({ title, onClose, footer, children }) => (\n <div className={styles.overlay} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>\n <div className={styles.box}>\n <div className={styles.header}>\n <div className={styles.title}>{title}</div>\n <IconButton icon=\"close\" label=\"Закрыть\" onClick={onClose} />\n </div>\n <div className={styles.body}>{children}</div>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n </div>\n);\n\nexport interface IConfirmDialogProps {\n title: string;\n text: string;\n confirmLabel: string;\n onConfirm: () => void;\n onCancel: () => void;\n busy?: boolean;\n}\n\nexport const ConfirmDialog: React.FC<IConfirmDialogProps> = ({ title, text, confirmLabel, onConfirm, onCancel, busy }) => (\n <div className={styles.overlay} onClick={e => { if (e.target === e.currentTarget) onCancel(); }}>\n <div className={`${styles.box} ${styles.narrow}`}>\n <div className={styles.title}>{title}</div>\n <p className={styles.text}>{text}</p>\n <div className={styles.narrowFooter}>\n <Button variant=\"secondary\" onClick={onCancel} disabled={busy}>Отмена</Button>\n <Button variant=\"danger\" icon=\"trash\" onClick={onConfirm} disabled={busy}>{confirmLabel}</Button>\n </div>\n </div>\n </div>\n);\n"]}
|
||||
@@ -0,0 +1,109 @@
|
||||
:root {
|
||||
--navy-950: #0A1B30;
|
||||
--navy-900: #0F2440;
|
||||
--navy-800: #1B3A5C;
|
||||
--navy-700: #244B73;
|
||||
--navy-600: #2D5C8A;
|
||||
--navy-100: #E8EEF4;
|
||||
--navy-50: #F4F7FA;
|
||||
--gold-600: #B8881A;
|
||||
--gold-500: #D4A01E;
|
||||
--gold-400: #E5B635;
|
||||
--gold-300: #F0CC5E;
|
||||
--gold-100: #FDF5E0;
|
||||
--gold-50: #FEFBF0;
|
||||
--gray-900: #111827;
|
||||
--gray-700: #374151;
|
||||
--gray-500: #6B7280;
|
||||
--gray-400: #9CA3AF;
|
||||
--gray-300: #D1D5DB;
|
||||
--gray-200: #E5E7EB;
|
||||
--gray-100: #F3F4F6;
|
||||
--gray-50: #F9FAFB;
|
||||
--red-500: #DC2626;
|
||||
--red-50: #FEF2F2;
|
||||
--green-600: #15803D;
|
||||
--green-50: #F0FDF4;
|
||||
--blue-600: #2563EB;
|
||||
--blue-50: #EFF6FF;
|
||||
--amber-700: #854D0E;
|
||||
--sh-1: 0 1px 2px rgba(15, 36, 64, 0.04), 0 1px 3px rgba(15, 36, 64, 0.06);
|
||||
--sh-2: 0 4px 16px rgba(15, 36, 64, 0.07);
|
||||
--sh-3: 0 12px 32px rgba(15, 36, 64, 0.1);
|
||||
--sh-gold: 0 4px 20px rgba(212, 160, 30, 0.18);
|
||||
--sh-modal: 0 24px 70px rgba(10, 27, 48, 0.25);
|
||||
--r-sm: 6px;
|
||||
--r-md: 10px;
|
||||
--r-lg: 14px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(10, 27, 48, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 300;
|
||||
backdrop-filter: blur(6px);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 24px 70px rgba(10, 27, 48, 0.25);
|
||||
width: 480px;
|
||||
max-width: 100%;
|
||||
max-height: calc(100vh - 40px);
|
||||
overflow-y: auto;
|
||||
border-top: 3px solid #D4A01E;
|
||||
}
|
||||
|
||||
.narrow {
|
||||
width: 420px;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 22px 26px 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "Lora", Georgia, serif;
|
||||
font-size: 19px;
|
||||
font-weight: 600;
|
||||
color: #0F2440;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 18px 26px 26px;
|
||||
}
|
||||
|
||||
.narrowBody {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 13px;
|
||||
color: #6B7280;
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 16px 26px 22px;
|
||||
}
|
||||
|
||||
.narrowFooter {
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin-top: 24px;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.PageHeader = exports.Breadcrumbs = void 0;
|
||||
var tslib_1 = require("tslib");
|
||||
var React = tslib_1.__importStar(require("react"));
|
||||
var PageChrome_module_scss_1 = tslib_1.__importDefault(require("./PageChrome.module.scss"));
|
||||
var Icon_1 = require("./Icon");
|
||||
var Breadcrumbs = function (_a) {
|
||||
var items = _a.items;
|
||||
return (React.createElement("div", { className: PageChrome_module_scss_1.default.bread }, items.map(function (item, i) { return (React.createElement(React.Fragment, { key: i },
|
||||
i > 0 && React.createElement("span", { className: PageChrome_module_scss_1.default.sep }, "\u25C6"),
|
||||
item.onClick ? (React.createElement("button", { className: PageChrome_module_scss_1.default.breadLink, onClick: item.onClick }, item.label)) : (React.createElement("span", null, item.label)))); })));
|
||||
};
|
||||
exports.Breadcrumbs = Breadcrumbs;
|
||||
var PageHeader = function (_a) {
|
||||
var icon = _a.icon, subtitle = _a.subtitle, title = _a.title, actions = _a.actions;
|
||||
return (React.createElement("div", { className: PageChrome_module_scss_1.default.ph },
|
||||
React.createElement("div", { className: PageChrome_module_scss_1.default.phLeft },
|
||||
React.createElement("div", { className: PageChrome_module_scss_1.default.phIcon },
|
||||
React.createElement(Icon_1.Icon, { name: icon })),
|
||||
React.createElement("div", null,
|
||||
React.createElement("div", { className: PageChrome_module_scss_1.default.phSub }, subtitle),
|
||||
React.createElement("div", { className: PageChrome_module_scss_1.default.phTitle }, title))),
|
||||
actions && React.createElement("div", { className: PageChrome_module_scss_1.default.phRight }, actions)));
|
||||
};
|
||||
exports.PageHeader = PageHeader;
|
||||
//# sourceMappingURL=PageChrome.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"PageChrome.js","sourceRoot":"","sources":["../../../../../src/webparts/approvalAdmin/components/ui/PageChrome.tsx"],"names":[],"mappings":";;;;AAAA,mDAA+B;AAC/B,4FAA8C;AAC9C,+BAAwC;AAOjC,IAAM,WAAW,GAA2C,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,CAChF,6BAAK,SAAS,EAAE,gCAAM,CAAC,KAAK,IACzB,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,CAAC,IAAK,OAAA,CACtB,oBAAC,KAAK,CAAC,QAAQ,IAAC,GAAG,EAAE,CAAC;QACnB,CAAC,GAAG,CAAC,IAAI,8BAAM,SAAS,EAAE,gCAAM,CAAC,GAAG,aAAgB;QACpD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,gCAAQ,SAAS,EAAE,gCAAM,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAAG,IAAI,CAAC,KAAK,CAAU,CAClF,CAAC,CAAC,CAAC,CACF,kCAAO,IAAI,CAAC,KAAK,CAAQ,CAC1B,CACc,CAClB,EATuB,CASvB,CAAC,CACE,CACP;AAbiF,CAajF,CAAC;AAbW,QAAA,WAAW,eAatB;AASK,IAAM,UAAU,GAA+B,UAAC,EAAkC;QAAhC,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA;IAAO,OAAA,CAC5F,6BAAK,SAAS,EAAE,gCAAM,CAAC,EAAE;QACvB,6BAAK,SAAS,EAAE,gCAAM,CAAC,MAAM;YAC3B,6BAAK,SAAS,EAAE,gCAAM,CAAC,MAAM;gBAAE,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CAAM;YACzD;gBACE,6BAAK,SAAS,EAAE,gCAAM,CAAC,KAAK,IAAG,QAAQ,CAAO;gBAC9C,6BAAK,SAAS,EAAE,gCAAM,CAAC,OAAO,IAAG,KAAK,CAAO,CACzC,CACF;QACL,OAAO,IAAI,6BAAK,SAAS,EAAE,gCAAM,CAAC,OAAO,IAAG,OAAO,CAAO,CACvD,CACP;AAX6F,CAW7F,CAAC;AAXW,QAAA,UAAU,cAWrB","sourcesContent":["import * as React from 'react';\nimport styles from './PageChrome.module.scss';\nimport { Icon, IconName } from './Icon';\n\nexport interface IBreadcrumbItem {\n label: string;\n onClick?: () => void;\n}\n\nexport const Breadcrumbs: React.FC<{ items: IBreadcrumbItem[] }> = ({ items }) => (\n <div className={styles.bread}>\n {items.map((item, i) => (\n <React.Fragment key={i}>\n {i > 0 && <span className={styles.sep}>◆</span>}\n {item.onClick ? (\n <button className={styles.breadLink} onClick={item.onClick}>{item.label}</button>\n ) : (\n <span>{item.label}</span>\n )}\n </React.Fragment>\n ))}\n </div>\n);\n\nexport interface IPageHeaderProps {\n icon: IconName;\n subtitle: string;\n title: string;\n actions?: React.ReactNode;\n}\n\nexport const PageHeader: React.FC<IPageHeaderProps> = ({ icon, subtitle, title, actions }) => (\n <div className={styles.ph}>\n <div className={styles.phLeft}>\n <div className={styles.phIcon}><Icon name={icon} /></div>\n <div>\n <div className={styles.phSub}>{subtitle}</div>\n <div className={styles.phTitle}>{title}</div>\n </div>\n </div>\n {actions && <div className={styles.phRight}>{actions}</div>}\n </div>\n);\n"]}
|
||||
+148
@@ -0,0 +1,148 @@
|
||||
:root {
|
||||
--navy-950: #0A1B30;
|
||||
--navy-900: #0F2440;
|
||||
--navy-800: #1B3A5C;
|
||||
--navy-700: #244B73;
|
||||
--navy-600: #2D5C8A;
|
||||
--navy-100: #E8EEF4;
|
||||
--navy-50: #F4F7FA;
|
||||
--gold-600: #B8881A;
|
||||
--gold-500: #D4A01E;
|
||||
--gold-400: #E5B635;
|
||||
--gold-300: #F0CC5E;
|
||||
--gold-100: #FDF5E0;
|
||||
--gold-50: #FEFBF0;
|
||||
--gray-900: #111827;
|
||||
--gray-700: #374151;
|
||||
--gray-500: #6B7280;
|
||||
--gray-400: #9CA3AF;
|
||||
--gray-300: #D1D5DB;
|
||||
--gray-200: #E5E7EB;
|
||||
--gray-100: #F3F4F6;
|
||||
--gray-50: #F9FAFB;
|
||||
--red-500: #DC2626;
|
||||
--red-50: #FEF2F2;
|
||||
--green-600: #15803D;
|
||||
--green-50: #F0FDF4;
|
||||
--blue-600: #2563EB;
|
||||
--blue-50: #EFF6FF;
|
||||
--amber-700: #854D0E;
|
||||
--sh-1: 0 1px 2px rgba(15, 36, 64, 0.04), 0 1px 3px rgba(15, 36, 64, 0.06);
|
||||
--sh-2: 0 4px 16px rgba(15, 36, 64, 0.07);
|
||||
--sh-3: 0 12px 32px rgba(15, 36, 64, 0.1);
|
||||
--sh-gold: 0 4px 20px rgba(212, 160, 30, 0.18);
|
||||
--sh-modal: 0 24px 70px rgba(10, 27, 48, 0.25);
|
||||
--r-sm: 6px;
|
||||
--r-md: 10px;
|
||||
--r-lg: 14px;
|
||||
}
|
||||
|
||||
.bread {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
font-size: 12px;
|
||||
color: #9CA3AF;
|
||||
margin-bottom: 14px;
|
||||
letter-spacing: 0.2px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.breadLink {
|
||||
color: #244B73;
|
||||
text-decoration: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.breadLink:hover {
|
||||
color: #B8881A;
|
||||
}
|
||||
|
||||
.sep {
|
||||
color: #E5B635;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.ph {
|
||||
background: linear-gradient(135deg, #0A1B30 0%, #1B3A5C 85%);
|
||||
border-radius: 14px;
|
||||
padding: 26px 30px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 4px 16px rgba(15, 36, 64, 0.07);
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
}
|
||||
.ph::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #D4A01E, transparent 60%);
|
||||
}
|
||||
.ph::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -60px;
|
||||
top: -60px;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(212, 160, 30, 0.14), transparent 65%);
|
||||
}
|
||||
|
||||
.phLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.phIcon {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 10px;
|
||||
background: rgba(212, 160, 30, 0.14);
|
||||
border: 1px solid rgba(212, 160, 30, 0.3);
|
||||
color: #F0CC5E;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.phSub {
|
||||
font-size: 10.5px;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.phTitle {
|
||||
font-family: "Lora", Georgia, serif;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-top: 3px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.phRight {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var tslib_1 = require("tslib");
|
||||
tslib_1.__exportStar(require("./Icon"), exports);
|
||||
tslib_1.__exportStar(require("./Button"), exports);
|
||||
tslib_1.__exportStar(require("./Badge"), exports);
|
||||
tslib_1.__exportStar(require("./Alert"), exports);
|
||||
tslib_1.__exportStar(require("./PageChrome"), exports);
|
||||
tslib_1.__exportStar(require("./Card"), exports);
|
||||
tslib_1.__exportStar(require("./DataTable"), exports);
|
||||
tslib_1.__exportStar(require("./Modal"), exports);
|
||||
tslib_1.__exportStar(require("./FormField"), exports);
|
||||
//# sourceMappingURL=index.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/webparts/approvalAdmin/components/ui/index.ts"],"names":[],"mappings":";;;AAAA,iDAAuB;AACvB,mDAAyB;AACzB,kDAAwB;AACxB,kDAAwB;AACxB,uDAA6B;AAC7B,iDAAuB;AACvB,sDAA4B;AAC5B,kDAAwB;AACxB,sDAA4B","sourcesContent":["export * from './Icon';\nexport * from './Button';\nexport * from './Badge';\nexport * from './Alert';\nexport * from './PageChrome';\nexport * from './Card';\nexport * from './DataTable';\nexport * from './Modal';\nexport * from './FormField';\n"]}
|
||||
Reference in New Issue
Block a user