@manuscripts/style-guide 1.1.16-LEAN-2669-v5 → 1.1.16-LEAN-2669-v7

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.
@@ -44,8 +44,7 @@ const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension
44
44
  ".",
45
45
  fileExtension))),
46
46
  fileCreatedDate && (react_1.default.createElement(exports.FileDateContainer, null,
47
- react_1.default.createElement(exports.FileDate, null, fileCreatedDate)))),
48
- ' '));
47
+ react_1.default.createElement(exports.FileDate, null, fileCreatedDate))))));
49
48
  };
50
49
  exports.FileInfo = FileInfo;
51
50
  exports.FileDateContainer = styled_components_1.default.div `
@@ -26,7 +26,7 @@ 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
30
  const react_1 = __importStar(require("react"));
31
31
  const styled_components_1 = __importDefault(require("styled-components"));
32
32
  const use_dropdown_1 = require("../../hooks/use-dropdown");
@@ -50,15 +50,17 @@ const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline,
50
50
  }
51
51
  }, [isEditor]);
52
52
  return (react_1.default.createElement("div", null, inlineFiles.map((file, index) => {
53
- var _a, _b;
53
+ var _a;
54
54
  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 })))),
55
+ 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,
56
+ 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(exports.FileDateContainer, null,
58
+ react_1.default.createElement(exports.FileDate, null, attachment.createdDate)))))),
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,
59
62
  react_1.default.createElement(FileInfo_1.FileNameTitleContainer, null,
60
- react_1.default.createElement(FileInfo_1.FileTitle, null, file.label)), (_b = file.attachments) === null || _b === void 0 ? void 0 :
61
- _b.map((attachment) => (react_1.default.createElement("div", { key: attachment.id }, attachment.createdDate)))))));
63
+ react_1.default.createElement(FileInfo_1.FileTitle, null, file.label))))));
62
64
  })));
63
65
  };
64
66
  exports.InlineFilesSection = InlineFilesSection;
@@ -109,17 +111,30 @@ const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
109
111
  const Container = styled_components_1.default.div `
110
112
  display: flex;
111
113
  `;
114
+ exports.FileDateContainer = styled_components_1.default.div `
115
+ line-height: 40px;
116
+ overflow: hidden;
117
+ display: none;
118
+ `;
112
119
  const Element = styled_components_1.default.div `
113
120
  display: flex;
114
121
  padding: 20px 15px;
122
+
123
+ &:hover ${exports.FileDateContainer} {
124
+ display: flex;
125
+ }
126
+ `;
127
+ const FileReferences = styled_components_1.default.div `
128
+ display: flex;
129
+ align-items: center;
130
+ justify-content: space-between;
131
+ width: 100%;
115
132
  `;
116
- const FileReferences = styled_components_1.default.div ``;
117
133
  const FileReferenceItem = styled_components_1.default.div `
118
134
  display: flex;
119
135
  align-items: center;
120
136
  justify-content: space-between;
121
-
122
- svg {
137
+ width: 100% svg {
123
138
  width: 14px;
124
139
  height: 17px;
125
140
  }
@@ -162,3 +177,7 @@ const FileReferenceName = styled_components_1.default.div `
162
177
  const DropdownContainer = styled_components_1.default.div `
163
178
  position: relative;
164
179
  `;
180
+ exports.FileDate = styled_components_1.default.div `
181
+ color: '#6E6E6E';
182
+ font-size: 12px;
183
+ `;
@@ -15,8 +15,7 @@ export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileEx
15
15
  ".",
16
16
  fileExtension))),
17
17
  fileCreatedDate && (React.createElement(FileDateContainer, null,
18
- React.createElement(FileDate, null, fileCreatedDate)))),
19
- ' '));
18
+ React.createElement(FileDate, null, fileCreatedDate))))));
20
19
  };
21
20
  export const FileDateContainer = styled.div `
22
21
  line-height: 20px;
@@ -21,15 +21,17 @@ export const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdate
21
21
  }
22
22
  }, [isEditor]);
23
23
  return (React.createElement("div", null, inlineFiles.map((file, index) => {
24
- var _a, _b;
24
+ var _a;
25
25
  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 })))),
26
+ React.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (React.createElement(React.Fragment, null,
27
+ React.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch }),
28
+ React.createElement(FileDateContainer, null,
29
+ React.createElement(FileDate, null, attachment.createdDate)))))),
27
30
  React.createElement(Element, { className: 'element' },
28
31
  fileTypesWithIconMap.get(file.type),
29
32
  React.createElement(FileInfoContainer, null,
30
33
  React.createElement(FileNameTitleContainer, null,
31
- React.createElement(FileTitle, null, file.label)), (_b = file.attachments) === null || _b === void 0 ? void 0 :
32
- _b.map((attachment) => (React.createElement("div", { key: attachment.id }, attachment.createdDate)))))));
34
+ React.createElement(FileTitle, null, file.label))))));
33
35
  })));
34
36
  };
35
37
  const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdateInline, handleDetachFile, dispatch, }) => {
@@ -79,17 +81,30 @@ const ElementItem = styled(Item) `
79
81
  const Container = styled.div `
80
82
  display: flex;
81
83
  `;
84
+ export const FileDateContainer = styled.div `
85
+ line-height: 40px;
86
+ overflow: hidden;
87
+ display: none;
88
+ `;
82
89
  const Element = styled.div `
83
90
  display: flex;
84
91
  padding: 20px 15px;
92
+
93
+ &:hover ${FileDateContainer} {
94
+ display: flex;
95
+ }
96
+ `;
97
+ const FileReferences = styled.div `
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: space-between;
101
+ width: 100%;
85
102
  `;
86
- const FileReferences = styled.div ``;
87
103
  const FileReferenceItem = styled.div `
88
104
  display: flex;
89
105
  align-items: center;
90
106
  justify-content: space-between;
91
-
92
- svg {
107
+ width: 100% svg {
93
108
  width: 14px;
94
109
  height: 17px;
95
110
  }
@@ -132,3 +147,7 @@ const FileReferenceName = styled.div `
132
147
  const DropdownContainer = styled.div `
133
148
  position: relative;
134
149
  `;
150
+ export const FileDate = styled.div `
151
+ color: '#6E6E6E';
152
+ font-size: 12px;
153
+ `;
@@ -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.16-LEAN-2669-v5",
4
+ "version": "1.1.16-LEAN-2669-v7",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",