From 63c072f4f25281ec4002803526c252730f0b3f62 Mon Sep 17 00:00:00 2001 From: maru21 Date: Sun, 15 Oct 2023 17:29:19 +0200 Subject: [PATCH] fixed button hover for files added fontsize and font --- css/w3-colors-flat.css | 5 +++- css/w3.css | 2 +- index.html | 5 +++- js/9.9.9/files.js | 66 +++++++++++++++++++++++------------------- js/9.9.9/parseForm.js | 2 +- 5 files changed, 46 insertions(+), 34 deletions(-) diff --git a/css/w3-colors-flat.css b/css/w3-colors-flat.css index c16718a..c1f93be 100644 --- a/css/w3-colors-flat.css +++ b/css/w3-colors-flat.css @@ -33,8 +33,11 @@ .w3-flat-pumpkin {color:#fff;background-color:#d35400} .w3-flat-pomegranate -{color:#fff;background-color:#c0392b} +{color:#fff;background-color:#c0392b !important} .w3-flat-silver {color:#000;background-color:#bdc3c7} .w3-flat-asbestos {color:#fff;background-color:#7f8c8d} + +.w3-hover-flat-pomegranate:hover +{color:#fff !important;background-color:#c0392b !important} \ No newline at end of file diff --git a/css/w3.css b/css/w3.css index 5eff116..0125498 100644 --- a/css/w3.css +++ b/css/w3.css @@ -145,7 +145,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0} .w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important} .w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important} .w3-left{float:left!important}.w3-right{float:right!important} -.w3-button:hover{color:#000!important;background-color:#ccc!important} +.w3-button:hover{color:#000;background-color:#ccc} .w3-transparent,.w3-hover-none:hover{background-color:transparent!important} .w3-hover-none:hover{box-shadow:none!important} /* Colors */ diff --git a/index.html b/index.html index c7dde13..4cdb341 100644 --- a/index.html +++ b/index.html @@ -13,8 +13,11 @@ //settings window.settings = { - lineBreak: 150, localOnly: true, + lineBreak: 150, + font: "Arial", + fontSize: 9, + }; let script = document.createElement("script"); diff --git a/js/9.9.9/files.js b/js/9.9.9/files.js index b0b847c..7d7bc04 100644 --- a/js/9.9.9/files.js +++ b/js/9.9.9/files.js @@ -11,7 +11,6 @@ import { modalNotifier } from "./evts.js"; function buildFile() { createStorageObj(); - //set current page value in activeState object activeState.activePage = "files"; @@ -23,7 +22,6 @@ function buildFile() { modalNotifier("there are no saved texts yet"); return; } - if (screen.width > 992) { document.getElementById("siteTitle").innerHTML = "Saved files"; @@ -114,7 +112,7 @@ function loadFileDivCallBack() { deleteButton.setAttribute("type", "submit"); deleteButton.setAttribute("value", "Delete"); deleteButton.classList.add("w3-button"); - deleteButton.classList.add("w3-red"); + deleteButton.classList.add("w3-flat-pomegranate"); document.getElementById("submitContainer").appendChild(deleteButton); if (screen.width > 992) { @@ -123,7 +121,6 @@ function loadFileDivCallBack() { document.getElementById("siteTitle").innerHTML = "TG"; } - let title = document.createElement("div"); title.classList.add("w3-panel"); let titleText = document.createElement("h2"); @@ -192,13 +189,15 @@ function loadFileSidebar(tF) { sidebarListItem.style.borderBottom = "1px solid #ddd"; sidebarListItem.id = "sb-" + obj.fileName.replace(/:/g, "_"); + //handle to many files on screen and display hidden files amount if (c > sidebarItemsAmount) { - sidebarListItem.setAttribute("data-template", '_overflow'); - sidebarListItem.setAttribute("data-file", '_overflow'); + sidebarListItem.setAttribute("data-template", "_overflow"); + sidebarListItem.setAttribute("data-file", "_overflow"); sidebarListItem.classList.add("w3-flat-clouds"); sidebarListItem.classList.remove("w3-button"); - sidebarListItem.style.borderRight = "1px solid rgb(221, 221, 221)" - sidebarListItem.innerHTML = tF.length - sidebarItemsAmount + " files not shown"; + sidebarListItem.style.borderRight = "1px solid rgb(221, 221, 221)"; + sidebarListItem.innerHTML = + tF.length - sidebarItemsAmount + " files not shown"; sidebarList.appendChild(sidebarListItem); break; } @@ -208,27 +207,28 @@ function loadFileSidebar(tF) { sidebarList.appendChild(sidebarListItem); c++; } - + + //clear all files button sidebarListItem = document.createElement("li"); - sidebarListItem.classList.add( - "w3-bar-item", - "w3-padding-large", - "w3-button" - ); + sidebarListItem.classList.add("w3-bar-item", "w3-padding-large", "w3-button"); sidebarListItem.style.borderBottom = "1px solid #ddd"; - sidebarListItem.setAttribute("data-template", '_clearAll'); - sidebarListItem.setAttribute("data-file", '_clearAll'); - sidebarListItem.classList.add("w3-flat-pomegranate", "w3-bottom"); + sidebarListItem.setAttribute("data-template", "_clearAll"); + sidebarListItem.setAttribute("data-file", "_clearAll"); + sidebarListItem.classList.add("w3-hover-flat-pomegranate", "w3-bottom"); sidebarListItem.style.borderRight = "1px solid rgb(221, 221, 221)"; sidebarListItem.style.width = "300px"; sidebarListItem.innerHTML = "Clear all files"; sidebarList.appendChild(sidebarListItem); - + return sidebarList; } function mainFormPlaceholder(msg = "Select a file") { - return "

" + msg + "












"; + return ( + "

" + + msg + + "












" + ); } function copyFileToClipboard() { @@ -238,7 +238,6 @@ function copyFileToClipboard() { } else { console.log("error file not found"); } - } function copyToClipBoard(html) { @@ -288,10 +287,16 @@ function formEvts(storageName) { break; case "Copy": copyFileToClipboard(); - e.target.className = e.target.className.replace(" w3-grey", " w3-flat-carrot"); + e.target.className = e.target.className.replace( + " w3-grey", + " w3-flat-carrot" + ); e.target.style.pointerEvents = "none"; const timeoutCopy = setTimeout(() => { - e.target.className = e.target.className.replace(" w3-flat-carrot"," w3-grey"); + e.target.className = e.target.className.replace( + " w3-flat-carrot", + " w3-grey" + ); e.target.style.pointerEvents = "auto"; }, 250); break; @@ -302,7 +307,8 @@ function formEvts(storageName) { if (previousFile) { loadFileDiv(previousFile.fileName, previousFile.template); } else { - document.getElementById("mainForm").innerHTML = mainFormPlaceholder("No file yet"); + document.getElementById("mainForm").innerHTML = + mainFormPlaceholder("No file yet"); } break; @@ -325,7 +331,6 @@ function loadSpecificTemplate(storageName) { } function getPreviousFile(storageName) { - let orgFileName = storageName.split("_m21_")[0]; let tF = JSON.parse(retrieveData("templateFiles")); let i = 0; @@ -333,17 +338,17 @@ function getPreviousFile(storageName) { for (let obj of tF) { if (obj.fileName == orgFileName) { - previousFile = tF[i-1]; + previousFile = tF[i - 1]; if (previousFile === undefined) { //get the next one if there is no previous one - previousFile = tF[i+1]; + previousFile = tF[i + 1]; } break; } i++; } - return (previousFile != undefined) ? previousFile : false; + return previousFile != undefined ? previousFile : false; } function clickClearAllFiles() { @@ -362,17 +367,18 @@ function clickClearAllFiles() { e.preventDefault; } } - }) + }); modalNotifier( "
\

Would you really like to delete all stored files?

\ ", - 0); + 0 + ); } function clearAllFiles() { let tF = JSON.parse(retrieveData("templateFiles")); if (tF == null || tF.length == 0) { - modalNotifier("there are no saved texts yet",2); + modalNotifier("there are no saved texts yet", 2); return; } for (let storageName of tF) { diff --git a/js/9.9.9/parseForm.js b/js/9.9.9/parseForm.js index 9e15aa3..fb5c1e3 100644 --- a/js/9.9.9/parseForm.js +++ b/js/9.9.9/parseForm.js @@ -131,7 +131,7 @@ function parseFormOnSubmit(returnJSON = false, parseOnly = false) { bHtml = bHtml.replace(/ /g, " "); bHtml = - "
" + + "
" + bHtml + "
";