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 _cursor = $('<div class="canvas__cursor">');
|
||||
private _coods = $('<div class="canvas__coordinates">');
|
||||
private _userInfo = $('<a class="canvas__user">');
|
||||
private _size = 1000;
|
||||
|
||||
private _viewWidth = 0;
|
||||
@ -42,6 +43,7 @@ export class ViewCanvas {
|
||||
private _dragging = false;
|
||||
private _pinching = false;
|
||||
private _previousPinchLength = 0;
|
||||
|
||||
private _placerTag: HTMLElement | null = null;
|
||||
private _placerRequestTime: number = 0;
|
||||
|
||||
@ -107,10 +109,14 @@ export class ViewCanvas {
|
||||
public initialize(): void {
|
||||
this.picker.initialize();
|
||||
|
||||
this._userInfo.innerText = 'Login';
|
||||
this._userInfo.setAttribute('href', '/login');
|
||||
|
||||
this._wrapper.append(this._coods);
|
||||
this._container.append(this._canvas);
|
||||
this._wrapper.append(this._cursor);
|
||||
this._wrapper.append(this._container);
|
||||
this._wrapper.append(this._userInfo);
|
||||
this._wrapper.append(this.picker.element);
|
||||
document.body.append(this._wrapper);
|
||||
|
||||
@ -325,6 +331,9 @@ export class ViewCanvas {
|
||||
|
||||
public setUser(user: IcyNetUser): void {
|
||||
this._user = user;
|
||||
this._userInfo.innerText = user.username;
|
||||
this._userInfo.classList.add('logged-in');
|
||||
this._userInfo.setAttribute('href', '/logout');
|
||||
this.picker.setLoggedIn(user);
|
||||
}
|
||||
|
||||
|
@ -11,7 +11,6 @@ export class Picker {
|
||||
private _content = $('<div class="controls">');
|
||||
private _colorsEl = $('<div class="controls__colors">');
|
||||
private _colorHistoryEl = $('<div class="controls__colors-history">');
|
||||
private _user = $('<a href="/login">');
|
||||
|
||||
private _colorInput = $('<input type="color">') as HTMLInputElement;
|
||||
private _placebtn = $('<button class="btn btn-primary btn-place">');
|
||||
@ -36,10 +35,9 @@ export class Picker {
|
||||
}
|
||||
|
||||
public initialize() {
|
||||
this._placebtn.innerText = 'Place';
|
||||
this._placebtn.innerText = 'Log in to place';
|
||||
this._palettebtn.innerText = '>>';
|
||||
this._clearbtn.innerText = 'Clear';
|
||||
this._user.innerText = 'Log in';
|
||||
this._wrapper.append(this._content);
|
||||
this._content.append(this._colorsEl);
|
||||
this._colorsEl.append(this._colorInput);
|
||||
@ -47,7 +45,6 @@ export class Picker {
|
||||
this._colorsEl.append(this._colorHistoryEl);
|
||||
this._colorsEl.append(this._clearbtn);
|
||||
this._content.append(this._placebtn);
|
||||
this._content.append(this._user);
|
||||
|
||||
this._placebtn.setAttribute('disabled', 'true');
|
||||
this._placebtn.addEventListener('click', (ev) => {
|
||||
@ -82,8 +79,7 @@ export class Picker {
|
||||
}
|
||||
|
||||
this._placebtn.removeAttribute('disabled');
|
||||
this._user.innerText = `Logged in as ${user.username}, click here to log out`;
|
||||
this._user.setAttribute('href', '/logout');
|
||||
this._placebtn.innerText = 'Place';
|
||||
}
|
||||
|
||||
public registerOnPlace(fn: (color: number) => void): void {
|
||||
|
@ -38,16 +38,37 @@ body {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&__coordinates {
|
||||
|
||||
&__coordinates, &__user {
|
||||
background-color: rgba(221, 221, 221, 0.404);
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
background-color: rgba(221, 221, 221, 0.404);
|
||||
padding: 0.5rem;
|
||||
border-radius: 5px;
|
||||
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 {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
|
Loading…
Reference in New Issue
Block a user