Enhancement related to To-Do list (XengShi#330)

* Update style.css limit scrollbar * Update index.html svg cleanup and scaling * Update style.css cleanup * Update style.css more cleanup * Update style.css + symbol * Update script.js for dark * Update style.css cross color * Update script.js for dark * Update languages.js * Update languages.js bn * Update script.js fix conflicts
prem-k-r · Dec 18, 2024 · 18f14b8 · 18f14b8
1 parent 3fa3afd
commit 18f14b8
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -25,10 +25,19 @@
 
 <body>
     <!----------------------- ToDo List Setup Starting ----------------------->
-    <!-- 9 Dot Icon -->
+    <!-- ToDo Icon -->
     <div class="todoListCont" id="todoListCont">
-        <svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="dot-icon" width="36" height="36" viewBox="0 0 32 32" xml:space="preserve">
-            <g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.128"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M11,30H5c-1.7,0-3-1.3-3-3v-6c0-1.7,1.3-3,3-3h6c1.7,0,3,1.3,3,3v6C14,28.7,12.7,30,11,30z"></path> </g> <g> <path d="M29,6H17c-0.6,0-1-0.4-1-1s0.4-1,1-1h12c0.6,0,1,0.4,1,1S29.6,6,29,6z"></path> </g> <g> <path d="M24,10h-7c-0.6,0-1-0.4-1-1s0.4-1,1-1h7c0.6,0,1,0.4,1,1S24.6,10,24,10z"></path> </g> <g> <path d="M29,22H17c-0.6,0-1-0.4-1-1s0.4-1,1-1h12c0.6,0,1,0.4,1,1S29.6,22,29,22z"></path> </g> <g> <path d="M24,26h-7c-0.6,0-1-0.4-1-1s0.4-1,1-1h7c0.6,0,1,0.4,1,1S24.6,26,24,26z"></path> </g> <path d="M11,2H5C3.3,2,2,3.3,2,5v6c0,1.7,1.3,3,3,3h6c1.7,0,3-1.3,3-3V5C14,3.3,12.7,2,11,2z M11.7,6.7l-3,3C8.5,9.9,8.3,10,8,10 S7.5,9.9,7.3,9.7l-2-2c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L8,7.6l2.3-2.3c0.4-0.4,1-0.4,1.4,0S12.1,6.3,11.7,6.7z"></path> </g>
+        <svg id="todoIcon" xmlns="http://www.w3.org/2000/svg" class="dot-icon" width="36" height="36"
+            viewBox="0 0 32 32">
+            <g style="transform: scale(0.85); transform-origin: center;">
+                <path d="M11,30H5c-1.7,0-3-1.3-3-3v-6c0-1.7,1.3-3,3-3h6c1.7,0,3,1.3,3,3v6C14,28.7,12.7,30,11,30z" />
+                <path d="M29,6H17c-0.6,0-1-0.4-1-1s0.4-1,1-1h12c0.6,0,1,0.4,1,1S29.6,6,29,6z" />
+                <path d="M24,10h-7c-0.6,0-1-0.4-1-1s0.4-1,1-1h7c0.6,0,1,0.4,1,1S24.6,10,24,10z" />
+                <path d="M29,22H17c-0.6,0-1-0.4-1-1s0.4-1,1-1h12c0.6,0,1,0.4,1,1S29.6,22,29,22z" />
+                <path d="M24,26h-7c-0.6,0-1-0.4-1-1s0.4-1,1-1h7c0.6,0,1,0.4,1,1S24.6,26,24,26z" />
+                <path
+                    d="M11,2H5C3.3,2,2,3.3,2,5v6c0,1.7,1.3,3,3,3h6c1.7,0,3-1.3,3-3V5C14,3.3,12.7,2,11,2z M11.7,6.7l-3,3C8.5,9.9,8.3,10,8,10 S7.5,9.9,7.3,9.7l-2-2c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L8,7.6l2.3-2.3c0.4-0.4,1-0.4,1.4,0S12.1,6.3,11.7,6.7z" />
+            </g>
         </svg>
         <!-- Text to appear on hover -->
         <span class="tooltip-text" id="todoListHover">ToDo List</span>
@@ -38,14 +47,13 @@
     <div id="todoContainer" class="todo-container" style="display: none;">
         <h2 id="todoListHeading">To Do List</h2>
         <div class="searchbar-content">
-            <input id="todoInput" placeholder="Type here..." type="text" autocomplete="off">
+            <input id="todoInput" placeholder="Add task..." type="text" autocomplete="off">
             <div class="searchControls">
                 <!-- Add Button -->
                 <button id="todoAdd">+</button>
             </div>
         </div>
         <ul class="todolist" id="todoullist">
-
         </ul>
     </div>
 
@@ -971,7 +979,7 @@ <h1>Material You NewTab</h1>
                         <div class="ttcont">
                             <div class="texts">
                                 <div class="bigText" id="todoListText">To Do List</div>
-                                <div class="infoText" id="todoListInfo">Show a Daily To Do List</div>
+                                <div class="infoText" id="todoListInfo">Show a daily To Do list</div>
                             </div>
                             <label class="switch">
                                 <input id="todoListCheckbox" type="checkbox">

diff --git a/languages.js b/languages.js
@@ -28,7 +28,7 @@ const translations = {
         "googleAppsMenuText": "Google Apps",
         "googleAppsMenuInfo": "Show shortcuts for Google Apps",
         "todoListText": "To Do List",
-        "todoListInfo": "Show a Daily To Do List",
+        "todoListInfo": "Show a daily To Do list",
         // Digital Clock
         "digitalclocktittle": "Digital Clock",
         "digitalclockinfo": "Switch to the digital clock",
@@ -61,7 +61,7 @@ const translations = {
         "InputOptionsButton": "Input options",
         "saveLoc": "Save",
         // Weather
-        "WeatherApiText": "Enter your WeatherAPI key",    // For 'WeatherAPI' string, only transliterate it
+        "WeatherApiText": "Enter your WeatherAPI key",    // For 'WeatherAPI' string, only transliterate
         "WeatherApiSubtext": "If the weather functionality isn't working",
         "userAPI": "Your weatherAPI key",
         "LearnMoreButton": "Learn more",
@@ -89,8 +89,8 @@ const translations = {
         "searchWithHint": "Search With",
         "ai_tools": "AI Tools",
         "userText": "Click here to edit",
-        "googleAppsHover": "Google Apps",    // Keep this untranslated if string width is much longer
-        "todoListHover": "ToDo List",    // Keep this untranslated if string width is much longer
+        "googleAppsHover": "Google Apps",    // Keep this shorter
+        "todoListHover": "ToDo List",    // Keep this short
         // End of Body and New Tab Items
 
         // Greeting
@@ -115,7 +115,7 @@ const translations = {
         "github": "GitHub",
 
         // Wallpaper and alerts
-        "uploadWallpaperText": "Upload Wallpaper",    // Keep it shorter
+        "uploadWallpaperText": "Upload Wallpaper",    // Keep this short
         "backupText": "Backup",
         "restoreText": "Restore",
         "rangColor": "Pick color",    // Keep it shorter
@@ -349,7 +349,7 @@ const translations = {
         "googleAppsMenuText": "गूगल ऐप्स",
         "googleAppsMenuInfo": "गूगल ऐप्स के शॉर्टकट्स प्रदर्शित करें",
         "todoListText": "कार्य सूची",
-        "todoListInfo": "अपनी दैनिक कार्य सूची देखें और व्यवस्थित रहें",
+        "todoListInfo": "दैनिक कार्यों की सूची दिखाएँ",
         // Digital Clock
         "digitalclocktittle": "डिजिटल घड़ी",
         "digitalclockinfo": "डिजिटल घड़ी पर स्विच करें",
@@ -775,6 +775,8 @@ const translations = {
         "timeformatinfo": "১২-ঘণ্টার সময় ফরম্যাট ব্যবহার করুন",
         "greetingtittle": "অভিবাদন",
         "greetinginfo": "কাস্টম টেক্সটের নিচে অভিবাদন দেখান",
+        "todoListText": "টু ডু লিস্ট",
+        "todoListInfo": "দৈনিক কাজের তালিকা দেখান",
 
         // Misc
         "userTextTitle": "কাস্টমাইজেবল টেক্সট",
@@ -827,10 +829,12 @@ const translations = {
         "enterBtn": "সার্চ করুন",
         "searchPlaceholder": "এখানে টাইপ করুন...",
         "listenPlaceholder": "শোনা হচ্ছে...",
+        "todoPlaceholder": "টাস্ক যোগ করুন...",
         "searchWithHint": "সার্চের মাধ্যম",
         "ai_tools": "এআই টুলস",
         "userText": "এখানে আপনার টেক্সট লিখুন",
         "googleAppsHover": "গুগল অ্যাপস",
+        "todoListHover": "টু ডু লিস্ট",
 
         // Greeting
         greeting: {

diff --git a/script.js b/script.js
@@ -1402,16 +1402,21 @@ const applySelectedTheme = (colorValue) => {
 
             .dark-theme .backupRestoreBtn:hover,
             .dark-theme .uploadButton:hover,
-            .dark-theme .randomButton:hover {
+            .dark-theme .randomButton:hover,
+	    .dark-theme #todoAdd:hover {
                 background-color: var(--bg-color-dark);
             }
             
             .dark-theme .uploadButton:active,
             .dark-theme .randomButton:active,
             .dark-theme .backupRestoreBtn:active,
-            .dark-theme. resetbtn:active {
+            .dark-theme .resetbtn:active {
                 background-color: #0e0e0e;
             }
+	    
+	    .dark-theme .todolistitem span {
+                color:#616161;
+            }
 
      	    .dark-theme .micIcon {
                 background-color: var(--whitishColor-dark);

diff --git a/style.css b/style.css
@@ -511,6 +511,8 @@ body {
 
 .todo-container::-webkit-scrollbar-track {
 	background-color: transparent;
+	margin-top: 107px;
+	margin-bottom: 10px;
 }
 
 .todo-container::-webkit-scrollbar-thumb {
@@ -526,24 +528,24 @@ body {
 /* For Firefox */
 @-moz-document url-prefix() {
 	.todo-container {
-		scrollbar-width: auto;
+		scrollbar-width: thin;
 		scrollbar-color: var(--darkColor-blue) transparent;
 	}
 }
 
 #todoAdd {
 	height: 40px;
 	border-radius: 100px;
-	padding: 0 16px;
+	padding: 1px 13px 0 13px;
 	border: none;
-	font-size: 1.1rem;
+	font-size: 1.5rem;
 	background-color: var(--darkColor-blue);
 	color: white;
-	scale: 0.8;
+	scale: 0.78;
 }
 
 #todoAdd:hover {
-	background-color: var(--darkColor-blue);
+	background-color: var(--darkerColor-blue);
 	color: #fff;
 	cursor: pointer;
 }
@@ -613,7 +615,7 @@ body {
 	height: 18px;
 	width: 18px;
 	border-radius: 50%;
-	background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><title></title><g id="Complete"><g id="Circle"><circle cx="12" cy="12" data-name="Circle" fill="none" id="Circle-2" r="10" stroke="%23FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle></g></g></g></svg>');
+	background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="%23000000"><circle cx="12" cy="12" r="10" fill="none" stroke="%23FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle></svg>');
 	background-size: cover;
 	background-position: center;
 	top: 50%;
@@ -623,7 +625,7 @@ body {
 	user-select: none;
 }
 .todolistitem.checked::before{
-	background-image: url('data:image/svg+xml,<svg fill="%23FFFFFF" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path d="M20,0C8.974,0,0,8.973,0,20c0,11.027,8.974,20,20,20c11.029,0,20-8.973,20-20C40,8.973,31.029,0,20,0z M28.818,17.875 l-8.562,8.564c-0.596,0.595-1.377,0.893-2.158,0.893c-0.779,0-1.561-0.298-2.156-0.893l-4.758-4.758 c-1.191-1.191-1.191-3.124,0-4.313c1.191-1.192,3.121-1.192,4.314,0l2.6,2.6l6.408-6.407c1.188-1.189,3.123-1.189,4.312,0 C30.01,14.752,30.01,16.684,28.818,17.875z"></path></g></g></svg>');;
+	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFFFFF" viewBox="0 0 40 40"><path d="M20,0C8.974,0,0,8.973,0,20c0,11.027,8.974,20,20,20c11.029,0,20-8.973,20-20C40,8.973,31.029,0,20,0z M28.818,17.875 l-8.562,8.564c-0.596,0.595-1.377,0.893-2.158,0.893c-0.779,0-1.561-0.298-2.156-0.893l-4.758-4.758 c-1.191-1.191-1.191-3.124,0-4.313c1.191-1.192,3.121-1.192,4.314,0l2.6,2.6l6.408-6.407c1.188-1.189,3.123-1.189,4.312,0 C30.01,14.752,30.01,16.684,28.818,17.875z"></path></svg>');
 }
 .todolistitem.checked{
 	color: #CCC;
@@ -639,7 +641,7 @@ body {
 	height: 24px;
 	font-size: 22px;
 	line-height: 1.2;
-	color: #CCC;
+	color: var(--bg-color-blue);
 	text-align: center;
 	border-radius: 50%;
 	transition: all 0.3s ease;