Commit Graph
53 Commits
Author SHA1 Message Date
Brieuc-brdandElisabeth Dickinson 21d87a3da5 [REF] *: milk graphical assets
- apps icons
- base: replace demo avatars Mitchell, Marc and Joel
- mail: replace odoobot avatar

Part-of: odoo/odoo#116641
Co-authored-by: Elisabeth Dickinson <edi@odoo.com>
2023-05-12 22:59:14 +02:00
Benoit Socias 38e2aef445 [IMP] web_editor, web_unsplash: alternate unsplash and illustrations
Before this commit, all search result illustrations were displayed
before the Unsplash images.

This commit makes the search result images from Unsplash and the
illustrations alternate, beginning with the first Unsplash image.
The existing attachment results remain in front.

task-3060679

closes odoo/odoo#111481

Signed-off-by: Bojabza Soukéina (sobo) <sobo@odoo.com>
2023-05-09 19:26:45 +02:00
Pulinckx Pierre (PIPU) 608e90e998 [REF] *: Replace underscore functions by native JS
Replace _.map(), _.flatten(), _.delay(), _.contains(), _.pluck(), _.isUndefined(), _.isEmpty(), _.isString(), _.isEqual(), _.isBoolean(), _.memoize(), _.invoke(), _.bind(), _.escape(), _.debounce(),
_.str.sprintf(), _.str.repeat(), _.str.startswith(), _.str.trim(),
_.str.escapeHTML(), _.str.escapeRegExp(), _.str.startsWith(), _.str.include()

closes odoo/odoo#118012

Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>
2023-04-20 11:57:29 +02:00
Benoit Socias f9435feb39 [FIX] web_editor, web_unsplash: use preset colors on illustrations
Since [1] when the media dialog was rewritten, the illustrations
thumbnails were not using the preset colors.

[2] did partially implement the solution: the updated images with the
right colors were not replaced in the DOM.

This commit continues what [2] started and displays the illustration
thumbnails with the preset colors.
It also assigns a media type to all fetched images.

[1]: https://github.com/odoo/odoo/commit/7fd0698cf765a79959566b51e33cb76bff83d344
[2]: https://github.com/odoo/odoo/commit/f2111cb37a572fe1ffd9b303c4abcbb7fe1d67cd

task-3060679

closes odoo/odoo#118556

X-original-commit: 75cc46c4f784edb1fb7404956e1cfdf6fae6a83c
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2023-04-14 11:49:25 +02:00
Younn Olivier 23b2486666 [FIX] web_editor, web_unsplash: scroll to "load more" button upon search
[1] refactored the Media Dialog using owl and the backend Dialog
component.
Doing so, the width of the dialog was reduced (using the standard
.modal-xl class). With that change, the "load more" button was not
always visible for the user.

It is acknowledged that the current Media Dialog needs a deeper UI
review. In the meantime, it was decided to scroll to the bottom after a
search/click on the load more button.

This commit implements that solution with a ref on the "load more" div.
It is used in a scrollToLoadMoreButton, that is called each time after
loading a new attachment/illustration/unsplash record. As we do not want
a jump in the UI each time an image is loaded, the function is
debounced.
It is simpler to use a debounced function that we call each time an
element is loaded, than keeping track of each loaded element to call
the function only once, when they are loaded.

[1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b

task-3060679

X-original-commit: 4921442690e6f5b587441a653f73c3368155422e
Part-of: odoo/odoo#118556
2023-04-14 11:49:24 +02:00
Younn Olivier 883f2e2519 [FIX] web_editor, web_unsplash: do not display too many undraw images
Before this commit, typing a query in the search input of the media
dialog would output a lot of undraw images (15), making some noise and
making the unsplash results (that are fetched 10 by 10) less visible.

First, the number of fetched attachments was reduced from 30 to 10 when
converted to owl in [1], for no valid reason. This commit adds a new
NUMBER_OF_RECORDS_TO_DISPLAY value for better control over the loaded
images, and reverts it to 30.

Then, the /web_editor/media_library_search endpoint does not take any
limit param. Therefore, it was loaded with all the results as they were
returned. Now, a new NUMBER_OF_MEDIA_TO_DISPLAY variable is introduced
to load the 10 first results instead of all of them.

This way, the search results are organised as following:
- NUMBER_OF_ATTACHMENTS_TO_DISPLAY (30 for now) attachments,
- NUMBER_OF_MEDIA_TO_DISPLAY (10 for now) media (undraw, ...),
- NUMBER_OF_RECORDS_TO_DISPLAY (30 for now) unsplash images.

These values can be changed to adjust the search (it may be better to
have more unsplash images than undraw images).

[1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b

task-3060679

X-original-commit: bc4fe60bcebd3e47f206c911526784a88fd520d9
Part-of: odoo/odoo#118556
2023-04-14 11:49:24 +02:00
Pulinckx Pierre (PIPU) 614de86989 [REF] *: Replace underscore function by native JS
Replace _.isNumber(), _.filter(), _.reject(), _.unique(), _.indexOf(), _.lastIndexOf(), _.findIndex(), _.range()
_.keys(), _.values(), _.str.sprintf() and some _.each()

closes odoo/odoo#118003

Signed-off-by: Géry Debongnie <ged@odoo.com>
2023-04-13 16:40:11 +02:00
Michael (mcm) ff0d6dd580 [REF] *: replace odoo module by native one
This commit converts almost all odoo module by native module.
The goal is to deprecate odoo.define in favor of native module and then
simplify boot.js by removing the regexp that finds module dependencies.

task id: 3162300

closes odoo/odoo#117305

Related: odoo/enterprise#39118
Signed-off-by: Géry Debongnie <ged@odoo.com>
2023-04-03 17:07:24 +02:00
9a079d5d4c [FIX] web_editor, web_unsplash: fix debounced search from media dialog
Following this flow on the Media Dialog:
- Type "hell"
- Wait a few ms so that the RPC to search images starts
- Type "o"
- The RPC of before finishes, the o is removed and no new search is done

Before this commit, the search input value of the SearchMedia component
was coming from a "needle" props. This needle prop was a state on the
parent component (FileSelector), set through a debounced handler.

This is not a good design:
- Type "hell": after 1000ms, the debounced handler will be executed with
the value "hell"
- While the handler is executing: type "o"
- When the handler finishes, it has set the needle state value to "hell"
on the parent. This will rerender the SearchMedia with "hell" as a
needle prop, and the "hello" input will be replaced with "hell".

Instead of doing that, the SearchMedia component should have its own
input state, which models the input element.
On that state, we use an effect to call the debounced "search" callback.
This way, the SearchMedia is less dependent on its parent: it only
rerenders when its input element changes.

Additionally, the fetch results are only used if they are the ones from
the last call to `search`.

Dedicated `KeepLast` instances are used for attachments, media library
and unsplash.

task-3060679

closes odoo/odoo#113188

X-original-commit: 08859ca7939454303e34dc39c831ac8f75773c3d
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Co-authored-by: Arthur Detroux <ard@odoo.com>
Co-authored-by: Benoit Socias <bso@odoo.com>
2023-02-21 00:47:34 +01:00
Antoine (anso) fa1abe7f2f [IMP] web_unsplash: improve credentials inputs layout
Inputs are displayed on a colored background that made the placeholder
invisible -> fixed in PR https://github.com/odoo/odoo/pull/104136

Apply button's placement made it related only to the second input but
it should not be the case -> Space was created between button and
second input

task-2984182

closes odoo/odoo#107089

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
2022-12-07 18:29:13 +01:00
Joseph Caburnay c412f11c02 [REF] web,web_*: import owl features using "@odoo/owl" module
In @odoo-module files, we do the following conversion:

`const { ... } = owl;` -> `import { ... } from "@odoo/owl"`.

While in legacy odoo module (odoo.define):

`const { ... } = owl;` -> `const { ... } = require("@odoo/owl");`.

closes odoo/odoo#104260

Task-id: 3032274
Related: odoo/enterprise#33298
Signed-off-by: Géry Debongnie <ged@odoo.com>
Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>
2022-10-27 14:41:17 +02:00
Younn Olivier bd443138d2 [FIX] web_editor, web_unsplash: fix media dialog search
This commit fixes three issues regarding the top left search input of the
Media Dialog.

First, following this flow from the website builder:
- Start the Media Dialog with no images,
=> A visual indication to guide you to use the search input is there
- Type a search query in the top left search input,
- Erase completely the search query,
=> The visual indication is not displayed again.
When [1] reworked the Media Dialog with components, it wrongly
defined the ImageSelector web_unsplash patch to load unsplash images: if
there was no query string, the state.isFetchingUnsplash variable was set
to true and never to false, therefore the component was acting as if
there was still some fetching in progress.

Secondly, pressing 'enter' when the input was focused would trigger a
reload of the window. This was due to an obscure html spec described in
[2]: "When there is only one single-line text input field in a form, the
user agent should accept Enter in that field as a request to submit the
form."
When [3] reworked the design of the Media Dialog, it added a t-if on the
second "url" input, making the form with a single input.
This commit fixes this wrong behaviour by using div elements instead of
forms.

Lastly, [3] also removed the position-fixed on the loading images,
which was preventing to modify the container height before resizing
them. This led to visual glitches before seeing the resized images. This
commit adds back this class to prevent that visual glitch.

[1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b
[2]: https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2
[3]: https://github.com/odoo/odoo/commit/ff0b2d441252560a076a3609d81c369f0ce42d19

task-2687506

closes odoo/odoo#101788

X-original-commit: 8ce4036364de2d65921962357b11d905ca3676e0
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Younn Olivier (yol) <yol@odoo.com>
2022-10-03 09:57:16 +02:00
Adrien Schoffeniels d50589fd08 [IMP] web_unsplash: allow to specify image orientation
Purpose:
========
Knowledge allows to search images from unsplash when selecting a cover
for an article. One would like to show only images with a landscape
orientation when selecting a cover, since images with other orientations
do not fit properly.

Also made "UnsplashError" component exportable so that it can be used
in Knowledge,'s Cover Selector.

Specs:
======
Modified unsplash_service and image_selector so that one can specify
the orientation of the images to fetch from unsplash.
Added the orientation as cache key so that images in cache are not shown
when using the same query word but with another orientation (eg. in
knowledge, search an image for the body of the article then searching a
cover using the same query term).

Task-2852916

closes odoo/odoo#101671

X-original-commit: e65d5d617bd13cf0381b372205a07a4a3bef2963
Related: odoo/enterprise#32050
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
2022-09-30 08:07:49 +02:00
Antoine (anso) ff0b2d4412 [FIX] web_editor, web_unsplash: media dialog bs5 migration
Make sure there is no migration issue in the module. Adapt the design
to ensure visual consistency. Remove custom SCSS and use BS classes
when possible

task-2950589

closes odoo/odoo#98706

Related: odoo/enterprise#30616
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
2022-09-15 12:40:55 +02:00
Romain Estievenart 36628c9b1c [FIX] *: removes .form-inline
this commit removes the usage of .form-inline class which is deprecated
since BS5.

here is the css rules that was used:
https://github.com/twbs/bootstrap/blob/8fa0d3010112dca5dd6dd501173415856001ba8b/dist/css/bootstrap.css#L2303

'''Breaking change: Dropped form-specific layout classes for our grid
system.
Use our grid and utilities instead of .form-group, .form-row, or
.form-inline.'''

https://getbootstrap.com/docs/5.0/migration/#forms

We also took the opportunity to remove some .input-group-append and
.form-group. We are currently working to remove all of them.

Part-of: odoo/odoo#97967
2022-08-16 09:19:08 +02:00
Romain DerieandMerlin e104937118 [FIX] web_editor, web_unsplash, *: allow portal user to upload images
* website_forum

Portal users cannot insert images in the WYSIWYG, eg in a forum post.

Steps to reproduce:
- Install website_forum
- Connect as portal
- Go to the forum and create a new post
- Type '/image' and try to insert an image
- An Access Error is raised preventing the portal user from inserting an
image

History:
- It was possible in version earlier than 15.0 before the new editor, as
  it was using a base64 inplace image upload to bypass the access rights
  and avoid creating an attachment.
- It was broken in 15.0 with the new editor which doesn't have such a
  mechanism. The image upload was then disabled for those users in 15.0
  with [1] to avoid that bad UX with those errors/tracebacks.
- It was decided to implement a clean solution in master and see from
  there was will be done with 15.0 (as being able to upload an image on
  a forum seems quite critical).

Solution here in master to be able to use the media dialog:
- First issue, about opening the media dialog:
  It fetches attachments, which is raising some access errors. We now
  catch the error silently and return an empty list.
- Second issue, about upload an image (and thus creating an attachment):
  We now create attachments with sudo to allow access to portal users,
  but only if he has write access on the model.

[1]: https://github.com/odoo/odoo/commit/e453d4c119a69f285d9a014babe485492bbe9c40

opw-2648770
task-2811325

closes odoo/odoo#82612

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Co-authored-by: Merlin (megu) <megu@odoo.com>
2022-07-08 14:33:43 +02:00
Romeo Fragomeli 1fcd098af5 [REF] *: BS5: migration
Automated change made by a lot of RegEx to change all think that is
possible to automate.

https://getbootstrap.com/docs/5.1/migration

Task ID: 2766483

Part-of: odoo/odoo#95450
2022-07-07 13:30:24 +02:00
Younn Olivier cc9ca66c95 [FIX] web_editor, web_unsplash: fix unsplash on the frontend
Before this commit, when the admin had set his unsplash credentials in
the media dialog, he could search for unsplash images in the backend
(website builder, optimize SEO, html fields), but not on the frontend
(from the website_forum reply section for example). This was caused by a
wrong assets management for the media dialog views.

This commit reworks the assets_media_dialog introduced in [1], that were
not correctly defined. Until now, a web_editor.assets_media_dialog
bundle including js, scss and xml files was included in both the
web.assets_frontend and web.assets_backend bundles. It was built that
way, because the frontend only takes the views defined in the
web.assets_frontend bundle.
Two mistakes were made with that approach:
- The views defined in web.assets_backend are not added to the
webclient's templates list. Only the ones defined in web.assets_qweb
are. It was only working because web.assets_qweb was globally taking
every component view, defined as /component/*/*.xml.
- The qweb extensions templates for web_unsplash were defined in
web.assets_qweb (therefore, not included in web.assets_frontend and not
added to the frontend's template list).

To change that and include the web_editor and web_unsplash media dialog
views both for the frontend and the backend, a
web_editor.assets_media_dialog_templates is added, with the xml files
from the web_editor.assets_media_dialog bundle. But this time, this new
views-only bundle is included in web.assets_frontend and
web.assets_qweb.
When the public root's assets management is reworked and when it fetches
the templates from assets_common, these bundles should move to
assets_common, as discussed in [2].

Also, the extension template that adds the unsplash records is reworked:
the t-if is separated from the t-foreach, and set using an id instead of
the qweb instruction that it was using before, as it is more robust.

Finally, the isFetching getter was not set on the unsplash ImageSelector
patch, leading to a visual glitch ("No images found" was displayed while
querying unsplash). It is added in this commit.

task-2687506

[1]: https://github.com/odoo/odoo/pull/89223/commits/a154ee7ad6fd3ebdd38943e1439badae11c3151d
[2]: https://github.com/odoo/odoo/pull/89223#discussion_r895627061

closes odoo/odoo#94572

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
2022-06-29 12:19:30 +02:00
Younn Olivier 7fd0698cf7 [IMP] web_editor, web_unsplash, website: add media dialog
The media dialog was refactored using owl.
It can be displayed via the dialogs service.

The (Image/Document/Icon/Video)Selector components are controlled by the
state of their parent, the MediaDialog: this.selectedMedia.

Some things differ from the original implementation: the dialog still
takes (optionally) a media as a parameter, but it does not directly
modify it anymore.
It will pass the selected media as a parameter to a callback, save, that
it gets as a prop. That save prop should be responsible to make the
appropriate modification to the original media, given the new selected
media.

The code opens up for an easy multiSelect of other tabs than the images
(multiIcons, multiDocuments), but that use case is not currently tackled
and maybe it would be better to simplify the code.

See merge commit for more information.

task-2687506
2022-06-24 10:28:06 +02:00
qsm-odoo 29f21a23f1 [MOV] website, *: move static files to prepare website UI in backend
*: web_editor, web_unsplash, website_event, website_blog,
   website_event_meet, website_forum, website_links, website_livechat,
   website_sale_slides, website_slides

With [1], many files will move as the website UI is moved in the
backend. This commit moves all the static files (JS/CSS/XML) to their
final destination without modifying them, in an attempt to preserve
some history and ease some forward-ports.
After this commit, everything works as before as the files are simply
renamed and the references to them adapted.

However, technically, many files will actually be split into multiple
files by the work made with [1]. While it is theoretically possible to
preserve history over multiples files, this would require inner merge
commits, which does not go well with robodoo. In those cases, the "main"
file of the split was chosen. Mainly, 4 worth-noticing splits were
detected (and so the history moved only to the first file):

move: addons/web_editor/static/src/js/wysiwyg/widgets/media.js
to: addons/web_editor/static/src/components/media_dialog/file_selector.js
  - addons/web_editor/static/src/components/media_dialog/search_media.js
  - addons/web_editor/static/src/components/media_dialog/image_selector.js
  - addons/web_editor/static/src/components/media_dialog/document_selector.js
  - addons/web_editor/static/src/components/media_dialog/icon_selector.js
  - addons/web_editor/static/src/components/media_dialog/video_selector.js

move: addons/web_editor/static/src/js/wysiwyg/widgets/upload_progress_toast.js
to: addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js
  - addons/web_editor/static/src/components/upload_progress_toast/upload_service.js

move: addons/website/static/src/js/menu/content.js
to: addons/website/static/src/components/dialog/edit_menu.js
  - addons/website/static/src/components/dialog/page_properties.js
  - addons/website/static/src/components/wysiwyg_adapter/page_options.js
  - addons/website/static/src/js/website_page_list.js

move: addons/website/static/src/js/menu/edit.js
to: addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
  - addons/website/static/src/systray_items/edit_website.js
  - addons/website/static/src/components/editor/editor.js

Notice that as those moves were made post-work and the rest of the work
(80+ commits) rebased on top of it, some commits may remove more than
they should in a moved file to then reimplement some of what was
removed in a later commit... ideally this should have been avoided of
course but keep in mind that the final files are just entirely rewritten
and split as converted to OWL. It seemed however worth it to keep most
of the inner history of the work made here to see step by step what was
done. [1] will obviously be merged with a merge commit, binding the
whole work together.

[1]: https://github.com/odoo/odoo/pull/89223

task-2687506
2022-06-24 10:28:04 +02:00
Jorge Pinna Puissant bc20eb4790 [IMP] test_lint, *: enable no-unused-vars rule
Part-of: odoo/odoo#85569
2022-03-02 13:05:42 +00:00
Antoine Vandevenne (anv) adf70bf9dc [FIX] *: retarget documentation links to master
closes odoo/odoo#84990

X-original-commit: 39bdf46
Related: odoo/enterprise#24582
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
2022-02-21 17:01:02 +00:00
Victor Feyens ab022ec12d [FIX] *: target v15.0 documentation with doc links
X-original-commit: acc95ec204baa1dddbe292c379a1768fe1deccbf
Part-of: odoo/odoo#77923
2021-10-07 17:59:52 +00:00
Romain Derie 6dd7207b6f [FIX] web_editor, web_unsplash, test_website: make unsplash work
Since cfe079221c, unsplash is not working anymore as that commit did not adapt
the unsplash code to that change.

task-2581567

closes odoo/odoo#76617

X-original-commit: 9a4723628e868836c7bbe8bec31ec9b6ce3f2554
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2021-09-16 10:01:14 +00:00
Victor Feyens 0348b95aee [FIX] *: update documentation links
Following the recent reorganisation of the documentation in 12.0+,
the majority of the documents have been moved and their old links are no longer valid.
Some redirection rules will soon be deployed, but those rules might be dropped in some years
and we want the links to still work, which is why we still replace the links to the new ones.

FW-Port of odoo/odoo#70675 (13.0)

closes odoo/odoo#70920

X-original-commit: bc9c1eef538ba6095e74c19d5d9ed9e01625ec7c
Related: odoo/enterprise#18361
Signed-off-by: Victor Feyens (vfe) <vfe@odoo.com>
2021-05-17 19:26:27 +00:00
Romain Derie 0d6cdeef2f [IMP] web_editor, *: show a progress bar on image upload
*: web, web_unsplash

Without this commit, the user had no hint to know something was actually
being performed.
It would be worst when uploading multiple image at once, eg in image
wall, as it could take some times for the images to be processed and
uploaded.

The user now has a visual hint about the upload progress through a
toaster and some progress bars.

For unsplash, note that as the actual image download is performed S2S,
the progress bar will automatically jump to 100%, then will wait for the
RPC success once the server is done to show a success progress bar.

Part of https://github.com/odoo/odoo/pull/65828
task-2345082
2021-03-31 07:06:35 +00:00
xO-Tx 8d2f029817 [IMP] web_unsplash : update unsplash messages
The goal of this commit is to update all unsplash alert messages :

- message : "unsplash key not found"
- message : "search temporarily unavailable"
- message : "unauthorized key"
- message : "something went wrong"

and replace them with cleaner content.

task-2341558

closes odoo/odoo#59014

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2020-10-13 07:39:01 +00:00
Samuel Degueldre c46204dff9 [IMP] web_editor, *: make media-dialog search odoo media-library
*: website, web_unsplash, website_blog

We have recently created an odoo media library that exposes a public API
for searching for open-source media, including dynamic SVGs that can be
used with the dynamic background-shape system to create illustrations
whose colors can be changed by the user. This commit adds the
corresponding client-side functionalty: search for the images in the
media-library, creating a corresponding attachment when selected, as
well as an option to customize the colors of the dynamic SVGs.

In the process, adaptations have been made in the web_unsplash module to
avoid duplicating code and to adapt code that was making assumptions
that are no longer valid.

To make new users more aware of this feature, all default images have
been hidden from the media-dialog, so that the user is prompted so
search for images. Some tests and tours that were relying on having
default images in the media-dialog (eg in website_blog) have been
adapted to match.

task-2316651
Linked to: odoo/iap-apps#235

closes odoo/odoo#57888

X-original-commit: 7a1308b426f94b33e2bd55e5d58e661067e26ff3
Signed-off-by: Jérémy Kersten (jke) <jke@openerp.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2020-09-16 16:14:37 +00:00
Samuel Degueldre 807ac81144 [IMP] web_editor, *: set image alt automatically, remove useless alts
*: website, web_unplash

The html alt attribute is supposed to contain a description of an
image's content (an alternative to the visual representation), a lot of
snippets contained alt attributes that were not descriptive of their
content, and would as such be counter-productive in terms of
accessibility. This commit removes those.

Previously, the alt attribute on img tags had to be set manually by the
user through the editor. This commit makes use of the description field
on ir.attachment to store image description, and sets the alt attribute
on images to that description when choosing an image from the media
dialog.

task-2091417
closes odoo/odoo#45174

Related: odoo/enterprise#9520
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2020-03-30 11:07:10 +00:00
Samuel Degueldre 5576a5f84d [IMP] web_editor, web_unsplash: improve media-dialog UX
Previously, searching for images in the database and on unsplash was
mutually exclusive, and controlled by a dropdown menu next to the search
bar. Additionally, the display of db images and unsplash images was very
different, making using the search function inconsistent and awkward.

This commit merges the unsplash search into the db search. When
searching, the first few matches from the database are displayed, then
results from unsplash.

Additionally, the layout of images has been greatly improved,
eliminating almost all padding, using some flex-box magic to allow the
images to take up all the available space without being cropped or
deformed.

The input to add an attachment by URL is now collapsed by
default, and clicking on it will expand it to reduce visual clutter.

Finally, when not in multi-images mode, the clicked image is immediately
used, rather than the user having to click it and then click the add
button, or having to double click, which was not obvious.

task-2091417
closes odoo/odoo#45174
2020-03-30 11:06:45 +00:00
Samuel Degueldre 4e14151465 [FIX] web_editor: stop media-dialog from loading all db attachments
Before this commit, the media-dialog was reading all attachments that
matched certain criteria for each tab. On large databases, this results
in the search_read call timing out, preventing the media-dialog from
opening and making all images and documents un-editable.

One unfortunate consequence of this is that we can no longer use the
firstFilter and lastFilter features, as those rely on fetching all
records and sorting them client-side, as such, this feature has been
removed entirely.

task-2198527
closes https://github.com/odoo/odoo/issues/43113

closes odoo/odoo#46895

X-original-commit: 1e91a89b78ff6019c6120c73ea1eab09b3d58d2f
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2020-03-04 14:31:06 +00:00
fja-odoo 4ebda2ec2b [FIX] web_editor, web_unsplash: fix nested div
The div that is replaced with the existing.attachments template was not
the right target and kept nesting div into each other.
The parent div of the existing.attachments now has the
o_we_existing_attachments class (the target to be replaced by itself).

Part of #33983
2019-06-19 14:55:30 +00:00
Sébastien Theys 76cf2ae82a [IMP] web_editor, *: improve media dialog attachment upload
* = web_unsplash, website

Remove iframe upload and replace it with a proper RPC. The route is now only
accepting one file at a time, which makes it easier to maintain, and allows to
process the first file as soon as it is ready, instead of having to wait on
everything.

Also fix a bug where a document could not be uploaded because it would try to
parse it as an image.

Remove filter after search result from the JS and add the corresponding
conditions in the domain to avoid processing and returning unnecessary records.

If multiple attachments exist with the same URL, now display them all to avoid
confusion.

Compute all the necessary values in the python model instead of in the JS.

Allow SVG in the widget (the server already accepted them before).

Disable multiple image upload when not in multiImages mode.

task-1930726
PR: #31208
2019-06-04 22:14:13 +02:00
Sébastien Theys 191c556d6b [IMP] web_editor, *: improve file media widget views & selection
* = web_unsplash, website_blog

Rename "image" to "attachment" when appropriate in FileWidget

Improve image selection / highlight code (now based on attachment id)

Improve image grid view:
 - Remove the row mechanism and replace it by a single loop over the images.
 - Take advantage of row wrap for a responsive display.
 - Uniformize the height (prevent tall images from moving down everything).
 - Load a miniature of the images when possible, remove the loading placeholder.
 	This should significantly reduce the download size when opening the dialog,
 	at the cost of CPU usage on the server.
 - Split the existing image view into one view for the loop and one view for the
 	image itself. This way in a following commit we can reuse the image view
 	when adding a new one, instead of having to render everything again.

task-1930726
PR: #31208
2019-06-04 22:14:13 +02:00
Sébastien Theys d4b09c1146 [IMP] web_editor, web_unsplash: remove options duplicate attributes
Since a reference to the options is already kept, there is no need to keep a
reference to each option individually.

PR: #33509
2019-05-27 16:32:52 +00:00
Sébastien Theys 8ab696dc82 [IMP] web_editor, web_unsplash: split media widget (image & document)
The common code is kept in a generic File widget, while the split allows for
easier customization.

PR: #33509
2019-05-27 16:32:52 +00:00
Christophe Simonis a97037c6d4 [MERGE] forward port branch saas-12.2 up to 78b3b650b0 2019-05-06 12:27:51 +02:00
Christophe Simonis 04acf0cc7c [MERGE] forward port branch saas-12.1 up to 2420492c26 2019-05-03 18:47:49 +02:00
Romain Derie f0bc5e0b52 [FIX] web_unsplash: correctly load images after credentials
Since media dialog and unsplash refactoring (1f847a1e2e, 78a30d44c) there was a
bug after adding credentials.
Indeed, when doing a search for the first time and no credentials are set, it
shows a form to add the missing credentials.
When saving those, it should automatically perform the initial search now that
the credentials are set.
But it was not the case anymore, it would keep reloading the credential form.
User would have to close and reopen media dialog.

closes odoo/odoo#32943

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
2019-04-25 08:53:00 +00:00
c39033bc1c [REF] web_unsplash: adapt code after jQuery update
Part of task 1896658

Co-authored-by: Aaron Bohy <aab@odoo.com>
Co-authored-by: Christophe Matthieu <chm@odoo.com>
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: David Monjoie <dmo@odoo.com>
Co-authored-by: Martin Geubelle <mge@odoo.com>
Co-authored-by: svs-odoo <svs@odoo.com>
Co-authored-by: Vincent Schippefilt <vsc@odoo.com>
2019-03-06 20:07:17 +01:00
qsm-odoo 27fca749af [REF] *: use 'frontend' system in non-website apps
* account, auth_signup, payment, portal, project, sale, sale_management,
  web_unsplash, website, website_mail, website_rating, website_sale

This commit does probably not do what is stated for all non-website apps
but it is a first step. It also uses the system in apps which could have
already used it but did not.

Part of https://github.com/odoo/odoo/pull/29442
task-1932066
2019-02-26 17:09:22 +00:00
qsm-odoo 78a30d44cf [REF] web_editor, web_unsplash: review load more feature
* Simplify the code
* Make the feature mork without unsplash
* Handle corner cases

task-1896705
2018-12-04 11:17:23 +00:00
Andrea Ulliana 1f847a1e2e [IMP] web_editor, *: improve media dialog
* web_unsplash, website_sale

- Visual improvements and cleaning in each tab: video, documents,
  pictogram, images.

- Only one search input for both the local library and unsplash.

- Replace the idea of multiple pages by adding a 'Load More' button.

task-1896705
2018-12-04 10:06:11 +00:00
Christophe Matthieu 6521cf4f66 [FIX] *: review 'frontend' pages init (web_editor.base)
* auth_password_policy_signup, auth_signup, website, portal, survey,
  web_unsplash, website

Following the new editor's merge at https://github.com/odoo/odoo/pull/29775
web_editor.base has been moved to website while it was still used by
frontend pages which do not depend on website (especially portal).

This commit moves web_editor.base to portal while waiting for
https://github.com/odoo/odoo/pull/29442. It also removes the unnecessary
dependencies to it in non-portal pages (in survey for example).
2019-01-22 17:55:00 +00:00
Christophe MatthieuandAntoine Guenet f296992317 [IMP] web_editor,*: Refactoring the wysiwyg editor and 'html' field
* Creating a new structure by transforming all the plugins in the
  library using the odoo inheritance system. Plugins are easier to
  implement with the AbstractPlugin to add Odoo behaviors.

* From now on, the methods of the library (in this case Summernote) can
  no longer be called by other modules or files. Only the wysiwyg
  widgets can access it, to simplify the updating process. The wysiwyg
  object serves as an interface.

* Depending on the options the snippets will be loaded or not, the
  editor will be in an iframe or not... all of this is transparent from
  the outside.

* Regarding iframes, all controllers related to editing have been
  removed: the new API no longer needs them. This speeds up loading,
  eases testing and removes complexity for the same
  features.

PUBLIC FEATURES

There are several public methods on the Wysiwyg class:
* Wysiwyg.prepare (WidgetParent): returns a deferred resolved when the
  library (xml, lazy, assets...) is loaded.
* Wysiwyg.getRange (DOM): returns the range (selection in the dom)
* Wysiwyg.setRange (startNode, startOffset, endNode, endOffset): creates
  a range (selection in the dom)
* Wysiwyg.setRangeFromNode (DOM, options) that creates a range from an
  element (option available to select all, start or end)

A jQuery selector was added: :o_editable, which indicates whether the
current element is editable. That is, if it is contained in a tag with
the attribute 'contentEditable = "true"' or in a tag with the class
o_editable.
Several methods are also present:
* focusIn: makes a focus and places the cursor at the beginning of the
  element
* focusInEnd: makes a focus and places the cursor at the end of the
  element
* selectContent: makes a focus and selects the content

HTML FIELD

The HTML field can receive different options:
* style-inline: {boolean} transforms a class into an inline style when
  saving and vice versa when reading.
* no-attachment: {boolean} prevents the use of attachments (in media
  dialog)
* cssEdit: {xml_id} to use a template containing the css to loaded in
  an iframe when editing
* cssReadonly: {xml_id} to use a template containing the css to load
  into an iframe when viewing in readonly
* snippets: {xml_id} snippets template (can be used with or without
  cssEdit)
* wrapper: {template} qweb static template (containing a tag:
  id = "wrapper") that will include the content during editing (removed
  on save)

MASS MAILING

A widget was created for mass mailing. There are now two fields:
body_html and body_arch.
body_arch contains the code with the class without conversion into
inline style, useful when editing and one with the inline style that is
visible in readonly mode and sent by email.
Advantage: no spreading errors, able to update css/theme, able to do
more changes when converting to inline style so that a maximum of mail
clients have an impeccable rendering.

Co-authored-by: Antoine Guenet <age@odoo.com>
2019-01-17 08:40:21 +00:00
sri-odoo b6246b3a46 [FIX] * : add missing app icons
- Add missing SVGs files
- Add icons for new apps

closes odoo/odoo#28992
2018-11-23 15:28:32 +00:00
Romain Derie 55073e3baa [FIX] web_unsplash: add unsplash searched terms in attachement name/url
Before this commit:
An unsplash image would be saved as an attachement with:
  - A name like 'x54ze78z.JPEG'
  - An url like '/unsplash/x54ze78z.JPEG'
  - A filename like 'x54ze78z.JPGED'
We would not store the searched terms in the name/url.
Then, we would not be able to search on local attachement in the media dialog
to retrieve the images based on what we searched.

Now:
We store the searched terms in the name/url so it can be used later in the
media dialog search:
  - Name like 'big_lion.jpg' (duplicates may be possible)
  - Url like '/unsplash/x54ze78z/big_lion.jpg'
  - Filename like 'unsplash_x54ze78z_big_lion.jpg'

Task-1911345
2018-11-23 14:58:48 +00:00
Romain Derie 8b1a05d9e0 [FIX] web_unsplash: don't expose client_id in network
Unsplash CEO asked us to stop exposing our key client side (even if it was
only in the browser network and previously allowed by their API team leader).

After multiple exchange, it has been negociated that:
1. Our non saas user won't be able to apply for a production key and should
   prefix they Unsplash application name by 'Odoo:'. Their key will remain in
   test mode.
   Indeed, Unsplash won't be able to review every Odoo application and ensure
   it respects the API terms and it is a real application.
2. Our saas user will query Unsplash with a dedicated enterprise key
3. The documentation should explain it all

Task-1911345
2018-11-23 14:51:07 +00:00
Romain Derie f9e34d98f1 [FIX] web_unsplash: do not fetch app_id if no Unsplash images
As empty arrays are considered truthy, the call to `/web_unsplash/get_app_id`
would always be performed even if no Unsplash images.

closes odoo/odoo#28421
2018-11-05 17:02:34 +00:00
Romain Derie 1d0e49bcff [FIX] web_unsplash: wrong doc links
Doc links were created before the doc, then the doc was merged under a
different URL.

This commit corrects the links to the Unsplash documentation.

closes odoo/odoo#28355
2018-11-02 10:31:49 +00:00