Create a Gallery view
Ember
React
Component
1
import Component from '@glimmer/component';
2
import { action } from '@ember/object';
3
import { triggerSmartAction, deleteRecords, getCollectionId, loadExternalStyle, loadExternalJavascript } from 'client/utils/smart-view-utils';
4
5
export default class extends Component {
6
@action
7
triggerSmartAction(...args) {
8
return triggerSmartAction(this, ...args);
9
}
10
11
@action
12
deleteRecords(...args) {
13
return deleteRecords(this, ...args);
14
}
15
}
Copied!
Component
1
import React from 'react';
2
import WithEmberSupport from 'ember-react-components';
3
4
@WithEmberSupport
5
export default class extends React.Component {
6
render() {
7
const {
8
records,
9
collection,
10
numberOfPages,
11
recordsCount,
12
currentPage,
13
searchValue,
14
isLoading,
15
fetchRecords,
16
} = this.props;
17
18
const goBack = () => {
19
if (currentPage > 1) {
20
return fetchRecords({ page: currentPage - 1 })
21
}
22
};
23
const goNext = () => {
24
if (currentPage < numberOfPages) {
25
return fetchRecords({ page: currentPage + 1 })
26
}
27
28
};
29
30
return (
31
<div className="l-gallery-view-container">
32
<section className="c-gallery">
33
{records.map(record => {
34
const models = [collection.id, record.id];
35
const baseUrl = window.location.href.split('/').slice(3, 7);
36
return (
37
<a href={`/${baseUrl.join('/')}/${collection.id}/index/record/${collection.id}/${record.id}/details`}
38
className="c-gallery__image-container"
39
key={record.id}
40
>
41
<img className="c-gallery__image" src={record['forest-picture']}/>
42
</a>
43
);
44
})
45
}
46
</section>
47
48
<div className="c-gallery-footer">
49
<div className="c-beta-paginator">
50
<div className="c-beta-paginator__left" onClick={goBack} role="button">
51
<i className="material-icons c-beta-paginator__chevron c-beta-paginator__chevron--left">keyboard_arrow_left</i>
52
</div>
53
54
<span className="c-beta-paginator__separator"/>
55
56
<div data-test-input-for="count" className="c-beta-paginator__count">{currentPage} of {numberOfPages}</div>
57
58
<span className="c-beta-paginator__separator"/>
59
60
<div className="c-beta-paginator__right" onClick={goNext} role="button">
61
<i className="material-icons c-beta-paginator__chevron c-beta-paginator__chevron--right">keyboard_arrow_right</i>
62
</div>
63
</div>
64
</div>
65
</div>
66
);
67
}
68
}
Copied!
Ember
React
Style
1
.l-gallery-view-container {
2
flex-grow: 1;
3
width: 100%;
4
height: 100%;
5
overflow: hidden;
6
position: relative;
7
}
8
.c-gallery {
9
padding: 15px;
10
overflow-y: auto;
11
width: 100%;
12
position: absolute;
13
left: 0;
14
top: 0;
15
bottom: 40px;
16
}
17
.c-gallery__image {
18
height: 182px;
19
width: 182px;
20
margin: 3px;
21
border: 1px solid var(--color-beta-on-surface_border);
22
border-radius: 3px;
23
transition: all .3s ease-out;
24
}
25
.c-gallery__image:hover {
26
transform: scale(1.05);
27
}
Copied!
Style
1
.l-gallery-view-container {
2
flex-grow: 1;
3
width: 100%;
4
height: 100%;
5
overflow: hidden;
6
position: relative;
7
}
8
.c-gallery {
9
padding: 15px;
10
overflow-y: auto;
11
width: 100%;
12
position: absolute;
13
left: 0;
14
top: 0;
15
bottom: 40px;
16
}
17
.c-gallery__image {
18
height: 182px;
19
width: 182px;
20
margin: 3px;
21
border: 1px solid var(--color-beta-on-surface_border);
22
border-radius: 3px;
23
transition: all .3s ease-out;
24
}
25
.c-gallery__image:hover {
26
transform: scale(1.05);
27
}
28
29
.c-gallery-footer {
30
position: absolute;
31
bottom: 0;
32
left: 0;
33
right: 0;
34
width: 100%;
35
height: 40px;
36
background-color: var(--color-beta-surface);
37
display: flex;
38
flex-direction: row;
39
align-items: center;
40
border-top-width: 1px;
41
border-top-style: solid;
42
border-top-color: var(--color-beta-on-surface_border);
43
border-radius: 0px 0px 4px 4px;
44
justify-content: center;
45
}
Copied!
Ember
Template
1
<div class="l-gallery-view-container">
2
<section class="c-gallery">
3
{{#each @records as |record|}}
4
<LinkTo
5
@route="project.rendering.data.collection.list.view-edit.details"
6
@models={{array @collection.id record.id}}
7
class="c-gallery__image-container"
8
>
9
<img class="c-gallery__image" src={{record.forest-picture}}>
10
</LinkTo>
11
{{/each}}
12
</section>
13
14
<Table::TableFooter
15
@collection={{@collection}}
16
@viewList={{@viewList}}
17
@records={{@records}}
18
@currentPage={{@currentPage}}
19
@numberOfPages={{@numberOfPages}}
20
@recordsCount={{@recordsCount}}
21
@isLoading={{@isLoading}}
22
@fetchRecords={{@fetchRecords}}
23
/>
24
</div>
Copied!
Last modified 3mo ago
Copy link