Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[IMP] web_editor, website: add new 'Countdown' snippet #39773

Open
wants to merge 22 commits into
base: master
from

Conversation

@rdeodoo
Copy link
Contributor

rdeodoo commented Nov 4, 2019

This commit introduces a new snippet: Countdown.

The countdown snippet is composed of 4 circle countdown, one for every time
unit: seconds, minutes, hours and days.

On countdown ends, 3 possible actions:

  1. Nothing
  2. Show message: show a message once the countdown ends. The message will be
    displayed bellow the countdown (stopped on 0).
    The message can be edited through the website builder.
  3. Redirect: redirect the user to the chosen URL. If the user is on the page at
    the exact moment the countdown reach 0, the user will be redirected
    automatically. If the user lands on the page after the countdown has reached
    0, there will be no redirection and the link will be shown bellow the
    countdown (stopped on 0).

The countdown layout can be customized in multiple ways:

  1. By choosing to hide some time units. For instance, seconds can be hidden or
    only days shown.
  2. By changing its design (plain background, thin circle etc).
  3. By changing its size between small/medium/large.

task-2093081

@robodoo robodoo added the seen 🙂 label Nov 4, 2019
@rdeodoo rdeodoo requested a review from qsm-odoo Nov 4, 2019
@rdeodoo

This comment has been minimized.

Copy link
Contributor Author

rdeodoo commented Nov 4, 2019

@qsm-odoo Only last commit to be reviewed. Every dev is inside. The one before is the fix about setInterval widget issue we wrote on my computer.

@rdeodoo rdeodoo force-pushed the odoo-dev:master-imp-countdown-widget-rde branch from 72a1440 to 9e971c9 Nov 4, 2019
@C3POdoo C3POdoo added the RD label Nov 4, 2019
addons/website/views/snippets.xml Outdated Show resolved Hide resolved
<we-button data-end-action="redirect">Redirect</we-button>
<we-button data-end-action="message">Show Message</we-button>
</we-select>
<we-input string="URL" data-redirect-url="" data-unit="" data-default-value="/my-awesome-page"/>

This comment has been minimized.

Copy link
@qsm-odoo

qsm-odoo Nov 5, 2019

Contributor

This input should suggest website pages (we have an utility method to do that).

Also did you check that the case where an user creates a page with a publishing date and a countdown which ends at the same date ? Won't the page be published one second too late ? Also would this not break SEO to have a link in the DOM leading to a 404 while that page is not published ? (I don't know, this is a real question).

This comment has been minimized.

Copy link
@rdeodoo

rdeodoo Nov 5, 2019

Author Contributor
  • Indeed, I already did it in the page properties. Do you want a new we-urlselector? Or should I just use a regular we-input as it is now and init the autocomplete on it in the countdown snippet option?
    Second one I guess?

  • That would require the diff compute and the redirection to be instantaneous IMO, which is impossible.
    But I will double check, leave this review unresolved for now.

This comment has been minimized.

Copy link
@qsm-odoo

qsm-odoo Nov 5, 2019

Contributor
  • Second option yes
  • ? :)

This comment has been minimized.

Copy link
@rdeodoo

rdeodoo Nov 7, 2019

Author Contributor
  • Done
  • As discussed, there is no python action involved on a page date publishing, it is just automatically accessible starting from that date (if the page is also published) when reading the website_published field which is checking the date + publish state.
    I am not sure why but yeah, it is required to wait a bit before landing on the page, 500ms seems enough.
data-end-time="1604140819">
<div class="container">
<div class="row">
<div class="col text-center mt8 mb8">

This comment has been minimized.

Copy link
@qsm-odoo

qsm-odoo Nov 5, 2019

Contributor

In fact, should not we make this snippet an inner content snippet without section and container etc ? cc @sbuhl

This comment has been minimized.

Copy link
@rdeodoo

rdeodoo Nov 7, 2019

Author Contributor

Was this discussed finally?

@rdeodoo rdeodoo force-pushed the odoo-dev:master-imp-countdown-widget-rde branch from 9e971c9 to d0db2b5 Nov 5, 2019
Copy link
Contributor Author

rdeodoo left a comment

I will let you resolve the review items as I left some questions on some of them.

addons/website/views/snippets.xml Outdated Show resolved Hide resolved
addons/website/views/snippets.xml Outdated Show resolved Hide resolved
<we-button data-end-action="redirect">Redirect</we-button>
<we-button data-end-action="message">Show Message</we-button>
</we-select>
<we-input string="URL" data-redirect-url="" data-unit="" data-default-value="/my-awesome-page"/>

This comment has been minimized.

Copy link
@rdeodoo

rdeodoo Nov 5, 2019

Author Contributor
  • Indeed, I already did it in the page properties. Do you want a new we-urlselector? Or should I just use a regular we-input as it is now and init the autocomplete on it in the countdown snippet option?
    Second one I guess?

  • That would require the diff compute and the redirection to be instantaneous IMO, which is impossible.
    But I will double check, leave this review unresolved for now.

@rdeodoo rdeodoo force-pushed the odoo-dev:master-imp-countdown-widget-rde branch from d0db2b5 to befb783 Nov 5, 2019
@rdeodoo

This comment has been minimized.

Copy link
Contributor Author

rdeodoo commented Nov 5, 2019

s_countdown

@qsm-odoo

This comment has been minimized.

Copy link
Contributor

qsm-odoo commented Nov 5, 2019

s_countdown

:')

@KangOl KangOl force-pushed the odoo:master branch from 86c80d3 to ab6d0c3 Nov 6, 2019
@rdeodoo rdeodoo force-pushed the odoo-dev:master-imp-countdown-widget-rde branch from befb783 to 9969764 Nov 8, 2019
qsm-odoo and others added 17 commits Oct 23, 2019
* web_editor, website_blog, mass_mailing

In preparation of the new left panel UI, remove all snippet options UI
icons as we do not want them anymore to simplify the UI.

Part of #38959
task-2066614
Not relevant anymore in the new editor UI.

Part of #38959
task-2066614
* website, website_blog, website_form, website_sale

Part of #38959
task-2066614
* website

Now snippet options can be defined as a button which can be placed next
to the clone and delete buttons, through a new "isTopOption" method.

This commit also review the buttons and title design and take advantage
of the feature to review the way snippets options are added in their
container (that code indeed contained useless part since 13.0).

Part of #38959
task-2066614
+ refactor style of icon buttons

Part of #38959
task-2066614
This commit adds buttons to move sections up or down and to move columns
left or right, which is more user-friendly than drag-and-drop in some
cases.

Part of #38959
maintask-2066614
task-2088265
-> move the move buttons next to the drag button

Part of #38959
task-2066614
* web_editor, website_sale

Part of #38959
task-2066614
* web_editor

Previously, the user could choose their anchor names using a modal
window, anchor names also have weird rules, this was not a great user
experience.

This commit makes the anchor button generate anchors automatically based
on the first title in a section, or the snippet name if there are none.
If the anchor name is already taken, it is suffixed by a number. After
it has been generated, it is also copied to the clipboard and the user
is shown a toast to tell them the anchor has been generated and copied.
The anchor is displayed in the toast along with an edit button that will
open the same edition modal as previously, but it is now less
restrictive.

Part of #38959
maintask-2066614
task-2088270
Currently we have:
- a colorpicker for background color of snippets
- a colorpicker for foreground and background text (topbar)
- a colorpicker for menu/footer/navbar/etc
These 3 are separate colorpickers with different options.

After this Commit
All 3 will use the same color palette wich allow you to select
theme color, common colors, custom color and transparent filter.

Part of #38959
maintask-2066614
task-2087383
*: website, mass_mailing

Part of #38959
maintask-2066614
task-2087383
qsm-odoo and others added 4 commits Oct 17, 2019
* web_editor

This commit adds a slide counter in carousel snippets option menu, as
well as left and right buttons, this way the user can manage their
slides entirely from the options, instead of having to go to the block
itself to navigate to where they want before going back to the option
menu to add or remove a slide.

Part of #38959
maintask-2066614
task-2088291

Co-authored-by: Samuel Degueldre <sad@odoo.com>
This will allow to do the following:

1) Show a preview overlay over an element
2) Block preview overlays -> the overlay at step 1 stays no matter what
3) Encourage the user to do something that edits what the preview
   overlay is currently showing.
4) The edition is finished, go back to normal by unblocking preview
   overlays.

Part of #38959
task-2066614
Previously, background size and position for snippets was configured in
a modal, the user could choose a "focus point", which is rather
unintuitive. They could also choose to use the "contain" background
mode, with or without repeat, or a third option, where they could
customize everything, from the background size in both directions to
whether to repeat the background in only one or in both directions.

This commit streamlines the background-sizing options, only the "cover"
and "repeat pattern" options have been kept, as they cover almost every
use case. Their configuration has been moved into the options menu for
consistency with the rest of the editor, and the background's position
is now chosen by clicking on the corresponding menu option, and dragging
the background to the desired place.

Part of #38959
maintask-2066614
task-2088304
Now, the editor UI can suggest options the same way as select-class but
for editing a data attribute.

Part of #38959
task-2066614
@rdeodoo rdeodoo force-pushed the odoo-dev:master-imp-countdown-widget-rde branch 2 times, most recently from c195352 to b370a34 Nov 8, 2019
This commit introduces a new snippet: Countdown.

The countdown snippet is composed of 4 circle countdown, one for every time
unit: seconds, minutes, hours and days.

On countdown ends, 3 possible actions:
1. Nothing
2. Show message: show a message once the countdown ends. The message will be
   displayed bellow the countdown (stopped on 0).
   The message can be edited through the website builder.
3. Redirect: redirect the user to the chosen URL. If the user is on the page at
   the exact moment the countdown reach 0, the user will be redirected
   automatically. If the user lands on the page after the countdown has reached
   0, there will be no redirection and the link will be shown bellow the
   countdown (stopped on 0).

The countdown layout can be customized in multiple ways:
1. By choosing to hide some time units. For instance, seconds can be hidden or
   only days shown.
2. By changing its design (plain background, thin circle etc).
3. By changing its size between small/medium/large.

task-2093081
@rdeodoo rdeodoo force-pushed the odoo-dev:master-imp-countdown-widget-rde branch from b370a34 to 619c347 Nov 12, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.