odoo/addons/website_mail_group/views/website_mail_group.xml

<?xml version="1.0" encoding="utf-8"?>
<openerp>
<data>
    <template id="header" inherit_id="website.layout" name="Header Mail Groups Link">
        <xpath expr="//header//ul[@id='top_menu']/li" position="before">
            <li>
                <a href="/groups">Mail Groups</a>
            </li>
        </xpath>
    </template>
    <template id="mail_groups" name="My Groups">
        <t t-call="website.layout">
            <t t-set="head">
                <script type="text/javascript" src="/website_mail_group/static/src/js/website_mail_group.js"></script>
            </t>
            <div class="row">
                <div class="container">
                    <div class="col-md-3 col-md-push-1">
                        <t t-call="website_mail_group.navigation_menu"/>
                    </div>
                    <div class="col-md-8">
                        <t t-foreach="groups" t-as="group">
                            <div class="col-md-6" style="min-height: 150px">
                                <div class="col-md-3 col-md-pull-1">
                                    <img t-att-src="'/website/image?model=mail.group&amp;field=image_small&amp;id='+str(group['id'])"/>
                                </div>
                                <div class="col-md-8">
                                    <a t-attf-href="/groups/#{group.id}" t-esc="group.name"/>
                                    <br/>
                                    <small t-esc="group.description"/>
                                    <br/>
                                    <a t-attf-class="btn btn-default js_group #{group.message_is_follower and 'hidden' or 'visible'} follow_#{group.id}" t-attf-href="/groups/subscription/#{ group.id }/?action=follow" t-attf-id="#{group.id}">Join Group</a>
                                    <a t-attf-class="btn btn-primary js_group #{group.message_is_follower and 'visible' or 'hidden'} unfollow_#{group.id}" t-attf-href="/groups/subscription/#{ group.id }/?action=unfollow" t-attf-id="#{group.id}">UnFollow</a>
                                </div>
                            </div>
                        </t>
                    </div>
                </div>
            </div>
        </t>
    </template>
    <template id="navigation_menu">
        <ul class="nav nav-pills nav-stacked" id="group_follows">
            <t t-foreach="groups" t-as="group">
                <li t-attf-class="#{group.message_is_follower and 'visible' or 'hidden'}" t-att-id="group.id"><a t-attf-href="/groups/#{group.id}" t-esc="group.name"/></li>
            </t>
        </ul>
    </template>
    <template id="group_thread_list">
        <t t-call="website.layout">
            <section class="container">
                <div class="row">
                    <div class="col-md-12 col-md-push-3">
                        <t t-call="website.pager"/>
                    </div>
                </div>
            </section>
            <section class="container">
                <div class="row">
                    <div class="col-md-3">
                        <t t-call="website_mail_group.navigation_menu"/>
                    </div>
                    <div class="col-md-8">
                        <div class="panel panel-default">
                            <div class="panel-heading" t-esc="active_group.name"/>
                            <table class="table table-bordered">
                                <tbody>
                                    <t t-foreach="thread_list" t-as="thread">
                                        <tr>
                                            <td>
                                                <a t-attf-href="/groups/#{active_group.id}/message/#{thread.id}" t-esc="thread.subject"></a>
                                                <img class="img-rounded pull-right mt0" t-att-src="'/website/image?model=mail.message&amp;field=author_avatar&amp;id='+str(thread.id)" style="width : 30px"/>
                                                <p><small>by <t t-esc="thread.author_id.name and thread.author_id.name or thread.email_from"/> on <t t-esc="thread.date"/></small></p>
                                            </td>
                                        </tr>
                                    </t>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
        </t>
    </template>
    <template id="group_thread">
        <t t-call="website.layout">
            <t t-set="head">
                <link rel='stylesheet' href='/website_mail_group/static/src/css/website_mail_group.css'/>
            </t>
            <div class="row mt32">
                <div class="container">
                    <div class="col-md-1 mt0">
                        <img class="img-rounded pull-right mt0" t-att-src="'/website/image?model=mail.message&amp;field=author_avatar&amp;id='+str(main_thread.id)" style="width : 30px"/>
                    </div>
                    <div class="col-md-11">
                        <div class="panel panel-default">
                            <div class="panel-heading" t-esc="main_thread.subject"/>
                            <div class="panel-body">
                                <t t-raw="main_thread.body"/>
                            </div>
                        </div>
                    </div>
                    <div class="row" t-foreach="child_thread" t-as="message">
                        <div class="col-md-1 mt0">
                            <img class="img-rounded pull-right mt0" t-att-src="'/website/image?model=mail.message&amp;field=author_avatar&amp;id='+str(message.id)" style="width : 30px"/>
                        </div>
                        <div class="col-md-11">
                            <div class="panel panel-default">
                                <div class="panel-heading panel-line" t-esc="message.subject"/>
                                <t t-raw="message.body"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </t>
    </template>
</data>
</openerp>