cleaner bottombar

src/client/canvas.ts

@@ -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);
   }
 

src/client/picker.ts

@@ -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 {

src/client/scss/index.scss

@@ -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;