From c530c0d1ee179a9660e539a6e5249db0e4a49714 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Thu, 11 Jun 2015 11:05:46 +0200 Subject: [FIX] web: various tweaks to make web_kanban view work --- .../static/src/less/enterprise_compatibility.less | 195 +++++++++++++++++++++ addons/web/static/src/less/utils.less | 189 ++++++++++++++++++++ 2 files changed, 384 insertions(+) create mode 100644 addons/web/static/src/less/enterprise_compatibility.less create mode 100644 addons/web/static/src/less/utils.less (limited to 'addons/web/static/src/less') diff --git a/addons/web/static/src/less/enterprise_compatibility.less b/addons/web/static/src/less/enterprise_compatibility.less new file mode 100644 index 00000000000..1cfd5120c34 --- /dev/null +++ b/addons/web/static/src/less/enterprise_compatibility.less @@ -0,0 +1,195 @@ +// ------------------------------------------------------------------ +// Odoo +// ------------------------------------------------------------------ + +// This file is necessary to make the community edition of the Odoo web +// client compatible with the enterprise edition. + +// The problem is that we have two web clients in parallel, and every +// addons should behave properly with both. + +@odoo-brand-optional-disabled: #6ED0BC; // Specifically used for status bar status arrows +@odoo-brand-primary: #337ab7; +@odoo-brand-optional: @odoo-brand-primary; +@odoo-brand-secondary: #8f8f8f; +@odoo-form-group-cols: 12; +@odoo-horizontal-padding: 16px; +@odoo-list-grey: #e2e2e0; // FIXME: listview thead background color +@odoo-main-color-muted: #a8a8a8; +@odoo-main-text-color: #666666; +@odoo-webclient-background-color: @odoo-brand-secondary; +@odoo-view-background-color: red; +@odoo-shadow-color: #303030; +@brand-primary: @odoo-brand-primary; + +.oe-view-manager { + background-color: #f0eeee !important; +} + +.o_kanban_view { + background-color: #f0eeee; + .o_kanban_header { + color: black !important; + } + + .o_kanban_config i, .o_kanban_quick_add i { + color: #555 !important; + &:hover { + background-color: darken(#f0eeee, 10%) !important; + } + } + + .o_column_folded { + background-color: #f0eeee !important; + border: none !important; + span.o_column_title, span.o_column_unfold { + // color: white !important; + } + } + + .o_column_quick_create { + background-color: #f0eeee !important; + .o_kanban_add_column, .o_kanban_title { + color: black !important; + } + + } +} + +.oe_list { + background-color: white !important; +} + +.btn-icon { + .btn-default; +} + +.openerp .oe_avatar { + float: left; +} + +.openerp .oe_button_box { + float: right; +} + +@grid-gutter-width: 0; + +.oe-control-panel .row { + margin-left: 15px; + margin-right: 15px; +} + +.oe_form_field_one2many { + .oe-view-manager { + background-color: white; + + .o_kanban_view { + background-color: white; + + .o_kanban_record { + box-shadow: none; + } + } + } +} + +// Buttons containing only an icon +.o_icon_button { + background-color: transparent; + border: 0; + padding: 0; + outline: none; +} + +// Stars +.o_priority { + display: inline-block; + padding: 0; + margin: 0; + > a { + display: inline-block; + } + .o_star_on, .o_star_off { + color: @odoo-main-color-muted !important; + &:hover { + text-decoration: none; + } + } + .o_star_on { + color: gold !important; + } +} + +.o_text_overflow { + display: block; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; // To update display context changed by overflow:hidden +} + +.oe-o2m-control-panel { + background-color: white; +} + +.oe_formview { + .oe_button_box { + .oe_stat_button { + + .stat_button_icon { + display: inline-block; + } + + // padding: @odoo-statbutton-vpadding @odoo-statbutton-spacing @odoo-statbutton-vpadding 0px; + text-align: left; + + .o_button_icon { + // margin-left: @odoo-statbutton-spacing; // To create the button padding left (firefox bug) + display: inline-block; + vertical-align: middle; + &:before { + font-size: x-large; + vertical-align: middle; + } + + width: 30%; + } + + // .o_form_field_percent_pie { + // margin-left: @odoo-statbutton-spacing; // To create the button padding left (firefox bug) + // } + + .o_stat_info { // contains the value and text + display: inline-block; + vertical-align: middle; + + max-width: 70%; + // padding-right: @odoo-statbutton-spacing; + line-height: 1.2; + + .o_stat_value { + .o_text_overflow; + font-weight: 700; + color: @odoo-brand-primary; + } + .o_stat_text { + .o_text_overflow; + font-size: small; + + .o_stat_value { + display: inline; + } + } + } + + + // Some buttons only display text and directly use the WidgetButton template instead of StatInfo + > span { + .o_stat_info; // layout + font-size: small; + white-space: normal; // text on several lines if needed + } + } + } +} diff --git a/addons/web/static/src/less/utils.less b/addons/web/static/src/less/utils.less new file mode 100644 index 00000000000..8b8d02898e6 --- /dev/null +++ b/addons/web/static/src/less/utils.less @@ -0,0 +1,189 @@ +// ------------------------------------------------------------------ +// Margin +// ------------------------------------------------------------------ +.utils-margin-loop(@index) when (@index < 256) { + .o-mt@{index} {margin-top: @index px;} + .o-mb@{index} {margin-bottom: @index px;} + .o-mr@{index} {margin-right: @index px;} + .o-ml@{index} {margin-left: @index px;} + + .utils-margin-loop(@index * 2); +} +.utils-margin-loop(2); + +// ------------------------------------------------------------------ +// Padding +// ------------------------------------------------------------------ +.o-webclient-padding(@top: 0px, @right: @odoo-horizontal-padding, @bottom: 0px, @left: @odoo-horizontal-padding) { + padding-top: @top; + padding-right: @right; + padding-bottom: @bottom; + padding-left: @left; +} + +// ------------------------------------------------------------------ +// Caret +// ------------------------------------------------------------------ +.utils-caret-boilerplate() { + content: ""; + display: inline-block; + width: 0; + height: 0; + vertical-align: middle; +} +.o-caret-down(@caret-width: @caret-width-base) { + .utils-caret-boilerplate; + border-bottom: 0; + border-left: @caret-width solid transparent; + border-right: @caret-width solid transparent; + border-top: @caret-width solid; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} +.o-caret-up(@caret-width: @caret-width-base) { + .utils-caret-boilerplate; + border-bottom: @caret-width solid; + border-left: @caret-width solid transparent; + border-right: @caret-width solid transparent; + border-top: 0; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} +.o-caret-left(@caret-width: @caret-width-base) { + .utils-caret-boilerplate; + border-bottom: @caret-width solid transparent; + border-left: 0; + border-right: @caret-width solid; + border-top: @caret-width solid transparent; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} +.o-caret-right(@caret-width: @caret-width-base) { + .utils-caret-boilerplate; + border-bottom: @caret-width solid transparent; + border-left: @caret-width solid; + border-right: 0; + border-top: @caret-width solid transparent; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} + +// ------------------------------------------------------------------ +// Vendor prefixes +// ------------------------------------------------------------------ +// Flex +.o-flex-display() { + display: -ms-flexbox; + display: -moz-box; + display: -webkit-box; + display: -webkit-flex; + + display: flex; +} +.o-inline-flex-display() { + display: -ms-inline-flexbox; + display: -moz-inline-box; + display: -webkit-inline-box; + display: -webkit-inline-flex; + + display: inline-flex; +} +.o-flex-flow(@direction, @wrap) { + -ms-flex-flow: @direction @wrap; + -moz-flex-flow: @direction @wrap; + -webkit-flex-flow: @direction @wrap; + + flex-flow: @direction @wrap; +} +.o-flex(@grow, @schrink, @basis) { + -ms-flex: @grow @schrink @basis; + -moz-flex: @grow @schrink @basis; + -webkit-box-flex: @grow; + -webkit-flex: @grow @schrink @basis; + + flex: @grow @schrink @basis; +} +.o-justify-content(@justify) { + -moz-justify-content: @justify; + -webkit-justify-content: @justify; + + justify-content: @justify; +} +.o-align-content(@align) { + -webkit-align-content: @align; + + align-content: @align; +} +.o-align-items(@align) { + -webkit-align-items: @align; + + align-items: @align; +} +.o-align-self(@align) { + -webkit-align-self: @align; + + align-self: @align; +} + +// Background-size +// https://css-tricks.com/perfect-full-page-background-image/ +.o-background-size(@size) { + -webkit-background-size: @size; + -moz-background-size: @size; + -o-background-size: @size; + background-size: @size; +} + +// ------------------------------------------------------------------ +// Dropdowns +// ------------------------------------------------------------------ +.o-selected-li() { + li { + position: relative; + > a { + padding: 3px 25px; + color: @odoo-main-text-color; + &:hover { + color: darken(@odoo-main-text-color, 10%); + } + } + &.selected { + > a { + color: darken(@odoo-main-text-color, 10%); + font-weight: bold; + &:before { + font-family: FontAwesome; + position: absolute; + left: 6px; + content: "\f00c"; + } + } + } + } +} + +// ------------------------------------------------------------------ +// Select Appearance +// ------------------------------------------------------------------ +.o-appearance(@value) { + -webkit-appearance: @value; + -moz-appearance: @value; + appearance: @value; +} + +// ------------------------------------------------------------------ +// Transform +// ------------------------------------------------------------------ +.o-transform-origin(@x: 50%, @y: 50%, @z: 0) { + -ms-transform-origin: @x @y @z; + -webkit-transform-origin: @x @y @z; + -moz-transform-origin: @x @y @z; + transform-origin: @x @y @z; +} + +// ------------------------------------------------------------------ +// Position absolute +// ------------------------------------------------------------------ +.o-position-absolute(@top: auto, @right: auto, @bottom: auto, @left: auto) { + position: absolute; + top: @top; + left: @left; + bottom: @bottom; + right: @right; +} \ No newline at end of file -- cgit v1.2.3