diff options
| author | Aaron Bohy <aab@odoo.com> | 2020-01-30 11:23:57 +0000 |
|---|---|---|
| committer | Aaron Bohy <aab@odoo.com> | 2020-01-30 12:57:35 +0000 |
| commit | 23490fc22fbd0174ace5558c9509b1bb856e03d2 (patch) | |
| tree | d77067ef3be22c660451ec8684bdd70c8ddced85 /addons/web/static/src | |
| parent | b0500b68585b87dcd6e07275fdafed8e50bc40f0 (diff) | |
[IMP] web: web_ribbon: handle longer labels
This commit implements a simple heuristic to display longer texts
inside the web_ribbon widget: we adapt the font size according to
the text length, and we tolerate to display it on several lines.
This commit also allows to specify a tooltip in the xml (with
tooltip attribute).
Task 2185023
closes odoo/odoo#44279
Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>
Diffstat (limited to 'addons/web/static/src')
| -rw-r--r-- | addons/web/static/src/js/widgets/ribbon.js | 19 | ||||
| -rw-r--r-- | addons/web/static/src/scss/ribbon.scss | 15 | ||||
| -rw-r--r-- | addons/web/static/src/xml/ribbon.xml | 4 |
3 files changed, 30 insertions, 8 deletions
diff --git a/addons/web/static/src/js/widgets/ribbon.js b/addons/web/static/src/js/widgets/ribbon.js index 37ebdbf75c1..a682c65a0af 100644 --- a/addons/web/static/src/js/widgets/ribbon.js +++ b/addons/web/static/src/js/widgets/ribbon.js @@ -5,6 +5,7 @@ odoo.define('web.ribbon', function (require) { * This widget adds a ribbon on the top right side of the form * * - You can specify the text with the title attribute. + * - You can specify the tooltip with the tooltip attribute. * - You can specify a background color for the ribbon with the bg_color attribute * using bootstrap classes : * (bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, @@ -21,12 +22,24 @@ odoo.define('web.ribbon', function (require) { template: 'web.ribbon', xmlDependencies: ['/web/static/src/xml/ribbon.xml'], + /** + * @param {Object} options + * @param {string} options.attrs.title + * @param {string} options.attrs.text same as title + * @param {string} options.attrs.tooltip + * @param {string} options.attrs.bg_color + */ init: function (parent, data, options) { this._super.apply(this, arguments); this.text = options.attrs.title || options.attrs.text; - this.bgColor = options.attrs.bg_color; - } - + this.tooltip = options.attrs.tooltip; + this.className = options.attrs.bg_color ? options.attrs.bg_color : 'bg-success'; + if (this.text.length > 15) { + this.className += ' o_small'; + } else if (this.text.length > 10) { + this.className += ' o_medium'; + } + }, }); widgetRegistry.add('web_ribbon', RibbonWidget); diff --git a/addons/web/static/src/scss/ribbon.scss b/addons/web/static/src/scss/ribbon.scss index ea3e3ed4013..197fd30d4e3 100644 --- a/addons/web/static/src/scss/ribbon.scss +++ b/addons/web/static/src/scss/ribbon.scss @@ -15,18 +15,25 @@ & span { z-index: 1; position: absolute; - display: block; + display: grid; + align-items: center; width: 225px; - padding: 15px 40px; + height: 48px; + padding: 0 44px; 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; + user-select: none; + &.o_small { + font-size: 12px; + } + &.o_medium { + font-size: 15px; + } } &-top-right { diff --git a/addons/web/static/src/xml/ribbon.xml b/addons/web/static/src/xml/ribbon.xml index d3248efa9ac..87df25d2145 100644 --- a/addons/web/static/src/xml/ribbon.xml +++ b/addons/web/static/src/xml/ribbon.xml @@ -3,7 +3,9 @@ <t t-name="web.ribbon"> <div class="ribbon ribbon-top-right"> - <span t-att-class="widget.bgColor ? widget.bgColor : 'bg-success'"><t t-esc="widget.text"/></span> + <span t-att-class="widget.className" t-att-title="widget.tooltip"> + <t t-esc="widget.text"/> + </span> </div> </t> |