From 82d563b035cf53f238635f6e0dbf4513204b8007 Mon Sep 17 00:00:00 2001 From: Patrick Hoste Date: Tue, 13 Aug 2019 11:26:14 +0000 Subject: [PATCH 1/3] [REF] web: make ribbon widget great and user friendly PURPOSE Have a nice ribbon widget to display state of records: part II SPECIFICATIONS A POC for a new ribbon widget has been recently introduced at 02fbb737b96ab8e35123219db5cdcc008729953b. It adds a ribbon on the top right of a form to make some status more visible and more user friendly. This commit greatly improves the design of this ribbon in order to have a real ribbon. You have to specify the text attribute to show the text on the ribbon. You can also specify a bg_color attribute to color the background with a bootstrap background color class according to the business meaning of the flag displayed in the ribbon. LINKS Task ID : 2032621 PR : #34662 --- .../static/src/js/views/form/form_renderer.js | 2 +- addons/web/static/src/js/widgets/ribbon.js | 2 +- .../web/static/src/scss/form_view_extra.scss | 1 + addons/web/static/src/scss/ribbon.scss | 57 +++++++++++++++++++ addons/web/static/src/xml/ribbon.xml | 6 +- addons/web/views/webclient_templates.xml | 2 +- 6 files changed, 65 insertions(+), 5 deletions(-) create mode 100644 addons/web/static/src/scss/ribbon.scss diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js index 7f37d1b9059..decea8867fc 100644 --- a/addons/web/static/src/js/views/form/form_renderer.js +++ b/addons/web/static/src/js/views/form/form_renderer.js @@ -923,7 +923,7 @@ var FormRenderer = BasicRenderer.extend({ */ _renderTagSheet: function (node) { this.has_sheet = true; - var $sheet = $('
', {class: 'clearfix o_form_sheet'}); + var $sheet = $('
', {class: 'clearfix position-relative o_form_sheet'}); $sheet.append(node.children.map(this._renderNode.bind(this))); return $sheet; }, diff --git a/addons/web/static/src/js/widgets/ribbon.js b/addons/web/static/src/js/widgets/ribbon.js index 719b98e21b6..404ae256487 100644 --- a/addons/web/static/src/js/widgets/ribbon.js +++ b/addons/web/static/src/js/widgets/ribbon.js @@ -32,4 +32,4 @@ odoo.define('web.ribbon', function (require) { widgetRegistry.add('web_ribbon', RibbonWidget); return RibbonWidget; -}); \ No newline at end of file +}); diff --git a/addons/web/static/src/scss/form_view_extra.scss b/addons/web/static/src/scss/form_view_extra.scss index 5a7ed2bac66..49d14438e33 100644 --- a/addons/web/static/src/scss/form_view_extra.scss +++ b/addons/web/static/src/scss/form_view_extra.scss @@ -17,6 +17,7 @@ border: 1px solid #c8c8d3; box-shadow: 0 4px 20px rgba(0,0,0,0.15); background: white; + overflow: hidden; margin: $o-sheet-vpadding*0.2 auto; @include media-breakpoint-up(md) { diff --git a/addons/web/static/src/scss/ribbon.scss b/addons/web/static/src/scss/ribbon.scss new file mode 100644 index 00000000000..ea3e3ed4013 --- /dev/null +++ b/addons/web/static/src/scss/ribbon.scss @@ -0,0 +1,57 @@ +.ribbon { + width: 150px; + height: 150px; + overflow: hidden; + position: absolute; + + &::before, &::after { + position: absolute; + z-index: -1; + content: ''; + display: block; + border: 5px solid #2980b9; + } + + & span { + z-index: 1; + position: absolute; + display: block; + width: 225px; + padding: 15px 40px; + box-shadow: 0 5px 10px rgba(0, 0, 0, .1); + color: #fff; + font: 700 18px/1 'Lato', sans-serif; + text-shadow: 0 1px 1px rgba(0, 0, 0, .2); + text-transform: uppercase; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &-top-right { + margin-top: -$o-sheet-vpadding; + right: 0; + + &::before, &::after { + border-top-color: black; + border-right-color: black; + } + + &::before { + top: 0; + left: 0; + } + + &::after { + bottom: 0; + right: 0; + } + + & span { + left: -15px; + top: 30px; + transform: rotate(45deg); + } + } +} diff --git a/addons/web/static/src/xml/ribbon.xml b/addons/web/static/src/xml/ribbon.xml index f8d3efdbb72..d3248efa9ac 100644 --- a/addons/web/static/src/xml/ribbon.xml +++ b/addons/web/static/src/xml/ribbon.xml @@ -2,7 +2,9 @@ \ No newline at end of file + diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml index 8f18c4cfcdf..120041ed4bd 100644 --- a/addons/web/views/webclient_templates.xml +++ b/addons/web/views/webclient_templates.xml @@ -218,7 +218,7 @@ - + From c52c8da4914da9e36e0518ce35ae02bf09206b1f Mon Sep 17 00:00:00 2001 From: Patrick Hoste Date: Tue, 13 Aug 2019 11:27:21 +0000 Subject: [PATCH 2/3] [IMP] crm: replace Won / Lost bootstrap badges by ribbon widgets PURPOSE Have a nice ribbon widget to display state of records: part II SPECIFICATIONS Replace Won / Lost bootstrap badges by ribbon widgets in lead / opportunity form view. LINKS Task ID : 2032621 PR : #34662 --- addons/crm/views/crm_lead_views.xml | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/addons/crm/views/crm_lead_views.xml b/addons/crm/views/crm_lead_views.xml index fb2c8958962..677da78d25e 100644 --- a/addons/crm/views/crm_lead_views.xml +++ b/addons/crm/views/crm_lead_views.xml @@ -66,11 +66,10 @@ attrs="{'invisible': ['&', ('probability', '=', 0), ('active', '=', False)]}"/> -
-
Lost
-
Won
+ +