From e5e43f4e515680aa951702c004a4ed5c7a10bfac Mon Sep 17 00:00:00 2001
From: Adrian Soluch <adrian.soluch@gmail.com>
Date: Sun, 26 Jul 2020 16:37:50 +0200
Subject: [PATCH] searchbox & annotation input/contenteditable scss+, closes
 #225

---
 .../inspectorEntry.component.scss               |  7 +++++--
 .../components/toolbar/toolbar.component.scss   | 17 ++++++++++-------
 .../components/toolbar/toolbar.component.ts     |  4 ++--
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/app/core/components/inspector/inspectorEntry/inspectorEntry.component.scss b/src/app/core/components/inspector/inspectorEntry/inspectorEntry.component.scss
index 9410b2cb..92b388b8 100644
--- a/src/app/core/components/inspector/inspectorEntry/inspectorEntry.component.scss
+++ b/src/app/core/components/inspector/inspectorEntry/inspectorEntry.component.scss
@@ -142,11 +142,14 @@
             color: #000000;
           }
         }
-
-        &[placeholder]:empty:not(:focus):before {
+        // &[placeholder]:empty:not(:focus):before {
+        &[placeholder]:empty::before {
           content: attr(placeholder);
           color: #CCC;
         }
+        &[placeholder]:empty:focus::before {
+          content: "";
+        }
       }
 
       &:focus {
diff --git a/src/app/core/components/toolbar/toolbar.component.scss b/src/app/core/components/toolbar/toolbar.component.scss
index 27b56e90..42486240 100644
--- a/src/app/core/components/toolbar/toolbar.component.scss
+++ b/src/app/core/components/toolbar/toolbar.component.scss
@@ -44,10 +44,10 @@ button {
     top: 5px;
     left: 10px;
   }
-  input:focus + .search-icon {
-    /*opacity: 0;*/
-    visibility: hidden;
-  }
+  /*input:focus + .search-icon {
+    // opacity: 0.9;
+    // visibility: hidden;
+  }*/
   .close-icon {
     position: absolute;
     top: 5px;
@@ -67,13 +67,16 @@ button {
       padding: 6px 32px;
     }
     &:focus + .search-icon {
-      /*opacity: 0;*/
-      visibility: hidden;
+      opacity: 0.15;
+      // visibility: hidden;
     }
-    &[placeholder]:empty:not(:focus):before {
+    &[placeholder]:empty:before {
       content: attr(placeholder);
       color: #CCC;
     }
+    &[placeholder]:empty:focus::before {
+      content: "";
+    }
   }
   .searchBox::placeholder {
     color: black;
diff --git a/src/app/core/components/toolbar/toolbar.component.ts b/src/app/core/components/toolbar/toolbar.component.ts
index 32b78a4d..a5a05f5a 100644
--- a/src/app/core/components/toolbar/toolbar.component.ts
+++ b/src/app/core/components/toolbar/toolbar.component.ts
@@ -69,7 +69,7 @@ export class ToolbarComponent extends HashtagService implements OnInit, AfterVie
   constructor(
     private readonly _fb: FormBuilder,
     readonly _domService: DomService,
-    private global: Globals,
+    private _global: Globals,
     private readonly _cdr: ChangeDetectorRef,
   ) {
     super(_domService)
@@ -117,7 +117,7 @@ export class ToolbarComponent extends HashtagService implements OnInit, AfterVie
 
   ngAfterViewInit() {
 
-    this.global.getValue().subscribe((value) => {
+    this._global.getValue().subscribe((value) => {
       this.viewmode_active = value
       this._cdr.detectChanges()
     })