@eeacms/volto-eea-website-theme 1.9.3 → 1.11.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 (12) 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/customizations/volto/components/manage/Blocks/Image/style.less +0 -12
  12. 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.11.0](https://github.com/eea/volto-eea-website-theme/compare/1.10.0...1.11.0) - 12 March 2023
8
+
9
+ #### :hammer_and_wrench: Others
10
+
11
+ - Release EEA Design System 1.0 [Alin Voinea - [`3300257`](https://github.com/eea/volto-eea-website-theme/commit/330025702c0f6b7e5e520f9d89a9e4e05b3bfc5b)]
12
+ ### [1.10.0](https://github.com/eea/volto-eea-website-theme/compare/1.9.3...1.10.0) - 10 March 2023
13
+
14
+ #### :nail_care: Enhancements
15
+
16
+ - 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)]
17
+ - change(image): use great scale by default, huge for full width [David Ichim - [`beec7b7`](https://github.com/eea/volto-eea-website-theme/commit/beec7b709cbf3f2c519ac639c617cb7525d8f400)]
18
+ - change(copyright): changed hidden class usage to hiddenStructure [David Ichim - [`a6cdb22`](https://github.com/eea/volto-eea-website-theme/commit/a6cdb2202b0573dad7e3c60cb16b3f01d91e1955)]
19
+ - change(copyright): renamed copyright-image to copyright-wrapper [David Ichim - [`015d2e8`](https://github.com/eea/volto-eea-website-theme/commit/015d2e8c6183bd2f583db3d9f75a347281a19de2)]
20
+ - 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)]
21
+
22
+ #### :hammer_and_wrench: Others
23
+
24
+ - Release 1.10.0 [Alin Voinea - [`ada8f7f`](https://github.com/eea/volto-eea-website-theme/commit/ada8f7f972e5a2301fa205cb3fda9bbc6cee8b10)]
25
+ - 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)]
26
+ - icon closer to edges, eea colors, align text with container [andreiggr - [`eab7975`](https://github.com/eea/volto-eea-website-theme/commit/eab7975f6945a4ba935ae506bbf88569bef89c45)]
27
+ - copyright always hoverable on LeadImage also [andreiggr - [`625c11c`](https://github.com/eea/volto-eea-website-theme/commit/625c11c8c7d80c45256a90c901661f3c7f9f4e6f)]
28
+ - 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)]
29
+ - Separate hocs [dana-cfc4 - [`bd81285`](https://github.com/eea/volto-eea-website-theme/commit/bd812850acf8089b8b91632a0570eba1af994310)]
30
+ - Copyright hover on mobile [dana-cfc4 - [`05db4f6`](https://github.com/eea/volto-eea-website-theme/commit/05db4f6a0e22671955b2a3a7bfa0943705c8a39a)]
31
+ - Fix copyright bottom margin [dana-cfc4 - [`fadd874`](https://github.com/eea/volto-eea-website-theme/commit/fadd874c711f2990367050e30a06c25b05aa1e0a)]
32
+ - no-theme is default [andreiggr - [`b6eda53`](https://github.com/eea/volto-eea-website-theme/commit/b6eda53948018a184d99f7fca84ae25678138264)]
33
+ - allow render of image after container parent is rendered [andreiggr - [`182151a`](https://github.com/eea/volto-eea-website-theme/commit/182151aba6f11cccb6e8e67078f22df3ab7dd995)]
34
+ - copyright align changes for lead image block too [andreiggr - [`eb8ed9b`](https://github.com/eea/volto-eea-website-theme/commit/eb8ed9b2c61e45490595e1406262ae85ceca09b4)]
35
+ - comitt stash also [andreiggr - [`e8fd2c6`](https://github.com/eea/volto-eea-website-theme/commit/e8fd2c64b09dc1b72ba1ddfe5aa607188cffe0fd)]
36
+ - postcss-less missing [andreiggr - [`b721d65`](https://github.com/eea/volto-eea-website-theme/commit/b721d65e513310911be37eab07a376465a22c40b)]
37
+ - lintz [andreiggr - [`e3b974e`](https://github.com/eea/volto-eea-website-theme/commit/e3b974e9e85400a388026f5bf8dcaa1cb368d6b2)]
38
+ - copyright dont show other than large image, and better alignment on hover [andreiggr - [`ceb1058`](https://github.com/eea/volto-eea-website-theme/commit/ceb105830a0caf919c62524a3cc5f7f9db99f19d)]
39
+ - using intermediary container as floater container for image and copyright [andreiggr - [`d195a26`](https://github.com/eea/volto-eea-website-theme/commit/d195a265b57c2814ed746483d9fcb9736169c1e2)]
40
+ - more image updates, fixed for out of content column [andreiggr - [`7254183`](https://github.com/eea/volto-eea-website-theme/commit/7254183d454f74d8f44f5cdc15089dea6dfcd390)]
41
+ - Keep copyright hover inside image area [ichim-david - [`ae0b7ac`](https://github.com/eea/volto-eea-website-theme/commit/ae0b7ac0bbbb5cce5b3bd0cd312589ca418d257c)]
42
+ - lint5 [andreiggr - [`97f31be`](https://github.com/eea/volto-eea-website-theme/commit/97f31be5b9e12adb120f59d0416d50768e341205)]
43
+ - lint4 [andreiggr - [`f142ed7`](https://github.com/eea/volto-eea-website-theme/commit/f142ed73fa7716ab06fc2ef64875b693884bb0f7)]
44
+ - lint3 [andreiggr - [`177c6e5`](https://github.com/eea/volto-eea-website-theme/commit/177c6e527f1f2f345ac29a942ca7361b1b8a022c)]
45
+ - lint2 [andreiggr - [`d998041`](https://github.com/eea/volto-eea-website-theme/commit/d998041468f7aaea4278e056c686d8eca857596f)]
46
+ - lint [andreiggr - [`76ec5b4`](https://github.com/eea/volto-eea-website-theme/commit/76ec5b469f28bb7ba7b56f2a05cbcb7975b63d43)]
47
+ - copyright hoverable over 50chars [andreiggr - [`6051b2a`](https://github.com/eea/volto-eea-website-theme/commit/6051b2a11813c169153051d954e62ef66d4c5b38)]
48
+ - another implementation of copyright align for image block [andreiggr - [`6daa5d5`](https://github.com/eea/volto-eea-website-theme/commit/6daa5d586097bcda5e61217dc8e9478e5ce06a6e)]
7
49
  ### [1.9.3](https://github.com/eea/volto-eea-website-theme/compare/1.9.2...1.9.3) - 10 March 2023
8
50
 
9
51
  #### :hammer_and_wrench: Others
@@ -17,7 +59,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
17
59
 
18
60
  #### :hammer_and_wrench: Others
19
61
 
20
- - Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`6c5e2f8`](https://github.com/eea/volto-eea-website-theme/commit/6c5e2f80456e2061d9e9c15fd0a0b91b9ac70568)]
21
62
  ### [1.9.1](https://github.com/eea/volto-eea-website-theme/compare/1.9.0...1.9.1) - 28 February 2023
22
63
 
23
64
  #### :bug: Bug Fixes
@@ -164,7 +205,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
164
205
 
165
206
  - For some reasons types is a string [Alin Voinea - [`3769a09`](https://github.com/eea/volto-eea-website-theme/commit/3769a0981181d5b633f3498daebbe96be8b4b833)]
166
207
  - Fix(redirect): o.filter - refs #157627 [Alin Voinea - [`deb23da`](https://github.com/eea/volto-eea-website-theme/commit/deb23da846444cc96539697fd798429ae0abe89e)]
167
- - Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`f1fffc5`](https://github.com/eea/volto-eea-website-theme/commit/f1fffc5db96725440863d545580b4e76cce4b796)]
168
208
  ### [1.5.0](https://github.com/eea/volto-eea-website-theme/compare/1.4.2...1.5.0) - 9 January 2023
169
209
 
170
210
  #### :hammer_and_wrench: Others
@@ -198,7 +238,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
198
238
 
199
239
  - Release 1.4.0 [Alin Voinea - [`bd42a0d`](https://github.com/eea/volto-eea-website-theme/commit/bd42a0d26e928cac5d99933194755da3db06b341)]
200
240
  - bump version to use as volto-eea-design-system [David Ichim - [`f4be047`](https://github.com/eea/volto-eea-website-theme/commit/f4be047328b46399b03b612d378b18aaf82e7dc1)]
201
- - Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`9b7cfef`](https://github.com/eea/volto-eea-website-theme/commit/9b7cfefb4d34fc1c948015e491feb370f9795bd8)]
202
241
  - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`df252a9`](https://github.com/eea/volto-eea-website-theme/commit/df252a9bfed0bb86cadf53c59dd1603b1e2cd822)]
203
242
  ### [1.3.2](https://github.com/eea/volto-eea-website-theme/compare/1.3.1...1.3.2) - 16 December 2022
204
243
 
@@ -208,7 +247,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
208
247
 
209
248
  #### :hammer_and_wrench: Others
210
249
 
211
- - Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`a43c658`](https://github.com/eea/volto-eea-website-theme/commit/a43c658a7920c8df95e763b9a637f38ce77eba2c)]
212
250
  - Better razzle.config [Tiberiu Ichim - [`81dbf48`](https://github.com/eea/volto-eea-website-theme/commit/81dbf48815fb27facb4f82c9b764540fdf188b2e)]
213
251
  - Better razzle.config [Tiberiu Ichim - [`7bc9da2`](https://github.com/eea/volto-eea-website-theme/commit/7bc9da2cd837ab62a95cd29979cdd9b0055b7d67)]
214
252
  ### [1.3.1](https://github.com/eea/volto-eea-website-theme/compare/1.3.0...1.3.1) - 28 November 2022
@@ -217,9 +255,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
217
255
 
218
256
  - feat(Footer): Bring back footer contacts extra actions - refs #151856 [Alin Voinea - [`6c19413`](https://github.com/eea/volto-eea-website-theme/commit/6c194139420c9fd847692d180db1c1593e2483de)]
219
257
 
220
- #### :hammer_and_wrench: Others
221
-
222
- - yarn 3 [Alin Voinea - [`ea7a709`](https://github.com/eea/volto-eea-website-theme/commit/ea7a7094945312776e9b6f44e371178603e92139)]
223
258
  ### [1.3.0](https://github.com/eea/volto-eea-website-theme/compare/1.2.0...1.3.0) - 22 November 2022
224
259
 
225
260
  #### :rocket: New Features
@@ -260,7 +295,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
260
295
  - Add subsite class to body [Tiberiu Ichim - [`74d700f`](https://github.com/eea/volto-eea-website-theme/commit/74d700fbfd6249a8604762a7e4e49cce857db0f3)]
261
296
  - Add subsite info to header [Tiberiu Ichim - [`47daf8b`](https://github.com/eea/volto-eea-website-theme/commit/47daf8bb6374a1222040626b19d4154df7ba1b83)]
262
297
  - fix eslint [Miu Razvan - [`eb8d0a7`](https://github.com/eea/volto-eea-website-theme/commit/eb8d0a790bc70c0aae256c6ff35f63c4885f338e)]
263
- - Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`cc578a4`](https://github.com/eea/volto-eea-website-theme/commit/cc578a413b205a8e61e091fab3a88f94cedefc89)]
264
298
  ### [1.1.0](https://github.com/eea/volto-eea-website-theme/compare/1.0.0...1.1.0) - 28 October 2022
265
299
 
266
300
  #### :nail_care: Enhancements
@@ -308,7 +342,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
308
342
 
309
343
  #### :hammer_and_wrench: Others
310
344
 
311
- - Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`33b56ac`](https://github.com/eea/volto-eea-website-theme/commit/33b56acb13fbaf0c5b79e8fc6e13c4b699c79c90)]
312
345
  ### [0.7.3](https://github.com/eea/volto-eea-website-theme/compare/0.7.2...0.7.3) - 22 September 2022
313
346
 
314
347
  #### :hammer_and_wrench: Others
@@ -576,7 +609,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
576
609
  - Header refactor, add custom logo #5 [ichim-david - [`4950235`](https://github.com/eea/volto-eea-website-theme/commit/49502358105437cfeac3b144e6d301cb59aa2346)]
577
610
  - Update footer.config with new publication card component [ichim-david - [`2e38e9a`](https://github.com/eea/volto-eea-website-theme/commit/2e38e9a417f835009d60c80d4eb4b30229f55e45)]
578
611
  - 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)]
579
- - Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`da8ceb6`](https://github.com/eea/volto-eea-website-theme/commit/da8ceb68ea68bfbc9504e48ccd4d68277f11ab9a)]
580
612
  - use breadcrumbs from eea-design-system [nileshgulia1 - [`db2f9e9`](https://github.com/eea/volto-eea-website-theme/commit/db2f9e9a4327420a3cce9a9903cd88549b129eab)]
581
613
  - Update theme.config [ichim-david - [`8eca4f4`](https://github.com/eea/volto-eea-website-theme/commit/8eca4f40397a4aeca6d39029c92db78968d37064)]
582
614
  - Added keyContent component to theme.config [ichim-david - [`d86f202`](https://github.com/eea/volto-eea-website-theme/commit/d86f202d0274d839487a88b51cae9a0e899beb23)]
@@ -618,5 +650,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
618
650
 
619
651
  #### :hammer_and_wrench: Others
620
652
 
621
- - yarn bootstrap [Alin Voinea - [`6995e9e`](https://github.com/eea/volto-eea-website-theme/commit/6995e9e091f21fdbbdffa8a44fc0e2c626f6d46a)]
622
653
  - 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.3",
3
+ "version": "1.11.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-beta.5",
25
+ "@eeacms/volto-eea-design-system": "*",
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>