Initial commit
This commit is contained in:
gsinghpal
Binary file not shown.
|
After Width: | Height: | Size: 494 KiB |
@@ -0,0 +1,13 @@
|
||||
// Colors
|
||||
|
||||
$mk_color_appsmenu_text: #F8F9FA;
|
||||
$mk_color_appbar_text: #DEE2E6;
|
||||
$mk_color_appbar_active: #5D8DA8;
|
||||
$mk_color_appbar_background: #111827;
|
||||
|
||||
// Override
|
||||
|
||||
$mk-appsmenu-color: $mk_color_appsmenu_text;
|
||||
$mk-appbar-color: $mk_color_appbar_text;
|
||||
$mk-appbar-active: $mk_color_appbar_active;
|
||||
$mk-appbar-background: $mk_color_appbar_background;
|
||||
@@ -0,0 +1 @@
|
||||
$o-navbar-badge-bg: $o-brand-primary;
|
||||
@@ -0,0 +1,8 @@
|
||||
.o_form_view {
|
||||
&:not(.o_field_highlight) .o_field_widget:not(.o_field_invalid):not(.o_field_highlight) .o_input:not(:hover):not(:focus) {
|
||||
--o-input-border-color: #{$gray-200};
|
||||
}
|
||||
&:not(.o_field_highlight) .o_required_modifier.o_field_widget:not(.o_field_invalid):not(.o_field_highlight) .o_input:not(:hover):not(:focus) {
|
||||
--o-input-border-color: #{$gray-400};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import { useEffect } from "@odoo/owl";
|
||||
import { user } from "@web/core/user";
|
||||
import { url } from "@web/core/utils/urls";
|
||||
import { useBus, useService } from "@web/core/utils/hooks";
|
||||
|
||||
import { Dropdown } from "@web/core/dropdown/dropdown";
|
||||
|
||||
export class AppsMenu extends Dropdown {
|
||||
setup() {
|
||||
super.setup();
|
||||
this.commandPaletteOpen = false;
|
||||
this.commandService = useService("command");
|
||||
if (user.activeCompany.has_background_image) {
|
||||
this.imageUrl = url('/web/image', {
|
||||
model: 'res.company',
|
||||
field: 'background_image',
|
||||
id: user.activeCompany.id,
|
||||
});
|
||||
} else {
|
||||
this.imageUrl = '/muk_web_theme/static/src/img/background.png';
|
||||
}
|
||||
useEffect(
|
||||
(isOpen) => {
|
||||
if (isOpen) {
|
||||
const openMainPalette = (ev) => {
|
||||
if (
|
||||
!this.commandServiceOpen &&
|
||||
ev.key.length === 1 &&
|
||||
!ev.ctrlKey &&
|
||||
!ev.altKey
|
||||
) {
|
||||
this.commandService.openMainPalette(
|
||||
{ searchValue: `/${ev.key}` },
|
||||
() => { this.commandPaletteOpen = false; }
|
||||
);
|
||||
this.commandPaletteOpen = true;
|
||||
}
|
||||
}
|
||||
window.addEventListener("keydown", openMainPalette);
|
||||
return () => {
|
||||
window.removeEventListener("keydown", openMainPalette);
|
||||
this.commandPaletteOpen = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
() => [this.state.isOpen]
|
||||
);
|
||||
useBus(this.env.bus, "ACTION_MANAGER:UI-UPDATED", () => {
|
||||
if (this.state.close) {
|
||||
this.state.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
onOpened() {
|
||||
super.onOpened();
|
||||
if (this.menuRef && this.menuRef.el) {
|
||||
this.menuRef.el.style.backgroundImage = `url('${this.imageUrl}')`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
.o_navbar_apps_menu .dropdown-toggle {
|
||||
padding: 0px 14px !important;
|
||||
}
|
||||
|
||||
.mk_app_menu.dropdown-menu {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: wrap !important;
|
||||
align-content: flex-start;
|
||||
right: 0 !important;
|
||||
left: 0 !important;
|
||||
bottom: 0 !important;
|
||||
max-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
user-select: none;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
background: {
|
||||
size: cover;
|
||||
repeat: no-repeat;
|
||||
position: center;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: {
|
||||
left: 20vw;
|
||||
right: 20vw;
|
||||
}
|
||||
}
|
||||
.o_app {
|
||||
margin-top: 20px;
|
||||
width: percentage(1/3);
|
||||
background: none !important;
|
||||
@include media-breakpoint-up(sm) {
|
||||
width: percentage(1/4);
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
width: percentage(1/6);
|
||||
}
|
||||
> a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.mk_app_icon {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
max-width: 70px;
|
||||
border-radius: 0.375rem;
|
||||
background-color: $white;
|
||||
transform-origin: center bottom;
|
||||
transition: box-shadow ease-in 0.1s, transform ease-in 0.1s;
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
.mk_app_name {
|
||||
color: $mk-appsmenu-color;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.mk_app_icon {
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 8px 8px rgba(0, 0, 0, 0.03);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { patch } from '@web/core/utils/patch';
|
||||
import { useService } from '@web/core/utils/hooks';
|
||||
|
||||
import { NavBar } from '@web/webclient/navbar/navbar';
|
||||
import { AppsMenu } from "@muk_web_theme/webclient/appsmenu/appsmenu";
|
||||
|
||||
patch(NavBar.prototype, {
|
||||
setup() {
|
||||
super.setup();
|
||||
this.appMenuService = useService('app_menu');
|
||||
},
|
||||
});
|
||||
|
||||
patch(NavBar, {
|
||||
components: {
|
||||
...NavBar.components,
|
||||
AppsMenu,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
.o_main_navbar {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t
|
||||
t-name="muk_web_theme.NavBar.AppsMenu"
|
||||
t-inherit="web.NavBar.AppsMenu"
|
||||
t-inherit-mode="extension"
|
||||
>
|
||||
<xpath expr="//Dropdown" position="replace">
|
||||
<AppsMenu menuClass="'mk_app_menu'">
|
||||
<button data-hotkey="h" title="Home Menu">
|
||||
<i class="oi oi-apps" />
|
||||
</button>
|
||||
<t t-set-slot="content">
|
||||
<DropdownItem
|
||||
t-foreach="this.appMenuService.getAppsMenuItems()"
|
||||
t-as="app"
|
||||
t-key="app.id"
|
||||
class="'o_app'"
|
||||
attrs="{ href: app.href, 'data-menu-xmlid': app.xmlid, 'data-section': app.id }"
|
||||
onSelected="() => this.onNavBarDropdownItemSelection(app)"
|
||||
closingMode="'none'"
|
||||
>
|
||||
<a
|
||||
t-att-href="app.href"
|
||||
t-on-click.prevent=""
|
||||
>
|
||||
<img
|
||||
t-if="app.webIconData"
|
||||
class="mk_app_icon"
|
||||
t-att-src="app.webIconData"
|
||||
/>
|
||||
<img
|
||||
t-else=""
|
||||
class="mk_app_icon"
|
||||
src="/base/static/description/icon.png"
|
||||
/>
|
||||
<span class="mk_app_name">
|
||||
<t t-out="app.label"/>
|
||||
</span>
|
||||
</a>
|
||||
</DropdownItem>
|
||||
</t>
|
||||
</AppsMenu>
|
||||
</xpath>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
Reference in New Issue
Block a user