Skip to content

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

hover menu

parent 54b517a4
Show whitespace changes
Inline Side-by-side
Showing with 414 additions and 33 deletions
angular.json
View file @ b634930b
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [] "scripts": []
...@@ -96,6 +97,7 @@ ...@@ -96,6 +97,7 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [] "scripts": []
......
package-lock.json
View file @ b634930b
...@@ -9,10 +9,12 @@ ...@@ -9,10 +9,12 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@angular/animations": "^14.0.0", "@angular/animations": "^14.0.0",
"@angular/cdk": "^14.0.0",
"@angular/common": "^14.0.0", "@angular/common": "^14.0.0",
"@angular/compiler": "^14.0.0", "@angular/compiler": "^14.0.0",
"@angular/core": "^14.0.0", "@angular/core": "^14.0.0",
"@angular/forms": "^14.0.0", "@angular/forms": "^14.0.0",
"@angular/material": "^14.2.7",
"@angular/platform-browser": "^14.0.0", "@angular/platform-browser": "^14.0.0",
"@angular/platform-browser-dynamic": "^14.0.0", "@angular/platform-browser-dynamic": "^14.0.0",
"@angular/router": "^14.0.0", "@angular/router": "^14.0.0",
...@@ -390,6 +392,28 @@ ...@@ -390,6 +392,28 @@
"@angular/core": "14.2.12" "@angular/core": "14.2.12"
} }
}, },
"node_modules/@angular/cdk": {
"version": "14.2.7",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-14.2.7.tgz",
"integrity": "sha512-/tEsYaUbDSnfEmKVvAMramIptmhI67O+9STjOV0i+74XR2NospeK0fkbywIANu1n3w6AHGMotvRWJrjmbCElFg==",
"dependencies": {
"tslib": "^2.3.0"
},
"optionalDependencies": {
"parse5": "^5.0.0"
},
"peerDependencies": {
"@angular/common": "^14.0.0 || ^15.0.0",
"@angular/core": "^14.0.0 || ^15.0.0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/cdk/node_modules/parse5": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
"optional": true
},
"node_modules/@angular/cli": { "node_modules/@angular/cli": {
"version": "14.0.7", "version": "14.0.7",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.0.7.tgz", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.0.7.tgz",
...@@ -605,6 +629,23 @@ ...@@ -605,6 +629,23 @@
"rxjs": "^6.5.3 || ^7.4.0" "rxjs": "^6.5.3 || ^7.4.0"
} }
}, },
"node_modules/@angular/material": {
"version": "14.2.7",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.7.tgz",
"integrity": "sha512-WXHh8pEStpgkXZJmYOg2cI8BSHkV82ET4XTJCNPdveumaCn1UYnaNzsXD13kw5z+zmy8CufhFEzdXTrv/yt7KQ==",
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/animations": "^14.0.0 || ^15.0.0",
"@angular/cdk": "14.2.7",
"@angular/common": "^14.0.0 || ^15.0.0",
"@angular/core": "^14.0.0 || ^15.0.0",
"@angular/forms": "^14.0.0 || ^15.0.0",
"@angular/platform-browser": "^14.0.0 || ^15.0.0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/platform-browser": { "node_modules/@angular/platform-browser": {
"version": "14.2.12", "version": "14.2.12",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.12.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.12.tgz",
...@@ -12552,6 +12593,23 @@ ...@@ -12552,6 +12593,23 @@
"tslib": "^2.3.0" "tslib": "^2.3.0"
} }
}, },
"@angular/cdk": {
"version": "14.2.7",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-14.2.7.tgz",
"integrity": "sha512-/tEsYaUbDSnfEmKVvAMramIptmhI67O+9STjOV0i+74XR2NospeK0fkbywIANu1n3w6AHGMotvRWJrjmbCElFg==",
"requires": {
"parse5": "^5.0.0",
"tslib": "^2.3.0"
},
"dependencies": {
"parse5": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
"optional": true
}
}
},
"@angular/cli": { "@angular/cli": {
"version": "14.0.7", "version": "14.0.7",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.0.7.tgz", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-14.0.7.tgz",
...@@ -12688,6 +12746,14 @@ ...@@ -12688,6 +12746,14 @@
"tslib": "^2.3.0" "tslib": "^2.3.0"
} }
}, },
"@angular/material": {
"version": "14.2.7",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-14.2.7.tgz",
"integrity": "sha512-WXHh8pEStpgkXZJmYOg2cI8BSHkV82ET4XTJCNPdveumaCn1UYnaNzsXD13kw5z+zmy8CufhFEzdXTrv/yt7KQ==",
"requires": {
"tslib": "^2.3.0"
}
},
"@angular/platform-browser": { "@angular/platform-browser": {
"version": "14.2.12", "version": "14.2.12",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.12.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-14.2.12.tgz",
......
src/app/app.component.html
View file @ b634930b
...@@ -2,18 +2,16 @@ ...@@ -2,18 +2,16 @@
<div style="display: flex; flex-direction: column;" [style.z-index]="4"> <div style="display: flex; flex-direction: column;" [style.z-index]="4">
<app-game-educationnal-objective></app-game-educationnal-objective> <app-game-educationnal-objective></app-game-educationnal-objective>
<app-game-context></app-game-context> <app-game-context [style.z-index]="2"></app-game-context>
</div> </div>
<div style="display: flex; flex-direction: column;" [style.z-index]="3"> <div style="display: flex; flex-direction: column;" [style.z-index]="3">
<app-educational-objective *ngFor="let i of range(1)" [style.z-index]="-i"></app-educational-objective> <app-educational-objective></app-educational-objective>
<app-mission-context></app-mission-context> <app-mission-context [style.z-index]="2"></app-mission-context>
</div> </div>
<!--<app-educational-objective></app-educational-objective>-->
<app-role [style.z-index]="2" ></app-role> <app-role [style.z-index]="2" ></app-role>
<app-task [style.z-index]="1"></app-task> <app-task [style.z-index]="1"></app-task>
......
src/app/app.component.spec.ts
View file @ b634930b
...@@ -20,16 +20,16 @@ describe('AppComponent', () => { ...@@ -20,16 +20,16 @@ describe('AppComponent', () => {
expect(app).toBeTruthy(); expect(app).toBeTruthy();
}); });
it(`should have as title 'puzzletest'`, () => { it(`should have as title 'RLG Tool'`, () => {
const fixture = TestBed.createComponent(AppComponent); const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance; const app = fixture.componentInstance;
expect(app.title).toEqual('puzzletest'); expect(app.title).toEqual('RLG Tool');
}); });
it('should render title', () => { it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent); const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges(); fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement; const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('.content span')?.textContent).toContain('puzzletest app is running!'); expect(compiled.querySelector('.content span')?.textContent).toContain('RLG Tool app is running!');
}); });
}); });
src/app/app.component.ts
View file @ b634930b
...@@ -6,7 +6,7 @@ import { Component } from '@angular/core'; ...@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss']
}) })
export class AppComponent { export class AppComponent {
title = 'puzzletest'; title = 'RLG Tool';
range(n: number): number[] { range(n: number): number[] {
return Array.from(Array(n), (_, i) => i); return Array.from(Array(n), (_, i) => i);
......
src/app/app.module.ts
View file @ b634930b
...@@ -12,6 +12,8 @@ import { TaskComponent } from './pieces/task/task.component'; ...@@ -12,6 +12,8 @@ import { TaskComponent } from './pieces/task/task.component';
import { AnnexeTaskComponent } from './pieces/annexe-task/annexe-task.component'; import { AnnexeTaskComponent } from './pieces/annexe-task/annexe-task.component';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
@NgModule({ @NgModule({
declarations: [ declarations: [
...@@ -28,6 +30,8 @@ import { FormsModule } from '@angular/forms'; ...@@ -28,6 +30,8 @@ import { FormsModule } from '@angular/forms';
BrowserModule, BrowserModule,
AppRoutingModule, AppRoutingModule,
FormsModule, FormsModule,
BrowserAnimationsModule,
MatIconModule,
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]
......
src/app/pieces/educational-objective/educational-objective.component.html
View file @ b634930b
<!-- <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece">
<textarea placeholder="Maitriser Moodle"></textarea>
</div>
-->
<div class="piece">
<div class="piece-attach piece-attach-right"></div> <div class="piece-attach piece-attach-right"></div>
<div class="piece-attach piece-attach-left-top"></div> <div class="piece-attach piece-attach-left-top"></div>
<div class="piece-attach piece-attach-left-bottom"></div> <div class="piece-attach piece-attach-left-bottom"></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>
</div>
<div class="piece-form"> <div class="piece-form">
<div class="piece-form-title">Objectif pédagogique</div> <div class="piece-form-title">Objectif pédagogique</div>
<!--<div class="piece-form-subtitle">Commun pour la mission 1</div>-->
<div class="piece-form-objective"> <div class="piece-form-objective">
<label for="objective">Commun pour la mission 1</label> <label for="objective">Commun pour la mission 1</label>
<textarea name="objective" placeholder="Comprendre la dépendance de chaque rôle pour atteindre ses objectifs"></textarea> <textarea name="objective" placeholder="Comprendre la dépendance de chaque rôle pour atteindre ses objectifs"></textarea>
......
src/app/pieces/educational-objective/educational-objective.component.scss
View file @ b634930b
...@@ -5,6 +5,39 @@ ...@@ -5,6 +5,39 @@
height: 400px; height: 400px;
position: relative; position: relative;
background-color: var(--piece-background-color); background-color: var(--piece-background-color);
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
opacity: 0.75;
z-index: -1;
top: -51px;
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%);
}
&-attach { &-attach {
z-index: 1; z-index: 1;
border-right: solid black 1px; border-right: solid black 1px;
......
src/app/pieces/educational-objective/educational-objective.component.ts
View file @ b634930b
...@@ -12,4 +12,18 @@ export class EducationalObjectiveComponent implements OnInit { ...@@ -12,4 +12,18 @@ export class EducationalObjectiveComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
} }
displayMenu: String = 'hide';
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
} }
src/app/pieces/game-context/game-context.component.html
View file @ b634930b
<div class="piece"> <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece-attach piece-attach-right-top"></div> <div class="piece-attach piece-attach-right-top"></div>
<div class="piece-attach piece-attach-right-bottom"></div> <div class="piece-attach piece-attach-right-bottom"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
<mat-icon fontIcon="more_vert" (click)="onClickDots()"></mat-icon>
</div>
<div class="piece-form"> <div class="piece-form">
<div class="piece-form-title">Contexte du jeu</div> <div class="piece-form-title">Contexte du jeu</div>
<div class="piece-form-universe"> <div class="piece-form-universe">
......
src/app/pieces/game-context/game-context.component.scss
View file @ b634930b
...@@ -6,6 +6,38 @@ ...@@ -6,6 +6,38 @@
position: relative; position: relative;
background-color: var(--piece-background-color); background-color: var(--piece-background-color);
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
opacity: 0.75;
z-index: -1;
top: -51px;
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%);
}
&-attach { &-attach {
z-index: 1; z-index: 1;
border-right: solid black 1px; border-right: solid black 1px;
......
src/app/pieces/game-context/game-context.component.ts
View file @ b634930b
...@@ -12,4 +12,18 @@ export class GameContextComponent implements OnInit { ...@@ -12,4 +12,18 @@ export class GameContextComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
} }
displayMenu: String = 'hide';
onClickComments(): void {
}
onClickErase(): void {
}
onClickDots(): void {
}
} }
src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.html
View file @ b634930b
<div class="piece"> <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece-attach piece-attach-right-top"></div> <div class="piece-attach piece-attach-right-top"></div>
<div class="piece-attach piece-attach-right-bottom"></div> <div class="piece-attach piece-attach-right-bottom"></div>
<div class="piece-menu" [class]="displayMenu">
<mat-icon fontIcon="mode_comment" (click)="onClickComments()"></mat-icon>
<mat-icon fontIcon="backspace" (click)="onClickErase()"></mat-icon>
</div>
<div class="piece-form"> <div class="piece-form">
<div class="piece-form-title">Objectif pédagogique</div> <div class="piece-form-title">Objectif pédagogique</div>
......
src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.scss
View file @ b634930b
...@@ -5,6 +5,39 @@ ...@@ -5,6 +5,39 @@
height: 400px; height: 400px;
position: relative; position: relative;
background-color: var(--piece-background-color); background-color: var(--piece-background-color);
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
opacity: 0.75;
z-index: -1;
top: -51px;
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%);
}
&-attach { &-attach {
z-index: 1; z-index: 1;
border-right: solid black 1px; border-right: solid black 1px;
......
src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.ts
View file @ b634930b
...@@ -12,4 +12,14 @@ export class GameEducationnalObjectiveComponent implements OnInit { ...@@ -12,4 +12,14 @@ export class GameEducationnalObjectiveComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
} }
displayMenu: String = 'hide';
onClickComments(): void {
}
onClickErase(): void {
}
} }
src/app/pieces/mission-context/mission-context.component.html
View file @ b634930b
<div class="piece"> <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece-attach piece-attach-left-top"></div> <div class="piece-attach piece-attach-left-top"></div>
<div class="piece-attach piece-attach-right"></div> <div class="piece-attach piece-attach-right"></div>
<div class="piece-attach piece-attach-left-bottom"></div> <div class="piece-attach piece-attach-left-bottom"></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>
</div>
<div class="piece-form"> <div class="piece-form">
<div class="piece-form-title">Contexte de la mission 1</div> <div class="piece-form-title">Contexte de la mission 1</div>
<div class="piece-form-duration"> <div class="piece-form-duration">
......
src/app/pieces/mission-context/mission-context.component.scss
View file @ b634930b
...@@ -6,6 +6,38 @@ ...@@ -6,6 +6,38 @@
position: relative; position: relative;
background-color: var(--piece-background-color); background-color: var(--piece-background-color);
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
opacity: 0.75;
z-index: -1;
top: -51px;
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%);
}
&-attach { &-attach {
z-index: 1; z-index: 1;
border-top: solid black 1px; border-top: solid black 1px;
......
src/app/pieces/mission-context/mission-context.component.ts
View file @ b634930b
...@@ -12,4 +12,18 @@ export class MissionContextComponent implements OnInit { ...@@ -12,4 +12,18 @@ export class MissionContextComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
} }
displayMenu: String = 'hide';
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
} }
src/app/pieces/role/role.component.html
View file @ b634930b
<div class="piece"> <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'">
<div class="piece-attach piece-attach-left-top"></div> <div class="piece-attach piece-attach-left-top"></div>
<div class="piece-attach piece-attach-right"></div> <div class="piece-attach piece-attach-right"></div>
<div class="piece-attach piece-attach-left-bottom"></div> <div class="piece-attach piece-attach-left-bottom"></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>
</div>
<div class="piece-form"> <div class="piece-form">
<div class="piece-form-title">Rôle 1</div> <div class="piece-form-title">Rôle 1</div>
<div class="piece-form-intitule"> <div class="piece-form-intitule">
......
src/app/pieces/role/role.component.scss
View file @ b634930b
...@@ -6,6 +6,38 @@ ...@@ -6,6 +6,38 @@
position: relative; position: relative;
background-color: var(--piece-background-color); background-color: var(--piece-background-color);
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
opacity: 0.75;
z-index: -1;
top: -51px;
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%);
}
&-attach { &-attach {
z-index: 1; z-index: 1;
&-left { &-left {
......
src/app/pieces/role/role.component.ts
View file @ b634930b
...@@ -12,4 +12,18 @@ export class RoleComponent implements OnInit { ...@@ -12,4 +12,18 @@ export class RoleComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
} }
displayMenu: String = 'hide';
onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
} }
src/app/pieces/task/task.component.html
View file @ b634930b
<div class="piece" [ngStyle]="{'width': pieceWidth}"> <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-left"></div>
<div class="piece-attach piece-attach-right"></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-form"> <div class="piece-form">
<div class="piece-form-top"> <div class="piece-form-top">
<input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/> <input class="piece-form-top-identifier" name="identifier" type="text" placeholder="A" min="1" maxlength="5"/>
...@@ -10,7 +17,7 @@ ...@@ -10,7 +17,7 @@
</div> </div>
<textarea class="piece-form-content" placeholder="Acheter des citrons"></textarea> <textarea class="piece-form-content" placeholder="Acheter des citrons"></textarea>
<div class="piece-form-bottom"> <div class="piece-form-bottom">
<select class="piece-form-bottom-antecedent" name="antecedent" multiple> <select class="piece-form-bottom-antecedent" name="antecedent">
<option selected value="0">/</option> <option selected value="0">/</option>
<option value="1">1</option> <option value="1">1</option>
</select> </select>
......
src/app/pieces/task/task.component.scss
View file @ b634930b
...@@ -7,6 +7,38 @@ ...@@ -7,6 +7,38 @@
background-color: var(--piece-background-color); background-color: var(--piece-background-color);
transition: all 0.5s ease; transition: all 0.5s ease;
&-menu {
position: absolute;
width: 150px;
height: 50px;
background-color: #f7f7f7;
opacity: 0.75;
z-index: -1;
top: -51px;
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%);
}
&-attach { &-attach {
z-index: 1; z-index: 1;
&-left { &-left {
...@@ -69,6 +101,7 @@ ...@@ -69,6 +101,7 @@
justify-content: space-between; justify-content: space-between;
&-identifier { &-identifier {
width: 50px; width: 50px;
text-align: center;
} }
&-title { &-title {
font-size: 25px; font-size: 25px;
...@@ -97,6 +130,7 @@ ...@@ -97,6 +130,7 @@
border-top-right-radius: 0px; border-top-right-radius: 0px;
border-bottom-right-radius: 0px; border-bottom-right-radius: 0px;
width: 20px; width: 20px;
text-align: center;
z-index: 2; z-index: 2;
} }
select { select {
......
src/app/pieces/task/task.component.ts
View file @ b634930b
...@@ -12,13 +12,15 @@ export class TaskComponent implements OnInit { ...@@ -12,13 +12,15 @@ export class TaskComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
} }
displayMenu: String = 'hide';
durationUnit: String = 'UT'; durationUnit: String = 'UT';
duration: number = 1; duration: number = 1;
pieceWidth = '400px'; pieceWidth: String = '400px';
durationChange():void { durationChange(): void {
if(this.durationUnit === 'UT') { if(this.durationUnit === 'UT') {
if(this.duration == 1) { if(this.duration <= 1) {
this.pieceWidth = '400px'; this.pieceWidth = '400px';
} else if(this.duration == 2) { } else if(this.duration == 2) {
this.pieceWidth = '800px'; this.pieceWidth = '800px';
...@@ -28,9 +30,24 @@ export class TaskComponent implements OnInit { ...@@ -28,9 +30,24 @@ export class TaskComponent implements OnInit {
} else { } else {
this.pieceWidth = '400px'; this.pieceWidth = '400px';
} }
console.log('largeur : '+this.pieceWidth); }
console.log('durationUnit : '+this.durationUnit);
console.log('duration : '+this.duration); onClickComments(): void {
}
onClickAdd(): void {
}
onClickErase(): void {
}
onClickDots(): void {
} }
} }
src/index.html
View file @ b634930b
...@@ -2,10 +2,13 @@ ...@@ -2,10 +2,13 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Puzzletest</title> <title>RLG Tool</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<!--<link rel="preconnect" href="https://fonts.gstatic.com">-->
<!--<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
......
src/styles.scss
View file @ b634930b
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
} }
body { body {
margin-top: 60px;
background-color: var(--background-color); background-color: var(--background-color);
//font-family: sans-serif;
font-family: Glacial Indifference; font-family: Glacial Indifference;
//transform: scale(0.9); //transform: scale(0.9);
//transform-origin: top left; //transform-origin: top left;
......
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