MOBILE-3153 usertours: Update design
Noel De Martin
parent
22c482bdda
commit
0db4781814
|
|
@ -0,0 +1 @@
|
||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202 98"><path fill-rule="evenodd" clip-rule="evenodd" d="M98.269 84.491c1.654.528 10.173 2.987 25.555 7.378l13.172-21.987 1.308-12.462-11.649-8.533-12.69-4.665 5.051-19.274-3.955-4.534-5.864 1.961-7.052 26.911-3.439-.148-5.382 2.166-4.591 11.492 7.54 15.381c-.324 3.682.342 5.787 1.996 6.314Z" fill="#fff"/><path d="M117.797 47.53c-1.169-.307-2.275-.156-3.317.452-1.043.608-1.717 1.494-2.022 2.66l-1.106 4.22-1.058-.277.803-3.067c.277-1.055 6.047-23.565 6.047-23.565.381-1.454-.597-3.654-2.779-4.226-2.182-.571-4.113.866-4.494 2.32-.381 1.455-1.345 5.078-1.61 6.09l-8.252 31.489-.8-1.267 1.487-5.672c.276-1.055.158-2.044-.354-2.965-.513-.922-1.298-1.52-2.356-1.798-1.015-.266-1.98-.132-2.898.403-.918.535-1.51 1.308-1.774 2.32l-1.935 7.387c-.27 1.033-.121 2.036.449 3.007l7.694 12.449c.636 1.083.772 2.316.409 3.702-.15.571-.07 1.12.239 1.648.31.528.751.867 1.324 1.017l21.166 5.546c.573.15 1.124.072 1.652-.236.528-.308.867-.748 1.017-1.32l.216-.824a9.733 9.733 0 0 1 .996-2.453l7.338-13.442c.428-.734.76-1.552.996-2.453l2.126-8.113c.276-1.055.158-2.043-.355-2.965-.512-.921-1.298-1.52-2.356-1.798-1.014-.266-1.98-.131-2.897.404-.918.534-1.509 1.308-1.774 2.319l-.277 1.055-1.058-.277 1.08-4.122a3.95 3.95 0 0 0-.201-2.608c-.364-.859-.952-1.489-1.766-1.89a5.8 5.8 0 0 0-.743-.266c-1.015-.265-1.981-.13-2.898.404-.918.535-1.509 1.308-1.774 2.32l-1.106 4.22-1.058-.277 1.054-4.023a4.577 4.577 0 0 0-.302-3.233 4.098 4.098 0 0 0-2.352-2.15 2.35 2.35 0 0 0-.421-.145Zm1.105-4.222c1.852.486 3.351 1.466 4.496 2.94a8.08 8.08 0 0 1 4.361-.055 8.136 8.136 0 0 1 3.438 1.853 8.036 8.036 0 0 1 2.187 3.251 8.043 8.043 0 0 1 2.012.28c2.205.579 3.873 1.856 5.004 3.832 1.132 1.977 1.41 4.064.834 6.263l-2.126 8.112c-.293 1.121-.748 2.271-1.363 3.45l-7.371 13.433c-.271.493-.541 1.256-.812 2.29-.461 1.759-1.47 3.092-3.027 4-1.557.907-3.218 1.13-4.981.668l-21.165-5.547c-1.852-.485-3.205-1.527-4.059-3.125-.853-1.598-1.038-3.32-.554-5.168l-7.629-12.43c-1.255-2.045-1.589-4.188-1.001-6.43l1.935-7.388c.57-2.176 1.835-3.836 3.796-4.978 1.96-1.143 4.032-1.428 6.214-.856.243.063.951.26 1.056.311.679-2.054 5.921-22.284 6.778-25.557.929-3.545 6.497-4.029 8.679-3.457 2.182.572 6.916 3.269 5.868 7.269-.191.727-4.365 16.347-4.461 16.71 0 0-.357-.26 1.891.33Z" fill="var(--ion-color-primary)"/><path d="M101.728 32.565c-.812.436-1.832.135-2.178-.719a15.246 15.246 0 0 1-1.051-7.043 15.418 15.418 0 0 1 3.22-8.154 15.566 15.566 0 0 1 7.157-5.113 15.504 15.504 0 0 1 8.774-.415 15.306 15.306 0 0 1 7.547 4.42 15.209 15.209 0 0 1 3.872 7.819c.5 2.93.132 5.947-1.057 8.685a15.51 15.51 0 0 1-4.319 5.75c-.702.582-1.735.37-2.242-.39-.507-.76-.292-1.78.394-2.386a12.146 12.146 0 0 0 3.112-4.273 12.014 12.014 0 0 0 .829-6.81 11.927 11.927 0 0 0-3.036-6.13 12.005 12.005 0 0 0-5.917-3.465 12.158 12.158 0 0 0-6.88.324 12.207 12.207 0 0 0-5.612 4.01 12.092 12.092 0 0 0-2.525 6.393 11.95 11.95 0 0 0 .695 5.187c.319.864.028 1.873-.783 2.31Z" fill="var(--primary-tint)"/><rect x="76.039" y="12.141" width="23.308" height="3.759" rx="1.88" fill="var(--primary-tint)"/><rect x="70.619" y="21.163" width="21.805" height="3.759" rx="1.88" fill="var(--primary-tint)"/><rect x="80.394" y="30.186" width="16.541" height="3.759" rx="1.88" fill="var(--primary-tint)"/><path d="M141.5 20.788a1.88 1.88 0 1 0 0 3.759v-3.76Zm60.15 1.88-18.797-10.853V33.52l18.797-10.853Zm-60.15 1.879h43.233v-3.76H141.5v3.76Zm-80.35 0a1.88 1.88 0 0 0 0-3.76v3.76ZM1 22.667 19.797 33.52V11.815L1 22.667Zm60.15-1.88H17.917v3.76H61.15v-3.76Z" fill="var(--ion-color-primary)"/></svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206 143"><rect x=".5" y="11.017" width="180.187" height="112.617" rx="6.143" fill="#EAF6FF"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="11" width="170" height="113"><rect x="6.106" y="11.017" width="168.975" height="112.917" rx="6.143" fill="#EAF6FF"/></mask><g mask="url(#a)"><rect x="77.78" y="20.627" width="25.627" height="6.407" rx="3.203" fill="#86CBFF"/><rect x="28.529" y="37.444" width="124.129" height="10.411" rx="5.205" fill="#86CBFF"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.944 46.226a1.793 1.793 0 0 1-2.689.083l-4.859-5.178a1.793 1.793 0 1 1 2.615-2.454l3.533 3.765 3.646-4.05a1.793 1.793 0 0 1 2.665 2.4l-4.75 5.277c-.052.056-.105.108-.161.157Z" fill="#86CBFF"/><rect x="28.827" y="56.309" width="92.653" height="10.238" rx="5.119" fill="#C5E6FF"/><circle cx="17.821" cy="61.172" r="6.911" fill="#C5E6FF"/><rect x="28.827" y="76.537" width="78.32" height="10.238" rx="5.119" fill="#C5E6FF"/><circle cx="17.821" cy="81.4" r="6.911" fill="#C5E6FF"/><rect x="28.827" y="96.764" width="110.569" height="10.238" rx="5.119" fill="#C5E6FF"/><circle cx="17.821" cy="101.628" r="6.911" fill="#C5E6FF"/><rect x="28.827" y="116.992" width="90.605" height="10.238" rx="5.119" fill="#C5E6FF"/><circle cx="17.821" cy="121.855" r="6.911" fill="#C5E6FF"/></g><g filter="url(#b)"><rect x="155.45" y="90.299" width="48.05" height="48.05" rx="24.025" fill="#3880FF"/><path d="M170.466 106.952a1.638 1.638 0 1 0 0 3.276 1.638 1.638 0 0 0 0-3.276ZM174.561 107.362a1.228 1.228 0 1 0 0 2.457h14.742a1.229 1.229 0 1 0 0-2.457h-14.742ZM174.561 113.095a1.229 1.229 0 1 0 0 2.457h14.742a1.228 1.228 0 1 0 0-2.457h-14.742ZM173.332 120.057c0-.679.55-1.229 1.229-1.229h14.742a1.229 1.229 0 1 1 0 2.457h-14.742c-.679 0-1.229-.55-1.229-1.228ZM168.828 114.324a1.638 1.638 0 1 1 3.275 0 1.638 1.638 0 0 1-3.275 0ZM170.466 118.419a1.638 1.638 0 1 0 0 3.275 1.638 1.638 0 0 0 0-3.275Z" fill="#fff"/></g><path d="m166.471 0-11.559 20.02h23.118L166.471 0Zm-2.002 79.282a2.002 2.002 0 1 0 4.004 0h-4.004Zm0-69.844a2.002 2.002 0 1 0 4.004 0h-4.004Zm4.004 7.551a2.002 2.002 0 1 0-4.004 0h4.004Zm-4.004 18.877a2.002 2.002 0 1 0 4.004 0h-4.004Zm4.004 7.55a2.002 2.002 0 1 0-4.004 0h4.004Zm-4.004 18.877a2.002 2.002 0 1 0 4.004 0h-4.004Zm4.004 7.55a2.002 2.002 0 1 0-4.004 0h4.004Zm-4.004-52.854v18.877h4.004V16.989h-4.004Zm0 26.427v18.877h4.004V43.416h-4.004Zm0 26.428v9.438h4.004v-9.438h-4.004Z" fill="#0056B3"/><defs><filter id="b" x="153.266" y="90.299" width="52.418" height="52.418" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2.184"/><feGaussianBlur stdDeviation="1.092"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.120972 0 0 0 0 0.203233 0 0 0 0 0.279167 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_319_9155"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_319_9155" result="shape"/></filter></defs></svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.1 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 13 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202 98"><path fill-rule="evenodd" clip-rule="evenodd" d="M98.269 84.491c1.654.528 10.173 2.987 25.555 7.378l13.172-21.987 1.308-12.462-11.649-8.533-12.69-4.665 5.051-19.274-3.955-4.534-5.864 1.961-7.052 26.911-3.439-.148-5.382 2.166-4.591 11.492 7.54 15.381c-.324 3.682.342 5.787 1.996 6.314Z" fill="#fff"/><path d="M117.797 47.53c-1.169-.307-2.275-.156-3.317.452-1.043.608-1.717 1.494-2.022 2.66l-1.106 4.22-1.058-.277.803-3.067c.277-1.055 6.047-23.565 6.047-23.565.381-1.454-.597-3.654-2.779-4.226-2.182-.571-4.113.866-4.494 2.32-.381 1.455-1.345 5.078-1.61 6.09l-8.252 31.489-.8-1.267 1.487-5.672c.276-1.055.158-2.044-.354-2.965-.513-.922-1.298-1.52-2.356-1.798-1.015-.266-1.98-.132-2.898.403-.918.535-1.51 1.308-1.774 2.32l-1.935 7.387c-.27 1.033-.121 2.036.449 3.007l7.694 12.449c.636 1.083.772 2.316.409 3.702-.15.571-.07 1.12.239 1.648.31.528.751.867 1.324 1.017l21.166 5.546c.573.15 1.124.072 1.652-.236.528-.308.867-.748 1.017-1.32l.216-.824a9.733 9.733 0 0 1 .996-2.453l7.338-13.442c.428-.734.76-1.552.996-2.453l2.126-8.113c.276-1.055.158-2.043-.355-2.965-.512-.921-1.298-1.52-2.356-1.798-1.014-.266-1.98-.131-2.897.404-.918.534-1.509 1.308-1.774 2.319l-.277 1.055-1.058-.277 1.08-4.122a3.95 3.95 0 0 0-.201-2.608c-.364-.859-.952-1.489-1.766-1.89a5.8 5.8 0 0 0-.743-.266c-1.015-.265-1.981-.13-2.898.404-.918.535-1.509 1.308-1.774 2.32l-1.106 4.22-1.058-.277 1.054-4.023a4.577 4.577 0 0 0-.302-3.233 4.098 4.098 0 0 0-2.352-2.15c-.105-.05-.245-.1-.421-.145Zm1.105-4.222c1.852.486 3.351 1.466 4.496 2.94a8.08 8.08 0 0 1 4.361-.055 8.136 8.136 0 0 1 3.438 1.853 8.036 8.036 0 0 1 2.187 3.251 8.043 8.043 0 0 1 2.012.28c2.205.579 3.873 1.856 5.004 3.832 1.132 1.977 1.41 4.064.834 6.263l-2.126 8.112c-.293 1.121-.748 2.271-1.363 3.45l-7.371 13.433c-.271.493-.541 1.256-.812 2.29-.461 1.759-1.47 3.092-3.027 4-1.557.907-3.218 1.13-4.981.668l-21.165-5.547c-1.852-.485-3.205-1.527-4.059-3.125-.853-1.598-1.038-3.32-.554-5.168l-7.629-12.43c-1.255-2.045-1.589-4.188-1.001-6.43l1.935-7.388c.57-2.176 1.835-3.836 3.796-4.978 1.96-1.143 4.032-1.428 6.214-.856.243.063.951.26 1.056.311.679-2.054 5.921-22.284 6.778-25.557.929-3.545 6.497-4.029 8.679-3.457 2.182.572 6.916 3.269 5.868 7.269-.191.727-4.365 16.347-4.461 16.71 0 0-.357-.26 1.891.33Z" fill="#0056B3"/><path d="M101.728 32.565c-.812.436-1.832.135-2.178-.719a15.246 15.246 0 0 1-1.051-7.043 15.418 15.418 0 0 1 3.22-8.154 15.566 15.566 0 0 1 7.157-5.113 15.504 15.504 0 0 1 8.774-.415 15.306 15.306 0 0 1 7.547 4.42 15.209 15.209 0 0 1 3.872 7.819c.5 2.93.132 5.947-1.057 8.685a15.51 15.51 0 0 1-4.319 5.75c-.702.582-1.735.37-2.242-.39-.507-.76-.292-1.78.394-2.386a12.146 12.146 0 0 0 3.112-4.273 12.014 12.014 0 0 0 .829-6.81 11.927 11.927 0 0 0-3.036-6.13 12.005 12.005 0 0 0-5.917-3.465 12.158 12.158 0 0 0-6.88.324 12.207 12.207 0 0 0-5.612 4.01 12.092 12.092 0 0 0-2.525 6.393 11.95 11.95 0 0 0 .695 5.187c.319.864.028 1.873-.783 2.31Z" fill="#86CBFF"/><rect x="76.039" y="12.141" width="23.308" height="3.759" rx="1.88" fill="#86CBFF"/><rect x="70.619" y="21.163" width="21.805" height="3.759" rx="1.88" fill="#86CBFF"/><rect x="80.394" y="30.186" width="16.541" height="3.759" rx="1.88" fill="#86CBFF"/><path d="M141.5 20.788a1.88 1.88 0 1 0 0 3.759v-3.76Zm60.15 1.88-18.797-10.853V33.52l18.797-10.853Zm-60.15 1.879h43.233v-3.76H141.5v3.76ZM61.15 24.547a1.88 1.88 0 0 0 0-3.76v3.76ZM1 22.667 19.797 33.52V11.815L1 22.667Zm60.15-1.88H17.917v3.76H61.15v-3.76Z" fill="#0056B3"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 3.4 KiB |
|
|
@ -1 +0,0 @@
|
||||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 269 173"><path d="M130.298 171.955a1.999 1.999 0 1 0 2.404-3.196l-2.404 3.196Zm137.887-153.65a2 2 0 0 0 .426-2.796l-10.665-14.5a2 2 0 1 0-3.222 2.37l9.48 12.89-12.889 9.48a2 2 0 1 0 2.37 3.222l14.5-10.665ZM124.847 36.115c14.837-13.515 33.816-20.396 57.372-22.633 23.592-2.242 51.644.187 84.48 5.19l.602-3.954c-32.918-5.016-61.365-7.507-85.46-5.218-24.131 2.292-44.025 9.391-59.688 23.657l2.694 2.958Zm34.44 79.302c-13.382 1.869-23.94-.552-31.827-5.493-7.898-4.946-13.278-12.519-16.124-21.225-5.717-17.49-1.113-39.265 13.511-52.584l-2.694-2.958c-15.876 14.46-20.786 37.916-14.619 56.785 3.096 9.473 9.008 17.864 17.803 23.372 8.804 5.515 20.34 8.043 34.504 6.064l-.554-3.961Zm-26.585 53.343c-25.76-19.374-35.531-44.979-33.124-66.267 2.404-21.255 16.912-38.345 40.27-41.227l-.49-3.97c-25.369 3.13-41.163 21.836-43.754 44.747-2.587 22.876 7.954 49.803 34.694 69.913l2.404-3.196Zm7.146-107.494c23.592-2.91 41.413 9.316 46.813 22.682 2.682 6.636 2.305 13.48-1.745 19.109-4.087 5.679-12.172 10.48-25.629 12.36l.554 3.961c14.089-1.968 23.372-7.107 28.321-13.985 4.986-6.928 5.312-15.26 2.208-22.943-6.171-15.272-25.876-28.255-51.012-25.154l.49 3.97Z" fill="#fff"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB |
|
|
@ -1,5 +1,5 @@
|
||||||
<img src="assets/img/user-tours/swipe-navigation.svg" alt="" />
|
<ion-icon name="moodle-swipe-navigation" aria-hidden="true"></ion-icon>
|
||||||
<p>{{ 'core.swipenavigationtourdescription' | translate }}</p>
|
<p>{{ 'core.swipenavigationtourdescription' | translate }}</p>
|
||||||
<ion-button (click)="dismiss()" expand="block">
|
<ion-button (click)="dismiss()" expand="block" fill="outline">
|
||||||
{{ 'core.endonesteptour' | translate }}
|
{{ 'core.endonesteptour' | translate }}
|
||||||
</ion-button>
|
</ion-button>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,21 @@
|
||||||
:host {
|
:host {
|
||||||
max-width: 85vw;
|
max-width: 85vw;
|
||||||
|
|
||||||
img {
|
ion-icon {
|
||||||
max-width: 300px;
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
min-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ion-button {
|
||||||
|
--border-width: 2px;
|
||||||
|
--border-color: white;
|
||||||
|
--background: transparent;
|
||||||
|
--color: white;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
<h2>{{ 'core.block.tour_navigation_dashboard_title' | translate }}</h2>
|
<h2>{{ 'core.block.tour_navigation_dashboard_title' | translate }}</h2>
|
||||||
<img src="assets/img/user-tours/side-blocks.svg" alt="" />
|
|
||||||
<p>{{ 'core.block.tour_navigation_dashboard_content' | translate }}</p>
|
<p>{{ 'core.block.tour_navigation_dashboard_content' | translate }}</p>
|
||||||
<ion-button (click)="dismiss()" expand="block">
|
<ion-button (click)="dismiss()" expand="block">
|
||||||
{{ 'core.endonesteptour' | translate }}
|
{{ 'core.endonesteptour' | translate }}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
h2, p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
<h2>{{ 'core.course.tour_navigation_course_index_student_title' | translate }}</h2>
|
<h2>{{ 'core.course.tour_navigation_course_index_student_title' | translate }}</h2>
|
||||||
<img src="assets/img/user-tours/course-index.svg" alt="" />
|
|
||||||
<p>{{ 'core.course.tour_navigation_course_index_student_content' | translate }}</p>
|
<p>{{ 'core.course.tour_navigation_course_index_student_content' | translate }}</p>
|
||||||
<ion-button (click)="dismiss()" expand="block">
|
<ion-button (click)="dismiss()" expand="block">
|
||||||
{{ 'core.endonesteptour' | translate }}
|
{{ 'core.endonesteptour' | translate }}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
h2, p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,9 @@
|
||||||
|
|
||||||
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
|
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
|
||||||
import { CoreSiteInfo } from '@classes/site';
|
import { CoreSiteInfo } from '@classes/site';
|
||||||
import { CoreUserTours, CoreUserToursStyle } from '@features/usertours/services/user-tours';
|
import { CoreUserTours, CoreUserToursAlignment, CoreUserToursSide } from '@features/usertours/services/user-tours';
|
||||||
import { IonRouterOutlet } from '@ionic/angular';
|
import { IonRouterOutlet } from '@ionic/angular';
|
||||||
|
import { CoreScreen } from '@services/screen';
|
||||||
import { CoreSites } from '@services/sites';
|
import { CoreSites } from '@services/sites';
|
||||||
import { CoreDomUtils } from '@services/utils/dom';
|
import { CoreDomUtils } from '@services/utils/dom';
|
||||||
import { CoreMainMenuUserMenuTourComponent } from '../user-menu-tour/user-menu-tour';
|
import { CoreMainMenuUserMenuTourComponent } from '../user-menu-tour/user-menu-tour';
|
||||||
|
|
@ -77,7 +78,8 @@ export class CoreMainMenuUserButtonComponent implements OnInit {
|
||||||
id: 'user-menu',
|
id: 'user-menu',
|
||||||
component: CoreMainMenuUserMenuTourComponent,
|
component: CoreMainMenuUserMenuTourComponent,
|
||||||
focus: this.avatar.nativeElement,
|
focus: this.avatar.nativeElement,
|
||||||
style: CoreUserToursStyle.Overlay,
|
alignment: CoreUserToursAlignment.Start,
|
||||||
|
side: CoreScreen.isMobile ? CoreUserToursSide.Start : CoreUserToursSide.End,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
<img src="assets/img/user-tours/user-menu.svg" alt="" />
|
|
||||||
<h2>{{ 'core.mainmenu.usermenutourtitle' | translate }}</h2>
|
<h2>{{ 'core.mainmenu.usermenutourtitle' | translate }}</h2>
|
||||||
<p>{{ 'core.mainmenu.usermenutourdescription' | translate }}</p>
|
<p>{{ 'core.mainmenu.usermenutourdescription' | translate }}</p>
|
||||||
<ion-button (click)="dismiss()" expand="block">
|
<ion-button (click)="dismiss()" expand="block">
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,15 @@
|
||||||
:host {
|
:host {
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
max-width: 85vw;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
img {
|
h2 {
|
||||||
width: calc(100vw - var(--core-avatar-size) * 2 - 16px);
|
margin-top: 0;
|
||||||
margin-top: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
h2, p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-button {
|
ion-button {
|
||||||
width: 100%;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:host-context([dir=rtl]) img {
|
|
||||||
transform: scaleX(-1);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -16,12 +16,7 @@ import { AfterViewInit, Component, ElementRef, HostBinding, Input, ViewChild } f
|
||||||
import { CorePromisedValue } from '@classes/promised-value';
|
import { CorePromisedValue } from '@classes/promised-value';
|
||||||
import { CoreUserToursFocusLayout } from '@features/usertours/classes/focus-layout';
|
import { CoreUserToursFocusLayout } from '@features/usertours/classes/focus-layout';
|
||||||
import { CoreUserToursPopoverLayout } from '@features/usertours/classes/popover-layout';
|
import { CoreUserToursPopoverLayout } from '@features/usertours/classes/popover-layout';
|
||||||
import {
|
import { CoreUserTours, CoreUserToursAlignment, CoreUserToursSide } from '@features/usertours/services/user-tours';
|
||||||
CoreUserTours,
|
|
||||||
CoreUserToursAlignment,
|
|
||||||
CoreUserToursSide,
|
|
||||||
CoreUserToursStyle,
|
|
||||||
} from '@features/usertours/services/user-tours';
|
|
||||||
import { CoreDomUtils } from '@services/utils/dom';
|
import { CoreDomUtils } from '@services/utils/dom';
|
||||||
import { AngularFrameworkDelegate } from '@singletons';
|
import { AngularFrameworkDelegate } from '@singletons';
|
||||||
import { CoreComponentsRegistry } from '@singletons/components-registry';
|
import { CoreComponentsRegistry } from '@singletons/components-registry';
|
||||||
|
|
@ -45,7 +40,6 @@ export class CoreUserToursUserTourComponent implements AfterViewInit {
|
||||||
@Input() component!: unknown;
|
@Input() component!: unknown;
|
||||||
@Input() componentProps?: Record<string, unknown>;
|
@Input() componentProps?: Record<string, unknown>;
|
||||||
@Input() focus?: HTMLElement;
|
@Input() focus?: HTMLElement;
|
||||||
@Input() style?: CoreUserToursStyle; // When this is undefined in a tour with a focused element, popover style will be used.
|
|
||||||
@Input() side?: CoreUserToursSide;
|
@Input() side?: CoreUserToursSide;
|
||||||
@Input() alignment?: CoreUserToursAlignment;
|
@Input() alignment?: CoreUserToursAlignment;
|
||||||
@HostBinding('class.is-active') active = false;
|
@HostBinding('class.is-active') active = false;
|
||||||
|
|
@ -121,18 +115,16 @@ export class CoreUserToursUserTourComponent implements AfterViewInit {
|
||||||
this.focusStyles = focusLayout.inlineStyles;
|
this.focusStyles = focusLayout.inlineStyles;
|
||||||
|
|
||||||
// Calculate popup styles.
|
// Calculate popup styles.
|
||||||
if ((this.style ?? CoreUserToursStyle.Popover) === CoreUserToursStyle.Popover) {
|
if (!this.side || !this.alignment) {
|
||||||
if (!this.side || !this.alignment) {
|
throw new Error('Cannot create a focused user tour without side and alignment');
|
||||||
throw new Error('Cannot create a popover user tour without side and alignment');
|
|
||||||
}
|
|
||||||
|
|
||||||
const popoverLayout = new CoreUserToursPopoverLayout(this.focus, this.side, this.alignment);
|
|
||||||
|
|
||||||
this.popover = true;
|
|
||||||
this.popoverWrapperStyles = popoverLayout.wrapperInlineStyles;
|
|
||||||
this.popoverWrapperArrowStyles = popoverLayout.wrapperArrowInlineStyles;
|
|
||||||
this.wrapperTransform = `${popoverLayout.wrapperStyles.transform ?? ''}`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const popoverLayout = new CoreUserToursPopoverLayout(this.focus, this.side, this.alignment);
|
||||||
|
|
||||||
|
this.popover = true;
|
||||||
|
this.popoverWrapperStyles = popoverLayout.wrapperInlineStyles;
|
||||||
|
this.popoverWrapperArrowStyles = popoverLayout.wrapperArrowInlineStyles;
|
||||||
|
this.wrapperTransform = `${popoverLayout.wrapperStyles.transform ?? ''}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -85,9 +85,8 @@ export class CoreUserToursService {
|
||||||
* @param options User Tour options.
|
* @param options User Tour options.
|
||||||
*/
|
*/
|
||||||
async showIfPending(options: CoreUserToursBasicOptions): Promise<void>;
|
async showIfPending(options: CoreUserToursBasicOptions): Promise<void>;
|
||||||
async showIfPending(options: CoreUserToursPopoverFocusedOptions): Promise<void>;
|
async showIfPending(options: CoreUserToursFocusedOptions): Promise<void>;
|
||||||
async showIfPending(options: CoreUserToursOverlayFocusedOptions): Promise<void>;
|
async showIfPending(options: CoreUserToursBasicOptions | CoreUserToursFocusedOptions): Promise<void> {
|
||||||
async showIfPending(options: CoreUserToursOptions): Promise<void> {
|
|
||||||
const isPending = await CoreUserTours.isPending(options.id);
|
const isPending = await CoreUserTours.isPending(options.id);
|
||||||
|
|
||||||
if (!isPending) {
|
if (!isPending) {
|
||||||
|
|
@ -103,9 +102,8 @@ export class CoreUserToursService {
|
||||||
* @param options User Tour options.
|
* @param options User Tour options.
|
||||||
*/
|
*/
|
||||||
protected async show(options: CoreUserToursBasicOptions): Promise<void>;
|
protected async show(options: CoreUserToursBasicOptions): Promise<void>;
|
||||||
protected async show(options: CoreUserToursPopoverFocusedOptions): Promise<void>;
|
protected async show(options: CoreUserToursFocusedOptions): Promise<void>;
|
||||||
protected async show(options: CoreUserToursOverlayFocusedOptions): Promise<void>;
|
protected async show(options: CoreUserToursBasicOptions | CoreUserToursFocusedOptions): Promise<void> {
|
||||||
protected async show(options: CoreUserToursOptions): Promise<void> {
|
|
||||||
const { delay, ...componentOptions } = options;
|
const { delay, ...componentOptions } = options;
|
||||||
|
|
||||||
await CoreUtils.wait(delay ?? 200);
|
await CoreUtils.wait(delay ?? 200);
|
||||||
|
|
@ -149,14 +147,6 @@ export class CoreUserToursService {
|
||||||
|
|
||||||
export const CoreUserTours = makeSingleton(CoreUserToursService);
|
export const CoreUserTours = makeSingleton(CoreUserToursService);
|
||||||
|
|
||||||
/**
|
|
||||||
* User Tour style.
|
|
||||||
*/
|
|
||||||
export const enum CoreUserToursStyle {
|
|
||||||
Overlay = 'overlay',
|
|
||||||
Popover = 'popover',
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* User Tour side.
|
* User Tour side.
|
||||||
*/
|
*/
|
||||||
|
|
@ -217,18 +207,6 @@ export interface CoreUserToursFocusedOptions extends CoreUserToursBasicOptions {
|
||||||
*/
|
*/
|
||||||
focus: HTMLElement;
|
focus: HTMLElement;
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Options to create a focused User Tour using the Popover style.
|
|
||||||
*/
|
|
||||||
export interface CoreUserToursPopoverFocusedOptions extends CoreUserToursFocusedOptions {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* User Tour style.
|
|
||||||
*/
|
|
||||||
style?: CoreUserToursStyle.Popover;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Position relative to the focused element.
|
* Position relative to the focused element.
|
||||||
*/
|
*/
|
||||||
|
|
@ -240,23 +218,3 @@ export interface CoreUserToursPopoverFocusedOptions extends CoreUserToursFocused
|
||||||
alignment: CoreUserToursAlignment;
|
alignment: CoreUserToursAlignment;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Options to create a focused User Tour using the Overlay style.
|
|
||||||
*/
|
|
||||||
export interface CoreUserToursOverlayFocusedOptions extends CoreUserToursFocusedOptions {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* User Tour style.
|
|
||||||
*/
|
|
||||||
style: CoreUserToursStyle.Overlay;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Options to create a User Tour.
|
|
||||||
*/
|
|
||||||
export type CoreUserToursOptions =
|
|
||||||
CoreUserToursBasicOptions |
|
|
||||||
CoreUserToursPopoverFocusedOptions |
|
|
||||||
CoreUserToursOverlayFocusedOptions;
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue