implementação de mudança de interface
Signed-off-by: Rodrigo Bertoldo de Sousa Martins <rodrigo.sousa.577@gmail.com>
This commit is contained in:
1 parent
d445aa03cf
commit
d4e1b297ae
24 files changed
+1982
-47
No files matched your search
+46
-45
@@ -102,6 +102,21 @@ const component: ClosureComponent<Attrs> = () => {
|
||||
return { name, href, active: vnode.attrs["page"] === n };
|
||||
});
|
||||
|
||||
// --- BEGIN UNIFI THEME ---
|
||||
const NAV_ICONS: Record<string, string> = {
|
||||
"Overview": "nav-overview",
|
||||
"Devices": "nav-devices",
|
||||
"Faults": "nav-faults",
|
||||
"Presets": "nav-presets",
|
||||
"Provisions": "nav-provisions",
|
||||
"Virtual Parameters": "nav-virtualparams",
|
||||
"Files": "nav-files",
|
||||
"Config": "nav-config",
|
||||
"Permissions": "nav-permissions",
|
||||
"Users": "nav-users",
|
||||
};
|
||||
// --- END UNIFI THEME ---
|
||||
|
||||
return [
|
||||
<div>
|
||||
<TransitionRoot show={!!sidebarOpen} duration={300}>
|
||||
@@ -128,7 +143,8 @@ const component: ClosureComponent<Attrs> = () => {
|
||||
leaveFrom="translate-x-0"
|
||||
leaveTo="-translate-x-full"
|
||||
>
|
||||
<div class="relative flex-1 flex flex-col max-w-xs w-full bg-white">
|
||||
{/* --- BEGIN UNIFI THEME --- */}
|
||||
<div class="relative flex-1 flex flex-col max-w-xs w-full unifi-sidebar">
|
||||
<TransitionChild
|
||||
enter="ease-in-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
@@ -160,24 +176,21 @@ const component: ClosureComponent<Attrs> = () => {
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
class={classNames(
|
||||
item.active
|
||||
? "bg-stone-100 text-stone-900"
|
||||
: "text-stone-600 hover:bg-stone-50 hover:text-stone-900",
|
||||
"group flex items-center px-2 py-2 text-base font-medium rounded-md",
|
||||
)}
|
||||
class={`unifi-nav-item${item.active ? " active" : ""}`}
|
||||
>
|
||||
<Icon name={NAV_ICONS[item.name] || "nav-overview"} class="h-[18px] w-[18px]" />
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<div class="unifi-sidebar-footer">
|
||||
{window.username ? (
|
||||
<div class="flex items-center px-2 text-stone-600 text-base">
|
||||
<div class="unifi-user-info">
|
||||
<Icon name="nav-users" class="h-4 w-4" />
|
||||
{window.username}
|
||||
<button
|
||||
class="ml-auto text-base font-medium text-cyan-600 hover:text-cyan-500"
|
||||
class="unifi-logout-btn"
|
||||
onclick={(e) => {
|
||||
e.target.disabled = true;
|
||||
store
|
||||
@@ -197,19 +210,13 @@ const component: ClosureComponent<Attrs> = () => {
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div class="px-2">
|
||||
<a
|
||||
class="text-base font-medium text-cyan-700 hover:text-cyan-900"
|
||||
href=""
|
||||
>
|
||||
Log in
|
||||
</a>
|
||||
<div class="unifi-user-info">
|
||||
<a class="unifi-logout-btn" href="">Log in</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div class="text-sm font-mono text-stone-400 text-right p-2">
|
||||
v{VERSION}
|
||||
</div>
|
||||
<div class="unifi-version">v{VERSION}</div>
|
||||
{/* --- END UNIFI THEME --- */}
|
||||
</div>
|
||||
</TransitionChild>
|
||||
<div class="flex-shrink-0 w-14">
|
||||
@@ -219,35 +226,33 @@ const component: ClosureComponent<Attrs> = () => {
|
||||
</TransitionRoot>
|
||||
|
||||
{/* Static sidebar for desktop */}
|
||||
{/* --- BEGIN UNIFI THEME --- */}
|
||||
<div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
|
||||
<div class="flex-1 flex flex-col min-h-0 border-r border-stone-200 bg-white">
|
||||
<div class="flex-1 flex flex-col min-h-0 unifi-sidebar">
|
||||
<div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
|
||||
<div class="flex items-center flex-shrink-0 px-4">
|
||||
<img class="h-10 w-auto" src={LOGO_SVG} alt="GenieACS" />
|
||||
<div class="unifi-brand">
|
||||
<img src={LOGO_SVG} alt="GenieACS" />
|
||||
</div>
|
||||
<nav class="mt-5 flex-1 px-2 bg-white flex flex-col gap-1">
|
||||
<nav class="mt-5 flex-1 px-2 flex flex-col gap-1">
|
||||
{navigation.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
class={classNames(
|
||||
item.active
|
||||
? "bg-stone-100 text-stone-900"
|
||||
: "text-stone-600 hover:bg-stone-50 hover:text-stone-900",
|
||||
"group flex items-center px-2 py-2 text-sm font-medium rounded-md",
|
||||
)}
|
||||
class={`unifi-nav-item${item.active ? " active" : ""}`}
|
||||
>
|
||||
<Icon name={NAV_ICONS[item.name] || "nav-overview"} class="h-[18px] w-[18px]" />
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<div class="unifi-sidebar-footer">
|
||||
{window.username ? (
|
||||
<div class="flex items-center px-2 text-stone-600 text-sm">
|
||||
<div class="unifi-user-info">
|
||||
<Icon name="nav-users" class="h-4 w-4" />
|
||||
{window.username}
|
||||
<button
|
||||
class="ml-auto text-sm font-medium text-cyan-700 hover:text-cyan-900"
|
||||
class="unifi-logout-btn"
|
||||
onclick={(e) => {
|
||||
e.target.disabled = true;
|
||||
store
|
||||
@@ -267,23 +272,18 @@ const component: ClosureComponent<Attrs> = () => {
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div class="px-2">
|
||||
<a
|
||||
class="text-sm font-medium text-cyan-700 hover:text-cyan-900"
|
||||
href=""
|
||||
>
|
||||
Log in
|
||||
</a>
|
||||
<div class="unifi-user-info">
|
||||
<a class="unifi-logout-btn" href="">Log in</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div class="text-xs font-mono text-stone-400 text-right p-2">
|
||||
v{VERSION}
|
||||
</div>
|
||||
<div class="unifi-version">v{VERSION}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:pl-64 flex flex-col flex-1">
|
||||
<div class="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-stone-100">
|
||||
{/* --- END UNIFI THEME --- */}
|
||||
<div class="md:pl-64 flex flex-col flex-1 unifi-main-bg">
|
||||
{/* --- BEGIN UNIFI THEME --- */}
|
||||
<div class="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
|
||||
<button
|
||||
type="button"
|
||||
class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-stone-500 hover:text-stone-900 focus:outline-hidden focus:ring-2 focus:ring-inset focus:ring-cyan-500"
|
||||
@@ -297,6 +297,7 @@ const component: ClosureComponent<Attrs> = () => {
|
||||
<Icon name="menu" class="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
{/* --- END UNIFI THEME --- */}
|
||||
<main class="flex-1">
|
||||
<div class="py-6">
|
||||
<div class="px-4 sm:px-6 md:px-8">
|
||||
|
||||
Reference in new issue
Block a user