cleaner bottombar
This commit is contained in:
parent
e7f2d928fe
commit
9b69470e3f
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user