make company context more visible

Signed-off-by: Ronni Skansing <rskansing@gmail.com>
This commit is contained in:
Ronni Skansing
2026-01-29 21:51:01 +01:00
parent 25c758b999
commit e28add0383
3 changed files with 70 additions and 33 deletions

View File

@@ -1,6 +1,7 @@
<script>
import { AppStateService } from '$lib/service/appState';
import { onMount } from 'svelte';
import { showIsLoading } from '$lib/store/loading';
let context = {
current: '',
@@ -20,34 +21,72 @@
unsub();
};
});
// exit to global context
function exitCompanyView() {
showIsLoading();
appState.clearContext();
localStorage.setItem('context', '');
location.reload();
}
$: isCompanyView = context.current === AppStateService.CONTEXT.COMPANY && context.companyName;
</script>
{#if context.current === AppStateService.CONTEXT.COMPANY && context.companyName}
<div
class="sticky top-0 w-full bg-blue-900 dark:bg-gradient-to-r dark:from-emerald-700 dark:to-teal-700 border-b border-blue-800/50 dark:border-emerald-600/50 z-30"
>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-center py-1">
<div class="flex items-center space-x-2 text-xs">
<svg
class="w-3 h-3 text-blue-100 dark:text-emerald-100"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
{#if isCompanyView}
<!-- top banner -->
<div class="w-full h-9 bg-active-blue dark:bg-active-blue z-30 company-banner">
<div class="h-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-center gap-4 h-full">
<div class="flex items-center space-x-2">
<span class="text-white/70 font-medium text-sm"> Viewing as </span>
<span class="text-white font-semibold text-sm">
{context.companyName}
</span>
</div>
<!-- exit button -->
<button
on:click={exitCompanyView}
class="flex items-center gap-1 px-2 py-0.5 text-white/50 hover:text-white/80 text-xs transition-colors duration-200"
title="Exit company view"
>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
<span class="text-blue-100 dark:text-emerald-100 font-medium">Viewing as:</span>
<span class="text-white dark:text-white font-semibold">
{context.companyName}
</span>
</div>
</button>
</div>
</div>
</div>
{/if}
<!-- border frame around entire viewport when in company view -->
{#if isCompanyView}
<div class="company-view-frame"></div>
{/if}
<style>
.company-banner {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.company-view-frame {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 3px solid #1e3fa8;
pointer-events: none;
z-index: 9999;
}
:global(.dark) .company-view-frame {
border-color: #1e3fa8;
}
</style>

View File

@@ -195,8 +195,8 @@
class:transition-all={!instantCollapse}
class:w-40={isExpanded}
class:w-12={!isExpanded}
class:!top-[89px]={hasCompanySelected}
class:!max-h-[calc(100vh-6rem)]={hasCompanySelected}
class:!top-[100px]={hasCompanySelected}
class:!max-h-[calc(100vh-100px)]={hasCompanySelected}
>
{#if !isPinned}
<div

View File

@@ -104,18 +104,16 @@ export class AppStateService {
}
clearContext() {
/*
this.#_store.update(state => {
return {
...state,
context: {
current: AppStateService.CONTEXT.SHARED,
companyName: null,
companyID: null
}
}
})
*/
this.#_store.update((state) => {
return {
...state,
context: {
current: AppStateService.CONTEXT.SHARED,
companyName: null,
companyID: null
}
};
});
}
/**