@eeacms/volto-eea-website-theme 1.9.2 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +42 -11
  2. package/package.json +4 -3
  3. package/src/customizations/volto/components/manage/Blocks/Image/Edit.jsx +143 -124
  4. package/src/customizations/volto/components/manage/Blocks/Image/View.jsx +119 -76
  5. package/src/customizations/volto/components/manage/Blocks/Image/schema.js +11 -6
  6. package/src/customizations/volto/components/manage/Blocks/LeadImage/Edit.jsx +36 -33
  7. package/src/customizations/volto/components/manage/Blocks/LeadImage/LeadImageSidebar.jsx +20 -229
  8. package/src/customizations/volto/components/manage/Blocks/LeadImage/View.jsx +81 -51
  9. package/src/customizations/volto/components/manage/Blocks/LeadImage/schema.js +105 -0
  10. package/src/hocs/withDeviceSize.jsx +45 -0
  11. package/src/index.js +4 -1
  12. package/src/middleware/ok.js +15 -0
  13. package/src/customizations/volto/components/manage/Blocks/Image/style.less +0 -12
  14. package/src/customizations/volto/components/manage/Blocks/LeadImage/style.less +0 -12
package/CHANGELOG.md CHANGED
@@ -4,6 +4,48 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
+ ### [1.10.0](https://github.com/eea/volto-eea-website-theme/compare/1.9.3...1.10.0) - 10 March 2023
8
+
9
+ #### :nail_care: Enhancements
10
+
11
+ - change(copyright): improvements to the position and the image size #92 from eea/better-copyright-align [ichim-david - [`14e41e0`](https://github.com/eea/volto-eea-website-theme/commit/14e41e0c2f848cedafb60eb8e5f67b134fff4f71)]
12
+ - change(image): use great scale by default, huge for full width [David Ichim - [`beec7b7`](https://github.com/eea/volto-eea-website-theme/commit/beec7b709cbf3f2c519ac639c617cb7525d8f400)]
13
+ - change(copyright): changed hidden class usage to hiddenStructure [David Ichim - [`a6cdb22`](https://github.com/eea/volto-eea-website-theme/commit/a6cdb2202b0573dad7e3c60cb16b3f01d91e1955)]
14
+ - change(copyright): renamed copyright-image to copyright-wrapper [David Ichim - [`015d2e8`](https://github.com/eea/volto-eea-website-theme/commit/015d2e8c6183bd2f583db3d9f75a347281a19de2)]
15
+ - change(copyright): removed style.less imports and avoid removal of copyright hover from dom [David Ichim - [`8647979`](https://github.com/eea/volto-eea-website-theme/commit/86479796a838dddef8c444a74a56659b3bb52d83)]
16
+
17
+ #### :hammer_and_wrench: Others
18
+
19
+ - Release 1.10.0 [Alin Voinea - [`ada8f7f`](https://github.com/eea/volto-eea-website-theme/commit/ada8f7f972e5a2301fa205cb3fda9bbc6cee8b10)]
20
+ - bring back undefined value for No theme option of theme color picker [David Ichim - [`c9ca733`](https://github.com/eea/volto-eea-website-theme/commit/c9ca7339533ae4eab839b09cf2146df3ad26a2f7)]
21
+ - icon closer to edges, eea colors, align text with container [andreiggr - [`eab7975`](https://github.com/eea/volto-eea-website-theme/commit/eab7975f6945a4ba935ae506bbf88569bef89c45)]
22
+ - copyright always hoverable on LeadImage also [andreiggr - [`625c11c`](https://github.com/eea/volto-eea-website-theme/commit/625c11c8c7d80c45256a90c901661f3c7f9f4e6f)]
23
+ - copyright always hoverable and settings for it also hidden if it is hidden [andreiggr - [`67c8baf`](https://github.com/eea/volto-eea-website-theme/commit/67c8baf8b5cf89d8a4d0c766bd3b77ca88a9d197)]
24
+ - Separate hocs [dana-cfc4 - [`bd81285`](https://github.com/eea/volto-eea-website-theme/commit/bd812850acf8089b8b91632a0570eba1af994310)]
25
+ - Copyright hover on mobile [dana-cfc4 - [`05db4f6`](https://github.com/eea/volto-eea-website-theme/commit/05db4f6a0e22671955b2a3a7bfa0943705c8a39a)]
26
+ - Fix copyright bottom margin [dana-cfc4 - [`fadd874`](https://github.com/eea/volto-eea-website-theme/commit/fadd874c711f2990367050e30a06c25b05aa1e0a)]
27
+ - no-theme is default [andreiggr - [`b6eda53`](https://github.com/eea/volto-eea-website-theme/commit/b6eda53948018a184d99f7fca84ae25678138264)]
28
+ - allow render of image after container parent is rendered [andreiggr - [`182151a`](https://github.com/eea/volto-eea-website-theme/commit/182151aba6f11cccb6e8e67078f22df3ab7dd995)]
29
+ - copyright align changes for lead image block too [andreiggr - [`eb8ed9b`](https://github.com/eea/volto-eea-website-theme/commit/eb8ed9b2c61e45490595e1406262ae85ceca09b4)]
30
+ - comitt stash also [andreiggr - [`e8fd2c6`](https://github.com/eea/volto-eea-website-theme/commit/e8fd2c64b09dc1b72ba1ddfe5aa607188cffe0fd)]
31
+ - postcss-less missing [andreiggr - [`b721d65`](https://github.com/eea/volto-eea-website-theme/commit/b721d65e513310911be37eab07a376465a22c40b)]
32
+ - lintz [andreiggr - [`e3b974e`](https://github.com/eea/volto-eea-website-theme/commit/e3b974e9e85400a388026f5bf8dcaa1cb368d6b2)]
33
+ - copyright dont show other than large image, and better alignment on hover [andreiggr - [`ceb1058`](https://github.com/eea/volto-eea-website-theme/commit/ceb105830a0caf919c62524a3cc5f7f9db99f19d)]
34
+ - using intermediary container as floater container for image and copyright [andreiggr - [`d195a26`](https://github.com/eea/volto-eea-website-theme/commit/d195a265b57c2814ed746483d9fcb9736169c1e2)]
35
+ - more image updates, fixed for out of content column [andreiggr - [`7254183`](https://github.com/eea/volto-eea-website-theme/commit/7254183d454f74d8f44f5cdc15089dea6dfcd390)]
36
+ - Keep copyright hover inside image area [ichim-david - [`ae0b7ac`](https://github.com/eea/volto-eea-website-theme/commit/ae0b7ac0bbbb5cce5b3bd0cd312589ca418d257c)]
37
+ - lint5 [andreiggr - [`97f31be`](https://github.com/eea/volto-eea-website-theme/commit/97f31be5b9e12adb120f59d0416d50768e341205)]
38
+ - lint4 [andreiggr - [`f142ed7`](https://github.com/eea/volto-eea-website-theme/commit/f142ed73fa7716ab06fc2ef64875b693884bb0f7)]
39
+ - lint3 [andreiggr - [`177c6e5`](https://github.com/eea/volto-eea-website-theme/commit/177c6e527f1f2f345ac29a942ca7361b1b8a022c)]
40
+ - lint2 [andreiggr - [`d998041`](https://github.com/eea/volto-eea-website-theme/commit/d998041468f7aaea4278e056c686d8eca857596f)]
41
+ - lint [andreiggr - [`76ec5b4`](https://github.com/eea/volto-eea-website-theme/commit/76ec5b469f28bb7ba7b56f2a05cbcb7975b63d43)]
42
+ - copyright hoverable over 50chars [andreiggr - [`6051b2a`](https://github.com/eea/volto-eea-website-theme/commit/6051b2a11813c169153051d954e62ef66d4c5b38)]
43
+ - another implementation of copyright align for image block [andreiggr - [`6daa5d5`](https://github.com/eea/volto-eea-website-theme/commit/6daa5d586097bcda5e61217dc8e9478e5ce06a6e)]
44
+ ### [1.9.3](https://github.com/eea/volto-eea-website-theme/compare/1.9.2...1.9.3) - 10 March 2023
45
+
46
+ #### :hammer_and_wrench: Others
47
+
48
+ - test(cypress): Fix volto-eea-design-system dependency version [Alin Voinea - [`01d8461`](https://github.com/eea/volto-eea-website-theme/commit/01d8461138b64f4826fe493743d079cc79bfad5f)]
7
49
  ### [1.9.2](https://github.com/eea/volto-eea-website-theme/compare/1.9.1...1.9.2) - 7 March 2023
8
50
 
9
51
  #### :rocket: New Features
@@ -12,7 +54,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
12
54
 
13
55
  #### :hammer_and_wrench: Others
14
56
 
15
- - Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`6c5e2f8`](https://github.com/eea/volto-eea-website-theme/commit/6c5e2f80456e2061d9e9c15fd0a0b91b9ac70568)]
16
57
  ### [1.9.1](https://github.com/eea/volto-eea-website-theme/compare/1.9.0...1.9.1) - 28 February 2023
17
58
 
18
59
  #### :bug: Bug Fixes
@@ -159,7 +200,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
159
200
 
160
201
  - For some reasons types is a string [Alin Voinea - [`3769a09`](https://github.com/eea/volto-eea-website-theme/commit/3769a0981181d5b633f3498daebbe96be8b4b833)]
161
202
  - Fix(redirect): o.filter - refs #157627 [Alin Voinea - [`deb23da`](https://github.com/eea/volto-eea-website-theme/commit/deb23da846444cc96539697fd798429ae0abe89e)]
162
- - Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`f1fffc5`](https://github.com/eea/volto-eea-website-theme/commit/f1fffc5db96725440863d545580b4e76cce4b796)]
163
203
  ### [1.5.0](https://github.com/eea/volto-eea-website-theme/compare/1.4.2...1.5.0) - 9 January 2023
164
204
 
165
205
  #### :hammer_and_wrench: Others
@@ -193,7 +233,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
193
233
 
194
234
  - Release 1.4.0 [Alin Voinea - [`bd42a0d`](https://github.com/eea/volto-eea-website-theme/commit/bd42a0d26e928cac5d99933194755da3db06b341)]
195
235
  - bump version to use as volto-eea-design-system [David Ichim - [`f4be047`](https://github.com/eea/volto-eea-website-theme/commit/f4be047328b46399b03b612d378b18aaf82e7dc1)]
196
- - Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`9b7cfef`](https://github.com/eea/volto-eea-website-theme/commit/9b7cfefb4d34fc1c948015e491feb370f9795bd8)]
197
236
  - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`df252a9`](https://github.com/eea/volto-eea-website-theme/commit/df252a9bfed0bb86cadf53c59dd1603b1e2cd822)]
198
237
  ### [1.3.2](https://github.com/eea/volto-eea-website-theme/compare/1.3.1...1.3.2) - 16 December 2022
199
238
 
@@ -203,7 +242,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
203
242
 
204
243
  #### :hammer_and_wrench: Others
205
244
 
206
- - Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`a43c658`](https://github.com/eea/volto-eea-website-theme/commit/a43c658a7920c8df95e763b9a637f38ce77eba2c)]
207
245
  - Better razzle.config [Tiberiu Ichim - [`81dbf48`](https://github.com/eea/volto-eea-website-theme/commit/81dbf48815fb27facb4f82c9b764540fdf188b2e)]
208
246
  - Better razzle.config [Tiberiu Ichim - [`7bc9da2`](https://github.com/eea/volto-eea-website-theme/commit/7bc9da2cd837ab62a95cd29979cdd9b0055b7d67)]
209
247
  ### [1.3.1](https://github.com/eea/volto-eea-website-theme/compare/1.3.0...1.3.1) - 28 November 2022
@@ -212,9 +250,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
212
250
 
213
251
  - feat(Footer): Bring back footer contacts extra actions - refs #151856 [Alin Voinea - [`6c19413`](https://github.com/eea/volto-eea-website-theme/commit/6c194139420c9fd847692d180db1c1593e2483de)]
214
252
 
215
- #### :hammer_and_wrench: Others
216
-
217
- - yarn 3 [Alin Voinea - [`ea7a709`](https://github.com/eea/volto-eea-website-theme/commit/ea7a7094945312776e9b6f44e371178603e92139)]
218
253
  ### [1.3.0](https://github.com/eea/volto-eea-website-theme/compare/1.2.0...1.3.0) - 22 November 2022
219
254
 
220
255
  #### :rocket: New Features
@@ -255,7 +290,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
255
290
  - Add subsite class to body [Tiberiu Ichim - [`74d700f`](https://github.com/eea/volto-eea-website-theme/commit/74d700fbfd6249a8604762a7e4e49cce857db0f3)]
256
291
  - Add subsite info to header [Tiberiu Ichim - [`47daf8b`](https://github.com/eea/volto-eea-website-theme/commit/47daf8bb6374a1222040626b19d4154df7ba1b83)]
257
292
  - fix eslint [Miu Razvan - [`eb8d0a7`](https://github.com/eea/volto-eea-website-theme/commit/eb8d0a790bc70c0aae256c6ff35f63c4885f338e)]
258
- - Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`cc578a4`](https://github.com/eea/volto-eea-website-theme/commit/cc578a413b205a8e61e091fab3a88f94cedefc89)]
259
293
  ### [1.1.0](https://github.com/eea/volto-eea-website-theme/compare/1.0.0...1.1.0) - 28 October 2022
260
294
 
261
295
  #### :nail_care: Enhancements
@@ -303,7 +337,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
303
337
 
304
338
  #### :hammer_and_wrench: Others
305
339
 
306
- - Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`33b56ac`](https://github.com/eea/volto-eea-website-theme/commit/33b56acb13fbaf0c5b79e8fc6e13c4b699c79c90)]
307
340
  ### [0.7.3](https://github.com/eea/volto-eea-website-theme/compare/0.7.2...0.7.3) - 22 September 2022
308
341
 
309
342
  #### :hammer_and_wrench: Others
@@ -571,7 +604,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
571
604
  - Header refactor, add custom logo #5 [ichim-david - [`4950235`](https://github.com/eea/volto-eea-website-theme/commit/49502358105437cfeac3b144e6d301cb59aa2346)]
572
605
  - Update footer.config with new publication card component [ichim-david - [`2e38e9a`](https://github.com/eea/volto-eea-website-theme/commit/2e38e9a417f835009d60c80d4eb4b30229f55e45)]
573
606
  - feature(breadcrumbs): implement eea-design-system breadcrumb as Volto component #32 #7 [ichim-david - [`181af41`](https://github.com/eea/volto-eea-website-theme/commit/181af4125ce2b9ddac56dab4723cb11c26633221)]
574
- - Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`da8ceb6`](https://github.com/eea/volto-eea-website-theme/commit/da8ceb68ea68bfbc9504e48ccd4d68277f11ab9a)]
575
607
  - use breadcrumbs from eea-design-system [nileshgulia1 - [`db2f9e9`](https://github.com/eea/volto-eea-website-theme/commit/db2f9e9a4327420a3cce9a9903cd88549b129eab)]
576
608
  - Update theme.config [ichim-david - [`8eca4f4`](https://github.com/eea/volto-eea-website-theme/commit/8eca4f40397a4aeca6d39029c92db78968d37064)]
577
609
  - Added keyContent component to theme.config [ichim-david - [`d86f202`](https://github.com/eea/volto-eea-website-theme/commit/d86f202d0274d839487a88b51cae9a0e899beb23)]
@@ -613,5 +645,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
613
645
 
614
646
  #### :hammer_and_wrench: Others
615
647
 
616
- - yarn bootstrap [Alin Voinea - [`6995e9e`](https://github.com/eea/volto-eea-website-theme/commit/6995e9e091f21fdbbdffa8a44fc0e2c626f6d46a)]
617
648
  - Initial commit [Alin Voinea - [`6a9c03a`](https://github.com/eea/volto-eea-website-theme/commit/6a9c03a7cebe71ca87e82cf58c42904063e9d8d3)]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eeacms/volto-eea-website-theme",
3
- "version": "1.9.2",
3
+ "version": "1.10.0",
4
4
  "description": "@eeacms/volto-eea-website-theme: Volto add-on",
5
5
  "main": "src/index.js",
6
6
  "author": "European Environment Agency: IDM2 A-Team",
@@ -22,14 +22,15 @@
22
22
  "url": "git@github.com:eea/volto-eea-website-theme.git"
23
23
  },
24
24
  "dependencies": {
25
- "@eeacms/volto-eea-design-system": "^1.0.0-alpha.15",
25
+ "@eeacms/volto-eea-design-system": "^1.0.0-beta.5",
26
26
  "volto-subsites": "*"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@cypress/code-coverage": "^3.10.0",
30
30
  "@plone/scripts": "*",
31
31
  "babel-plugin-transform-class-properties": "^6.24.1",
32
- "md5": "^2.3.0"
32
+ "md5": "^2.3.0",
33
+ "postcss-less": "6.0.0"
33
34
  },
34
35
  "scripts": {
35
36
  "release": "release-it",
package/src/customizations/volto/components/manage/Blocks/Image/Edit.jsx CHANGED
@@ -31,7 +31,6 @@ import clearSVG from '@plone/volto/icons/clear.svg';
31
31
  import navTreeSVG from '@plone/volto/icons/nav.svg';
32
32
  import aheadSVG from '@plone/volto/icons/ahead.svg';
33
33
  import uploadSVG from '@plone/volto/icons/upload.svg';
34
- import './style.less';
35
34
  const Dropzone = loadable(() => import('react-dropzone'));
36
35
 
37
36
  const messages = defineMessages({
@@ -240,6 +239,9 @@ class Edit extends Component {
240
239
  this.props.data.placeholder ||
241
240
  this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
242
241
  const { copyright, copyrightIcon, copyrightPosition } = data;
242
+
243
+ const showCopyright = data?.size === 'l' || !data.size;
244
+
243
245
  return (
244
246
  <div
245
247
  className={cx(
@@ -250,143 +252,160 @@ class Edit extends Component {
250
252
  data.align,
251
253
  )}
252
254
  >
253
- {data.url ? (
254
- <div className="image-block">
255
- <img
256
- className={cx({
257
- 'full-width': data.align === 'full',
258
- large: data.size === 'l',
259
- medium: data.size === 'm',
260
- small: data.size === 's',
261
- })}
262
- src={
263
- isInternalURL(data.url)
264
- ? // Backwards compat in the case that the block is storing the full server URL
265
- (() => {
266
- if (data.size === 'l')
267
- return `${flattenToAppURL(data.url)}/@@images/image`;
268
- if (data.size === 'm')
269
- return `${flattenToAppURL(
270
- data.url,
271
- )}/@@images/image/preview`;
272
- if (data.size === 's')
255
+ <div
256
+ className={cx(
257
+ 'image-block-container',
258
+ {
259
+ large: data.size === 'l',
260
+ medium: data.size === 'm',
261
+ small: data.size === 's',
262
+ },
263
+ data?.align ? data?.align : '',
264
+ )}
265
+ >
266
+ {data.url ? (
267
+ <>
268
+ <img
269
+ className={cx({
270
+ 'full-width': data.align === 'full',
271
+ })}
272
+ src={
273
+ isInternalURL(data.url)
274
+ ? // Backwards compat in the case that the block is storing the full server URL
275
+ (() => {
276
+ if (data.align === 'full')
277
+ return `${flattenToAppURL(
278
+ data.url,
279
+ )}/@@images/image/huge`;
280
+ if (data.size === 'l')
281
+ return `${flattenToAppURL(
282
+ data.url,
283
+ )}/@@images/image/great`;
284
+ if (data.size === 'm')
285
+ return `${flattenToAppURL(
286
+ data.url,
287
+ )}/@@images/image/preview`;
288
+ if (data.size === 's')
289
+ return `${flattenToAppURL(
290
+ data.url,
291
+ )}/@@images/image/mini`;
273
292
  return `${flattenToAppURL(
274
293
  data.url,
275
- )}/@@images/image/mini`;
276
- return `${flattenToAppURL(data.url)}/@@images/image`;
277
- })()
278
- : data.url
279
- }
280
- alt={data.alt || ''}
281
- />
282
- <div className="copyright-image">
283
- {copyright ? (
284
- <Copyright copyrightPosition={copyrightPosition}>
285
- <Copyright.Icon>
286
- <IconSemantic name={copyrightIcon} />
287
- </Copyright.Icon>
288
- <Copyright.Text>{copyright}</Copyright.Text>
289
- </Copyright>
290
- ) : (
291
- ''
292
- )}
293
- </div>
294
- </div>
295
- ) : (
296
- <div>
297
- {this.props.editable && (
298
- <Dropzone
299
- noClick
300
- onDrop={this.onDrop}
301
- onDragEnter={this.onDragEnter}
302
- onDragLeave={this.onDragLeave}
303
- className="dropzone"
304
- >
305
- {({ getRootProps, getInputProps }) => (
306
- <div {...getRootProps()}>
307
- <Message>
308
- {this.state.dragging && <Dimmer active></Dimmer>}
309
- {this.state.uploading && (
310
- <Dimmer active>
311
- <Loader indeterminate>Uploading image</Loader>
312
- </Dimmer>
313
- )}
314
- <div className="no-image-wrapper">
315
- <img src={imageBlockSVG} alt="" />
316
- <div className="toolbar-inner">
317
- <Button.Group>
318
- <Button
319
- basic
320
- icon
321
- onClick={(e) => {
322
- e.stopPropagation();
323
- e.preventDefault();
324
- this.props.openObjectBrowser();
325
- }}
326
- >
327
- <Icon name={navTreeSVG} size="24px" />
328
- </Button>
329
- </Button.Group>
330
- <Button.Group>
331
- <label className="ui button basic icon">
332
- <Icon name={uploadSVG} size="24px" />
333
- <input
334
- {...getInputProps({
335
- type: 'file',
336
- onChange: this.onUploadImage,
337
- style: { display: 'none' },
338
- })}
339
- />
340
- </label>
341
- </Button.Group>
342
- <Input
343
- onKeyDown={this.onKeyDownVariantMenuForm}
344
- onChange={this.onChangeUrl}
345
- placeholder={placeholder}
346
- value={this.state.url}
347
- onClick={(e) => {
348
- e.target.focus();
349
- }}
350
- onFocus={(e) => {
351
- this.props.onSelectBlock(this.props.id);
352
- }}
353
- />
354
- {this.state.url && (
294
+ )}/@@images/image/great`;
295
+ })()
296
+ : data.url
297
+ }
298
+ alt={data.alt || ''}
299
+ />
300
+ <div className={`copyright-wrapper ${copyrightPosition}`}>
301
+ {copyright && showCopyright ? (
302
+ <Copyright copyrightPosition={copyrightPosition}>
303
+ <Copyright.Icon>
304
+ <IconSemantic name={copyrightIcon} />
305
+ </Copyright.Icon>
306
+ <Copyright.Text>{copyright}</Copyright.Text>
307
+ </Copyright>
308
+ ) : (
309
+ ''
310
+ )}
311
+ </div>
312
+ </>
313
+ ) : (
314
+ <div>
315
+ {this.props.editable && (
316
+ <Dropzone
317
+ noClick
318
+ onDrop={this.onDrop}
319
+ onDragEnter={this.onDragEnter}
320
+ onDragLeave={this.onDragLeave}
321
+ className="dropzone"
322
+ >
323
+ {({ getRootProps, getInputProps }) => (
324
+ <div {...getRootProps()}>
325
+ <Message>
326
+ {this.state.dragging && <Dimmer active></Dimmer>}
327
+ {this.state.uploading && (
328
+ <Dimmer active>
329
+ <Loader indeterminate>Uploading image</Loader>
330
+ </Dimmer>
331
+ )}
332
+ <div className="no-image-wrapper">
333
+ <img src={imageBlockSVG} alt="" />
334
+ <div className="toolbar-inner">
355
335
  <Button.Group>
356
336
  <Button
357
337
  basic
358
- className="cancel"
338
+ icon
359
339
  onClick={(e) => {
360
340
  e.stopPropagation();
361
- this.setState({ url: '' });
341
+ e.preventDefault();
342
+ this.props.openObjectBrowser();
362
343
  }}
363
344
  >
364
- <Icon name={clearSVG} size="30px" />
345
+ <Icon name={navTreeSVG} size="24px" />
365
346
  </Button>
366
347
  </Button.Group>
367
- )}
368
- <Button.Group>
369
- <Button
370
- basic
371
- primary
372
- disabled={!this.state.url}
348
+ <Button.Group>
349
+ <label className="ui button basic icon">
350
+ <Icon name={uploadSVG} size="24px" />
351
+ <input
352
+ {...getInputProps({
353
+ type: 'file',
354
+ onChange: this.onUploadImage,
355
+ style: { display: 'none' },
356
+ })}
357
+ />
358
+ </label>
359
+ </Button.Group>
360
+ <Input
361
+ onKeyDown={this.onKeyDownVariantMenuForm}
362
+ onChange={this.onChangeUrl}
363
+ placeholder={placeholder}
364
+ value={this.state.url}
373
365
  onClick={(e) => {
374
- e.stopPropagation();
375
- this.onSubmitUrl();
366
+ e.target.focus();
367
+ }}
368
+ onFocus={(e) => {
369
+ this.props.onSelectBlock(this.props.id);
376
370
  }}
377
- >
378
- <Icon name={aheadSVG} size="30px" />
379
- </Button>
380
- </Button.Group>
371
+ />
372
+ {this.state.url && (
373
+ <Button.Group>
374
+ <Button
375
+ basic
376
+ className="cancel"
377
+ onClick={(e) => {
378
+ e.stopPropagation();
379
+ this.setState({ url: '' });
380
+ }}
381
+ >
382
+ <Icon name={clearSVG} size="30px" />
383
+ </Button>
384
+ </Button.Group>
385
+ )}
386
+ <Button.Group>
387
+ <Button
388
+ basic
389
+ primary
390
+ disabled={!this.state.url}
391
+ onClick={(e) => {
392
+ e.stopPropagation();
393
+ this.onSubmitUrl();
394
+ }}
395
+ >
396
+ <Icon name={aheadSVG} size="30px" />
397
+ </Button>
398
+ </Button.Group>
399
+ </div>
381
400
  </div>
382
- </div>
383
- </Message>
384
- </div>
385
- )}
386
- </Dropzone>
387
- )}
388
- </div>
389
- )}
401
+ </Message>
402
+ </div>
403
+ )}
404
+ </Dropzone>
405
+ )}
406
+ </div>
407
+ )}
408
+ </div>
390
409
  <SidebarPortal selected={this.props.selected}>
391
410
  <ImageSidebar {...this.props} />
392
411
  </SidebarPortal>