mirror of
https://github.com/phishingclub/phishingclub.git
synced 2026-02-12 16:12:44 +00:00
make company context more visible
Signed-off-by: Ronni Skansing <rskansing@gmail.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user