From 4bc66ffc79c76a01f2f360a4f9d874c52067de02 Mon Sep 17 00:00:00 2001
From: "Tiffany Chang (tic)" <tic@odoo.com>
Date: Thu, 30 Jan 2020 10:20:42 +0000
Subject: [PATCH] [IMP] website_slides: Add color to course tags

This commit allows assignment and visibility of colors to course tags.
In order to reuse existing code, the colors offered are the same colors
used for Kanban tags.

Visibility of these tag colors has been added to:
- slide channel form view
- individual course website
- courses (not-filtered) website
- user profile "about" page

Note that visibility was purposely not added to:
- Kanban view for courses since "no color" assigned tags are not shown in
  the kanban view by pre-existing design.
- Filtered courses website since selected tag filters are already
  color highlighted to make selected tag filter(s) more obvious.

Supports Task: 2128166
PR #44365
Upgrade PR: odoo/upgrade#862
---
 .../data/slide_channel_tag_demo.xml           |  9 +++++-
 .../models/slide_channel_tag.py               |  1 +
 .../static/src/scss/website_slides.scss       | 30 +++++++++++++++++++
 .../views/slide_channel_tag_views.xml         |  1 +
 .../views/slide_channel_views.xml             |  2 +-
 .../views/website_slides_templates_course.xml |  4 +--
 .../website_slides_templates_homepage.xml     |  7 ++++-
 .../website_slides_templates_profile.xml      |  2 +-
 8 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/addons/website_slides/data/slide_channel_tag_demo.xml b/addons/website_slides/data/slide_channel_tag_demo.xml
index aa4d31c33e7..cf522d9877d 100644
--- a/addons/website_slides/data/slide_channel_tag_demo.xml
+++ b/addons/website_slides/data/slide_channel_tag_demo.xml
@@ -6,14 +6,17 @@
     </record>
     <record id="slide_channel_tag_level_basic" model="slide.channel.tag">
         <field name="name">Basic</field>
+        <field name="color">10</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_level"/>
     </record>
     <record id="slide_channel_tag_level_intermediate" model="slide.channel.tag">
         <field name="name">Intermediate</field>
+        <field name="color">3</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_level"/>
     </record>
     <record id="slide_channel_tag_level_advanced" model="slide.channel.tag">
         <field name="name">Advanced</field>
+        <field name="color">1</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_level"/>
     </record>
 
@@ -23,14 +26,17 @@
     </record>
     <record id="slide_channel_tag_role_gardener" model="slide.channel.tag">
         <field name="name">Gardener</field>
+        <field name="color">10</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_role"/>
     </record>
     <record id="slide_channel_tag_role_carpenter" model="slide.channel.tag">
         <field name="name">Carpenter</field>
+        <field name="color">11</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_role"/>
     </record>
     <record id="slide_channel_tag_role_furniture" model="slide.channel.tag">
         <field name="name">Furniture Designer</field>
+        <field name="color">3</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_role"/>
     </record>
 
@@ -40,10 +46,11 @@
     </record>
     <record id="slide_channel_tag_other_1" model="slide.channel.tag">
         <field name="name">Certification</field>
+        <field name="color">7</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_data_other"/>
     </record>
     <record id="slide_channel_tag_other_2" model="slide.channel.tag">
         <field name="name">Dog Friendly</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_data_other"/>
     </record>
-</data></odoo>
\ No newline at end of file
+</data></odoo>
diff --git a/addons/website_slides/models/slide_channel_tag.py b/addons/website_slides/models/slide_channel_tag.py
index a6abfd4c38f..67c62cf742d 100644
--- a/addons/website_slides/models/slide_channel_tag.py
+++ b/addons/website_slides/models/slide_channel_tag.py
@@ -30,3 +30,4 @@ class SlideChannelTag(models.Model):
         'Group sequence', related='group_id.sequence',
         index=True, readonly=True, store=True)
     channel_ids = fields.Many2many('slide.channel', 'slide_channel_tag_rel', 'tag_id', 'channel_id', string='Channels')
+    color = fields.Integer(string='Color Index', help="Color to apply to this tag (including in website).")
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index fdff5ace23d..815ae9aa050 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -58,6 +58,36 @@ $o-wslides-fs-side-width: 300px;
     }
 }
 
+// Color tags according to assigned background color.
+.o_wslides_channel_tag {
+    vertical-align: middle;
+    @for $size from 1 through length($o-colors) {
+        &.o_tag_color_#{$size - 1} {
+            $background-color: white;
+            // no color selected
+            @if $size == 1 {
+                & {
+                    color: black;
+                    background-color: $background-color;
+                    box-shadow: inset 0 0 0 1px nth($o-colors, $size);
+                }
+            } @else {
+                $background-color: nth($o-colors, $size);
+                & {
+                    color: white;
+                    background-color: $background-color;
+                }
+            }
+            @at-root a#{&} {
+                &:hover {
+                    color: color-yiq($background-color);
+                    background-color: darken($background-color, 10%);
+                }
+            }
+        }
+    }
+}
+
 .o_wslides_body {
     background-color: $o-wslides-color-bg;
 
diff --git a/addons/website_slides/views/slide_channel_tag_views.xml b/addons/website_slides/views/slide_channel_tag_views.xml
index b30738f5d06..b4c4e9ab12e 100644
--- a/addons/website_slides/views/slide_channel_tag_views.xml
+++ b/addons/website_slides/views/slide_channel_tag_views.xml
@@ -74,6 +74,7 @@
                                     <field name="sequence" widget="handle"/>
                                     <field name="group_sequence" invisible="1"/>
                                     <field name="name" string="Tag Name"/>
+                                    <field name="color" string="Color" widget="color_picker"/>
                                     <control>
                                         <create string="Add a tag"/>
                                     </control>
diff --git a/addons/website_slides/views/slide_channel_views.xml b/addons/website_slides/views/slide_channel_views.xml
index a0922b398fe..c2df312e124 100644
--- a/addons/website_slides/views/slide_channel_views.xml
+++ b/addons/website_slides/views/slide_channel_views.xml
@@ -57,7 +57,7 @@
                         </div>
                         <div>
                             <field name="active" invisible="1"/>
-                            <field name="tag_ids" widget="many2many_tags" placeholder="Tags"/>
+                            <field name="tag_ids" widget="many2many_tags" options="{'color_field': 'color'}" placeholder="Tags"/>
                         </div>
                         <notebook colspan="4">
                             <page name="content" string="Content">
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index 5fe76ff83fc..75396abceb0 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -196,7 +196,7 @@
                                     <div class="mb-2 pt-1">
                                         <t t-if="channel.tag_ids">
                                             <t t-foreach="channel.tag_ids" t-as="channel_tag">
-                                                <span t-attf-class="badge badge-primary" t-esc="channel_tag.name"/>
+                                                <span t-attf-class="badge o_wslides_channel_tag #{'o_tag_color_'+str(channel_tag.color)}" t-esc="channel_tag.name"/>
                                             </t>
                                         </t>
                                         <a t-if="channel.can_upload"
@@ -593,7 +593,7 @@
             <div class="mb-2 pt-1 text-left col">
                 <t t-if="channel.tag_ids">
                     <t t-foreach="channel.tag_ids" t-as="channel_tag">
-                        <span t-attf-class="badge badge-primary" t-esc="channel_tag.name"/>
+                        <span t-attf-class="badge o_wslides_channel_tag #{'o_tag_color_'+str(channel_tag.color)}" t-esc="channel_tag.name"/>
                     </t>
                 </t>
                 <a t-if="channel.can_upload"
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index 19b35ed6e69..1389aeda8a5 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -360,7 +360,12 @@
                 <div class="font-weight-light o_wslides_desc_truncate_3" t-field="channel.description_short"/>
                 <div t-if="channel.tag_ids" class="mt-2 pt-1 o_wslides_desc_truncate_2">
                     <t t-foreach="channel.tag_ids" t-as="tag">
-                        <a t-att-href="'/slides/all?%s' % keep_query('*', tags=str((tag | search_tags).ids))" t-attf-class="badge #{'badge-primary' if tag in search_tags else 'badge-light'}" t-esc="tag.name"/>
+                        <t t-if="search_tags">
+                            <a t-att-href="'/slides/all?%s' % keep_query('*', tags=str((tag | search_tags).ids))" t-attf-class="badge #{'badge-primary' if tag in search_tags else 'o_wslides_channel_tag o_tag_color_0'}" t-esc="tag.name"/>
+                        </t>
+                        <t t-else="">
+                            <a t-att-href="'/slides/all?%s' % keep_query('*', tags=str((tag | search_tags).ids))" t-attf-class="badge o_wslides_channel_tag #{'o_tag_color_'+str(tag.color)}" t-esc="tag.name"/>
+                        </t>
                     </t>
                 </div>
             </div>
diff --git a/addons/website_slides/views/website_slides_templates_profile.xml b/addons/website_slides/views/website_slides_templates_profile.xml
index e310abf9b30..d1a5a3f60e4 100644
--- a/addons/website_slides/views/website_slides_templates_profile.xml
+++ b/addons/website_slides/views/website_slides_templates_profile.xml
@@ -50,7 +50,7 @@
 
                             <div class="overflow-hidden mb-1" style="height:24px">
                                 <t t-foreach="course.channel_id.tag_ids" t-as="tag">
-                                    <a t-att-href="'/slides/all?channel_tag_id=%s' % tag.id" class="badge badge-light" t-esc="tag.name"/>
+                                    <a t-att-href="'/slides/all?channel_tag_id=%s' % tag.id" t-attf-class="badge o_wslides_channel_tag #{'o_tag_color_'+str(tag.color)}" t-esc="tag.name"/>
                                 </t>
                             </div>