diff options
| -rw-r--r-- | addons/website/__manifest__.py | 1 | ||||
| -rw-r--r-- | addons/website/static/src/scss/website.scss (renamed from temp_scss) | 56 | ||||
| -rw-r--r-- | addons/website/static/src/snippets/s_rating/000.scss | 55 | ||||
| -rw-r--r-- | addons/website/views/snippets/s_rating.xml | 50 | ||||
| -rw-r--r-- | addons/website/views/snippets/snippets.xml (renamed from temp_xml) | 37 |
5 files changed, 106 insertions, 93 deletions
diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py index 618c60aeca6..77eab228d02 100644 --- a/addons/website/__manifest__.py +++ b/addons/website/__manifest__.py @@ -40,6 +40,7 @@ 'views/snippets/s_alert.xml', 'views/snippets/s_card.xml', 'views/snippets/s_share.xml', + 'views/snippets/s_rating.xml', 'views/website_views.xml', 'views/website_visitor_views.xml', 'views/res_config_settings_views.xml', diff --git a/temp_scss b/addons/website/static/src/scss/website.scss index fd74f5bd4b7..d4c3ed9fe4c 100644 --- a/temp_scss +++ b/addons/website/static/src/scss/website.scss @@ -944,62 +944,6 @@ table.table_desc tr td { } -// Rating -.s_rating { - $star: "\f005"; - $star-o: "\f006"; - $circle: "\f111"; - $circle-o: "\f10c"; - $heart: "\f004"; - $heart-o: "\f08a"; - @mixin s_rating_generate_icons($off, $on) { - .fa:before { - content: $off; - } - @for $counter from 5 to 0 { - &.s_rating_#{$counter} { - .fa:nth-of-type(-n+#{$counter}):before { - content: $on; - } - } - } - } - > .s_rating_stars { @include s_rating_generate_icons($star-o, $star); } - > .s_rating_squares { @include s_rating_generate_icons($circle-o, $circle); } - > .s_rating_hearts { @include s_rating_generate_icons($heart-o, $heart); } - > .s_rating_bar { - .fa { - display: none; - } - .s_rating_bar { - display: flex; - height: $progress-height; - background-color: $gray-300; - &:before { - content: ""; - display: flex; - flex-direction: column; - justify-content: center; - @include transition($progress-bar-transition); - @include gradient-striped(); - background-size: $progress-height $progress-height; - background-color: theme-color('primary'); - animation: progress-bar-stripes $progress-bar-animation-timing; - } - } - @for $counter from 5 to 0 { - &.s_rating_#{$counter} { - .s_rating_bar:before { - width: percentage($counter/5); - } - } - } - } - > .s_rating_1x { .fa { font-size: 1em; }; } - > .s_rating_2x { .fa { font-size: 2em; }; } - > .s_rating_3x { .fa { font-size: 3em; }; } -} - // // Layout // diff --git a/addons/website/static/src/snippets/s_rating/000.scss b/addons/website/static/src/snippets/s_rating/000.scss new file mode 100644 index 00000000000..c16b99e9c59 --- /dev/null +++ b/addons/website/static/src/snippets/s_rating/000.scss @@ -0,0 +1,55 @@ + +.s_rating { + $star: "\f005"; + $star-o: "\f006"; + $circle: "\f111"; + $circle-o: "\f10c"; + $heart: "\f004"; + $heart-o: "\f08a"; + @mixin s_rating_generate_icons($off, $on) { + .fa:before { + content: $off; + } + @for $counter from 5 to 0 { + &.s_rating_#{$counter} { + .fa:nth-of-type(-n+#{$counter}):before { + content: $on; + } + } + } + } + > .s_rating_stars { @include s_rating_generate_icons($star-o, $star); } + > .s_rating_squares { @include s_rating_generate_icons($circle-o, $circle); } + > .s_rating_hearts { @include s_rating_generate_icons($heart-o, $heart); } + > .s_rating_bar { + .fa { + display: none; + } + .s_rating_bar { + display: flex; + height: $progress-height; + background-color: $gray-300; + &:before { + content: ""; + display: flex; + flex-direction: column; + justify-content: center; + @include transition($progress-bar-transition); + @include gradient-striped(); + background-size: $progress-height $progress-height; + background-color: theme-color('primary'); + animation: progress-bar-stripes $progress-bar-animation-timing; + } + } + @for $counter from 5 to 0 { + &.s_rating_#{$counter} { + .s_rating_bar:before { + width: percentage($counter/5); + } + } + } + } + > .s_rating_1x { .fa { font-size: 1em; }; } + > .s_rating_2x { .fa { font-size: 2em; }; } + > .s_rating_3x { .fa { font-size: 3em; }; } +} diff --git a/addons/website/views/snippets/s_rating.xml b/addons/website/views/snippets/s_rating.xml new file mode 100644 index 00000000000..2b2c9fe8eff --- /dev/null +++ b/addons/website/views/snippets/s_rating.xml @@ -0,0 +1,50 @@ +<?xml version="1.0" encoding="utf-8"?> +<odoo> + +<template id="s_rating" name="Rating"> + <div class="s_rating row"> + <div class="col-lg-12 s_rating_stars s_rating_3 s_rating_1x pt16 pb16"> + <h4>Quality</h4> + <i class="fa fa-1x"/> + <i class="fa fa-1x"/> + <i class="fa fa-1x"/> + <i class="fa fa-1x"/> + <i class="fa fa-1x"/> + <div class="s_rating_bar"/> + </div> + </div> +</template> + +<template id="s_rating_options" inherit_id="website.snippet_options"> + <xpath expr="." position="inside"> + <div data-selector=".s_rating > div"> + <we-select string="Icon"> + <we-button data-select-class="s_rating_stars"><i class="fa fa-fw fa-star"/> Stars</we-button> + <we-button data-select-class="s_rating_squares"><i class="fa fa-fw fa-square"/> Squares</we-button> + <we-button data-select-class="s_rating_hearts"><i class="fa fa-fw fa-heart"/> Hearts</we-button> + <we-button data-select-class="s_rating_bar"><i class="fa fa-fw fa-tasks"/> Progress Bar</we-button> + </we-select> + <we-select string="Value"> + <we-button data-select-class="">0</we-button> + <we-button data-select-class="s_rating_1">1/5</we-button> + <we-button data-select-class="s_rating_2">2/5</we-button> + <we-button data-select-class="s_rating_3">3/5</we-button> + <we-button data-select-class="s_rating_4">4/5</we-button> + <we-button data-select-class="s_rating_5">5/5</we-button> + </we-select> + <we-select string="Size"> + <we-button data-select-class="s_rating_1x">Small</we-button> + <we-button data-select-class="s_rating_2x">Medium</we-button> + <we-button data-select-class="s_rating_3x">Big</we-button> + </we-select> + </div> + </xpath> +</template> + +<template id="assets_snippet_s_rating_css_000" inherit_id="website.assets_frontend"> + <xpath expr="//link[last()]" position="after"> + <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_rating/000.scss"/> + </xpath> +</template> + +</odoo> diff --git a/temp_xml b/addons/website/views/snippets/snippets.xml index 3c516d68c00..285832c2e3c 100644 --- a/temp_xml +++ b/addons/website/views/snippets/snippets.xml @@ -1,20 +1,6 @@ <?xml version="1.0" encoding="utf-8"?> <odoo> -<template id="s_rating" name="Rating"> - <div class="s_rating row"> - <div class="col-lg-12 s_rating_stars s_rating_3 s_rating_1x pt16 pb16"> - <h4>Quality</h4> - <i class="fa fa-1x"/> - <i class="fa fa-1x"/> - <i class="fa fa-1x"/> - <i class="fa fa-1x"/> - <i class="fa fa-1x"/> - <div class="s_rating_bar"/> - </div> - </div> -</template> - <template id="s_btn" name="Button"> <div class="s_btn text-center pt16 pb16" data-name="Buttons"> <a href="#" class="btn btn-primary">Read more</a> @@ -749,29 +735,6 @@ </we-select> </div> - <!-- STYLES | .s_rating --> - <div data-selector=".s_rating > div"> - <we-select string="Icon"> - <we-button data-select-class="s_rating_stars"><i class="fa fa-fw fa-star"/> Stars</we-button> - <we-button data-select-class="s_rating_squares"><i class="fa fa-fw fa-square"/> Squares</we-button> - <we-button data-select-class="s_rating_hearts"><i class="fa fa-fw fa-heart"/> Hearts</we-button> - <we-button data-select-class="s_rating_bar"><i class="fa fa-fw fa-tasks"/> Progress Bar</we-button> - </we-select> - <we-select string="Value"> - <we-button data-select-class="">0</we-button> - <we-button data-select-class="s_rating_1">1/5</we-button> - <we-button data-select-class="s_rating_2">2/5</we-button> - <we-button data-select-class="s_rating_3">3/5</we-button> - <we-button data-select-class="s_rating_4">4/5</we-button> - <we-button data-select-class="s_rating_5">5/5</we-button> - </we-select> - <we-select string="Size"> - <we-button data-select-class="s_rating_1x">Small</we-button> - <we-button data-select-class="s_rating_2x">Medium</we-button> - <we-button data-select-class="s_rating_3x">Big</we-button> - </we-select> - </div> - <!-- STYLES | .s_hr --> <div data-selector=".s_hr" data-target="hr"> <we-select string="Thickness"> |