Revision 55370
Added by Konstantina Galouni about 5 years ago
community-creation-instructions.component.ts | ||
---|---|---|
5 | 5 |
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service'; |
6 | 6 |
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties'; |
7 | 7 |
|
8 |
declare var UIkit: any; |
|
9 |
|
|
8 | 10 |
@Component({ |
9 | 11 |
selector: 'community-creation-instructions', |
10 | 12 |
template: ` |
... | ... | |
33 | 35 |
<div> |
34 | 36 |
<div> |
35 | 37 |
<div class="uk-margin-bottom uk-margin-top"> |
38 |
<!--div uk-scrollspy="cls: uk-animation-fade uk-animation-reverse; target: > div > div > .uk-card; delay: 1000; repeat: false"--> |
|
36 | 39 |
<div class="uk-container uk-margin-large-top"> |
37 | 40 |
<h3>OpenAIRE Connect managing tool at a glance</h3> |
38 | 41 |
<div class="uk-inline uk-dark"> |
39 | 42 |
<img src="assets/admin-portal.png" alt="OpenAIRE" > |
40 |
<a [attr.uk-tooltip]="'title: ' + createTooltip('Your logo goes here')" |
|
41 |
class="uk-position-absolute uk-transform-center uk-icon uk-marker" |
|
43 |
|
|
44 |
<div id="logo" class="my-tooltip uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
45 |
style="left: 27%; top: 2%"> |
|
46 |
<div class="uk-padding-small uk-text-small uk-text-bold">Your logo goes here</div> |
|
47 |
</div> |
|
48 |
|
|
49 |
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
50 |
style="left: 33%; top: 21%"> |
|
51 |
<div class="uk-padding-small uk-text-small uk-text-bold">Configure your community profile</div> |
|
52 |
</div> |
|
53 |
<div class="my-tooltip uk-width-1-5 uk-card uk-text-center uk-card-secondary uk-position-absolute uk-transform-center" |
|
54 |
style="left: 56%; top: 18%"> |
|
55 |
<div class="uk-padding-small uk-text-small uk-text-bold">Connect with subjects, projects, content providers & Zenodo communities</div> |
|
56 |
</div> |
|
57 |
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
58 |
style="left: 80%; top: 19%"> |
|
59 |
<div class="uk-padding-small uk-text-small uk-text-bold">Choose statistics and charts to be publicly available</div> |
|
60 |
</div> |
|
61 |
|
|
62 |
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
63 |
style="left: 32%; top: 60%"> |
|
64 |
<div class="uk-padding-small uk-text-small uk-text-bold">Curate links of research results</div> |
|
65 |
</div> |
|
66 |
<div class="my-tooltip uk-width-1-5 uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
67 |
style="left: 56%; top: 59%"> |
|
68 |
<div class="uk-padding-small uk-text-small uk-text-bold">Add help texts in your pages for extra information</div> |
|
69 |
</div> |
|
70 |
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
71 |
style="left: 80%; top: 60%"> |
|
72 |
<div class="uk-padding-small uk-text-small uk-text-bold">Invite collaborators and users</div> |
|
73 |
</div> |
|
74 |
|
|
75 |
|
|
76 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Your logo goes here')"--> |
|
77 |
<!--uk-toggle="target: #logo; mode: click"--> |
|
78 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" |
|
42 | 79 |
style="left: 20%; top: 5%" uk-marker> |
43 | 80 |
<!--span uk-icon="plus"></span--> |
44 | 81 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
45 | 82 |
</a> |
46 | 83 |
|
47 |
<a [attr.uk-tooltip]="'title: ' + createTooltip('Confugure your community profile')"
|
|
48 |
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
84 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Configure your community profile') + '; cls: conf-profile'"-->
|
|
85 |
<a class="configure-profile uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
49 | 86 |
style="left: 22%; top: 24%" uk-marker> |
50 |
<!--span uk-icon="plus"></span--> |
|
51 | 87 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
52 | 88 |
</a> |
53 |
<a [attr.uk-tooltip]="'title: ' + createTooltip('Connect with subjects, projects, content providers & Zenodo communities')"
|
|
54 |
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
89 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Connect with subjects, projects, content providers & Zenodo communities')"-->
|
|
90 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
55 | 91 |
style="left: 46%; top: 24%" uk-marker> |
56 | 92 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
57 | 93 |
</a> |
58 |
<a [attr.uk-tooltip]="'title: ' + createTooltip('Choose statistics and charts to be publicly available')"
|
|
59 |
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
94 |
<!-- [attr.uk-tooltip]="'title: ' + createTooltip('Choose statistics and charts to be publicly available')"-->
|
|
95 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
60 | 96 |
style="left: 70%; top: 24%" uk-marker> |
61 | 97 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
62 | 98 |
</a> |
63 | 99 |
|
64 |
<a [attr.uk-tooltip]="'title: ' + createTooltip('Curate links of research results')"
|
|
65 |
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
66 |
style="left: 22%; top: 64%" uk-marker>
|
|
100 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Curate links of research results')"-->
|
|
101 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
102 |
style="left: 22%; top: 64%" uk-marker> |
|
67 | 103 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
68 | 104 |
</a> |
69 |
<a [attr.uk-tooltip]="'title: ' + createTooltip('Add help texts in your pages for extra information')"
|
|
70 |
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
105 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Add help texts in your pages for extra information')"-->
|
|
106 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
71 | 107 |
style="left: 46%; top: 64%" uk-marker> |
72 | 108 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
73 | 109 |
</a> |
74 |
<a [attr.uk-tooltip]="'title: ' + createTooltip('Invite collaborators and users')"
|
|
75 |
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
110 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Invite collaborators and users')"-->
|
|
111 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
76 | 112 |
style="left: 70%; top: 64%" uk-marker> |
77 | 113 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
78 | 114 |
</a> |
115 |
|
|
79 | 116 |
</div> |
80 | 117 |
</div> |
118 |
</div> |
|
81 | 119 |
|
82 | 120 |
<div class="uk-container uk-margin-large-top"> |
83 | 121 |
<h3>Community public page</h3> |
... | ... | |
92 | 130 |
</div> |
93 | 131 |
<div class="uk-width-2-3 uk-text-center"> |
94 | 132 |
<div class="uk-inline uk-dark"> |
95 |
<img src="assets/community-first-page.png" alt="OpenAIRE"> |
|
96 |
<a [attr.uk-tooltip]="'title: ' + createTooltip('Community content at a glance')" |
|
97 |
class="uk-position-absolute uk-transform-center uk-icon uk-marker" |
|
98 |
style="right: 6%; top: 16%" uk-marker> |
|
133 |
<img src="assets/community-first-page.jpg" alt="OpenAIRE"> |
|
134 |
|
|
135 |
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
136 |
style="left: 80%; top: 31%"> |
|
137 |
<div class="uk-padding-small uk-text-small uk-text-bold">Community content at a glance</div> |
|
138 |
</div> |
|
139 |
<div class="my-tooltip uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
140 |
style="left: 57%; top: 38%"> |
|
141 |
<div class="uk-padding-small uk-text-small uk-text-bold">Locate Research Results</div> |
|
142 |
</div> |
|
143 |
<div class="my-tooltip uk-width-1-4 uk-text-center uk-card uk-card-secondary uk-position-absolute uk-transform-center" |
|
144 |
style="left: 48%; top: 58%"> |
|
145 |
<div class="uk-padding-small uk-text-small uk-text-bold">Recent research results and related graphs</div> |
|
146 |
</div> |
|
147 |
|
|
148 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Community content at a glance')"--> |
|
149 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker" |
|
150 |
style="right: 6%; top: 28%" uk-marker> |
|
99 | 151 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
100 | 152 |
</a> |
101 |
<a [attr.uk-tooltip]="'title: ' + createTooltip('Locate Research Results')"
|
|
102 |
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
103 |
style="right: 26%; top: 36%" uk-marker>
|
|
153 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Locate Research Results')"-->
|
|
154 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
155 |
style="left: 45%; top: 40%" uk-marker>
|
|
104 | 156 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
105 | 157 |
</a> |
106 |
<a [attr.uk-tooltip]="'title: ' + createTooltip('Recent research results and related graphs')"
|
|
107 |
class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
108 |
style="left: 60%; top: 54%" uk-marker>
|
|
158 |
<!--[attr.uk-tooltip]="'title: ' + createTooltip('Recent research results and related graphs')"-->
|
|
159 |
<a class="uk-position-absolute uk-transform-center uk-icon uk-marker"
|
|
160 |
style="left: 35%; top: 55%" uk-marker>
|
|
109 | 161 |
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="marker"><rect x="9" y="4" width="1" height="11"></rect><rect x="4" y="9" width="11" height="1"></rect></svg> |
110 | 162 |
</a> |
111 | 163 |
</div> |
... | ... | |
113 | 165 |
</div> |
114 | 166 |
</div> |
115 | 167 |
</div> |
116 |
</div>
|
|
168 |
<!--/div-->
|
|
117 | 169 |
</div> |
118 | 170 |
|
119 | 171 |
<div class="uk-section-muted uk-margin-large-top"> |
120 |
<div class="uk-container uk-container-large"> |
|
121 |
<div class="uk-margin-large-top uk-margin-large-bottom"> |
|
122 |
<div class="uk-margin uk-panel"> |
|
123 |
<h4 class="uk-margin uk-h4 uk-text-bold"> |
|
124 |
Why trust OpenAIRE? |
|
125 |
</h4> |
|
126 |
<ul class="uk-list uk-margin-left"> |
|
127 |
<li>It is the Open Access Infrastructure for Europe.</li> |
|
128 |
<li>It is community based and independent.</li> |
|
129 |
<li>Provides organizational and technical framework to support OpenScience.</li> |
|
130 |
<li>It is part of the European Open Science Cloud.</li> |
|
131 |
<li>Provides access to over 25 million research outputs and services that enable their access, link and reuse.</li> |
|
132 |
<li>Ensures that all data come from trusted sources.</li> |
|
133 |
</ul> |
|
172 |
<div class="uk-container uk-container-large"> |
|
173 |
<div class="uk-margin-large-top uk-margin-large-bottom"> |
|
174 |
<div class="uk-margin uk-panel"> |
|
175 |
<h4 class="uk-margin uk-h4 uk-text-bold"> |
|
176 |
Why trust OpenAIRE? |
|
177 |
</h4> |
|
178 |
|
|
179 |
<div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid |
|
180 |
uk-scrollspy="target: > div; cls:uk-animation-fade; delay: 500"> |
|
181 |
<div> |
|
182 |
<div class="uk-card uk-card-default uk-card-body"> |
|
183 |
<p class="">It is the Open Access Infrastructure for Europe.</p> |
|
184 |
</div> |
|
134 | 185 |
</div> |
186 |
<div> |
|
187 |
<div class="uk-card uk-card-default uk-card-body"> |
|
188 |
<p>It is community based and independent.</p> |
|
189 |
</div> |
|
190 |
</div> |
|
191 |
<div> |
|
192 |
<div class="uk-card uk-card-default uk-card-body"> |
|
193 |
<p>Provides organizational and technical framework to support OpenScience.</p> |
|
194 |
</div> |
|
195 |
</div> |
|
196 |
<div> |
|
197 |
<div class="uk-card uk-card-default uk-card-body"> |
|
198 |
<p>Provides access to over 25 million research outputs and services that enable their access, link and reuse.</p> |
|
199 |
</div> |
|
200 |
</div> |
|
201 |
<div> |
|
202 |
<div class="uk-card uk-card-default uk-card-body"> |
|
203 |
<p>Provides organizational and technical framework to support OpenScience.</p> |
|
204 |
</div> |
|
205 |
</div> |
|
206 |
<div> |
|
207 |
<div class="uk-card uk-card-default uk-card-body"> |
|
208 |
<p>Ensures that all data come from trusted sources.</p> |
|
209 |
</div> |
|
210 |
</div> |
|
211 |
</div> |
|
212 |
</div> |
|
135 | 213 |
</div> |
136 | 214 |
</div> |
137 | 215 |
|
... | ... | |
165 | 243 |
if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){ |
166 | 244 |
this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect | Create and manage your community page", this.properties.piwikSiteId).subscribe(); |
167 | 245 |
} |
246 |
|
|
247 |
UIkit.tooltip('.configure-profile').show(); |
|
168 | 248 |
}); |
169 | 249 |
} |
170 | 250 |
|
251 |
public ngAfterViewInit() { |
|
252 |
if (document !== undefined) { |
|
253 |
if (document.getElementById('enableFadeOutScrollScript')) { |
|
254 |
document.getElementById('enableFadeOutScrollScript').remove(); |
|
255 |
} |
|
256 |
|
|
257 |
const enableFadeOutScrollScript = document.createElement('script'); |
|
258 |
enableFadeOutScrollScript.setAttribute('id', 'enableFadeOutScrollScript'); |
|
259 |
enableFadeOutScrollScript.innerHTML = '\n' + |
|
260 |
'$(document).ready(function() {\n' + |
|
261 |
'\n' + |
|
262 |
' $(window).scroll( function(){\n' + |
|
263 |
'\n' + |
|
264 |
' $(\'.my-tooltip\').each( function(i){\n' + |
|
265 |
'\n' + |
|
266 |
' var bottom_of_object = $(this).position().top + $(this).outerHeight();\n' + |
|
267 |
' var bottom_of_window = $(window).scrollTop() + $(window).height();\n' + |
|
268 |
'\n' + |
|
269 |
' if( bottom_of_window > bottom_of_object ){\n' + |
|
270 |
'\n' + |
|
271 |
' $(this).animate({\'opacity\':\'1\'},1500);\n' + |
|
272 |
'\n' + |
|
273 |
' }\n' + |
|
274 |
'\n' + |
|
275 |
' });\n' + |
|
276 |
'\n' + |
|
277 |
' });\n' + |
|
278 |
'\n' + |
|
279 |
' });'; |
|
280 |
|
|
281 |
document.body.appendChild(enableFadeOutScrollScript); |
|
282 |
} |
|
283 |
} |
|
284 |
|
|
171 | 285 |
public ngOnDestroy() { |
172 | 286 |
if(this.piwiksub){ |
173 | 287 |
this.piwiksub.unsubscribe(); |
Also available in: Unified diff
[Trunk|Connect]:
1. communities.component: Tooltip (description) position: bottom-right.
2. ommunity-creation-instructions.component & admin-portal.png & community-first-page.jpg & connect-custom.css:
Pictures for 'How to create and manage community' page changed.
Tooltips replaced by divs with calculated position, which open with javascript on scrolling.
connect-custom.css: 'my-tooltip' class added for setting opacity to 0.