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 - compact Companies Glass subnavigation

Browse Source
This commit is contained in:
DerEchteAlec
2026-08-13 19:25:06 +02:00
parent 4284143cb2
commit 7fac1bdbcd
6 changed files with 107 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/ui/controls.css
+21
View File
@@ -1660,6 +1660,27 @@ label.sky-list-item__row {
transition-duration: 0ms;
}
.sky-glass.sky-segmented--navigation.sky-segmented--compact {
height: 48px;
min-height: 48px;
padding-block: 2px;
}
.sky-segmented--navigation.sky-segmented--compact .sky-segmented-button {
height: var(--sky-touch-target, 44px);
min-height: var(--sky-touch-target, 44px);
flex-direction: row;
gap: 0;
font-size: 15px;
font-weight: 500;
line-height: 20px;
}
.sky-segmented--compact .sky-segmented__highlight {
top: 2px;
bottom: 2px;
}
.sky-segmented__highlight {
position: absolute;
z-index: 0;
frontend/src/ui/controls/SkySegmented.test.ts
+36
View File
@@ -102,6 +102,42 @@ describe('SkySegmented navigation', () => {
)
})
it('keeps text-only Glass navigation compact with 44px targets', async () => {
const html = await renderToString(
createSSRApp({
render: () =>
h(
SkySegmented,
{
activeIndex: 1,
ariaLabel: 'Availability',
compact: true,
itemCount: 3,
navigation: true,
},
{
default: () =>
['Available', 'Busy', 'Closed'].map((label, index) =>
h(SkySegmentedButton, { active: index === 1 }, () => label),
),
},
),
}),
)
expect(html).toContain('sky-segmented--compact')
expect(html).toContain('width:calc(33.3333% - 5.3333px)')
expect(controls).toMatch(
/\.sky-glass\.sky-segmented--navigation\.sky-segmented--compact\s*\{[^}]*height:\s*48px[^}]*min-height:\s*48px[^}]*padding-block:\s*2px/s,
)
expect(controls).toMatch(
/\.sky-segmented--navigation\.sky-segmented--compact \.sky-segmented-button\s*\{[^}]*height:\s*var\(--sky-touch-target, 44px\)[^}]*font-size:\s*15px[^}]*font-weight:\s*500/s,
)
expect(controls).toMatch(
/\.sky-segmented--compact \.sky-segmented__highlight\s*\{[^}]*top:\s*2px[^}]*bottom:\s*2px/s,
)
})
it('lets subnavbar search controls fill the available Konsta row', () => {
expect(controls).toMatch(
/\.sky-searchbar\s*\{[^}]*width:\s*100%[^}]*flex:\s*1 1 auto/s,
frontend/src/ui/controls/SkySegmented.vue
+3
View File
@@ -10,6 +10,7 @@ const props = withDefaults(
defineProps<{
activeIndex?: number
ariaLabel?: string
compact?: boolean
glassHighlight?: boolean
itemCount?: number
navigation?: boolean
@@ -21,6 +22,7 @@ const props = withDefaults(
{
activeIndex: 0,
ariaLabel: '',
compact: false,
glassHighlight: true,
itemCount: 0,
navigation: undefined,
@@ -65,6 +67,7 @@ const indicatorStyle = computed<CSSProperties | undefined>(() => {
class="sky-segmented"
:class="{
'sky-segmented--navigation': isNavigation,
'sky-segmented--compact': compact,
'sky-segmented--outline': outline,
'sky-segmented--raised': raised,
'sky-segmented--rounded': rounded,
frontend/src/views/apps/AppStoreApp.contract.test.ts
+6
View File
@@ -6,6 +6,10 @@ const source = readFileSync(
new URL('./AppStoreApp.vue', import.meta.url),
'utf8',
)
const navigationSource = source.slice(
source.indexOf('<SkyPillNavigation'),
source.indexOf('</SkyPillNavigation>') + '</SkyPillNavigation>'.length,
)
describe('AppStoreApp Sky navigation contract', () => {
it('uses only the first-party Sky UI surface', () => {
@@ -32,6 +36,8 @@ describe('AppStoreApp Sky navigation contract', () => {
expect(source).toContain(':item-count="tabs.length"')
expect(source).toContain('<SkySegmentedButton')
expect(source).toContain(':active="tab === item.id"')
expect(navigationSource).toContain('class="app-store-navigation__item"')
expect(navigationSource).not.toContain('compact')
})
it('keeps one scroll owner and accessible 44px app actions', () => {
frontend/src/views/apps/CompaniesApp.navigation.contract.test.ts
+21
View File
@@ -31,6 +31,7 @@ describe('CompaniesApp Sky pill navigation contract', () => {
expect(source).toContain(':data-active-tab="activeTab"')
expect(source).toContain(':item-count="3"')
expect(navigationSource.match(/<SkySegmentedButton\b/g)).toHaveLength(3)
expect(navigationSource).not.toContain('compact')
})
it('keeps directory, requests and work actions with unread badges', () => {
@@ -50,6 +51,7 @@ describe('CompaniesApp Sky pill navigation contract', () => {
it('uses the shared sliding Glass system for the request-state filter', () => {
expect(requestFilterSource).toContain('<SkySegmented')
expect(requestFilterSource).toContain('compact')
expect(requestFilterSource).toContain('navigation')
expect(requestFilterSource).toContain(':item-count="2"')
expect(requestFilterSource).toContain(
@@ -60,4 +62,23 @@ describe('CompaniesApp Sky pill navigation contract', () => {
)
expect(requestFilterSource.match(/<SkySegmentedButton\b/g)).toHaveLength(2)
})
it('uses compact sliding Glass for both availability controls', () => {
expect(source.match(/class="availability-segmented"/g)).toHaveLength(2)
expect(
source.match(
/:active-index="availabilityValues\.indexOf\(workCompany\.availability\)"/g,
),
).toHaveLength(2)
expect(
source.match(/:item-count="availabilityValues\.length"/g),
).toHaveLength(2)
expect(source.match(/\s+compact\s+navigation/g)).toHaveLength(3)
expect(source).toContain(
':aria-label="phone.t(\'Apps.companies.work.publicAvailability\')"',
)
expect(source).toContain(
':aria-label="phone.t(\'Apps.companies.manager.availability\')"',
)
})
})
frontend/src/views/apps/CompaniesApp.vue
+20 -2
View File
@@ -1201,7 +1201,9 @@ onBeforeUnmount(() => {
:active-index="requestList === 'open' ? 0 : 1"
:aria-label="phone.t('Apps.companies.tabs.requests')"
:item-count="2"
compact
navigation
rounded
>
<SkySegmentedButton
:active="requestList === 'open'"
@@ -1358,7 +1360,15 @@ onBeforeUnmount(() => {
<SkyBlockTitle>{{
phone.t('Apps.companies.work.publicAvailability')
}}</SkyBlockTitle>
<SkySegmented class="availability-segmented">
<SkySegmented
class="availability-segmented"
:active-index="availabilityValues.indexOf(workCompany.availability)"
:aria-label="phone.t('Apps.companies.work.publicAvailability')"
:item-count="availabilityValues.length"
compact
navigation
rounded
>
<SkySegmentedButton
v-for="availability in availabilityValues"
:key="availability"
@@ -1773,7 +1783,15 @@ onBeforeUnmount(() => {
<SkyBlockTitle>{{
phone.t('Apps.companies.manager.availability')
}}</SkyBlockTitle>
<SkySegmented class="availability-segmented">
<SkySegmented
class="availability-segmented"
:active-index="availabilityValues.indexOf(workCompany.availability)"
:aria-label="phone.t('Apps.companies.manager.availability')"
:item-count="availabilityValues.length"
compact
navigation
rounded
>
<SkySegmentedButton
v-for="availability in availabilityValues"
:key="availability"