starred/sky_phone
1
0
Fork 0
mirror of https://github.com/sky-systems/sky_phone.git synced 2026-08-28 17:01:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

FIX - center VaultX activity filter groups

Browse Source 
Group each activity filter icon and label into one content-sized flex row so the pair is centered as a unit instead of positioning the icon independently. Preserve the optical vertical offset and verify all three groups through the VaultX contract.
This commit is contained in:
smx.pusha
2026-08-18 13:22:16 +02:00
parent 334f9f24fc
commit 485df28b46
2 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/apps/CryptoApp.contract.test.ts
+2 -2
View File
@@ -213,9 +213,9 @@ describe('VaultX crypto app contracts', () => {
expect(source).toContain('class="activity-filter-panel"')
expect(source).toContain('class="activity-filters"')
expect(source).toContain('class="activity-status__icon"')
expect(source.match(/class="activity-filter-content"/g)).toHaveLength(3)
expect(source).toContain('<WalletCards :size="15" />')
expect(source).toContain('top: 50%;')
expect(source).toContain('transform: translateY(calc(-50% - 1px));')
expect(source).not.toContain('inset-inline-start: 10px;')
expect(source).toContain('transform: translateY(-1px);')
})
frontend/src/views/apps/CryptoApp.vue
+23 -21
View File
@@ -1365,21 +1365,27 @@ onUnmounted(() => {
><SkySegmentedButton
:active="activityFilter === 'all'"
@click="activityFilter = 'all'"
><History :size="15" /><span>{{
t('activity.filters.all')
}}</span></SkySegmentedButton
><span class="activity-filter-content"
><History :size="15" /><span>{{
t('activity.filters.all')
}}</span></span
></SkySegmentedButton
><SkySegmentedButton
:active="activityFilter === 'trades'"
@click="activityFilter = 'trades'"
><ChartNoAxesCombined :size="15" /><span>{{
t('activity.filters.trades')
}}</span></SkySegmentedButton
><span class="activity-filter-content"
><ChartNoAxesCombined :size="15" /><span>{{
t('activity.filters.trades')
}}</span></span
></SkySegmentedButton
><SkySegmentedButton
:active="activityFilter === 'wallet'"
@click="activityFilter = 'wallet'"
><WalletCards :size="15" /><span>{{
t('activity.filters.wallet')
}}</span></SkySegmentedButton
><span class="activity-filter-content"
><WalletCards :size="15" /><span>{{
t('activity.filters.wallet')
}}</span></span
></SkySegmentedButton
></SkySegmented
>
</div>
@@ -3575,25 +3581,21 @@ onUnmounted(() => {
color var(--sky-transition-normal) ease,
transform var(--sky-transition-fast) ease;
}
.activity-filters :deep(.sky-segmented-button svg) {
position: absolute;
top: 50%;
inset-inline-start: 10px;
display: block;
flex: 0 0 auto;
transform: translateY(calc(-50% - 1px));
}
.activity-filters :deep(.sky-segmented-button > span) {
display: flex;
.activity-filters :deep(.activity-filter-content) {
display: inline-flex;
max-width: 100%;
gap: 6px;
align-items: center;
justify-content: center;
width: 100%;
min-height: 15px;
line-height: 1;
text-align: center;
white-space: nowrap;
transform: translateY(-1px);
}
.activity-filters :deep(.activity-filter-content svg) {
display: block;
flex: 0 0 auto;
}
:deep(.activity-filters.sky-segmented--strong .sky-segmented-button--active) {
color: #fff;
}