diff --git a/website_mobile_button/README.rst b/website_mobile_button/README.rst new file mode 100644 index 0000000000..0ed021f06e --- /dev/null +++ b/website_mobile_button/README.rst @@ -0,0 +1,140 @@ +===================== +Website Mobile Button +===================== + +.. + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! This file is generated by oca-gen-addon-readme !! + !! changes will be overwritten. !! + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! source digest: sha256:9478d256408e47bdf4e58b0835ef2bd2d3cb41f0c5b0a963e4c12ef04602444d + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png + :target: https://odoo-community.org/page/development-status + :alt: Beta +.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png + :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html + :alt: License: AGPL-3 +.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fwebsite-lightgray.png?logo=github + :target: https://github.com/OCA/website/tree/18.0/website_mobile_button + :alt: OCA/website +.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png + :target: https://translation.odoo-community.org/projects/website-18-0/website-18-0-website_mobile_button + :alt: Translate me on Weblate +.. |badge5| image:: https://img.shields.io/badge/runboat-Try%20me-875A7B.png + :target: https://runboat.odoo-community.org/builds?repo=OCA/website&target_branch=18.0 + :alt: Try me on Runboat + +|badge1| |badge2| |badge3| |badge4| |badge5| + +This module adds a fixed navigation bar at the bottom of the website on +mobile devices, similar to the tab bar of a mobile app. + +Features: + +- The bar can be enabled or disabled for each website from the website + editor. +- Buttons are fully editable with the website editor: icon or logo, + label, link, colors and size. +- Each button is a building block that can be dragged into the bar, + duplicated, reordered or removed. +- The whole button area is clickable, not only its text. +- Separators between buttons, background color and shadow of the bar are + configurable. +- The content is stored per website, so each website can have a + different bar. +- The bar is only displayed on small screens (below the ``lg`` Bootstrap + breakpoint). + +**Table of contents** + +.. contents:: + :local: + +Usage +===== + +To enable the bottom bar on a website: + +1. Go to the website you want to configure and click **Edit**. +2. Open the **Customize** tab. +3. Enable the **Mobile Bottom Bar** option. + +The bar is hidden on large screens, but it is always displayed while +editing so it can be configured from a desktop. Use the mobile preview +of the editor to see how it will look on a phone. + +To edit a button: + +1. Click on the icon, or double-click it to replace it with another icon + or with an image (logo). +2. Click on the label to change the text. +3. Click on the button outside the icon and the text (its padding area) + to select the whole button. In the options panel you can set: + + - **Link (URL)** and **Open in new tab**. + - **Background** and **Text / icon color**. + - **Label**: show or hide the text. + - **Icon size**. + +Do not use the editor link tool on the label: the link is set from the +button options, which makes the whole button clickable. + +To add, duplicate, move or remove buttons: + +1. Drag the **Bottom Bar Button** block from the blocks panel into the + bar, or use the duplicate and delete icons on a selected button. +2. Drag buttons to change their order. + +To configure the whole bar, click on the bar outside any button. The +options panel allows to change: + +- **Background** color. +- **Shadow**: none, small or medium. +- **Separators** between buttons: line, short line or none. + +Changes are saved per website. In a multi-website database, repeat the +configuration on each website. + +Bug Tracker +=========== + +Bugs are tracked on `GitHub Issues `_. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us to smash it by providing a detailed and welcomed +`feedback `_. + +Do not contact contributors directly about support or help with technical issues. + +Credits +======= + +Authors +------- + +* Dixmit + +Contributors +------------ + +- `Dixmit `__ + + - Enric Tobella + +Maintainers +----------- + +This module is maintained by the OCA. + +.. image:: https://odoo-community.org/logo.png + :alt: Odoo Community Association + :target: https://odoo-community.org + +OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use. + +This module is part of the `OCA/website `_ project on GitHub. + +You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute. diff --git a/website_mobile_button/__init__.py b/website_mobile_button/__init__.py new file mode 100644 index 0000000000..e69de29bb2 diff --git a/website_mobile_button/__manifest__.py b/website_mobile_button/__manifest__.py new file mode 100644 index 0000000000..a328bc6ad2 --- /dev/null +++ b/website_mobile_button/__manifest__.py @@ -0,0 +1,19 @@ +# Copyright 2026 Dixmit +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). + +{ + "name": "Website Mobile Button", + "summary": """Add a mobile button box for easier configuration""", + "version": "18.0.1.0.0", + "license": "AGPL-3", + "author": "Dixmit,Odoo Community Association (OCA)", + "website": "https://github.com/OCA/website", + "depends": ["website"], + "data": ["views/templates.xml"], + "assets": { + "web.assets_frontend": [ + "website_mobile_button/static/src/scss/*.scss", + ], + }, + "demo": [], +} diff --git a/website_mobile_button/pyproject.toml b/website_mobile_button/pyproject.toml new file mode 100644 index 0000000000..4231d0cccb --- /dev/null +++ b/website_mobile_button/pyproject.toml @@ -0,0 +1,3 @@ +[build-system] +requires = ["whool"] +build-backend = "whool.buildapi" diff --git a/website_mobile_button/readme/CONTRIBUTORS.md b/website_mobile_button/readme/CONTRIBUTORS.md new file mode 100644 index 0000000000..2c066ba7f4 --- /dev/null +++ b/website_mobile_button/readme/CONTRIBUTORS.md @@ -0,0 +1,2 @@ +- [Dixmit](https://www.dixmit.com) + - Enric Tobella diff --git a/website_mobile_button/readme/DESCRIPTION.md b/website_mobile_button/readme/DESCRIPTION.md new file mode 100644 index 0000000000..9c751324be --- /dev/null +++ b/website_mobile_button/readme/DESCRIPTION.md @@ -0,0 +1,11 @@ +This module adds a fixed navigation bar at the bottom of the website on mobile devices, similar to the tab bar of a mobile app. + +Features: + +- The bar can be enabled or disabled for each website from the website editor. +- Buttons are fully editable with the website editor: icon or logo, label, link, colors and size. +- Each button is a building block that can be dragged into the bar, duplicated, reordered or removed. +- The whole button area is clickable, not only its text. +- Separators between buttons, background color and shadow of the bar are configurable. +- The content is stored per website, so each website can have a different bar. +- The bar is only displayed on small screens (below the `lg` Bootstrap breakpoint). diff --git a/website_mobile_button/readme/USAGE.md b/website_mobile_button/readme/USAGE.md new file mode 100644 index 0000000000..6c8114d914 --- /dev/null +++ b/website_mobile_button/readme/USAGE.md @@ -0,0 +1,40 @@ +To enable the bottom bar on a website: + +1. Go to the website you want to configure and click **Edit**. +2. Open the **Customize** tab. +3. Enable the **Mobile Bottom Bar** option. + +The bar is hidden on large screens, but it is always displayed while +editing so it can be configured from a desktop. Use the mobile preview +of the editor to see how it will look on a phone. + +To edit a button: + +1. Click on the icon, or double-click it to replace it with another icon + or with an image (logo). +2. Click on the label to change the text. +3. Click on the button outside the icon and the text (its padding area) + to select the whole button. In the options panel you can set: + - **Link (URL)** and **Open in new tab**. + - **Background** and **Text / icon color**. + - **Label**: show or hide the text. + - **Icon size**. + +Do not use the editor link tool on the label: the link is set from the +button options, which makes the whole button clickable. + +To add, duplicate, move or remove buttons: + +1. Drag the **Bottom Bar Button** block from the blocks panel into the + bar, or use the duplicate and delete icons on a selected button. +2. Drag buttons to change their order. + +To configure the whole bar, click on the bar outside any button. The +options panel allows to change: + +- **Background** color. +- **Shadow**: none, small or medium. +- **Separators** between buttons: line, short line or none. + +Changes are saved per website. In a multi-website database, repeat the +configuration on each website. \ No newline at end of file diff --git a/website_mobile_button/static/description/icon.png b/website_mobile_button/static/description/icon.png new file mode 100644 index 0000000000..3a0328b516 Binary files /dev/null and b/website_mobile_button/static/description/icon.png differ diff --git a/website_mobile_button/static/description/index.html b/website_mobile_button/static/description/index.html new file mode 100644 index 0000000000..f0aa7d3cdf --- /dev/null +++ b/website_mobile_button/static/description/index.html @@ -0,0 +1,487 @@ + + + + + +Website Mobile Button + + + +
+

Website Mobile Button

+ + +

Beta License: AGPL-3 OCA/website Translate me on Weblate Try me on Runboat

+

This module adds a fixed navigation bar at the bottom of the website on +mobile devices, similar to the tab bar of a mobile app.

+

Features:

+
    +
  • The bar can be enabled or disabled for each website from the website +editor.
    • +
  • Buttons are fully editable with the website editor: icon or logo, +label, link, colors and size.
    • +
  • Each button is a building block that can be dragged into the bar, +duplicated, reordered or removed.
    • +
  • The whole button area is clickable, not only its text.
    • +
  • Separators between buttons, background color and shadow of the bar are +configurable.
    • +
  • The content is stored per website, so each website can have a +different bar.
    • +
  • The bar is only displayed on small screens (below the lg Bootstrap +breakpoint).
    • +
+

Table of contents

+ +
+

Usage

+

To enable the bottom bar on a website:

+
    +
  1. Go to the website you want to configure and click Edit.
    2. +
  2. Open the Customize tab.
    3. +
  3. Enable the Mobile Bottom Bar option.
    4. +
+

The bar is hidden on large screens, but it is always displayed while +editing so it can be configured from a desktop. Use the mobile preview +of the editor to see how it will look on a phone.

+

To edit a button:

+
    +
  1. Click on the icon, or double-click it to replace it with another icon +or with an image (logo).
    2. +
  2. Click on the label to change the text.
    3. +
  3. Click on the button outside the icon and the text (its padding area) +to select the whole button. In the options panel you can set:
      +
    • Link (URL) and Open in new tab.
      • +
    • Background and Text / icon color.
      • +
    • Label: show or hide the text.
      • +
    • Icon size.
      • +
    +
    4. +
+

Do not use the editor link tool on the label: the link is set from the +button options, which makes the whole button clickable.

+

To add, duplicate, move or remove buttons:

+
    +
  1. Drag the Bottom Bar Button block from the blocks panel into the +bar, or use the duplicate and delete icons on a selected button.
    2. +
  2. Drag buttons to change their order.
    3. +
+

To configure the whole bar, click on the bar outside any button. The +options panel allows to change:

+
    +
  • Background color.
    • +
  • Shadow: none, small or medium.
    • +
  • Separators between buttons: line, short line or none.
    • +
+

Changes are saved per website. In a multi-website database, repeat the +configuration on each website.

+
+
+

Bug Tracker

+

Bugs are tracked on GitHub Issues. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us to smash it by providing a detailed and welcomed +feedback.

+

Do not contact contributors directly about support or help with technical issues.

+
+
+

Credits

+
+

Authors

+
    +
  • Dixmit
    • +
+
+
+

Contributors

+ +
+
+

Maintainers

+

This module is maintained by the OCA.

+ +Odoo Community Association + +

OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use.

+

This module is part of the OCA/website project on GitHub.

+

You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

+
+
+
+ + diff --git a/website_mobile_button/static/src/scss/mobile_button.scss b/website_mobile_button/static/src/scss/mobile_button.scss new file mode 100644 index 0000000000..8c4741b0bb --- /dev/null +++ b/website_mobile_button/static/src/scss/mobile_button.scss @@ -0,0 +1,92 @@ +.o_mobile_bottom_bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 1030; + background: var(--bs-body-bg, #fff); + border-top: 1px solid rgba(0, 0, 0, 0.1); + + // Links inside the bar never look like links (no underline, inherit color) + a, + a:hover, + a:focus { + text-decoration: none !important; + color: inherit; + } + + .o_mobile_bar_row { + display: flex; + justify-content: space-around; + } + + // The button is the whole clickable area (the is stretched over it) + .o_mobile_bottom_bar_item { + position: relative; // needed by .stretched-link + flex: 1 1 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.15rem; + padding: 0.5rem 0; + font-size: 0.7rem; + text-align: center; + + // Logo as image instead of icon + img { + height: 1.5rem; + width: auto; + } + } +} + +// Separators between buttons (default: full-height line) +.o_mobile_bottom_bar .o_mobile_bottom_bar_item + .o_mobile_bottom_bar_item { + border-left: 1px solid rgba(0, 0, 0, 0.12); +} + +// Short centered line +.o_mobile_bottom_bar.o_mobile_bar_sep_short + .o_mobile_bottom_bar_item + + .o_mobile_bottom_bar_item { + border-left: 0; + + &::before { + content: ""; + position: absolute; + left: 0; + top: 25%; + bottom: 25%; + width: 1px; + background: rgba(0, 0, 0, 0.2); + } +} + +// No separator +.o_mobile_bottom_bar.o_mobile_bar_sep_none + .o_mobile_bottom_bar_item + + .o_mobile_bottom_bar_item { + border-left: 0; +} + +@include media-breakpoint-down(lg) { + // Reserve space for the bar only on the last block of the page (the footer, + // or
when there is no footer), so no white band appears in between. + #wrapwrap > footer, + #wrapwrap > main:has(+ .o_mobile_bottom_bar) { + padding-bottom: 4rem; + } +} + +// Editor: show the bar on desktop, and let clicks reach the icon/text/button +// (instead of the invisible stretched link on top of them) +.editor_enable { + .o_mobile_bottom_bar { + display: block !important; + } + .o_mobile_bar_link, + .o_mobile_bar_link::after { + pointer-events: none; + } +} diff --git a/website_mobile_button/views/templates.xml b/website_mobile_button/views/templates.xml new file mode 100644 index 0000000000..8722e05f62 --- /dev/null +++ b/website_mobile_button/views/templates.xml @@ -0,0 +1,190 @@ + + + + + + + + + + + + + +