@eeacms/volto-clms-theme 1.0.77 → 1.0.80

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 (7) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/package.json +1 -1
  3. package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx +18 -8
  4. package/src/components/CLMSDownloadCartView/cartUtils.js +4 -4
  5. package/src/components/CclCard/CclCard.jsx +140 -124
  6. package/src/components/CclCard/cards.less +18 -6
  7. package/src/components/CclDownloadTable/CclDownloadTable.jsx +10 -6
package/CHANGELOG.md CHANGED
@@ -4,8 +4,34 @@ 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.0.80](https://github.com/eea/volto-clms-theme/compare/1.0.79...1.0.80)
8
+
9
+ - Card image border [`#226`](https://github.com/eea/volto-clms-theme/pull/226)
10
+ - pre-download modal [`d91209f`](https://github.com/eea/volto-clms-theme/commit/d91209f1b01f47217eb7ca330f5bfdcae0d10c74)
11
+ - hide text when not logged in [`c4b88e5`](https://github.com/eea/volto-clms-theme/commit/c4b88e5d4960d5b3d752d9d8852bfe1bb0911bca)
12
+
13
+ #### [1.0.79](https://github.com/eea/volto-clms-theme/compare/1.0.78...1.0.79)
14
+
15
+ > 4 March 2022
16
+
17
+ - Develop [`#225`](https://github.com/eea/volto-clms-theme/pull/225)
18
+ - Bugs n improvements [`#224`](https://github.com/eea/volto-clms-theme/pull/224)
19
+ - Card image border [`e8b01d5`](https://github.com/eea/volto-clms-theme/commit/e8b01d567e483658b6c2b653d781d55e4ec4aac9)
20
+ - Card image border [`2255b89`](https://github.com/eea/volto-clms-theme/commit/2255b8983fce645fcf792f3ba6c0b149c2dea845)
21
+
22
+ #### [1.0.78](https://github.com/eea/volto-clms-theme/compare/1.0.77...1.0.78)
23
+
24
+ > 4 March 2022
25
+
26
+ - Card link [`#223`](https://github.com/eea/volto-clms-theme/pull/223)
27
+ - refactor card link [`e3ab510`](https://github.com/eea/volto-clms-theme/commit/e3ab51012c21a1bc62e2600431aac225dbd76003)
28
+ - add link to the entire card [`aee0981`](https://github.com/eea/volto-clms-theme/commit/aee09811585c925a050347259bb10369c0ec4845)
29
+
7
30
  #### [1.0.77](https://github.com/eea/volto-clms-theme/compare/1.0.76...1.0.77)
8
31
 
32
+ > 3 March 2022
33
+
34
+ - Develop [`#222`](https://github.com/eea/volto-clms-theme/pull/222)
9
35
  - cardContainerBlock refactoring, remove cardBlock and make ImageEditor… [`#221`](https://github.com/eea/volto-clms-theme/pull/221)
10
36
  - fix image uploading workflow [`86c10e6`](https://github.com/eea/volto-clms-theme/commit/86c10e6b9bf2d0e82aa1415539d291d04b6f86e9)
11
37
  - cardContainerBlock refactoring, remove cardBlock and make ImageEditor reusable [`2292c6b`](https://github.com/eea/volto-clms-theme/commit/2292c6bdb11eeac3f99df080b096b2d923ed2926)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eeacms/volto-clms-theme",
3
- "version": "1.0.77",
3
+ "version": "1.0.80",
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",
package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx CHANGED
@@ -376,12 +376,22 @@ const CLMSCartContent = (props) => {
376
376
  open={openedModal}
377
377
  // trigger={trigger}
378
378
  className={'modal-clms'}
379
- size={'fullscreen'}
379
+ size={'tiny'}
380
380
  >
381
- <Modal.Header>Download processing</Modal.Header>
382
381
  <Modal.Content>
383
382
  <div className={'modal-clms-background'}>
384
- <div className={'modal-clms-container'}>
383
+ <div>
384
+ <div className={'modal-close modal-clms-close'}>
385
+ <span
386
+ className="ccl-icon-close"
387
+ aria-label="Close"
388
+ onClick={() => setOpenedModal(false)}
389
+ onKeyDown={() => setOpenedModal(false)}
390
+ tabIndex="0"
391
+ role="button"
392
+ ></span>
393
+ </div>
394
+ <p>Download processing</p>
385
395
  {'The download is going to be processed in two different files.'}
386
396
  <br />
387
397
  <br />
@@ -408,11 +418,6 @@ const CLMSCartContent = (props) => {
408
418
  <Modal.Actions>
409
419
  <Grid columns={2} stackable textAlign="center">
410
420
  <Grid.Row verticalAlign="middle">
411
- <Grid.Column>
412
- <CclButton onClick={() => setOpenedModal(false)}>
413
- Cancel
414
- </CclButton>
415
- </Grid.Column>
416
421
  <Grid.Column>
417
422
  <CclButton
418
423
  mode={'filled'}
@@ -424,6 +429,11 @@ const CLMSCartContent = (props) => {
424
429
  Accept
425
430
  </CclButton>
426
431
  </Grid.Column>
432
+ <Grid.Column>
433
+ <CclButton onClick={() => setOpenedModal(false)}>
434
+ Cancel
435
+ </CclButton>
436
+ </Grid.Column>
427
437
  </Grid.Row>
428
438
  </Grid>
429
439
  </Modal.Actions>
package/src/components/CLMSDownloadCartView/cartUtils.js CHANGED
@@ -4,13 +4,13 @@ export const getDownloadToolPostBody = (selectedItems) => {
4
4
  if (item.file_id) {
5
5
  body_extras['FileID'] = item.file_id;
6
6
  } else {
7
- if (item.area.type === 'polygon') {
7
+ if (item.area?.type === 'polygon') {
8
8
  body_extras['BoundingBox'] = item.area.value;
9
9
  }
10
- if (item.area.type === 'nuts') {
10
+ if (item.area?.type === 'nuts') {
11
11
  body_extras['NUTS'] = item.area.value;
12
12
  }
13
- if (item.timeExtent.length > 0) {
13
+ if (item.timeExtent?.length > 0) {
14
14
  body_extras['TemporalFilter'] = {
15
15
  StartDate: item.timeExtent[0],
16
16
  EndDate: item.timeExtent[1],
@@ -56,7 +56,7 @@ export const getCartObjectFromMapviewer = (
56
56
  nutsnames,
57
57
  ) => {
58
58
  const area = local_cart_data.area;
59
- if (area.type === 'nuts' && Object.keys(nutsnames).includes(area.value)) {
59
+ if (area?.type === 'nuts' && Object.keys(nutsnames).includes(area.value)) {
60
60
  area.valueName = nutsnames[area.value];
61
61
  }
62
62
  return {
package/src/components/CclCard/CclCard.jsx CHANGED
@@ -25,17 +25,23 @@ const CardImage = ({ card, size = 'preview', isCustomCard }) => {
25
25
  );
26
26
  };
27
27
 
28
- const CardLink = ({ url, title }) => {
28
+ const CardLink = ({ url, children, className, condition = true }) => {
29
29
  function hasProtocol(protocolUrl) {
30
30
  return (
31
31
  protocolUrl.startsWith('https://') || protocolUrl.startsWith('http://')
32
32
  );
33
33
  }
34
34
  const RenderElement = hasProtocol(url) ? 'a' : Link;
35
- return hasProtocol(url) ? (
36
- <RenderElement href={url}>{title || 'Card default title'}</RenderElement>
35
+ return !condition ? (
36
+ children
37
+ ) : hasProtocol(url) ? (
38
+ <RenderElement className={className} href={url}>
39
+ {children}
40
+ </RenderElement>
37
41
  ) : (
38
- <RenderElement to={url}>{title || 'Card default title'}</RenderElement>
42
+ <RenderElement className={className} to={url}>
43
+ {children}
44
+ </RenderElement>
39
45
  );
40
46
  };
41
47
 
@@ -99,136 +105,146 @@ function CclCard(props) {
99
105
  'threeColumns',
100
106
  'globalSearch',
101
107
  ];
108
+ const wrapperClass =
109
+ 'card-' + (type === 'globalSearch' ? 'doc' : type || 'line');
102
110
  return (
103
- <div
104
- tabIndex="0"
105
- role="button"
106
- onClick={() => onClickImage()}
107
- onKeyDown={() => onClickImage()}
108
- className={'card-' + (type === 'globalSearch' ? 'doc' : type || 'line')}
111
+ <CardLink
112
+ url={url}
113
+ className={wrapperClass}
114
+ condition={type === 'block' || type === 'threeColumns'}
109
115
  >
110
- {conditional_types.includes(type) ? (
111
- <>
112
- {type === 'doc' && (
113
- <>
114
- <DocCard card={card} url={url} showEditor={showEditor}>
115
- {children}
116
- </DocCard>
117
- </>
118
- )}
119
- {type === 'globalSearch' && (
120
- <>
121
- <Label ribbon="right" color="olive">
122
- {content_type}
123
- </Label>
124
- <DocCard card={card} url={url} showEditor={showEditor}>
125
- {children}
126
- </DocCard>
127
- </>
128
- )}
129
- {(type === 'block' || type === 'threeColumns') && (
130
- <>
131
- <div className={`card-${type}-image`}>
132
- {isCustomCard && CclImageEditor ? (
133
- CclImageEditor
134
- ) : (
135
- <CardImage
136
- isCustomCard={isCustomCard}
137
- card={card}
138
- size={'preview'}
139
- />
140
- )}
141
- </div>
142
- <div className="card-text">
143
- <div className="card-title">
144
- <CardLink url={url} title={card?.title} />
145
- </div>
146
- <div className="card-description">{card?.description}</div>
147
- {children}
148
- </div>
149
- </>
150
- )}
151
- {type === 'news' && (
152
- <>
153
- <div className="card-news-image">
154
- {isCustomCard && CclImageEditor ? (
155
- CclImageEditor
156
- ) : (
157
- <CardImage
158
- isCustomCard={isCustomCard}
159
- card={card}
160
- size={'mini'}
161
- />
162
- )}
163
- </div>
164
- <div className="card-news-text">
165
- <div className="card-news-title">
166
- <CardLink url={url} title={card?.title} />
167
- </div>
168
- <div className="card-news-date">
169
- {new Date(card?.effective).toLocaleString()}
116
+ <div
117
+ tabIndex="0"
118
+ role="button"
119
+ onClick={() => onClickImage()}
120
+ onKeyDown={() => onClickImage()}
121
+ className={
122
+ !(type === 'block' || type === 'threeColumns') && wrapperClass
123
+ }
124
+ >
125
+ {conditional_types.includes(type) ? (
126
+ <>
127
+ {type === 'doc' && (
128
+ <>
129
+ <DocCard card={card} url={url} showEditor={showEditor}>
130
+ {children}
131
+ </DocCard>
132
+ </>
133
+ )}
134
+ {type === 'globalSearch' && (
135
+ <>
136
+ <Label ribbon="right" color="olive">
137
+ {content_type}
138
+ </Label>
139
+ <DocCard card={card} url={url} showEditor={showEditor}>
140
+ {children}
141
+ </DocCard>
142
+ </>
143
+ )}
144
+ {(type === 'block' || type === 'threeColumns') && (
145
+ <>
146
+ <div className={`card-${type}-image`}>
147
+ {isCustomCard && CclImageEditor ? (
148
+ CclImageEditor
149
+ ) : (
150
+ <CardImage
151
+ isCustomCard={isCustomCard}
152
+ card={card}
153
+ size={'preview'}
154
+ />
155
+ )}
170
156
  </div>
171
- <p className="card-news-description">{card?.description}</p>
172
- </div>
173
- </>
174
- )}
175
- {type === 'event' && (
176
- <>
177
- <div className={'card-event-text'}>
178
- <div className="card-event-title">
179
- <CardLink url={url} title={card?.title} />
157
+ <div className="card-text">
158
+ <div className="card-title">{card?.title}</div>
159
+ <div className="card-description">{card?.description}</div>
160
+ {children}
180
161
  </div>
181
- <div className="card-event-when">
182
- <FontAwesomeIcon icon={['far', 'calendar-alt']} />
183
- <div className="card-event-when-text">
184
- <When
185
- start={card.start}
186
- end={card.whole_day ? card.start : card.end}
187
- whole_day={card.whole_day}
162
+ </>
163
+ )}
164
+ {type === 'news' && (
165
+ <>
166
+ <div className="card-news-image">
167
+ {isCustomCard && CclImageEditor ? (
168
+ CclImageEditor
169
+ ) : (
170
+ <CardImage
171
+ isCustomCard={isCustomCard}
172
+ card={card}
173
+ size={'mini'}
188
174
  />
175
+ )}
176
+ </div>
177
+ <div className="card-news-text">
178
+ <div className="card-news-title">
179
+ <CardLink url={url}>{card?.title}</CardLink>
180
+ {/* <CardLink url={url} title={card?.title} /> */}
189
181
  </div>
182
+ <div className="card-news-date">
183
+ {new Date(card?.effective).toLocaleString()}
184
+ </div>
185
+ <p className="card-news-description">{card?.description}</p>
190
186
  </div>
191
- {card?.location ? (
192
- <div className="card-event-where">
193
- <>
194
- <FontAwesomeIcon icon={['fas', 'map-marker-alt']} />
195
- <div className="card-event-where-text">
196
- {card?.location}
197
- </div>
198
- </>
187
+ </>
188
+ )}
189
+ {type === 'event' && (
190
+ <>
191
+ <div className={'card-event-text'}>
192
+ <div className="card-event-title">
193
+ <CardLink url={url}>{card?.title}</CardLink>
194
+ {/* <CardLink url={url} title={card?.title} /> */}
199
195
  </div>
200
- ) : (
201
- ''
202
- )}
203
- <p className="card-event-description">{card?.description}</p>
204
- </div>
205
- </>
206
- )}
207
- </>
208
- ) : (
209
- <>
210
- <div className="card-image">
211
- {isCustomCard && CclImageEditor ? (
212
- CclImageEditor
213
- ) : (
214
- <CardImage
215
- isCustomCard={isCustomCard}
216
- card={card}
217
- size={'mini'}
218
- />
196
+ <div className="card-event-when">
197
+ <FontAwesomeIcon icon={['far', 'calendar-alt']} />
198
+ <div className="card-event-when-text">
199
+ <When
200
+ start={card.start}
201
+ end={card.whole_day ? card.start : card.end}
202
+ whole_day={card.whole_day}
203
+ />
204
+ </div>
205
+ </div>
206
+ {card?.location ? (
207
+ <div className="card-event-where">
208
+ <>
209
+ <FontAwesomeIcon icon={['fas', 'map-marker-alt']} />
210
+ <div className="card-event-where-text">
211
+ {card?.location}
212
+ </div>
213
+ </>
214
+ </div>
215
+ ) : (
216
+ ''
217
+ )}
218
+ <p className="card-event-description">{card?.description}</p>
219
+ </div>
220
+ </>
219
221
  )}
220
- </div>
221
- <div className={'card-text'}>
222
- <div className="card-title">
223
- <CardLink url={url} title={card?.title} />
224
- {/* <Link to={url}>{card?.title || 'Card default title'}</Link> */}
222
+ </>
223
+ ) : (
224
+ <>
225
+ <div className="card-image">
226
+ {isCustomCard && CclImageEditor ? (
227
+ CclImageEditor
228
+ ) : (
229
+ <CardImage
230
+ isCustomCard={isCustomCard}
231
+ card={card}
232
+ size={'mini'}
233
+ />
234
+ )}
235
+ </div>
236
+ <div className={'card-text'}>
237
+ <div className="card-title">
238
+ <CardLink url={url}>{card?.title}</CardLink>
239
+ {/* <CardLink url={url} title={card?.title} /> */}
240
+ </div>
241
+ <div className="card-description">{card?.description}</div>
242
+ {children}
225
243
  </div>
226
- <div className="card-description">{card?.description}</div>
227
- {children}
228
- </div>
229
- </>
230
- )}
231
- </div>
244
+ </>
245
+ )}
246
+ </div>
247
+ </CardLink>
232
248
  );
233
249
  }
234
250
 
package/src/components/CclCard/cards.less CHANGED
@@ -14,12 +14,15 @@
14
14
  }
15
15
 
16
16
  .card-line .card-image {
17
+ width: 10rem;
18
+ height: 8rem;
19
+ border: solid 1px #a0b12833;
17
20
  margin-right: 1rem;
18
21
  }
19
22
 
20
23
  .card-line img {
21
- width: 8rem;
22
- height: 6rem;
24
+ width: 100%;
25
+ height: 100%;
23
26
  object-fit: cover;
24
27
  }
25
28
 
@@ -59,6 +62,7 @@
59
62
  .card-line-color .card-image {
60
63
  width: 12rem;
61
64
  height: 12rem;
65
+ border: solid 1px #a0b12833;
62
66
  margin: 0;
63
67
  }
64
68
 
@@ -101,6 +105,7 @@
101
105
 
102
106
  .card-block .card-block-image {
103
107
  height: 12rem;
108
+ border: solid 1px #a0b12833;
104
109
  }
105
110
 
106
111
  .card-block img {
@@ -137,6 +142,7 @@
137
142
 
138
143
  .card-threeColumns .card-threeColumns-image {
139
144
  height: 12rem;
145
+ border: solid 1px #a0b12833;
140
146
  }
141
147
 
142
148
  .card-threeColumns img {
@@ -186,13 +192,16 @@
186
192
  }
187
193
 
188
194
  .card-news .card-news-image {
195
+ width: 10rem;
196
+ height: 10rem;
189
197
  flex-shrink: 0;
198
+ border: solid 1px #a0b12833;
190
199
  margin-right: 1.5rem;
191
200
  }
192
201
 
193
202
  .card-news .card-news-image img {
194
- width: 10rem;
195
- height: 10rem;
203
+ width: 100%;
204
+ height: 100%;
196
205
  object-fit: cover;
197
206
  }
198
207
 
@@ -249,13 +258,16 @@
249
258
  }
250
259
 
251
260
  .card-event .card-event-image {
261
+ width: 10rem;
262
+ height: 10rem;
252
263
  flex-shrink: 0;
264
+ border: solid 1px #a0b12833;
253
265
  margin-right: 1.5rem;
254
266
  }
255
267
 
256
268
  .card-event .card-event-image img {
257
- width: 10rem;
258
- height: 10rem;
269
+ width: 100%;
270
+ height: 100%;
259
271
  object-fit: cover;
260
272
  }
261
273
 
package/src/components/CclDownloadTable/CclDownloadTable.jsx CHANGED
@@ -180,13 +180,17 @@ function CclDownloadTable(props) {
180
180
  </div>
181
181
  </div>
182
182
  )}
183
- <strong>{` ${cartSelection.length} selected file(s)`}</strong>
184
- {cartSelection.length > 0 && (
183
+ {isLoggedIn && (
185
184
  <>
186
- {' - '}
187
- <Button basic color="olive" onClick={clearSelection}>
188
- Clear selection <Icon name={clearSVG} size={20}></Icon>
189
- </Button>
185
+ <strong>{` ${cartSelection.length} selected file(s)`}</strong>
186
+ {cartSelection.length > 0 && (
187
+ <>
188
+ {' - '}
189
+ <Button basic color="olive" onClick={clearSelection}>
190
+ Clear selection <Icon name={clearSVG} size={20}></Icon>
191
+ </Button>
192
+ </>
193
+ )}
190
194
  </>
191
195
  )}
192
196
  </Segment>