update admin navbar
This commit is contained in:
Gregoire Parant
parent
3e41875cd5
commit
e640f67156
43
front/dist/resources/logos/send-bkack.svg
vendored
Normal file
43
front/dist/resources/logos/send-bkack.svg
vendored
Normal file
@ -0,0 +1,43 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M481.508,210.336L68.414,38.926c-17.403-7.222-37.064-4.045-51.309,8.287C2.86,59.547-3.098,78.551,1.558,96.808
|
||||
L38.327,241h180.026c8.284,0,15.001,6.716,15.001,15.001c0,8.284-6.716,15.001-15.001,15.001H38.327L1.558,415.193
|
||||
c-4.656,18.258,1.301,37.262,15.547,49.595c14.274,12.357,33.937,15.495,51.31,8.287l413.094-171.409
|
||||
C500.317,293.862,512,276.364,512,256.001C512,235.638,500.317,218.139,481.508,210.336z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 985 B |
1
front/dist/resources/logos/send-white.svg
vendored
Normal file
1
front/dist/resources/logos/send-white.svg
vendored
Normal file
@ -0,0 +1 @@
|
||||
<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 441.78"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M481.51,210.34,68.41,38.93A49.44,49.44,0,0,0,1.56,96.81L38.33,241h180a15,15,0,1,1,0,30h-180L1.56,415.19a49.43,49.43,0,0,0,66.86,57.88l413.09-171.4a49.44,49.44,0,0,0,0-91.33Z" transform="translate(0 -35.11)"/></svg>
|
||||
|
After Width: | Height: | Size: 379 B |
1
front/dist/resources/logos/send-yellow.svg
vendored
Normal file
1
front/dist/resources/logos/send-yellow.svg
vendored
Normal file
@ -0,0 +1 @@
|
||||
<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 441.78"><defs><style>.cls-1{fill:#ffda01;}</style></defs><path class="cls-1" d="M481.51,210.34,68.41,38.93A49.44,49.44,0,0,0,1.56,96.81L38.33,241h180a15,15,0,1,1,0,30h-180L1.56,415.19a49.43,49.43,0,0,0,66.86,57.88l413.09-171.4a49.44,49.44,0,0,0,0-91.33Z" transform="translate(0 -35.11)"/></svg>
|
||||
|
After Width: | Height: | Size: 382 B |
20
front/dist/resources/logos/setting-black.svg
vendored
Normal file
20
front/dist/resources/logos/setting-black.svg
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M453.6,237.3c-1.5-18.8-5.6-37-12.3-54.5l46.1-37l-75-93.6L366.5,89c-15.8-10.7-33-18.9-51.1-24.6V6.1h-120v58.7
|
||||
c-19,6.1-36.8,15-53.2,26.5l-46.3-36L22.3,150l47.2,36.6c-6.3,17.5-10,35.8-11.2,54.5L0,255l27.9,116.7l41-9.8
|
||||
c20.2-20.2,38.4-38.4,62.4-62.4C99.4,213,163.5,120.6,256.1,120.6c73.4,0,132.9,59.5,132.9,132.9c0,90.7-89,154.7-174.8,126.2
|
||||
c-6.9,6.9-77.9,77.9-88.9,88.9l79.1,37.3l26.3-55.8c18.2,2.3,36.3,2.1,54.1-0.5l26.9,55.1L419.6,452l-26.9-54.9
|
||||
c13.3-12.7,24.7-27,34.1-42.8l59,13.2L512,250.4L453.6,237.3z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M336,219.4l-7.6-19.1L282.6,246L262,225.4l45.8-45.8l-19.1-7.6c-74.9-29.8-144.2,52.2-104.9,120.7
|
||||
C82.6,393.9,169.1,307.5,47.6,429c-17,17,18.4,52.5,35.4,35.4c70.6-70.6,2-2,137.5-137.5C289.6,360.5,364.5,291,336,219.4z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
front/dist/resources/logos/setting-white.svg
vendored
Normal file
1
front/dist/resources/logos/setting-white.svg
vendored
Normal file
@ -0,0 +1 @@
|
||||
<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 499.81"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M453.58,237.31a195.46,195.46,0,0,0-12.33-54.5l46.14-37-75-93.62L366.55,89a196.1,196.1,0,0,0-51.12-24.58V6.1h-120V64.75a195.85,195.85,0,0,0-53.23,26.53l-46.34-36L22.3,150l47.16,36.64a196.64,196.64,0,0,0-11.19,54.46L0,255,27.91,371.68l41-9.81,62.4-62.39C99.44,213,163.49,120.57,256.09,120.57A133,133,0,0,1,389,253.51c0,90.69-89,154.71-174.78,126.22l-88.88,88.89,79.1,37.28,26.31-55.81a199.26,199.26,0,0,0,54.12-.45l27,55.07L419.6,452l-26.88-54.93a197.42,197.42,0,0,0,34.06-42.84l59,13.22,26.2-117Z" transform="translate(0 -6.1)"/><path class="cls-1" d="M336,219.37l-7.61-19.14L282.55,246,262,225.44l45.79-45.78L288.63,172c-74.92-29.8-144.18,52.17-104.87,120.7C82.63,393.88,169.06,307.46,47.55,429,30.51,446,66,481.44,83,464.4c70.58-70.59,2-2,137.48-137.47C289.61,360.46,364.47,291,336,219.37Z" transform="translate(0 -6.1)"/></svg>
|
||||
|
After Width: | Height: | Size: 994 B |
1
front/dist/resources/logos/setting-yellow.svg
vendored
Normal file
1
front/dist/resources/logos/setting-yellow.svg
vendored
Normal file
@ -0,0 +1 @@
|
||||
<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 499.81"><defs><style>.cls-1{fill:#ffda01;}</style></defs><path class="cls-1" d="M453.58,237.31a195.46,195.46,0,0,0-12.33-54.5l46.14-37-75-93.62L366.55,89a196.1,196.1,0,0,0-51.12-24.58V6.1h-120V64.75a195.85,195.85,0,0,0-53.23,26.53l-46.34-36L22.3,150l47.16,36.64a196.64,196.64,0,0,0-11.19,54.46L0,255,27.91,371.68l41-9.81,62.4-62.39C99.44,213,163.49,120.57,256.09,120.57A133,133,0,0,1,389,253.51c0,90.69-89,154.71-174.78,126.22l-88.88,88.89,79.1,37.28,26.31-55.81a199.26,199.26,0,0,0,54.12-.45l27,55.07L419.6,452l-26.88-54.93a197.42,197.42,0,0,0,34.06-42.84l59,13.22,26.2-117Z" transform="translate(0 -6.1)"/><path class="cls-1" d="M336,219.37l-7.61-19.14L282.55,246,262,225.44l45.79-45.78L288.63,172c-74.92-29.8-144.18,52.17-104.87,120.7C82.63,393.88,169.06,307.46,47.55,429,30.51,446,66,481.44,83,464.4c70.58-70.59,2-2,137.48-137.47C289.61,360.46,364.47,291,336,219.37Z" transform="translate(0 -6.1)"/></svg>
|
||||
|
After Width: | Height: | Size: 997 B |
40
front/dist/resources/style/style.css
vendored
40
front/dist/resources/style/style.css
vendored
@ -445,23 +445,51 @@ body {
|
||||
color: white;
|
||||
z-index: 200;
|
||||
transition: all 0.1s ease-out;
|
||||
top: 100%;
|
||||
width: 100px;
|
||||
top: calc(100% + 2px);
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
background-color: black;
|
||||
left: calc(50% - 50px);
|
||||
border-radius: 0 0 10px 10px;
|
||||
background-color: #2d2d2dba;
|
||||
left: calc(50% - 100px);
|
||||
border-radius: 15px 15px 15px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message-container div.clear{
|
||||
width: 100px;
|
||||
left: calc(50% - 50px);
|
||||
}
|
||||
|
||||
.main-console div.console img,
|
||||
.message-container div.clear img{
|
||||
margin-top: 6px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
transition: all .5s ease;
|
||||
transform: rotateY(0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.main-console div.console img:hover,
|
||||
.message-container div.clear img:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.main-console div.console img.active,
|
||||
.message-container div.clear img{
|
||||
transform: rotateY(3.142rad);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.main-console div.console p,
|
||||
.message-container div.clear p{
|
||||
margin-top: 6px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.main-console div.console:hover,
|
||||
.message-container div.clear:hover {
|
||||
cursor: pointer;
|
||||
top: calc(100% + 5px);
|
||||
transform: scale(1.2) translateY(3px);
|
||||
}
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@ import {HtmlUtils} from "../WebRtc/HtmlUtils";
|
||||
import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
|
||||
import {RoomConnection} from "../Connexion/RoomConnection";
|
||||
import {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels";
|
||||
import {ADMIN_URL} from "../Enum/EnvironmentVariable";
|
||||
|
||||
export const CLASS_CONSOLE_MESSAGE = 'main-console';
|
||||
export const INPUT_CONSOLE_MESSAGE = 'input-send-text';
|
||||
@ -17,8 +18,10 @@ interface EventTargetFiles extends EventTarget {
|
||||
|
||||
export class ConsoleGlobalMessageManager {
|
||||
|
||||
private divMainConsole: HTMLDivElement;
|
||||
private buttonMainConsole: HTMLDivElement;
|
||||
private readonly divMainConsole: HTMLDivElement;
|
||||
private readonly buttonMainConsole: HTMLDivElement;
|
||||
private readonly buttonSendMainConsole: HTMLImageElement;
|
||||
private readonly buttonSettingsMainConsole: HTMLImageElement;
|
||||
private activeConsole: boolean = false;
|
||||
private userInputManager!: UserInputManager;
|
||||
private static cssLoaded: boolean = false;
|
||||
@ -27,6 +30,8 @@ export class ConsoleGlobalMessageManager {
|
||||
this.buttonMainConsole = document.createElement('div');
|
||||
this.buttonMainConsole.classList.add('console');
|
||||
this.divMainConsole = document.createElement('div');
|
||||
this.buttonSendMainConsole = document.createElement('img');
|
||||
this.buttonSettingsMainConsole = document.createElement('img');
|
||||
this.userInputManager = userInputManager;
|
||||
this.initialise();
|
||||
}
|
||||
@ -75,17 +80,26 @@ export class ConsoleGlobalMessageManager {
|
||||
menu.appendChild(textAudio);
|
||||
this.divMainConsole.appendChild(menu);
|
||||
|
||||
const buttonText = document.createElement('p');
|
||||
buttonText.innerText = 'Console';
|
||||
|
||||
this.buttonMainConsole.appendChild(buttonText);
|
||||
this.buttonMainConsole.addEventListener('click', () => {
|
||||
this.buttonSendMainConsole.src = 'resources/logos/send-yellow.svg';
|
||||
this.buttonSendMainConsole.addEventListener('click', () => {
|
||||
if(this.activeConsole){
|
||||
this.disabled();
|
||||
}else{
|
||||
this.buttonSendMainConsole.classList.add('active');
|
||||
this.active();
|
||||
}
|
||||
});
|
||||
this.buttonMainConsole.appendChild(this.buttonSendMainConsole);
|
||||
|
||||
this.buttonSettingsMainConsole.src = 'resources/logos/setting-yellow.svg';
|
||||
this.buttonSettingsMainConsole.addEventListener('click', () => {
|
||||
window.open(ADMIN_URL, '_blank');
|
||||
});
|
||||
this.buttonMainConsole.appendChild(this.buttonSettingsMainConsole);
|
||||
|
||||
/*const buttonText = document.createElement('p');
|
||||
buttonText.innerText = 'Console';
|
||||
this.buttonMainConsole.appendChild(buttonText);*/
|
||||
|
||||
this.divMainConsole.className = CLASS_CONSOLE_MESSAGE;
|
||||
this.divMainConsole.appendChild(this.buttonMainConsole);
|
||||
@ -293,17 +307,18 @@ export class ConsoleGlobalMessageManager {
|
||||
this.Connection.emitGlobalMessage(GlobalMessage);
|
||||
}
|
||||
|
||||
|
||||
active(){
|
||||
this.userInputManager.clearAllInputKeyboard();
|
||||
this.activeConsole = true;
|
||||
this.divMainConsole.style.top = '0';
|
||||
this.buttonSendMainConsole.classList.add('active');
|
||||
}
|
||||
|
||||
disabled(){
|
||||
this.userInputManager.initKeyBoardEvent();
|
||||
this.activeConsole = false;
|
||||
this.divMainConsole.style.top = '-80%';
|
||||
this.buttonSendMainConsole.classList.remove('active');
|
||||
}
|
||||
|
||||
private getSectionId(id: string) : string {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
const DEBUG_MODE: boolean = process.env.DEBUG_MODE == "true";
|
||||
const API_URL = (process.env.API_PROTOCOL || (typeof(window) !== 'undefined' ? window.location.protocol : 'http:')) + '//' + (process.env.API_URL || "api.workadventure.localhost");
|
||||
const ADMIN_URL = API_URL.replace('api', 'admin');
|
||||
const TURN_SERVER: string = process.env.TURN_SERVER || "turn:numb.viagenie.ca";
|
||||
const TURN_USER: string = process.env.TURN_USER || 'g.parant@thecodingmachine.com';
|
||||
const TURN_PASSWORD: string = process.env.TURN_PASSWORD || 'itcugcOHxle9Acqi$';
|
||||
@ -13,6 +14,7 @@ const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new
|
||||
export {
|
||||
DEBUG_MODE,
|
||||
API_URL,
|
||||
ADMIN_URL,
|
||||
RESOLUTION,
|
||||
ZOOM_LEVEL,
|
||||
POSITION_DELAY,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user