From d50231a531677c74e14c1477783f3ce6acd727e3 Mon Sep 17 00:00:00 2001 From: El RIDO Date: Sun, 5 Oct 2025 09:47:39 +0200 Subject: [PATCH] apply suggestions to use existing bootstrap icons as per discussion in https://github.com/PrivateBin/PrivateBin/pull/1647#discussion_r2345917795 --- css/common.css | 52 ----------------------------------------- img/bootstrap-icons.svg | 2 +- js/privatebin.js | 31 +++++++++++++++++++++--- lib/Configuration.php | 2 +- tpl/bootstrap.php | 12 ++++++---- tpl/bootstrap5.php | 10 ++++---- 6 files changed, 43 insertions(+), 66 deletions(-) diff --git a/css/common.css b/css/common.css index 2dc3072b..b5019c47 100644 --- a/css/common.css +++ b/css/common.css @@ -105,55 +105,3 @@ background-color: #fd8; transition: background-color 0.2s ease-in; } - -::-ms-reveal { - display: none; -} - -.password-peek-container { - position: relative; -} - -button.toggle-password { - position: absolute; - top: 3px; - right: 4px; - z-index: 9; - width: 2rem; - height: 2rem; - background: 0; - border: 0; -} - -button.toggle-password:active, -button.toggle-password:focus, -button.toggle-password:hover { - cursor: pointer; -} - -button.toggle-password:focus { - outline: none !important; -} - -.input-password { - padding-right: calc(1.5em + 0.75rem); - background-repeat: no-repeat; - background-position: right calc(0.375em + 0.1875rem) center; - background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); -} - -.input-password[type=text] { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E") !important; -} - -.input-password[type=password] { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E") !important; -} - -[data-bs-theme=dark] .input-password[type=text] { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23adb5bd' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E") !important; -} - -[data-bs-theme=dark] .input-password[type=password] { - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23adb5bd' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E") !important; -} diff --git a/img/bootstrap-icons.svg b/img/bootstrap-icons.svg index 18390345..1fea2e1a 100644 --- a/img/bootstrap-icons.svg +++ b/img/bootstrap-icons.svg @@ -1 +1 @@ - + diff --git a/js/privatebin.js b/js/privatebin.js index bb67d99e..c3394daf 100644 --- a/js/privatebin.js +++ b/js/privatebin.js @@ -5690,15 +5690,40 @@ jQuery.PrivateBin = (function($) { * @function */ function handleRevealButtonClick() { - const passwordInput = $(this).siblings('.input-password'); + const element = $(this); + const passwordInput = element.siblings('.input-password'); const isHidden = passwordInput.attr('type') === 'password'; passwordInput.attr('type', isHidden ? 'text' : 'password'); const tooltip = I18n._(isHidden ? 'Hide password' : 'Show password as plain text. Warning: this will display your password on the screen.'); - $(this).attr('title', tooltip); - $(this).attr('aria-label', tooltip); + element.attr('title', tooltip); + element.attr('aria-label', tooltip); + + // handle bootstrap 5 icons: eye & eye-slash + const buttonSvg = element.find('use'); + if (buttonSvg.length) { + const iconHref = buttonSvg.attr('href'); + if (isHidden) { + buttonSvg.attr('href', iconHref + '-slash'); + } else { + buttonSvg.attr('href', iconHref.substring(0, iconHref.length - 6)); + } + return; + } + + // handle bootstrap 3 icons: eye-open & eye-close + const buttonSpan = element.find('span'); + if (buttonSpan.length) { + if (isHidden) { + buttonSpan.addClass('glyphicon-eye-close'); + buttonSpan.removeClass('glyphicon-eye-open'); + } else { + buttonSpan.addClass('glyphicon-eye-open'); + buttonSpan.removeClass('glyphicon-eye-close'); + } + } } /** diff --git a/lib/Configuration.php b/lib/Configuration.php index 63e1f16f..56fdac3b 100644 --- a/lib/Configuration.php +++ b/lib/Configuration.php @@ -121,7 +121,7 @@ class Configuration 'js/kjua-0.10.0.js' => 'sha512-BYj4xggowR7QD150VLSTRlzH62YPfhpIM+b/1EUEr7RQpdWAGKulxWnOvjFx1FUlba4m6ihpNYuQab51H6XlYg==', 'js/legacy.js' => 'sha512-08+subq1Lo+r+la5ENqeXiMgNJcVaaTtBIFGkrjziSpvtgCId3Jtin4/OkSdHYSoeztwwIab8uvCzPKHta6puQ==', 'js/prettify.js' => 'sha512-puO0Ogy++IoA2Pb9IjSxV1n4+kQkKXYAEUtVzfZpQepyDPyXk8hokiYDS7ybMogYlyyEIwMLpZqVhCkARQWLMg==', - 'js/privatebin.js' => 'sha512-WUwQX00pq9GWmMcB+umoiizpmlfGz9LjxAlUXzsNxjPh8vEcuy0gQ0lolidPmBPeNVBDzeh0DOmZ+h4gSH6ekw==', + 'js/privatebin.js' => 'sha512-seF8mXWh9E9SBK0qWNfm8RTGneGc05QpDcPyeTk+sg6efB6Edhiu6mvbSDCM4zb/gFqeko7jTYcUSYxhs3UIaA==', 'js/purify-3.2.6.js' => 'sha512-zqwL4OoBLFx89QPewkz4Lz5CSA2ktU+f31fuECkF0iK3Id5qd3Zpq5dMby8KwHjIEpsUgOqwF58cnmcaNem0EA==', 'js/showdown-2.1.0.js' => 'sha512-WYXZgkTR0u/Y9SVIA4nTTOih0kXMEd8RRV6MLFdL6YU8ymhR528NLlYQt1nlJQbYz4EW+ZsS0fx1awhiQJme1Q==', 'js/zlib-1.3.1-1.js' => 'sha512-5bU9IIP4PgBrOKLZvGWJD4kgfQrkTz8Z3Iqeu058mbQzW3mCumOU6M3UVbVZU9rrVoVwaW4cZK8U8h5xjF88eQ==', diff --git a/tpl/bootstrap.php b/tpl/bootstrap.php index b57dc40e..a27cfc82 100644 --- a/tpl/bootstrap.php +++ b/tpl/bootstrap.php @@ -109,12 +109,13 @@ if (count($class)) {
-
+
- + +
@@ -376,10 +377,11 @@ if ($PASSWORD) : diff --git a/tpl/bootstrap5.php b/tpl/bootstrap5.php index fd0d70c1..1a0875a5 100644 --- a/tpl/bootstrap5.php +++ b/tpl/bootstrap5.php @@ -82,11 +82,12 @@ endif;
-
+
-
@@ -249,11 +250,12 @@ if ($PASSWORD) : ?>