Initial commit: Odoo 18.0-20251222 extra-addons

web_responsive/static/src/components/apps_menu_item/apps_menu_item.esm.js

@@ -0,0 +1,52 @@
+/* Copyright 2018 Tecnativa - Jairo Llopis
+ * Copyright 2021 ITerra - Sergey Shebanin
+ * Copyright 2023 Onestein - Anjeel Haria
+ * Copyright 2023 Taras Shabaranskyi
+ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
+
+import {Component, onWillUpdateProps} from "@odoo/owl";
+import {getWebIconData} from "@web_responsive/components/apps_menu_tools.esm";
+
+export class AppMenuItem extends Component {
+    setup() {
+        super.setup();
+        this.webIconData = getWebIconData(this.props.app);
+        onWillUpdateProps(this.onUpdateProps);
+    }
+
+    get isActive() {
+        const {currentApp} = this.props;
+        return currentApp && currentApp.id === this.props.app.id;
+    }
+
+    get className() {
+        const classItems = ["o-app-menu-item"];
+        if (this.isActive) {
+            classItems.push("active");
+        }
+        return classItems.join(" ");
+    }
+
+    onUpdateProps(nextProps) {
+        this.webIconData = getWebIconData(nextProps.app);
+    }
+
+    onClick() {
+        if (typeof this.props.onClick === "function") {
+            this.props.onClick(this.props.app);
+        }
+    }
+}
+
+Object.assign(AppMenuItem, {
+    template: "web_responsive.AppMenuItem",
+    props: {
+        app: Object,
+        href: String,
+        currentApp: {
+            type: Object,
+            optional: true,
+        },
+        onClick: Function,
+    },
+});

web_responsive/static/src/components/apps_menu_item/apps_menu_item.scss

@@ -0,0 +1,76 @@
+/* Copyright 2018 Tecnativa - Jairo Llopis
+ * Copyright 2021 ITerra - Sergey Shebanin
+ * Copyright 2023 Taras Shabaranskyi
+ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
+
+:root {
+    .o_grid_apps_menu[data-theme="milk"] {
+        --app-menu-text-color: #{$app-menu-text-color};
+        --app-menu-text-shadow: 1px 1px 1px #{rgba($white, 0.4)};
+        --app-menu-hover-background: #{rgba(white, 0.4)};
+    }
+
+    .o_grid_apps_menu[data-theme="community"] {
+        --app-menu-text-color: white;
+        --app-menu-text-shadow: 1px 1px 1px #{rgba(black, 0.4)};
+        --app-menu-hover-background: #{rgba(white, 0.2)};
+    }
+}
+
+.o-app-menu-item {
+    display: flex;
+    flex-direction: column;
+    border-radius: 4px;
+    gap: 0.25rem;
+    transition:
+        ease box-shadow,
+        transform,
+        0.3s;
+    background: unset;
+    outline: unset;
+    border: unset;
+    padding: 0.75rem 0.5rem;
+    justify-content: flex-start;
+    align-items: center;
+    white-space: normal;
+    user-select: none;
+    height: -moz-available;
+    height: max-content;
+
+    &__name {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        font-size: 1em;
+        text-shadow: var(--app-menu-text-shadow);
+        color: var(--app-menu-text-color);
+        text-align: center;
+    }
+
+    &__icon {
+        height: auto;
+        max-width: 64px;
+        width: 64px;
+        aspect-ratio: 1;
+        padding: 10px;
+        background-color: white;
+        box-shadow: $app-menu-box-shadow;
+    }
+
+    &__active {
+        position: absolute;
+        bottom: 2px;
+        right: 2px;
+        text-shadow: 0 0 2px rgba(250, 250, 250, 0.6);
+        color: $app-menu-text-color;
+    }
+
+    &:focus,
+    &:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 6px 12px -8px transparentize($app-menu-text-color, 0.6);
+        background-color: var(--app-menu-hover-background) !important;
+        backdrop-filter: blur(2px);
+    }
+}

web_responsive/static/src/components/apps_menu_item/apps_menu_item.xml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!-- Copyright 2018 Tecnativa - Jairo Llopis
+     Copyright 2021 ITerra - Sergey Shebanin
+     Copyright 2023 Onestein - Anjeel Haria
+     Copyright 2023 Taras Shabaranskyi
+     License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
+<templates>
+    <t t-name="web_responsive.AppMenuItem">
+        <a
+            t-att-class="className"
+            role="button"
+            t-att-data-menu-xmlid="props.app.xmlid"
+            t-att-href="props.href"
+            t-on-click="onClick"
+            draggable="false"
+        >
+            <div
+                class="position-relative o_app"
+                t-att-data-menu-xmlid="props.app.xmlid"
+            >
+                <img
+                    class="o-app-menu-item__icon rounded-3"
+                    draggable="false"
+                    t-att-src="webIconData"
+                />
+                <i t-if="isActive" class="fa fa-check-circle o-app-menu-item__active" />
+            </div>
+            <span class="o-app-menu-item__name" t-att-title="props.app.name">
+                <t t-out="props.app.name" />
+            </span>
+        </a>
+    </t>
+</templates>