@eeacms/volto-clms-theme 1.1.11 → 1.1.13

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.
package/CHANGELOG.md CHANGED
@@ -4,11 +4,17 @@ 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.1.11](https://github.com/eea/volto-clms-theme/compare/1.1.10...1.1.11) - 15 June 2023
7
+ ### [1.1.13](https://github.com/eea/volto-clms-theme/compare/1.1.12...1.1.13) - 21 June 2023
8
8
 
9
- #### :rocket: New Features
9
+ #### :hammer_and_wrench: Others
10
10
 
11
- - feat: CLMS-2314 remove technical library categorization [Mikel Larreategi - [`f046e84`](https://github.com/eea/volto-clms-theme/commit/f046e84bd22b48e2fbb7792317ce9f772f07c634)]
11
+ - fix stylelint [ionlizarazu - [`1049291`](https://github.com/eea/volto-clms-theme/commit/10492913bc08396b8b7108eb3b751197963a78cf)]
12
+ - cary taula txukundu [Zaloa Etxaniz - [`5073540`](https://github.com/eea/volto-clms-theme/commit/5073540d8e149c86e6373822104255150cbc585d)]
13
+ - goup configurables [ionlizarazu - [`fb4f286`](https://github.com/eea/volto-clms-theme/commit/fb4f28670f8d5d11e6bfb37fd9881d1a2e7fd261)]
14
+ - compacting cart [ionlizarazu - [`046ff0a`](https://github.com/eea/volto-clms-theme/commit/046ff0a624b129be4772a95cbe24ed1db3e8fba5)]
15
+ ### [1.1.12](https://github.com/eea/volto-clms-theme/compare/1.1.11...1.1.12) - 16 June 2023
16
+
17
+ ### [1.1.11](https://github.com/eea/volto-clms-theme/compare/1.1.10...1.1.11) - 15 June 2023
12
18
 
13
19
  ### [1.1.10](https://github.com/eea/volto-clms-theme/compare/1.1.9...1.1.10) - 14 June 2023
14
20
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eeacms/volto-clms-theme",
3
- "version": "1.1.11",
3
+ "version": "1.1.13",
4
4
  "description": "volto-clms-theme: Volto theme for CLMS site",
5
5
  "main": "src/index.js",
6
6
  "author": "CodeSyntax for the European Environment Agency",
@@ -1,3 +1,4 @@
1
+ import { Label } from 'semantic-ui-react';
1
2
  export const AreaNaming = (areaProps) => {
2
3
  const { item } = areaProps;
3
4
  switch (item.area?.type) {
@@ -8,12 +9,12 @@ export const AreaNaming = (areaProps) => {
8
9
  <br />
9
10
  <span className="cart-bounding-boxes">
10
11
  <span className="cart-bounding-box-row">
11
- <span>{`N: ${item.area.value[1].toFixed(1)}º `}</span>&nbsp;
12
- <span>{`E: ${item.area.value[2].toFixed(1)}º `}</span>
13
- </span>
14
- <span className="cart-bounding-box-row">
15
- <span>{`S: ${item.area.value[3].toFixed(1)}º `}</span>&nbsp;
16
- <span>{`W: ${item.area.value[0].toFixed(1)}º `}</span>
12
+ <Label>{`N: ${item.area.value[1].toFixed(1)}º`}</Label>&nbsp;
13
+ <Label>{`E: ${item.area.value[2].toFixed(1)}º`}</Label>&nbsp;
14
+ {/* </span>
15
+ <span className="cart-bounding-box-row"> */}
16
+ <Label>{`S: ${item.area.value[3].toFixed(1)}º`}</Label>&nbsp;
17
+ <Label>{`W: ${item.area.value[0].toFixed(1)}º`}</Label>
17
18
  </span>
18
19
  </span>
19
20
  </>
@@ -1,7 +1,7 @@
1
1
  import React, { useEffect, useState } from 'react';
2
2
  import { useDispatch, useSelector } from 'react-redux';
3
3
  import { toast } from 'react-toastify';
4
- import { Checkbox, Modal, Segment, Select } from 'semantic-ui-react';
4
+ import { Checkbox, Modal, Segment, Select, Table } from 'semantic-ui-react';
5
5
 
6
6
  import { Icon } from '@plone/volto/components';
7
7
  import { Toast } from '@plone/volto/components';
@@ -206,11 +206,11 @@ const CLMSCartContent = (props) => {
206
206
  <div className="custom-table cart-table">
207
207
  <Segment basic loading={loadingTable}>
208
208
  <h2>My cart</h2>
209
- <table>
210
- <thead>
211
- <tr>
212
- <th className="table-th-warning"></th>
213
- <th className="table-th-checkbox">
209
+ <Table responsive>
210
+ <Table.Header>
211
+ <Table.Row>
212
+ <Table.HeaderCell className="table-th-warning"></Table.HeaderCell>
213
+ <Table.HeaderCell className="table-th-checkbox">
214
214
  <div className="ccl-form">
215
215
  <div className="ccl-form-group">
216
216
  <Checkbox
@@ -219,20 +219,15 @@ const CLMSCartContent = (props) => {
219
219
  />
220
220
  </div>
221
221
  </div>
222
- </th>
223
- <th>Name</th>
224
- <th>Source</th>
225
- <th>Area</th>
226
- <th>Type</th>
227
- <th>Collection</th>
228
- <th>Format</th>
229
- <th>Layer/Band</th>
230
- <th>Projection</th>
231
- <th>Timeseries</th>
232
- <th></th>
233
- <th></th>
234
- </tr>
235
- </thead>
222
+ </Table.HeaderCell>
223
+ <Table.HeaderCell width={5}>Static info</Table.HeaderCell>
224
+ <Table.HeaderCell>Configurable</Table.HeaderCell>
225
+ <Table.HeaderCell></Table.HeaderCell>
226
+ <Table.HeaderCell>Projection</Table.HeaderCell>
227
+ <Table.HeaderCell>Timeseries</Table.HeaderCell>
228
+ <Table.HeaderCell></Table.HeaderCell>
229
+ </Table.Row>
230
+ </Table.Header>
236
231
  <tbody>
237
232
  {cartItems.length > 0 &&
238
233
  cartItems.map((item, key) => (
@@ -270,49 +265,70 @@ const CLMSCartContent = (props) => {
270
265
  </div>
271
266
  </div>
272
267
  </td>
273
- {/* {item.title ? (
274
- <td>
275
- {item.title} ({contentOrDash(item.name)})
276
- </td>
277
- ) : ( */}
278
- <td>{contentOrDash(item.name)}</td>
279
- {/* )} */}
280
- <td>{contentOrDash(item.source)}</td>
281
- <td style={{ wordBreak: 'break-word' }}>
282
- <AreaNaming item={item} />
283
- </td>
284
268
  <td>
285
- <TypeNaming
286
- item={item}
287
- datasets_items={datasets_items}
288
- cartItems={cartItems}
289
- setCartItems={setCartItems}
290
- />
269
+ <div className="mb-2">
270
+ <strong>Name: </strong>
271
+ {contentOrDash(item.name)}
272
+ </div>
273
+ <div className="mb-2">
274
+ <strong>Source: </strong>
275
+ {contentOrDash(item.source)}
276
+ </div>
277
+ <div className="mb-2">
278
+ <strong>Area: </strong>
279
+ <AreaNaming item={item} />
280
+ </div>
281
+
282
+ {/* <td style={{ wordBreak: 'break-word' }}> */}
291
283
  </td>
292
284
  <td>
293
- <CollectionNaming
294
- item={item}
295
- datasets_items={datasets_items}
296
- cartItems={cartItems}
297
- setCartItems={setCartItems}
298
- />
285
+ <div className="mb-2">
286
+ <strong>Type: </strong>
287
+ </div>
288
+ <div className="mb-2">
289
+ <strong>Collection: </strong>
290
+ </div>
291
+ <div className="mb-2">
292
+ <strong>Format: </strong>
293
+ </div>
294
+ <div className="mb-2">
295
+ <strong>Layer/Band: </strong>
296
+ </div>
299
297
  </td>
300
- <td className="table-td-format">
301
- {formatConversionTable && item && (
302
- <FormatNaming
298
+ <td>
299
+ <div className="mb-2">
300
+ <TypeNaming
303
301
  item={item}
302
+ datasets_items={datasets_items}
304
303
  cartItems={cartItems}
305
304
  setCartItems={setCartItems}
306
- formatConversionTable={formatConversionTable}
307
305
  />
308
- )}
309
- </td>
310
- <td className="table-td-format">
311
- <LayerNaming
312
- item={item}
313
- cartItems={cartItems}
314
- setCartItems={setCartItems}
315
- />
306
+ </div>
307
+ <div className="mb-2">
308
+ <CollectionNaming
309
+ item={item}
310
+ datasets_items={datasets_items}
311
+ cartItems={cartItems}
312
+ setCartItems={setCartItems}
313
+ />
314
+ </div>
315
+ <div className="mb-2">
316
+ {formatConversionTable && item && (
317
+ <FormatNaming
318
+ item={item}
319
+ cartItems={cartItems}
320
+ setCartItems={setCartItems}
321
+ formatConversionTable={formatConversionTable}
322
+ />
323
+ )}
324
+ </div>
325
+ <div className="mb-2">
326
+ <LayerNaming
327
+ item={item}
328
+ cartItems={cartItems}
329
+ setCartItems={setCartItems}
330
+ />
331
+ </div>
316
332
  </td>
317
333
  <td className="table-td-projections">
318
334
  {!item.file_id ? (
@@ -346,6 +362,10 @@ const CLMSCartContent = (props) => {
346
362
  end={
347
363
  datasetTimeseries.datasets[item.dataset_uid].end
348
364
  }
365
+ period={
366
+ datasetTimeseries.datasets[item.dataset_uid]
367
+ .period
368
+ }
349
369
  item={item}
350
370
  setTimeseriesValue={setTimeseriesValue}
351
371
  />
@@ -353,77 +373,78 @@ const CLMSCartContent = (props) => {
353
373
  <>-</>
354
374
  )}
355
375
  </td>
356
- <td>
357
- {item.task_in_progress ? (
358
- <FontAwesomeIcon icon="spinner" spin />
359
- ) : !item.file_id ? (
360
- <span
361
- className="info-icon"
362
- tooltip="Add a duplicated row below"
363
- direction="up"
364
- >
365
- <button
366
- onClick={() => {
367
- duplicateCartItem(
368
- item.unique_id,
369
- cartItems,
370
- setCartItems,
371
- updateCart,
372
- );
373
- }}
374
- style={{
375
- backgroundColor: 'transparent',
376
- color: 'inherit',
377
- border: 'none',
378
- padding: 0,
379
- font: 'inherit',
380
- cursor: 'pointer',
381
- outline: 'inherit',
382
- }}
376
+ <td className="text-end">
377
+ <div style={{ display: 'flex' }}>
378
+ {item.task_in_progress ? (
379
+ <FontAwesomeIcon icon="spinner" spin />
380
+ ) : !item.file_id ? (
381
+ <span
382
+ className="info-icon"
383
+ tooltip="Add a duplicated row below"
384
+ direction="up"
383
385
  >
384
- <Icon name={addDocumentSVG} size={25} />
385
- </button>
386
- </span>
387
- ) : (
388
- <></>
389
- )}
390
- </td>
391
- <td>
392
- {item.task_in_progress ? (
393
- <FontAwesomeIcon icon="spinner" spin />
394
- ) : (
395
- <span
396
- className="info-icon"
397
- tooltip="Remove this row from the cart"
398
- direction="up"
399
- >
400
- <button
401
- onClick={() => {
402
- removeCartItem(item.unique_id);
403
- }}
404
- style={{
405
- backgroundColor: 'transparent',
406
- color: 'inherit',
407
- border: 'none',
408
- padding: 0,
409
- font: 'inherit',
410
- cursor: 'pointer',
411
- outline: 'inherit',
412
- }}
386
+ <button
387
+ onClick={() => {
388
+ duplicateCartItem(
389
+ item.unique_id,
390
+ cartItems,
391
+ setCartItems,
392
+ updateCart,
393
+ );
394
+ }}
395
+ style={{
396
+ backgroundColor: 'transparent',
397
+ color: 'inherit',
398
+ border: 'none',
399
+ padding: 0,
400
+ font: 'inherit',
401
+ cursor: 'pointer',
402
+ outline: 'inherit',
403
+ }}
404
+ >
405
+ <Icon name={addDocumentSVG} size={25} />
406
+ </button>
407
+ </span>
408
+ ) : (
409
+ <></>
410
+ )}
411
+
412
+ {item.task_in_progress ? (
413
+ <FontAwesomeIcon icon="spinner" spin />
414
+ ) : (
415
+ <span
416
+ className="info-icon"
417
+ tooltip="Remove this row from the cart"
418
+ direction="up"
413
419
  >
414
- <Icon
415
- name={removeSVG}
416
- size={25}
417
- color="#e40166"
418
- />
419
- </button>
420
- </span>
421
- )}
420
+ <button
421
+ onClick={() => {
422
+ removeCartItem(item.unique_id);
423
+ }}
424
+ style={{
425
+ backgroundColor: 'transparent',
426
+ color: 'inherit',
427
+ border: 'none',
428
+ padding: 0,
429
+ font: 'inherit',
430
+ cursor: 'pointer',
431
+ outline: 'inherit',
432
+ }}
433
+ >
434
+ <Icon
435
+ name={removeSVG}
436
+ size={25}
437
+ color="#e40166"
438
+ />
439
+ </button>
440
+ </span>
441
+ )}
442
+ </div>
422
443
  </td>
423
444
  </tr>
424
445
  ))}
425
446
  </tbody>
426
- </table>
447
+ </Table>
427
448
  </Segment>
428
449
  </div>
429
450
  ) : (
@@ -20,6 +20,7 @@ export const CollectionNaming = ({
20
20
  return this_type_collections.length > 1 ? (
21
21
  <Select
22
22
  placeholder="Select type"
23
+ className="collection-selector"
23
24
  value={
24
25
  item.type
25
26
  ? item.type
@@ -18,6 +18,7 @@ export const FormatNaming = ({
18
18
  format_options.length > 1 ? (
19
19
  <Select
20
20
  placeholder="Select format"
21
+ className="format-selector"
21
22
  value={item_format_name}
22
23
  options={format_options}
23
24
  onChange={(e, data) => {
@@ -16,6 +16,7 @@ export const LayerNaming = ({ item, cartItems, setCartItems }) => {
16
16
  this_type_layers[0].layers.length > 0 ? (
17
17
  <Select
18
18
  placeholder="Select layer"
19
+ className="layer-selector"
19
20
  value={
20
21
  item.layer
21
22
  ? item.layer
@@ -8,7 +8,7 @@ import { cclDateFormat } from '@eeacms/volto-clms-theme/components/CclUtils';
8
8
  import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
9
9
 
10
10
  export const TimeseriesPicker = (props) => {
11
- const { start, end, item, setTimeseriesValue } = props;
11
+ const { start, end, period, item, setTimeseriesValue } = props;
12
12
  const [startValue, setStartValue] = useState(
13
13
  item?.TemporalFilter?.StartDate
14
14
  ? new Date(cclDateFormat(item.TemporalFilter.StartDate))
@@ -20,6 +20,23 @@ export const TimeseriesPicker = (props) => {
20
20
  : null,
21
21
  );
22
22
  const [isOpen, setIsOpen] = useState(false);
23
+ const getPeriodicity = (p) => {
24
+ if (p === 1 / 24 || p === 'PT1H') {
25
+ return 'hourly';
26
+ } else if (p === 1 || p === 'P1D') {
27
+ return 'daily';
28
+ } else if (p === 7 || p === 'P7D' || p === 'P1W') {
29
+ return 'weekly';
30
+ } else if (p === 10 || p === 'P10D') {
31
+ return '10-daily';
32
+ } else if ((p >= 28 && p <= 31) || p === 'P1M') {
33
+ return 'monthly';
34
+ } else if (p === 365 || p === 366 || p === 'P1Y') {
35
+ return 'yearly';
36
+ } else {
37
+ return 'not regular';
38
+ }
39
+ };
23
40
  return (
24
41
  <>
25
42
  <Popup
@@ -61,13 +78,15 @@ export const TimeseriesPicker = (props) => {
61
78
  >
62
79
  <Grid.Column className="datetime-picker">
63
80
  <Grid.Row>
81
+ The periodicity of this dataset is {getPeriodicity(period)}
82
+ <br />
64
83
  <DatePicker
65
84
  id="start_date"
66
85
  inline
67
86
  selectsRange
68
87
  className="datepicker"
69
- minDate={new Date(cclDateFormat(start))}
70
- maxDate={new Date(cclDateFormat(end))}
88
+ minDate={new Date(start)}
89
+ maxDate={new Date(end)}
71
90
  startDate={startValue}
72
91
  endDate={endValue}
73
92
  // selectsStart
@@ -1,7 +1,69 @@
1
1
  td {
2
- vertical-align: middle !important;
2
+ vertical-align: top !important;
3
+ }
4
+
5
+ td li {
6
+ margin-bottom: 0.5rem;
7
+ font-size: 1rem !important;
8
+ line-height: 1rem !important;
9
+ }
10
+
11
+ .cart-bounding-boxes {
12
+ margin-top: 0.8rem;
13
+ }
14
+
15
+ .cart-bounding-boxes .ui.label {
16
+ padding: 0;
17
+ background-color: transparent;
18
+ color: #273b4b;
19
+ }
20
+
21
+ .ui.selection.dropdown {
22
+ width: 95%;
23
+ min-height: 1.3rem !important;
24
+ padding: 0 0.3rem !important;
25
+ margin-left: 0 !important;
26
+ background-color: #e5e5e5 !important;
27
+ font-size: 0.8rem !important;
28
+ }
29
+
30
+ .ui.selection.dropdown .menu {
31
+ max-width: 200px;
32
+ background-color: #efefef;
33
+ }
34
+
35
+ .ui.selection.dropdown .menu > .item {
36
+ padding: 0.2rem !important;
37
+ font-size: 0.8rem;
38
+ word-break: break-word;
39
+ }
40
+
41
+ .ui.selection.dropdown > .dropdown.icon {
42
+ width: 2rem !important;
43
+ min-width: 4rem !important;
3
44
  }
4
45
 
5
46
  .cart-table .ui.selection.dropdown .menu > .item {
47
+ padding: 0.4rem !important;
6
48
  word-wrap: break-word;
7
49
  }
50
+
51
+ div.mb-2 {
52
+ margin-bottom: 0.5rem;
53
+ }
54
+
55
+ .info-icon button {
56
+ font-size: 0.8rem !important;
57
+ }
58
+
59
+ .text-end > div {
60
+ justify-content: flex-end;
61
+ }
62
+
63
+ .tag.tag-vector,
64
+ .tag.tag-raster {
65
+ padding: 0;
66
+ background-color: transparent;
67
+ color: black;
68
+ font-weight: 400;
69
+ }
@@ -1061,25 +1061,32 @@ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
1061
1061
  margin: 1rem 0;
1062
1062
  }
1063
1063
 
1064
- .custom-table table {
1064
+ .custom-table table,
1065
+ .custom-table table.ui.table {
1065
1066
  width: 100%;
1067
+ border: initial;
1066
1068
  border-collapse: collapse;
1067
1069
  }
1068
1070
 
1069
- .custom-table th {
1071
+ .custom-table th,
1072
+ .custom-table table.ui.table thead th {
1070
1073
  padding: 0 0.75rem 0.75rem 0;
1071
1074
  border-bottom: solid 1px #a0b128;
1075
+ background-color: transparent;
1072
1076
  color: #a0b128;
1077
+ font-weight: bold;
1073
1078
  text-align: left;
1079
+ text-transform: none;
1074
1080
  }
1075
1081
 
1076
- .custom-table td {
1082
+ .custom-table td,
1083
+ .custom-table table.ui.table td {
1077
1084
  padding: 0.75rem 0.75rem 0.75rem 0;
1078
1085
  }
1079
1086
 
1080
- .custom-table td:last-of-type {
1081
- padding: 0.75rem 0;
1082
- }
1087
+ // .custom-table td:last-of-type {
1088
+ // padding: 0.75rem 0;
1089
+ // }
1083
1090
 
1084
1091
  .custom-table tr:not(:last-of-type) td {
1085
1092
  border-bottom: solid 0.5px #a0b12833;
@@ -1108,6 +1115,13 @@ body:not(.contenttype-lrf:not(.section-cart):not(.section-profile))
1108
1115
  border-bottom: solid 1px #a0b128;
1109
1116
  }
1110
1117
 
1118
+ .custom-table .ui.selection.dropdown.collection-selector:not(.multiple),
1119
+ .custom-table .ui.selection.dropdown.format-selector:not(.multiple),
1120
+ .custom-table .ui.selection.dropdown.layer-selector:not(.multiple) {
1121
+ display: inline-flex;
1122
+ margin-left: 0.5rem;
1123
+ }
1124
+
1111
1125
  .custom-table .ui.selection.active.dropdown .menu:last-child {
1112
1126
  border: none;
1113
1127
  }