pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[MERGE] website, *: review web(site) editor UI

Browse Source 
* web, web_editor, web_planner

See sub-commits for details.

task-32191
This commit is contained in:
qsm-odoo
2017-07-10 13:38:32 +02:00
parent 548dd8bec7 330e0cccd4
commit 7ebedd9438
16 changed files with 546 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/less/navbar.less
+10 -10
View File
@@ -2,17 +2,17 @@
.o_main_navbar {
position: relative;
height: @odoo-navbar-height;
border: 1px solid @odoo-navbar-inverse-link-hover-bg;
border-bottom: 1px solid @odoo-navbar-inverse-link-hover-bg;
background-color: @odoo-brand-primary;
color: white;
> a, > button {
float: left;
width: @odoo-navbar-height - 2;
height: @odoo-navbar-height - 2;
width: @odoo-navbar-height;
height: @odoo-navbar-height;
border: none;
padding: 0;
line-height: @odoo-navbar-height - 2;
line-height: @odoo-navbar-height;
background-color: transparent;
text-align: center;
color: inherit;
@@ -37,7 +37,7 @@
color: white;
font-size: 22px;
font-weight: 500;
line-height: @odoo-navbar-height - 2;
line-height: @odoo-navbar-height;
@media (max-width: @screen-xs-max) {
float: none;
@@ -65,10 +65,10 @@
> a {
display: block;
height: @odoo-navbar-height - 2;
height: @odoo-navbar-height;
padding: 0 10px;
color: white;
line-height: @odoo-navbar-height - 2;
line-height: @odoo-navbar-height;
&:hover {
background-color: @odoo-navbar-inverse-link-hover-bg;
@@ -81,7 +81,7 @@
&.o_extra_menu_items {
> a {
width: @odoo-navbar-height - 2;
width: @odoo-navbar-height;
text-align: center;
}
&.open > ul {
@@ -176,8 +176,8 @@
}
&.o_menu_systray {
.o-position-absolute(0px, @odoo-navbar-height - 2, auto, @odoo-navbar-height - 2);
height: @odoo-navbar-height - 2;
.o-position-absolute(0px, @odoo-navbar-height, auto, @odoo-navbar-height);
height: @odoo-navbar-height;
text-align: right;
> li {
addons/web_editor/static/src/js/snippets.options.js
+33
View File
@@ -329,6 +329,8 @@ odoo.define('web_editor.snippets.options', function (require) {
if (change) {
self.on_resize(compass, beginClass, current);
self.buildingBlock.cover_target(self.$overlay, self.$target);
self.adapt_margin_preview_size();
$handle.addClass('oe_handle_change');
}
};
@@ -343,10 +345,13 @@ odoo.define('web_editor.snippets.options', function (require) {
}
},0);
self.$target.removeClass("resize_editor_busy");
$handle.removeClass('oe_handle_change');
if (compass === "size") {
$fixed_size.addClass("active");
$auto_size.removeClass("active");
} else {
self._highlight_margins_preview(300);
}
};
$body.mousemove(body_mousemove);
@@ -372,10 +377,14 @@ odoo.define('web_editor.snippets.options', function (require) {
on_focus : function () {
this._super();
this.change_cursor();
this.adapt_margin_preview_size();
},
change_cursor : function () {
var _class = this.$target.attr("class") || "";
var $handle_s = this.$overlay.find('.oe_handle.s');
var $handle_n = this.$overlay.find('.oe_handle.n');
var $handle_w = this.$overlay.find('.oe_handle.w');
var col = _class.match(/col-md-([0-9-]+)/i);
col = col ? +col[1] : 0;
@@ -387,20 +396,44 @@ odoo.define('web_editor.snippets.options', function (require) {
if (col+offset >= 12) overlay_class+= " block-e-right";
if (col === 1) overlay_class+= " block-w-right block-e-left";
if (offset === 0) overlay_class+= " block-w-left";
$handle_w.toggleClass('oe_handle_centered', offset > 0).toggleClass('o_handle_edited', offset >= 1 );
var mb = _class.match(/mb([0-9-]+)/i);
mb = mb ? +mb[1] : parseInt(this.$target.css('margin-bottom'));
if (mb >= 128) overlay_class+= " block-s-bottom";
else if (!mb) overlay_class+= " block-s-top";
$handle_s.toggleClass('oe_handle_centered', mb >= 32).toggleClass('o_handle_edited', mb > 0 );
var mt = _class.match(/mt([0-9-]+)/i);
mt = mt ? +mt[1] : parseInt(this.$target.css('margin-top'));
if (mt >= 128) overlay_class+= " block-n-top";
else if (!mt) overlay_class+= " block-n-bottom";
$handle_n.toggleClass('oe_handle_centered', mt >= 32).toggleClass('o_handle_edited', mt > 0 );
this.$overlay.attr("class", overlay_class);
},
adapt_margin_preview_size : function () {
var self = this,
ml = this.$target.css('margin-left');
_.each(this.$overlay.find(".oe_handle.n, .oe_handle.s"), function (handle) {
var $handle = $(handle);
var direction = $handle.hasClass('n') ? 'top': 'bottom';
$handle.height(self.$target.css('margin-' + direction ));
});
this.$overlay.find(".oe_handle.w").css({
width: ml,
left: '-' + ml
});
},
_highlight_margins_preview: function (timing) {
var handlers = this.$overlay.find(".oe_handle.n, .oe_handle.s, .oe_handle.w");
handlers.addClass('oe_handle_active').delay(timing).queue(function(){
handlers.removeClass('oe_handle_active').dequeue();
});
},
/* on_resize
* called when the box is resizing and the class change, before the cover_target
* @compass: resize direction : 'n', 's', 'e', 'w'
addons/web_editor/static/src/js/widgets.js
+2 -2
View File
@@ -471,8 +471,8 @@ var ImageDialog = Widget.extend({
this.$('.existing-attachments').replaceWith(QWeb.render('web_editor.dialog.image.existing.content', {rows: rows}));
this.parent.$('.pager')
.find('li.previous').toggleClass('disabled', (from === 0)).end()
.find('li.next').toggleClass('disabled', (from + per_screen >= records.length));
.find('li.previous a').toggleClass('disabled', (from === 0)).end()
.find('li.next a').toggleClass('disabled', (from + per_screen >= records.length));
this.$el.find('.o_image').each(function () {
var $div = $(this);
addons/web_editor/static/src/less/web_editor.ui.components.less
+33 -26
View File
@@ -1,49 +1,56 @@
// INPUTS
@o-switch-size: 2ex;
@o-switch-inactive-color: @gray-lighter;
.o_switch {
.o-flex-display();
.o-align-items(center);
font-weight: normal;
height: 1.5em;
cursor: pointer;
> input {
display: none;
+ span {
background: #bababa;
border-radius: 0.4em;
height: 1em;
width: 2.5em;
background-color: @o-switch-inactive-color;
box-shadow: inset 0 0 0px 1px darken(@o-switch-inactive-color,10%);
border-radius: 100rem;
height: @o-switch-size;
width: @o-switch-size * 1.8;
margin-right: 0.5em;
display: inline-block;
.transition(all 0.3s @o-we-md-ease);
&:after {
content: "";
background: #fafafa;
background: @o-we-color-paper;
display: block;
width: 1.5em;
height: 1.5em;
border-radius: 100em;
margin-top: -0.3em;
margin-left: -0.1em;
width: @o-switch-size - 0.2;
height: @o-switch-size - 0.2;
margin-top: 0.1ex;
margin-left: 0.3ex;
border-radius: 100rem;
.transition(all 0.3s @o-we-md-ease);
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);
box-shadow: 0 1px 1px darken(@o-switch-inactive-color,35%), inset 0 0 0 1px lighten(@o-switch-inactive-color,10%);
}
}
&:checked + span {
background-color: rgb(142, 224, 212);
background-color: transparentize(@odoo-brand-optional, 0.5);
box-shadow: none;
.o-linear-gradient(0deg, @o-we-color-success, darken(@o-we-color-success, 10%));
&:after {
background-color: @odoo-brand-optional;
margin-left: 1.1em;
margin-left: (@o-switch-size*1.8 - @o-switch-size) + 0.1;
}
}
}
&:hover > input + span:after {
background-color: mix(@odoo-brand-optional, #fafafa);
}
}
.dropdown-menu label .o_switch {
margin: 0;
padding: 2px 0;
}
.text-input-group {
position: relative;
margin-bottom: 45px;
@@ -208,16 +215,15 @@ body .modal {
width: 80%;
.modal-body {
.nav-tabs .active > a[href="#editor-media-icon"] {
background-color: white;
}
li.search {
float: right;
ul.pager {
margin: 0;
> li > a {
border-radius: 0px;
margin-left: 2px;
padding: 6px 14px;
}
ul.pager li:last-child{
margin-left: 2px;
}
.form-group {
position: relative;
@@ -233,6 +239,7 @@ body .modal {
}
.well {
border-color: @gray-lighter;
border-top-width: 0;
label {
addons/web_editor/static/src/less/web_editor.ui.less
+87 -35
View File
@@ -299,7 +299,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
// MANIPULATORS
#oe_manipulators {
@odoo-handle-edge-size: 8px;
@odoo-handle-edge-size: 1px;
@odoo-handle-border-width: 1px;
// SNIPPET MANIPULATORS
@@ -534,34 +534,78 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
// HANDLES
> .oe_handles {
@o-handles-offset-to-hide: 10000px;
@o-handless-accent-color: #00e2ff;
.o-position-absolute(-@o-handles-offset-to-hide, 0, auto, 0);
> .oe_handle {
@o-handle-size: 18px;
&:hover > .oe_handle {
background-color: fade(@o-handless-accent-color, 5%);
}
> .oe_handle {
@o-handle-btn-size: 18px;
opacity: 0.5;
.o-transition(opacity, 400ms);
&:hover {
opacity: 0.9;
border: 0 solid @o-handless-accent-color;
// MARGINS PREVIEW
&.n, &.s, &.w {
position: relative;
.o-transition(background, 0.3s);
&.oe_handle_change, &.oe_handle_active, &:hover {
background-color: fade(@o-handless-accent-color, 20%);
}
&.o_handle_edited {
opacity: 0.9;
&:after {
color: white;
border-color: darken(@o-handless-accent-color, 10%);
background-color: darken(@o-handless-accent-color, 20%);
}
}
&.oe_handle_change, &:hover {
opacity: 1;
&:before {
.o-position-absolute(0, @left:50%);
width: 1px;
height: 100%;
margin-left: -1px;
background-color: fade(@o-handless-accent-color, 50%);
content:'';
}
&.w:before {
.o-position-absolute(50%,@left: 0);
width: 100%;
height: 1px;
}
&:after {
border-color: darken(@o-handless-accent-color, 10%);
background-color: darken(@o-handless-accent-color, 20%);
}
}
}
border: 0 dashed black;
&:after {
display: block;
width: @o-handle-size;
height: @o-handle-size;
width: @o-handle-btn-size;
height: @o-handle-btn-size;
border: solid 1px rgba(0, 0, 0, 0.2);
line-height: @o-handle-size - 2;
line-height: @o-handle-btn-size - 2;
font-size: 14px;
font-family: FontAwesome;
background-color: @o-we-color-light;
color: @o-we-color-text-light;
}
&:hover:after {
background-color: @o-we-color-dark;
color: white;
box-shadow: 0 0 5px 3px rgba(255,255,255,0.7);
&:hover {
opacity: 0.9;
}
&.w:after, &.e:after {
content: "\f07e";
}
@@ -570,14 +614,18 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
}
&.w {
border-left-width: @odoo-handle-border-width;
border-width: @odoo-handle-border-width;
border-right-width: 0;
cursor: e-resize;
width: @odoo-handle-edge-size;
.o-position-absolute(@o-handles-offset-to-hide, auto, -@o-handles-offset-to-hide, 0);
&:after {
.o-position-absolute(@top: 50%, @left: -@odoo-handle-border-width);
margin-top: -@o-handle-size/2;
.o-position-absolute(@top: 50%, @left: 50%);
margin-top: -@o-handle-btn-size/2;
}
&.oe_handle_centered:after {
margin-left: -@o-handle-btn-size/2;
}
}
&.e {
@@ -588,29 +636,33 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
&:after {
.o-position-absolute(@top: 50%, @right: -@odoo-handle-border-width);
margin-top: -@o-handle-size/2;
margin-top: -@o-handle-btn-size/2;
}
}
&.n {
border-top-width: @odoo-handle-border-width;
cursor: s-resize;
height: @odoo-handle-edge-size;
.o-position-absolute(@o-handles-offset-to-hide, 0, auto, 0);
&:after {
.o-position-absolute(@left: 50%, @top: -@odoo-handle-border-width);
margin-left: -@o-handle-size/2;
.o-position-absolute(@left: 50%, @top: 50%);
margin-left: -@o-handle-btn-size/2;
}
}
&.s {
border-bottom-width: @odoo-handle-border-width;
cursor: n-resize;
height: @odoo-handle-edge-size;
.o-position-absolute(auto, 0, -@o-handles-offset-to-hide, 0);
&:after {
.o-position-absolute(@left: 50%, @bottom: -@odoo-handle-border-width);
margin-left: -@o-handle-size/2;
.o-position-absolute(@left: 50%, @bottom: 50%);
margin-left: -@o-handle-btn-size/2;
}
}
&.n, &.s {
cursor: ns-resize;
&.oe_handle_centered:after {
.o-position-absolute(@left: 50%, @top: 50%);
margin-top: -@o-handle-btn-size/2;
}
}
@@ -689,17 +741,17 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
&.block-e-left.block-e-right .e:after {
display: none !important;
}
&.block-s-top .s:after {
content: "" !important;
&.block-s-bottom .s, &.block-n-top .n {
cursor: n-resize!important;
&:after {
content: "\f062" !important;
}
}
&.block-s-bottom .s:after {
content: "" !important;
}
&.block-n-top .n:after {
content: "" !important;
}
&.block-n-bottom .n:after {
content: "" !important;
&.block-s-top .s, &.block-n-bottom .n {
cursor: s-resize!important;
&:after {
content: "\f063" !important;
}
}
}
}
addons/web_editor/static/src/less/web_editor.variables.less
+40 -4
View File
@@ -9,7 +9,7 @@
@o-we-color-divider: #33363e;
@o-we-color-light: #4e525b;
@o-we-color-normal: #50545d;
@o-we-color-paper: #fbfbfd;
@o-we-color-paper: #fcfcfc;
@o-we-color-text-normal: #999999;
@o-we-color-text-light: #d4d5d7;
@o-we-color-danger: #e6586c;
@@ -115,6 +115,12 @@
outline: none!important;
}
}
.label {
&:hover a, a {
color: #fff;
}
}
}
.o-w-preserve-forms() {
@@ -128,6 +134,13 @@
background-color: #fff;
border-radius: 0;
}
select.form-control {
.o-appearance(none);
background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHdpZHRoPScyNCcgaGVpZ2 h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBpZD0nc3ZnXzEnIGQ9J203LjQwNiw3L jgyOGw0LjU5NCw0LjU5NGw0LjU5NCwtNC41OTRsMC40MDYsMS40MDZsLTUsNC43NjZsLTUsLTQu NzY2bDAuNDA2LC0xLjQwNnonIGZpbGw9JyM4ODgnLz48L3N2Zz4=');
background-position: 100% 65%;
background-repeat: no-repeat;
}
}
.o-w-preserve-modals() {
@@ -146,6 +159,31 @@
}
}
.o-w-preserve-tabs() {
.nav-tabs {
border-bottom: 1px solid @gray-lighter;
> li {
> a {
line-height: 1.42857143;
color: @o-we-color-light;
&:hover {
border-color: @gray-lighter;
}
}
&.active > a {
&, &:hover, &:focus {
color: @o-we-color-normal;
background-color: @o-we-color-paper;
border-color: @gray-lighter;
border-bottom-color: transparent;
}
}
}
}
}
.o-w-preserve-btn() {
.btn:not(.o_btn_preview) {
border-width: 1px;
@@ -155,11 +193,9 @@
&.btn-primary {
.button-variant(white, @odoo-brand-optional, darken(@odoo-brand-optional,5%));
text-transform: uppercase;
}
&.btn-default {
.button-variant(@odoo-brand-optional, white, @o-we-color-text-light);
text-transform: uppercase;
.button-variant(@o-we-color-normal, white, @o-we-color-text-light);
}
&.btn-link {
.button-variant(@odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
addons/web_editor/static/src/xml/editor.xml
+7 -7
View File
@@ -53,11 +53,11 @@
<li><a href="#editor-media-video" data-toggle="tab">Video</a></li>
<li class="search">
<ul class="pager mb0 mt0">
<li class="previous disabled">
<a href="#">← Previous</a>
<li class="previous">
<a class="btn btn-default disabled" href="#"><i class="fa fa-angle-left"/>&#32;Previous</a>
</li>
<li class="next disabled">
<a href="#">Next →</a>
<li class="next">
<a class="btn btn-default disabled" href="#">Next&#32;<i class="fa fa-angle-right"/></a>
</li>
</ul>
</li>
@@ -202,16 +202,16 @@
<button class="btn btn-default">Preview</button>
</div>
</div>
<div id="video-preview" style="width: 450px; margin: 0 auto;">
<div id="video-preview">
<div class="media_iframe_video">
<div class="media_iframe_video_size"/>
<iframe allowfullscreen="allowfullscreen" frameborder="0" src=""/>
</div>
</div>
<div class="text-center mt32">
<div class="text-center mt8">
<div class="checkbox">
<label title="The feature might not be supported for every video type">
<input id="autoplay" type="checkbox"/>Autoplay</label>
<input id="autoplay" style="margin-right:5px" type="checkbox"/>Autoplay</label>
</div>
</div>
</form>
addons/web_planner/static/src/less/web_planner_common.less
+1 -1
View File
@@ -33,7 +33,7 @@
> .progress {
width: 70px;
height: @planner-height;
margin: floor((@odoo-navbar-height - 2 - @planner-height)/2) 10px 0;
margin: floor((@odoo-navbar-height - @planner-height)/2) 10px 0;
cursor: pointer;
> .progress-bar {
addons/website/static/src/js/website.contentMenu.js
+4 -1
View File
@@ -204,7 +204,8 @@ var EditMenuDialog = widget.Dialog.extend({
this.flat = this.flatenize(menu);
this.to_delete = [];
this._super(parent, _.extend({}, {
title: _t("Edit Menu")
title: _t("Edit Menu"),
size: 'medium',
}, options || {}));
},
start: function () {
@@ -332,6 +333,8 @@ var MenuEntryDialog = widget.LinkDialog.extend({
self.$('#o_link_dialog_url_input').closest('.form-group').toggle();
});
}
this.$modal.find('.modal-lg').removeClass('modal-lg')
.find('.col-md-8').removeClass('col-md-8').addClass('col-xs-12');
return this._super.apply(this, arguments);
},
addons/website/static/src/js/website.seo.js
+16 -4
View File
@@ -23,10 +23,10 @@ ajax.loadXML('/website/static/src/xml/website.seo.xml', qweb);
function analyzeKeyword(htmlPage, keyword) {
return htmlPage.isInTitle(keyword) ? {
title: 'label label-primary',
title: 'label label-success',
description: "This keyword is used in the page title",
} : htmlPage.isInDescription(keyword) ? {
title: 'label label-info',
title: 'label label-primary',
description: "This keyword is used in the page description",
} : htmlPage.isInBody(keyword) ? {
title: 'label label-info',
@@ -202,6 +202,7 @@ var KeywordList = Widget.extend({
keyword.on('removed', self, function () {
self.trigger('list-not-full');
self.trigger('removed', word);
self.trigger('content-updated', true);
});
keyword.on('selected', self, function (word, language) {
self.trigger('selected', word, language);
@@ -211,6 +212,7 @@ var KeywordList = Widget.extend({
if (self.isFull()) {
self.trigger('list-full');
}
self.trigger('content-updated');
},
});
@@ -392,10 +394,14 @@ var Configurator = Dialog.extend({
this.keywordList.on('selected', self, function (word, language) {
self.keywordList.add(word, language);
});
this.keywordList.appendTo(this.$('.js_seo_keywords_list'));
this.keywordList.on('content-updated', self, function (removed) {
self.updateTable(removed);
});
this.keywordList.insertAfter(this.$('.table thead'));
this.disableUnsavableFields();
this.renderPreview();
this.getLanguages();
this.updateTable();
},
getLanguages: function () {
var self = this;
@@ -453,7 +459,7 @@ var Configurator = Dialog.extend({
var keyword = _.isString(word) ? word : $input.val();
var language = $language.val().toLowerCase();
this.keywordList.add(keyword, language);
$input.val("");
$input.val("").focus();
},
update: function () {
var self = this;
@@ -551,6 +557,12 @@ var Configurator = Dialog.extend({
this.htmlPage.changeKeywords(this.keywordList.keywords());
this._super.apply(this, arguments);
},
updateTable : function (removed) {
var self = this,
val = removed ? (this.$el.find('tbody > tr').length - 1) : (this.$el.find('tbody > tr').length);
this.$('table').toggleClass('js_seo_has_content', val > 0 );
this.$el.scrollTop(self.$el[0].scrollHeight);
},
});
website.TopBar.include({
addons/website/static/src/less/website.ui.components.less
+197 -46
View File
@@ -2,6 +2,37 @@
/// This file regroups the style of website UI components (edition modals, forms, ...).
///
.o-w-close-icon(@size:12px, @color:#000, @color-hover:#000, @thickness: 1px, @opacity: 0.7, @opacity-hover: 1) {
color: transparent;
position: relative;
display: inline-block;
opacity: @opacity;
.square(@size);
&:hover, &:focus {
outline: none;
opacity: @opacity-hover;
&::after, &::before {
background: @color-hover;
}
}
&:after, &:before {
content: '';
margin-top: -1px;
background: @color;
.size(100%, @thickness);
.o-position-absolute(50%, @left:0);
.o-transform(rotate(45deg));
}
&:after {
.o-transform(rotate(-45deg));
}
}
// MODALS
body .modal {
&.o_website_modal {
@@ -12,6 +43,12 @@ body .modal {
.o-w-preserve-btn();
.o-w-preserve-wells();
.o-w-preserve-modals();
.o-w-preserve-tabs();
button.close {
.o-w-close-icon(12px);
margin-right: -2px;
}
.modal-content {
.modal-header .o_subtitle {
@@ -23,6 +60,11 @@ body .modal {
.clearfix();
}
}
.modal-footer {
.btn {
text-transform: uppercase;
}
}
}
@media (min-width: @screen-sm-min) {
@@ -185,62 +227,171 @@ body .modal {
}
}
// TOP MENU EDITOR
.oe_menu_editor {
ul {
padding-left: 37px;
}
li {
margin-top: -1px;
.input-group-addon {
border-radius: 0;
}
}
}
// SEO CONFIGURATION
&.oe_seo_configuration {
li.oe_seo_preview_g {
line-height: 1.2;
font-size: small;
font-family: arial, sans-serif;
h3 {
font-size: medium;
#language-box {
padding-right: 25px;
background-color:white;
margin-left: -1px;
}
.table {
td {
vertical-align: middle;
&:first-child {
padding-right: 15px;
border-width: 0;
width: 35%;
}
&:last-child {
visibility: hidden;
}
}
.r {
margin: 0;
font-size: 16px;
font-style: normal;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
white-space: nowrap;
a {
color: #1e0fbe;
text-decoration: underline;
text-transform: none;
em {
font-style: normal !important;
> tfoot {
display: none;
}
&.js_seo_has_content {
td {
&:first-child {
width: 55%;
padding-right: 15px;
border: 1px solid @o-we-color-text-light;
text-align: right;
background-color: @o-we-color-paper;
@media screen and (min-width: @screen-md-min) {
width: 38%;
}
}
&:last-child {
border: none;
visibility: visible;
padding-left: 15px;
@media screen and (min-width: @screen-md-min) {
padding-left: 50px;
}
}
}
}
.s {
color: #444;
max-width: 42em;
}
li.oe_seo_preview_g {
&, .st {
line-height: 1.24;
tbody {
td {
padding: 5px;
.o-transition(padding, .3s);
&:first-child {
border-width: 0 1px;
.label {
position: relative;
display: inline-block;
padding: 7px 35px;
font-size: 16px;
font-weight: normal;
.oe_remove {
.o-w-close-icon(10px, white, @o-we-color-danger, 2px);
.o-position-absolute(5px, 5px);
}
}
}
&:last-child {
.label {
display: block;
font-size: 12px;
font-weight: normal;
opacity: 0.8;
cursor: pointer;
&:hover {
opacity: 1;
}
}
}
}
tr {
.o-animation(fadeInDownSmall, .3s);
&:first-child {
td:first-child {
padding-top: 10px;
}
}
&:last-child {
td:first-child {
padding-bottom: 10px;
border-bottom-width: 1px;
}
}
}
}
.kv, .slp {
display: block;
margin-bottom: 1px;
}
.f {
color: #666;
margin-bottom: 1px;
cite {
color: #006621;
font-style: normal;
font-size: 14px;
> tfoot {
display: table-footer-group;
hr {
margin: 10px 0;
}
td, td:first-child {
border: none;
background: none;
}
}
}
}
@media (min-width: @screen-sm-min) {
.dl-horizontal dt {
min-width: 160px;
width: auto;
}
}
li.oe_seo_preview_g {
list-style: none;
font-family: arial, sans-serif;
.r {
cursor: pointer;
color:#1a0dab;
font-size: 18px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
white-space: nowrap;
}
.s {
font-size: 13px;
line-height: 18px;
color: #545454;
.kv {
color: #006621;
font-size: 14px;
line-height: 18px;
}
.st {
height: 50px;
}
}
}
}
}
addons/website/static/src/less/website.ui.less
-6
View File
@@ -29,12 +29,6 @@ body.o_connected_user {
&[data-action="edit"], &[data-action="translate"] {
.button-variant(white, @odoo-brand-optional, @odoo-brand-optional);
@media (max-width: @screen-xs-max) {
&, &:hover, &:focus {
outline: none;
}
}
}
> .fa-plus, > .fa-pencil {
addons/website/static/src/less/website.wrapwrap.less
+9 -3
View File
@@ -179,9 +179,15 @@ hr {
// HEADER NAV BAR
.navbar.navbar-static-top {
margin-bottom: 0;
ul.nav > li.divider {
.o-w-fill-navbar();
border-right: 1px solid @navbar-default-link-disabled-color;
ul.nav > li {
&.divider {
.o-w-fill-navbar();
border-right: 1px solid @navbar-default-link-disabled-color;
}
&.active + .divider {
visibility: hidden;
}
}
}
ul.nav-stacked > li > a {
addons/website/static/src/xml/website.contentMenu.xml
+6 -8
View File
@@ -40,15 +40,13 @@
<t t-call="website.contentMenu.dialog.submenu"/>
</t>
</ul>
<div class="mt16">
<div class="pull-right text-muted">
<div class="mt32">
<small class="pull-right text-muted">
Drag a menu to the right to create a sub-menu
</div>
<div>
<a href="#" class="js_add_menu">
<i class="fa fa-plus-circle"/> Add Menu Entry
</a>
</div>
</small>
<a href="#" class="js_add_menu">
<i class="fa fa-plus-circle"/> Add Menu Entry
</a>
</div>
</div>
<t t-name="website.contentMenu.dialog.edit.link_menu_options">
addons/website/static/src/xml/website.seo.xml
+74 -69
View File
@@ -12,55 +12,70 @@
</t>
<div t-name="website.seo_configuration">
<section class="row">
<div class="col-md-6">
<div class="form-horizontal mt16" role="form">
<div class="form-group">
<label for="seo_page_title" class="col-xs-3 control-label">Page title</label>
<div class="col-xs-9">
<input type="text" name="seo_page_title" class="form-control" maxlength="70" size="70"/>
</div>
</div>
<div class="form-group">
<label for="seo_page_description" class="col-xs-3 control-label">Description</label>
<div class="col-xs-9">
<textarea name="seo_page_description" class="form-control" style="max-width: 100%;height:145px;max-height:145px" t-att-maxlength="widget.maxDescriptionSize"/>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<h5 class="mt16">Preview <small>how your page will be listed on Google</small></h5>
<div class="well">
<div class="panel mb0">
<div class="panel-body">
<div class="js_seo_preview"/>
</div>
</div>
</div>
</div>
</section>
<hr/>
<div class="js_seo_tips" />
<section class="js_seo_keywords_list">
<h3 class="page-header mt16">1. Define Keywords <small>describing your page content</small></h3>
<div class="form-horizontal" role="form">
<div class="form-group">
<label for="seo_page_keywords" class="col-sm-3 control-label">Add keyword:</label>
<div class="col-sm-4">
<div>
<input type="text" name="seo_page_keywords" class="form-control" maxlength="30"/>
</div>
</div>
</div>
<div class="row mt8">
<label for="seo_page_language" class="col-sm-3 control-label">Language:</label>
<div>
<div class="col-sm-4">
<select name="seo_page_language" id="language-box" class="form-control"/>
</div>
</div>
</div>
<div class="row mt8">
<div class="col-md-10 text-center">
<button data-action="add" class="btn btn-default" type="button">Add</button>
</div>
</div>
</div>
<span class="text-muted">Most searched topics related to your keywords, ordered by importance:</span>
<!-- filled in JS -->
</section>
<section>
<h3 class="page-header">2. Reference Your Page <small>using above suggested keywords</small></h3>
<div class="form-horizontal mt16" role="form">
<div class="form-group">
<label for="seo_page_title" class="col-sm-2 control-label">Title</label>
<div class="col-sm-8">
<input type="text" name="seo_page_title" class="form-control" maxlength="70" size="70"/>
</div>
</div>
<div class="form-group">
<label for="seo_page_description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-8">
<textarea name="seo_page_description" class="form-control" rows="3" cols="70" t-att-maxlength="widget.maxDescriptionSize"/>
</div>
</div>
</div>
</section>
<section>
<h3 class="page-header">3. Preview <small>how your page will be listed on Google</small></h3>
<div class="js_seo_preview"></div>
<h4 class="mt16">Define Keywords <small>describing your page content</small></h4>
<table class="table table-responsive">
<thead>
<tr>
<td>
<div class="form-inline" role="form">
<div class="input-group">
<input type="text" style="min-width:170px" name="seo_page_keywords" class="form-control" placeholder="Keyword" maxlength="30"/>
<span class="input-group-btn">
<select name="seo_page_language" id="language-box" class="btn form-control"/>
</span>
<span class="input-group-btn">
<button data-action="add" class="btn btn-success" type="button">Add</button>
</span>
</div>
</div>
</td>
<td>Suggested<br/><small class="text-muted">Most searched topics related to your keywords, ordered by importance:</small></td>
</tr>
</thead>
<tfoot>
<tr>
<td/>
<td><hr/>
<small class="text-muted">Legend:</small>
<span class="label label-default">Not used</span>
<span class="label label-success">In title</span>
<span class="label label-primary">In description</span>
<span class="label label-info">In page's content</span>
</td>
</tr>
</tfoot>
</table>
</section>
</div>
@@ -71,9 +86,9 @@
</t>
<t t-name="website.seo_list">
<div>
<tbody>
<!-- filled in JS -->
</div>
</tbody>
</t>
<t t-name="website.seo_tip">
@@ -83,16 +98,16 @@
</t>
<t t-name="website.seo_keyword">
<dl class="dl-horizontal mt8 mb8">
<dt>
<tr>
<td>
<span t-attf-title="#{ widget.tooltip() }" t-attf-class="oe_seo_keyword #{ widget.highlight() } js_seo_keyword" t-att-data-keyword="widget.keyword">
<t t-raw="widget.keyword"/> <a href="#" class="oe_remove" data-action="remove-keyword">x</a>
<t t-raw="widget.keyword"/> <a href="#" class="oe_remove" data-action="remove-keyword"/>
</span>
</dt>
<dd class="js_seo_keyword_suggestion">
</td>
<td class="js_seo_keyword_suggestion">
<!-- filled in JS -->
</dd>
</dl>
</td>
</tr>
</t>
<t t-name="website.seo_suggestion">
@@ -113,20 +128,10 @@
<t t-name="website.seo_preview">
<li class="oe_seo_preview_g">
<div class="rc">
<span class="altcts"></span>
<h3 class="r">
<a t-att-href="url">
<em><t t-esc="widget.title"/></em>
</a>
</h3>
<div class="r"><t t-esc="widget.title"/></div>
<div class="s">
<div>
<div class="f kv" style="white-space:nowrap">
<cite><t t-esc="widget.url"/></cite>
</div>
<div class="f slp"></div>
<span class="st"><t t-esc="widget.description"/></span>
</div>
<div class="kv"><t t-esc="widget.url"/></div>
<div class="st"><t t-esc="widget.description"/></div>
</div>
</div>
</li>
addons/website/static/src/xml/website.xml
+27 -24
View File
@@ -59,37 +59,40 @@
</t>
<t t-name="website.dependencies">
<t t-if="dependencies">
<p class="text-warning">
<strong>Warning!</strong> Don't forget to update all links referring to this page:
</p>
<div t-if="_.keys(dependencies).length > 0" class="panel panel-warning">
<div class="panel-heading"><strong>Warning!</strong> Don't forget to update all links referring to this page:</div>
<t t-set='tid' t-value='0'/>
<div t-foreach="_.keys(dependencies)" t-as="type" class="mb16">
<a class="collapsed fa fa-caret-right" data-toggle="collapse" t-att-href="'#collapseDependencies'+tid" aria-expanded="false" t-att-aria-controls="'collapseDependencies'+tid">
<t t-esc="type"/>:&amp;nbsp;
<span class="text-muted"><t t-esc="dependencies[type].length"/> found(s)</span>
</a>
<div t-att-id="'collapseDependencies'+tid" class="collapse" aria-expanded="false" >
<ul>
<li t-foreach="dependencies[type]" t-as="error">
<a t-if="!_.contains(['', '#', false,], error.link)" t-att-href="error.link">
<t t-raw="error.text"/>
</a>
<t t-if="_.contains(['', '#', false,], error.link)" t-raw="error.text"/>
</li>
</ul>
<div class="panel-body">
<div t-foreach="_.keys(dependencies)" t-as="type">
<a class="collapsed" data-toggle="collapse" t-att-href="'#collapseDependencies'+tid" aria-expanded="false" t-att-aria-controls="'collapseDependencies'+tid">
<i class="fa fa-caret-right"/>
<b><t t-esc="type"/></b>:&amp;nbsp;
<span class="text-muted"><t t-esc="dependencies[type].length"/> found<span t-if="dependencies[type].length > 1">s</span></span>
</a>
<div t-att-id="'collapseDependencies'+tid" class="collapse" aria-expanded="false">
<ul>
<li t-foreach="dependencies[type]" t-as="error">
<a t-if="!_.contains(['', '#', false,], error.link)" t-att-href="error.link">
<t t-raw="error.text"/>
</a>
<t t-if="_.contains(['', '#', false,], error.link)" t-raw="error.text"/>
</li>
</ul>
</div>
<t t-set='tid' t-value='tid+1'/>
</div>
<t t-set='tid' t-value='tid+1'/>
</div>
</t>
</div>
</t>
<t t-name="website.delete_page">
<t t-call="website.modal_base">
<t t-call="website.dependencies" />
<form class="form-horizontal" role="form" t-att-id="id">
<div class="form-group">
<label class="col-sm-offset-2 col-sm-8 text-left alert alert-danger">
<input type="checkbox" onchange="$('.btn-continue').prop('disabled', !this.checked)"/> I'm sure, I want to delete this page definitively
<label class="col-xs-offset-1 col-xs-10 col-sm-offset-2 col-sm-8 mt16 text-center alert alert-danger">
<input style="margin-right:10px" type="checkbox" onchange="$('.btn-continue').prop('disabled', !this.checked)"/>
<span style="font-weight:normal"><br class="visible-xs"/><b>I'm sure</b>, I want to delete this page <b> <ins>definitively</ins></b></span>
</label>
</div>
</form>
@@ -99,8 +102,8 @@
<t t-name="website.rename_page">
<t t-call="website.modal_base">
<t t-call="website.dependencies" />
<div class="row">
<form class="form-horizontal alert alert-info" role="form" t-att-id="id">
<div class="well">
<form class="form-horizontal" role="form" t-att-id="id">
<div class="form-group mb0" >
<label for="new_name" class="control-label col-sm-4">Rename Page To:</label>
<div class="col-sm-8">