mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
[MIG] web_responsive: Migrate to v12 and refactor
This migration includes a full refactoring to make this module more maintainable. Some things that have changed: - Removed external libraries. - Change Less for Scss. - Reduce ES and XML to the minimal required needs. - Implement as much features as possible with just Scss. - Remove copyright from `__init__.py` files. - Trigger the new hotkeys system from Odoo v12 with `Shift+Alt` instead of just `Alt`, and restore some good old hotkeys (`E` for "Edit", `D` for "Discard", and `A` for "Apps menu"). See https://github.com/odoo/odoo/issues/30068 on the matter. - Control panel breadcrumbs are collapsed into a single backwards icon. - Add FA icons to most common buttons in control panel. - Hide text in XS for those buttons, to have a slicker phone experience. - Lots of gifs in the README!
This commit is contained in:
Jairo Llopis
@@ -1,16 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Copyright 2017 LasLabs Inc.
|
||||
License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
|
||||
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="AppDrawerMenuSearchResults">
|
||||
<li class="menu-search-element" t-foreach="menus" t-as="menu">
|
||||
<a t-att-id="menu.id"
|
||||
t-attf-href="#action={{ menu.action and menu.action.split(',')[1] or ''}}&menu_id={{ menu.id }}">
|
||||
<h2 class="text-center">
|
||||
<t t-esc="menu.display_name" />
|
||||
</h2>
|
||||
</a>
|
||||
</li>
|
||||
</t>
|
||||
</templates>
|
||||
58
web_responsive/static/src/xml/apps.xml
Normal file
58
web_responsive/static/src/xml/apps.xml
Normal file
@@ -0,0 +1,58 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Copyright 2018 Tecnativa - Jairo Llopis
|
||||
License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
|
||||
|
||||
<template>
|
||||
<t t-extend="AppsMenu">
|
||||
<!-- App icons should be more than a text -->
|
||||
<t t-jquery=".o_app > t" t-operation="replace">
|
||||
<t t-call="web_responsive.AppIcon"/>
|
||||
</t>
|
||||
|
||||
<!-- Same hotkey as in EE -->
|
||||
<t t-jquery=".full" t-operation="attributes">
|
||||
<attribute name="accesskey">a</attribute>
|
||||
</t>
|
||||
|
||||
<!-- Search bar -->
|
||||
<t t-jquery="[t-as=app]" t-operation="before">
|
||||
<div class="search-container form-row align-items-center mb-4 col-12">
|
||||
<div class="search-input col-md-10 ml-auto mr-auto mb-2">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fa fa-search"/>
|
||||
</div>
|
||||
</div>
|
||||
<input type="search"
|
||||
placeholder="Search menus..."
|
||||
class="form-control"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-results col-md-10 ml-auto mr-auto"/>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<!-- Separate app icon template, for easier inheritance -->
|
||||
<t t-name="web_responsive.AppIcon">
|
||||
<img class="o-app-icon"
|
||||
t-attf-src="data:image/png;base64,#{app.web_icon_data}"/>
|
||||
<span class="o-app-name">
|
||||
<t t-esc="app.name"/>
|
||||
</span>
|
||||
</t>
|
||||
|
||||
<!-- A search result -->
|
||||
<t t-name="web_responsive.MenuSearchResults">
|
||||
<t t-foreach="results" t-as="result">
|
||||
<t t-set="menu" t-value="widget._menuInfo(result.original)"/>
|
||||
<div t-attf-class="o-menu-search-result dropdown-item col-12 ml-auto mr-auto #{result_first ? 'active' : ''}"
|
||||
t-attf-style="background-image:url('data:image/png;base64,#{menu.web_icon_data}')"
|
||||
t-att-data-menu-id="menu.id"
|
||||
t-att-data-action-id="menu.action_id"
|
||||
t-att-data-parent-id="menu.parent_id[0]"
|
||||
t-raw="result.string"/>
|
||||
</t>
|
||||
</t>
|
||||
</template>
|
||||
@@ -2,63 +2,140 @@
|
||||
<!--
|
||||
Copyright 2017 LasLabs Inc.
|
||||
Copyright 2018 Alexandre Díaz
|
||||
Copyright 2018 Tecnativa - Jairo Llopis
|
||||
License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
|
||||
-->
|
||||
|
||||
<templates id="form_view" xml:space="preserve">
|
||||
|
||||
<t t-extend="FormView.buttons">
|
||||
<t t-jquery="button[accesskey='a']" t-operation="attributes">
|
||||
<attribute name="accesskey">e</attribute>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<t t-extend="FieldStatus.content.button">
|
||||
<t t-jquery="button" t-operation="replace">
|
||||
<button type="button" t-att-data-value="i.id" t-att-disabled="disabled ? 'disabled' : undefined"
|
||||
t-attf-class="btn btn-sm o_arrow_button btn-#{i.selected ? 'primary' : 'default'}#{disabled ? ' disabled' : ''} #{button_css or ''}">
|
||||
<t t-esc="i.display_name"/>
|
||||
</button>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
|
||||
<t t-extend="FieldStatus.content">
|
||||
<t t-jquery="[t-if='selection_folded.length']" t-operation="replace">
|
||||
<t t-if="selections && has_folded">
|
||||
<ul class="dropdown-menu o-status-more hidden-lg hidden-md" role="menu">
|
||||
<t t-set="button_css" t-value="'hidden-lg hidden-md'" />
|
||||
<li t-foreach="selections" t-as="i">
|
||||
<t t-if="!i.selected" t-call="FieldStatus.content.button"/>
|
||||
</li>
|
||||
</ul>
|
||||
<button type="button" class="btn btn-sm o_arrow_button btn-default dropdown-toggle hidden-lg hidden-md" data-toggle="dropdown" aria-expanded="false">More <span class="caret"/></button>
|
||||
</t>
|
||||
</t>
|
||||
<t t-jquery="[t-foreach='selection_unfolded.reverse()']" t-operation="replace">
|
||||
<t t-if="selections">
|
||||
<t t-foreach="selections.reverse()" t-as="i">
|
||||
<t t-set="button_css" t-value="i.selected?'':'hidden-xs hidden-sm'" />
|
||||
<t t-call="FieldStatus.content.button"/>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
<!-- Template for buttons that display only the icon in xs -->
|
||||
<t t-name="web_responsive.icon_button">
|
||||
<i t-attf-class="fa fa-#{icon}"
|
||||
t-att-title="label"/>
|
||||
<span class="d-none d-sm-inline" t-esc="label"/>
|
||||
</t>
|
||||
|
||||
<t t-name="web_responsive.MenuStatusbarButtons">
|
||||
<div class="o_statusbar_buttons_container">
|
||||
<div class="o_statusbar_buttons_base hidden-xs hidden-sm">
|
||||
<!-- Normal Buttons Zone -->
|
||||
</div>
|
||||
<div class="dropdown o_statusbar_buttons_dropdown hidden-lg hidden-md">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuHeader" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
Task
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenuHeader">
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="o_statusbar_buttons_dropdown btn btn-secondary dropdown-toggle"
|
||||
type="button"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<t t-call="web_responsive.icon_button">
|
||||
<t t-set="icon" t-value="'cogs'"/>
|
||||
<t t-set="label">Quick actions</t>
|
||||
</t>
|
||||
</button>
|
||||
<!-- A div.o_statusbar_buttons.dropdown-menu
|
||||
is appended here from JS -->
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-extend="FormView.buttons">
|
||||
<!-- Change "Edit" button hotkey to "E" -->
|
||||
<t t-jquery=".o_form_button_edit" t-operation="attributes">
|
||||
<attribute name="accesskey">e</attribute>
|
||||
</t>
|
||||
|
||||
<!-- Change "Discard" button hotkey to "D" -->
|
||||
<t t-jquery=".o_form_button_cancel" t-operation="attributes">
|
||||
<attribute name="accesskey">d</attribute>
|
||||
</t>
|
||||
|
||||
<!-- Add responsive icons to buttons -->
|
||||
<t t-jquery=".o_form_button_edit" t-operation="inner">
|
||||
<t t-call="web_responsive.icon_button">
|
||||
<t t-set="icon" t-value="'pencil'"/>
|
||||
<t t-set="label">Edit</t>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<t t-jquery=".o_form_button_create" t-operation="inner">
|
||||
<t t-call="web_responsive.icon_button">
|
||||
<t t-set="icon" t-value="'plus'"/>
|
||||
<t t-set="label">Create</t>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<t t-jquery=".o_form_button_save" t-operation="inner">
|
||||
<t t-call="web_responsive.icon_button">
|
||||
<t t-set="icon" t-value="'check'"/>
|
||||
<t t-set="label">Save</t>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<t t-jquery=".o_form_button_cancel" t-operation="inner">
|
||||
<t t-call="web_responsive.icon_button">
|
||||
<t t-set="icon" t-value="'times'"/>
|
||||
<t t-set="label">Discard</t>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<t t-extend="KanbanView.buttons">
|
||||
<!-- Add responsive icons to buttons -->
|
||||
<t t-jquery="button" t-operation="inner">
|
||||
<t t-call="web_responsive.icon_button">
|
||||
<t t-set="icon" t-value="'plus'"/>
|
||||
<t t-set="label" t-value="create_text || _t('Create')"/>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<t t-extend="ListView.buttons">
|
||||
<!-- Change "Discard" button hotkey to "D" -->
|
||||
<t t-jquery=".o_list_button_discard" t-operation="attributes">
|
||||
<attribute name="accesskey">d</attribute>
|
||||
</t>
|
||||
|
||||
<!-- Add responsive icons to buttons -->
|
||||
<t t-jquery=".o_list_button_add" t-operation="inner">
|
||||
<t t-call="web_responsive.icon_button">
|
||||
<t t-set="icon" t-value="'plus'"/>
|
||||
<t t-set="label">Create</t>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<t t-jquery=".o_list_button_save" t-operation="inner">
|
||||
<t t-call="web_responsive.icon_button">
|
||||
<t t-set="icon" t-value="'check'"/>
|
||||
<t t-set="label">Save</t>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<t t-jquery=".o_list_button_discard" t-operation="inner">
|
||||
<t t-call="web_responsive.icon_button">
|
||||
<t t-set="icon" t-value="'times'"/>
|
||||
<t t-set="label">Discard</t>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<t t-extend="Sidebar">
|
||||
<!-- Replace some common sections by icons in mobile -->
|
||||
<t t-jquery=".o_dropdown_toggler_btn t[t-esc='section.label']"
|
||||
t-operation="replace">
|
||||
<t t-set="label" t-value="section.label"/>
|
||||
<t t-if="section.name == 'files'">
|
||||
<t t-call="web_responsive.icon_button">
|
||||
<t t-set="icon" t-value="'paperclip'"/>
|
||||
</t>
|
||||
</t>
|
||||
<t t-elif="section.name == 'print'">
|
||||
<t t-call="web_responsive.icon_button">
|
||||
<t t-set="icon" t-value="'print'"/>
|
||||
</t>
|
||||
</t>
|
||||
<t t-elif="section.name == 'other'">
|
||||
<t t-call="web_responsive.icon_button">
|
||||
<t t-set="icon" t-value="'wrench'"/>
|
||||
</t>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<span t-esc="label"/>
|
||||
</t>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Copyright 2017 Jairo Llopis <jairo.llopis@tecnativa.com>
|
||||
<!-- Copyright 2017-2018 Tecnativa - Jairo Llopis
|
||||
License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
|
||||
|
||||
<template>
|
||||
<t t-extend="SwitchCompanyMenu">
|
||||
<t t-jquery=".oe_topbar_name" t-operation="before">
|
||||
<i class="fa fa-building visible-xs-inline-block"/>
|
||||
<t t-extend="Menu">
|
||||
<t t-jquery=".o_menu_apps" t-operation="after">
|
||||
<!-- Hamburger button to show submenus in sm screens -->
|
||||
<button class="o-menu-toggle d-md-none"
|
||||
data-toggle="collapse"
|
||||
data-target=".o_main_navbar .o_menu_sections">
|
||||
<i class="fa fa-bars"/>
|
||||
</button>
|
||||
</t>
|
||||
</t>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user