From bb6696b9b4caab97da3c0faa30a35d2e99fc3b02 Mon Sep 17 00:00:00 2001
From: Andrey Marakulin <a.p.marakulin@gmail.com>
Date: Sun, 27 Mar 2022 20:43:20 +0300
Subject: [PATCH] 0.8.3 Clock lol

---
 css/app.css     | 10 +---------
 css/clock.css   | 12 ++++++++++++
 css/content.css |  4 ++--
 js/app.js       |  8 +++++++-
 js/clock.js     | 45 +++++++++++++++++++++++++++++++++++++++++++++
 manifest.json   |  2 +-
 newtab.html     | 16 ++++++++++++++++
 7 files changed, 84 insertions(+), 13 deletions(-)
 create mode 100644 css/clock.css
 create mode 100644 js/clock.js

diff --git a/css/app.css b/css/app.css
index 6b3a1ff..6a05e4c 100644
--- a/css/app.css
+++ b/css/app.css
@@ -16,12 +16,4 @@ body {
 
 ::-webkit-scrollbar {
     display: none;
-    /*width: 0.7em;*/
-    /*background-color: transparent;*/
-    /*margin-right: 0.5em;*/
-}
-
-/*::-webkit-scrollbar-thumb {*/
-/*    background-color: darkgrey;*/
-/*    border-radius: 1em;*/
-/*}*/
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/css/clock.css b/css/clock.css
new file mode 100644
index 0000000..3296f76
--- /dev/null
+++ b/css/clock.css
@@ -0,0 +1,12 @@
+.clock-div {
+    font: 3.0em Arial, sans-serif;
+    font-weight: bold;
+    padding-top: 30px;
+    margin: 0;
+    text-align: center;
+}
+
+.clock-text{
+    color: white;
+    text-shadow: 0 0 5px black;
+}
\ No newline at end of file
diff --git a/css/content.css b/css/content.css
index 1830a1b..78563f1 100644
--- a/css/content.css
+++ b/css/content.css
@@ -1,7 +1,7 @@
 .content {
-    padding: 100px 0 0 0;
+    padding: 120px 0 0 0;
     overflow-y: auto;
-    transition: margin 500ms, padding 500ms;
+    transition: margin 500ms, padding-right 500ms, padding-left 500ms;
 }
 
 .grid {
diff --git a/js/app.js b/js/app.js
index 4b27ae9..c0fbcf9 100644
--- a/js/app.js
+++ b/js/app.js
@@ -6,7 +6,7 @@ function initSettingsValues(fromfile = false) {
             chrome.storage.local.set({'version': json['version']}, () => {})
         })
     }
-    chrome.storage.local.get(['cols', 'rows', 'new-tab', 'show-quick', 'show-header'], function (res) {
+    chrome.storage.local.get(['cols', 'rows', 'new-tab', 'show-quick', 'show-header', 'show-clock'], function (res) {
         document.getElementById('cols').innerText = res['cols']
         document.getElementById('range-cols').setAttribute('value', res['cols'])
         document.getElementById('rows').innerText = res['rows']
@@ -26,6 +26,11 @@ function initSettingsValues(fromfile = false) {
         } else {
             document.getElementById('checkbox-show-header').removeAttribute('checked')
         }
+        if (res['show-clock']) {
+            document.getElementById('checkbox-show-clock').setAttribute('checked', '')
+        } else {
+            document.getElementById('checkbox-show-clock').removeAttribute('checked')
+        }
         makeGrid(parseInt(res['cols']), parseInt(res['rows']), fromfile)
     })
     chrome.storage.local.get(['background'], function (res) {
@@ -41,6 +46,7 @@ function initSettingsValues(fromfile = false) {
 document.addEventListener("DOMContentLoaded", () => {
     initSettingsValues()
     beautyfyView()
+    initClock()
 })
 
 window.addEventListener('resize', () => {
diff --git a/js/clock.js b/js/clock.js
new file mode 100644
index 0000000..d86fc18
--- /dev/null
+++ b/js/clock.js
@@ -0,0 +1,45 @@
+function setTime(){
+    let now = new Date()
+    $('#clock').text(now.toLocaleTimeString("ru-RU", {hour: '2-digit', minute:'2-digit'}))
+}
+
+
+function updateTime(){
+    setTime()
+    setTimeout(function () {
+        updateTime()
+    }, 500)
+}
+
+function initClock(){
+    chrome.storage.local.get(['show-clock'], function (res) {
+        if (res['show-clock']) {
+            $('.clock-div').css('display', 'block')
+            $('.content').css('padding-top', '35px')
+        } else {
+            $('.clock-div').css('display', 'none')
+            $('.content').css('padding-top', '120px')
+        }
+        updateTime()
+    })
+}
+
+
+$('#show-clock').on('click', (e) => {
+    e.stopPropagation()
+    e.preventDefault()
+    chrome.storage.local.get(['show-clock'], function (res) {
+        if (res['show-clock']) {
+            chrome.storage.local.set({['show-clock']: false}, () => {})
+            document.getElementById('checkbox-show-clock').removeAttribute('checked')
+            $('.clock-div').css('display', 'none')
+            $('.content').css('padding-top', '120px')
+
+        } else {
+            chrome.storage.local.set({['show-clock']: true}, () => {})
+            document.getElementById('checkbox-show-clock').setAttribute('checked', '')
+            $('.clock-div').css('display', 'block')
+            $('.content').css('padding-top', '35px')
+        }
+    })
+})
diff --git a/manifest.json b/manifest.json
index 2d94160..c031dd8 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Pulchra bookmarks",
   "description": "Pulchra bookmarks extension",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "manifest_version": 3,
   "minimum_chrome_version": "96",
   "chrome_url_overrides": {
diff --git a/newtab.html b/newtab.html
index 5f2ecb8..44d7975 100644
--- a/newtab.html
+++ b/newtab.html
@@ -17,6 +17,7 @@
     <link rel="stylesheet" href="css/header.css">
     <link rel="stylesheet" href="css/right-click-menu.css">
     <link rel="stylesheet" href="css/edit-menu.css">
+    <link rel="stylesheet" href="css/clock.css">
 </head>
 
 <body>
@@ -30,6 +31,9 @@
             </div>
         </div>
     </div>
+    <div class="clock-div">
+        <div class="clock-text" id="clock"></div>
+    </div>
     <div class="content">
         <div class="grid" id="grid">
         </div>
@@ -121,6 +125,17 @@
                 </label>
             </div>
         </div>
+        <div class="row rowhover" id="show-clock">
+            <div class="item-left">
+                <span>Show clock</span>
+            </div>
+            <div class="item-right">
+                <label class="switch">
+                    <input type="checkbox" id="checkbox-show-clock">
+                    <span class="slider round"></span>
+                </label>
+            </div>
+        </div>
         <div class="row rowgroup">
             <div class="rowgroup-title">
                 <span>Behavior</span>
@@ -276,6 +291,7 @@
 <script type="text/javascript" src="js/settings.js"></script>
 <script type="text/javascript" src="js/saveopen.js"></script>
 <script type="text/javascript" src="js/header.js"></script>
+<script type="text/javascript" src="js/clock.js"></script>
 <script type="text/javascript" src="js/app.js"></script>
 </body>
 </html>
\ No newline at end of file