Skip to content

R
RLG Maker
Commit 21c7e2bc authored by Romain DELEAU's avatar Romain DELEAU
Browse files
Options

add annexe-task and random-event

parent 3e7b5ae1
Hide whitespace changes
Inline Side-by-side
Showing with 896 additions and 10 deletions
src/app/app.component.html
View file @ 21c7e2bc
......@@ -21,17 +21,25 @@
<app-task [style.z-index]="2"></app-task>
<app-task [style.z-index]="1"></app-task>
</div>
<div style="display: flex;" [style.z-index]="2">
<app-annexe-task [style.z-index]="2"></app-annexe-task>
</div>
<div style="display: flex;" [style.z-index]="2">
<app-random-event [style.z-index]="2"></app-random-event>
</div>
</div>
</div>
<div style="display: flex;">
<app-role [style.z-index]="10"></app-role>
<div [style.z-index]="1">
<div style="display: flex;" [style.z-index]="2">
<app-task [style.z-index]="2"></app-task>
<app-task [style.z-index]="1"></app-task>
<app-task [style.z-index]="3"></app-task>
<app-annexe-task [style.z-index]="2"></app-annexe-task>
<app-random-event [style.z-index]="1"></app-random-event>
</div>
</div>
</div>
</div>
</div>
</div>
......
src/app/app.module.ts
View file @ 21c7e2bc
......@@ -17,6 +17,7 @@ import { AnnexeTaskComponent } from './pieces/annexe-task/annexe-task.component'
import { CommentsComponent } from './sider-pieces/comments/comments.component';
import { RepeatComponent } from './sider-pieces/repeat/repeat.component';
import { CommentComponent } from './components/comment/comment.component';
import { RandomEventComponent } from './pieces/random-event/random-event.component';
import { DragScrollDirective } from './directives/drag-scroll.directive';
import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive';
......@@ -35,7 +36,8 @@ import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive
MouseWheelZoomDirective,
CommentsComponent,
RepeatComponent,
CommentComponent
CommentComponent,
RandomEventComponent
],
imports: [
BrowserModule,
......
src/app/pieces/annexe-task/annexe-task.component.html
View file @ 21c7e2bc
<div class="piece">
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece-attach piece-attach-left"></div>
<div class="piece-attach piece-attach-right"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
<mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
</div>
<div class="piece-prerequires" [class]="displayPrequires">
<div class="piece-prerequires-prerequires">
<label class="piece-prerequires-title">Antécédents</label>
<div class="piece-prerequires-form">
<div class="piece-prerequires-prerequires-element">
<input name="antecedent" type="checkbox" value="true"/>
<label for="antecedent">EX1</label>
</div>
<div class="piece-prerequires-prerequires-element">
<input name="antecedent" type="checkbox"/>
<label for="antecedent">EX2</label>
</div>
</div>
</div>
<div class="piece-prerequires-ressources">
<label class="piece-prerequires-title">Ressources & attributs</label>
<div class="piece-prerequires-form">
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
<label for="ressource">Pain</label>
</div>
<div class="piece-prerequires-ressources-element-quantity">
<select name="ressource">
<option><</option>
<option><=</option>
<option>=</option>
<option>>=</option>
<option>></option>
</select>
<input type="text" value="1"/>
</div>
</div>
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
<label for="ressource">Citron</label>
</div>
<div class="piece-prerequires-ressources-element-quantity">
<select name="ressource">
<option><</option>
<option><=</option>
<option>=</option>
<option>>=</option>
<option>></option>
</select>
<input type="text" value="1"/>
</div>
</div>
</div>
</div>
</div>
<div class="piece-form">
<h1>Annexe Task</h1>
<div class="piece-form-top">
<input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
<div class="piece-form-top-title">Tâche annexe</div>
</div>
<textarea class="piece-form-content" placeholder="Vérifier ses connaissances sur les formulaires PHP"></textarea>
<div class="piece-form-bottom">
<button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
Prérequis
</button>
<div class="piece-form-bottom-duration">
<input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
<select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
<option selected value="UT">UT</option>
<option value="min">min</option>
<option value="tours">tours</option>
</select>
</div>
</div>
</div>
</div>
src/app/pieces/annexe-task/annexe-task.component.scss
View file @ 21c7e2bc
......@@ -5,7 +5,132 @@
height: 400px;
position: relative;
background-color: var(--piece-background-color);
//border: solid black 2px;
transition: all 0.5s ease;
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
top: -50px;
left: 50%;
transform: translateX(-50%);
transition: transform 0.5s ease;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
mat-icon {
cursor: pointer;
transform: scale(1.1);
}
mat-icon:hover {
opacity: 0.75;
}
}
&-menu.show {
transform: translateX(-50%) translateY(0);
}
&-menu.hide {
transform: translateX(-50%) translateY(100%);
}
&-prerequires {
position: absolute;
width: 350px;
height: 150px;
background-color: #f7f7f7;
z-index: -1;
bottom: 0;
left: 25px;
border: solid black 1px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
transition: transform 0.5s ease;
border-top: none;
display: flex;
flex-direction: row;
&-title {
margin-left: auto;
margin-right: auto;
font-family: 'Glacial Indifference Bold';
font-size: 14px;
}
&-form {
display: flex;
flex-direction: column;
overflow: scroll;
}
&-prerequires {
position: relative;
border-right: solid #a3a3a3 1px;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 90%;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: column;
}
&-ressources {
width: 50%;
height: 90%;
border-bottom-right-radius: 10px;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 90%;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: column;
&-element {
display: flex;
flex-direction: row;
width: 100%;
margin-top: 5px;
&-checkbox {
position: relative;
width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-quantity {
position: relative;
width: 50%;
display: flex;
padding-right: 5px;
justify-content: flex-end;
input {
width: 20px;
border: none;
border-radius: 10px;
text-align: center;
}
select {
width: 40px;
background-color: white;
border: none;
border-radius: 10px;
margin-right: 5px;
}
}
}
}
}
&-prerequires.show {
transform: translateY(100%);
}
&-attach {
z-index: 1;
......@@ -31,13 +156,106 @@
position: absolute;
left: -20px;
top: 200px;
//transform: translateY(-50%);
}
}
&-form {
display: flex;
height: 100%;
padding: 0px 10px 0px 35px;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
z-index: 2;
input {
height: 40px;
border-radius: 10px;
border: none;
padding: 5px 10px 5px 10px;
font-size: 15px;
}
textarea {
border-radius: 20px;
padding: 10px;
border: none;
resize: none;
flex-grow: 1;
font-size: 15px;
background-image: url("../../../assets/background-images/annexe.png");
background-position: center;
background-repeat: no-repeat;
background-size: 30%;
}
select {
background-color: white;
border: none;
height: 50px;
border-radius: 10px;
padding: 5px 10px 5px 10px;
}
&-top {
margin-top: 20px;
display: flex;
flex-direction: row;
//justify-content: space-between;
&-identifier {
width: 50px;
text-align: center;
}
&-title {
font-size: 25px;
font-family: 'Glacial Indifference Bold';
position: relative;
margin-left: 10px;
}
&-symbol {
width: 50px;
height: 50px;
background-color: white;
border-radius: 10px;
cursor: pointer;
mat-icon {
transform: scale(1.3);
overflow: visible;
}
}
}
&-content {
margin-top: 10px;
height: 100%;
margin-bottom: 10px;
}
&-bottom {
display: flex;
flex-direction: row;
margin-bottom: 10px;
justify-content: space-between;
&-duration {
input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 20px;
text-align: center;
z-index: 2;
}
select {
width: 60px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
z-index: 1;
}
}
&-prerequires {
width: 100px;
height: 50px;
background-color: white;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
......
src/app/pieces/annexe-task/annexe-task.component.ts
View file @ 21c7e2bc
......@@ -12,4 +12,49 @@ export class AnnexeTaskComponent implements OnInit {
ngOnInit(): void {
}
displayMenu: string = 'hide';
displayPrequires: string = 'hide';
durationUnit: string = 'UT';
duration: number = 1;
pieceWidth: string = '400px';
durationChange(): void {
if(this.durationUnit === 'UT') {
if(this.duration >= 1 && this.duration <= 10) {
this.pieceWidth = (this.duration*400)+'px';
} else if(this.duration > 10) {
this.pieceWidth = '4000px';
} else {
this.pieceWidth = '400px';
}
} else {
this.pieceWidth = '400px';
}
}
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
onClickDots(): void {
}
changeDisplayPrerequires(): void {
if(this.displayPrequires == 'show') {
this.displayPrequires = 'hide';
} else {
this.displayPrequires = 'show';
}
}
}
src/app/pieces/random-event/random-event.component.html 0 → 100644
View file @ 21c7e2bc
<div class="piece" [ngStyle]="{'width': pieceWidth}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece-attach piece-attach-left"></div>
<div class="piece-attach piece-attach-right"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
<mat-icon fontIcon="add" (click)="onClickAdd()"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
</div>
<div class="piece-symbolchoice" [class]="displaySymbolChoice">
<div class="piece-symbolchoice-header">
<label>Choisir un symbole de tâche commune :</label>
<div><mat-icon fontIcon="delete" (click)="setSymbol('','')"></mat-icon></div>
</div>
<div class="piece-symbolchoice-symbols">
<mat-icon [style.color]="'#d79297'" fontIcon="favorite" (click)="setSymbol('favorite','#d79297')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="diamond" (click)="setSymbol('diamond','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#e9ec54'" fontIcon="star" (click)="setSymbol('star','#e9ec54')"></mat-icon>
<mat-icon [style.color]="'#f5cee3'" fontIcon="hexagon" (click)="setSymbol('hexagon','#f5cee3')"></mat-icon>
<mat-icon [style.color]="'#d3d2d2'" fontIcon="add" (click)="setSymbol('add','#d3d2d2')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="circle" (click)="setSymbol('circle','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#b6cc87'" fontIcon="eco" (click)="setSymbol('eco','#b6cc87')"></mat-icon>
<mat-icon [style.color]="'#d0bbdb'" fontIcon="play_arrow" (click)="setSymbol('play_arrow','#d0bbdb')"></mat-icon>
<mat-icon [style.color]="'#8b7e64'" fontIcon="remove" (click)="setSymbol('remove','#8b7e64')"></mat-icon>
</div>
<div class="piece-symbolchoice-symbols">
<mat-icon [style.color]="'#d79297'" fontIcon="square" (click)="setSymbol('square','#d79297')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#e9ec54'" fontIcon="square" (click)="setSymbol('square','#e9ec54')"></mat-icon>
<mat-icon [style.color]="'#f5cee3'" fontIcon="square" (click)="setSymbol('square','#f5cee3')"></mat-icon>
<mat-icon [style.color]="'#d3d2d2'" fontIcon="square" (click)="setSymbol('square','#d3d2d2')"></mat-icon>
<mat-icon [style.color]="'#9ad5ec'" fontIcon="square" (click)="setSymbol('square','#9ad5ec')"></mat-icon>
<mat-icon [style.color]="'#b6cc87'" fontIcon="square" (click)="setSymbol('square','#b6cc87')"></mat-icon>
<mat-icon [style.color]="'#d0bbdb'" fontIcon="square" (click)="setSymbol('square','#d0bbdb')"></mat-icon>
<mat-icon [style.color]="'#8b7e64'" fontIcon="square" (click)="setSymbol('square','#8b7e64')"></mat-icon>
</div>
</div>
<div class="piece-prerequires" [class]="displayPrequires">
<div class="piece-prerequires-prerequires">
<label class="piece-prerequires-title">Antécédents</label>
<div class="piece-prerequires-form">
<div class="piece-prerequires-prerequires-element">
<input name="antecedent" type="checkbox" value="true"/>
<label for="antecedent">EX1</label>
</div>
<div class="piece-prerequires-prerequires-element">
<input name="antecedent" type="checkbox"/>
<label for="antecedent">EX2</label>
</div>
</div>
</div>
<div class="piece-prerequires-ressources">
<label class="piece-prerequires-title">Ressources & attributs</label>
<div class="piece-prerequires-form">
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
<label for="ressource">Pain</label>
</div>
<div class="piece-prerequires-ressources-element-quantity">
<select name="ressource">
<option><</option>
<option><=</option>
<option>=</option>
<option>>=</option>
<option>></option>
</select>
<input type="text" value="1"/>
</div>
</div>
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
<label for="ressource">Citron</label>
</div>
<div class="piece-prerequires-ressources-element-quantity">
<select name="ressource">
<option><</option>
<option><=</option>
<option>=</option>
<option>>=</option>
<option>></option>
</select>
<input type="text" value="1"/>
</div>
</div>
</div>
</div>
</div>
<div class="piece-form">
<div class="piece-form-top">
<input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
<div class="piece-form-top-title">Événement<br>aléatoire</div>
<button mat-button class="piece-form-top-symbol" (click)="changeDisplaySymbolChoice()">
<mat-icon *ngIf="symbol" [style.color]="symbolColor" [fontIcon]="symbol"></mat-icon>
</button>
</div>
<textarea class="piece-form-content" placeholder="Positionner dans l'ordre les balises HTML principales"></textarea>
<div class="piece-form-bottom">
<button mat-button class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
Prérequis
</button>
<div class="piece-form-bottom-duration">
<input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
<select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
<option selected value="UT">UT</option>
<option value="min">min</option>
<option value="tours">tours</option>
</select>
</div>
</div>
</div>
</div>
src/app/pieces/random-event/random-event.component.scss 0 → 100644
View file @ 21c7e2bc
.piece {
--piece-background-color: #bfdaa3;
width: 400px;
height: 400px;
position: relative;
background-color: var(--piece-background-color);
transition: all 0.5s ease;
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
z-index: -1;
top: -50px;
left: 50%;
transform: translateX(-50%);
transition: transform 0.5s ease;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid black 1px;
display: flex;
padding: 15px 20px 15px 20px;
justify-content: space-around;
mat-icon {
cursor: pointer;
transform: scale(1.1);
}
mat-icon:hover {
opacity: 0.75;
}
}
&-menu.show {
transform: translateX(-50%) translateY(0);
}
&-menu.hide {
transform: translateX(-50%) translateY(100%);
}
&-symbolchoice {
position: absolute;
background-color: #f7f7f7;
width: 300px;
height: 100px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: solid black 1px;
border-left: none;
padding: 10px;
right: 0;
top: 5px;
z-index: -1;
transition: transform 0.5s ease;
label {
font-size: 14px;
}
mat-icon {
cursor: pointer;
transform: scale(1.2);
}
mat-icon:hover {
opacity: 0.75;
}
&-header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
&-symbols {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 10px;
}
}
&-symbolchoice.show {
transform: translateX(100%);
}
&-prerequires {
position: absolute;
width: 350px;
height: 150px;
background-color: #f7f7f7;
z-index: -1;
bottom: 0;
left: 25px;
border: solid black 1px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
transition: transform 0.5s ease;
border-top: none;
display: flex;
flex-direction: row;
&-title {
margin-left: auto;
margin-right: auto;
font-family: 'Glacial Indifference Bold';
font-size: 14px;
}
&-form {
display: flex;
flex-direction: column;
overflow: scroll;
}
&-prerequires {
position: relative;
border-right: solid #a3a3a3 1px;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 90%;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: column;
}
&-ressources {
width: 50%;
height: 90%;
border-bottom-right-radius: 10px;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 50%;
height: 90%;
border-bottom-left-radius: 10px;
display: flex;
flex-direction: column;
&-element {
display: flex;
flex-direction: row;
width: 100%;
margin-top: 5px;
&-checkbox {
position: relative;
width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-quantity {
position: relative;
width: 50%;
display: flex;
padding-right: 5px;
justify-content: flex-end;
input {
width: 20px;
border: none;
border-radius: 10px;
text-align: center;
}
select {
width: 40px;
background-color: white;
border: none;
border-radius: 10px;
margin-right: 5px;
}
}
}
}
}
&-prerequires.show {
transform: translateY(100%);
}
&-attach {
z-index: 1;
&-left {
border-top: solid black 1px;
border-right: solid black 1px;
width: 40px;
height: 40px;
background-color: var(--piece-background-color);
transform: translateY(-50%) rotate(45deg);
position: absolute;
right: -20px;
top: 200px;
}
&-right {
border-top: solid black 1px;
border-right: solid black 1px;
width: 40px;
height: 40px;
background-color: var(--background-color);
transform: translateY(-50%) rotate(45deg);
position: absolute;
left: -20px;
top: 200px;
}
}
&-form {
height: 100%;
padding: 0px 10px 0px 35px;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
z-index: 2;
input {
height: 40px;
border-radius: 10px;
border: none;
padding: 5px 10px 5px 10px;
font-size: 15px;
}
textarea {
border-radius: 20px;
padding: 10px;
border: none;
resize: none;
flex-grow: 1;
font-size: 15px;
background-image: url("../../../assets/background-images/event.png");
background-position: center;
background-repeat: no-repeat;
background-size: 30%;
}
select {
background-color: white;
border: none;
height: 50px;
border-radius: 10px;
padding: 5px 10px 5px 10px;
}
&-top {
margin-top: 20px;
display: flex;
flex-direction: row;
&-identifier {
width: 50px;
text-align: center;
}
&-title {
font-size: 25px;
font-family: 'Glacial Indifference Bold';
position: relative;
margin-left: 10px;
}
&-symbol {
width: 50px;
height: 50px;
background-color: white;
border-radius: 10px;
cursor: pointer;
position: absolute;
right: 10px;
mat-icon {
transform: scale(1.3);
overflow: visible;
}
}
}
&-content {
margin-top: 10px;
height: 100%;
margin-bottom: 10px;
}
&-bottom {
display: flex;
flex-direction: row;
margin-bottom: 10px;
justify-content: space-between;
&-duration {
input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 20px;
text-align: center;
z-index: 2;
}
select {
width: 60px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
z-index: 1;
}
}
&-prerequires {
width: 100px;
height: 50px;
background-color: white;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
.piece::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border: 1px solid black;
}
\ No newline at end of file
src/app/pieces/random-event/random-event.component.spec.ts 0 → 100644
View file @ 21c7e2bc
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RandomEventComponent } from './random-event.component';
describe('RandomEventComponent', () => {
let component: RandomEventComponent;
let fixture: ComponentFixture<RandomEventComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ RandomEventComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(RandomEventComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pieces/random-event/random-event.component.ts 0 → 100644
View file @ 21c7e2bc
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-random-event',
templateUrl: './random-event.component.html',
styleUrls: ['./random-event.component.scss']
})
export class RandomEventComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
displayMenu: string = 'hide';
displaySymbolChoice: string = 'hide';
displayPrequires: string = 'hide';
durationUnit: string = 'UT';
duration: number = 1;
pieceWidth: string = '400px';
symbol: string = ''; // A changer quand implémentation des données
symbolColor: string = ''; //A changer quand implémentation des données
durationChange(): void {
if(this.durationUnit === 'UT') {
if(this.duration >= 1 && this.duration <= 10) {
this.pieceWidth = (this.duration*400)+'px';
} else if(this.duration > 10) {
this.pieceWidth = '4000px';
} else {
this.pieceWidth = '400px';
}
} else {
this.pieceWidth = '400px';
}
}
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
onClickDots(): void {
}
changeDisplaySymbolChoice(): void {
if(this.displaySymbolChoice == 'show') {
this.displaySymbolChoice = 'hide';
} else {
this.displaySymbolChoice = 'show';
}
}
setSymbol(symbol: string, symbolColor: string): void {
this.symbol = symbol;
this.symbolColor = symbolColor;
this.displaySymbolChoice = 'hide';
}
changeDisplayPrerequires(): void {
if(this.displayPrequires == 'show') {
this.displayPrequires = 'hide';
} else {
this.displayPrequires = 'show';
}
}
}
src/app/pieces/task/task.component.html
View file @ 21c7e2bc
......@@ -55,7 +55,6 @@
<div class="piece-prerequires-ressources">
<label class="piece-prerequires-title">Ressources & attributs</label>
<div class="piece-prerequires-form">
<!--<label style="display: flex; justify-content: flex-end; margin-right: 5px;">Quantité</label>-->
<div class="piece-prerequires-ressources-element">
<div class="piece-prerequires-ressources-element-checkbox">
<input name="ressource" type="checkbox"/>
......
src/app/pieces/task/task.component.scss
View file @ 21c7e2bc
......@@ -240,7 +240,6 @@
margin-top: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
&-identifier {
width: 50px;
text-align: center;
......@@ -248,6 +247,8 @@
&-title {
font-size: 25px;
font-family: 'Glacial Indifference Bold';
position: relative;
margin-left: 10px;
}
&-symbol {
width: 50px;
......@@ -255,6 +256,8 @@
background-color: white;
border-radius: 10px;
cursor: pointer;
position: absolute;
right: 10px;
mat-icon {
transform: scale(1.3);
overflow: visible;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment