From 9dafe51f4722dbe83e2ab689d1aa74af05bd4f68 Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Wed, 14 Jan 2015 15:27:22 +0100 Subject: [PATCH] [FIX] website editor: can't select and edit an empty field html or text --- addons/website/static/src/css/editor.css | 21 ++++++++++++---- addons/website/static/src/css/editor.sass | 19 ++++++++++---- addons/website/static/src/css/website.css | 7 +++++- addons/website/static/src/css/website.sass | 6 ++--- .../website/static/src/js/website.editor.js | 25 +++++++++++++++++-- 5 files changed, 62 insertions(+), 16 deletions(-) diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 4a24b907b46..4b2dca452cd 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -68,10 +68,21 @@ display: none; } -.o_editable[data-oe-model][data-oe-type]:hover { - -moz-box-shadow: 0 0 10px 3px rgba(94, 255, 0, 0.8); - -webkit-box-shadow: 0 0 10px 3px rgba(94, 255, 0, 0.8); - box-shadow: 0 0 10px 3px rgba(94, 255, 0, 0.8); +.o_editable:not(:empty):not(:focus):hover, .o_editable[data-oe-type]:not(:focus):hover { + -moz-box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset; + -webkit-box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset; + box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset; +} +.o_editable:focus, .o_editable[data-oe-type] { + min-height: 0.8em; + min-width: 8px; +} +.o_editable.o_is_inline_editable { + display: inline-block; +} + +.editor_enable [data-oe-readonly]:hover { + cursor: default; } /* Prevent the text contents of draggable elements from being selectable. */ @@ -155,7 +166,7 @@ display: none; } -.o_editable .css_non_editable_mode_hidden { +.editor_enable .css_non_editable_mode_hidden { display: block !important; } diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 8465df4a6e9..73b04009833 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -62,10 +62,19 @@ .arrow display: none -.o_editable[data-oe-model][data-oe-type]:hover - -moz-box-shadow: 0 0 10px 3px rgba(94, 255, 0, 0.8) - -webkit-box-shadow: 0 0 10px 3px rgba(94, 255, 0, 0.8) - box-shadow: 0 0 10px 3px rgba(94, 255, 0, 0.8) +.o_editable + &:not(:empty),&[data-oe-type] + &:not(:focus):hover + -moz-box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset + -webkit-box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset + box-shadow: rgba(94, 255, 0, 0.8) 0 0 5px 2px inset + &:focus,&[data-oe-type] + min-height: 0.8em + min-width: 8px + &.o_is_inline_editable + display: inline-block +.editor_enable [data-oe-readonly]:hover + cursor: default // }}} @@ -133,7 +142,7 @@ .o_editable .css_editable_mode_hidden display: none -.o_editable .css_non_editable_mode_hidden +.editor_enable .css_non_editable_mode_hidden display: block !important .o_editable .media_iframe_video .css_editable_mode_display diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css index cacf74d4108..43807b7a76b 100644 --- a/addons/website/static/src/css/website.css +++ b/addons/website/static/src/css/website.css @@ -296,7 +296,6 @@ html, body, #wrapwrap { } #wrapwrap > footer { height: 100%; - background: #eff8f8; background: rgba(200, 200, 200, 0.1); } @@ -827,6 +826,12 @@ span[data-oe-type="monetary"] { margin: 40px auto; } +.oe_website_overflow_ellipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + .oe_website_spinner { width: 121px; } diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass index 23f69baf0b0..f937379b81e 100644 --- a/addons/website/static/src/css/website.sass +++ b/addons/website/static/src/css/website.sass @@ -660,9 +660,9 @@ span[data-oe-type="monetary"] margin: 40px auto .oe_website_overflow_ellipsis - white-space:nowrap - overflow:hidden - text-overflow:ellipsis + white-space: nowrap + overflow: hidden + text-overflow: ellipsis .oe_website_spinner width: 121px diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js index a229b18aa32..a5c6e0a5209 100644 --- a/addons/website/static/src/js/website.editor.js +++ b/addons/website/static/src/js/website.editor.js @@ -915,7 +915,6 @@ define(['summernote/summernote'], function () { this.$('#website-top-view').hide(); this.$el.show(); this.$('#website-top-edit').show(); - $('.css_non_editable_mode_hidden').removeClass("css_non_editable_mode_hidden"); if (!no_editor) { this.rte.start_edition(); @@ -943,7 +942,7 @@ define(['summernote/summernote'], function () { var defs = $('.o_editable') .filter('.o_dirty') .removeAttr('contentEditable') - .removeClass('o_dirty o_editable oe_carlos_danger') + .removeClass('o_dirty o_editable oe_carlos_danger o_is_inline_editable') .map(function () { var $el = $(this); @@ -1207,6 +1206,12 @@ define(['summernote/summernote'], function () { $('.o_editable').each(function () { var node = this; var $node = $(node); + + // add class to display inline-block for empty t-field + if(window.getComputedStyle(node).display === "inline") { + $node.addClass('o_is_inline_editable'); + } + // start element observation observer.observe(node, OBSERVER_CONFIG); $(node).one('content_changed', function () { @@ -1221,6 +1226,22 @@ define(['summernote/summernote'], function () { $('#wrapwrap, .o_editable').on('click', '*', function (event) { event.preventDefault(); }); + + $('body').addClass("editor_enable"); + + $(document) + .tooltip({ + selector: '[data-oe-readonly]', + container: 'body', + trigger: 'hover', + delay: { "show": 1000, "hide": 100 }, + placement: 'bottom', + title: _t("Readonly field") + }) + .on('click', function () { + $(this).tooltip('hide'); + }); + self.trigger('rte:ready'); } },