audrius/web
1
0
Fork 1
mirror of https://github.com/OCA/web.git synced 2025-02-22 13:21:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

[MIG] web_responsive: Migrate to v12 and refactor

Browse Source 
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
2018-10-04 10:24:36 +02:00
committed by Sergey Shebanin
parent 5122c2be11
commit 0709b3396c
33 changed files with 1247 additions and 5737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
web_responsive/static/description/index.html
View File

@@ -367,15 +367,54 @@ ul.auto-toc {
!! This file is generated by oca-gen-addon-readme !!
!! changes will be overwritten. !!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/11.0/web_responsive"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-11-0/web-11-0-web_responsive"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/11.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
<p>This module provides a mobile compliant interface for Odoo Community web.</p>
<p>Features:</p>
<ul class="simple">
<li>New navigation with an App drawer</li>
<li>Keyboard shortcuts for easier navigation</li>
<li>Display kanban views for small screens if an action or field One2x</li>
<li>Set chatter side (Optional per user)</li>
<li>Quick search</li>
<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/12.0/web_responsive"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-12-0/web-12-0-web_responsive"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/12.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
<p>This module adds responsiveness to web backend.</p>
<p>Features for all devices:</p>
<ul>
<li><p class="first">New navigation with an app drawer</p>
<img alt="https://user-images.githubusercontent.com/973709/48417193-09a1e080-e74a-11e8-8a0c-e73eb689b2fb.gif" src="https://user-images.githubusercontent.com/973709/48417193-09a1e080-e74a-11e8-8a0c-e73eb689b2fb.gif" />
</li>
<li><p class="first">Quick menu search from the app drawer</p>
<img alt="https://user-images.githubusercontent.com/973709/48417213-17576600-e74a-11e8-846a-57691e82636b.gif" src="https://user-images.githubusercontent.com/973709/48417213-17576600-e74a-11e8-846a-57691e82636b.gif" />
</li>
</ul>
<p>Features for mobile:</p>
<ul>
<li><p class="first">App-specific submenus are shown on full screen when toggling them from the
“hamburger” menu</p>
<img alt="https://user-images.githubusercontent.com/973709/48417297-51286c80-e74a-11e8-9a47-22c810b18c43.gif" src="https://user-images.githubusercontent.com/973709/48417297-51286c80-e74a-11e8-9a47-22c810b18c43.gif" />
</li>
<li><p class="first">View type picker dropdown displays confortably</p>
<img alt="https://user-images.githubusercontent.com/973709/50964322-e3d55580-14c6-11e9-8249-48db9539600f.gif" src="https://user-images.githubusercontent.com/973709/50964322-e3d55580-14c6-11e9-8249-48db9539600f.gif" />
</li>
<li><p class="first">Top app bar is always visible, but the control panel is hidden when
scrolling down, to save some vaulable vertical space</p>
<img alt="https://user-images.githubusercontent.com/973709/50964496-5cd4ad00-14c7-11e9-9261-fd223a329d02.gif" src="https://user-images.githubusercontent.com/973709/50964496-5cd4ad00-14c7-11e9-9261-fd223a329d02.gif" />
</li>
<li><p class="first">Form status bar action and status buttons are collapsed in dropdowns.
Other control panel buttons use icons to save space.</p>
<img alt="https://user-images.githubusercontent.com/973709/50965446-e08f9900-14c9-11e9-92d6-dda472cb6557.gif" src="https://user-images.githubusercontent.com/973709/50965446-e08f9900-14c9-11e9-92d6-dda472cb6557.gif" />
</li>
<li><p class="first">Breadcrumbs navigation is collapsed with a “back arrow” button.</p>
<img alt="https://user-images.githubusercontent.com/973709/50965168-1d0ec500-14c9-11e9-82a0-dfee82ed0861.gif" src="https://user-images.githubusercontent.com/973709/50965168-1d0ec500-14c9-11e9-82a0-dfee82ed0861.gif" />
</li>
</ul>
<p>Features for computers:</p>
<ul>
<li><p class="first">Keyboard shortcuts for easier navigation, <strong>using ``Alt + Shift + [key]``</strong>
combination instead of just <tt class="docutils literal">Alt + [key]</tt>.
See <a class="reference external" href="https://github.com/odoo/odoo/issues/30068">https://github.com/odoo/odoo/issues/30068</a> to understand why.</p>
<img alt="https://user-images.githubusercontent.com/973709/48417578-ff341680-e74a-11e8-8881-017709e912bc.png" src="https://user-images.githubusercontent.com/973709/48417578-ff341680-e74a-11e8-8881-017709e912bc.png" />
</li>
<li><p class="first">Autofocus on search menu box when opening the drawer</p>
<img alt="https://user-images.githubusercontent.com/973709/48417213-17576600-e74a-11e8-846a-57691e82636b.gif" src="https://user-images.githubusercontent.com/973709/48417213-17576600-e74a-11e8-846a-57691e82636b.gif" />
</li>
<li><p class="first">Set chatter on the side of the screen, optional per user</p>
<img alt="https://user-images.githubusercontent.com/973709/48417270-41108d00-e74a-11e8-9172-cba825d027ed.gif" src="https://user-images.githubusercontent.com/973709/48417270-41108d00-e74a-11e8-9172-cba825d027ed.gif" />
</li>
<li><p class="first">Full width form sheets</p>
<img alt="https://user-images.githubusercontent.com/973709/48417428-ac5a5f00-e74a-11e8-8839-5bc538c54c1d.png" src="https://user-images.githubusercontent.com/973709/48417428-ac5a5f00-e74a-11e8-8839-5bc538c54c1d.png" />
</li>
</ul>
<p><strong>Table of contents</strong></p>
<div class="contents local topic" id="contents">
@@ -395,35 +434,21 @@ ul.auto-toc {
<h1><a class="toc-backref" href="#id1">Usage</a></h1>
<p>The following keyboard shortcuts are implemented:</p>
<ul class="simple">
<li>Toggle App Drawer - <cite>ActionKey &lt;https://en.wikipedia.org/wiki/Access_key#Access_in_different_browsers&gt;</cite> + <tt class="docutils literal">A</tt></li>
<li>Navigate Apps Drawer - Arrow Keys</li>
<li>Type to select App Links</li>
<li><tt class="docutils literal">esc</tt> to close App Drawer</li>
<li>Toggle app drawer - <tt class="docutils literal">Alt + Shift + H</tt></li>
<li>Navigate app search results - Arrow keys</li>
<li>Choose app result - <tt class="docutils literal">Enter</tt></li>
<li><tt class="docutils literal">Esc</tt> to close app drawer</li>
</ul>
</div>
<div class="section" id="known-issues-roadmap">
<h1><a class="toc-backref" href="#id2">Known issues / Roadmap</a></h1>
<p>Note: Data added to the footer <tt class="docutils literal">support_branding</tt> is not shown while using
this module.</p>
<ul class="simple">
<li>Provide full menu search feature instead of just App search</li>
<li>Drag drawer from left to open in mobile</li>
<li>Figure out how to test focus on hidden elements for keyboard nav tests</li>
<li>If you resize the window, body gets a wrong <tt class="docutils literal">overflow: auto</tt> css property
and you need to refresh your view or open/close the app drawer to fix that.</li>
<li>Override LESS styling to allow for responsive widget layouts</li>
<li>Adding <tt class="docutils literal">oe_main_menu_navbar</tt> ID to the top navigation bar triggers some
great styles, but also <a class="reference external" href="https://github.com/OCA/web/pull/446#issuecomment-254827880">JavaScript that causes issues on mobile</a></li>
<li>Sticky header and footer in list view only works on certain browsers:
<a class="reference external" href="https://caniuse.com/#search=sticky">https://caniuse.com/#search=sticky</a> (note that the used feature is in
<cite>thead</cite>).</li>
<li>On Android (FireFox) - clicking the search icon does not
focus the search input.</li>
<li>On Android (FireFox &amp; 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.</li>
<li>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.</li>
<li>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.</li>
<li>App navigation with keyboard.</li>
<li>Make it more beautiful. Maybe OCA-branded?</li>
</ul>
</div>
<div class="section" id="bug-tracker">
@@ -431,7 +456,7 @@ users to filter on complete paths of menus and not only on the last item.</li>
<p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
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
<a class="reference external" href="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</a>.</p>
<a class="reference external" href="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**">feedback</a>.</p>
<p>Do not contact contributors directly about support or help with technical issues.</p>
</div>
<div class="section" id="credits">
@@ -461,7 +486,7 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
<p>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.</p>
<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/11.0/web_responsive">OCA/web</a> project on GitHub.</p>
<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/12.0/web_responsive">OCA/web</a> project on GitHub.</p>
<p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
</div>
</div>