[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 odoo/odoo#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!
OCA · Jan 10, 2019 · f5b2069 · f5b2069
1 parent 90586c2
commit f5b2069
Show file tree

Hide file tree

Showing 33 changed files with 1,218 additions and 5,717 deletions.
diff --git a/web_responsive/README.rst b/web_responsive/README.rst
@@ -14,26 +14,74 @@ Web Responsive
     :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
     :alt: License: LGPL-3
 .. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github
-    :target: https://github.com/OCA/web/tree/11.0/web_responsive
+    :target: https://github.com/OCA/web/tree/12.0/web_responsive
     :alt: OCA/web
 .. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
-    :target: https://translation.odoo-community.org/projects/web-11-0/web-11-0-web_responsive
+    :target: https://translation.odoo-community.org/projects/web-12-0/web-12-0-web_responsive
     :alt: Translate me on Weblate
 .. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png
-    :target: https://runbot.odoo-community.org/runbot/162/11.0
+    :target: https://runbot.odoo-community.org/runbot/162/12.0
     :alt: Try me on Runbot
 
 |badge1| |badge2| |badge3| |badge4| |badge5| 
 
-This module provides a mobile compliant interface for Odoo Community web.
+This module adds responsiveness to web backend.
 
-Features:
+Features for all devices:
 
-* New navigation with an App drawer
-* Keyboard shortcuts for easier navigation
-* Display kanban views for small screens if an action or field One2x
-* Set chatter side (Optional per user)
-* Quick search
+* New navigation with an app drawer
+
+  .. image:: https://user-images.githubusercontent.com/973709/48417193-09a1e080-e74a-11e8-8a0c-e73eb689b2fb.gif
+
+* Quick menu search from the app drawer
+
+  .. image:: https://user-images.githubusercontent.com/973709/48417213-17576600-e74a-11e8-846a-57691e82636b.gif
+
+Features for mobile:
+
+* App-specific submenus are shown on full screen when toggling them from the
+  "hamburger" menu
+
+  .. image:: https://user-images.githubusercontent.com/973709/48417297-51286c80-e74a-11e8-9a47-22c810b18c43.gif
+
+* View type picker dropdown displays confortably
+
+  .. image:: https://user-images.githubusercontent.com/973709/50964322-e3d55580-14c6-11e9-8249-48db9539600f.gif
+
+* Top app bar is always visible, but the control panel is hidden when
+  scrolling down, to save some vaulable vertical space
+
+  .. image:: https://user-images.githubusercontent.com/973709/50964496-5cd4ad00-14c7-11e9-9261-fd223a329d02.gif
+
+* Form status bar action and status buttons are collapsed in dropdowns.
+  Other control panel buttons use icons to save space.
+
+  .. image:: https://user-images.githubusercontent.com/973709/50965446-e08f9900-14c9-11e9-92d6-dda472cb6557.gif
+
+* Breadcrumbs navigation is collapsed with a "back arrow" button.
+
+  .. image:: https://user-images.githubusercontent.com/973709/50965168-1d0ec500-14c9-11e9-82a0-dfee82ed0861.gif
+
+Features for computers:
+
+* Keyboard shortcuts for easier navigation, **using ``Alt + Shift + [key]``**
+  combination instead of just ``Alt + [key]``.
+  See https://github.com/odoo/odoo/issues/30068 to understand why.
+
+  .. image:: https://user-images.githubusercontent.com/973709/48417578-ff341680-e74a-11e8-8881-017709e912bc.png
+
+
+* Autofocus on search menu box when opening the drawer
+
+  .. image:: https://user-images.githubusercontent.com/973709/48417213-17576600-e74a-11e8-846a-57691e82636b.gif
+
+* Set chatter on the side of the screen, optional per user
+
+  .. image:: https://user-images.githubusercontent.com/973709/48417270-41108d00-e74a-11e8-9172-cba825d027ed.gif
+
+* Full width form sheets
+
+  .. image:: https://user-images.githubusercontent.com/973709/48417428-ac5a5f00-e74a-11e8-8839-5bc538c54c1d.png
 
 **Table of contents**
 
@@ -45,44 +93,28 @@ Usage
 
 The following keyboard shortcuts are implemented:
 
-* Toggle App Drawer - `ActionKey <https://en.wikipedia.org/wiki/Access_key#Access_in_different_browsers>` + ``A``
-* Navigate Apps Drawer - Arrow Keys
-* Type to select App Links
-* ``esc`` to close App Drawer
+* Toggle app drawer - ``Alt + Shift + H``
+* Navigate app search results - Arrow keys
+* Choose app result - ``Enter``
+* ``Esc`` to close app drawer
 
 Known issues / Roadmap
 ======================
 
-Note: Data added to the footer ``support_branding`` is not shown while using
-this module.
-
-* Provide full menu search feature instead of just App search
-* Drag drawer from left to open in mobile
-* Figure out how to test focus on hidden elements for keyboard nav tests
-* If you resize the window, body gets a wrong ``overflow: auto`` css property
-  and you need to refresh your view or open/close the app drawer to fix that.
-* Override LESS styling to allow for responsive widget layouts
-* Adding ``oe_main_menu_navbar`` ID to the top navigation bar triggers some
-  great styles, but also `JavaScript that causes issues on mobile
-  <https://github.com/OCA/web/pull/446#issuecomment-254827880>`_
-* Sticky header and footer in list view only works on certain browsers:
-  https://caniuse.com/#search=sticky (note that the used feature is in
-  `thead`).
-* On Android (FireFox) - clicking the search icon does not
-  focus the search input.
-* On Android (FireFox & Chrome) - clicking the search query input will
-  show the on screen keyboard for a split second, but the App Drawer
-  immediately closes and the keyboard closes with it.
-* Filter menu items completely on client-side, to make it smoother and allow
-  users to filter on complete paths of menus and not only on the last item.
+* To view the full experience in a device, the page must be loaded with the
+  device screen size. This means that, if you change the size of your browser,
+  you should reload the web client to get the full experience for that
+  new size. This is Odoo's own limitation.
+* App navigation with keyboard.
+* Make it more beautiful. Maybe OCA-branded?
 
 Bug Tracker
 ===========
 
 Bugs are tracked on `GitHub Issues <https://github.com/OCA/web/issues>`_.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us smashing it by providing a detailed and welcomed
-`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_responsive%0Aversion:%2011.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
+`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_responsive%0Aversion:%2012.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
 
 Do not contact contributors directly about support or help with technical issues.
 
@@ -118,6 +150,6 @@ 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/web <https://github.com/OCA/web/tree/11.0/web_responsive>`_ project on GitHub.
+This module is part of the `OCA/web <https://github.com/OCA/web/tree/12.0/web_responsive>`_ project on GitHub.
 
 You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.
diff --git a/web_responsive/__init__.py b/web_responsive/__init__.py
@@ -1,4 +1 @@
-# Copyright 2018  Alexandre Díaz
-# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
-
 from . import models
diff --git a/web_responsive/__manifest__.py b/web_responsive/__manifest__.py
@@ -4,11 +4,10 @@
 
 {
     "name": "Web Responsive",
-    "summary": "It provides a mobile compliant interface for Odoo Community "
-               "web",
-    "version": "11.0.2.0.0",
+    "summary": "Responsive web client, community-supported",
+    "version": "12.0.1.0.0",
     "category": "Website",
-    "website": "https://laslabs.com/",
+    "website": "https://github.com/OCA/web",
     "author": "LasLabs, Tecnativa, Alexandre Díaz, "
               "Odoo Community Association (OCA)",
     "license": "LGPL-3",
@@ -18,11 +17,11 @@
     ],
     "data": [
         'views/assets.xml',
+        'views/res_users.xml',
         'views/web.xml',
-        'views/inherited_view_users_form_simple_modif.xml',
     ],
     'qweb': [
-        'static/src/xml/app_drawer_menu_search.xml',
+        'static/src/xml/apps.xml',
         'static/src/xml/form_view.xml',
         'static/src/xml/navbar.xml',
     ],

diff --git a/web_responsive/i18n/es.po b/web_responsive/i18n/es.po
@@ -8,52 +8,71 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Odoo Server 10.0\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2016-12-23 02:13+0000\n"
-"PO-Revision-Date: 2018-08-02 06:36+0000\n"
-"Last-Translator: Pedro M. Baeza <pedro.baeza@gmail.com>\n"
+"POT-Creation-Date: 2019-01-10 10:49+0000\n"
+"PO-Revision-Date: 2019-01-10 10:50+0000\n"
+"Last-Translator: Jairo Llopis <yajo.sk8@gmail.com>\n"
 "Language-Team: Spanish (https://www.transifex.com/oca/teams/23907/es/)\n"
 "Language: es\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
-"Content-Transfer-Encoding: \n"
+"Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=n != 1;\n"
-"X-Generator: Weblate 3.1.1\n"
+"X-Generator: Poedit 2.2\n"
 
 #. module: web_responsive
-#: model:ir.ui.view,arch_db:web_responsive.webclient_bootstrap
-msgid "<span class=\"sr-only\">Toggle App Drawer</span>"
-msgstr ""
-"<span class=\"sr-only\">Mostrar/ocultar selector de aplicaciones</span>"
+#: model:ir.model.fields,field_description:web_responsive.field_res_users__chatter_position
+msgid "Chatter Position"
+msgstr "Posición del chatter"
 
 #. module: web_responsive
-#: model:ir.ui.view,arch_db:web_responsive.webclient_bootstrap
-msgid "<span class=\"sr-only\">Toggle Navigation</span>"
-msgstr "<span class=\"sr-only\">Mostrar/Ocultar navegación</span>"
+#. openerp-web
+#: code:addons/web_responsive/static/src/xml/form_view.xml:57
+#: code:addons/web_responsive/static/src/xml/form_view.xml:96
+#, python-format
+msgid "Create"
+msgstr "Crear"
 
 #. module: web_responsive
-#: model:ir.ui.view,arch_db:web_responsive.menu
-msgid "Apps"
-msgstr "Aplicaciones"
+#. openerp-web
+#: code:addons/web_responsive/static/src/xml/form_view.xml:71
+#: code:addons/web_responsive/static/src/xml/form_view.xml:110
+#, python-format
+msgid "Discard"
+msgstr "Descartar"
 
 #. module: web_responsive
-#: model:ir.model.fields,field_description:web_responsive.field_res_users_chatter_position
-msgid "Chatter Position"
-msgstr "Posición del chatter"
+#. openerp-web
+#: code:addons/web_responsive/static/src/xml/form_view.xml:50
+#, python-format
+msgid "Edit"
+msgstr "Editar"
 
 #. module: web_responsive
-#: model:ir.model,name:web_responsive.model_ir_http
-msgid "HTTP routing"
-msgstr "Enrutado HTTP"
+#: selection:res.users,chatter_position:0
+msgid "Normal"
+msgstr "Normal"
 
 #. module: web_responsive
-#: model:ir.ui.view,arch_db:web_responsive.menu
-msgid "More <b class=\"caret\"/>"
-msgstr "Más <b class=\"caret\"/>"
+#. openerp-web
+#: code:addons/web_responsive/static/src/xml/form_view.xml:27
+#, python-format
+msgid "Quick actions"
+msgstr "Acciones rápidas"
 
 #. module: web_responsive
-#: selection:res.users,chatter_position:0
-msgid "Normal"
-msgstr "Normal"
+#. openerp-web
+#: code:addons/web_responsive/static/src/xml/form_view.xml:64
+#: code:addons/web_responsive/static/src/xml/form_view.xml:103
+#, python-format
+msgid "Save"
+msgstr "Guardar"
+
+#. module: web_responsive
+#. openerp-web
+#: code:addons/web_responsive/static/src/xml/apps.xml:29
+#, python-format
+msgid "Search menus..."
+msgstr "Buscar menús..."
 
 #. module: web_responsive
 #: selection:res.users,chatter_position:0

diff --git a/web_responsive/i18n/web_responsive.pot b/web_responsive/i18n/web_responsive.pot
@@ -4,8 +4,10 @@
 #
 msgid ""
 msgstr ""
-"Project-Id-Version: Odoo Server 11.0\n"
+"Project-Id-Version: Odoo Server 12.0\n"
 "Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2019-01-10 10:49+0000\n"
+"PO-Revision-Date: 2019-01-10 10:49+0000\n"
 "Last-Translator: <>\n"
 "Language-Team: \n"
 "MIME-Version: 1.0\n"
@@ -14,71 +16,65 @@ msgstr ""
 "Plural-Forms: \n"
 
 #. module: web_responsive
-#: model:ir.ui.view,arch_db:web_responsive.menu
-msgid "<i>Searching:</i>"
-msgstr ""
-
-#. module: web_responsive
-#: model:ir.ui.view,arch_db:web_responsive.menu
-msgid "<span class=\"hidden-xs\">\n"
-"                                &amp;nbsp;|&amp;nbsp;\n"
-"                            </span>"
+#: model:ir.model.fields,field_description:web_responsive.field_res_users__chatter_position
+msgid "Chatter Position"
 msgstr ""
 
 #. module: web_responsive
-#: model:ir.ui.view,arch_db:web_responsive.webclient_bootstrap
-msgid "<span class=\"sr-only\">Toggle App Drawer</span>"
+#. openerp-web
+#: code:addons/web_responsive/static/src/xml/form_view.xml:57
+#: code:addons/web_responsive/static/src/xml/form_view.xml:96
+#, python-format
+msgid "Create"
 msgstr ""
 
 #. module: web_responsive
-#: model:ir.ui.view,arch_db:web_responsive.webclient_bootstrap
-msgid "<span class=\"sr-only\">Toggle Navigation</span>"
+#. openerp-web
+#: code:addons/web_responsive/static/src/xml/form_view.xml:71
+#: code:addons/web_responsive/static/src/xml/form_view.xml:110
+#, python-format
+msgid "Discard"
 msgstr ""
 
 #. module: web_responsive
-#: model:ir.ui.view,arch_db:web_responsive.menu
-msgid "Apps"
+#. openerp-web
+#: code:addons/web_responsive/static/src/xml/form_view.xml:50
+#, python-format
+msgid "Edit"
 msgstr ""
 
 #. module: web_responsive
-#: model:ir.model.fields,field_description:web_responsive.field_res_users_chatter_position
-msgid "Chatter Position"
+#: selection:res.users,chatter_position:0
+msgid "Normal"
 msgstr ""
 
 #. module: web_responsive
 #. openerp-web
-#: code:addons/web_responsive/static/src/xml/form_view.xml:35
+#: code:addons/web_responsive/static/src/xml/form_view.xml:27
 #, python-format
-msgid "More"
+msgid "Quick actions"
 msgstr ""
 
 #. module: web_responsive
-#: model:ir.ui.view,arch_db:web_responsive.menu
-msgid "More <b class=\"caret\"/>"
-msgstr ""
-
-#. module: web_responsive
-#: model:ir.ui.view,arch_db:web_responsive.menu
-msgid "No Search Supplied."
+#. openerp-web
+#: code:addons/web_responsive/static/src/xml/form_view.xml:64
+#: code:addons/web_responsive/static/src/xml/form_view.xml:103
+#, python-format
+msgid "Save"
 msgstr ""
 
 #. module: web_responsive
-#: selection:res.users,chatter_position:0
-msgid "Normal"
+#. openerp-web
+#: code:addons/web_responsive/static/src/xml/apps.xml:29
+#, python-format
+msgid "Search menus..."
 msgstr ""
 
 #. module: web_responsive
 #: selection:res.users,chatter_position:0
 msgid "Sided"
 msgstr ""
 
-#. module: web_responsive
-#. openerp-web
-#: code:addons/web_responsive/static/src/xml/form_view.xml:54
-#, python-format
-msgid "Task"
-msgstr ""
-
 #. module: web_responsive
 #: model:ir.model,name:web_responsive.model_res_users
 msgid "Users"