summaryrefslogtreecommitdiff
path: root/addons/web/static/src/scss/utils.scss
AgeCommit message (Collapse)Author
2019-02-08[IMP] website, *: add new logo sizing optionqsm-odoo
* portal, web This commit introduces the first of many-to-come non-color website user values: the logo height. Now, the user can choose it in the customize dialog. PR https://github.com/odoo/odoo/pull/29624 task-1904244
2018-11-07[FIX] website, *: review auto light and dark colorsqsm-odoo
* web, web_editor The logic which chose if the user text color was supposed to be used as bootstrap "dark" text color or bootstrap "light" text color (https://github.com/odoo/odoo/commit/8b2dbd1441d6713d9072db03e8d3cb6c2246410f) was fine when using the default theme with default bootstrap but was not working as intended in some themes. This commit also introduces a more accurate and complex method to determine the correct contrasted color in most cases. closes odoo/odoo#28468
2018-10-02[FIX] web, *: remove useless mixinqsm-odoo
* mail
2018-08-30[REF] web: introduce a way to extend the bg-variant mixinqsm-odoo
Needed for themes migration.
2018-08-24[REF] web: add a scss function to swap two values in a listqsm-odoo
Needed for themes migration.
2018-08-13[IMP] mail, im_livechat: 'is typing...' indicator on mail channelsAlexandre Kühn
With this commit, most threads show an indicator when a member is typing something. e.g. "Mitchell Stephens is typing..." Supported threads: - DM - (public & private) channels - Livechat (Website & Backend) Unsupported threads: - mailboxes (e.g. 'Inbox') - document thread (= 'Chatter') - support channel (with `im_support` module) Some technical details: - This is a mix between 'start'/'stop' and 'regular notify' strategies. - On typing text in composer: notify 'start typing' to all members of thread. - On clearing text in composer: notify 'stop typing' to all members of thread. - A member can only notify once every 2.5 seconds to the server when he starts or stops typing something (throttled, buffered notify call). - On receiving a message from someone that is typing: determine that he is no longer typing. - On non-empty and unchanged composer text for 5.0 seconds: automatically notifies all members of thread that he is no longer typing anything. (This is like a 'soft / cooperative sender' timeout). - On non-receiving a typing notification of someone after 60 seconds: determine that he is not longer typing something (This is like a 'hard / receiver assumption' timeout). - When some types for more than 50 seconds straight: notify that he is still typing something (again and again every 50 seconds). - When two or more people are typing something (Multi-User channels), it displays at most 2 typing users (ordering rule: longer typers first): "Mitchell Stephens, Marc Brown and more are typing..." - Timing summary: - Usually 2.5 seconds uncertainty. - Up to 5.0 seconds uncertainty on typer inactivity. - Up to 60 seconds uncertainty on typer page reload / browser tab closed / etc. Future Improvements: - Detect page reload or browser tab close with loose of longpolling connection Task-ID 28188
2018-08-10[IMP] *: make customize dialog generic and improve optionsqsm-odoo
* web, web_editor, website, website_theme_install, portal, theme_default, theme_bootswatch The purpose of this task is to make the customize dialog as generic as possible, that is theme-independant: 1) The design is now totally generic (Odoo visuals) 2) The XML definition is form-view like. This allows themes to extend the dialog without any risk of breaking the style and also allows to not care about lots of technical details. 3) New options have been included. Those were themes options that are now generic and which themes can simply adapt without touching the customize modal (navbar colors, footer color, navbar layout, fonts, body background, ...). The color palette can now also be customized with user colors. Using sass functionnalities, color palettes and fonts integration is now a lot better. Thanks to @qha-odoo for the original design. task-31677
2018-08-02[FIX] web: BS4, review selected dropdown item style (II)qsm-odoo
Completes commit https://github.com/odoo/odoo/commit/e10a4303c21332f10d89b0c19661cc11ca0dc7a6
2018-07-31[FIX] web: BS4, review selected dropdown item styleqsm-odoo
With BS4, I had to change the dropdown structure and with it the messy way we handled "selected" items. Sub-filters items were still not adapted correctly: use the "selected" class on dropdown-item elements, not one of its parent.
2018-07-27[REF] *: BS4, review color systemqsm-odoo
Odoo used to declare two main colors: primary and optional (which are purple and turquoise in enterprise). Those were respectively assigned to the 'primary' bootstrap variable and the 'btn-primary' bootstrap variable. BS4, however, does not allow to have a different primary color for buttons. Instead, the 'primary' color is used for all 'primary' related components and utility classes, same as for all other colors. So, if we want to keep our enterprise buttons green, our 'optional' colors had to become our 'primary' color. The old odoo primary is then renamed to the 'odoo' color. The palette of grays is now larger by default and is numbered from 100 to 900 alongside the $black and $white variables. The equivalence for older variables and the way we used them is: $gray-darker -> gray 900 (unused before) $gray-dark -> gray 900 $gray -> gray 700 $gray-light -> gray 600 $gray-lighter-darker -> gray 400 (the old variable was created by us) $gray-lighter-dark -> gray 300 (the old variable was created by us) $gray-lighter -> gray 200 Fortunately, the 'lighter' variations we created fit well in the default BS4 system ! Unfortunately, our $gray-lighter which carried the same function as $gray-200 (see above) is very close to the new default $gray-100 and quite distant from the new $gray-200. This will be handled in the next commit.
2018-07-27[REF] *: BS4, the $text-color variable was renamed to $body-colorqsm-odoo
2018-07-27[REF] *: BS4, adapt font-size and padding variablesqsm-odoo
BS variables were renamed or changed and all (most) variables now use 'rem' units instead of 'px' unit.
2018-07-27[REF] *: BS4, adapt dropdowns and caretsqsm-odoo
- The dropdown structure was simplified, allowing to get rid of the 3-levels structure induced by <ul/> elements and dropdowns can now contain anything. The class 'dropdown-item' is now mandatory for each dropdown clickable element. The class 'dropdown-item-text' can be used to add same padding and style but without making the element have a clickable look. - Dividers now use the class 'dropdown-divider' - The way dropdowns are opened and hidden also changed (before the 'open' class was added on the `.dropdown-menu` parent, now the 'show' class is added on both the `.dropdown-menu` parent and the `.dropdown-menu` itself). - JS-wise, no click event handlers can be put on `.dropdown-toggle` elements anymore (instead, use handlers for dropdown events). - Carets are automatically put on `.dropdown-toggle` elements, so this commit replaces the `.caret` elements with this. This feature was possible to disable but would prevent us from adding a caret with scss. Also, this simplifies the DOM. The 'o-no-caret' class was also introduced to allow using the 'dropdown-toggle' class on non-caret elements. - Also adapt the scss to use $caret-width instead of $caret-width-base
2018-07-27[REF] *: get rid of vendor prefixesqsm-odoo
BS4 do not provide vendor prefixes scss mixins anymore as it is meant to be used with the 'autoprefixer' library. As we only support the last version of every major browsers in Odoo, we took the decision to not use the library as it was also complex to integrate in Odoo. We decided to do the library's work by hand if it ever become necessary.
2018-07-09[FIX] *: fix some side-effects of ↵qsm-odoo
https://github.com/odoo/odoo/commit/9de1bc0eef6f5bfaa2a8d745431caa361ae91548 - JS Modals were not correctly built anymore, their .modal-body element was duplicated and many without-effect JS lines were introduced (as a side effect, the form view design was broken when inside modals) - Tests were changed to make bugs go unnoticed. For example, the media dialog functionnality was entirely broken because the .modal-dialog element was not receiving the correct class anymore. - The JS translation function is _t, not _ - Do not use the <title/> tag as a regular DOM element, it is meant to be unique, in the <head/> section - CSS rules were added to the utils.scss file, which is meant to contain functions and mixins, otherwise, the rule is duplicated in every asset - Some icons were still broken, as missed by https://github.com/odoo/odoo/commit/f90cf060a3cfeb37a67bec83264c0aaab8892b56 - Tests were changed to use [role="dialog"]/footer/header in their selectors without any reason, this commit restores some of that to avoid rebase conflicts with the BS4 work. - ... Note: other elements should still be discussed, like the direct use of the 'o_form_label' class in views definition... but those do not cause direct problems.
2018-06-22[IMP] Improve compatibility with screen readers (accessibility) (#24574)kujiu
Today, Odoo is really tricky to use without seeing the screen, it must be improved to be usable. This PR forbid to use labels without a "for" attribute, add some title, rule and aria attributes in HTML. With that, Odoo will be fully usable with a screen reader. * [IMP] Labels must have a for attribute. Improve accessibility. * [IMP] Better error message when trying to read a missing cached value * [FIX] Add some aria-label and title attributes for screen readers. * [FIX] Template name is not included in the error message in case of SyntaxError in QWeb * [FIX] Improve the Tour failed at step error message to be more explicit. * [IMP] Add aria-labels * [FIX] Add missing aria-label on failing test * [IMP] aria-hidden means hidden. Fix all bad aria-hidden and hide aria-hidden for all. * [IMP] Color names on kanban views and many2many tags * [IMP] Add some checks on views for accessibility. * [IMP] Add `alt` attribute on `img` tags. * [IMP] Add aria-label and title on non-described icons * [IMP] Add button role to widgets with btn class * [IMP] Translate aria and formatted attributes. * [IMP] Remove wrong aria-labelledby * [IMP] Add menu role on dropdowns * [IMP] Buttons must be focusable * [IMP] Add aria attributes on progress bars * [IMP] Improve accessibility of basic widgets * [IMP] Change main layout to more semantic tags * [IMP] Add menuitem role when missing * [IMP] Remove wrong role='presentation' * [IMP] Improve accessibility of tab panels * [IMP] Add aria-invalid on invalid fields * [IMP] Add aria-sort on ordered columns * [IMP] Add role on alerts * [IMP] Use dialog role, header, main and footer tags for modals * [IMP] Add labels on o_status * [IMP] Improve accessibility of kanban view with feeds and articles * [IMP] Add alerts in case of new messages * [IMP] Add widget, navigation or img role to aria-labelled items
2018-04-26[FIX] web: restore btn-link variations and badge styleqsm-odoo
+ printing improvements Some style was lost for mysterious reasons during the less2scss convertion.
2018-04-18[FIX] *: wrap negated variables with parenthesisqsm-odoo
* mail, web, web_editor, website_sale Tricky difference between LESS and SCSS: `0 -$var` will be one value in SCSS (the result of 0 - $var) but two space-separated values in LESS.
2018-04-18[REF] *: review scss variables handlingqsm-odoo
Unlike LESS, SCSS variables are not lazy loaded. Our system has thus to be updated. This commit creates new templates which are t-called in assets bundles (to replace the old less_helpers template): - web._assets_utils: regroups the mixins and functions which *can* (and so should) be available in every asset bundle - web._assets_primary_variables: regroups the variables (or mixins used as variables) which *can* (and so should) be available in every asset bundle - web._assets_secondary_variables: same as above but provides an environnement where all the 'primary' ones are accessible. This is for example useful to handle the community/enterprise split: // Community primary variables $o-pink-color: pink; // enterprise color $o-brand-primary: blue; // Enterprise primary variables $o-brand-primary: $o-pink-color; // Community secondary variables $o-my-darker-primary: darken($o-brand-primary, 5%); => If there was only one variable template, enterprise edition would have been able to define its primary color at the end but the darker primary would not have been updated. Using the "!default" system and putting enterprise definition above would not have solved the problem as the $o-pink-color would not have been accessible. - web._assets_backend_helpers: regroups the variables, mixins and functions which *can* (and so should) be available in the backend asset bundle only. This is especially (only?) useful for bootstrap variables overriddes. - web._assets_frontend_helpers: regroups the variables, mixins and functions which *can* (and so should) be available in the frontend asset bundle only. This is especially (only?) useful for bootstrap variables overriddes. Note: bootstrap variables are not accessible in any of those anymore. If you have variables that should depend on bootstrap, you have 3 solutions: - Find another way: your variable is probably useless, use bootstrap variables directly or create a variable that will influence the value of bootstrap variables. E.g. instead of declaring: `$myvar: $bootstrapvar * 3` and using $myvar alone, declare: `$myvar: 3` and use `$myvar * $bootstrapvar` where needed. - Declare a copy of the bootstrap variable and use that one. In that case, you should also force-set the real bootstrap one to be sure they match (this should be done in appropriate templates mentioned above). E.g. ``` $o-boostrapvar: 5; ... $boostrapvar: $o-bootstrapvar; ``` - Set your variable to null and set it to your bootstrap expression in the file you will need it (where bootstrap variables are accessible) without forgetting to add the !default flag to allow overriddes. ``` $myvar: null; ... $myvar: $bootstrapvar * 5 !default; ``` This commit also partly changes the variable names to follow the convention: $o-<app_id>-<name> where 'app_id' is the current's app name or a meaningful unique identifier ("theme" for all themes for example, as no multiple themes can be installed).
2018-04-18[REF] *: convert less content to scss contentqsm-odoo
Convert content so that the assets compile on app installation. The style is still broken after this as the variables/mixins/... are not defined in the right order (as it did not matter in LESS but does in SCSS). This commit basically changes: - Variables: @​var_hello -> $var-hello - Mixins: .mixin_world() {} -> @​mixin mixin-world {} - Classes used as mixin: .my_class() -> @​extend .my_class - Here there were no other solution than to convert the use of a mixin call by the use of an extend as a first approximation - LESS functions -> SCSS functions (e.g. fade -> rgba) - Move first variable definition before the variable is used - Still need to make sure last variable definition is at the right place
2018-04-18[REF] *: rename all LESS files to SCSSqsm-odoo
This is a simple renaming without adaptation.