diff options
| author | stefanorigano <stefano.rigano@gmail.com> | 2015-09-03 13:29:04 +0200 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2016-02-24 11:15:55 +0100 |
| commit | c4a896a8a0e2219879903d212f2324d0b85d7f00 (patch) | |
| tree | ba074db013da74aa7001e90bfab2ed5e58aa624c /addons/web_editor/static | |
| parent | 1d90e70244b579ffdc981c809558f6c510e0f1bf (diff) | |
[REF] website,web_editor: complete restyling
Diffstat (limited to 'addons/web_editor/static')
21 files changed, 2462 insertions, 520 deletions
diff --git a/addons/web_editor/static/lib/summernote/src/js/Renderer.js b/addons/web_editor/static/lib/summernote/src/js/Renderer.js index ac45698cd62..189dc1707aa 100644 --- a/addons/web_editor/static/lib/summernote/src/js/Renderer.js +++ b/addons/web_editor/static/lib/summernote/src/js/Renderer.js @@ -31,9 +31,11 @@ define([ var title = options.title; var className = options.className; var dropdown = options.dropdown; + var dropdown2 = options.dropdown2; + var wrapper = options.wrapper; var hide = options.hide; - return (dropdown ? '<div class="btn-group' + + var btn = (dropdown ? '<div class="btn-group' + (className ? ' ' + className : '') + '">' : '') + '<button type="button"' + ' class="btn btn-default btn-sm' + @@ -51,6 +53,10 @@ define([ '</button>' + (dropdown || '') + (dropdown ? '</div>' : ''); + + if (wrapper) btn = $(wrapper).html(btn).prop('outerHTML'); + + return btn; }; /** @@ -216,36 +222,85 @@ define([ color: function (lang, options) { var colorButtonLabel = '<i class="' + options.iconPrefix + options.icons.color.recent + - '" style="color:black;background-color:yellow;"></i>'; - + '" id="colors_preview" style="color:white;background-color:#B35E9B"></i>'; var colorButton = tplButton(colorButtonLabel, { className: 'note-recent-color', title: lang.color.recent, event: 'color', - value: '{"backColor":"yellow"}' - }); - - var items = [ - '<li><div class="btn-group">', - '<div class="note-palette-title">' + lang.color.background + '</div>', - '<div class="note-color-reset" data-event="backColor"', - ' data-value="inherit" title="' + lang.color.transparent + '">' + lang.color.setTransparent + '</div>', - '<div class="note-color-palette" data-target-event="backColor"></div>', - '</div><div class="btn-group">', - '<div class="note-palette-title">' + lang.color.foreground + '</div>', - '<div class="note-color-reset" data-event="foreColor" data-value="inherit" title="' + lang.color.reset + '">', - lang.color.resetToDefault, - '</div>', - '<div class="note-color-palette" data-target-event="foreColor"></div>', - '</div></li>' - ]; + value: '{"backColor":"#B35E9B"}' + }); - var moreButton = tplButton('', { - title: lang.color.more, - dropdown: tplDropdown(items) + var foreground = '<ul class="dropdown-menu">' + + '<li>' + + '<div class="note-palette-title">' + lang.color.foreground + '</div>' + + '<div class="btn-group palette-reset">' + + '<div class="note-color-reset" data-event="foreColor"' + + ' data-value="inherit" title="' + lang.color.reset + '"><i class="material-icons"></i> '+ + '</div>' + + '</div>' + + + '<div class="tabs_container">' + + '<ul class="tabs_toggles">'+ + '<li class="on"><a href="#" data-tab-target=".palette_theme"><i class="material-icons"></i></a></li>' + + '<li><a href="#" data-tab-target=".palette_grayscale"><i class="material-icons"></i></a></li>' + + '<li><a href="#" data-tab-target=".palette_ui"><i class="material-icons"></i></a></li>' + + '<li><a href="#" data-tab-target=".palette_spectrum"><i class="material-icons"></i></a></li>' + + '</ul>' + + '<div class="tabs">' + + '<div class="tab palette_theme on"/>'+ + '<div class="tab palette_grayscale"/>'+ + '<div class="tab palette_ui"/>'+ + '<div class="tab palette_spectrum">'+ + '<div class="note-color-palette" data-target-event="foreColor"></div>' + + '</div>' + + '</div>' + + '</div>' + + + '</div>' + + '</li>' + + '</ul>'; + + var background = '<ul class="dropdown-menu">' + + '<li>' + + '<div class="note-palette-title">' + lang.color.background + '</div>' + + '<div class="btn-group palette-reset">' + + '<div class="note-color-reset" data-event="backColor"' + + ' data-value="inherit" title="' + lang.color.transparent + '"><i class="material-icons"></i> '+ + '</div>' + + '</div>' + + + '<div class="tabs_container">' + + '<ul class="tabs_toggles">'+ + '<li class="on"><a href="#" data-tab-target=".palette_theme"><i class="material-icons"></i></a></li>' + + '<li><a href="#" data-tab-target=".palette_grayscale"><i class="material-icons"></i></a></li>' + + '<li><a href="#" data-tab-target=".palette_ui"><i class="material-icons"></i></a></li>' + + '<li><a href="#" data-tab-target=".palette_spectrum"><i class="material-icons"></i></a></li>' + + '</ul>' + + '<div class="tabs">' + + '<div class="tab palette_theme on"/>'+ + '<div class="tab palette_grayscale"/>'+ + '<div class="tab palette_ui"/>'+ + '<div class="tab palette_spectrum">'+ + '<div class="note-color-palette" data-target-event="backColor"></div>' + + '</div>' + + '</div>' + + '</div>' + + + '</li>' + + '</ul>'; + + var foregroundButton = tplButton('', { + title: lang.color.foreground, + wrapper: '<span class="btn-group foreground_toggle" />', + dropdown: foreground + }); + var backgroundButton = tplButton('', { + title: lang.color.background, + wrapper: '<span class="btn-group background_toggle" />', + dropdown: background }); - return colorButton + moreButton; + return colorButton + foregroundButton + backgroundButton; }, bold: function (lang, options) { return tplIconButton(options.iconPrefix + options.icons.font.bold, { @@ -793,12 +848,13 @@ define([ }); var body = document.body; + var container = $('#web_editor-toolbars') // create Popover var $popover = $(this.tplPopovers(langInfo, options)); // ODOO: user (maybe) overrided method $popover.addClass('note-air-layout'); $popover.attr('id', 'note-popover-' + id); - $popover.appendTo(body); + $popover.appendTo(container); createTooltip($popover, keyMap); this.createPalette($popover, options); // ODOO: use (maybe) overrided method @@ -806,7 +862,7 @@ define([ var $handle = $(tplHandles(options)); $handle.addClass('note-air-layout'); $handle.attr('id', 'note-handle-' + id); - $handle.appendTo(body); + $handle.appendTo(container); // create Dialog var $dialog = $(tplDialogs(langInfo, options)); @@ -815,7 +871,7 @@ define([ $dialog.find('button.close, a.modal-close').click(function () { $(this).closest('.modal').modal('hide'); }); - $dialog.appendTo(body); + $dialog.appendTo(container); }; /** diff --git a/addons/web_editor/static/lib/summernote/src/js/defaults.js b/addons/web_editor/static/lib/summernote/src/js/defaults.js index f7b0c0c6379..9d8e0bab661 100644 --- a/addons/web_editor/static/lib/summernote/src/js/defaults.js +++ b/addons/web_editor/static/lib/summernote/src/js/defaults.js @@ -357,7 +357,7 @@ define('summernote/defaults', function () { }, style: { style: 'Style', - normal: 'Normal', + normal: 'Paragraph', blockquote: 'Quote', pre: 'Code', h1: 'Header 1', diff --git a/addons/web_editor/static/lib/summernote/src/less/elements.less b/addons/web_editor/static/lib/summernote/src/less/elements.less deleted file mode 100644 index 2ece26af004..00000000000 --- a/addons/web_editor/static/lib/summernote/src/less/elements.less +++ /dev/null @@ -1,156 +0,0 @@ -/*--------------------------------------------------- - LESS Elements 0.9 - --------------------------------------------------- - A set of useful LESS mixins - More info at: http://lesselements.com - ---------------------------------------------------*/ - -.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { - background: @color; - background: -webkit-gradient(linear, - left bottom, - left top, - color-stop(0, @start), - color-stop(1, @stop)); - background: -ms-linear-gradient(bottom, - @start, - @stop); - background: -moz-linear-gradient(center bottom, - @start 0%, - @stop 100%); - background: -o-linear-gradient(@stop, - @start); - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); -} -.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) { - background: @color; - background: -webkit-gradient(linear, - left bottom, - left top, - color-stop(0, rgb(@start,@start,@start)), - color-stop(1, rgb(@stop,@stop,@stop))); - background: -ms-linear-gradient(bottom, - rgb(@start,@start,@start) 0%, - rgb(@stop,@stop,@stop) 100%); - background: -moz-linear-gradient(center bottom, - rgb(@start,@start,@start) 0%, - rgb(@stop,@stop,@stop) 100%); - background: -o-linear-gradient(rgb(@stop,@stop,@stop), - rgb(@start,@start,@start)); - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start))); -} -.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) { - border-top: solid 1px @top-color; - border-left: solid 1px @left-color; - border-right: solid 1px @right-color; - border-bottom: solid 1px @bottom-color; -} -.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) { - -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); - -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); - box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); -} -.rounded(@radius: 2px) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; -} -.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { - -webkit-border-top-right-radius: @topright; - -webkit-border-bottom-right-radius: @bottomright; - -webkit-border-bottom-left-radius: @bottomleft; - -webkit-border-top-left-radius: @topleft; - -moz-border-radius-topright: @topright; - -moz-border-radius-bottomright: @bottomright; - -moz-border-radius-bottomleft: @bottomleft; - -moz-border-radius-topleft: @topleft; - border-top-right-radius: @topright; - border-bottom-right-radius: @bottomright; - border-bottom-left-radius: @bottomleft; - border-top-left-radius: @topleft; - .background-clip(padding-box); -} -.opacity(@opacity: 0.5) { - -webkit-opacity: @opacity; - -khtml-opacity: @opacity; - -moz-opacity: @opacity; - opacity: @opacity; - @opperc: @opacity * 100; - -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})"; - filter: ~"alpha(opacity=@{opperc})"; -} -.transition-duration(@duration: 0.2s) { - -moz-transition-duration: @duration; - -webkit-transition-duration: @duration; - -o-transition-duration: @duration; - transition-duration: @duration; -} -.transform(...) { - -webkit-transform: @arguments; - -moz-transform: @arguments; - -o-transform: @arguments; - -ms-transform: @arguments; - transform: @arguments; -} -.rotation(@deg:5deg){ - .transform(rotate(@deg)); -} -.scale(@ratio:1.5){ - .transform(scale(@ratio)); -} -.transition(@duration:0.2s, @ease:ease-out) { - -webkit-transition: all @duration @ease; - -moz-transition: all @duration @ease; - -o-transition: all @duration @ease; - transition: all @duration @ease; -} -.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) { - -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); - -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); - box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); -} -.box-shadow(@arguments) { - -webkit-box-shadow: @arguments; - -moz-box-shadow: @arguments; - box-shadow: @arguments; -} -.box-sizing(@sizing: border-box) { - -ms-box-sizing: @sizing; - -moz-box-sizing: @sizing; - -webkit-box-sizing: @sizing; - box-sizing: @sizing; -} -.user-select(@argument: none) { - -webkit-user-select: @argument; - -moz-user-select: @argument; - -ms-user-select: @argument; - user-select: @argument; -} -.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) { - -moz-column-width: @colwidth; - -moz-column-count: @colcount; - -moz-column-gap: @colgap; - -moz-column-rule-color: @columnRuleColor; - -moz-column-rule-style: @columnRuleStyle; - -moz-column-rule-width: @columnRuleWidth; - -webkit-column-width: @colwidth; - -webkit-column-count: @colcount; - -webkit-column-gap: @colgap; - -webkit-column-rule-color: @columnRuleColor; - -webkit-column-rule-style: @columnRuleStyle; - -webkit-column-rule-width: @columnRuleWidth; - column-width: @colwidth; - column-count: @colcount; - column-gap: @colgap; - column-rule-color: @columnRuleColor; - column-rule-style: @columnRuleStyle; - column-rule-width: @columnRuleWidth; -} -.translate(@x:0, @y:0) { - .transform(translate(@x, @y)); -} -.background-clip(@argument: padding-box) { - -moz-background-clip: @argument; - -webkit-background-clip: @argument; - background-clip: @argument; -} diff --git a/addons/web_editor/static/lib/summernote/src/less/summernote.less b/addons/web_editor/static/lib/summernote/src/less/summernote.less index 806d1860ed7..caf66215d3f 100644 --- a/addons/web_editor/static/lib/summernote/src/less/summernote.less +++ b/addons/web_editor/static/lib/summernote/src/less/summernote.less @@ -1,4 +1,30 @@ /* @_import "elements.less"; ODOO: removed call directly */ +/* Mixins */ + +.box-sizing(@boxmodel) { + -webkit-box-sizing: @boxmodel; + -moz-box-sizing: @boxmodel; + box-sizing: @boxmodel; +} +.rounded(@radius: 2px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} +.opacity(@opacity: 0.5) { + -webkit-opacity: @opacity; + -khtml-opacity: @opacity; + -moz-opacity: @opacity; + opacity: @opacity; + @opperc: @opacity * 100; + -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})"; + filter: ~"alpha(opacity=@{opperc})"; +} +.box-shadow(@arguments) { + -webkit-box-shadow: @arguments; + -moz-box-shadow: @arguments; + box-shadow: @arguments; +} /* Theme Variables ------------------------------------------*/ diff --git a/addons/web_editor/static/lib/summernote/summernote.css b/addons/web_editor/static/lib/summernote/summernote.css deleted file mode 100644 index f22f83c5acd..00000000000 --- a/addons/web_editor/static/lib/summernote/summernote.css +++ /dev/null @@ -1 +0,0 @@ -.note-editor{position:relative;border:1px solid #a9a9a9}.note-editor .note-dropzone{position:absolute;z-index:1;display:none;color:#87cefa;background-color:white;border:2px dashed #87cefa;opacity:.95;pointer-event:none}.note-editor .note-dropzone .note-dropzone-message{display:table-cell;font-size:28px;font-weight:bold;text-align:center;vertical-align:middle}.note-editor .note-dropzone.hover{color:#098ddf;border:2px dashed #098ddf}.note-editor.dragover .note-dropzone{display:table}.note-editor .note-toolbar{background-color:#f5f5f5;border-bottom:1px solid #a9a9a9}.note-editor.fullscreen{position:fixed;top:0;left:0;z-index:1050;width:100%}.note-editor.fullscreen .note-editable{background-color:white}.note-editor.fullscreen .note-resizebar{display:none}.note-editor.codeview .note-editable{display:none}.note-editor.codeview .note-codable{display:block}.note-editor .note-statusbar{background-color:#f5f5f5}.note-editor .note-statusbar .note-resizebar{width:100%;height:8px;cursor:ns-resize;border-top:1px solid #a9a9a9}.note-editor .note-statusbar .note-resizebar .note-icon-bar{width:20px;margin:1px auto;border-top:1px solid #a9a9a9}.note-editor .note-editable{padding:10px;overflow:auto;outline:0}.note-editor .note-editable[contenteditable="false"]{background-color:#e5e5e5}.note-editor .note-codable{display:none;width:100%;padding:10px;margin-bottom:0;font-family:Menlo,Monaco,monospace,sans-serif;font-size:14px;color:#ccc;background-color:#222;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;box-shadow:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;resize:none}.note-air-editor{outline:0}.note-popover .popover{max-width:none}.note-popover .popover .popover-content a{display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.note-popover .popover .arrow{left:20px}.note-popover .popover .popover-content,.note-toolbar{padding:0 0 5px 5px;margin:0}.note-popover .popover .popover-content>.btn-group,.note-toolbar>.btn-group{margin-top:5px;margin-right:5px;margin-left:0}.note-popover .popover .popover-content .note-table .dropdown-menu,.note-toolbar .note-table .dropdown-menu{min-width:0;padding:5px}.note-popover .popover .popover-content .note-table .dropdown-menu .note-dimension-picker,.note-toolbar .note-table .dropdown-menu .note-dimension-picker{font-size:18px}.note-popover .popover .popover-content .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-mousecatcher,.note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-mousecatcher{position:absolute!important;z-index:3;width:10em;height:10em;cursor:pointer}.note-popover .popover .popover-content .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-unhighlighted,.note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-unhighlighted{position:relative!important;z-index:1;width:5em;height:5em;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat}.note-popover .popover .popover-content .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-highlighted,.note-toolbar .note-table .dropdown-menu .note-dimension-picker .note-dimension-picker-highlighted{position:absolute!important;z-index:2;width:1em;height:1em;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat}.note-popover .popover .popover-content .note-style h1,.note-toolbar .note-style h1,.note-popover .popover .popover-content .note-style h2,.note-toolbar .note-style h2,.note-popover .popover .popover-content .note-style h3,.note-toolbar .note-style h3,.note-popover .popover .popover-content .note-style h4,.note-toolbar .note-style h4,.note-popover .popover .popover-content .note-style h5,.note-toolbar .note-style h5,.note-popover .popover .popover-content .note-style h6,.note-toolbar .note-style h6,.note-popover .popover .popover-content .note-style blockquote,.note-toolbar .note-style blockquote{margin:0}.note-popover .popover .popover-content .note-color .dropdown-toggle,.note-toolbar .note-color .dropdown-toggle{width:20px;padding-left:5px}.note-popover .popover .popover-content .note-color .dropdown-menu,.note-toolbar .note-color .dropdown-menu{min-width:340px}.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group,.note-toolbar .note-color .dropdown-menu .btn-group{margin:0}.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group:first-child,.note-toolbar .note-color .dropdown-menu .btn-group:first-child{margin:0 5px}.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-palette-title,.note-toolbar .note-color .dropdown-menu .btn-group .note-palette-title{margin:2px 7px;font-size:12px;text-align:center;border-bottom:1px solid #eee}.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-reset,.note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset{padding:0 3px;margin:3px;font-size:11px;cursor:pointer;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-row,.note-toolbar .note-color .dropdown-menu .btn-group .note-color-row{height:20px}.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-reset:hover,.note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset:hover{background:#eee}.note-popover .popover .popover-content .note-para .dropdown-menu,.note-toolbar .note-para .dropdown-menu{min-width:216px;padding:5px}.note-popover .popover .popover-content .note-para .dropdown-menu>div:first-child,.note-toolbar .note-para .dropdown-menu>div:first-child{margin-right:5px}.note-popover .popover .popover-content .dropdown-menu,.note-toolbar .dropdown-menu{min-width:90px}.note-popover .popover .popover-content .dropdown-menu.right,.note-toolbar .dropdown-menu.right{right:0;left:auto}.note-popover .popover .popover-content .dropdown-menu.right::before,.note-toolbar .dropdown-menu.right::before{right:9px;left:auto!important}.note-popover .popover .popover-content .dropdown-menu.right::after,.note-toolbar .dropdown-menu.right::after{right:10px;left:auto!important}.note-popover .popover .popover-content .dropdown-menu li a i,.note-toolbar .dropdown-menu li a i{color:deepskyblue;visibility:hidden}.note-popover .popover .popover-content .dropdown-menu li a.checked i,.note-toolbar .dropdown-menu li a.checked i{visibility:visible}.note-popover .popover .popover-content .note-fontsize-10,.note-toolbar .note-fontsize-10{font-size:10px}.note-popover .popover .popover-content .note-color-palette,.note-toolbar .note-color-palette{line-height:1}.note-popover .popover .popover-content .note-color-palette div .note-color-btn,.note-toolbar .note-color-palette div .note-color-btn{width:20px;height:20px;padding:0;margin:0;border:1px solid #fff}.note-popover .popover .popover-content .note-color-palette div .note-color-btn:hover,.note-toolbar .note-color-palette div .note-color-btn:hover{border:1px solid #000}.note-dialog>div{display:none}.note-dialog .note-image-dialog .note-dropzone{min-height:100px;margin-bottom:10px;font-size:30px;line-height:4;color:lightgray;text-align:center;border:4px dashed lightgray}.note-dialog .note-help-dialog{font-size:12px;color:#ccc;background:transparent;background-color:#222!important;border:0;-webkit-opacity:.9;-khtml-opacity:.9;-moz-opacity:.9;opacity:.9;-ms-filter:alpha(opacity=90);filter:alpha(opacity=90)}.note-dialog .note-help-dialog .modal-content{background:transparent;border:1px solid white;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.note-dialog .note-help-dialog a{font-size:12px;color:white}.note-dialog .note-help-dialog .title{padding-bottom:5px;font-size:14px;font-weight:bold;color:white;border-bottom:white 1px solid}.note-dialog .note-help-dialog .modal-close{font-size:14px;color:#dd0;cursor:pointer}.note-dialog .note-help-dialog .note-shortcut-layout{width:100%}.note-dialog .note-help-dialog .note-shortcut-layout td{vertical-align:top}.note-dialog .note-help-dialog .note-shortcut{margin-top:8px}.note-dialog .note-help-dialog .note-shortcut th{font-size:13px;color:#dd0;text-align:left}.note-dialog .note-help-dialog .note-shortcut td:first-child{min-width:110px;padding-right:10px;font-family:"Courier New";color:#dd0;text-align:right}.note-handle .note-control-selection{position:absolute;display:none;border:1px solid black}.note-handle .note-control-selection>div{position:absolute}.note-handle .note-control-selection .note-control-selection-bg{width:100%;height:100%;background-color:black;-webkit-opacity:.3;-khtml-opacity:.3;-moz-opacity:.3;opacity:.3;-ms-filter:alpha(opacity=30);filter:alpha(opacity=30)}.note-handle .note-control-selection .note-control-handle{width:7px;height:7px;border:1px solid black}.note-handle .note-control-selection .note-control-holder{width:7px;height:7px;border:1px solid black}.note-handle .note-control-selection .note-control-sizing{width:7px;height:7px;background-color:white;border:1px solid black}.note-handle .note-control-selection .note-control-nw{top:-5px;left:-5px;border-right:0;border-bottom:0}.note-handle .note-control-selection .note-control-ne{top:-5px;right:-5px;border-bottom:0;border-left:none}.note-handle .note-control-selection .note-control-sw{bottom:-5px;left:-5px;border-top:0;border-right:0}.note-handle .note-control-selection .note-control-se{right:-5px;bottom:-5px;cursor:se-resize}.note-handle .note-control-selection .note-control-selection-info{right:0;bottom:0;padding:5px;margin:5px;font-size:12px;color:white;background-color:black;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-opacity:.7;-khtml-opacity:.7;-moz-opacity:.7;opacity:.7;-ms-filter:alpha(opacity=70);filter:alpha(opacity=70)}
\ No newline at end of file diff --git a/addons/web_editor/static/src/css/common.sass b/addons/web_editor/static/src/css/common.sass deleted file mode 100644 index 264f0166c49..00000000000 --- a/addons/web_editor/static/src/css/common.sass +++ /dev/null @@ -1,4 +0,0 @@ -@import "compass/css3" -@import "compass/css3/user-interface" -@import "compass/css3/transition" -@import "compass/support" diff --git a/addons/web_editor/static/src/css/inline.css b/addons/web_editor/static/src/css/web_editor.iframe.inline.css index cba6343becb..cba6343becb 100644 --- a/addons/web_editor/static/src/css/inline.css +++ b/addons/web_editor/static/src/css/web_editor.iframe.inline.css diff --git a/addons/web_editor/static/src/css/web_editor.sass b/addons/web_editor/static/src/css/web_editor.sass deleted file mode 100644 index 2b5b4a8ee2f..00000000000 --- a/addons/web_editor/static/src/css/web_editor.sass +++ /dev/null @@ -1,141 +0,0 @@ -@charset "utf-8" -@import "common" - -/* ----- EDITOR ----- */ - -.css_non_editable_mode_hidden - display: none !important - -/* ----- Editor (for public user, like forum) ----- */ - -.note-toolbar - margin-left: 0 !important - -.note-popover .popover > .arrow - display: none - -/* ----- GENERIC LAYOUTING HELPERS ---- */ - -.hidden - display: none !important - -/* table */ - -#wrapwrap, .o_editable - table.table - table-layout: fixed - td - min-width: 20px - -/* Media */ - -img.shadow - +box-shadow(0px 3px 8px rgba(0, 0, 0, 0.2)) - -img, .img, span.fa, iframe - &.padding-small - padding: 4px - &.padding-medium - padding: 8px - &.padding-large - padding: 16px - &.padding-xl - padding: 32px -div.media_iframe_video - &.padding-small iframe - padding: 4px - &.padding-medium iframe - padding: 8px - &.padding-large iframe - padding: 16px - &.padding-xl iframe - padding: 32px - -/* font awsome */ - -.fa-6x - font-size: 6em -.fa-7x - font-size: 7em -.fa-8x - font-size: 8em -.fa-9x - font-size: 9em -.fa-10x - font-size: 10em -.fa.center-block - text-align: center - -/* video */ - -div.media_iframe_video - margin: 0 auto - text-align: center - position: relative - overflow: hidden - iframe - width: 100% - height: 100% - top: 0 - position: absolute - margin: 0 auto - margin-left: -50% - .media_iframe_video_size - padding-bottom: 66.5% - position: relative - width: 100% - height: 0 - .css_editable_mode_display - position: absolute - width: 100% - height: 100% - display: none - z-index: 2 - -html[data-browser^="msie"] div.media_iframe_video iframe - margin-left: 0 - -/* Mobile view */ - -@media (max-width: 768px) - img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa - -webkit-transform: none !important - -moz-transform: none !important - -ms-transform: none !important - -o-transform: none !important - transform: none !important - -/* ---- fields --- */ - -address - .fa.fa-mobile-phone - margin: 0 3px 0 2px - .fa.fa-file-text-o - margin-right: 1px - -span[data-oe-type="monetary"] - white-space: nowrap - -/* ---- MENU ---- {{{ */ - -div.oe_menu_buttons - top: -8px - right: -8px - -ul.oe_menu_editor - .fa-home - display: none - > li:first-child > div > span > .fa-home - display: block - .oe_menu_placeholder - outline: 1px dashed #4183C4 - ul - list-style: none - li div - cursor: move - .disclose - cursor: pointer - width: 10px - display: none - -// }}} diff --git a/addons/web_editor/static/src/js/rte.summernote.js b/addons/web_editor/static/src/js/rte.summernote.js index 094d13340dc..28e1a32a55e 100644 --- a/addons/web_editor/static/src/js/rte.summernote.js +++ b/addons/web_editor/static/src/js/rte.summernote.js @@ -45,13 +45,26 @@ renderer.createPalette = function ($container, options) { } var $color = $container.find('.note-color'); - var html = QWeb.render('web_editor.colorpicker'); - $color.find('.note-color-palette').prepend(html); - var $bg = $color.find('.colorpicker:first button'); - var $fore = $color.find('.colorpicker:last button'); + var html = $(QWeb.render('web_editor.colorpicker')); + var theme = html.find('.theme') - $bg.each(function () { $(this).attr('data-event', 'backColor').attr('data-value', $(this).attr('class')); }); - $fore.each(function () { $(this).attr('data-event', 'foreColor').attr('data-value', $(this).attr('class').replace(/bg-/, 'text-')); }); + $color.find('.palette_theme').prepend(html.find('.theme')); + $color.find('.palette_ui').prepend(html.find('.ui')); + $color.find('.palette_grayscale').prepend(html.find('.grayscale')); + + var $bg = $color.find('.background_toggle .dropdown-menu button'); + var $fore = $color.find('.foreground_toggle .dropdown-menu button'); + + $bg.each(function () { + $(this).attr('data-event', 'backColor').attr('data-value', + $(this).attr($(this).attr('class') == 'note-color-btn' ?'title':'class') + ); + }); + $fore.each(function () { + $(this).attr('data-event', 'foreColor').attr('data-value', + $(this).attr($(this).attr('class') == 'note-color-btn' ?'title':'class').replace(/bg-/, 'text-') + ); + }); }; var fn_tplPopovers = renderer.tplPopovers; @@ -144,7 +157,7 @@ renderer.tplPopovers = function (lang, options) { $imagePopover.find('.popover-content').append($airPopover.find(".note-history").clone()); $imagePopover.find('[data-event="showImageDialog"]').before($airPopover.find('[data-event="showLinkDialog"]').clone()); - + //////////////// link popover $linkPopover.find('.popover-content').append($airPopover.find(".note-history").clone()); @@ -196,7 +209,24 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) { fn_boutton_update.call(this, $container, oStyle); - $container.find('.note-color').removeClass("hidden"); + $container.find('.note-color').removeClass("hidden") + + // ACTIVATE TABS + $container.find('[data-tab-target]').each(function(){ + var $el = $(this); + var target = $el.data('tab-target'); + var $parent = $el.parent().closest('.tabs_container'); + var $parentLi = $el.parent().closest('li'); + + $parentLi.on('click', function(){return false}); + + $el.on('click', function(){ + $parent.find('.tab, .tabs_toggles li').removeClass('on'); + $parent.find(target).add($parentLi).addClass('on') + return false; + }) + }) + if (oStyle.image) { $container.find('[data-event]').parent().removeClass("active"); @@ -343,7 +373,7 @@ eventHandler.modules.editor.imageShape = function ($editable, sValue) { eventHandler.modules.linkDialog.showLinkDialog = function ($editable, $dialog, linkInfo) { $editable.data('range').select(); $editable.data('NoteHistory').recordUndo(); - + var editor = new widgets.LinkDialog($editable, linkInfo); editor.appendTo(document.body); @@ -586,7 +616,7 @@ function summernote_mousedown (event) { rte.history.splitNext(); var $editable = $(event.target).closest(".o_editable, .note-editor"); - + if (!!document.documentMode) { summernote_ie_fix(event, function (node) { return node.tagName === "DIV" || node.tagName === "IMG" || (node.dataset && node.dataset.oeModel); }); } else if (last_div && event.target !== last_div) { @@ -714,6 +744,7 @@ eventHandler.attach = function (oLayoutInfo, options) { } }); $(document).on("keyup", reRangeSelectKey); + var clone_data = false; var $node = oLayoutInfo.editor(); if ($node.data('oe-model') || $node.data('oe-translation-id')) { diff --git a/addons/web_editor/static/src/js/snippets.editor.js b/addons/web_editor/static/src/js/snippets.editor.js index 79db510bf6a..93e09c4e7f0 100644 --- a/addons/web_editor/static/src/js/snippets.editor.js +++ b/addons/web_editor/static/src/js/snippets.editor.js @@ -377,7 +377,7 @@ var BuildingBlock = Widget.extend({ var $last = $scroll.children(":visible").last().children(".o_panel_body"); $last.css({'min-height': (height-$last.prev().outerHeight())+'px'}); if ($scroll[0].scrollHeight + $ul[0].scrollHeight > document.body.clientHeight) { - $scroll.css("overflow", "auto").css("width", "226px"); + $scroll.css("overflow", "auto").css("width", "100%"); } else { $scroll.css("width", ""); } diff --git a/addons/web_editor/static/src/js/snippets.options.js b/addons/web_editor/static/src/js/snippets.options.js index 04477f3b768..cbf8fea5c4e 100644 --- a/addons/web_editor/static/src/js/snippets.options.js +++ b/addons/web_editor/static/src/js/snippets.options.js @@ -70,7 +70,7 @@ var Option = Class.extend({ this.$target.trigger("snippet-option-preview", [this]); } }, - /* + /* * select and set item active or not (add highlight item and his parents) * called before start */ @@ -276,8 +276,59 @@ var colorpicker = Option.extend({ var self = this; var res = this._super(); + var paletteTemplate = '<div class="colorpicker">'+ + '<div class="note-palette-title">Background Color</div>' + + '<div class="btn-group palette-reset">' + + '<div class="note-color-reset" data-event="foreColor"' + + ' data-value="inherit" title="None"><i class="material-icons"></i> '+ + '</div>' + + '</div>' + + + '<div class="tabs_container">' + + '<ul class="tabs_toggles">'+ + '<li class="on"><a href="#" data-tab-target=".palette_theme"><i class="material-icons"></i></a></li>' + + '<li><a href="#" data-tab-target=".palette_grayscale"><i class="material-icons"></i></a></li>' + + '<li><a href="#" data-tab-target=".palette_ui"><i class="material-icons"></i></a></li>' + + '<li><a href="#" data-tab-target=".palette_spectrum"><i class="material-icons"></i></a></li>' + + '</ul>' + + '<div class="tabs">' + + '<div class="tab palette_theme on"/>'+ + '<div class="tab palette_grayscale"/>'+ + '<div class="tab palette_ui"/>'+ + '<div class="tab palette_spectrum">'+ + '<div class="note-color-palette"></div>' + + '</div>' + + '</div>' + + '</div>' + + + '</div></div>'; + var $pt = $(paletteTemplate); + if (!this.$el.find('.colorpicker').length) { - this.$el.find('li').append( qweb.render('web_editor.colorpicker') ); + var $clpicker = $(qweb.render('web_editor.colorpicker')) + var pTheme = $clpicker.find('.theme') + var pGray = $clpicker.find('.grayscale') + var pUi = $clpicker.find('.ui') + $pt.find('.palette_theme').append(pTheme).end() + .find('.palette_grayscale').append(pGray).end() + .find('.palette_ui').append(pUi) + this.$el.find('li').append($pt); + + // ACTIVATE TABS + this.$el.find('[data-tab-target]').each(function(){ + var $el = $(this); + var target = $el.data('tab-target'); + var $parent = $el.parent().closest('.tabs_container'); + var $parentLi = $el.parent().closest('li'); + + $parentLi.on('click', function(){return false}); + + $el.on('click', function(){ + $parent.find('.tab, .tabs_toggles li').removeClass('on'); + $parent.find(target).add($parentLi).addClass('on') + return false; + }) + }) } if (this.$el.data('area')) { this.$target = this.$target.find(this.$el.data('area')); @@ -301,7 +352,7 @@ var colorpicker = Option.extend({ }, bind_events: function () { var self = this; - var $td = this.$el.find(".colorpicker td"); + var $td = this.$el.find(".tab"); var $colors = this.$el.find(".colorpicker button"); $colors .mouseenter(function () { @@ -309,16 +360,184 @@ var colorpicker = Option.extend({ }) .mouseleave(function () { self.$target.removeClass(self.classes) - .addClass($td.filter(".selected").children().attr("class")); + .addClass($colors.filter(".selected").attr("class")); }) .click(function () { - $td.removeClass("selected"); - $(this).parent().addClass("selected"); + $colors.removeClass("selected"); + $(this).addClass("selected"); self.$target.closest(".o_editable").trigger("content_changed"); }); } }); +var background_position = Option.extend({ + start: function(){ + var self = this; + var $btn = self.$overlay.find('.oe_options'); + $btn.on('show.bs.dropdown', function(){ + if (self.$target.css('background-image') == 'none'){ + $btn.find('.background_position_li').addClass('hidden') + } else { + $btn.find('.background_position_li').removeClass('hidden') + } + }) + }, + background_position: function(type, value, $li){ + if (type != 'click') return; + var self = this; + var $modal = $(qweb.render('web_editor.dialog.background_position')); + $modal.modal() + $modal.on('hidden.bs.modal', function(){ + setTimeout(function(){ + $modal.remove() + },2000) + }) + self.editing(self, $modal) + }, + editing: function(self, $modal){ + // Init main collapse + $modal.find(".panel-collapse.collapse").collapse({ + toggle: false, + parent: $('#bg_image_opt_accordition') + }) + + // Fetch data form $target + if(self.$target.hasClass('o_bg_img_contain')){ + $modal.find("#bg_size").val('o_bg_img_contain').end() + .find("#radio2").prop('checked', true).end() + .find("#collapse_contain").collapse('show'); + + } else if (self.$target.hasClass('o_bg_img_cover')){ + $modal.find("#bg_size").val('o_bg_img_cover').end() + .find("#radio1").prop('checked', true).end() + .find("#collapse_cover").collapse('show'); + } else if (self.$target.hasClass('o_bg_img_custom')){ + $modal.find("#bg_size").val('o_bg_img_custom').end() + .find("#radio3").prop('checked', true).end() + .find("#collapse_custom").collapse('show'); + } + if(self.$target.hasClass("o_bg_img_repeat")){ + $modal.find("#contain_repeat").prop('checked', true); + $modal.find("#custom_repeat").val('o_bg_img_repeat') + } else if (self.$target.hasClass("o_bg_img_no_repeat")){ + $modal.find("#custom_repeat").val('o_bg_img_no_repeat') + } else if (self.$target.hasClass("o_bg_img_repeat_x")){ + $modal.find("#custom_repeat").val('o_bg_img_repeat_x') + } else if (self.$target.hasClass("o_bg_img_repeat_y")){ + $modal.find("#custom_repeat").val('o_bg_img_repeat_y') + } + + var bg_pos = self.$target.css('background-position').split(' '), + bg_siz = self.$target.css('background-size').split(' '); + + if( bg_pos.length > 1 ) { + $modal.find("#custom_pos_x").val(bg_pos[0].replace('%','')) + $modal.find("#custom_pos_y").val(bg_pos[1].replace('%','')) + } + if( bg_siz.length > 1 ) { + $modal.find("#custom_size_x").val(bg_siz[0].replace('%','')) + $modal.find("#custom_size_y").val(bg_siz[1].replace('%','')) + } + + // Collapse events + $('#collapse_cover').on('show.bs.collapse', function(){ + $('#radio1').prop('checked', true); + $modal.find("#bg_size").val('o_bg_img_cover'); + }); + + $('#collapse_contain').on('show.bs.collapse', function(){ + $('#radio2').prop('checked', true); + $modal.find("#bg_size").val('o_bg_img_contain'); + }); + + $('#collapse_custom').on('show.bs.collapse', function(){ + $('#radio3').prop('checked', true); + $modal.find("#bg_size").val('o_bg_img_custom'); + }); + + // Focus Point + var img_url = self.$target.css('background-image').replace(/url\(['"]*|['"]*\)|^none$/g, ""); + + var $object = $modal.find(".object"), + $focus = $modal.find(".focus_point"); + + $modal.find("#pos_x").val(bg_pos[0]).end() + .find("#pos_y").val(bg_pos[1]).end() + .find(".ui_info .x").text(bg_pos[0]).end() + .find(".ui_info .y").text(bg_pos[1]) + $focus.css({ + left: bg_pos[0], + top: bg_pos[1] + }) + setTimeout(function(){$focus.addClass("ready") },50) + + var $img = $('<img class="img-responsive" src="'+ img_url +'"/>') + $img.prependTo($object) + $img.on('load',function(){ + self.retrive_click($img, $focus, $modal, self); + }) + + // Save + $modal.find('.save').on('click',function(){self.save($modal, self) }) + }, + retrive_click: function($img, $focus, $modal, self){ + // Prevent clicks on ui items + $focus.on('click', function(){$img.mousedown(); }) + $modal.find('.ui_info').on('click', function(){$img.mousedown(); }) + $modal.find('.grid').on('click', function(){$img.mousedown(); }) + + // Retrive click position + $img.click(function (e) { + var posX = e.pageX - $(this).offset().left, + posY = e.pageY - $(this).offset().top; + var res = { + x: (self.range_value(posX/$img.width()*100).toFixed(2)) + '%', + y: (self.range_value(posY/$img.height()*100).toFixed(2)) + '%' + }; + $focus.css({top: res.y, left: res.x }) + + $modal.find("#pos_x").val(res.x).end() + .find("#pos_y").val(res.y).end() + .find(".ui_info .x").text(res.x).end() + .find(".ui_info .y").text(res.y).end() + .find(".ui_info").hide() + + setTimeout(function(){$modal.find(".ui_info").show() },50) + }); + }, + range_value: function(value){ + if (value < 0) value = 0; + if (value > 100) value = 100; + return (value) + }, + save: function($modal, self){ + self.clean(self.$target); + self.$target.addClass($modal.find("#bg_size").val()); + switch ($modal.find("#bg_size").val()) { + case "o_bg_img_cover": + self.$target.css('background-position', $modal.find("#pos_x").val() + ' ' +$modal.find("#pos_y").val()) + break; + case "o_bg_img_contain": + if ($modal.find("#contain_repeat").is(":checked")){ + self.$target.addClass('o_bg_img_repeat') + } else { + self.$target.addClass('o_bg_img_no_repeat') + } + break; + case "o_bg_img_custom": + self.$target.addClass($modal.find("#custom_repeat").val()); + self.$target.css('background-size', $modal.find("#custom_size_x").val() + '% ' + $modal.find("#custom_size_y").val() + '%'); + self.$target.css('background-position', $modal.find("#custom_pos_x").val() + '% ' + $modal.find("#custom_pos_y").val() + '%'); + break; + } + }, + clean: function($target){ + $target.removeClass('o_bg_img_cover o_bg_img_contain o_bg_img_custom o_bg_img_repeat o_bg_img_repeat_x o_bg_img_repeat_y o_bg_img_no_repeat') + .css('background-size', '') + .css('background-position', ''); + }, +}); + var background = Option.extend({ start: function ($change_target) { this.$target = $change_target || this.$target; @@ -537,6 +756,7 @@ return { 'registry': { 'media': media, 'colorpicker': colorpicker, + 'background_position': background_position, 'background': background, 'many2one': many2one, }, diff --git a/addons/web_editor/static/src/js/summernote.js b/addons/web_editor/static/src/js/summernote.js index e4d1c5b27c4..775c4398268 100644 --- a/addons/web_editor/static/src/js/summernote.js +++ b/addons/web_editor/static/src/js/summernote.js @@ -210,7 +210,7 @@ dom.merge = function (node, begin, so, end, eo, mergeFilter, all) { while(end.lastChild) {end = end.lastChild;} eo = end.textContent.length-1; } else if (end.tagName) { - + } else if (end.tagName && end.childNodes[so]) { end = end.childNodes[so]; so = 0; @@ -234,7 +234,7 @@ dom.merge = function (node, begin, so, end, eo, mergeFilter, all) { if (cur === begin) { if (!all) add = true; } - + __merge(cur); dom.orderClass(dom.node(cur)); @@ -1501,7 +1501,7 @@ $.summernote.pluginEvents.backspace = function (event, editor, layoutInfo) { dom.removeSpace(temp2.parentNode, temp2, 0, temp, 0); // clean before jump for not select invisible space between 2 tag temp2 = dom.lastChild(temp2); - + r = range.create(temp2, temp2.textContent.length, temp2, temp2.textContent.length); r.select(); @@ -1876,11 +1876,11 @@ eventHandler.modules.toolbar.button.updateRecentColor = function (elBtn, sEvent, font.style.color = sValue !== 'inherit' ? sValue : ""; } } else { + font.className = font.className.replace(/(^|\s+)bg-\S+/, ''); if (sValue.indexOf('bg-') !== -1) { font.className += ' ' + sValue; font.style.backgroundColor = ""; } else { - font.className = font.className.replace(/(^|\s+)bg-\S+/); font.style.backgroundColor = sValue !== 'inherit' ? sValue : ""; } } diff --git a/addons/web_editor/static/src/css/backend.css b/addons/web_editor/static/src/less/web_editor.backend.less index 2512b1de9c0..e9043dc138e 100644 --- a/addons/web_editor/static/src/css/backend.css +++ b/addons/web_editor/static/src/less/web_editor.backend.less @@ -1,9 +1,16 @@ -.oe_form_field_html_text .note-editable { +.oe_form_field_html_text { + .note-editable { min-height: 180px; font: initial !important; font-family: inherit !important; line-height: initial !important; color: initial !important; + p { + margin: initial; + } + a, a:hover { + color: initial; + } } .oe_form_field_html_text .o_readonly { min-height: 1em; @@ -19,16 +26,17 @@ } .oe_form_field_html iframe { - display: block; - width: 100%; - border: 0; - padding: 0; - margin: 0; - min-height: 300px; - min-height: -webkit-calc(100vh - 170px); - min-height: calc(100vh - 170px); + display: block; + width: 100%; + border: 0; + padding: 0; + margin: 0; + min-height: 300px; + min-height: -webkit-calc(100vh - 170px); + min-height: calc(100vh - 170px); } -.o_form_FieldTextHtml_fullscreen .oe_form_field_html.o_form_fullscreen_ancestor iframe { +.o_form_FieldTextHtml_fullscreen{ + .oe_form_field_html.o_form_fullscreen_ancestor iframe { position: absolute !important; left: 0 !important; right: 0 !important; @@ -38,12 +46,11 @@ min-height: 100% !important; z-index: 1001 !important; border: 0; -} - -.o_form_FieldTextHtml_fullscreen * { + } + * { display: none; -} -.o_form_FieldTextHtml_fullscreen .o_form_fullscreen_ancestor { + } + .o_form_fullscreen_ancestor { display: block !important; position: static !important; top: 0 !important; @@ -51,29 +58,31 @@ overflow: visible !important; width: auto !important; overflow: hidden !important; + } } .openerp .oe_form .oe_form_field_html_translate textarea { - min-width: 60px; - width: 100%; - color: #4c4c4c; - font: normal 13px "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; + min-width: 60px; + width: 100%; + color: #4c4c4c; + font: normal 13px "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; } .openerp .oe_form_readonly .oe_form .oe_form_field_html_translate textarea { - border:0; - background: #fff; + border:0; + background: #fff; } -.openerp .oe_form_editable .oe_form .oe_form_field_html_translate > button { +.openerp .oe_form_editable .oe_form .oe_form_field_html_translate { + > button { float: right; margin: -6px -3px 0 0; -} -.openerp .oe_form_editable .oe_form .oe_form_field_html_translate > .note-editable { + } + > .note-editable { border: 1px solid #ccc; min-height: 22px; border-radius: 3px; + } } + .openerp .oe_form_editable .oe_form .oe_form_field_html_translate .note-editable [contentEditable='true']:hover { - -moz-box-shadow: #DDCC33 0 0 5px 2px inset; - -webkit-box-shadow: #DDCC33 0 0 5px 2px inset; - box-shadow: #DDCC33 0 0 5px 2px inset; -}
\ No newline at end of file + .box-shadow(#DDCC33 0 0 5px 2px inset); +} diff --git a/addons/web_editor/static/src/css/web_editor.css b/addons/web_editor/static/src/less/web_editor.common.less index f83b5628b4e..f83b5628b4e 100644 --- a/addons/web_editor/static/src/css/web_editor.css +++ b/addons/web_editor/static/src/less/web_editor.common.less diff --git a/addons/web_editor/static/src/less/web_editor.components.less b/addons/web_editor/static/src/less/web_editor.components.less new file mode 100644 index 00000000000..d24df7ac99f --- /dev/null +++ b/addons/web_editor/static/src/less/web_editor.components.less @@ -0,0 +1,276 @@ +#web_editor-top-actions { + a { + .transition(all 0.3s); + color: darken(@we_color-primary, 10%); + &:hover, &:active { + text-decoration: none; + color: darken(@we_color-primary, 20%); + } + } + // BUTTONS + // ==================== + .btn { + font-size: 12px; + color: #999999; + font-weight: bold; + text-decoration: none; + .transition(all 0.3s); + &:hover, &:focus { + color: white; + text-decoration: none; + } + &.accent { + .button-variant(white, @we_color-accent, @we_color-accent) + } + &.compl { + .button-variant(white, @we_color-primary, @we_color-primary) + } + &.full { + margin-top: 0; + margin-bottom: 0; + border-radius: 0; + .box-shadow(none); + } + &.btn-primary { + .button-variant(white, @we_color-accent, @we_color-accent); + text-transform: uppercase; + } + &.btn-danger { + .button-variant(white, @we_color-danger, @we_color-danger); + text-transform: uppercase; + } + &.btn-success { + .button-variant(white, @we_color-success, @we_color-success); + text-transform: uppercase; + } + } + .dropdown-toggle { + color: @we_dropdown-toggle-color; + height: @we_editor-bar-height - @we_editor-dropdown-border-height; + line-height: @we_editor-bar-height - @we_editor-dropdown-border-height; + border-top: @we_editor-dropdown-border-height solid transparent; + text-shadow:0 1px 0 @we_dropdown-toggle-shadow-color; + } + .dropdown-menu { + margin: 0; + overflow: hidden; + border-radius: 0; + border: none; + background-color: @we_dropdown-menu-color; + .box-shadow(@we_box-shadow); + li { + a { + color: @we_dropdown-toggle-color; + } + &:hover { + a { + color: @we_dropdown--open-toggle-color; + background: transparent; + } + } + } + li.divider { + margin: 3px 20px; + background-color: @we_color-inactive; + } + } + .open { + > .dropdown-toggle { + background-color: @we_dropdown--open-toggle-bg-color; + color: @we_dropdown--open-toggle-color; + border-top: @we_editor-dropdown-border-height solid white; + text-shadow:0 1px 0 @we_dropdown--open-toggle-shadow-color; + } + } + .dropdown-menu { + position: absolute; + left: auto; + right: 0; + } + + // ICONS + // ====================== + .material-icons { + font-size: 1em; + .translateY(2px); + margin-right: 5px; + } + + // POPOVERS + // ====================== + .popover { + border-radius: 3px; + .popover-title{ + color: @we_color-text-dark + } + } + + // INPUTS + // ====================== + .form-control { + font-weight: bold; + color: @we_color-text-dark; + } + .input-group-addon{ + color: @we_color-text-dark; + font-weight: bold; + } +} + +// INPUTS +// ================== +.switch { + position: relative; + display: inline-block; + box-sizing: border-box; + margin: 0 0.5em; + padding: 0; + height: 1.5em; + cursor: pointer; + .translateY(0.2em); + .switch_track { + background: #bababa; + border-radius: 0.4em; + height: 1em; + width: 2.5em; + display: inline-block; + .transition(all 0.3s @we_md-ease); + &:after { + content: ""; + background: #fafafa; + display: block; + width: 1.5em; + height: 1.5em; + border-radius: 100em; + margin-top: -0.3em; + margin-left: -0.1em; + .transition(all 0.3s @we_md-ease); + .box-shadow(@we_box-shadow); + } + } + .switch_input { + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + opacity: 0; + -ms-appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + border: none; + } + &.checked { + .switch_track { + background-color: rgb(142, 224, 212); + background-color: transparentize(@we_color-accent, 0.5); + &:after { + background-color: @we_color-accent; + margin-left: 1.1em; + } + } + } + &:hover { + .switch_track { + &:after { + background-color: mix(@we_color-accent, #fafafa); + } + } + } +} + + + +// TEXT INPUT +// ========================== + +// <div class="text-input-group"> +// <input type="text" required="true"/> +// <span class="highlight"></span> +// <span class="bar"></span> +// <label>Name</label> +// </div> + +.text-input-group { + position:relative; + margin-bottom:45px; + + input{ + font-size:18px; + padding:10px 10px 10px 5px; + display:block; + width:300px; + border:none; + border-bottom:1px solid #757575; + } + input:focus{ outline:none; } + + /* LABEL ======================================= */ + label{ + color:#999; + font-size:18px; + font-weight:normal; + position:absolute; + pointer-events:none; + left:5px; + top:10px; + .transition(0.2s ease all) + } + + /* active state */ + input:focus ~ label, input:valid ~ label{ + top:-20px; + font-size:14px; + color:#5264AE; + } + + /* BOTTOM BARS ================================= */ + .bar { position:relative; display:block; width:300px; } + .bar:before, .bar:after{ + content:''; + height:2px; + width:0; + bottom:1px; + position:absolute; + background:#5264AE; + .transition(0.2s ease all); + } + .bar:before { + left:50%; + } + .bar:after { + right:50%; + } + + /* active state */ + input:focus ~ .bar:before, input:focus ~ .bar:after { + width:50%; + } + + /* HIGHLIGHTER ================================== */ + .highlight { + position:absolute; + height:60%; + width:100px; + top:25%; + left:0; + pointer-events:none; + opacity:0.5; + } + + /* active state */ + input:focus ~ .highlight { + .animation(inputHighlighter 0.3s ease); + } + +} + + +// DRAG&DROP ANIMATIONS +// ========================== + +.oe_snippet_body { + .opacity(0); + .animation(fadeInDownSmall 1s forwards); +} diff --git a/addons/web_editor/static/src/less/web_editor.interactions.less b/addons/web_editor/static/src/less/web_editor.interactions.less new file mode 100644 index 00000000000..20e70c6a095 --- /dev/null +++ b/addons/web_editor/static/src/less/web_editor.interactions.less @@ -0,0 +1,61 @@ +// Transitions +// ====================== + +@we_md-ease: cubic-bezier(0.19, 1, 0.22, 1); + +// Animation +// ====================== + +@-webkit-keyframes fadeInDownSmall { + 0% { + opacity: 0; + .translateY(-5px); + } + 100% { + opacity: 1; + .translateY(0); + } +} +@keyframes fadeInDownSmall { + 0% { + opacity: 0; + .translateY(-5px); + } + 100% { + opacity: 1; + .translateY(0); + } +} +@-webkit-keyframes fadeInOut { + 0% { + opacity: 0; + } + 25% { + opacity: 1; + } + 75% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes fadeInOut { + 0% { + opacity: 0; + } + 25% { + opacity: 1; + } + 75% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +@keyframes inputHighlighter { + from { background: @we_color-accent; } + to { width:0; background:transparent; } +} diff --git a/addons/web_editor/static/src/less/web_editor.mixins.less b/addons/web_editor/static/src/less/web_editor.mixins.less new file mode 100644 index 00000000000..2c4c78b4703 --- /dev/null +++ b/addons/web_editor/static/src/less/web_editor.mixins.less @@ -0,0 +1,204 @@ +// Button variants +// ======================== +// Easily pump out default styles, as well as :hover, :focus, :active, +// and disabled options for all buttons + +.button-variant(@color, @background, @border) { + color: @color; + background-color: @background; + border-color: @border; + &:focus, + &.focus { + color: @color; + background-color: darken(@background, 10%); + border-color: darken(@border, 25%); + } + &:hover { + color: @color; + background-color: darken(@background, 10%); + border-color: darken(@border, 12%); + } + &:active, + &.active, + .open > &.dropdown-toggle { + color: @color; + background-color: darken(@background, 10%); + border-color: darken(@border, 12%); + &:hover, + &:focus, + &.focus { + color: @color; + background-color: darken(@background, 17%); + border-color: darken(@border, 25%); + } + } + &:active, + &.active, + .open > &.dropdown-toggle { + background-image: none; + } + &.disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &.focus, + &:active, + &.active { + background-color: @background; + border-color: @border; + } + } + .badge { + color: @background; + background-color: @color; + } +} + +// Button sizes +.button-size(@padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius) { + padding: @padding-vertical @padding-horizontal; + font-size: @font-size; + line-height: @line-height; + border-radius: @border-radius; +} + +// Opacity +.opacity(@opacity) { + opacity: @opacity; + // IE8 filter + @opacity-ie: (@opacity * 100); + filter: ~"alpha(opacity=@{opacity-ie})"; +} + +// Transitions +.transition(@transition...) { + -moz-transition: @transition; + -o-transition: @transition; + -webkit-transition: @transition; + transition: @transition; +} + +.transition-property(@property...) { + -moz-transition-property: @property; + -o-transition-property: @property; + -webkit-transition-property: @property; + transition-property: @property; +} + +.transition-duration(@duration...) { + -moz-transition-property: @duration; + -o-transition-property: @duration; + -webkit-transition-property: @duration; + transition-property: @duration; +} + +.transition-timing-function(@timing...) { + -moz-transition-timing-function: @timing; + -o-transition-timing-function: @timing; + -webkit-transition-timing-function: @timing; + transition-timing-function: @timing; +} + +.transition-delay(@delay...) { + -moz-transition-delay: @delay; + -o-transition-delay: @delay; + -webkit-transition-delay: @delay; + transition-delay: @delay; +} + +// ANIMATIONS +// =========================== + +.animation(@str) { + -webkit-animation: @str; + -moz-animation: @str; + -ms-animation: @str; + -o-animation: @str; + animation: @str; +} + + +// BACKGROUND GRADIENT +// ======================= + +.linear-gradient(@start-color: #555; @end-color: #333; @deg: 45deg) { + background-repeat: repeat-x; + background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12 + background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ +} + +.box-shadow(@string) { + -webkit-box-shadow: @string; + -moz-box-shadow: @string; + box-shadow: @string; +} + +.border-radius(@radius: 5px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} + +// TRANSFORM +// =================================== +.transform(@transforms) { + -moz-transform: @transforms; + -o-transform: @transforms; + -ms-transform: @transforms; + -webkit-transform: @transforms; + transform: @transforms; +} + +// rotate +.rotate(@deg) { + .transform(rotate(@deg)); +} + +// scale +.scale(@scale) { + .transform(scale(@scale)); +} + +// translate +.translate(@x, @y) { + .transform(translate(@x, @y)); +} + +// translate +.translateY(@y) { + .transform(translateY(@y)); +} + +// skew +.skew(@x, @y) { + .transform(skew(@xdeg, @ydeg)); +} + +// transform origin +.transform-origin(@origin) { + moz-transform-origin: @origin; + -o-transform-origin: @origin; + -ms-transform-origin: @origin; + -webkit-transform-origin: @origin; + transform-origin: @origin; +} + +// HELPERS +// ====================================== + +.user-select(@str) { + -moz-user-select: @str; + -webkit-user-select: @str; + -ms-user-select: @str; + user-select: @str; +} + +// Box sizing +.box-sizing(@boxmodel) { + -webkit-box-sizing: @boxmodel; + -moz-box-sizing: @boxmodel; + box-sizing: @boxmodel; +} diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less new file mode 100644 index 00000000000..75410d27eb0 --- /dev/null +++ b/addons/web_editor/static/src/less/web_editor.ui.less @@ -0,0 +1,976 @@ + + +#web_editor-top-edit { + text-rendering: geometricPrecision; + -webkit-font-smoothing: antialiased; + background-color: @we_color-dark; + height: @we_editor-bar-height; + font-family: @we_font-default; + min-height: initial; + border: none; + + form.navbar-form { + margin: 0; + padding: 0; + border: none; + text-align: right; + position: absolute; + height: @we_editor-bar-height; + right: -@we_sidebar-width; + .transition(right 0.4s @we_md-ease); + .full { + margin-top: 0; + margin-bottom: 0; + border-radius: 0; + padding: 0 15px; + height: @we_editor-bar-height; + &.accent { + .button-variant(white, @we_color-accent, @we_color-accent) + } + &.compl { + .button-variant(white, @we_color-primary, @we_color-primary) + } + } + a, button { + font-weight: 600; + font-size: 11px; + } + .btn-group { + button { + height: @we_editor-bar-height; + padding: 0 10px 0 10px; + line-height: 1; + border-radius: 0; + margin: 0; + border: none; + .button-variant(white, @we_color-primary, @we_color-primary); + } + } + } +} + +#web_editor_snippets { + text-rendering: geometricPrecision; + -webkit-font-smoothing: antialiased; + bottom: 0; + width: @we_sidebar-width; + left: -@we_sidebar-width; + top: 0; + z-index: 1030; + font-family: @we_font-default; + position: fixed; + .transition(left 0.4s @we_md-ease); + #o_left_bar { + top: @we_editor-bar-height; + width: @we_sidebar-width; + left: 0px; + bottom: 0; + .linear-gradient(@we_color-normal, darken(@we_color-normal, 10%)); + .box-shadow(0px 10px 10px -10px black inset); + } +} + +#snippets_menu { + border: 1px solid @we_color-divider; + border-width: 0 1px 1px 0; + background: @we_color-dark; + height: @we_editor-bar-height + 1; + text-align: center; + margin: 0; + padding: 7px 0; + list-style-type: none; + li { + display: inline-block; + padding: 0 9px; + font-size: 0; + a i { + color: #999999; + &:hover{ color: white; } + } + &.structure a i{ + font-size: 25px; + .translateY(3px); + } + &.content a i{ + font-size: 19px; + } + &.feature a i{ + font-size: 19px; + } + &.effect a i{ + font-size: 16px; + .translateY(-3px); + } + } + li.active a { + color: white; + } +} + + +#o_scroll { + .o_panel { + margin: 0; + border: 0; + width: 210px; + } + .o_panel_header { + padding: 1px 8px; + color: #999999; + text-align: center; + } + .o_panel_body { + white-space: normal; + background: transparent; + padding: 7px 3px; + } +} + +.oe_snippet { + display: inline-block; + vertical-align: top; + width: 93px; + margin-left: 3px; + margin-right: 3px; + margin-top: 1px; + position: relative; + overflow: hidden; + .user-select(none); + cursor: move; + cursor: copy; + color: @we_color-text-normal; + font-weight: 600; + margin-bottom: 0.5em; + .oe_snippet_thumbnail { + text-align: center; + height: 100%; + background: transparent; + position: relative; + .oe_snippet_thumbnail_img { + height: 74px; + width: 92px; + background-size: cover; + opacity: 0.9; + } + .oe_snippet_thumbnail_title { + font-size: 12px; + display: block; + text-shadow: none; + color: @we_color-text-normal; + } + &:hover { + .oe_snippet_thumbnail_img { + opacity: 1; + .scale(1); + } + .oe_snippet_thumbnail_title { + color: white; + } + } + } + > :not(.oe_snippet_thumbnail) { + display: none !important; + } + &.disable { + .oe_snippet_thumbnail { + background-color: rgba(255, 0, 0, 0.75); + } + .oe_snippet_thumbnail_img { + opacity: 0.8; + } + } +} + + +.oe_drop_zone.oe_insert{ + display: block; + height: 48px; + margin: 0px; + margin-top: -4px; + margin-bottom: -44px; + width: 100%; + position: absolute; + z-index: 1000; + .transition(margin 250ms linear); + &:not(.oe_vertical):before{ + content: ""; + display: block; + border-top: dashed 2px rgba(209, 178, 255, 0.72); + position: relative; + top: 0px} + &.oe_hover:before{ + border-top: dashed 2px rgba(116, 255, 161, 0.72)} + &.oe_vertical{ + width: 48px; + float: left; + position: relative; + margin: 0px -24px !important} + &.oe_vertical_text{ + width: 48px; + float: none; + display: inline-block; + position: relative; + margin: 0px -24px !important} + &.oe_overlay{ + .border-radius(3px); + background: rgba(153, 0, 255,.5)} +} +.oe_drop_zone, .oe_drop_zone_style{ + border: none; + background: rgba(153, 0, 255, .3); + .border-radius(4px); + &.oe_hover{ + background: rgba(0, 255, 133, .3); + z-index: 1001} +} +.oe_drop_zone_style{ + color: white; + height: 48px; + margin-bottom: 32px; + padding-top: 12px +} + + + + +/* ---- SNIPPET MANIPULATOR ---- {{{ */ + +#oe_manipulators { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.oe_overlay { + display:none; + height:0; + position:absolute; + background:transparent; + z-index:1001; + border-radius:3px; + .transition(opacity 100ms linear); + .box-sizing(border-box); + &.o_keypress { + .transition(0.8s); + } +} + + +/* ---- HANDLES ---- {{{ */ + +.oe_handle { + display:block; + width:16px; + height:16px; + margin:-2px; + .o-position-absolute(50%, auto, auto, 50%); + .box-sizing(border-box); + .opacity(0.6); + .transition(opacity 0.3s ease); + &:hover { + .opacity(0.9); + } + // Orizontal lines + > div { + z-index:1; + position:absolute; + border-style:dashed; + border-width:1px; + border-color:#666666; + .box-shadow(inset 0px 0px 0px 1px rgba(255,255,255,0.5) 0px 0px 0px 1px rgba(255,255,255,0.5)); + } + // Vertical lines + &.e > div, &.w > div { + width:0; + height:100%; + top:2px; + left:8px; + } + &.readonly { + cursor:auto !important; + } + &.readonly:before, &.readonly.size { + display:none !important; + } +} + +.oe_handle.e, .oe_handle.w, .oe_handle.s, .oe_handle.n { + &:before { + z-index:2; + position:relative; + top:50%; + left:50%; + display:block; + border:solid 1px rgba(0,0,0,0.2); + width:18px; + height:18px; + margin:-9px; + font-size:14px; + line-height:16px; + font-family:FontAwesome; + content:""; + text-align:center; + padding:1px; + border-radius: 3px; + background-color: @we_color-light; + color: @we_color-text-light; + .transition(background 100ms linear); + } + &:hover:before{ + background-color: @we_color-dark; + color:#ffffff; + .box-shadow(0 0 5px 3px rgba(255,255,255,0.7)); + } +} + +// SPECIFIC HANDLERS POSITION +// =========================== + +.oe_handle.e { + top:4px; + height:100%; + left:auto; + right:-6px; + cursor:w-resize; +} +.oe_handle.w { + top:4px; + height:100%; + left:-6px; + cursor:e-resize; +} +.oe_handle.s { + left:2px; + width:100%; + top:auto; + cursor:n-resize; + > div { + width:100%; + height:0; + top:7px; + left:1px; + } +} +.oe_handle.n { + left:2px; + width:100%; + cursor:s-resize; + > div { + width:100%; + height:0; + top:5px; + left:1px; + } +} + +// SIZE HANDLERS +// =========================== + +.oe_handle.size { + z-index: 3; + margin-left: -50px; + .auto_size, .size { + font-weight: 600; + font-size: 9px; + line-height: 9px; + text-transform: uppercase; + line-height: 9px; + padding: 4px; + border-radius: 3px; + border: none; + height: 18px; + text-align: center; + margin-top: -10px; + background-color: @we_color-light; + color: @we_color-text-light; + .o-position-absolute(9px); + .box-shadow(none); + &:hover { + background-color: @we_color-dark; + color: white; + } + } + .size { + width:64px; + cursor:row-resize; + margin-left:52px; + margin-left: 60px; + } + .auto_size { + margin-left: -63px; + width:100px; + cursor:pointer; + .transition(all 1s ease); + } +} + + +// HANDLERS ICONS +// =========================== + +.oe_overlay{ + .w:before, .e:before { + content:"\f07e"; + } + .s:before, .n:before { + content:"\f07d"; + } +} + +.oe_overlay.oe_active { + display:block; +} + +.oe_overlay.block-w-left .w:before { + content:"" !important; +} +.oe_overlay.block-w-right .w:before { + content:"" !important; +} +.oe_overlay.block-w-left.block-w-right .w:before { + display:none !important; +} +.oe_overlay.block-e-left .e:before { + content:"" !important; +} +.oe_overlay.block-e-right .e:before { + content:"" !important; +} +.oe_overlay.block-e-left.block-e-right .e:before { + display:none !important; +} +.oe_overlay.block-s-top .s:before { + content:"" !important; +} +.oe_overlay.block-s-bottom .s:before { + content:"" !important; +} +.oe_overlay.block-n-top .n:before { + content:"" !important; +} +.oe_overlay.block-n-bottom .n:before { + content:"" !important; +} + +.s-resize-important { + & * { + cursor:s-resize !important; + } +} +.n-resize-important { + & * { + cursor:n-resize !important; + } +} +.e-resize-important { + & * { + cursor:e-resize !important; + } +} +.w-resize-important { + & * { + cursor:w-resize !important; + } +} +.move-important { + & * { + cursor:move !important; + } +} + +.block-s-top .s:before, +.block-s-bottom .s:before, +.block-n-top .n:before, +.block-n-bottom .n:before, +.block-w-left .w:before, +.block-e-right .e:before { + font-size: 10px; +} + + + + +// OVERLAY OPTIONS +// =========================== + +.oe_overlay_options { + text-align:center; + margin-top: -17px; + z-index:1002; + .o-position-absolute(-20px, auto, auto, 50%); + > .btn-group { + left:-50%; + white-space:nowrap; + // default buttons (not customize) + > a.btn { + cursor:pointer; + display:inline-block; + background-color: @we_color-light; + color: @we_color-text-light; + border: 1px solid lighten(@we_color-dark, 10%); + border-left-width: 0; + border-radius: 0; + margin: 0; + float: left; + font-weight: 600; + .transition(all 0.4s ease); + &:first-child { + border-left-width: 1px; + } + &:hover { + color: white; + background-color: lighten(@we_color-dark, 10%); + } + &.oe_snippet_remove { + color: white; + background-color: @we_color-danger; + border-color: darken(@we_color-danger, 20%); + &:hover{ + background-color: darken(@we_color-danger, 20%); + } + } + } + } +} + +// CUTOMIZE MENU BUTTON +// =========================== + +.oe_options{ + float: left; + display:inline-block; + .btn.btn-primary { + background-color: @we_color-dark; + border: 1px solid @we_color-dark; + color: @we_color-text-light; + width: 110px; + font-weight: bold; + text-align: left; + text-transform: uppercase; + font-size: 10px; + line-height: 18px; + .transition(all 0.3s ease); + &:hover, &:active, &:focus { + background-color: lighten(@we_color-dark, 5%); + border-color: lighten(@we_color-dark, 10%); + color: white; + outline: none; + .transition(all 0.3s ease); + } + &:before, &:after { + content: ""; + background-color: @we_color-text-light; + border-radius: 5px; + margin-top: -1px; + height: 2px; + width: 7px; + .o-position-absolute(50%); + .transition(all 0.3s); + } + &:before { + right: 21px; + .rotate(45deg); + } + &:after { + right: 17px; + .rotate(-45deg); + } + } + // Open menu + &.open .btn.btn-primary { + background-color: @we_color-light; + &:before { + right: 22px; + width: 9px; + transform: translateX(5px) rotate(-45deg); + background-color: white; + } + &:after { + width: 9px; + background-color: white; + .rotate(45deg); + } + } +} + +// CUTOMIZE MENU +// =========================== +.oe_options { + .dropdown-menu { + text-align:left; + background-color: @we_color-light; + min-width: 192px; + .border-radius(0); + margin: -1px 0 0 0; + padding: 0; + border-color: @we_color-light; + border: 1px solid @we_color-dark; + select, input { + display:block; + } + a { + color: @we_color-text-light; + font-weight: 600; + font-size: 12px; + padding: 5px 20px; + } + } +} + +// CUTOMIZE MENU LI +// =========================== + +.oe_options .dropdown-menu li { + background-color: @we_color-light; + position: relative; + a { + cursor: pointer; + background-color: transparent; + } + &:last-child a { + padding-bottom: 8px; + } + &:hover { + background-color: fadeOut(@we_color-dark, 50%); + &.dropdown-submenu:after{ + border-left-color: white; + } + > a { + color: white; + background: transparent; + } + > .dropdown-menu{ + display: block; + left: 100%; + top: 1px; + } + } + &.dropdown-submenu:after{ + content: ""; + .o-position-absolute(10px, 10px); + .o-caret-right(3px); + border-left-color: @we_color-text-light; + } + &.divider { + background-color: @we_color-divider; + margin: -1px 0; + } + &.active { + > a { + color: white; + background-color: fadeOut(@we_color-dark, 50%); + &:after { + content: "\E876"; + font-family: "Material Icons"; + float: right; + color: @we_color-accent; + } + } + } +} + + + +// NOTE EDITOR +// ========================= + +.note-popover .popover { + height: @we_editor-bar-height; + top: 0 !important; + left: 0 !important; + padding: 0; + margin: 0 0 0 @we_sidebar-width; + background-color: @we_color-dark; + border-radius: 0; + border-width: 0 1px; + width: auto; + text-align: center; + .box-shadow(none); + .popover-content { + height: @we_editor-bar-height; + .btn { + height: @we_editor-bar-height; + border: none; + border-radius: 0; + background-color: @we_color-dark; + color: @we_color-text-normal; + border-top: 2px solid transparent; + .transition(all 0.3s); + &:hover { + border-top: 2px solid @we_color-text-normal; + color: @we_color-text-normal; + } + } + .btn.active { + border-top: 2px solid white; + background-color: @we_color-dark; + color: @we_color-text-light; + .box-shadow(inset 0 3px 10px rgba(0, 0, 0, 0.5)); + } + >.btn-group { + margin-top: -2px + } + .btn-group.open .dropdown-toggle { + border-top: 2px solid white; + background-color: @we_color-darker; + color: white; + .box-shadow(none); + } + .dropdown-menu { + margin: 11px 0 0; + border: 0; + border-top: 7px solid darken(@we_color-accent,10%); + background-color: @we_color-darker; + border-radius: 2px 2px 0 0; + &:before{ + .o-caret-up(8px); + border-bottom-color: darken(@we_color-accent,10%); + .o-position-absolute(-15px, auto, auto, 5px); + } + > li > a { + color: @we_color-text-light; + &:hover { + color: white; + } + } + } + #colors_preview { + padding: 4px; + border-radius: 2px; + border: 1px solid #989898; + border-color:fadeOut(@we_color-text-normal, 0.5); + } + .note-color-palette td > button, .note-color-palette div .note-color-btn { + border-color: fadeOut(white, 50%); + border-radius: 0; + margin: 1px; + } + } +} + +.foreground_toggle, .background_toggle{ + > button { + width: 30px!important; + text-align: center; + } + > button > .caret { + display: none; + } +} +.foreground_toggle > button:before{ + font-family:FontAwesome; + content:'\f1fc'; +} +.background_toggle > button:before{ + font-family:'Material Icons'; + content:'\E23A'; +} +.note-popover .popover-content{ + .note-color{ + border: 1px solid @we_color-divider; + border-width: 0 1px; + .dropdown-menu{ + min-width: 250px!important; + padding: 0!important; + .note-palette-title{ + padding: 10px 0px 10px 10px; + color: @we_color-text-light; + font-weight: bold; + position: absolute; + } + .palette-reset{ + text-align: right; + width: 100%; + margin: 0; + padding: 5px 10px 0; + .note-color-reset{ + float: right; + margin: 3px 0 0; + padding: 0; + &:hover{ + background: transparent!important; + color: @we_color-danger; + } + } + } + } + } +} + + +.note-popover .popover-content .dropdown-menu, #oe_manipulators .snippet-option-colorpicker .dropdown-menu{ + > li{ + background-color: @we_color-darker; + min-width: 250px!important + } + .tabs_container{ + background-color: @we_color-darker; + font-size: 0; + background-color: @we_tab--active-bg; + border: 1px solid darken(@we_tab-bg,10%); + border-width: 1px 0 0; + margin: 5px 0 0; + .tabs_toggles{ + display: table-cell; + font-size: 14px; + width: 50px; + padding:0; + margin: 0; + list-style: none; + height: 100%; + vertical-align: top; + background-color: @we_tab-bg; + li{ + background: transparent; + margin-bottom: 10px; + &:last-child{ + margin-bottom: 0; + } + > a { + padding: 5px 10px; + display: block; + } + > a > i { + visibility: visible; + color: darken(@we_color-text-light, 10%); + } + &:hover, &.active{ + > a > i {color: white} + } + &.active > a{ + background-color: @we_tab--active-bg; + } + } + } + .tabs{ + display: table-cell; + font-size: 14px; + height: 100%; + width: 200px; + } + .tab{ + display: none; + padding: 5px 10px; + background-color: @we_tab--active-bg; + } + .tab.on{ + display: block; + } + } +} + + +// COLORPICKER +// ==================================== + +#oe_manipulators .snippet-option-colorpicker .dropdown-menu{ + + .note-palette-title{ + padding: 10px 0px 10px 10px; + color: @we_color-text-light; + font-weight: bold; + position: absolute; + } + .palette-reset{ + text-align: right; + width: 100%; + margin: 0; + padding: 5px 10px 0; + cursor: pointer; + .note-color-reset{ + float: right; + margin: 3px 0 0; + padding: 0; + &:hover{ + background: transparent!important; + color: @we_color-danger; + } + } + } +} +.popover-content, .dropdown-menu { + .palette_theme, .palette_ui, .palette_grayscale { + button { + display: block; + font-size: 12px; + width: 100%; + max-width: 180px; + padding: 5px 20px; + margin: 0; + position: relative; + text-align: left; + background-color: @we_color-normal; + border: 1px solid @we_color-dark; + height: 30px; + color: @we_color-text-light; + white-space: nowrap; + overflow: auto; + font-weight: 600; + -webkit-font-smoothing: antialiased; + .border-radius(3px); + margin-bottom: 5px; + span { + height: 20px; + width: 25px; + float: right; + display: inline-block; + border: 1px solid #393c44; + .o-position-absolute(4px, 5px); + box-shadow: -10px 0px 10px @we_color-normal; + } + &:hover { + border: 1px solid @we_color-dark; + background: @we_color-light; + color: white; + span { + box-shadow: -10px 0px 10px @we_color-light; + } + } + } + button.selected{ + border: 1px solid @we_color-dark; + background: @we_color-light; + color: white; + span { + box-shadow: -10px 0px 10px @we_color-light; + } + &:before{ + content: "\f00c"; + font-family: "FontAwesome"; + color: @we_color-accent; + position: absolute; + left: 5px; + line-height: 1.7; + font-size: 0.8em; + } + } + } +} + + + + + +// ENTER IN EDIT MODE +// ============================================ + +body.editor_enable { + #web_editor-top-edit { + background-color: transparent; + } + #web_editor_snippets { + .transition(left 0.4s @we_md-ease); + } +} + +body.editor_enable.editor_has_snippets { + #web_editor-top-edit { + .transition(background 0.4s @we_md-ease); + background-color: @we_color-dark; + .navbar-form { + right: 0; + } + } + #web_editor_snippets { + left: 0; + } +} diff --git a/addons/web_editor/static/src/less/web_editor.variables.less b/addons/web_editor/static/src/less/web_editor.variables.less new file mode 100644 index 00000000000..d72d63931bd --- /dev/null +++ b/addons/web_editor/static/src/less/web_editor.variables.less @@ -0,0 +1,76 @@ + +// Fonts +// ======================= +@we_font-default : "Roboto", Roboto, sans-serif; +@we_font-size-def : 14px; + +// COLORS UI +// ======================= +@we_color-dark : #2c2c36; +@we_color-darker : darken(@we_color-dark,2%); +@we_color-divider : #33363e; +@we_color-normal : #50545d; +@we_color-light : #4e525b; + +@we_color-paper : #fbfbfd; +@we_color-inactive : #646465; + +@we_color-text-normal : #999999; +@we_color-text-light : #d4d5d7; +@we_color-text-dark : #505050; + +@we_color-accent : #1cc1a9; +@we_color-accent-d10 : darken(@we_color-accent, 10%); +@we_color-primary : #b35e9b; +@we_color-primary-d10 : darken(@we_color-primary, 10%); +@we_color-primary-l10 : lighten(@we_color-primary, 10%); +@we_color-primary-hover : #7e376b; + +@we_color-danger : #e6586c; +@we_color-success : #4ab980; + + +// LAYOUT +// ======================= +@we_screen_xs : 480px; +@we_screen_sm : 768px; +@we_screen_md : 992px; +@we_screen_lg : 1200px; + + +// TOP BAR +// ======================= +@we_editor-bar-height : 45px; +@we_editor-dropdown-border-height : 2px; +@we_editor-bar-bg : @we_color-primary; +@we_editor-bar-link-color : @we_color-paper; +@we_editor-bar-link-shadow : @we_color-primary-d10; + + +// EDITOR +// ======================= +@we_sidebar-width: 210px; + + +// SHADOWS +// ======================= +@we_box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 3px 1px -2px rgba(0, 0, 0, 0.2), + 0 1px 5px 0 rgba(0, 0, 0, 0.12); + + +// DROPDOWNS +// ======================= +@we_dropdown-toggle-color : @we_color-paper; +@we_dropdown-toggle-shadow-color : @we_color-primary-d10; +@we_dropdown-menu-color : @we_color-primary-hover; + // open + @we_dropdown--open-toggle-color : white; + @we_dropdown--open-toggle-bg-color : @we_color-primary-hover; + @we_dropdown--open-toggle-shadow-color : @we_color-primary-hover; + + +// TABS +// ======================= +@we_tab-bg: @we_color-darker; +@we_tab--active-bg: #3D4048; diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml index 44abb32caf1..3891e7caf89 100644 --- a/addons/web_editor/static/src/xml/editor.xml +++ b/addons/web_editor/static/src/xml/editor.xml @@ -1,41 +1,375 @@ <templates id="template" xml:space="preserve"> <t t-name="web_editor.editorbar"> - <div id="web_editor-top-edit" class="o_css_editor navbar navbar-inverse navbar-fixed-top hidden-xs"> + <div class="o_css_editor navbar navbar-fixed-top hidden-xs" id="web_editor-top-edit"> + <div id="web_editor-toolbars" /> <form class="navbar-form text-muted"> - <button type="button" data-action="save" - class="btn btn-primary btn-xs">Save</button> - <span> or </span> - <a href="#" data-action="cancel" class="btn btn-link btn-xs">Discard</a> + <div id="web_editor-top-actions"> + <a class="btn btn-link btn-xs" data-action="cancel" href="#"> + <i class="material-icons">clear</i>DISCARD</a> + <button class="btn full compl btn-xs" data-action="save" type="button"> + <i class="fa fa-floppy-o"></i> SAVE</button> + </div> </form> </div> </t> - <t t-name="web_editor.dialog"> - <div class="modal web_editor-dialog" tabindex="-1" role="dialog" aria-hidden="true"> + <div aria-hidden="true" class="modal web_editor-dialog" role="dialog" tabindex="-1"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button> + <h3 class="modal-title"> + <t t-esc="title"/> + </h3> + </div> + <div class="modal-body"> + <t t-raw="0"/> + </div> + <div class="modal-footer"> + <button class="btn btn-primary save" t-if="!button" type="button">Save</button> + <button class="btn btn-primary save" t-if="button" type="button"> + <t t-raw="button"/> + </button> + <button class="btn hidden wait" disabled="disabled" type="button"/> + <span>or </span> + <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a> + </div> + </div> + </div> + </div> + </t> + <t t-name="web_editor.dialog.background_position"> + <div aria-hidden="true" class="modal website_modal web_editor-background_position" role="dialog" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> - <h3 class="modal-title"><t t-esc="title"/></h3> + <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button> + <h3 class="modal-title">Background Image Options</h3> </div> - <div class="modal-body"><t t-raw="0"/></div> + <div class="modal-body"> + <div class="panel-group" id="bg_image_opt_accordition" role="tablist" aria-multiselectable="true"> + <div class="panel panel-default"> + <div class="panel-heading" role="tab" id="heading_cover"> + <label role="button" class="radio inline" data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_cover"> + <input id="radio1" class="opt_select" name="rdo" type="radio"/>COVER</label> + </div> + <div class="panel-collapse collapse" role="tabpanel" id="collapse_cover"> + <div class="panel-body"> + + <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><i class="material-icons">help</i></a> + + <div class="help collapse" id="cover_help"> + + <div class="simulator cover_bg"> + <div class="bg"></div> + <div class="el"></div> + </div> + + <div class="help-text"> + <p>The 'cover' method scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view</p> + </div> + </div> + <p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p> + <div class="cover_editing_container"> + <h6>Click on the picture</h6> + <div class="object"> + <span class="grid grid-1"/> + <span class="grid grid-2"/> + <span class="grid grid-3"/> + <span class="grid grid-4"/> + <span class="focus_point"/> + <div class="ui_info">X: <span class="x"/> Y: <span class="y"/></div> + </div> + </div> + </div> + </div> + </div> + <div class="panel panel-default"> + <div class="panel-heading" role="tab" id="heading_contain"> + <label role="button" class="radio inline" data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_contain"> + <input id="radio2" class="opt_select" name="rdo" type="radio"/>CONTAIN</label> + </div> + <div class="panel-collapse collapse" role="tabpanel" id="collapse_contain"> + <div class="panel-body"> + <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><i class="material-icons">help</i></a> + + <div class="help collapse" id="contain_help"> + + <div class="simulator contain_bg"> + <div class="bg"></div> + <div class="el"></div> + </div> + + <div class="help-text"> + <p>Scale the image to the largest size such that both its width and its height can fit inside the content area</p> + </div> + </div> + + <form class="form-horizontal"> + <div class="form-group"> + <label class="col-sm-2 control-label" for="repeatInput">Repeat</label> + <div class="col-sm-5"> + <div class="checkbox"> + <label> + <input id="contain_repeat" type="checkbox"/> + </label> + </div> + </div> + </div> + </form> + </div> + </div> + </div> + <div class="panel panel-default"> + <div class="panel-heading" role="tab" id="heading_custom"> + <label role="button" class="radio inline" data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_custom"> + <input id="radio3" class="opt_select" name="rdo" type="radio"/>CUSTOM</label> + </div> + <div class="panel-collapse collapse" role="tabpanel" id="collapse_custom"> + <div class="panel-body"> + <form class="form-horizontal"> + <fieldset> + <legend>Background size</legend> + <p>Sets the width and height of the background image in percent of the parent element.</p> + <div class="form-group"> + <label class="col-sm-3 control-label" for="custom_size_x">Background width</label> + <div class="col-sm-5"> + <div class="input-group"> + <input type="number" min="0" max="100" class="form-control input-sm" id="custom_size_x" placeholder="auto"/> + <div class="input-group-addon">%</div> + </div> + </div> + </div> + <div class="form-group"> + <label class="col-sm-3 control-label" for="custom_size_y">Background height</label> + <div class="col-sm-5"> + <div class="input-group"> + <input type="number" min="0" max="100" class="form-control input-sm" id="custom_size_y" placeholder="auto"/> + <div class="input-group-addon">%</div> + </div> + </div> + </div> + </fieldset> + <fieldset> + <legend>Background position</legend> + <p>Set the starting position of the background image.</p> + <div class="form-group"> + <label class="col-sm-3 control-label" for="custom_pos_x">Horizontal</label> + <div class="col-sm-5"> + <div class="input-group"> + <input type="number" min="0" max="100" class="form-control input-sm" id="custom_pos_x" placeholder="auto"/> + <div class="input-group-addon">%</div> + </div> + </div> + </div> + <div class="form-group"> + <label class="col-sm-3 control-label" for="custom_pos_x">Vertical</label> + <div class="col-sm-5"> + <div class="input-group"> + <input type="number" min="0" max="100" class="form-control input-sm" id="custom_pos_y" placeholder="auto"/> + <div class="input-group-addon">%</div> + </div> + </div> + </div> + </fieldset> + <fieldset> + <legend>Background repeat</legend> + <p>Define if/how the background image will be repeated</p> + <select class="form-control" id="custom_repeat"> + <option value="o_bg_img_no_repeat">No repeat</option> + <option value="o_bg_img_repeat">Repeat both</option> + <option value="o_bg_img_repeat_x">Repeat x</option> + <option value="o_bg_img_repeat_y">Repeat y</option> + </select> + </fieldset> + </form> + + </div> + </div> + </div> <!-- / .panel --> + </div> <!-- / .panel-group --> + <input id="pos_x" type="hidden"/> + <input id="pos_y" type="hidden"/> + <input id="bg_size" type="hidden"/> + </div> <!-- /.modal-body --> + <div class="modal-footer"> - <button type="button" class="btn btn-primary save" t-if="!button">Save</button> - <button type="button" class="btn btn-primary save" t-if="button"><t t-raw="button"/></button> - <button type="button" class="btn hidden wait" disabled="disabled"/> - <span> or </span> - <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a> + <button class="btn btn-primary save" data-dismiss="modal" type="button">Save</button> or <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a> </div> + + </div> + </div> + </div> + </t> + <t t-name="web_editor.dialog.background_position"> + <div aria-hidden="true" class="modal website_modal web_editor-background_position" role="dialog" tabindex="-1"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button> + <h3 class="modal-title">Background Image Options</h3> + </div> + <div class="modal-body"> + <div class="panel-group" id="bg_image_opt_accordition" role="tablist" aria-multiselectable="true"> + <div class="panel panel-default"> + <div class="panel-heading" role="tab" id="heading_cover"> + <label role="button" class="radio inline" data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_cover"> + <input id="radio1" class="opt_select" name="rdo" type="radio"/>COVER</label> + </div> + <div class="panel-collapse collapse" role="tabpanel" id="collapse_cover"> + <div class="panel-body"> + + <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><i class="material-icons">help</i></a> + + <div class="help collapse" id="cover_help"> + + <div class="simulator cover_bg"> + <div class="bg"></div> + <div class="el"></div> + </div> + + <div class="help-text"> + <p>The 'cover' method scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view</p> + </div> + </div> + <p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p> + <div class="cover_editing_container"> + <h6>Click on the picture</h6> + <div class="object"> + <span class="grid grid-1"/> + <span class="grid grid-2"/> + <span class="grid grid-3"/> + <span class="grid grid-4"/> + <span class="focus_point"/> + <div class="ui_info">X: <span class="x"/> Y: <span class="y"/></div> + </div> + </div> + </div> + </div> + </div> + <div class="panel panel-default"> + <div class="panel-heading" role="tab" id="heading_contain"> + <label role="button" class="radio inline" data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_contain"> + <input id="radio2" class="opt_select" name="rdo" type="radio"/>CONTAIN</label> + </div> + <div class="panel-collapse collapse" role="tabpanel" id="collapse_contain"> + <div class="panel-body"> + <a class="help-controll collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><i class="material-icons">help</i></a> + + <div class="help collapse" id="contain_help"> + + <div class="simulator contain_bg"> + <div class="bg"></div> + <div class="el"></div> + </div> + + <div class="help-text"> + <p>Scale the image to the largest size such that both its width and its height can fit inside the content area</p> + </div> + </div> + + <form class="form-horizontal"> + <div class="form-group"> + <label class="col-sm-2 control-label" for="repeatInput">Repeat</label> + <div class="col-sm-5"> + <div class="checkbox"> + <label> + <input id="contain_repeat" type="checkbox"/> + </label> + </div> + </div> + </div> + </form> + </div> + </div> + </div> + <div class="panel panel-default"> + <div class="panel-heading" role="tab" id="heading_custom"> + <label role="button" class="radio inline" data-toggle="collapse" data-parent="#bg_image_opt_accordition" href="#collapse_custom"> + <input id="radio3" class="opt_select" name="rdo" type="radio"/>CUSTOM</label> + </div> + <div class="panel-collapse collapse" role="tabpanel" id="collapse_custom"> + <div class="panel-body"> + <form class="form-horizontal"> + <fieldset> + <legend>Background size</legend> + <p>Sets the width and height of the background image in percent of the parent element.</p> + <div class="form-group"> + <label class="col-sm-3 control-label" for="custom_size_x">Background width</label> + <div class="col-sm-5"> + <div class="input-group"> + <input type="number" min="0" max="100" class="form-control input-sm" id="custom_size_x" placeholder="auto"/> + <div class="input-group-addon">%</div> + </div> + </div> + </div> + <div class="form-group"> + <label class="col-sm-3 control-label" for="custom_size_y">Background height</label> + <div class="col-sm-5"> + <div class="input-group"> + <input type="number" min="0" max="100" class="form-control input-sm" id="custom_size_y" placeholder="auto"/> + <div class="input-group-addon">%</div> + </div> + </div> + </div> + </fieldset> + <fieldset> + <legend>Background position</legend> + <p>Set the starting position of the background image.</p> + <div class="form-group"> + <label class="col-sm-3 control-label" for="custom_pos_x">Horizontal</label> + <div class="col-sm-5"> + <div class="input-group"> + <input type="number" min="0" max="100" class="form-control input-sm" id="custom_pos_x" placeholder="auto"/> + <div class="input-group-addon">%</div> + </div> + </div> + </div> + <div class="form-group"> + <label class="col-sm-3 control-label" for="custom_pos_x">Vertical</label> + <div class="col-sm-5"> + <div class="input-group"> + <input type="number" min="0" max="100" class="form-control input-sm" id="custom_pos_y" placeholder="auto"/> + <div class="input-group-addon">%</div> + </div> + </div> + </div> + </fieldset> + <fieldset> + <legend>Background repeat</legend> + <p>Define if/how the background image will be repeated</p> + <select class="form-control" id="custom_repeat"> + <option value="o_bg_img_no_repeat">No repeat</option> + <option value="o_bg_img_repeat">Repeat both</option> + <option value="o_bg_img_repeat_x">Repeat x</option> + <option value="o_bg_img_repeat_y">Repeat y</option> + </select> + </fieldset> + </form> + + </div> + </div> + </div> <!-- / .panel --> + </div> <!-- / .panel-group --> + <input id="pos_x" type="hidden"/> + <input id="pos_y" type="hidden"/> + <input id="bg_size" type="hidden"/> + </div> <!-- /.modal-body --> + + <div class="modal-footer"> + <button class="btn btn-primary save" data-dismiss="modal" type="button">Save</button> or <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a> + </div> + </div> </div> </div> </t> <t t-name="web_editor.dialog.media"> - <div class="modal note-image-dialog" tabindex="-1" role="dialog" aria-hidden="true"> + <div aria-hidden="true" class="modal note-image-dialog" role="dialog" tabindex="-1"> <div class="modal-dialog select-media"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button> <h3 class="modal-title">Select a Media</h3> </div> <div class="modal-body"> @@ -46,37 +380,34 @@ <li><a href="#editor-media-video" data-toggle="tab">Video</a></li> <li class="search" style="float: right;"> <ul class="pager mb0 mt0"> - <li class="previous disabled"><a href="#">← Previous</a></li> - <li class="next disabled"><a href="#">Next →</a></li> + <li class="previous disabled"> + <a href="#">← Previous</a> + </li> + <li class="next disabled"> + <a href="#">Next →</a> + </li> </ul> </li> <li class="search" style="float: right;"> <form action="#"> <div class="form-group font-icons fa fa-search mb0"> - <input type="search" class="form-control" id="icon-search"/> + <input class="form-control" id="icon-search" type="search"/> </div> </form> </li> </ul> - <!-- Tab panes --> <div class="tab-content"> - <div class="tab-pane fade in active" id="editor-media-image"> - </div> - <div class="tab-pane fade" id="editor-media-document"> - </div> - <div class="tab-pane fade" id="editor-media-icon"> - </div> - <div class="tab-pane fade" id="editor-media-video"> - </div> + <div class="tab-pane fade in active" id="editor-media-image"/> + <div class="tab-pane fade" id="editor-media-icon"/> + <div class="tab-pane fade" id="editor-media-video"/> </div> </div> <div class="modal-footer"> - <button type="button" class="btn btn-primary save">Save</button> - <button type="button" class="btn hidden wait" disabled="disabled"/> - or - <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a> - </div> + <button class="btn btn-primary save" type="button">Save</button> + <button class="btn hidden wait" disabled="disabled" type="button"/>or + + <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a></div> </div> </div> </div> @@ -94,41 +425,43 @@ <input type="file" name="upload" t-att-accept="widget.accept" multiple="multiple" style="position: absolute; opacity: 0; width: 1px; height: 1px;"/> <input type="hidden" name="disable_optimization" value=""/> <div class="btn-group"> - <button type="button" class="btn btn-primary filepicker">Upload an image from your computer</button> - <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> - <span class="caret"></span> + <button class="btn btn-primary filepicker" type="button">Upload an image from your computer</button> + <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"> + <span class="caret"/> <span class="sr-only">Alternate Upload</span> </button> <ul class="dropdown-menu" role="menu"> - <li><a href="#" class="js_disable_optimization">Upload image without optimization</a></li> + <li> + <a class="js_disable_optimization" href="#">Upload image without optimization</a> + </li> </ul> </div> - <button type="button" class="btn hidden wait" disabled="disabled">Uploading...</button> + <button class="btn hidden wait" disabled="disabled" type="button">Uploading...</button> </div> <div> - <span class="text-muted"> — or — </span> + <span class="text-muted">— or — </span> <label for="iamgeurl">Add an image URL</label> <div class="form-group btn-group"> - <input type="text" name="url" class="form-control url pull-left" style="width: 320px;" id="iamgeurl" placeholder="http://openerp.com/logo.png"/> + <input class="form-control url pull-left" id="iamgeurl" name="url" placeholder="http://openerp.com/logo.png" style="width: 320px;" type="text"/> <button class="btn btn-default" type="submit">Add</button> </div> </div> </div> - <input type="hidden" name="func"/> + <input name="func" type="hidden"/> <div class="help-block"/> <div class="existing-attachments"> <t t-call="web_editor.dialog.image.existing"/> </div> </form> </div> - <iframe src="about:blank" name="fileframe" class="hidden"/> + <iframe class="hidden" name="fileframe" src="about:blank"/> </t> <t t-name="web_editor.dialog.image.existing"> - <div class="modal" tabindex="-1" role="dialog" aria-hidden="true"> + <div aria-hidden="true" class="modal" role="dialog" tabindex="-1"> <div class="modal-dialog select-image"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button> <h3 class="modal-title">Select a Picture</h3> </div> <div class="modal-body has-error"> @@ -136,7 +469,7 @@ <div class="help-block"/> </div> <div class="modal-footer"> - <a href="#" data-dismiss="modal" aria-hidden="true">Discard</a> + <a aria-hidden="true" data-dismiss="modal" href="#">Discard</a> </div> </div> </div> @@ -144,9 +477,8 @@ </t> <t t-name="web_editor.dialog.image.existing.content"> <div class="existing-attachments"> - <div class="row mt16" t-foreach="rows" t-as="row"> - <div class="col-sm-2 existing-attachment-cell" - t-foreach="row" t-as="attachment"> + <div class="row mt16" t-as="row" t-foreach="rows"> + <div class="col-sm-2 existing-attachment-cell" t-as="attachment" t-foreach="row"> <i class="fa fa-times existing-attachment-remove" t-att-data-id="attachment.id"/> <div class="o_attachment_border"><div t-att-data-src="attachment.src" t-att-data-url="attachment.url" t-att-alt="attachment.name" t-att-title="attachment.name" t-att-data-id="attachment.id" t-att-data-mimetype="attachment.mimetype" class="o_image"/></div> </div> @@ -157,7 +489,7 @@ <div class="help-block"> <p>The image could not be deleted because it is used in the following pages or views:</p> - <ul t-foreach="views" t-as="view"> + <ul t-as="view" t-foreach="views"> <li> <a t-attf-href="/web#model=ir.ui.view&id=#{view.id}"> <t t-esc="view.name"/> @@ -166,52 +498,51 @@ </ul> </div> </t> - <t t-name="web_editor.discard"> - <div class="modal" tabindex="-1" role="dialog" aria-hidden="true"> + <div aria-hidden="true" class="modal" role="dialog" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button> <h3 class="modal-title">Discard edition</h3> </div> <div class="modal-body"> - <p> - If you discard the current edition, <em>all</em> - unsaved changes will be lost. - </p> + <p>If you discard the current edition, + <em>all</em> + unsaved changes will be lost.</p> <p>You can cancel to return to the edition mode.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-danger">Discard</button> - or - <a href="#" data-dismiss="modal" aria-hidden="true">Cancel</a> - </div> + <button class="btn btn-danger" type="button">Discard</button>or + + <a aria-hidden="true" data-dismiss="modal" href="#">Cancel</a></div> </div> </div> </div> </t> - <t t-name="web_editor.dialog.alt"> <t t-call="web_editor.dialog"> <t t-set="title">Change media Alt and Title</t> <form action="#" class="form-horizontal"> <div class="form-group"> - <label for="alt" class="col-sm-2 control-label">Alt:</label> - <div class="col-sm-9"><input id="alt" type="text" class="form-control" required="required" t-att-value="widget.alt"/></div> + <label class="col-sm-2 control-label" for="alt">Alt:</label> + <div class="col-sm-9"> + <input class="form-control" id="alt" required="required" t-att-value="widget.alt" type="text"/> + </div> </div> <div class="form-group"> - <label for="title" class="col-sm-2 control-label">Title:</label> - <div class="col-sm-9"><input id="title" type="text" class="form-control" required="required" t-att-value="widget.title"/></div> + <label class="col-sm-2 control-label" for="title">Title:</label> + <div class="col-sm-9"> + <input class="form-control" id="title" required="required" t-att-value="widget.title" type="text"/> + </div> </div> </form> </t> </t> - <t t-name="web_editor.dialog.font-icons"> <form action="#"> - <input type="hidden" id="fa-icon"/> - <input type="hidden" id="fa-size" value="fa-1x"/> + <input id="fa-icon" type="hidden"/> + <input id="fa-size" type="hidden" value="fa-1x"/> <div class="font-icons-icons"> <t t-call="web_editor.dialog.font-icons.icons"> <t t-set="iconsParser" t-value="widget.iconsParser"/> @@ -220,61 +551,40 @@ </form> </t> <t t-name="web_editor.dialog.font-icons.icons"> - <t t-foreach="iconsParser" t-as="data"> - <span t-foreach="data.cssData" t-as="cssData" - t-attf-class="#{data.base} font-icons-icon #{cssData[2]}" - t-attf-data-alias=",#{cssData[3]}," - t-att-title="cssData[3].join(', ')" - t-att-data-id="cssData[2]"/> + <t t-as="data" t-foreach="iconsParser"> + <span t-as="cssData" t-att-data-id="cssData[2]" t-att-title="cssData[3].join(', ')" t-attf-class="#{data.base} font-icons-icon #{cssData[2]}" t-attf-data-alias=",#{cssData[3]}," t-foreach="data.cssData"/> </t> </t> - <t t-name="web_editor.dialog.video"> <form action="#" class="form-inline"> <div class="well"> <div class="form-group btn-group"> <span class="text-muted pull-right" style="margin-left:10px; line-height: 2em;">(Youtube, Vimeo, Dailymotion)</span> - <label for="urlvideo" style="width: 220px; line-height: 2em;" class="pull-left">Set a video URL</label> - <input type="text" - name="url" - class="form-control url pull-left" - style="width: 400px;" - id="urlvideo" - placeholder="//www.youtube.com/embed/yws1tbgNV7k" - t-translation="off"/> + <label class="pull-left" for="urlvideo" style="width: 220px; line-height: 2em;">Set a video URL</label> + <input class="form-control url pull-left" id="urlvideo" name="url" placeholder="//www.youtube.com/embed/yws1tbgNV7k" style="width: 400px;" t-translation="off" type="text"/> <button class="btn btn-default">Preview</button> </div> <div class="form-group btn-group"> - <label for="urlvideo" style="width: 220px; line-height: 2em;" class="pull-left"><span class="text-muted">— or —</span> Embed Video (HTML)</label> - <input type="text" - name="embed" - class="form-control url pull-left" - style="width: 400px;" - id="embedvideo" - placeholder='<iframe src="//www.youtube.com/embed/yws1tbgNV7k"></iframe>' - t-translation="off"/> + <label class="pull-left" for="urlvideo" style="width: 220px; line-height: 2em;"> + <span class="text-muted">— or —</span>Embed Video (HTML)</label> + <input class="form-control url pull-left" id="embedvideo" name="embed" placeholder="<iframe src="//www.youtube.com/embed/yws1tbgNV7k"></iframe>" style="width: 400px;" t-translation="off" type="text"/> <button class="btn btn-default">Preview</button> </div> </div> - <div id="video-preview" style="width: 450px; margin: 0 auto;"> <div class="media_iframe_video"> - <div class="media_iframe_video_size"></div> - <iframe - src="" - frameborder="0" - allowfullscreen="allowfullscreen"></iframe> + <div class="media_iframe_video_size"/> + <iframe allowfullscreen="allowfullscreen" frameborder="0" src=""/> </div> </div> - <div class="text-center mt32"> <div class="checkbox"> - <label><input type="checkbox" id="autoplay"/> Autoplay</label> + <label> + <input id="autoplay" type="checkbox"/>Autoplay</label> </div> </div> </form> </t> - <t t-name="web_editor.dialog.link"> <t t-call="web_editor.dialog"> <t t-set="title">Link to</t> @@ -282,78 +592,85 @@ <div class="list-group"> <div class="form-group list-group-item active"> <h3 class="list-group-item-heading"> - <label for="link-new" class="control-label"> - Link Label + <label class="control-label" for="link-new">Link Label </label> </h3> - <input type="text" class="form-control" id="link-text" required="required"/> + <input class="form-control" id="link-text" required="required" type="text"/> </div> </div> <ul class="list-group"> <li class="list-group-item form-group clearfix active"> <div class="pull-right" style="display: none;"> <label> - <input type="checkbox" class="window-new"/> - Open in new window - </label> + <input class="window-new" type="checkbox"/>Open in new window</label> </div> <h4 class="list-group-item-heading"> - <label for="link-external" class="control-label"> - URL or Email Address + <label class="control-label" for="link-external">URL or Email Address </label> </h4> - <input type="text" class="form-control url email-address url-source" - id="link-external" placeholder="http://openerp.com"/> + <input class="form-control url email-address url-source" id="link-external" placeholder="http://openerp.com" type="text"/> </li> </ul> <div class="form-horizontal link-style"> <div class="form-group"> - <label class="col-sm-2 control-label"> - Style + <label class="col-sm-2 control-label">Style </label> <div class="col-sm-4"> <div class="dropdown" style="line-height: 2em;"> - <a data-toggle="dropdown" class="btn btn-default" href="#">Color Style <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> + <a class="btn btn-default" data-toggle="dropdown" href="#">Color Style + <span class="caret"/></a> + <ul aria-labelledby="dLabel" class="dropdown-menu" role="menu"> <li> - <label class="btn btn-link">Link<input value="" class="link-style" type="radio" name="link-style-type" checked="checked"/></label> + <label class="btn btn-link">Link + <input checked="checked" class="link-style" name="link-style-type" type="radio" value=""/></label> </li> <li> - <label class="btn btn-default">Basic<input value="btn-default" class="link-style" type="radio" name="link-style-type"/></label> + <label class="btn btn-default">Basic + <input class="link-style" name="link-style-type" type="radio" value="btn-default"/></label> </li> <li> - <label class="btn btn-success">Success<input value="btn-success" class="link-style" type="radio" name="link-style-type"/></label> + <label class="btn btn-success">Success + <input class="link-style" name="link-style-type" type="radio" value="btn-success"/></label> </li> <li> - <label class="btn btn-primary">Primary<input value="btn-primary" class="link-style" type="radio" name="link-style-type"/></label> + <label class="btn btn-primary">Primary + <input class="link-style" name="link-style-type" type="radio" value="btn-primary"/></label> </li> <li> - <label class="btn btn-info">Info<input value="btn-info" class="link-style" type="radio" name="link-style-type"/></label> + <label class="btn btn-info">Info + <input class="link-style" name="link-style-type" type="radio" value="btn-info"/></label> </li> <li> - <label class="btn btn-warning">Warning<input value="btn-warning" class="link-style" type="radio" name="link-style-type"/></label> + <label class="btn btn-warning">Warning + <input class="link-style" name="link-style-type" type="radio" value="btn-warning"/></label> </li> <li> - <label class="btn btn-danger">Danger<input value="btn-danger" class="link-style" type="radio" name="link-style-type"/></label> + <label class="btn btn-danger">Danger + <input class="link-style" name="link-style-type" type="radio" value="btn-danger"/></label> </li> </ul> </div> </div> <div class="col-sm-4"> <div class="dropdown" style="line-height: 2em;"> - <a data-toggle="dropdown" class="btn btn-default" href="#">Size <span class="caret"></span></a> - <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> + <a class="btn btn-default" data-toggle="dropdown" href="#">Size + <span class="caret"/></a> + <ul aria-labelledby="dLabel" class="dropdown-menu" role="menu"> <li> - <label class="btn btn-default btn-xs">Extra Small<input value="btn-xs" class="link-style" type="radio" name="link-style-size"/></label> + <label class="btn btn-default btn-xs">Extra Small + <input class="link-style" name="link-style-size" type="radio" value="btn-xs"/></label> </li> <li> - <label class="btn btn-default btn-sm">Small<input value="btn-sm" class="link-style" type="radio" name="link-style-size"/></label> + <label class="btn btn-default btn-sm">Small + <input class="link-style" name="link-style-size" type="radio" value="btn-sm"/></label> </li> <li> - <label class="btn btn-default">Default<input value="" class="link-style" type="radio" name="link-style-size" checked="checked"/></label> + <label class="btn btn-default">Default + <input checked="checked" class="link-style" name="link-style-size" type="radio" value=""/></label> </li> <li> - <label class="btn btn-default btn-lg">Large<input value="btn-lg" class="link-style" type="radio" name="link-style-size"/></label> + <label class="btn btn-default btn-lg">Large + <input class="link-style" name="link-style-size" type="radio" value="btn-lg"/></label> </li> </ul> </div> @@ -362,12 +679,11 @@ </div> <div class="form-horizontal link-style"> <div class="form-group"> - <label class="col-sm-2 control-label"> - Preview + <label class="col-sm-2 control-label">Preview </label> <div class="col-sm-10" style="line-height: 2em;"> <div style="overflow: auto; max-width: 100%; max-height: 200px;"> - <a id="link-preview" href="#"></a> + <a href="#" id="link-preview"/> </div> </div> </div> diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml index 0b194de6af9..3ec1bf42308 100644 --- a/addons/web_editor/static/src/xml/snippets.xml +++ b/addons/web_editor/static/src/xml/snippets.xml @@ -14,15 +14,8 @@ </t> <t t-name="web_editor.snippets"> - <div id='oe_snippets' class="hidden-xs o_open"> - <div id="o_arrow"> - <span class="fa fa-angle-double-right fa-1x" style="top: 10px;"></span> - <div>Insert Blocks</div> - <span class="fa fa-angle-double-right fa-1x" style="bottom: 10px;"></span> - </div> - <div id="o_left_bar"> - <span class='snippets_loading'>Snippets are loading...</span> - </div> + <div id='web_editor_snippets' class="hidden-xs o_open"> + <div id="o_left_bar"></div> </div> </t> @@ -32,7 +25,7 @@ <div class="btn-group"> <a href="#" class="btn btn-default btn-sm oe_snippet_parent" title="Select Container Block"><i class="fa fa-upload"></i></a> <div class="dropdown oe_options hidden btn-group"> - <a href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize <span class="caret"/></a> + <a href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize </a> <ul class="dropdown-menu" role="menu"></ul> </div> <a href="#" class="btn btn-default btn-sm oe_snippet_move" title="Drag to Move"><i class="fa fa-arrows ml4 mr4"></i></a> |