From 67f34016cecb9639ac08eef89c378b1f08f158f0 Mon Sep 17 00:00:00 2001 From: tkymmm <136296842+tkymmm@users.noreply.github.com> Date: Mon, 30 Oct 2023 09:21:02 +0900 Subject: [PATCH 1/2] Update messages_ja_JP.properties --- src/main/resources/messages_ja_JP.properties | 46 ++++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/main/resources/messages_ja_JP.properties b/src/main/resources/messages_ja_JP.properties index 4382e6c7..42b0184a 100644 --- a/src/main/resources/messages_ja_JP.properties +++ b/src/main/resources/messages_ja_JP.properties @@ -43,11 +43,11 @@ green=緑 blue=青 custom=カスタム... -changedCredsMessage=Credentials changed! -notAuthenticatedMessage=User not authenticated. -userNotFoundMessage=User not found. -incorrectPasswordMessage=Current password is incorrect. -usernameExistsMessage=New Username already exists. +changedCredsMessage=資格情報が変更されました！ +notAuthenticatedMessage=ユーザーが認証されていません。 +userNotFoundMessage=ユーザーが見つかりません。 +incorrectPasswordMessage=現在のパスワードが正しくありません。 +usernameExistsMessage=新しいユーザー名はすでに存在します。 @@ -77,14 +77,14 @@ settings.accountSettings=アカウント設定 -changeCreds.title=Change Credentials -changeCreds.header=Update Your Account Details -changeCreds.changeUserAndPassword=You are using default login credentials. Please enter a new password (and username if wanted) -changeCreds.newUsername=New Username -changeCreds.oldPassword=Current Password -changeCreds.newPassword=New Password -changeCreds.confirmNewPassword=Confirm New Password -changeCreds.submit=Submit Changes +changeCreds.title=資格情報の変更 +changeCreds.header=アカウントの詳細を更新する +changeCreds.changeUserAndPassword=デフォルトのログイン認証情報を使用しています。新しいパスワード (必要に応じてユーザー名も) を入力してください +changeCreds.newUsername=新しいユーザー名 +changeCreds.oldPassword=現在のパスワード +changeCreds.newPassword=新しいパスワード +changeCreds.confirmNewPassword=新しいパスワードの確認 +changeCreds.submit=変更を送信 @@ -119,18 +119,18 @@ adminUserSettings.role=役割 adminUserSettings.actions=アクション adminUserSettings.apiUser=限定されたAPIユーザー adminUserSettings.webOnlyUser=ウェブ専用ユーザー -adminUserSettings.forceChange=Force user to change username/password on login +adminUserSettings.forceChange=ログイン時にユーザー名/パスワードを強制的に変更する adminUserSettings.submit=ユーザーの保存 ############# # HOME-PAGE # ############# home.desc=PDFのあらゆるニーズに対応するローカルホスティングされた総合窓口です。 -home.searchBar=Search for features... +home.searchBar=機能検索... home.viewPdf.title=View PDF -home.viewPdf.desc=View, annotate, add text or images +home.viewPdf.desc=表示、注釈、テキストや画像の追加 viewPdf.tags=view,read,annotate,text,image home.multiTool.title=PDFマルチツール @@ -497,7 +497,7 @@ scalePages.submit=送信 #certSign certSign.title=証明書による署名 -certSign.header=証明書を使用してPDFに署名します。 (進行中) +certSign.header=証明書を使用してPDFに署名します。 (制作中) certSign.selectPDF=署名するPDFファイルを選択: certSign.selectKey=秘密キーファイルを選択 (PKCS#8形式、.pemまたは.der) : certSign.selectCert=証明書ファイルを選択 (X.509形式、.pemまたは.der) : @@ -622,8 +622,8 @@ addImage.submit=画像の追加 #merge merge.title=結合 merge.header=複数のPDFを結合 (2ファイル以上) -merge.sortByName=Sort by name -merge.sortByDate=Sort by date +merge.sortByName=名前で並べ替え +merge.sortByDate=日付で並べ替え merge.submit=結合 @@ -674,10 +674,10 @@ split.submit=分割 imageToPDF.title=画像をPDFに変換 imageToPDF.header=画像をPDFに変換 imageToPDF.submit=変換 -imageToPDF.selectLabel=Image Fit Options -imageToPDF.fillPage=Fill Page -imageToPDF.fitDocumentToImage=Fit Page to Image -imageToPDF.maintainAspectRatio=Maintain Aspect Ratios +imageToPDF.selectLabel=画像フィットオプション +imageToPDF.fillPage=フルページ +imageToPDF.fitDocumentToImage=ページを画像に合わせる +imageToPDF.maintainAspectRatio=アスペクト比を維持する imageToPDF.selectText.2=PDFの自動回転 imageToPDF.selectText.3=マルチファイルの処理 (複数の画像を操作する場合に有効になります) imageToPDF.selectText.4=1つのPDFに結合 From c48c3e88977eb8f435fdbef963d988e4be35ce84 Mon Sep 17 00:00:00 2001 From: Neo Date: Mon, 30 Oct 2023 18:29:55 +1100 Subject: [PATCH 2/2] Dark Mode Improvements --- src/main/resources/static/css/home.css | 29 ++-- src/main/resources/static/js/darkmode.js | 160 ++++++++++++----------- 2 files changed, 102 insertions(+), 87 deletions(-) diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css index 9bd1ce70..ab3b3348 100644 --- a/src/main/resources/static/css/home.css +++ b/src/main/resources/static/css/home.css @@ -1,15 +1,22 @@ -#searchBar { - background-image: url('/images/search.svg'); - background-position: 16px 16px; - background-repeat: no-repeat; - width: 100%; - font-size: 16px; +#searchBar { + background-image: url('/images/search.svg'); + background-position: 16px 16px; + background-repeat: no-repeat; + width: 100%; + font-size: 16px; margin-bottom: 12px; - padding: 12px 20px 12px 40px; + padding: 12px 20px 12px 40px; border: 1px solid #ddd; - - + + } +.dark-mode-search { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' hei… 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") !important; + color: #f8f9fa !important; + background-color: #212529 !important; + border-color: #343a40 !important; + } + .features-container { @@ -25,10 +32,10 @@ display: flex; flex-direction: column; align-items: flex-start; - background: rgba(13, 110, 253, 0.05); + background: rgba(13, 110, 253, 0.05); transition: transform 0.3s, border 0.3s; transform-origin: center center; - outline: 2px solid transparent; + outline: 2px solid transparent; } .feature-card a { diff --git a/src/main/resources/static/js/darkmode.js b/src/main/resources/static/js/darkmode.js index ebf9c683..e7c3b402 100644 --- a/src/main/resources/static/js/darkmode.js +++ b/src/main/resources/static/js/darkmode.js @@ -1,90 +1,98 @@ -var toggleCount = 0; -var lastToggleTime = Date.now(); +var toggleCount = 0 +var lastToggleTime = Date.now() var elements = { - lightModeStyles: null, - darkModeStyles: null, - rainbowModeStyles: null, - darkModeIcon: null -}; + lightModeStyles: null, + darkModeStyles: null, + rainbowModeStyles: null, + darkModeIcon: null, +} function getElements() { - elements.lightModeStyles = document.getElementById("light-mode-styles"); - elements.darkModeStyles = document.getElementById("dark-mode-styles"); - elements.rainbowModeStyles = document.getElementById("rainbow-mode-styles"); - elements.darkModeIcon = document.getElementById("dark-mode-icon"); + elements.lightModeStyles = document.getElementById("light-mode-styles") + elements.darkModeStyles = document.getElementById("dark-mode-styles") + elements.rainbowModeStyles = document.getElementById("rainbow-mode-styles") + elements.darkModeIcon = document.getElementById("dark-mode-icon") + elements.searchBar = document.getElementById("searchBar") + elements.formControls = document.querySelectorAll(".form-control") } function setMode(mode) { - var event = new CustomEvent('modeChanged', { detail: mode }); - document.dispatchEvent(event); - elements.lightModeStyles.disabled = mode !== "off"; - elements.darkModeStyles.disabled = mode !== "on"; - elements.rainbowModeStyles.disabled = mode !== "rainbow"; - var jumbotron = document.getElementById('jumbotron'); - if (mode === "on") { - elements.darkModeIcon.src = "moon.svg"; - // Add the table-dark class to tables for dark mode - var tables = document.querySelectorAll('.table'); - tables.forEach(table => { - table.classList.add('table-dark'); - }); - if(jumbotron) { - jumbotron.classList.add('bg-dark'); - jumbotron.classList.remove('bg-light'); - } - } else if (mode === "off") { - elements.darkModeIcon.src = "sun.svg"; - // Remove the table-dark class for light mode - var tables = document.querySelectorAll('.table-dark'); - tables.forEach(table => { - table.classList.remove('table-dark'); - }); - if(jumbotron){ - console.log(mode) - jumbotron.classList.remove('bg-dark'); - jumbotron.classList.add('bg-light'); - } - } else if (mode === "rainbow") { - elements.darkModeIcon.src = "rainbow.svg"; - } + var event = new CustomEvent("modeChanged", { detail: mode }) + document.dispatchEvent(event) + elements.lightModeStyles.disabled = mode !== "off" + elements.darkModeStyles.disabled = mode !== "on" + elements.rainbowModeStyles.disabled = mode !== "rainbow" + var jumbotron = document.getElementById("jumbotron") + if (mode === "on") { + elements.darkModeIcon.src = "moon.svg" + // Dark mode improvement + elements.searchBar.classList.add("dark-mode-search") + elements.formControls.forEach(input => input.classList.add("bg-dark", "text-white")) + // Add the table-dark class to tables for dark mode + var tables = document.querySelectorAll(".table") + tables.forEach(table => { + table.classList.add("table-dark") + }) + if (jumbotron) { + jumbotron.classList.add("bg-dark") + jumbotron.classList.remove("bg-light") + } + } else if (mode === "off") { + elements.darkModeIcon.src = "sun.svg" + // Dark Mode Improvement + elements.searchBar.classList.remove("dark-mode-search") + elements.formControls.forEach(input => input.classList.remove("bg-dark", "text-white")) + // Remove the table-dark class for light mode + var tables = document.querySelectorAll(".table-dark") + tables.forEach(table => { + table.classList.remove("table-dark") + }) + if (jumbotron) { + console.log(mode) + jumbotron.classList.remove("bg-dark") + jumbotron.classList.add("bg-light") + } + } else if (mode === "rainbow") { + elements.darkModeIcon.src = "rainbow.svg" + } } function toggleDarkMode() { - var currentTime = Date.now(); - if (currentTime - lastToggleTime < 1000) { - toggleCount++; - } else { - toggleCount = 1; - } - lastToggleTime = currentTime; + var currentTime = Date.now() + if (currentTime - lastToggleTime < 1000) { + toggleCount++ + } else { + toggleCount = 1 + } + lastToggleTime = currentTime - if (toggleCount >= 18) { - localStorage.setItem("dark-mode", "rainbow"); - setMode("rainbow"); - } else if (localStorage.getItem("dark-mode") == "on") { - localStorage.setItem("dark-mode", "off"); - setMode("off"); - } else { - localStorage.setItem("dark-mode", "on"); - setMode("on"); - } + if (toggleCount >= 18) { + localStorage.setItem("dark-mode", "rainbow") + setMode("rainbow") + } else if (localStorage.getItem("dark-mode") == "on") { + localStorage.setItem("dark-mode", "off") + setMode("off") + } else { + localStorage.setItem("dark-mode", "on") + setMode("on") + } } -document.addEventListener("DOMContentLoaded", function() { - getElements(); +document.addEventListener("DOMContentLoaded", function () { + getElements() - var currentMode = localStorage.getItem("dark-mode"); - if (currentMode === "on" || currentMode === "off" || currentMode === "rainbow") { - setMode(currentMode); - } else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) { - setMode("on"); - } else { - setMode("off"); - } - - document.getElementById("dark-mode-toggle").addEventListener("click", function(event) { - event.preventDefault(); - toggleDarkMode(); - }); -}); + var currentMode = localStorage.getItem("dark-mode") + if (currentMode === "on" || currentMode === "off" || currentMode === "rainbow") { + setMode(currentMode) + } else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) { + setMode("on") + } else { + setMode("off") + } + + document.getElementById("dark-mode-toggle").addEventListener("click", function (event) { + event.preventDefault() + toggleDarkMode() + }) +})