@manuscripts/style-guide 1.1.19 → 1.2.1-LEAN-2669

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.
Files changed (20) hide show
  1. package/dist/cjs/components/EditorHeader/EditorHeader.js +6 -5
  2. package/dist/cjs/components/EditorHeader/ProceedView.js +3 -2
  3. package/dist/cjs/components/FileManager/FileSectionItem/FileInfo.js +25 -3
  4. package/dist/cjs/components/FileManager/FileSectionItem/FileSectionItem.js +1 -1
  5. package/dist/cjs/components/FileManager/InlineFilesSection.js +31 -6
  6. package/dist/cjs/components/SubmissionInspector/BaseInformation.js +1 -1
  7. package/dist/cjs/lib/capabilities.js +4 -3
  8. package/dist/es/components/EditorHeader/EditorHeader.js +6 -5
  9. package/dist/es/components/EditorHeader/ProceedView.js +3 -2
  10. package/dist/es/components/FileManager/FileSectionItem/FileInfo.js +24 -2
  11. package/dist/es/components/FileManager/FileSectionItem/FileSectionItem.js +1 -1
  12. package/dist/es/components/FileManager/InlineFilesSection.js +30 -5
  13. package/dist/es/components/SubmissionInspector/BaseInformation.js +1 -1
  14. package/dist/es/lib/capabilities.js +4 -3
  15. package/dist/types/components/EditorHeader/EditorHeader.d.ts +1 -0
  16. package/dist/types/components/EditorHeader/ProceedView.d.ts +1 -0
  17. package/dist/types/components/FileManager/FileSectionItem/FileInfo.d.ts +3 -0
  18. package/dist/types/components/FileManager/FileSectionItem/FileSectionItem.d.ts +1 -0
  19. package/dist/types/components/FileManager/InlineFilesSection.d.ts +2 -0
  20. package/package.json +3 -3
package/dist/cjs/components/EditorHeader/EditorHeader.js CHANGED
@@ -48,15 +48,16 @@ var DialogState;
48
48
  DialogState[DialogState["SUCCESS"] = 3] = "SUCCESS";
49
49
  DialogState[DialogState["CLOSED"] = 4] = "CLOSED";
50
50
  })(DialogState = exports.DialogState || (exports.DialogState = {}));
51
- const Editing = { label: 'Editing...', icon: __1.EditIcon };
51
+ const Editing = { label: 'Editing', icon: __1.EditIcon };
52
52
  const MapUserRole = {
53
53
  Editor: Editing,
54
54
  Owner: Editing,
55
55
  Writer: Editing,
56
- Annotator: { label: 'Suggesting...', icon: __1.AnnotatorIcon },
57
- Viewer: { label: 'Reading...', icon: __1.ReadingIcon },
56
+ Annotator: { label: 'Suggesting', icon: __1.AnnotatorIcon },
57
+ Viewer: { label: 'Reading', icon: __1.ReadingIcon },
58
+ Proofer: { label: 'Proofing', icon: __1.AnnotatorIcon },
58
59
  };
59
- const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
60
+ const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, isProofer, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
60
61
  var _a, _b, _c, _d, _e;
61
62
  const [confirmationDialog, toggleConfirmationDialog] = (0, react_1.useState)(false);
62
63
  const [noteValue, setNoteValue] = (0, react_1.useState)('');
@@ -104,7 +105,7 @@ const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userR
104
105
  react_1.default.createElement("span", null, "Dashboard"))),
105
106
  handleSnapshot &&
106
107
  typeof hasPendingSuggestions == 'boolean' &&
107
- submission.nextStep && (react_1.default.createElement(ProceedView_1.ProceedView, { isAnnotator: isAnnotator, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, dialogData: dialogData, noteValue: noteValue, currentStepTransition: currentStepTransition, currentStepType: submission.currentStep.type, previousStepType: (_e = submission.previousStep) === null || _e === void 0 ? void 0 : _e.type, nextStepType: submission.nextStep.type, confirmationDialog: confirmationDialog, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
108
+ submission.nextStep && (react_1.default.createElement(ProceedView_1.ProceedView, { isAnnotator: isAnnotator, isProofer: isProofer, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, dialogData: dialogData, noteValue: noteValue, currentStepTransition: currentStepTransition, currentStepType: submission.currentStep.type, previousStepType: (_e = submission.previousStep) === null || _e === void 0 ? void 0 : _e.type, nextStepType: submission.nextStep.type, confirmationDialog: confirmationDialog, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
108
109
  status && (react_1.default.createElement(ChildWrapper, null,
109
110
  react_1.default.createElement(__1.SaveStatus, { status: status }))),
110
111
  react_1.default.createElement(Spacer, null),
package/dist/cjs/components/EditorHeader/ProceedView.js CHANGED
@@ -46,8 +46,8 @@ const StepDetails = ({ icon, label, description, role }) => (react_1.default.cre
46
46
  react_1.default.createElement(__1.SecondarySmallText, null,
47
47
  "Actor: ",
48
48
  role.label))));
49
- const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialogData, confirmationDialog, previousStepType, currentStepType, isAnnotator, hasPendingSuggestions, onCancelClick, continueDialogAction, message: Message, }) => {
50
- const dialogMessages = (0, react_1.useMemo)(() => hasPendingSuggestions && !isAnnotator
49
+ const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialogData, confirmationDialog, previousStepType, currentStepType, isAnnotator, isProofer, hasPendingSuggestions, onCancelClick, continueDialogAction, message: Message, }) => {
50
+ const dialogMessages = (0, react_1.useMemo)(() => hasPendingSuggestions && !isAnnotator && !isProofer
51
51
  ? {
52
52
  header: 'The task can not be transitioned to the next step',
53
53
  message: `There are still pending suggestions in the document.
@@ -90,6 +90,7 @@ const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialog
90
90
  currentStepType,
91
91
  hasPendingSuggestions,
92
92
  isAnnotator,
93
+ isProofer,
93
94
  ]);
94
95
  return (react_1.default.createElement(react_1.default.Fragment, null,
95
96
  (currentStepTransition && (currentStepTransition === null || currentStepTransition === void 0 ? void 0 : currentStepTransition.length) > 1 && (react_1.default.createElement(DropdownWrapper, { button: 'Complete task', disabled: disable, primary: true },
package/dist/cjs/components/FileManager/FileSectionItem/FileInfo.js CHANGED
@@ -26,11 +26,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.FileDescription = exports.FileName = exports.FileNameContainer = exports.FileTitle = exports.FileNameTitleContainer = exports.FileInfoContainer = exports.FileInfo = void 0;
29
+ exports.FileDescription = exports.FileDate = exports.FileName = exports.FileNameContainer = exports.FileTitle = exports.FileNameTitleContainer = exports.FileInfoContainer = exports.FileDateContainer = exports.FileInfo = void 0;
30
+ const date_fns_1 = require("date-fns");
30
31
  const react_1 = __importStar(require("react"));
32
+ const react_tooltip_1 = __importDefault(require("react-tooltip"));
31
33
  const styled_components_1 = __importDefault(require("styled-components"));
32
34
  const FileManager_1 = require("../FileManager");
33
- const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, }) => {
35
+ const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, fileCreatedDate, }) => {
34
36
  const fileName = fileAttachmentName.substring(0, fileAttachmentName.lastIndexOf('.'));
35
37
  const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
36
38
  return (react_1.default.createElement(exports.FileInfoContainer, null,
@@ -42,9 +44,20 @@ const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension
42
44
  react_1.default.createElement(exports.FileName, null, fileName),
43
45
  react_1.default.createElement("div", null,
44
46
  ".",
45
- fileExtension))))));
47
+ fileExtension))),
48
+ fileCreatedDate && (react_1.default.createElement(exports.FileDateContainer, { "data-tip": "tooltip-content" },
49
+ react_1.default.createElement(exports.FileDate, null, (0, date_fns_1.format)(new Date(fileCreatedDate), 'M/d/yy, HH:mm')),
50
+ react_1.default.createElement(react_tooltip_1.default, { place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, "File Uploaded"))))));
46
51
  };
47
52
  exports.FileInfo = FileInfo;
53
+ exports.FileDateContainer = styled_components_1.default.div `
54
+ line-height: 20px;
55
+ overflow: hidden;
56
+ width: 100%;
57
+ display: none;
58
+ display: flex;
59
+ justify-content: flex-end;
60
+ `;
48
61
  exports.FileInfoContainer = styled_components_1.default.div `
49
62
  margin-left: 8px;
50
63
  overflow: hidden;
@@ -53,10 +66,15 @@ exports.FileInfoContainer = styled_components_1.default.div `
53
66
  justify-content: center;
54
67
  align-items: start;
55
68
  width: 100%;
69
+
70
+ &:hover ${exports.FileDateContainer} {
71
+ display: flex;
72
+ }
56
73
  `;
57
74
  exports.FileNameTitleContainer = styled_components_1.default.div `
58
75
  display: flex;
59
76
  width: 100%;
77
+ align-items: baseline;
60
78
  `;
61
79
  exports.FileTitle = styled_components_1.default.div `
62
80
  color: ${(props) => props.theme.colors.text.primary};
@@ -79,6 +97,10 @@ exports.FileName = styled_components_1.default.div `
79
97
  text-overflow: ellipsis;
80
98
  white-space: nowrap;
81
99
  overflow: hidden;
100
+ width: 50px;
101
+ `;
102
+ exports.FileDate = styled_components_1.default.div `
103
+ font-size: font-size: ${(props) => props.theme.font.size.small};
82
104
  `;
83
105
  exports.FileDescription = styled_components_1.default.div `
84
106
  color: ${(props) => props.theme.colors.text.secondary};
package/dist/cjs/components/FileManager/FileSectionItem/FileSectionItem.js CHANGED
@@ -27,7 +27,7 @@ const FileSectionItem = ({ fileSection, externalFile, title, showAttachmentName
27
27
  }
28
28
  } },
29
29
  react_1.default.createElement(FileTypeIcon_1.FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.name }),
30
- react_1.default.createElement(FileInfo_1.FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
30
+ react_1.default.createElement(FileInfo_1.FileInfo, { fileExtension: fileExtension, fileCreatedDate: externalFile.createdDate, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
31
31
  onClose && (react_1.default.createElement(IconCloseButton, { onClick: (e) => {
32
32
  e.preventDefault();
33
33
  onClose();
package/dist/cjs/components/FileManager/InlineFilesSection.js CHANGED
@@ -26,8 +26,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.InlineFilesSection = void 0;
29
+ exports.FileDate = exports.FileDateContainer = exports.InlineFilesSection = void 0;
30
+ const date_fns_1 = require("date-fns");
30
31
  const react_1 = __importStar(require("react"));
32
+ const react_tooltip_1 = __importDefault(require("react-tooltip"));
31
33
  const styled_components_1 = __importDefault(require("styled-components"));
32
34
  const use_dropdown_1 = require("../../hooks/use-dropdown");
33
35
  const dots_icon_1 = __importDefault(require("../icons/dots-icon"));
@@ -52,7 +54,8 @@ const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline,
52
54
  return (react_1.default.createElement("div", null, inlineFiles.map((file, index) => {
53
55
  var _a;
54
56
  return (react_1.default.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
55
- react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (react_1.default.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch })))),
57
+ react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (react_1.default.createElement(react_1.default.Fragment, null,
58
+ react_1.default.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch }))))),
56
59
  react_1.default.createElement(Element, { className: 'element' },
57
60
  util_1.fileTypesWithIconMap.get(file.type),
58
61
  react_1.default.createElement(FileInfo_1.FileInfoContainer, null,
@@ -71,6 +74,9 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
71
74
  react_1.default.createElement(Container, null,
72
75
  util_1.fileTypesWithIconMap.get(util_1.extensionsWithFileTypesMap.get(fileExtension)),
73
76
  react_1.default.createElement(FileReferenceName, null, attachment.name)),
77
+ attachment.createdDate && (react_1.default.createElement(exports.FileDateContainer, { "data-tip": "tooltip-content" },
78
+ react_1.default.createElement(exports.FileDate, null, (0, date_fns_1.format)(new Date(attachment.createdDate), 'M/d/yy, HH:mm')),
79
+ react_1.default.createElement(react_tooltip_1.default, { place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, "File Uploaded"))),
74
80
  handleDownload && handleReplace && (react_1.default.createElement(DropdownContainer, { ref: wrapperRef },
75
81
  react_1.default.createElement(FileSectionItem_1.ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace or Detach", "aria-pressed": isOpen },
76
82
  react_1.default.createElement(dots_icon_1.default, null)),
@@ -80,6 +86,12 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
80
86
  attachment.modelId &&
81
87
  handleDetachFile(attachment.id, attachment.modelId), downloadAttachmentHandler: handleDownload, attachmentId: attachment.id, fileName: attachment.name, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
82
88
  };
89
+ exports.FileDateContainer = styled_components_1.default.div `
90
+ overflow: hidden;
91
+ display: none;
92
+ width: 100%;
93
+ justify-content: flex-end;
94
+ `;
83
95
  const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
84
96
  display: flex;
85
97
  // this will allow us to select the previous sibling node,
@@ -94,6 +106,9 @@ const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
94
106
  .refItems:hover ~ .element {
95
107
  background: white !important;
96
108
  }
109
+ &:hover ${exports.FileDateContainer} {
110
+ display: flex;
111
+ }
97
112
 
98
113
  .refItems:hover {
99
114
  background: white !important;
@@ -107,18 +122,24 @@ const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
107
122
  `;
108
123
  const Container = styled_components_1.default.div `
109
124
  display: flex;
125
+ width: 100%;
110
126
  `;
111
127
  const Element = styled_components_1.default.div `
112
128
  display: flex;
113
129
  padding: 20px 15px;
114
130
  `;
115
- const FileReferences = styled_components_1.default.div ``;
116
- const FileReferenceItem = styled_components_1.default.div `
131
+ const FileReferences = styled_components_1.default.div `
117
132
  display: flex;
118
133
  align-items: center;
119
134
  justify-content: space-between;
120
-
121
- svg {
135
+ width: 100%;
136
+ `;
137
+ const FileReferenceItem = styled_components_1.default.div `
138
+ display: flex;
139
+ width: 100%;
140
+ align-items: space;
141
+ justify-content: space-between;
142
+ width: 100% svg {
122
143
  width: 14px;
123
144
  height: 17px;
124
145
  }
@@ -161,3 +182,7 @@ const FileReferenceName = styled_components_1.default.div `
161
182
  const DropdownContainer = styled_components_1.default.div `
162
183
  position: relative;
163
184
  `;
185
+ exports.FileDate = styled_components_1.default.div `
186
+ font-size: ${(props) => props.theme.font.size.small};
187
+ line-height: 27px;
188
+ `;
package/dist/cjs/components/SubmissionInspector/BaseInformation.js CHANGED
@@ -260,7 +260,7 @@ const UpdatedDueDate = styled_components_1.default.div `
260
260
  box-sizing: border-box;
261
261
  border-radius: ${(props) => props.theme.grid.unit}px;
262
262
  padding: ${(props) => props.theme.grid.unit}px
263
- ${(props) => props.theme.grid.unit * 2}px; ;
263
+ ${(props) => props.theme.grid.unit * 2}px;
264
264
  `;
265
265
  const DueDateMessage = (0, styled_components_1.default)(Dialog_1.MessageContainer) `
266
266
  min-height: min-content;
package/dist/cjs/lib/capabilities.js CHANGED
@@ -17,6 +17,7 @@ const getCapabilities = (project, profile, role, actions) => {
17
17
  const isOwner = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.owners) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
18
18
  const isWriter = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.writers) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
19
19
  const isAnnotator = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.annotators) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
20
+ const isProofer = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.proofers) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
20
21
  const isViewer = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.viewers) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
21
22
  const isProdEditor = () => role == 'pe';
22
23
  const allowed = (action) => !!(actions === null || actions === void 0 ? void 0 : actions.includes(action));
@@ -30,7 +31,7 @@ const getCapabilities = (project, profile, role, actions) => {
30
31
  handleOwnComments: !isViewer(),
31
32
  handleOthersComments: isOwner(),
32
33
  resolveOwnComment: !isViewer(),
33
- resolveOthersComment: !(isViewer() || isAnnotator()),
34
+ resolveOthersComment: !(isViewer() || isAnnotator() || isProofer()),
34
35
  createComment: !isViewer(),
35
36
  viewNotes: true,
36
37
  createNotes: !isViewer() && allowed(Actions.addNote),
@@ -55,8 +56,8 @@ const getCapabilities = (project, profile, role, actions) => {
55
56
  accessEditor: true,
56
57
  formatArticle: !isViewer(),
57
58
  editArticle: !isViewer(),
58
- editMetadata: !(isViewer() || isAnnotator()),
59
- editCitationsAndRefs: !(isViewer() || isAnnotator()),
59
+ editMetadata: !(isViewer() || isAnnotator() || isProofer()),
60
+ editCitationsAndRefs: !(isViewer() || isAnnotator() || isProofer()),
60
61
  shareProject: isOwner(),
61
62
  };
62
63
  };
package/dist/es/components/EditorHeader/EditorHeader.js CHANGED
@@ -19,15 +19,16 @@ export var DialogState;
19
19
  DialogState[DialogState["SUCCESS"] = 3] = "SUCCESS";
20
20
  DialogState[DialogState["CLOSED"] = 4] = "CLOSED";
21
21
  })(DialogState || (DialogState = {}));
22
- const Editing = { label: 'Editing...', icon: EditIcon };
22
+ const Editing = { label: 'Editing', icon: EditIcon };
23
23
  const MapUserRole = {
24
24
  Editor: Editing,
25
25
  Owner: Editing,
26
26
  Writer: Editing,
27
- Annotator: { label: 'Suggesting...', icon: AnnotatorIcon },
28
- Viewer: { label: 'Reading...', icon: ReadingIcon },
27
+ Annotator: { label: 'Suggesting', icon: AnnotatorIcon },
28
+ Viewer: { label: 'Reading', icon: ReadingIcon },
29
+ Proofer: { label: 'Proofing', icon: AnnotatorIcon },
29
30
  };
30
- export const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
31
+ export const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, isProofer, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
31
32
  var _a, _b, _c, _d, _e;
32
33
  const [confirmationDialog, toggleConfirmationDialog] = useState(false);
33
34
  const [noteValue, setNoteValue] = useState('');
@@ -75,7 +76,7 @@ export const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions
75
76
  React.createElement("span", null, "Dashboard"))),
76
77
  handleSnapshot &&
77
78
  typeof hasPendingSuggestions == 'boolean' &&
78
- submission.nextStep && (React.createElement(ProceedView, { isAnnotator: isAnnotator, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, dialogData: dialogData, noteValue: noteValue, currentStepTransition: currentStepTransition, currentStepType: submission.currentStep.type, previousStepType: (_e = submission.previousStep) === null || _e === void 0 ? void 0 : _e.type, nextStepType: submission.nextStep.type, confirmationDialog: confirmationDialog, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
79
+ submission.nextStep && (React.createElement(ProceedView, { isAnnotator: isAnnotator, isProofer: isProofer, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, dialogData: dialogData, noteValue: noteValue, currentStepTransition: currentStepTransition, currentStepType: submission.currentStep.type, previousStepType: (_e = submission.previousStep) === null || _e === void 0 ? void 0 : _e.type, nextStepType: submission.nextStep.type, confirmationDialog: confirmationDialog, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
79
80
  status && (React.createElement(ChildWrapper, null,
80
81
  React.createElement(SaveStatus, { status: status }))),
81
82
  React.createElement(Spacer, null),
package/dist/es/components/EditorHeader/ProceedView.js CHANGED
@@ -17,8 +17,8 @@ const StepDetails = ({ icon, label, description, role }) => (React.createElement
17
17
  React.createElement(SecondarySmallText, null,
18
18
  "Actor: ",
19
19
  role.label))));
20
- export const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialogData, confirmationDialog, previousStepType, currentStepType, isAnnotator, hasPendingSuggestions, onCancelClick, continueDialogAction, message: Message, }) => {
21
- const dialogMessages = useMemo(() => hasPendingSuggestions && !isAnnotator
20
+ export const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialogData, confirmationDialog, previousStepType, currentStepType, isAnnotator, isProofer, hasPendingSuggestions, onCancelClick, continueDialogAction, message: Message, }) => {
21
+ const dialogMessages = useMemo(() => hasPendingSuggestions && !isAnnotator && !isProofer
22
22
  ? {
23
23
  header: 'The task can not be transitioned to the next step',
24
24
  message: `There are still pending suggestions in the document.
@@ -61,6 +61,7 @@ export const ProceedView = ({ currentStepTransition, onTransitionClick, disable,
61
61
  currentStepType,
62
62
  hasPendingSuggestions,
63
63
  isAnnotator,
64
+ isProofer,
64
65
  ]);
65
66
  return (React.createElement(React.Fragment, null,
66
67
  (currentStepTransition && (currentStepTransition === null || currentStepTransition === void 0 ? void 0 : currentStepTransition.length) > 1 && (React.createElement(DropdownWrapper, { button: 'Complete task', disabled: disable, primary: true },
package/dist/es/components/FileManager/FileSectionItem/FileInfo.js CHANGED
@@ -1,7 +1,9 @@
1
+ import { format } from 'date-fns';
1
2
  import React, { useContext } from 'react';
3
+ import ReactTooltip from 'react-tooltip';
2
4
  import styled from 'styled-components';
3
5
  import { PermissionsContext } from '../FileManager';
4
- export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, }) => {
6
+ export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, fileCreatedDate, }) => {
5
7
  const fileName = fileAttachmentName.substring(0, fileAttachmentName.lastIndexOf('.'));
6
8
  const can = useContext(PermissionsContext);
7
9
  return (React.createElement(FileInfoContainer, null,
@@ -13,8 +15,19 @@ export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileEx
13
15
  React.createElement(FileName, null, fileName),
14
16
  React.createElement("div", null,
15
17
  ".",
16
- fileExtension))))));
18
+ fileExtension))),
19
+ fileCreatedDate && (React.createElement(FileDateContainer, { "data-tip": "tooltip-content" },
20
+ React.createElement(FileDate, null, format(new Date(fileCreatedDate), 'M/d/yy, HH:mm')),
21
+ React.createElement(ReactTooltip, { place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, "File Uploaded"))))));
17
22
  };
23
+ export const FileDateContainer = styled.div `
24
+ line-height: 20px;
25
+ overflow: hidden;
26
+ width: 100%;
27
+ display: none;
28
+ display: flex;
29
+ justify-content: flex-end;
30
+ `;
18
31
  export const FileInfoContainer = styled.div `
19
32
  margin-left: 8px;
20
33
  overflow: hidden;
@@ -23,10 +36,15 @@ export const FileInfoContainer = styled.div `
23
36
  justify-content: center;
24
37
  align-items: start;
25
38
  width: 100%;
39
+
40
+ &:hover ${FileDateContainer} {
41
+ display: flex;
42
+ }
26
43
  `;
27
44
  export const FileNameTitleContainer = styled.div `
28
45
  display: flex;
29
46
  width: 100%;
47
+ align-items: baseline;
30
48
  `;
31
49
  export const FileTitle = styled.div `
32
50
  color: ${(props) => props.theme.colors.text.primary};
@@ -49,6 +67,10 @@ export const FileName = styled.div `
49
67
  text-overflow: ellipsis;
50
68
  white-space: nowrap;
51
69
  overflow: hidden;
70
+ width: 50px;
71
+ `;
72
+ export const FileDate = styled.div `
73
+ font-size: font-size: ${(props) => props.theme.font.size.small};
52
74
  `;
53
75
  export const FileDescription = styled.div `
54
76
  color: ${(props) => props.theme.colors.text.secondary};
package/dist/es/components/FileManager/FileSectionItem/FileSectionItem.js CHANGED
@@ -21,7 +21,7 @@ export const FileSectionItem = ({ fileSection, externalFile, title, showAttachme
21
21
  }
22
22
  } },
23
23
  React.createElement(FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.name }),
24
- React.createElement(FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
24
+ React.createElement(FileInfo, { fileExtension: fileExtension, fileCreatedDate: externalFile.createdDate, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
25
25
  onClose && (React.createElement(IconCloseButton, { onClick: (e) => {
26
26
  e.preventDefault();
27
27
  onClose();
package/dist/es/components/FileManager/InlineFilesSection.js CHANGED
@@ -1,4 +1,6 @@
1
+ import { format } from 'date-fns';
1
2
  import React, { useCallback } from 'react';
3
+ import ReactTooltip from 'react-tooltip';
2
4
  import styled from 'styled-components';
3
5
  import { useDropdown } from '../../hooks/use-dropdown';
4
6
  import DotsIcon from '../icons/dots-icon';
@@ -23,7 +25,8 @@ export const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdate
23
25
  return (React.createElement("div", null, inlineFiles.map((file, index) => {
24
26
  var _a;
25
27
  return (React.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
26
- React.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (React.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch })))),
28
+ React.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (React.createElement(React.Fragment, null,
29
+ React.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch }))))),
27
30
  React.createElement(Element, { className: 'element' },
28
31
  fileTypesWithIconMap.get(file.type),
29
32
  React.createElement(FileInfoContainer, null,
@@ -41,6 +44,9 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
41
44
  React.createElement(Container, null,
42
45
  fileTypesWithIconMap.get(extensionsWithFileTypesMap.get(fileExtension)),
43
46
  React.createElement(FileReferenceName, null, attachment.name)),
47
+ attachment.createdDate && (React.createElement(FileDateContainer, { "data-tip": "tooltip-content" },
48
+ React.createElement(FileDate, null, format(new Date(attachment.createdDate), 'M/d/yy, HH:mm')),
49
+ React.createElement(ReactTooltip, { place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, "File Uploaded"))),
44
50
  handleDownload && handleReplace && (React.createElement(DropdownContainer, { ref: wrapperRef },
45
51
  React.createElement(ActionsIcon, { onClick: toggleOpen, type: "button", className: 'external_file_dropdown', "aria-label": "Download or Replace or Detach", "aria-pressed": isOpen },
46
52
  React.createElement(DotsIcon, null)),
@@ -50,6 +56,12 @@ const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdate
50
56
  attachment.modelId &&
51
57
  handleDetachFile(attachment.id, attachment.modelId), downloadAttachmentHandler: handleDownload, attachmentId: attachment.id, fileName: attachment.name, publicUrl: attachment.link, hideActionList: toggleOpen, dispatch: dispatch, dropDownClassName: 'ref_item_dropdown' }))))));
52
58
  };
59
+ export const FileDateContainer = styled.div `
60
+ overflow: hidden;
61
+ display: none;
62
+ width: 100%;
63
+ justify-content: flex-end;
64
+ `;
53
65
  const ElementItem = styled(Item) `
54
66
  display: flex;
55
67
  // this will allow us to select the previous sibling node,
@@ -64,6 +76,9 @@ const ElementItem = styled(Item) `
64
76
  .refItems:hover ~ .element {
65
77
  background: white !important;
66
78
  }
79
+ &:hover ${FileDateContainer} {
80
+ display: flex;
81
+ }
67
82
 
68
83
  .refItems:hover {
69
84
  background: white !important;
@@ -77,18 +92,24 @@ const ElementItem = styled(Item) `
77
92
  `;
78
93
  const Container = styled.div `
79
94
  display: flex;
95
+ width: 100%;
80
96
  `;
81
97
  const Element = styled.div `
82
98
  display: flex;
83
99
  padding: 20px 15px;
84
100
  `;
85
- const FileReferences = styled.div ``;
86
- const FileReferenceItem = styled.div `
101
+ const FileReferences = styled.div `
87
102
  display: flex;
88
103
  align-items: center;
89
104
  justify-content: space-between;
90
-
91
- svg {
105
+ width: 100%;
106
+ `;
107
+ const FileReferenceItem = styled.div `
108
+ display: flex;
109
+ width: 100%;
110
+ align-items: space;
111
+ justify-content: space-between;
112
+ width: 100% svg {
92
113
  width: 14px;
93
114
  height: 17px;
94
115
  }
@@ -131,3 +152,7 @@ const FileReferenceName = styled.div `
131
152
  const DropdownContainer = styled.div `
132
153
  position: relative;
133
154
  `;
155
+ export const FileDate = styled.div `
156
+ font-size: ${(props) => props.theme.font.size.small};
157
+ line-height: 27px;
158
+ `;
package/dist/es/components/SubmissionInspector/BaseInformation.js CHANGED
@@ -230,7 +230,7 @@ const UpdatedDueDate = styled.div `
230
230
  box-sizing: border-box;
231
231
  border-radius: ${(props) => props.theme.grid.unit}px;
232
232
  padding: ${(props) => props.theme.grid.unit}px
233
- ${(props) => props.theme.grid.unit * 2}px; ;
233
+ ${(props) => props.theme.grid.unit * 2}px;
234
234
  `;
235
235
  const DueDateMessage = styled(MessageContainer) `
236
236
  min-height: min-content;
package/dist/es/lib/capabilities.js CHANGED
@@ -11,6 +11,7 @@ export const getCapabilities = (project, profile, role, actions) => {
11
11
  const isOwner = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.owners) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
12
12
  const isWriter = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.writers) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
13
13
  const isAnnotator = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.annotators) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
14
+ const isProofer = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.proofers) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
14
15
  const isViewer = () => { var _a; return !!(profile && ((_a = project === null || project === void 0 ? void 0 : project.viewers) === null || _a === void 0 ? void 0 : _a.includes(profile.userID))); };
15
16
  const isProdEditor = () => role == 'pe';
16
17
  const allowed = (action) => !!(actions === null || actions === void 0 ? void 0 : actions.includes(action));
@@ -24,7 +25,7 @@ export const getCapabilities = (project, profile, role, actions) => {
24
25
  handleOwnComments: !isViewer(),
25
26
  handleOthersComments: isOwner(),
26
27
  resolveOwnComment: !isViewer(),
27
- resolveOthersComment: !(isViewer() || isAnnotator()),
28
+ resolveOthersComment: !(isViewer() || isAnnotator() || isProofer()),
28
29
  createComment: !isViewer(),
29
30
  viewNotes: true,
30
31
  createNotes: !isViewer() && allowed(Actions.addNote),
@@ -49,8 +50,8 @@ export const getCapabilities = (project, profile, role, actions) => {
49
50
  accessEditor: true,
50
51
  formatArticle: !isViewer(),
51
52
  editArticle: !isViewer(),
52
- editMetadata: !(isViewer() || isAnnotator()),
53
- editCitationsAndRefs: !(isViewer() || isAnnotator()),
53
+ editMetadata: !(isViewer() || isAnnotator() || isProofer()),
54
+ editCitationsAndRefs: !(isViewer() || isAnnotator() || isProofer()),
54
55
  shareProject: isOwner(),
55
56
  };
56
57
  };
package/dist/types/components/EditorHeader/EditorHeader.d.ts CHANGED
@@ -56,6 +56,7 @@ export declare const EditorHeader: React.FC<{
56
56
  goBack?: () => void;
57
57
  status?: 'saved' | 'saving' | 'offline' | 'failed';
58
58
  isAnnotator: boolean;
59
+ isProofer: boolean;
59
60
  message: React.FC;
60
61
  disabelProceedNote?: boolean;
61
62
  }>;
package/dist/types/components/EditorHeader/ProceedView.d.ts CHANGED
@@ -3,6 +3,7 @@ import { ProceedDialogData } from '../..';
3
3
  import { SubmissionStepTransition, SubmissionStepType } from './EditorHeader';
4
4
  export declare const ProceedView: React.FC<{
5
5
  isAnnotator: boolean;
6
+ isProofer: boolean;
6
7
  disable: boolean;
7
8
  onTransitionClick: (event: unknown) => void;
8
9
  onNoteChange?: (event: unknown) => void;
package/dist/types/components/FileManager/FileSectionItem/FileInfo.d.ts CHANGED
@@ -6,11 +6,14 @@ export declare const FileInfo: React.FC<{
6
6
  fileAttachmentName: string;
7
7
  fileExtension: string;
8
8
  attachmentId: string;
9
+ fileCreatedDate: Date;
9
10
  dispatch?: Dispatch<Action>;
10
11
  }>;
12
+ export declare const FileDateContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
11
13
  export declare const FileInfoContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
12
14
  export declare const FileNameTitleContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
13
15
  export declare const FileTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
14
16
  export declare const FileNameContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
15
17
  export declare const FileName: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
18
+ export declare const FileDate: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
16
19
  export declare const FileDescription: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/dist/types/components/FileManager/FileSectionItem/FileSectionItem.d.ts CHANGED
@@ -9,6 +9,7 @@ export type FileAttachment = {
9
9
  name: string;
10
10
  type: FileAttachmentType;
11
11
  link: string;
12
+ createdDate: Date;
12
13
  };
13
14
  export type FileAttachmentType = {
14
15
  id: string;
package/dist/types/components/FileManager/InlineFilesSection.d.ts CHANGED
@@ -18,3 +18,5 @@ export declare const InlineFilesSection: React.FC<{
18
18
  isEditor: boolean;
19
19
  dispatch: Dispatch<Action>;
20
20
  }>;
21
+ export declare const FileDateContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
22
+ export declare const FileDate: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/style-guide",
3
3
  "description": "Shared components for Manuscripts applications",
4
- "version": "1.1.19",
4
+ "version": "1.2.1-LEAN-2669",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",
@@ -36,8 +36,8 @@
36
36
  "@formatjs/intl-relativetimeformat": "^4.5.9",
37
37
  "@formatjs/intl-utils": "^2.2.0",
38
38
  "@manuscripts/assets": "^0.6.2",
39
- "@manuscripts/transform": "^1.3.10",
40
- "@manuscripts/json-schema": "^2.1.0",
39
+ "@manuscripts/transform": "^1.3.11",
40
+ "@manuscripts/json-schema": "^2.1.1",
41
41
  "@manuscripts/title-editor": "^1.1.0",
42
42
  "@manuscripts/comment-editor": "^1.0.3",
43
43
  "@reach/tabs": "^0.11.2",