diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css index 2b5de84c05b..7e85339aaaa 100644 --- a/addons/website/static/src/css/editor.css +++ b/addons/website/static/src/css/editor.css @@ -283,32 +283,19 @@ table.editorbar-panel td.selected { /* ---- SNIPPET MANIPULATOR ---- */ .oe_overlay { - display: block; + display: none; position: absolute; background: transparent; border-radius: 3px; - opacity: 0; transition: opacity 100ms linear; box-sizing: border-box; pointer-events: none; } -.oe_overlay.oe_hover { - opacity: 1; - cursor: pointer; -} -.oe_overlay.oe_selected, .oe_overlay.oe_active { - opacity: 1; +.oe_overlay.oe_active { + display: block; border-style: dashed; border-width: 1px; box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3), 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset; -} -.oe_overlay.oe_selected { - border-color: rgba(0, 153, 255, 0.5); -} -.oe_overlay .oe_handle { - display: none !important; -} -.oe_overlay.oe_active { border-color: rgba(153, 0, 255, 0.5); } .oe_overlay.oe_active .oe_handle { @@ -356,39 +343,22 @@ table.editorbar-panel td.selected { width: 100%; text-align: center; top: -11px; - display: none; z-index: 1002; } -.oe_overlay .oe_overlay_options > * { - margin: 0 -2px 0 -3px; - display: inline-block; -} -.oe_overlay .oe_overlay_options * { - border-radius: 0; -} .oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a { pointer-events: auto; cursor: pointer; } +.oe_overlay .oe_overlay_options .dropdown { + display: inline-block; +} .oe_overlay .oe_overlay_options .dropdown-menu { text-align: left; min-width: 180px; } -.oe_overlay .oe_overlay_options .oe_label { - position: absolute; - top: 3px; - right: 6px; - background: white; - font-size: 75%; - color: rgba(153, 0, 255, 0.5); - padding: 0 5px; -} .oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input { display: block; } -.oe_overlay.oe_active .oe_overlay_options { - display: block; -} .oe_handle { pointer-events: auto; diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass index 20fa98ec96d..f33b15cdb92 100644 --- a/addons/website/static/src/css/editor.sass +++ b/addons/website/static/src/css/editor.sass @@ -249,27 +249,18 @@ table.editorbar-panel /* ---- SNIPPET MANIPULATOR ---- */ .oe_overlay - display: block + display: none position: absolute background: transparent border-radius: 3px - opacity: 0 transition: opacity 100ms linear box-sizing: border-box pointer-events: none - &.oe_hover - opacity: 1 - cursor: pointer - &.oe_selected, &.oe_active - opacity: 1 + &.oe_active + display: block border-style: dashed border-width: 1px box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset - &.oe_selected - border-color: rgba(0, 153, 255, 0.5) - .oe_handle - display: none !important - &.oe_active border-color: rgba(153, 0, 255, 0.5) .oe_handle display: block !important @@ -310,31 +301,17 @@ table.editorbar-panel width: 100% text-align: center top: -11px - display: none z-index: 1002 - > * - margin: 0 -2px 0 -3px - display: inline-block - * - border-radius: 0 .btn, a pointer-events: auto cursor: pointer + .dropdown + display: inline-block .dropdown-menu text-align: left min-width: 180px - .oe_label - position: absolute - top: 3px - right: 6px - background: #fff - font-size: 75% - color: rgba(153, 0, 255, 0.5) - padding: 0 5px .dropdown-menu select,.dropdown-menu input display: block - &.oe_active .oe_overlay_options - display: block .oe_handle pointer-events: auto diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js index db2545ada29..7defd7b32ad 100644 --- a/addons/website/static/src/js/website.snippets.js +++ b/addons/website/static/src/js/website.snippets.js @@ -276,14 +276,14 @@ if($target.length && !self.editor_busy) { if($selected_target != $target){ if($selected_target && $selected_target.data('overlay')){ - $selected_target.data('overlay').removeClass('oe_selected'); + $selected_target.data('overlay').removeClass('oe_hover'); } $selected_target = $target; self.create_overlay($target); - $target.data('overlay').addClass('oe_selected'); + $target.data('overlay').addClass('oe_hover'); } } else if($selected_target && $selected_target.data('overlay')) { - $selected_target.data('overlay').removeClass('oe_selected'); + $selected_target.data('overlay').removeClass('oe_hover'); } }); }, @@ -861,7 +861,6 @@ var cursor = $handle.css("cursor")+'-important'; $("body").addClass(cursor); - self.$overlay.addClass('oe_hover'); var body_mousemove = function (event){ event.preventDefault(); @@ -940,10 +939,16 @@ var beginCol = Number(beginClass.match(/col-md-([0-9]+)|$/)[1] || 0); var beginOffset = Number(beginClass.match(/col-md-offset-([0-9-]+)|$/)[1] || beginClass.match(/col-lg-offset-([0-9-]+)|$/)[1] || 0); var offset = Number(this.grid.w[0][current].match(/col-md-offset-([0-9-]+)|$/)[1] || 0); - + if (offset < 0) { + offset = 0; + } + var colSize = beginCol - (offset - beginOffset); + if (colSize <= 0) { + colSize = 1; + offset = beginOffset + beginCol - 1; + } this.$target.attr("class",this.$target.attr("class").replace(/\s*(col-lg-offset-|col-md-offset-|col-md-)([0-9-]+)/g, '')); - var colSize = beginCol - (offset - beginOffset); this.$target.addClass('col-md-' + (colSize > 12 ? 12 : colSize)); if (offset > 0) { this.$target.addClass('col-md-offset-' + offset); diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml index 279a362fec7..67dc7a5696b 100644 --- a/addons/website/static/src/xml/website.snippets.xml +++ b/addons/website/static/src/xml/website.snippets.xml @@ -73,14 +73,16 @@
- -