From 7d6dd7070da164683bf77cd67d4e7bbfd16401cf Mon Sep 17 00:00:00 2001 From: Christophe Matthieu Date: Mon, 17 Feb 2014 11:04:18 +0100 Subject: [PATCH] [FIX] website: snippet resizing; Users don't understand when they can drag arrows to resize col-md-XX. They try, it does not work, so they think the feature does not work. So, horizontal arrow on col-md-XX snippets should use an icon according to what you can do bzr revid: chm@openerp.com-20140217100418-iwdrv36a4u2inasn --- addons/website/static/src/css/snippets.css | 26 ++++++++- addons/website/static/src/css/snippets.sass | 27 ++++++++- .../static/src/js/website.snippets.editor.js | 55 ++++++++++++------- 3 files changed, 83 insertions(+), 25 deletions(-) diff --git a/addons/website/static/src/css/snippets.css b/addons/website/static/src/css/snippets.css index 00235b3f028..4d6d61c7db1 100644 --- a/addons/website/static/src/css/snippets.css +++ b/addons/website/static/src/css/snippets.css @@ -278,7 +278,8 @@ cursor: w-resize; } .oe_overlay .oe_handle.e:before { - content: "\F061"; + content: "\f0d9-\f0da"; + line-height: 16px; } .oe_overlay .oe_handle.s { top: auto; @@ -327,7 +328,8 @@ cursor: e-resize; } .oe_overlay .oe_handle.w:before { - content: "\F060"; + content: "\f0d9-\f0da"; + line-height: 16px; } .oe_overlay .oe_handle.n { left: 2px; @@ -336,7 +338,7 @@ cursor: s-resize; } .oe_overlay .oe_handle.n:before { - content: "\F062"; + content: "\f062"; } .oe_overlay .icon.btn { display: inline-block; @@ -362,6 +364,24 @@ .oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input { display: block; } +.oe_overlay.block-w-left .w:before { + content: "\F061" !important; +} +.oe_overlay.block-w-right .w:before { + content: "\F060" !important; +} +.oe_overlay.block-w-left.block-w-right .w { + display: none !important; +} +.oe_overlay.block-e-left .e:before { + content: "\F061" !important; +} +.oe_overlay.block-e-right .e:before { + content: "\F060" !important; +} +.oe_overlay.block-e-left.block-e-right .e { + display: none !important; +} .s-resize-important, .s-resize-important * { cursor: s-resize !important; diff --git a/addons/website/static/src/css/snippets.sass b/addons/website/static/src/css/snippets.sass index ed9c38731db..82a983a30e4 100644 --- a/addons/website/static/src/css/snippets.sass +++ b/addons/website/static/src/css/snippets.sass @@ -147,6 +147,7 @@ .resize_editor_busy background-color: rgba(0,0,0,0.3) + .oe_overlay display: none position: absolute @@ -201,7 +202,8 @@ right: -6px cursor: w-resize &:before - content: "\F061" + content: "\f0d9-\f0da" + line-height: 16px &.s top: auto left: 2px @@ -240,14 +242,15 @@ left: -6px cursor: e-resize &:before - content: "\F060" + content: "\f0d9-\f0da" + line-height: 16px &.n left: 2px width: 100% top: -6px cursor: s-resize &:before - content: "\F062" + content: "\f062" .icon.btn display: inline-block @@ -269,6 +272,24 @@ .dropdown-menu select,.dropdown-menu input display: block + &.block-w-left + .w:before + content: "\F061" !important + &.block-w-right + .w:before + content: "\F060" !important + &.block-w-left.block-w-right .w + display: none !important + &.block-e-left + .e:before + content: "\F061" !important + &.block-e-right + .e:before + content: "\F060" !important + &.block-e-left.block-e-right .e + display: none !important + + .s-resize-important, .s-resize-important * cursor: s-resize !important .n-resize-important, .n-resize-important * diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js index f6e958341ae..fe5b7460030 100644 --- a/addons/website/static/src/js/website.snippets.editor.js +++ b/addons/website/static/src/js/website.snippets.editor.js @@ -1176,9 +1176,26 @@ this.$overlay.find('.oe_snippet_remove').toggleClass("hidden", !this.$target.siblings().length && this.$target.parents("[data-snippet-id]:first").find("[data-snippet-id='colmd']").length > 1); }, + change_cursor: function () { + var _class = this.$target.attr("class"); + + var col = _class.match(/col-md-([0-9-]+)/i); + col = col ? +col[1] : 0; + + var offset = _class.match(/col-md-offset-([0-9-]+)/i); + offset = offset ? +offset[1] : 0; + + var overlay_class = this.$overlay.attr("class").replace(/(^|\s+)block-[^\s]*/gi, ''); + if (col+offset >= 12) overlay_class+= " block-e-right"; + if (col === 1) overlay_class+= " block-w-right block-e-left"; + if (offset === 0) overlay_class+= " block-w-left"; + + this.$overlay.attr("class", overlay_class); + }, onFocus : function () { this._super(); this.hide_remove_button(); + this.change_cursor(); }, on_clone: function () { var $clone = this.$target.clone(false); @@ -1206,27 +1223,27 @@ return false; }, on_resize: function (compass, beginClass, current) { - if (compass !== 'w') - return; + if (compass === 'w') { + // don't change the right border position when we change the offset (replace col size) + 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, '')); - // don't change the right border position when we change the offset (replace col size) - 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, '')); - - this.$target.addClass('col-md-' + (colSize > 12 ? 12 : colSize)); - if (offset > 0) { - this.$target.addClass('col-md-offset-' + offset); + this.$target.addClass('col-md-' + (colSize > 12 ? 12 : colSize)); + if (offset > 0) { + this.$target.addClass('col-md-offset-' + offset); + } } + this.change_cursor(); }, });