From a44100b7a0df67e5f7de6cf133237df36d4c6e96 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Thu, 10 Mar 2022 12:49:07 +0100 Subject: [PATCH] style of small trash icon, placing negative margins, bg icon in css --- .../components/header/header.component.scss | 1 + .../core/components/home/home.component.html | 13 +++++ src/app/core/models/configuration.model.ts | 2 +- src/app/core/services/poll.service.ts | 4 +- .../advanced-config.component.html | 2 +- .../date/list/day/day-list.component.html | 3 +- .../date/list/day/day-list.component.scss | 43 --------------- .../steps/step-four/step-four.component.html | 11 ++-- .../steps/step-four/step-four.component.scss | 24 ++++---- .../steps/step-two/step-two.component.html | 3 - .../steps/step-two/step-two.component.scss | 8 +++ .../language-selector.component.ts | 2 +- src/styles/dev-utilities/_helpers.scss | 8 ++- src/styles/partials/_buttons.scss | 55 ++++++++++++++++++- 14 files changed, 104 insertions(+), 75 deletions(-) diff --git a/src/app/core/components/header/header.component.scss b/src/app/core/components/header/header.component.scss index 5e796772..7330348e 100644 --- a/src/app/core/components/header/header.component.scss +++ b/src/app/core/components/header/header.component.scss @@ -2,6 +2,7 @@ .big-header { height: $header-nav-height; padding-top: 1rem; + padding-left: 1rem; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05); position: fixed; top: 0; diff --git a/src/app/core/components/home/home.component.html b/src/app/core/components/home/home.component.html index 8db1d3f7..3af78c5b 100644 --- a/src/app/core/components/home/home.component.html +++ b/src/app/core/components/home/home.component.html @@ -57,6 +57,19 @@ bouton fermeture popin + +
+ +
+
+ +


diff --git a/src/app/core/models/configuration.model.ts b/src/app/core/models/configuration.model.ts index 8c6cc630..43a21641 100644 --- a/src/app/core/models/configuration.model.ts +++ b/src/app/core/models/configuration.model.ts @@ -15,7 +15,7 @@ export class PollConfiguration { public isOwnerNotifiedByEmailOnNewComment: boolean = false, public isZeroKnoledge: boolean = true, public hasSeveralHours: boolean = false, - public hasMaxCountOfAnswers: boolean = false, + public hasMaxCountOfAnswers: boolean = true, public whoCanChangeAnswers: string = environment.poll.defaultConfig.whoCanChangeAnswers, // everybody, self, nobody (= just admin) public visibility: string = environment.poll.defaultConfig.visibility, // visible to anyone with the link: public voteChoices: string = environment.poll.defaultConfig.voteChoices, // possible answers to a vote timeSlice: only "yes", "yes, maybe, no": number = environment.poll.defaultConfig.maxCountOfAnswers, diff --git a/src/app/core/services/poll.service.ts b/src/app/core/services/poll.service.ts index f09a6eb1..6906a910 100644 --- a/src/app/core/services/poll.service.ts +++ b/src/app/core/services/poll.service.ts @@ -37,7 +37,7 @@ export class PollService implements Resolve { public intervalDays: number = 1; public intervalDaysDefault = 7; public dateChoiceList: DateChoice[] = []; // sets of days as strings, config to set identical time for days in a special days poll - public timeList: TimeSlices[] = [{ literal: 'example' }]; // ranges of time expressed as strings + public timeList: TimeSlices[] = [{ literal: '' }]; // ranges of time expressed as strings public previousRouteName: string = '/administration'; public nextRouteName: string = '/administration/step/2'; public step_current: number = 1; @@ -197,7 +197,7 @@ export class PollService implements Resolve { isMaybeAnswerAvailable: [true, [Validators.required]], isNoAnswerAvailable: [true, [Validators.required]], allowComments: [true, [Validators.required]], - maxCountOfAnswers: [1, []], + maxCountOfAnswers: ['', []], hasMaxCountOfAnswers: ['', [Validators.required]], useVoterUniqueLink: [false, [Validators.required]], voterEmailList: ['', []], diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.html b/src/app/features/administration/form/advanced-config/advanced-config.component.html index 15b1b5d8..a777ab92 100644 --- a/src/app/features/administration/form/advanced-config/advanced-config.component.html +++ b/src/app/features/administration/form/advanced-config/advanced-config.component.html @@ -3,7 +3,7 @@

{{ 'advanced.limit_title' | translate }}

-
+
diff --git a/src/app/features/administration/form/date/list/day/day-list.component.html b/src/app/features/administration/form/date/list/day/day-list.component.html index e2ede449..58763481 100644 --- a/src/app/features/administration/form/date/list/day/day-list.component.html +++ b/src/app/features/administration/form/date/list/day/day-list.component.html @@ -28,10 +28,9 @@
diff --git a/src/app/features/administration/form/date/list/day/day-list.component.scss b/src/app/features/administration/form/date/list/day/day-list.component.scss index 85816eb2..2b1838f4 100644 --- a/src/app/features/administration/form/date/list/day/day-list.component.scss +++ b/src/app/features/administration/form/date/list/day/day-list.component.scss @@ -76,49 +76,6 @@ display: inline-block; } - .delete-date { - color: $primary_color; - border: 0; - border-radius: 0.25rem; - border-top-left-radius: 0; - border-top-right-radius: 0; - background: transparent; - - margin-right: 0; - - button { - text-align: left !important; - width: 100%; - display: block; - padding-left: 1rem; - &:hover { - color: $white !important; - } - } - - .fa, - .icon { - float: left; - color: $primary_color; - margin: 0; - margin-right: 8px; - height: 1.25rem; - // filter converter is here https://codepen.io/sosuke/pen/Pjoqqp - filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%); - } - - &:hover { - color: $white; - background-color: $primary_color; - - .fa, - .icon { - color: $white; - filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(80deg) brightness(104%) contrast(105%); - } - } - } - .format-helper { font-style: normal; font-weight: normal; diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.html b/src/app/features/administration/form/steps/step-four/step-four.component.html index 05570d71..6fee7dd3 100644 --- a/src/app/features/administration/form/steps/step-four/step-four.component.html +++ b/src/app/features/administration/form/steps/step-four/step-four.component.html @@ -22,11 +22,11 @@
@@ -110,12 +110,9 @@ + >
diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.scss b/src/app/features/administration/form/steps/step-four/step-four.component.scss index b8bfe968..872bb23c 100644 --- a/src/app/features/administration/form/steps/step-four/step-four.component.scss +++ b/src/app/features/administration/form/steps/step-four/step-four.component.scss @@ -18,7 +18,7 @@ } input { - width: calc(100% - 2rem); + width: calc(100% - 40px); margin-bottom: 1rem; } @@ -43,22 +43,26 @@ } .add-time-choice { - margin-top: 0.5rem; - - .button { + margin-top: 0; + font-size: 16px; + line-height: 20px; + button { justify-content: inherit; - background: transparent; + background-color: transparent; + background-position: 0; + padding: 0.5rem 0.5rem 0.5rem 2rem; } } .delete-hour { - background: transparent; + background-position: center; + background-size: 20px 20px; font-size: 0.8rem; - width: 2rem; + width: 40px; padding: 0; float: right; - margin-top: -3rem; - margin-right: 0; - margin-bottom: 0; + margin-top: 0; + margin-right: -4px; + height: 40px; } } diff --git a/src/app/features/administration/form/steps/step-two/step-two.component.html b/src/app/features/administration/form/steps/step-two/step-two.component.html index 1b55c25e..4cb04f75 100644 --- a/src/app/features/administration/form/steps/step-two/step-two.component.html +++ b/src/app/features/administration/form/steps/step-two/step-two.component.html @@ -16,7 +16,6 @@ }" (click)="pollService.form.controls.isAboutDate.setValue(true)" > - @@ -30,8 +29,6 @@ }" (click)="pollService.form.controls.isAboutDate.setValue(false)" > - - diff --git a/src/app/features/administration/form/steps/step-two/step-two.component.scss b/src/app/features/administration/form/steps/step-two/step-two.component.scss index 23c08cdc..09eff6f5 100644 --- a/src/app/features/administration/form/steps/step-two/step-two.component.scss +++ b/src/app/features/administration/form/steps/step-two/step-two.component.scss @@ -21,6 +21,11 @@ font-weight: 700; font-size: 14px; line-height: 16px; + + float: left; + display: inline; + margin-top: -0.5rem; + width: 80%; } img { @@ -35,6 +40,9 @@ input[type='radio'] { width: 24px; height: 24px; + display: inline-block; + margin-top: -0.7rem; + float: right; } &.is-selected { diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.ts b/src/app/shared/components/selectors/language-selector/language-selector.component.ts index b061c822..bacb6858 100644 --- a/src/app/shared/components/selectors/language-selector/language-selector.component.ts +++ b/src/app/shared/components/selectors/language-selector/language-selector.component.ts @@ -16,7 +16,7 @@ export class LanguageSelectorComponent implements OnInit { public availableLanguages: any = ['FR', 'EN', 'ES']; language: string; language_to_apply: string; - display_lang_dialog: boolean = true; + display_lang_dialog: boolean = false; display_dynamic_langs: boolean = false; availableLanguagesStatic: any = [ diff --git a/src/styles/dev-utilities/_helpers.scss b/src/styles/dev-utilities/_helpers.scss index b299c258..3de322ea 100644 --- a/src/styles/dev-utilities/_helpers.scss +++ b/src/styles/dev-utilities/_helpers.scss @@ -98,15 +98,17 @@ padding-left: 0; } .has-background-icon-left { - padding-left: 33px; + padding-left: 44px; } // icone bg .has-background-transparent { background-color: transparent; } .has-background-plus { - background: url('/assets/icons/plus-circle.svg') no-repeat left center; - //background: $d-blue30 url('/assets/img/kind_classic.svg') no-repeat 19px center; + background: url('/assets/icons/plus-circle.svg') no-repeat 16px center; +} +.has-background-trash { + background: url('/assets/icons/trash-2.svg') no-repeat 16px center; } .is-block { display: block; diff --git a/src/styles/partials/_buttons.scss b/src/styles/partials/_buttons.scss index 77d5ba4b..3c7ae57c 100644 --- a/src/styles/partials/_buttons.scss +++ b/src/styles/partials/_buttons.scss @@ -4,6 +4,9 @@ outline-style: solid; outline-offset: 0.15rem; } + &:active { + outline: transparent; + } } button, @@ -14,6 +17,7 @@ button, .btn--full { @extend .is-block; } + .button, button, a { @@ -24,6 +28,7 @@ a { box-sizing: border-box; border-radius: 4px; cursor: pointer; + &.is-fullwidth { display: block; text-align: center; @@ -36,10 +41,12 @@ a { color: $white; } } + .is-final { background: #128149; border-color: #128149; color: #fff; + &:hover { background: #07532d; border-color: #07532d; @@ -50,12 +57,15 @@ a { background: #6359cf; color: #fff; border-color: #6359cf; + &.is-disabled { background: #767486; } + &:hover { background-color: #3e3882; border-color: #3e3882; + &.is-disabled { background: #767486; border-color: #6359cf; @@ -72,14 +82,17 @@ a { background: #fff; color: #6359cf; border-color: #6359cf; + &.is-disabled { color: #767486; border-color: #767486; } + &:hover { background-color: #f6f5fb; border-color: #3e3882; color: #3e3882; + &.is-disabled { color: #767486; border-color: #767486; @@ -105,6 +118,7 @@ a { color: #3e3882; } } + .is-closing-popup { background: #fff; color: #6359cf !important; @@ -122,8 +136,7 @@ a { } .buttons-demo button { - float: left; - clear: both; + margin-right: 1rem; margin-bottom: 1rem; } @@ -134,9 +147,11 @@ a { .is-warning { @extend .is-warning; } + .is-info { background-color: #94bae2; } + .btn--info { @extend .is-info; } @@ -144,6 +159,42 @@ a { .is-danger { background-color: #e08181; } + .btn--danger { @extend .is-danger; } + +.delete-date { + border: 0; + border-radius: 0.25rem; + border-top-left-radius: 0; + border-top-right-radius: 0; + background: #f6f5fd; + cursor: pointer; + margin-right: 0; + + &:hover { + color: $white !important; + //background-color: $primary_color; + button { + color: $white !important; + } + } + + button { + color: $primary_color; + text-align: left !important; + width: 100%; + display: block; + padding: 1rem; + padding-left: 44px; + font-weight: 400; + font-size: 16px; + line-height: 20px; + @extend .outlined; + + &:hover { + color: $white !important; + } + } +}