Skip to content
Snippets Groups Projects
  1. Jul 27, 2018
    • qsm-odoo's avatar
      [REF] *: BS4, review the 'media' structure · 98c0fef0
      qsm-odoo authored
      Only two classes remain to declare a media structure:
      'media' and 'media-body'. 'media-left/right' are guessed by their
      position using the flex layout.
      
      Also, the 'media-list' class has been dropped but <ul/> element
      should use the 'list-unstyled' class instead.
      
      Like all other components, spacing between medias are now to be
      handled explicitely thanks the spacing utility classes.
      98c0fef0
    • qsm-odoo's avatar
      [REF] *: BS4, adapt progress-bar component · a3cc9c2a
      qsm-odoo authored
      * project
      
      Colors are now handled by bg-* utility classes.
      a3cc9c2a
    • qsm-odoo's avatar
      [REF] *: use our own text-overflow mixin · 31851a77
      qsm-odoo authored
      * calendar
      
      Bootstrap removed its definition of the text-overflow mixin, so we
      now must use our own (which is better anyway).
      31851a77
    • qsm-odoo's avatar
      [REF] *: BS4, replace 'btn-xs' by 'btn-sm' · 582933ac
      qsm-odoo authored
      In a previous commit, we removed the use of the 'btn-sm' classes as we
      used it everywhere for default-size buttons instead of customizing the
      size of those default-size buttons directly.
      
      This commit proves it was even more necessary as the 'btn-xs' class does
      not exist anymore in BS4 and we so can use the 'btn-sm' class instead.
      582933ac
    • qsm-odoo's avatar
      [REF] web, *: BS4, adapt radio button structure · a6a3e74e
      qsm-odoo authored
      Use BS4 *custom* structure for radio buttons to allow customizing
      their style and have cross-browser style.
      a6a3e74e
    • qsm-odoo's avatar
      [REF] *: BS4, adapt the label component structure · ee65b44d
      qsm-odoo authored
      The '.label' elements have been replaced by '.badge' elements without
      the 'badge-pill' class.
      ee65b44d
    • qsm-odoo's avatar
      f7cee83c
    • qsm-odoo's avatar
      d48b8593
    • qsm-odoo's avatar
      [REF] *: BS4, adapt pagination structure · 54aee462
      qsm-odoo authored
      Pagination elements' items must now have the 'page-item'/'page-link'
      classes.
      54aee462
    • qsm-odoo's avatar
      [REF] website(_sale): BS4, adapt carousel structures · 20d033a7
      qsm-odoo authored
      Carousel items must now have the 'carousel-item' class.
      20d033a7
    • qsm-odoo's avatar
      [REF] *: BS4, adapt the badge component structure · 7285e152
      qsm-odoo authored
      The '.badge' elements must now also use the 'badge-pill' class to get
      the same style as before as '.badge' elements without it are meant to
      replace the old 'label' component.
      7285e152
    • qsm-odoo's avatar
      [REF] web, *: BS4, use custom BS4 checkbox everywhere · f4fbaf1e
      qsm-odoo authored
      Before this commit, Odoo used checkboxes in three different ways:
      
      - A simple <input type="checkbox"/>, mainly in the frontend. The style
        is browser dependant.
      
      - Same as above but with the BS3, checkbox structure. The style is still
        the same, but the alignement is supposed to be better (which is not
        always the case).
      
      - The Odoo official structure:
      	```
      	<div class="o_checkbox">
      	    <input type="checkbox"/>
      	    <span/>
      	</div>
      	```
        which allows to have a cross-browser checkbox style and correct
        alignements.
      
      The goal after this commit is to only use the BS4 *custom* checkbox
      structure to achieve the same goal as our official structure (and
      remove that one):
      
      ```
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        <label class="custom-control-label" for="customCheck1">...</label>
      </div>
      ```
      
      /!\ Labels are now required (use a zero-width space if necessary)
      f4fbaf1e
    • qsm-odoo's avatar
      [REF] *: BS4, adapt tables (and list view) · 6e223b92
      qsm-odoo authored
      `table-condensed` -> `table-sm`
      
      Also SCSS variables were renamed.
      Also restore list view design.
      6e223b92
    • qsm-odoo's avatar
      [REF] *: BS4, adapt forms · 93b0001d
      qsm-odoo authored
      The 'form-horizontal' class have been removed; the '.form-group'
      elements must now use the 'row' class for an horizontal layout.
      
      The 'control-label' class was renamed to 'col-form-label'.
      
      The 'help-block' class was renamed to 'form-text'.
      
      The 'has-error' and 'has-success' classes have been removed and
      replaced by a new system using the :valid and :invalid pseudo-classes,
      when a parent has the 'was-validated' class. While this system is great,
      it is not straightforward to use it in Odoo. Fortunately, BS4 provides
      the 'is-valid' and 'is-invalid' classes as fallback. This commit
      replaces the 'has-error' and 'has-success' classes by 'o_has_error' and
      'o_has_success' classes (for JS compatibility) and use the 'is-*'
      fallback classes. (The 'has-warning' class has no equivalent but was
      unused in Odoo anyway).
      93b0001d
    • qsm-odoo's avatar
      [REF] *: BS4, adapt 'list-inline' element structure · 7822bab8
      qsm-odoo authored
      The '.list-inline' items now must have the explicite 'list-inline-item'
      class for the structure to be correct.
      7822bab8
    • qsm-odoo's avatar
      [REF] *: BS4, use 'list-group-flush' class · f6a14990
      qsm-odoo authored
      This class allows '.list-group' elements to be better integrated in
      cards as the extra border is removed.
      f6a14990
    • qsm-odoo's avatar
      [REF] *: BS4, replace img-rounded/img-circle classes · 44373594
      qsm-odoo authored
      'img-rounded' -> 'rounded'
      'img-circle' -> 'rounded-circle'
      44373594
    • qsm-odoo's avatar
      [REF] *: BS4, adapt input-group structure · b437808f
      qsm-odoo authored
      The input-group-addon class has been replaced by a combination of the
      input-group-text and the input-group-append/prepend classes. The
      input-group-btn class is replaced by the input-group-append/prepend
      classes.
      b437808f
    • qsm-odoo's avatar
      [REF] *: BS4, review panel and well structure · 59237ea8
      qsm-odoo authored
      Panels and wells were dropped and replaced by the "Card" component.
      59237ea8
    • qsm-odoo's avatar
      [REF] *: BS4, adapt col-related classes · ed1b18f1
      qsm-odoo authored
      col-lg-* -> col-xl-*
      col-md-* -> col-lg-*
      col-sm-* -> col-md-*
      col-xs-* -> col-*
      
      col-lg-offset-* -> offset-xl-*
      col-md-offset-* -> offset-lg-*
      col-sm-offset-* -> offset-md-*
      col-xs-offset-* -> offset-*
      
      col-lg-pull-* -> order-xl-1
      col-md-pull-* -> order-lg-1
      col-sm-pull-* -> order-md-1
      col-xs-pull-* -> order-1
      
      col-lg-push-* -> order-xl-2
      col-md-push-* -> order-lg-2
      col-sm-push-* -> order-md-2
      col-xs-push-* -> order-2
      ed1b18f1
    • qsm-odoo's avatar
      [REF] *: BS4, review breadcrumb structure · 66289d63
      qsm-odoo authored
      Now, the 'breadcrumb-item' class has to be put explicitely on
      breadcrumb items.
      66289d63
    • qsm-odoo's avatar
      [REF] *: use 'light' color and reset 'gray' palette · 318b10cc
      qsm-odoo authored
      See previous commit for more explanation.
      318b10cc
    • qsm-odoo's avatar
      [REF] *: BS4, review color system · d8c217a6
      qsm-odoo authored
      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.
      d8c217a6
    • qsm-odoo's avatar
      [REF] *: BS4, rename border-radius related variables · cba48da7
      qsm-odoo authored
      $border-radius-base -> $border-radius
      $border-radius-large -> $border-radius-lg
      $border-radius-small -> $border-radius-sm
      cba48da7
    • qsm-odoo's avatar
      [REF] *: BS4, review the 'nav' and 'navbar' components · 09f40036
      qsm-odoo authored
      Now the nav structure is more declarative: the 'nav-item' and 'nav-link'
      classes have to be put on related nav item and links. Also, the 'active'
      class has to be put on links instead of items.
      
      Same as for the navbar component:
      - The navbar structure was simplified and meant to be more declarative.
      - The navbar colors are also now handled by a different set of classes.
      
      The 'nav-stacked' class was removed and replaced by flex utilities.
      
      The set of classes for colors and nav styles also changed.
      09f40036
    • qsm-odoo's avatar
      [REF] *: BS4, 'img-responsive' -> 'img-fluid' · de214e37
      qsm-odoo authored
      de214e37
    • qsm-odoo's avatar
    • qsm-odoo's avatar
      [REF] *: BS4, adapt font-size and padding variables · 4ac446e3
      qsm-odoo authored
      BS variables were renamed or changed and all (most) variables now
      use 'rem' units instead of 'px' unit.
      4ac446e3
    • qsm-odoo's avatar
      [REF] *: BS4, adapt dropdowns and carets · 1c1c0897
      qsm-odoo authored
      - 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
      1c1c0897
    • qsm-odoo's avatar
      [REF] web, mail: get rid of the btn-icon class · 220e49f9
      qsm-odoo authored
      That was pretty useless, better use the btn-secondary class and add
      particular rules to `.btn.fa` if necessary.
      220e49f9
    • qsm-odoo's avatar
      [REF] *: BS4, rename btn-default to btn-secondary · c59380ba
      qsm-odoo authored
      BS4 "btn-default" class was replaced with "btn-secondary", which makes
      more sense.
      c59380ba
    • qsm-odoo's avatar
      [REF] *: BS4, remove the use of btn-sm · 81f359c8
      qsm-odoo authored
      Odoo made the bad choice of using the 'btn-sm' class for every button
      instead of configuring the padding for default 'btn' to be smaller.
      In BS4, the style of btn-sm is actually more complex, lowering the
      font-size too. Also, btn-xs was removed so we would not have the
      possibility to display smaller button than our default ones.
      
      This commit removes btn-sm wherever it was used. Unfortunately, this
      might remove it at some places where it made sense but this can be
      restored in a second time.
      81f359c8
    • qsm-odoo's avatar
      [REF] *: BS4, adapt display classes · 7f10b55a
      qsm-odoo authored
      The system completely changed. I also had to adapt classes to new
      screen breakpoints.
      
      hidden/hide -> d-none
      show -> d-block
      hidden-xs -> d-none d-md-(block/inline/...)
      hidden-sm -> d-md-none d-lg-(block/inline/...)
      hidden-md -> d-lg-none d-xl-(block/inline/...)
      hidden-lg -> d-xl-none
      visible-xs-* -> d-* d-md-none
      visible-sm-* -> d-none d-md-* d-lg-none
      visible-md-* -> d-none d-lg-* d-xl-none
      visible-lg-* -> d-none d-xl-*
      hidden-print -> d-print-none
      visible-print-* -> d-none d-print-*
      ...
      and all possible combination of those had to be handled too.
      7f10b55a
    • qsm-odoo's avatar
      ea7c3f4a
    • qsm-odoo's avatar
      [REF] *: BS4, adapt container variables · 193d8515
      qsm-odoo authored
      The variables are now an unique map. As the screen sizes' names changed,
      the container names changed accordingly.
      193d8515
    • qsm-odoo's avatar
      [REF] web, *: BS4, update JS media queries · f2a1ca1f
      qsm-odoo authored
      * website_quote, website_sale
      f2a1ca1f
    • qsm-odoo's avatar
      [REF] *: BS4, adapt media queries · 0ca6d397
      qsm-odoo authored
      media queries that target a specific screen size handled by bootstrap
      have now a more convenient way to be defined:
      
      ```
      @​media (min-width: $screen-sm-min) { ... }
      ->
      @​include media-breakpoint-up(sm) { ... }
      ```
      
      ```
      @​media (max-width: $screen-sm-max) { ... }
      ->
      @​include media-breakpoint-down(sm) { ... }
      ```
      
      ```
      @​media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { ... }
      ->
      @​include media-breakpoint-only(sm) { ... }
      ```
      
      ```
      @​media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { ... }
      ->
      @​include media-breakpoint-between(sm, md) { ... }
      ```
      
      Also, bootstrap has changed the values for its default screen sizes:
      
      ------------------
           | BS3 | BS4 |
      ------------------
      0    | XS  | XS  | -> Portrait Mobile
      576  | /   | SM  | -> Landscape Mobile
      768  | SM  | MD  | -> Portrait Tablet
      992  | MD  | LG  | -> Landscape Tablet / Small Desktop
      1200 | LG  | XL  | -> Desktop
      ------------------
      
      While it is possible to configure BS variables to behave as BS3, we took
      the decision to keep the BS4 variables untouched. BS4 system seems
      indeed better and having the purest bootstrap possible is better for
      Odoo to be used as a framework.
      0ca6d397
    • qsm-odoo's avatar
      4a0a41d9
    • qsm-odoo's avatar
    • qsm-odoo's avatar
      [FIX] web: restore datepicker lib patches · 43d2db94
      qsm-odoo authored
      Patches were introduced by Odoo in the lib and have been removed
      while updating it to "tempus dominus". This commit restores them.
      
      See:
      - https://github.com/odoo/odoo/commit/3741603495532e218b66f3cfa0272e4536f1cf2c
      - https://github.com/odoo/odoo/commit/ab42507d460125c5ee81bb6b4b859146494339ac
      43d2db94
Loading