cleaner bottombar

This commit is contained in:
Evert Prants 2022-04-03 17:27:02 +03:00
parent e7f2d928fe
commit 9b69470e3f
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
3 changed files with 35 additions and 9 deletions

View File

@ -17,6 +17,7 @@ export class ViewCanvas {
private _container = $('<div class="canvas__container">'); private _container = $('<div class="canvas__container">');
private _cursor = $('<div class="canvas__cursor">'); private _cursor = $('<div class="canvas__cursor">');
private _coods = $('<div class="canvas__coordinates">'); private _coods = $('<div class="canvas__coordinates">');
private _userInfo = $('<a class="canvas__user">');
private _size = 1000; private _size = 1000;
private _viewWidth = 0; private _viewWidth = 0;
@ -42,6 +43,7 @@ export class ViewCanvas {
private _dragging = false; private _dragging = false;
private _pinching = false; private _pinching = false;
private _previousPinchLength = 0; private _previousPinchLength = 0;
private _placerTag: HTMLElement | null = null; private _placerTag: HTMLElement | null = null;
private _placerRequestTime: number = 0; private _placerRequestTime: number = 0;
@ -107,10 +109,14 @@ export class ViewCanvas {
public initialize(): void { public initialize(): void {
this.picker.initialize(); this.picker.initialize();
this._userInfo.innerText = 'Login';
this._userInfo.setAttribute('href', '/login');
this._wrapper.append(this._coods); this._wrapper.append(this._coods);
this._container.append(this._canvas); this._container.append(this._canvas);
this._wrapper.append(this._cursor); this._wrapper.append(this._cursor);
this._wrapper.append(this._container); this._wrapper.append(this._container);
this._wrapper.append(this._userInfo);
this._wrapper.append(this.picker.element); this._wrapper.append(this.picker.element);
document.body.append(this._wrapper); document.body.append(this._wrapper);
@ -325,6 +331,9 @@ export class ViewCanvas {
public setUser(user: IcyNetUser): void { public setUser(user: IcyNetUser): void {
this._user = user; this._user = user;
this._userInfo.innerText = user.username;
this._userInfo.classList.add('logged-in');
this._userInfo.setAttribute('href', '/logout');
this.picker.setLoggedIn(user); this.picker.setLoggedIn(user);
} }

View File

@ -11,7 +11,6 @@ export class Picker {
private _content = $('<div class="controls">'); private _content = $('<div class="controls">');
private _colorsEl = $('<div class="controls__colors">'); private _colorsEl = $('<div class="controls__colors">');
private _colorHistoryEl = $('<div class="controls__colors-history">'); private _colorHistoryEl = $('<div class="controls__colors-history">');
private _user = $('<a href="/login">');
private _colorInput = $('<input type="color">') as HTMLInputElement; private _colorInput = $('<input type="color">') as HTMLInputElement;
private _placebtn = $('<button class="btn btn-primary btn-place">'); private _placebtn = $('<button class="btn btn-primary btn-place">');
@ -36,10 +35,9 @@ export class Picker {
} }
public initialize() { public initialize() {
this._placebtn.innerText = 'Place'; this._placebtn.innerText = 'Log in to place';
this._palettebtn.innerText = '>>'; this._palettebtn.innerText = '>>';
this._clearbtn.innerText = 'Clear'; this._clearbtn.innerText = 'Clear';
this._user.innerText = 'Log in';
this._wrapper.append(this._content); this._wrapper.append(this._content);
this._content.append(this._colorsEl); this._content.append(this._colorsEl);
this._colorsEl.append(this._colorInput); this._colorsEl.append(this._colorInput);
@ -47,7 +45,6 @@ export class Picker {
this._colorsEl.append(this._colorHistoryEl); this._colorsEl.append(this._colorHistoryEl);
this._colorsEl.append(this._clearbtn); this._colorsEl.append(this._clearbtn);
this._content.append(this._placebtn); this._content.append(this._placebtn);
this._content.append(this._user);
this._placebtn.setAttribute('disabled', 'true'); this._placebtn.setAttribute('disabled', 'true');
this._placebtn.addEventListener('click', (ev) => { this._placebtn.addEventListener('click', (ev) => {
@ -82,8 +79,7 @@ export class Picker {
} }
this._placebtn.removeAttribute('disabled'); this._placebtn.removeAttribute('disabled');
this._user.innerText = `Logged in as ${user.username}, click here to log out`; this._placebtn.innerText = 'Place';
this._user.setAttribute('href', '/logout');
} }
public registerOnPlace(fn: (color: number) => void): void { public registerOnPlace(fn: (color: number) => void): void {

View File

@ -38,16 +38,37 @@ body {
height: 0; height: 0;
} }
&__coordinates {
&__coordinates, &__user {
background-color: rgba(221, 221, 221, 0.404);
position: absolute; position: absolute;
top: 1rem; top: 1rem;
left: 1rem;
background-color: rgba(221, 221, 221, 0.404);
padding: 0.5rem; padding: 0.5rem;
border-radius: 5px; border-radius: 5px;
z-index: 1008; z-index: 1008;
} }
&__coordinates {
left: 1rem;
}
&__user {
right: 1rem;
&.logged-in::after {
content: "(logout)";
position: absolute;
display: block;
color: #fff;
text-shadow: 1px 1px #000;
text-decoration: none;
font-size: 0.8rem;
left: 0;
right: 0;
text-align: center;
}
}
&__cursor { &__cursor {
position: absolute; position: absolute;
display: flex; display: flex;