p1otek/winterfail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: updated indicator items to double-line layout

Browse Source
This commit is contained in:
DiTus
2026-03-20 09:30:59 +01:00
parent 5624e3a8b7
commit de00d603fc
2 changed files with 28 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
css/indicators-new.css
View File

@ -161,16 +161,23 @@
.indicator-item-main { .indicator-item-main {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 8px;
padding: 8px 10px; padding: 10px 12px;
cursor: pointer; cursor: pointer;
} }
.indicator-name { .indicator-info {
flex: 1; flex: 1;
font-size: 12px; display: flex;
flex-direction: column;
min-width: 0; /* Important for ellipsis */
gap: 2px;
}
.indicator-name {
font-size: 13px;
color: var(--tv-text); color: var(--tv-text);
font-weight: 500; font-weight: 600;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -179,13 +186,16 @@
.indicator-desc { .indicator-desc {
font-size: 11px; font-size: 11px;
color: var(--tv-text-secondary); color: var(--tv-text-secondary);
margin-left: 8px; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.indicator-actions { .indicator-actions {
display: flex; display: flex;
gap: 4px; gap: 4px;
margin-left: auto; margin-left: 8px;
flex-shrink: 0;
} }
.indicator-btn { .indicator-btn {

10
js/ui/indicators-panel-new.js
View File

@ -297,8 +297,10 @@ function renderIndicatorItem(indicator, isFavorite) {
return ` return `
<div class="indicator-item ${isFavorite ? 'favorite' : ''}" data-type="${indicator.type}"> <div class="indicator-item ${isFavorite ? 'favorite' : ''}" data-type="${indicator.type}">
<div class="indicator-item-main"> <div class="indicator-item-main">
<div class="indicator-info">
<span class="indicator-name">${indicator.name}</span> <span class="indicator-name">${indicator.name}</span>
<span class="indicator-desc">${indicator.description || ''}</span> <span class="indicator-desc">${indicator.description || ''}</span>
</div>
<div class="indicator-actions"> <div class="indicator-actions">
<button class="indicator-btn add" data-type="${indicator.type}" title="Add to chart">+</button> <button class="indicator-btn add" data-type="${indicator.type}" title="Add to chart">+</button>
${isFavorite ? '' : ` ${isFavorite ? '' : `
@ -317,7 +319,8 @@ function renderActiveIndicator(indicator) {
const meta = getIndicatorMeta(indicator); const meta = getIndicatorMeta(indicator);
const label = getIndicatorLabel(indicator); const label = getIndicatorLabel(indicator);
const isFavorite = userPresets.favorites?.includes(indicator.type) || false; const isFavorite = userPresets.favorites?.includes(indicator.type) || false;
const showPresets = meta.name && function() { const description = meta?.description || '';
const showPresets = meta?.name && function() {
const hasPresets = typeof getPresetsForIndicator === 'function' ? getPresetsForIndicator(meta.name) : []; const hasPresets = typeof getPresetsForIndicator === 'function' ? getPresetsForIndicator(meta.name) : [];
if (!hasPresets || hasPresets.length === 0) return ''; if (!hasPresets || hasPresets.length === 0) return '';
return `<div class="indicator-presets"> return `<div class="indicator-presets">
@ -332,8 +335,11 @@ function renderActiveIndicator(indicator) {
<button class="indicator-btn visible" onclick="event.stopPropagation(); window.toggleIndicatorVisibility && window.toggleIndicatorVisibility('${indicator.id}')" title="${indicator.visible !== false ? 'Hide' : 'Show'}"> <button class="indicator-btn visible" onclick="event.stopPropagation(); window.toggleIndicatorVisibility && window.toggleIndicatorVisibility('${indicator.id}')" title="${indicator.visible !== false ? 'Hide' : 'Show'}">
${indicator.visible !== false ? '👁' : '👁‍🗨'} ${indicator.visible !== false ? '👁' : '👁‍🗨'}
</button> </button>
<div class="indicator-info">
<span class="indicator-name">${label}</span> <span class="indicator-name">${label}</span>
${showPresets} <span class="indicator-desc">${description}</span>
</div>
${showPresets || ''}
<button class="indicator-btn favorite" onclick="event.stopPropagation(); window.toggleFavorite && window.toggleFavorite('${indicator.type}')" title="Add to favorites"> <button class="indicator-btn favorite" onclick="event.stopPropagation(); window.toggleFavorite && window.toggleFavorite('${indicator.type}')" title="Add to favorites">
${isFavorite ? '★' : '☆'} ${isFavorite ? '★' : '☆'}
</button> </button>