From f5912cbcb3118923bf26a9af566b1a2993f13773 Mon Sep 17 00:00:00 2001 From: Romain Derie Date: Fri, 16 Mar 2018 18:08:37 +0100 Subject: [PATCH] [IMP] website: make it more noticeable when a page is unpublished Before this commit, 2 usability issues were reported: 1. Some people would get stuck with unpublished content without even knowing it since they would not understand the page is unpublished. 2. People would have a hard time finding the publish button (small toggle on the navbar). Now: 1. We now display a red ribbon on the top right corner specifying the page is unpublished. Hopefully it can't be missed. 2. This publish button will be more visible for unpublished content since it will be red (danger) color. Hopefully people will notice it at first look. Note: It is implemented in a generic way so any 'o_switch' can be turned into this version by simply adding the 'o_switch_danger' class to it. task-44005 Closes #23282 --- .../src/less/web_editor.ui.components.less | 10 +++++- .../static/src/js/content/website_root.js | 1 + .../src/less/website.ui.components.less | 35 ++++++++++++++++++- .../views/website_navbar_templates.xml | 7 +++- 4 files changed, 50 insertions(+), 3 deletions(-) diff --git a/addons/web_editor/static/src/less/web_editor.ui.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less index 53d2296a464..704692babca 100644 --- a/addons/web_editor/static/src/less/web_editor.ui.components.less +++ b/addons/web_editor/static/src/less/web_editor.ui.components.less @@ -28,7 +28,7 @@ width: @o-switch-size - 0.2; height: @o-switch-size - 0.2; margin-top: 0.1ex; - margin-left: 0.3ex; + margin-left: 0.1ex; border-radius: 100rem; .transition(all 0.3s @o-we-md-ease); box-shadow: 0 1px 1px darken(@o-switch-inactive-color,35%), inset 0 0 0 1px lighten(@o-switch-inactive-color,10%); @@ -44,6 +44,14 @@ } } } + &.o_switch_danger { + > input { + &:not(:checked) + span { + box-shadow: none; + .o-linear-gradient(0deg, lighten(@brand-danger, 5%), darken(@brand-danger, 5%)); + } + } + } } .dropdown-menu label .o_switch { diff --git a/addons/website/static/src/js/content/website_root.js b/addons/website/static/src/js/content/website_root.js index ab1de2ea357..6937545c5a8 100644 --- a/addons/website/static/src/js/content/website_root.js +++ b/addons/website/static/src/js/content/website_root.js @@ -232,6 +232,7 @@ var WebsiteRoot = BodyManager.extend({ }) .done(function (result) { $data.toggleClass("css_unpublished css_published"); + $(".ribbon-publish.ribbon-wrapper").toggleClass("css_unpublished css_published"); $data.find('input').prop("checked", result); $data.parents("[data-publish]").attr("data-publish", +result ? 'on' : 'off'); }) diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less index 8cbf1ba7d98..132fd7ba70d 100644 --- a/addons/website/static/src/less/website.ui.components.less +++ b/addons/website/static/src/less/website.ui.components.less @@ -481,4 +481,37 @@ body .modal { opacity: 0.5; } } -} \ No newline at end of file +} + +// Unpublished page's ribbon +.ribbon-publish.ribbon-wrapper { + width: 200px; + height: 200px; + z-index: 5; + position: absolute; + right: 0; + overflow: hidden; + &.css_published { + display:none; + } + &.css_unpublished { + display:block; + } +} +.ribbon-publish .ribbon { + font: bold 15px Sans-Serif; + color: white; + text-align: center; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + position: relative; + padding: 7px 65px; + right: 27px; + top: 44px; + width: 300px; + cursor: default; + white-space: unset; + word-wrap:break-word; +} diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml index 7dc3cc7e688..3de913cc079 100644 --- a/addons/website/views/website_navbar_templates.xml +++ b/addons/website/views/website_navbar_templates.xml @@ -5,6 +5,11 @@ + +
+
Unpublished
+
+