[init/add] generic backend theme
This commit is contained in:
Daveanand Mannie
BIN
muk_web_theme-19/muk_web_appsbar/static/description/banner.png
Normal file
BIN
muk_web_theme-19/muk_web_appsbar/static/description/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 332 KiB |
BIN
muk_web_theme-19/muk_web_appsbar/static/description/icon.png
Normal file
BIN
muk_web_theme-19/muk_web_appsbar/static/description/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100pt" height="100pt"><defs><clipPath id="_clipPath_p05BZdPxwgLyL3qcn83FMFoQSwnyJ0q6"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_p05BZdPxwgLyL3qcn83FMFoQSwnyJ0q6)"><rect width="100" height="100" style="fill:rgb(0,0,0)" fill-opacity="0"/><g><path d="M 43.48 6.48 L 86.957 6.48 C 94.156 6.48 100 12.324 100 19.523 L 100 81.477 C 100 88.676 94.156 94.52 86.957 94.52 L 43.48 94.52 L 43.48 6.48 Z" style="stroke:none;fill:#FBB945;stroke-miterlimit:10;"/><path d="M 13.044 6.48 L 43.48 6.48 L 43.48 94.52 L 13.044 94.52 C 5.845 94.52 0 88.676 0 81.477 L 0 19.523 C 0 12.324 5.845 6.48 13.044 6.48 Z" style="stroke:none;fill:#144496;stroke-miterlimit:10;"/><path d="M 17.393 18.43 L 26.087 18.43 C 29.085 18.43 31.52 20.623 31.52 23.325 L 31.52 23.325 C 31.52 26.027 29.085 28.22 26.087 28.22 L 17.393 28.22 C 14.395 28.22 11.96 26.027 11.96 23.325 L 11.96 23.325 C 11.96 20.623 14.395 18.43 17.393 18.43 Z" style="stroke:none;fill:#088BF5;stroke-miterlimit:10;"/><path d="M 17.393 36.91 L 26.087 36.91 C 29.085 36.91 31.52 39.103 31.52 41.805 L 31.52 41.805 C 31.52 44.507 29.085 46.7 26.087 46.7 L 17.393 46.7 C 14.395 46.7 11.96 44.507 11.96 41.805 L 11.96 41.805 C 11.96 39.103 14.395 36.91 17.393 36.91 Z" style="stroke:none;fill:#088BF5;stroke-miterlimit:10;"/><path d="M 17.393 56.48 L 26.087 56.48 C 29.085 56.48 31.52 58.671 31.52 61.37 L 31.52 61.37 C 31.52 64.069 29.085 66.26 26.087 66.26 L 17.393 66.26 C 14.395 66.26 11.96 64.069 11.96 61.37 L 11.96 61.37 C 11.96 58.671 14.395 56.48 17.393 56.48 Z" style="stroke:none;fill:#088BF5;stroke-miterlimit:10;"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
155
muk_web_theme-19/muk_web_appsbar/static/description/index.html
Normal file
155
muk_web_theme-19/muk_web_appsbar/static/description/index.html
Normal file
@@ -0,0 +1,155 @@
|
||||
<section class="oe_container">
|
||||
<div class="oe_row oe_spaced">
|
||||
<h2 class="oe_slogan">MuK Colors</h2>
|
||||
<h3 class="oe_slogan mb-0">Customize your Odoo colors</h3>
|
||||
<img src="logo.png" style="width: 150px;" class="mx-auto center-block">
|
||||
<h4 class="oe_slogan mt-0" style="font-size: 23px">MuK IT GmbH - www.mukit.at</h4>
|
||||
<div class="mb-4" style="text-align: center;">
|
||||
<span
|
||||
class="btn btn-sm mb-2"
|
||||
style="font-size:14px; font-weight:500; background-color:#243742; color:#fff; cursor:default;"
|
||||
>
|
||||
<i class="fa fa-check"></i> Community
|
||||
</span>
|
||||
<span
|
||||
class="btn btn-sm mb-2"
|
||||
style="font-size:14px; font-weight:500; background-color:#5D8DA8; color:#fff; cursor:default;"
|
||||
>
|
||||
<i class="fa fa-check me-1"></i> Enterprise
|
||||
</span>
|
||||
</div>
|
||||
<div class="oe_demo oe_screenshot"
|
||||
style="max-width: 84%; margin: 16px 8%">
|
||||
<img src="screenshot.png">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="oe_container">
|
||||
<div class="oe_row oe_spaced">
|
||||
<div class="text-justify" style="max-width: 84%; margin: 16px 8%;">
|
||||
<h3 class="oe_slogan">Overview</h3>
|
||||
<p class="oe_mt32">
|
||||
This module adds a sidebar to the main screen. The sidebar has a list of all
|
||||
installed apps similar to the home menu to ease navigation. Each user can define
|
||||
in their profile the display of the sidebar. The options are to show the large
|
||||
version, the small version, or hide the sidebar completely. In addition, an image
|
||||
can be added for each company, which is displayed at the bottom of the sidebar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="oe_container">
|
||||
<div class="oe_row oe_spaced">
|
||||
<div class="text-justify" style="max-width:84%; margin:16px 8%">
|
||||
<h3 class="oe_slogan">Settings</h3>
|
||||
<p>
|
||||
To set up the sidebar, the user can open their preferences or profile, depending on
|
||||
whether the HR module is installed. The sidebar settings can now be changed via a
|
||||
corresponding field. You will need to refresh your browser for the change to take effect.
|
||||
</p>
|
||||
<div class="oe_demo oe_screenshot mt16">
|
||||
<img src="screenshot_user.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
class="oe_container oe_dark d-flex justify-content-around align-items-lg-center flex-column flex-lg-row">
|
||||
<div class="d-flex flex-column m-3 ms-lg-4">
|
||||
<h3 class="oe_slogan mb-3 mt-3 text-left">
|
||||
<i class="fa fa-comments mr8"></i>Want more?
|
||||
</h3>
|
||||
<p>
|
||||
Are you having troubles with your Odoo integration? Or do you feel
|
||||
your system lacks of essential features? <br>If your answer is <b>YES</b>
|
||||
to one of the above questions, feel free to contact us at anytime
|
||||
with your inquiry. <br>We are looking forward to discuss your
|
||||
needs and plan the next steps with you. <br>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="oe_slogan d-flex flex-column ms-1 me-1 ms-lg-4 me-lg-4 flex-grow-1">
|
||||
<a class="btn btn-primary btn-lg m-3"
|
||||
href="mailto:sale@mukit.at?subject=Request%20Quote"
|
||||
style="font-size: 1.2rem; position: relative; overflow: hidden;">
|
||||
<i class="fa fa-envelope me-1"></i>REQUEST QUOTE
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="oe_container">
|
||||
<div class="oe_row oe_spaced">
|
||||
<h3 class="oe_slogan">Our Services</h3>
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<div>
|
||||
<div style="width: 75px; height: 75px; border-radius: 100%; margin: auto">
|
||||
<img src="/service_development.png" style="width: 100%; border-radius: 100%">
|
||||
</div>
|
||||
<h3
|
||||
class="oe_slogan"
|
||||
style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 5px; color: #000 !important; opacity: 1 !important; line-height: 17px"
|
||||
>
|
||||
Odoo <br>Development
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div style="width: 75px; height: 75px; border-radius: 100%; margin: auto">
|
||||
<img src="/service_integration.png" style="width: 100%; border-radius: 100%">
|
||||
</div>
|
||||
<h3
|
||||
class="oe_slogan"
|
||||
style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 5px; color: #000 !important; opacity: 1 !important; line-height: 17px"
|
||||
>
|
||||
Odoo <br>Integration
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div style="width: 75px; height: 75px; border-radius: 100%; margin: auto">
|
||||
<img src="/service_infrastructure.png" style="width: 100%; border-radius: 100%">
|
||||
</div>
|
||||
<h3
|
||||
class="oe_slogan"
|
||||
style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 5px; color: #000 !important; opacity: 1 !important; line-height: 17px"
|
||||
>
|
||||
Odoo <br>Infrastructure
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div style="width: 75px; height: 75px; border-radius: 100%; margin: auto">
|
||||
<img src="/service_training.png" style="width: 100%; border-radius: 100%">
|
||||
</div>
|
||||
<h3
|
||||
class="oe_slogan"
|
||||
style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 5px; color: #000 !important; opacity: 1 !important; line-height: 17px"
|
||||
>
|
||||
Odoo <br>Training
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div style="width: 75px; height: 75px; border-radius: 100%; margin: auto">
|
||||
<img src="/service_support.png" style="width: 100%; border-radius: 100%">
|
||||
</div>
|
||||
<h3
|
||||
class="oe_slogan"
|
||||
style="text-align: center; font-size: 14px; width: 100%; margin: 0; margin-top: 5px; color: #000 !important; opacity: 1 !important; line-height: 17px"
|
||||
>
|
||||
Odoo <br>Support
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
BIN
muk_web_theme-19/muk_web_appsbar/static/description/logo.png
Normal file
BIN
muk_web_theme-19/muk_web_appsbar/static/description/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 358 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,7 @@
|
||||
@mixin mk-disable-scrollbar {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
$mk-appbar-color: #E4E4E4 !default;
|
||||
$mk-appbar-background: #3C3E4B !default;
|
||||
@@ -0,0 +1,6 @@
|
||||
$mk-appbar-color: #dee2e6 !default;
|
||||
$mk-appbar-active: $o-brand-primary !default;
|
||||
$mk-appbar-background: #111827 !default;
|
||||
|
||||
$mk-sidebar-large-width: 146px !default;
|
||||
$mk-sidebar-small-width: 46px !default;
|
||||
@@ -0,0 +1,34 @@
|
||||
import { url } from '@web/core/utils/urls';
|
||||
import { useService } from '@web/core/utils/hooks';
|
||||
import { user } from "@web/core/user";
|
||||
|
||||
import { Component, onWillUnmount } from '@odoo/owl';
|
||||
|
||||
export class AppsBar extends Component {
|
||||
static template = 'muk_web_appsbar.AppsBar';
|
||||
static props = {};
|
||||
setup() {
|
||||
this.appMenuService = useService('app_menu');
|
||||
if (user.activeCompany.has_appsbar_image) {
|
||||
this.sidebarImageUrl = url('/web/image', {
|
||||
model: 'res.company',
|
||||
field: 'appbar_image',
|
||||
id: user.activeCompany.id,
|
||||
});
|
||||
}
|
||||
const renderAfterMenuChange = () => {
|
||||
this.render();
|
||||
};
|
||||
this.env.bus.addEventListener(
|
||||
'MENUS:APP-CHANGED', renderAfterMenuChange
|
||||
);
|
||||
onWillUnmount(() => {
|
||||
this.env.bus.removeEventListener(
|
||||
'MENUS:APP-CHANGED', renderAfterMenuChange
|
||||
);
|
||||
});
|
||||
}
|
||||
_onAppClick(app) {
|
||||
return this.appMenuService.selectApp(app);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
.mk_apps_sidebar_panel {
|
||||
@include mk-disable-scrollbar();
|
||||
background-color: $mk-appbar-background;
|
||||
width: var(--mk-sidebar-width, 0);
|
||||
overflow-y: auto;
|
||||
.mk_apps_sidebar {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
white-space: nowrap;
|
||||
.mk_apps_sidebar_menu {
|
||||
padding: 0;
|
||||
> li > a {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
overflow: hidden;
|
||||
padding: 8px 11px;
|
||||
text-decoration: none;
|
||||
color: $mk-appbar-color;
|
||||
text-overflow: ellipsis;
|
||||
.mk_apps_sidebar_icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
> li.active > a {
|
||||
background: $mk-appbar-active;
|
||||
}
|
||||
> li:hover > a {
|
||||
background: $mk-appbar-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mk_sidebar_type_large {
|
||||
--mk-sidebar-width: #{$mk-sidebar-large-width};
|
||||
}
|
||||
|
||||
.mk_sidebar_type_small {
|
||||
--mk-sidebar-width: #{$mk-sidebar-small-width};
|
||||
.mk_apps_sidebar_name {
|
||||
display: none;
|
||||
}
|
||||
.mk_apps_sidebar_icon {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.mk_apps_sidebar_logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mk_sidebar_type_invisible {
|
||||
--mk-sidebar-width: 0;
|
||||
}
|
||||
|
||||
.editor_has_snippets_hide_backend_navbar,
|
||||
.o_home_menu_background,
|
||||
.o_fullscreen {
|
||||
--mk-sidebar-width: 0;
|
||||
}
|
||||
|
||||
.editor_has_snippets_hide_backend_navbar .mk_apps_sidebar_panel {
|
||||
transition: width 300ms;
|
||||
}
|
||||
|
||||
@include media-breakpoint-only(md) {
|
||||
.mk_sidebar_type_large {
|
||||
--mk-sidebar-width: #{$mk-sidebar-small-width};
|
||||
.mk_apps_sidebar_name {
|
||||
display: none;
|
||||
}
|
||||
.mk_apps_sidebar_icon {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.mk_apps_sidebar_logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.mk_sidebar_type_large, .mk_sidebar_type_small {
|
||||
--mk-sidebar-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.mk_sidebar_type_large, .mk_sidebar_type_small {
|
||||
--mk-sidebar-width: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="muk_web_appsbar.AppsBar">
|
||||
<div class="mk_apps_sidebar_panel">
|
||||
<div class="mk_apps_sidebar">
|
||||
<ul class="mk_apps_sidebar_menu">
|
||||
<t t-foreach="this.appMenuService.getAppsMenuItems()" t-as="app" t-key="app.id">
|
||||
<li t-attf-class="nav-item {{ app.id === this.appMenuService.getCurrentApp()?.id ? 'active' : '' }}">
|
||||
<a
|
||||
t-att-href="app.href"
|
||||
t-att-data-menu-id="app.id"
|
||||
t-att-data-menu-xmlid="app.xmlid"
|
||||
t-att-data-action-id="app.actionID"
|
||||
t-on-click.prevent="() => this._onAppClick(app)"
|
||||
class="nav-link"
|
||||
role="menuitem"
|
||||
>
|
||||
<img
|
||||
t-if="app.webIconData"
|
||||
class="mk_apps_sidebar_icon"
|
||||
t-att-src="app.webIconData"
|
||||
/>
|
||||
<img
|
||||
t-else=""
|
||||
class="mk_apps_sidebar_icon"
|
||||
src="/base/static/description/icon.png"
|
||||
/>
|
||||
<span class="mk_apps_sidebar_name">
|
||||
<t t-out="app.label"/>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</t>
|
||||
</ul>
|
||||
<div t-if="sidebarImageUrl" class="mk_apps_sidebar_logo p-2">
|
||||
<img class="img-fluid mx-auto" t-att-src="sidebarImageUrl" alt="Logo"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
@@ -0,0 +1,33 @@
|
||||
import { registry } from "@web/core/registry";
|
||||
import { user } from "@web/core/user";
|
||||
|
||||
import { computeAppsAndMenuItems, reorderApps } from "@web/webclient/menus/menu_helpers";
|
||||
|
||||
export const appMenuService = {
|
||||
dependencies: ["menu"],
|
||||
async start(env, { menu }) {
|
||||
return {
|
||||
getCurrentApp () {
|
||||
return menu.getCurrentApp();
|
||||
},
|
||||
getAppsMenuItems() {
|
||||
const menuItems = computeAppsAndMenuItems(
|
||||
menu.getMenuAsTree('root')
|
||||
)
|
||||
const apps = menuItems.apps;
|
||||
const menuConfig = JSON.parse(
|
||||
user.settings?.homemenu_config || 'null'
|
||||
);
|
||||
if (menuConfig) {
|
||||
reorderApps(apps, menuConfig);
|
||||
}
|
||||
return apps;
|
||||
},
|
||||
selectApp(app) {
|
||||
menu.selectMenu(app);
|
||||
}
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
registry.category("services").add("app_menu", appMenuService);
|
||||
@@ -0,0 +1,11 @@
|
||||
import { patch } from '@web/core/utils/patch';
|
||||
|
||||
import { WebClient } from '@web/webclient/webclient';
|
||||
import { AppsBar } from '@muk_web_appsbar/webclient/appsbar/appsbar';
|
||||
|
||||
patch(WebClient, {
|
||||
components: {
|
||||
...WebClient.components,
|
||||
AppsBar,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,29 @@
|
||||
.o_web_client {
|
||||
display: grid !important;
|
||||
grid-template-areas:
|
||||
"banner banner"
|
||||
"navbar navbar"
|
||||
"sidebar content"
|
||||
"components components";
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
grid-template-columns: auto 1fr;
|
||||
> div:has(#oe_neutralize_banner) {
|
||||
grid-area: banner;
|
||||
}
|
||||
> .o_navbar {
|
||||
grid-area: navbar;
|
||||
}
|
||||
> .mk_apps_sidebar_panel {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
> .o_action_manager {
|
||||
grid-area: content;
|
||||
}
|
||||
> .o-main-components-container {
|
||||
grid-area: components;
|
||||
}
|
||||
> iframe {
|
||||
grid-column: 1 / -1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t
|
||||
t-name="muk_web_appsbar.WebClient"
|
||||
t-inherit="web.WebClient"
|
||||
t-inherit-mode="extension"
|
||||
>
|
||||
<xpath expr="//NavBar" position="after">
|
||||
<AppsBar/>
|
||||
</xpath>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
Reference in New Issue
Block a user