ui

tarutin · Dec 2, 2022 · 2600707 · 2600707
1 parent d83e653
commit 2600707
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/app/renderer.js b/app/renderer.js
@@ -289,8 +289,9 @@ function search()
 
                 db.find(query, city => {
                     if(city.name && !city.timezone) return
-                    $('.search label').innerText = !city.name ? 'Not found' : city.name + ', ' + city.code
-                    newclock = city.name ? { name: city.name, full: city.name + ', ' + city.code, timezone: city.timezone, tray: 0 } : null
+                    let fullName = city.name + (city.code ? ', ' + city.code : '')
+                    $('.search label').innerText = !city.name ? 'Not found' : fullName
+                    newclock = city.name ? { name: city.name, full: fullName, timezone: city.timezone, tray: 0 } : null
                 })
             }
         }
@@ -324,6 +325,20 @@ function clocks()
 
             var inputPrevName = ''
 
+            // mouseover
+            button.querySelector('.name').addEventListener('mouseover', e => {
+                e.target.closest('.name').classList.add('hover')
+            })
+
+            // mouseout
+            button.querySelector('.name').addEventListener('mouseout', e => {
+                let input = e.target.closest('.name')
+
+                if(!input.classList.contains('focus')) {
+                    input.classList.remove('hover')
+                }
+            })
+
             // activate
             button.querySelector('.name').addEventListener('focus', e => {
                 e.stopPropagation()
@@ -337,7 +352,7 @@ function clocks()
             button.querySelector('.name').addEventListener('blur', e => {
                 e.stopPropagation()
                 let input = e.target.closest('.name')
-                input.classList.remove('focus')
+                input.classList.remove('focus', 'hover')
                 input.blur()
                 input.scrollLeft = 0
                 input.innerText = inputPrevName
@@ -366,7 +381,7 @@ function clocks()
                 }
 
                 if(keycode == 27) {
-                    input.classList.remove('focus')
+                    input.classList.remove('focus', 'hover')
                     input.innerText = inputPrevName
                     input.blur()
                     e.preventDefault()

diff --git a/app/static/style.css b/app/static/style.css
@@ -25,6 +25,7 @@ button, html input[type='button'], input[type='reset'], input[type='submit'] { -
 .clock button time.morning { background-color:#F9C133; color:#000; background-image:url('../static/sun-darkmode.svg'); }
 .clock button time.evening { background-color:#2B2E75; color:#fff; background-image:url('../static/moon-darkmode.svg'); }
 .clock button .name { border:1px solid transparent; line-height:100%!important; padding:3px 6px; border-radius:4px; cursor:text; max-width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.clock button .name.hover { border-color:rgba(255, 255, 255, .15)!important; }
 .clock button .name.focus { text-overflow:clip!important; border-color:rgba(255, 255, 255, .15)!important; }
 .clock button .delete { display:none; margin-left:5px; width:24px; height:24px; background:url('../static/remove-darkmode.svg') no-repeat center center; background-size:16px 16px; }
 .clock button:hover .delete { display:inline-flex; }
@@ -89,6 +90,7 @@ b, strong { font-weight:600; }
 .light .clock button .name.focus { border-color:rgba(255, 255, 255, .15); }
 .light .clock button time.morning { background-image:url('../static/sun.svg'); }
 .light .clock button time.evening { background-image:url('../static/moon.svg'); }
+.light .clock button .name.hover { border-color:rgba(0, 0, 0, .15)!important; }
 .light .clock button .name.focus { border-color:rgba(0, 0, 0, .15)!important; }
 .light .slider { background-color:#fff; border-color:#F2F2F2; }
 .light .slider .now, .light .slider .from, .light .slider .to { color:#000; }