Commit 81137029 authored by Romain DELEAU's avatar Romain DELEAU

menu burger

parent e49f8928
......@@ -129,49 +129,69 @@
</div>
<div class="container-settings">
<div class="container-settings-mode"
[matTooltip]="translate.instant('unity_tooltip')"
matTooltipPosition="below" [matTooltipDisabled]="!tooltipService.activatedTooltips"
[style.background-color]="'lightgray'">
<input name="unity" type="checkbox" disabled/>
<label for="unity">{{'unity_label' | translate}}</label>
</div>
<div class="container-settings-mode"
[matTooltip]="translate.instant('enableHelp_tooltip')"
matTooltipPosition="below" [matTooltipDisabled]="!tooltipService.activatedTooltips">
<input name="tooltip" type="checkbox" [(ngModel)]="tooltipService.activatedTooltips" (change)="tooltipsTrace($event)"/>
<label for="tooltip">{{'enableHelp_label' | translate}}</label>
</div>
<button mat-mini-fab color="white" (click)="downloadFile()"
[matTooltip]="translate.instant('download_tooltip')"
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="download_file"></mat-icon></button>
<button mat-mini-fab color="white" (click)="selectFile()"
[matTooltip]="translate.instant('upload_tooltip')"
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="upload-file"></mat-icon></button>
<input type="file" #fileInput style="display: none" (change)="onFileSelected($event)">
</div>
<div class="container-settings container-settings-secondline">
<button mat-mini-fab color="white" style="font-size: 20px;" [matMenuTriggerFor]="changeLanguageMenu"
[matTooltip]="translate.instant('lang_tooltip')"
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><img class="langIcon" [src]="'./assets/lang/icons/'+selectedLang+'.png'"></button>
<div class="container-settings-button">
<button mat-mini-fab color="white" [matMenuTriggerFor]="settingsMenu"
[matTooltip]="translate.instant('settingsMenu_tooltip')"
matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
<mat-icon fontIcon="menu"></mat-icon>
</button>
<input type="file" #fileInput style="display: none" (change)="onFileSelected($event)">
<mat-menu class="container-settings" #settingsMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="downloadFile()"
[matTooltip]="translate.instant('download_tooltip')"
matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
<mat-icon fontIcon="download_file"></mat-icon>
<span>{{'download_label' | translate}}</span>
</button>
<button mat-menu-item (click)="selectFile()"
[matTooltip]="translate.instant('upload_tooltip')"
matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
<mat-icon fontIcon="upload-file"></mat-icon>
<span>{{'upload_label' | translate}}</span>
</button>
<span mat-menu-item (click)="tooltipService.activatedTooltips = !tooltipService.activatedTooltips; tooltipsTrace($event)"
[matTooltip]="translate.instant('enableHelp_tooltip')"
matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
<input name="tooltip" type="checkbox" [(ngModel)]="tooltipService.activatedTooltips"/>
<label for="tooltip">{{'enableHelp_label' | translate}}</label>
</span>
<button mat-menu-item (click)="verifyGame()"
[matTooltip]="translate.instant('verify_tooltip')"
matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
<mat-icon fontIcon="verified"></mat-icon>
<span>{{'verify_label' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadManual()"
[matTooltip]="translate.instant('manual_tooltip')"
matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
<mat-icon fontIcon="menu_book"></mat-icon>
<span>{{'manual_label' | translate}}</span>
</button>
<button mat-menu-item [matMenuTriggerFor]="changeLanguageMenu"
[matTooltip]="translate.instant('lang_tooltip')"
matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
<img class="langIcon" [src]="'./assets/lang/icons/'+selectedLang+'.png'"/>
<span>{{'lang_label' | translate}}</span>
</button>
<span mat-menu-item disabled
[matTooltip]="translate.instant('unity_tooltip')"
matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
<input name="unity" type="checkbox"/>
<label for="unity">{{'unity_label' | translate}}</label>
</span>
</mat-menu>
<mat-menu #changeLanguageMenu="matMenu">
<button mat-menu-item class="buttonLang" (click)="changeLanguage('fr')">
<button mat-menu-item (click)="changeLanguage('fr')">
<img class="langIcon" src="./assets/lang/icons/fr.png"/>
<div>{{'language_fr' | translate}}</div>
<span>{{'language_fr' | translate}}</span>
</button>
<button mat-menu-item class="buttonLang" (click)="changeLanguage('en')">
<img class="langIcon langIcon-icon" src="./assets/lang/icons/en.png"/>
<div>{{'language_en' | translate}}</div>
<button mat-menu-item (click)="changeLanguage('en')">
<img class="langIcon" src="./assets/lang/icons/en.png"/>
<span>{{'language_en' | translate}}</span>
</button>
</mat-menu>
<button mat-mini-fab color="white" (click)="verifyGame()"
[matTooltip]="translate.instant('verify_tooltip')"
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="verified"></mat-icon></button>
<button mat-mini-fab color="white" (click)="downloadManual()"
[matTooltip]="translate.instant('manual_tooltip')"
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="menu_book"></mat-icon></button>
</div>
<div class="container-minimap"></div>
<div class="container-zoom">
<button mat-mini-fab color="white" (click)="zoomIn()"
......
......@@ -177,32 +177,15 @@
}
&-settings {
position: fixed;
width: 400px;
right: 360px;
display: flex;
flex-direction: row;
justify-content: space-between;
z-index: 5;
&-mode {
width: 120px;
background-color: white;
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
padding: 5px;
border-radius: 10px;
text-align: center;
}
button {
width: 50px;
height: 50px;
}
&-secondline {
top: 75px;
width: 176px;
&-button {
position: fixed;
right: 360px;
z-index: 5;
button {
width: 50px;
height: 50px;
}
}
}
......@@ -252,18 +235,10 @@
}
.langIcon {
width: 28px;
height: 28px;
}
.buttonLang {
display: flex;
flex-direction: row;
img {
margin-top: 10px;
margin-right: 5px;
}
width: 24px;
height: 24px;
margin-right: 16px;
vertical-align: middle;
}
::ng-deep .mat-tooltip {
......@@ -294,4 +269,28 @@
button:hover {
opacity: 0.75;
}
input {
margin-right: 18px;
height: 18px;
width: 18px;
pointer-events: none;
vertical-align: middle;
}
img {
margin-right: 16px;
vertical-align: middle;
}
label {
font-family: 'Glacial Indifference', sans-serif;
font-size: 17px;
border-radius: 10px;
margin-bottom: 5px;
}
.mat-icon-no-color {
color: black;
}
}
\ No newline at end of file
......@@ -13,14 +13,20 @@
"plus_tooltip": "Add a new tile of this type.",
"zoomIn_tooltip": "Zoom In.",
"zoomOut_tooltip": "Zoom Out.",
"settingsMenu_tooltip": "Open the settings menu (save, import, ...)",
"enableHelp_label": "Enable the tooltips",
"enableHelp_tooltip": "Description of each element of the RLG Maker.",
"unity_label": "Integrate the game into Unity (WIP)",
"unity_label": "Integrate the game into Unity",
"unity_tooltip": "Usage in a specific game template. Contact gaelle.guigon@imt-nord-europe.fr for more information. Not available in this version.",
"download_label": "Download this scenario",
"download_tooltip": "Download a backup of the scenario.",
"upload_label": "Import a scenario",
"upload_tooltip": "Import a backup of the scenario.",
"manual_label": "Download the guide",
"manual_tooltip": "Download the user manual (FR).",
"verify_label": "Verify the scenario",
"verify_tooltip": "Verify the scenario",
"lang_label": "Change the language",
"lang_tooltip": "Change the language.",
"snackbar_identifier": "Attention, this identifier is already used in this Role.",
......
......@@ -13,14 +13,20 @@
"plus_tooltip": "Ajouter une nouvelle tuilde de ce type.",
"zoomIn_tooltip": "Zoomer.",
"zoomOut_tooltip": "Dézoomer.",
"settingsMenu_tooltip": "Ouvrir le menu des paramètres (sauvegarde, import, ...)",
"enableHelp_label": "Activer les aides",
"enableHelp_tooltip": "Descriptif de chaque élément du RLG Maker.",
"unity_label": "Intégrer le jeu sous Unity (WIP)",
"unity_label": "Intégrer le jeu sous Unity",
"unity_tooltip": "Utilisation dans un template de jeu précis. Contacter gaelle.guigon@imt-nord-europe.fr pour plus d'informations. Non disponible dans cette version.",
"download_label": "Télécharger ce scénario",
"download_tooltip": "Télécharger une sauvegarde du scénario.",
"upload_label": "Importer un scénario",
"upload_tooltip": "Importer une sauvegarde du scénario.",
"manual_label": "Télécharger le guide",
"manual_tooltip": "Télécharger le manuel d'utilisation",
"verify_label": "Vérifier le scénario",
"verify_tooltip": "Vérifier le scénario",
"lang_label": "Changer la langue",
"lang_tooltip": "Changer la langue.",
"snackbar_identifier": "Attention, cet identifiant est déjà utilisé dans ce Rôle",
......
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