Skip to content

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

prerequires menu

parent 7768cdf0
Hide whitespace changes
Inline Side-by-side
Showing with 177 additions and 4 deletions
src/app/pieces/task/task.component.html
View file @ a1efd8bb
......@@ -33,7 +33,60 @@
<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">
<!--<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"/>
<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">
......@@ -46,10 +99,9 @@
</div>
<textarea class="piece-form-content" placeholder="Acheter des citrons"></textarea>
<div class="piece-form-bottom">
<select class="piece-form-bottom-antecedent" name="antecedent">
<option selected value="0">/</option>
<option value="1">1</option>
</select>
<div class="piece-form-bottom-prerequires" (click)="changeDisplayPrerequires()">
<label>Prérequis</label>
</div>
<div class="piece-form-bottom-duration">
<input name="value" type="text" [(ngModel)]="duration" (input)="durationChange()"/>
<select name="unite" [(ngModel)]="durationUnit" (change)="durationChange()">
......
src/app/pieces/task/task.component.scss
View file @ a1efd8bb
......@@ -46,6 +46,7 @@
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border: solid black 1px;
border-left: none;
padding: 10px;
right: 0;
top: 5px;
......@@ -74,6 +75,100 @@
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 {
......@@ -187,6 +282,23 @@
z-index: 1;
}
}
&-prerequires {
width: 100px;
height: 50px;
background-color: white;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
label {
cursor: pointer;
}
}
&-prerequires:hover {
opacity: 0.75;
}
}
}
}
......
src/app/pieces/task/task.component.ts
View file @ a1efd8bb
......@@ -14,6 +14,7 @@ export class TaskComponent implements OnInit {
displayMenu: string = 'hide';
displaySymbolChoice: string = 'hide';
displayPrequires: string = 'hide';
durationUnit: string = 'UT';
duration: number = 1;
......@@ -66,6 +67,14 @@ export class TaskComponent implements OnInit {
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