From a67d2bd58a829e816b028082a669894f5dac30a2 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Wed, 9 Feb 2022 11:30:22 +0100 Subject: [PATCH] success page --- src/app/core/core.module.ts | 6 +- src/app/core/services/poll.service.ts | 3 + .../administration/administration.module.ts | 1 + .../steps/step-six/step-six.component.html | 2 +- .../nav-steps/nav-steps.component.ts | 2 +- .../success/success.component.html | 141 +++++++++++------- .../success/success.component.scss | 59 +++++--- .../success/success.component.ts | 13 +- src/app/shared/shared.module.ts | 4 + src/assets/i18n/en.json | 2 +- src/assets/i18n/fr.json | 4 +- src/styles/partials/_forms.scss | 3 - src/styles/partials/_main.scss | 9 ++ src/styles/partials/_typo.scss | 13 ++ src/styles/partials/global.scss | 6 + src/styles/themes/_base.scss | 6 +- src/styles/variables.scss | 1 + 17 files changed, 175 insertions(+), 100 deletions(-) diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index 723749b0..b2918549 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -4,8 +4,6 @@ import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { TranslateModule } from '@ngx-translate/core'; -import { FooterComponent } from './components/footer/footer.component'; -import { HeaderComponent } from './components/header/header.component'; import { HomeComponent } from './components/home/home.component'; import { LogoComponent } from './components/logo/logo.component'; import { NavigationComponent } from './components/sibebar/navigation/navigation.component'; @@ -14,9 +12,9 @@ import { SharedModule } from '../shared/shared.module'; import { DialogModule } from 'primeng/dialog'; @NgModule({ - declarations: [FooterComponent, HeaderComponent, HomeComponent, LogoComponent, NavigationComponent], + declarations: [HomeComponent, LogoComponent, NavigationComponent], imports: [CommonModule, FormsModule, RouterModule, TranslateModule, SharedModule, DialogModule], - exports: [HeaderComponent, FooterComponent, NavigationComponent, LogoComponent], + exports: [NavigationComponent, LogoComponent], }) export class CoreModule { constructor(@Optional() @SkipSelf() parentModule: CoreModule) { diff --git a/src/app/core/services/poll.service.ts b/src/app/core/services/poll.service.ts index 9247de6f..585a9af0 100644 --- a/src/app/core/services/poll.service.ts +++ b/src/app/core/services/poll.service.ts @@ -615,11 +615,14 @@ export class PollService implements Resolve { const polltemp = this._poll.getValue(); if (polltemp) { url = `${environment.frontDomain}/#/poll/${polltemp.custom_url}/consultation`; + } else { + url = `${environment.frontDomain}/#/poll/${this.form.value.custom_url}/consultation`; } } else { url = `${environment.frontDomain}/#/poll/${this.form.value.custom_url}/consultation`; } + console.log('getParticipationUrl', url); // TODO handle pass access return url; } diff --git a/src/app/features/administration/administration.module.ts b/src/app/features/administration/administration.module.ts index c843d545..eafe5d51 100644 --- a/src/app/features/administration/administration.module.ts +++ b/src/app/features/administration/administration.module.ts @@ -37,6 +37,7 @@ import { HoursComponent } from './form/hours/hours.component'; import { ActionsMenuComponent } from './actions-menu/actions-menu.component'; import { NavStepsComponent } from './nav-steps/nav-steps.component'; import { DialogModule } from 'primeng/dialog'; +import { CoreModule } from '../../core/core.module'; @NgModule({ declarations: [ diff --git a/src/app/features/administration/form/steps/step-six/step-six.component.html b/src/app/features/administration/form/steps/step-six/step-six.component.html index 1ec973b2..a97f4e0c 100644 --- a/src/app/features/administration/form/steps/step-six/step-six.component.html +++ b/src/app/features/administration/form/steps/step-six/step-six.component.html @@ -18,7 +18,7 @@

{{ 'owner.email_description' | translate }}

- + diff --git a/src/app/features/administration/nav-steps/nav-steps.component.ts b/src/app/features/administration/nav-steps/nav-steps.component.ts index 788020b4..a75b5c59 100644 --- a/src/app/features/administration/nav-steps/nav-steps.component.ts +++ b/src/app/features/administration/nav-steps/nav-steps.component.ts @@ -43,7 +43,7 @@ export class NavStepsComponent implements OnInit { createPoll() { this.pollService.createPoll().then( (resp) => { - this.router.navigate(['administration/success']); + this.router.navigate(['/administration/success']); }, (err) => { console.error('oops err', err); diff --git a/src/app/features/administration/success/success.component.html b/src/app/features/administration/success/success.component.html index 415854c3..9c764bc0 100644 --- a/src/app/features/administration/success/success.component.html +++ b/src/app/features/administration/success/success.component.html @@ -1,58 +1,91 @@ -
-
-
-
-

- - icone ok - - {{ 'success.description' | translate }} - - - - {{ 'success.not_created' | translate }} :( -
- - -

-

- - {{ 'success.description' | translate }} - - -

-
-
- - -
-
- + +
+
+
+
+
+
+
+
+
+ icone ok +
+
+

+ {{ 'success.title' | translate }} +

+ + {{ + 'success.description' | translate: { eventTitle: pollService.form.value.title } + }} + + +
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+

+ {{ 'success.label' | translate }} +

+ +
+
+ + + + +
+ +
+
+ {{ 'success.network_error' | translate }} +
+

+ {{ 'success.not_created' | translate }} +

+ +
-
+
-
-

- {{ 'success.label' | translate }} -

- -
- -
- {{ 'success.network_error' | translate }} -
+ + diff --git a/src/app/features/administration/success/success.component.scss b/src/app/features/administration/success/success.component.scss index be5620d6..2ffce142 100644 --- a/src/app/features/administration/success/success.component.scss +++ b/src/app/features/administration/success/success.component.scss @@ -1,25 +1,42 @@ @import './src/styles/variables'; -.button, -a, -button { - margin-bottom: 1ch; - margin-right: 1ch; -} -a { - padding: 1em; - max-width: 20em; - @extend .truncate; -} -.admin-ok pre, -.truncate { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} :host { - padding: 2em; -} -.has-background-success { - background: $logo_color_2 !important; + .button, + a, + button { + margin-bottom: 1ch; + margin-right: 1ch; + } + + a { + padding: 1em; + max-width: 20em; + @extend .truncate; + } + + .admin-ok pre, + .truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .main-block { + padding-top: 2em; + } + + .has-background-success { + background: $logo_color_2 !important; + } + + .copy { + margin-top: 2rem; + } + .button { + padding: 0.5rem 1rem; + } + .go-see-title { + font-size: 20px; + color: $d-primary-intense; + } } diff --git a/src/app/features/administration/success/success.component.ts b/src/app/features/administration/success/success.component.ts index 11a5adce..a0009763 100644 --- a/src/app/features/administration/success/success.component.ts +++ b/src/app/features/administration/success/success.component.ts @@ -19,7 +19,6 @@ export class SuccessComponent { window: any = window; environment = environment; today: Date = new Date(); - eventTitle: any; constructor( public pollService: PollService, @@ -29,15 +28,9 @@ export class SuccessComponent { private translate: TranslateService, private titleService: Title ) { - this.eventTitle = pollService.form.value.title; - this.titleService.setTitle( environment.appTitle + ' - 🎉 succès de création de sondage - ' + this.pollService.form.value.title ); - - this.pollService.poll.subscribe((newpoll: Poll) => { - this.poll = newpoll; - }); } sendToEmail() { @@ -50,6 +43,10 @@ export class SuccessComponent { */ copyText(participationUrl: string) { this._clipboardService.copyFromContent(participationUrl); - this.toastService.display(this.translate.get('success.copy_message') + ` ${participationUrl}`); + console.log("this.translate.get('success.copy_message')", this.translate.get('success.copy_message')); + this.translate.get('success.copy_message').subscribe((resp) => { + console.log('resp', resp); + this.toastService.display(`${resp} ${participationUrl}`); + }); } } diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 0aea0b7c..c350f45a 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -34,6 +34,8 @@ import { AboutComponent } from '../features/shared/components/ui/static-pages/ab import { RouterModule } from '@angular/router'; import { ChoiceButtonDinumComponent } from '../features/shared/components/choice-button-dinum/choice-button-dinum.component'; import { DialogModule } from 'primeng/dialog'; +import { HeaderComponent } from '../core/components/header/header.component'; +import { FooterComponent } from '../core/components/footer/footer.component'; const COMPONENTS = [ AboutComponent, @@ -51,6 +53,8 @@ const COMPONENTS = [ WipTodoComponent, ShortcutsHelpComponent, ChoiceButtonDinumComponent, + HeaderComponent, + FooterComponent, ]; const ANGULAR_MODULES = [CommonModule, ChartsModule, FormsModule, TranslateModule]; diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index e71d58da..c6f4c186 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -184,7 +184,7 @@ "network_error": "network error", "go_back": "Go back", "copy": "Copy", - "copy_message": "Text copied:" + "copy_message": "Text copied :" }, "visibility": { "top_txt": "A few settings…", diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 1357283f..b8807752 100755 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -177,7 +177,7 @@ }, "success": { "title": "Votre sondage est prêt !", - "description": "L'événement « {{eventTitle}} » est créé.", + "description": "L'événement « {{eventTitle}} » est créé.", "share": "Vous pouvez inviter vos contacts à y participer en partageant le lien ci-dessous.", "link": "Lien de partage public", "label": "Consultez dès maintenant votre sondage", @@ -186,7 +186,7 @@ "users": "Côté sondés", "links_mail": "Recevoir les liens par e-mail", "not_created": "n'a pas été créé", - "network_error": "n'a pas été créé", + "network_error": "erreur de réseau", "go_back": "Revenir en arrière", "copy": "Copier", "copy_message": "Texte copié :" diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss index 68ec7a9a..ba4ff5f9 100644 --- a/src/styles/partials/_forms.scss +++ b/src/styles/partials/_forms.scss @@ -307,9 +307,6 @@ mat-checkbox { font-size: 1rem; line-height: 1.25rem; } - .icon { - width: 1rem; - } .columns { margin-left: 0; diff --git a/src/styles/partials/_main.scss b/src/styles/partials/_main.scss index 967cff00..76c51f59 100644 --- a/src/styles/partials/_main.scss +++ b/src/styles/partials/_main.scss @@ -9,3 +9,12 @@ main { width: 100%; margin: 0 auto; } + +.icon { + width: 1.5rem; + height: 1.5rem; + &.is-big { + width: 3rem; + height: 3rem; + } +} diff --git a/src/styles/partials/_typo.scss b/src/styles/partials/_typo.scss index a9b1e128..0e8bb0c9 100644 --- a/src/styles/partials/_typo.scss +++ b/src/styles/partials/_typo.scss @@ -42,16 +42,20 @@ body { .p-dialog-header { color: $primary_color !important; + .p-dialog-title { font-size: 2rem; } } + .p-dialog-content { padding: 1rem 2rem; + .title { color: $secondary_color !important; } } + .p-dialog-footer { padding: 3rem 2.5rem; } @@ -68,4 +72,13 @@ body { .text-center { text-align: center; } + + .title { + &.is-success { + color: $success_color; + } + } + .icon-success { + fill: $success_color; + } } diff --git a/src/styles/partials/global.scss b/src/styles/partials/global.scss index 9e20c2f3..852f9e8d 100644 --- a/src/styles/partials/global.scss +++ b/src/styles/partials/global.scss @@ -101,6 +101,12 @@ main { width: 100vw; display: block; } +.contained-in-large-column { + max-width: $large-column-width; + margin: 0 auto; + width: 100vw; + display: block; +} .contained-desktop, .stuff { display: block; diff --git a/src/styles/themes/_base.scss b/src/styles/themes/_base.scss index 5d0f1aa3..5364b0d0 100644 --- a/src/styles/themes/_base.scss +++ b/src/styles/themes/_base.scss @@ -1,10 +1,6 @@ #big_container { background: $white; - main { - margin-bottom: 2em; - padding-bottom: 5em; - background: $white; - } + .big-header { .container { .column:last-of-type { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index ec0dc9bc..8fc32894 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -71,6 +71,7 @@ $default_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono'; $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono'; // sizes and breakpoints +$large-column-width: 588px; $main-column-width: 25rem; $main-column-width-inner: 23.75rem; $mobile-size: 25rem;