Skip to content

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

menu burger

parent e49f8928
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 76 deletions
src/app/app.component.html
View file @ 81137029
...@@ -129,49 +129,69 @@ ...@@ -129,49 +129,69 @@
</div> </div>
<div class="container-settings"> <div class="container-settings-button">
<div class="container-settings-mode" <button mat-mini-fab color="white" [matMenuTriggerFor]="settingsMenu"
[matTooltip]="translate.instant('unity_tooltip')" [matTooltip]="translate.instant('settingsMenu_tooltip')"
matTooltipPosition="below" [matTooltipDisabled]="!tooltipService.activatedTooltips" matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
[style.background-color]="'lightgray'"> <mat-icon fontIcon="menu"></mat-icon>
<input name="unity" type="checkbox" disabled/> </button>
<label for="unity">{{'unity_label' | translate}}</label> <input type="file" #fileInput style="display: none" (change)="onFileSelected($event)">
</div> <mat-menu class="container-settings" #settingsMenu="matMenu" xPosition="before">
<div class="container-settings-mode" <button mat-menu-item (click)="downloadFile()"
[matTooltip]="translate.instant('enableHelp_tooltip')" [matTooltip]="translate.instant('download_tooltip')"
matTooltipPosition="below" [matTooltipDisabled]="!tooltipService.activatedTooltips"> matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
<input name="tooltip" type="checkbox" [(ngModel)]="tooltipService.activatedTooltips" (change)="tooltipsTrace($event)"/> <mat-icon fontIcon="download_file"></mat-icon>
<label for="tooltip">{{'enableHelp_label' | translate}}</label> <span>{{'download_label' | translate}}</span>
</div> </button>
<button mat-mini-fab color="white" (click)="downloadFile()" <button mat-menu-item (click)="selectFile()"
[matTooltip]="translate.instant('download_tooltip')" [matTooltip]="translate.instant('upload_tooltip')"
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="download_file"></mat-icon></button> matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
<button mat-mini-fab color="white" (click)="selectFile()" <mat-icon fontIcon="upload-file"></mat-icon>
[matTooltip]="translate.instant('upload_tooltip')" <span>{{'upload_label' | translate}}</span>
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="upload-file"></mat-icon></button> </button>
<input type="file" #fileInput style="display: none" (change)="onFileSelected($event)"> <span mat-menu-item (click)="tooltipService.activatedTooltips = !tooltipService.activatedTooltips; tooltipsTrace($event)"
</div> [matTooltip]="translate.instant('enableHelp_tooltip')"
<div class="container-settings container-settings-secondline"> matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
<button mat-mini-fab color="white" style="font-size: 20px;" [matMenuTriggerFor]="changeLanguageMenu" <input name="tooltip" type="checkbox" [(ngModel)]="tooltipService.activatedTooltips"/>
[matTooltip]="translate.instant('lang_tooltip')" <label for="tooltip">{{'enableHelp_label' | translate}}</label>
matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><img class="langIcon" [src]="'./assets/lang/icons/'+selectedLang+'.png'"></button> </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"> <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"/> <img class="langIcon" src="./assets/lang/icons/fr.png"/>
<div>{{'language_fr' | translate}}</div> <span>{{'language_fr' | translate}}</span>
</button> </button>
<button mat-menu-item class="buttonLang" (click)="changeLanguage('en')"> <button mat-menu-item (click)="changeLanguage('en')">
<img class="langIcon langIcon-icon" src="./assets/lang/icons/en.png"/> <img class="langIcon" src="./assets/lang/icons/en.png"/>
<div>{{'language_en' | translate}}</div> <span>{{'language_en' | translate}}</span>
</button> </button>
</mat-menu> </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>
<div class="container-minimap"></div> <div class="container-minimap"></div>
<div class="container-zoom"> <div class="container-zoom">
<button mat-mini-fab color="white" (click)="zoomIn()" <button mat-mini-fab color="white" (click)="zoomIn()"
......
src/app/app.component.scss
View file @ 81137029
...@@ -177,32 +177,15 @@ ...@@ -177,32 +177,15 @@
} }
&-settings { &-settings {
position: fixed; &-button {
width: 400px; position: fixed;
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;
right: 360px; right: 360px;
z-index: 5;
button {
width: 50px;
height: 50px;
}
} }
} }
...@@ -252,18 +235,10 @@ ...@@ -252,18 +235,10 @@
} }
.langIcon { .langIcon {
width: 28px; width: 24px;
height: 28px; height: 24px;
} margin-right: 16px;
vertical-align: middle;
.buttonLang {
display: flex;
flex-direction: row;
img {
margin-top: 10px;
margin-right: 5px;
}
} }
::ng-deep .mat-tooltip { ::ng-deep .mat-tooltip {
...@@ -294,4 +269,28 @@ ...@@ -294,4 +269,28 @@
button:hover { button:hover {
opacity: 0.75; 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
src/assets/lang/en.json
View file @ 81137029
...@@ -13,14 +13,20 @@ ...@@ -13,14 +13,20 @@
"plus_tooltip": "Add a new tile of this type.", "plus_tooltip": "Add a new tile of this type.",
"zoomIn_tooltip": "Zoom In.", "zoomIn_tooltip": "Zoom In.",
"zoomOut_tooltip": "Zoom Out.", "zoomOut_tooltip": "Zoom Out.",
"settingsMenu_tooltip": "Open the settings menu (save, import, ...)",
"enableHelp_label": "Enable the tooltips", "enableHelp_label": "Enable the tooltips",
"enableHelp_tooltip": "Description of each element of the RLG Maker.", "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.", "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.", "download_tooltip": "Download a backup of the scenario.",
"upload_label": "Import a scenario",
"upload_tooltip": "Import a backup of the scenario.", "upload_tooltip": "Import a backup of the scenario.",
"manual_label": "Download the guide",
"manual_tooltip": "Download the user manual (FR).", "manual_tooltip": "Download the user manual (FR).",
"verify_label": "Verify the scenario",
"verify_tooltip": "Verify the scenario", "verify_tooltip": "Verify the scenario",
"lang_label": "Change the language",
"lang_tooltip": "Change the language.", "lang_tooltip": "Change the language.",
"snackbar_identifier": "Attention, this identifier is already used in this Role.", "snackbar_identifier": "Attention, this identifier is already used in this Role.",
......
src/assets/lang/fr.json
View file @ 81137029
...@@ -13,14 +13,20 @@ ...@@ -13,14 +13,20 @@
"plus_tooltip": "Ajouter une nouvelle tuilde de ce type.", "plus_tooltip": "Ajouter une nouvelle tuilde de ce type.",
"zoomIn_tooltip": "Zoomer.", "zoomIn_tooltip": "Zoomer.",
"zoomOut_tooltip": "Dézoomer.", "zoomOut_tooltip": "Dézoomer.",
"settingsMenu_tooltip": "Ouvrir le menu des paramètres (sauvegarde, import, ...)",
"enableHelp_label": "Activer les aides", "enableHelp_label": "Activer les aides",
"enableHelp_tooltip": "Descriptif de chaque élément du RLG Maker.", "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.", "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.", "download_tooltip": "Télécharger une sauvegarde du scénario.",
"upload_label": "Importer un scénario",
"upload_tooltip": "Importer une sauvegarde du 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", "manual_tooltip": "Télécharger le manuel d'utilisation",
"verify_label": "Vérifier le scénario",
"verify_tooltip": "Vérifier le scénario", "verify_tooltip": "Vérifier le scénario",
"lang_label": "Changer la langue",
"lang_tooltip": "Changer la langue.", "lang_tooltip": "Changer la langue.",
"snackbar_identifier": "Attention, cet identifiant est déjà utilisé dans ce Rôle", "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