Skip to content

R
RLG Maker
Commit 6bed8d24 authored by Romain DELEAU's avatar Romain DELEAU
Browse files
Options

add optionnal-task

parent 225bafa9
Hide whitespace changes
Inline Side-by-side
Showing with 562 additions and 2 deletions
src/app/app.component.html
View file @ 6bed8d24
...@@ -46,7 +46,8 @@ ...@@ -46,7 +46,8 @@
</div> </div>
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks" <div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
[style.z-index]="2"> [style.z-index]="2">
<app-annexe-task [style.z-index]="2"></app-annexe-task> <app-annexe-task [style.z-index]="3"></app-annexe-task>
<app-optionnal-task [style.z-index]="2"></app-optionnal-task>
<app-final-task [style.z-index]="1"></app-final-task> <app-final-task [style.z-index]="1"></app-final-task>
</div> </div>
<div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks" <div class="container-scenario-main-missions-mission-roles-role-tasks-inlineTasks"
......
src/app/app.module.ts
View file @ 6bed8d24
...@@ -25,6 +25,7 @@ import { StepComponent } from './pieces/step/step.component'; ...@@ -25,6 +25,7 @@ import { StepComponent } from './pieces/step/step.component';
import { FinalTaskComponent } from './pieces/final-task/final-task.component'; import { FinalTaskComponent } from './pieces/final-task/final-task.component';
import { RepeatTaskComponent } from './pieces/repeat-task/repeat-task.component'; import { RepeatTaskComponent } from './pieces/repeat-task/repeat-task.component';
import { InteruptComponent } from './sider-pieces/interupt/interupt.component'; import { InteruptComponent } from './sider-pieces/interupt/interupt.component';
import { OptionnalTaskComponent } from './pieces/optionnal-task/optionnal-task.component';
import { DragScrollDirective } from './directives/drag-scroll.directive'; import { DragScrollDirective } from './directives/drag-scroll.directive';
import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive'; import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive';
...@@ -51,7 +52,8 @@ import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive ...@@ -51,7 +52,8 @@ import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive
StepComponent, StepComponent,
FinalTaskComponent, FinalTaskComponent,
RepeatTaskComponent, RepeatTaskComponent,
InteruptComponent InteruptComponent,
OptionnalTaskComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
......
src/app/pieces/optionnal-task/optionnal-task.component.html 0 → 100644
View file @ 6bed8d24
<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">Tâche<br>optionnelle</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/optionnal-task/optionnal-task.component.scss 0 → 100644
View file @ 6bed8d24
.piece {
--piece-background-color: #e8e3b3;
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;
&-right {
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;
}
&-left {
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;
}
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 {
display: flex;
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/optionnal-task/optionnal-task.component.spec.ts 0 → 100644
View file @ 6bed8d24
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { OptionnalTaskComponent } from './optionnal-task.component';
describe('OptionnalTaskComponent', () => {
let component: OptionnalTaskComponent;
let fixture: ComponentFixture<OptionnalTaskComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ OptionnalTaskComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(OptionnalTaskComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pieces/optionnal-task/optionnal-task.component.ts 0 → 100644
View file @ 6bed8d24
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-optionnal-task',
templateUrl: './optionnal-task.component.html',
styleUrls: ['./optionnal-task.component.scss']
})
export class OptionnalTaskComponent implements OnInit {
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
constructor() { }
ngOnInit(): void {
}
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';
}
}
}
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