Aidar/SHiNE-server
SHA256
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Сделана компактная кнопка скрытия ключей в UI

Browse Source
This commit is contained in:
AidarKC 2026-06-02 16:40:58 +04:00
parent 68ed93dd24
commit d2205648e6
3 changed files with 46 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
VERSION.properties
View File

@ -1,2 +1,2 @@
client.version=1.2.112 client.version=1.2.113
server.version=1.2.104 server.version=1.2.105

29
shine-UI/js/pages/show-keys-view.js
View File

@ -40,13 +40,28 @@ export function render({ navigate }) {
const renderField = (id, label) => { const renderField = (id, label) => {
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'key-card stack'; row.className = 'key-card stack';
const eyeIcon = `
<svg class="key-toggle-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M2.4 12s3.6-6.5 9.6-6.5S21.6 12 21.6 12s-3.6 6.5-9.6 6.5S2.4 12 2.4 12Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
<circle cx="12" cy="12" r="2.9" fill="none" stroke="currentColor" stroke-width="1.8"/>
</svg>
`;
const eyeOffIcon = `
<svg class="key-toggle-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M3 4l18 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M2.4 12s3.6-6.5 9.6-6.5c2.4 0 4.5.8 6.1 1.9" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
<path d="M21.6 12s-3.6 6.5-9.6 6.5c-2.4 0-4.5-.8-6.1-1.9" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
</svg>
`;
row.innerHTML = ` row.innerHTML = `
<div class="row"> <div class="row">
<span class="field-label">${label}</span> <span class="field-label">${label}</span>
<button class="icon-btn small-btn" type="button" data-toggle="${id}">Показать</button> <button class="icon-btn key-toggle-btn" type="button" data-toggle="${id}" aria-label="Показать ключ" title="Показать ключ">${eyeOffIcon}</button>
</div> </div>
<div class="key-value key-value--compact" data-value="${id}">*****</div> <div class="key-value key-value--compact" data-value="${id}">*****</div>
`; `;
row._eyeIcon = eyeIcon;
row._eyeOffIcon = eyeOffIcon;
return row; return row;
}; };
@ -59,21 +74,29 @@ export function render({ navigate }) {
const setMissingState = (id) => { const setMissingState = (id) => {
const valueEl = card.querySelector(`[data-value="${id}"]`); const valueEl = card.querySelector(`[data-value="${id}"]`);
const btnEl = card.querySelector(`[data-toggle="${id}"]`); const btnEl = card.querySelector(`[data-toggle="${id}"]`);
const field = btnEl?.closest('.key-card');
valueEl.textContent = 'нет данных'; valueEl.textContent = 'нет данных';
btnEl.disabled = true; btnEl.disabled = true;
btnEl.textContent = 'Нет'; btnEl.innerHTML = field?._eyeOffIcon || '';
btnEl.setAttribute('aria-label', 'Нет данных');
btnEl.title = 'Нет данных';
}; };
const updateField = (id) => { const updateField = (id) => {
const valueEl = card.querySelector(`[data-value="${id}"]`); const valueEl = card.querySelector(`[data-value="${id}"]`);
const btnEl = card.querySelector(`[data-toggle="${id}"]`); const btnEl = card.querySelector(`[data-toggle="${id}"]`);
const field = btnEl?.closest('.key-card');
if (!keys[id]) { if (!keys[id]) {
setMissingState(id); setMissingState(id);
return; return;
} }
valueEl.textContent = visible[id] ? keys[id] : '*****'; valueEl.textContent = visible[id] ? keys[id] : '*****';
btnEl.disabled = false; btnEl.disabled = false;
btnEl.textContent = visible[id] ? 'Скрыть' : 'Показать'; btnEl.innerHTML = visible[id]
? field?._eyeIcon || ''
: field?._eyeOffIcon || '';
btnEl.setAttribute('aria-label', visible[id] ? 'Скрыть ключ' : 'Показать ключ');
btnEl.title = visible[id] ? 'Скрыть ключ' : 'Показать ключ';
}; };
card.querySelectorAll('[data-toggle]').forEach((button) => { card.querySelectorAll('[data-toggle]').forEach((button) => {

18
shine-UI/styles/components.css
View File

@ -1281,6 +1281,24 @@ textarea.input {
letter-spacing: 0; letter-spacing: 0;
} }
.key-toggle-btn {
width: 36px;
height: 36px;
min-height: 36px;
min-width: 36px;
padding: 0;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: 10px;
}
.key-toggle-icon {
width: 18px;
height: 18px;
display: block;
}
.qr-demo { .qr-demo {
width: 64px; width: 64px;
height: 64px; height: 64px;