tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

style image in text links

Browse Source
This commit is contained in:
Tykayn 2022-03-14 17:02:56 +01:00 committed by tykayn
parent 57a7f3dbfc
commit fef2e7e78c
5 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/features/administration/form/option-link/option-link.component.html
View File

@ -4,34 +4,29 @@
</h1> </h1>
<!--{{ 'choices.helper' |translate}}--> <!--{{ 'choices.helper' |translate}}-->
<div class="rounded-block" *ngFor="let choice of StorageService.choicesText; index as ii"> <div class="rounded-block has-nopadbottom" *ngFor="let choice of StorageService.choicesText; index as ii">
<label [for]="'option_' + ii">{{ 'choices.element' | translate }} {{ ii + 1 }}</label> <label [for]="'option_' + ii">{{ 'choices.element' | translate }} {{ ii + 1 }}</label>
<input type="text" [(ngModel)]="choice.name" class="input" /> <input type="text" [(ngModel)]="choice.name" class="input" />
<div class="image-preview" *ngIf="choice.url_display"> <div class="pull-left" *ngIf="choice.url_display">
<img src="{{ choice.url_display }}" alt="image" class="icon is-rounded" /> <img src="{{ choice.url_display }}" alt="image" class="image-preview is-rounded" />
</div> </div>
<div class="href-preview" *ngIf="choice.url_href"> <div class="href-preview" *ngIf="choice.url_href">
{{ choice.url_href }} <a href="{{ choice.url_href }}">{{ choice.url_href }}</a>
</div> </div>
<div class="link-land"> <div class="link-land">
<button <button
(click)="openLinkModal(choice)" (click)="openLinkModal(choice)"
class="link-button has-no-background has-background-link-icon has-background-icon-left is-filtered-icon-primary" class="link-button has-background-icon-left is-filtered-icon-primary is-fullwidth"
*ngIf="!choice.url_href || !choice.url_display" [ngClass]="{
'has-background-edit': url_href || url_display,
'has-background-link-icon': url_href || url_display
}"
> >
{{ 'choices.add_link' | translate }} <!-- {{evalChoiceUrl(choice)}} , -->
{{ evalChoiceUrl(choice) | translate }}
</button> </button>
<!-- <button (click)="openLinkModal(choice)"-->
<!-- class="button is-secondary has-background-link has-background-icon-left is-filtered-icon-primary"-->
<!-- *ngIf="choice.url_href || choice.url_display">-->
<!-- {{ 'SENTENCES.Edit' | translate }}-->
<!-- </button>-->
</div> </div>
<!-- <button class="button delete-date is-block" (click)="StorageService.choicesText.splice(ii, 1)">-->
<!-- <img class="icon" src="assets/icons/trash-2.svg" />-->
<!-- {{ 'choices.delete' | translate }}-->
<!-- </button>-->
<hr /> <hr />
<div class="down-line-button-container"> <div class="down-line-button-container">

9
src/app/features/administration/form/option-link/option-link.component.scss
View File

@ -3,4 +3,13 @@
.link-land { .link-land {
margin-left: -1rem; margin-left: -1rem;
} }
.image-preview {
border-radius: 100%;
width: 40px;
height: 40px;
margin-right: 1rem;
}
.href-preview {
color: #6359cf;
}
} }

8
src/app/features/administration/form/option-link/option-link.component.ts
View File

@ -8,13 +8,17 @@ import { ChoiceText } from '../../../../core/models/choice.model';
styleUrls: ['./option-link.component.scss'], styleUrls: ['./option-link.component.scss'],
}) })
export class OptionLinkComponent implements OnInit { export class OptionLinkComponent implements OnInit {
public url_href: string; public url_href: string = '';
public url_display: string; public url_display: string = '';
public choice_for_modal: ChoiceText; // choice to be modified after validation of modal public choice_for_modal: ChoiceText; // choice to be modified after validation of modal
public display_option_dialog: boolean = false; public display_option_dialog: boolean = false;
constructor(public StorageService: StorageService) {} constructor(public StorageService: StorageService) {}
evalChoiceUrl(choice) {
return !choice.url_href && !choice.url_display ? 'choices.add_link' : 'SENTENCES.Edit';
}
ngOnInit(): void {} ngOnInit(): void {}
openLinkModal(choice: ChoiceText) { openLinkModal(choice: ChoiceText) {

7
src/styles/dev-utilities/_helpers.scss
View File

@ -128,6 +128,9 @@
.has-background-link-icon { .has-background-link-icon {
background: url('/assets/icons/link.svg') no-repeat 16px center; background: url('/assets/icons/link.svg') no-repeat 16px center;
} }
.has-background-edit {
background: url('/assets/icons/edit.svg') no-repeat 16px center;
}
.has-background-plus { .has-background-plus {
background: url('/assets/icons/plus-circle.svg') no-repeat 16px center; background: url('/assets/icons/plus-circle.svg') no-repeat 16px center;
} }
@ -137,3 +140,7 @@
.is-block { .is-block {
display: block; display: block;
} }
.has-nopadbottom {
padding-bottom: 0;
}

3
src/styles/partials/_buttons.scss
View File

@ -23,7 +23,7 @@ button,
a { a {
@extend .outlined; @extend .outlined;
text-align: center; text-align: center;
padding: 10px 30px; //padding: 10px 30px;
border: 1px solid transparent; border: 1px solid transparent;
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
@ -196,6 +196,7 @@ a {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
@extend .outlined; @extend .outlined;
margin-top: -0.5rem;
&:hover { &:hover {
color: $white !important; color: $white !important;