[IMP] im_livechat: style of chat and kanban view of livechat channels

- restyle the search field of livechat, more space between contacts, etc.
- kanban view should fit the style of new kanban views
- new images for status
This commit is contained in:
Simon Lejeune
2015-07-01 18:04:46 +02:00
committed by Martin Geubelle
parent b25f110045
commit 5b89a929a7
6 changed files with 52 additions and 49 deletions
@@ -1,10 +1,12 @@
.oe_im {
position: fixed;
background-color: #E8EBEF;
width: 220px;
background-color: #eaeaea;
width: 250px;
border-left: 1px solid #AEB9BD;
z-index: 500;
-webkit-box-shadow: -2px 0px 5px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow: -2px 0px 5px 0px rgba(50, 50, 50, 0.25);
box-shadow: -2px 0px 5px 0px rgba(50, 50, 50, 0.25);
}
@media print {
@@ -24,25 +26,26 @@
/* search stuff */
.oe_im_frame_header {
position: relative;
background: #dedede;
background: -moz-linear-gradient(#fcfcfc, #dedede);
background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#dedede));
border-bottom: 1px solid border-color !important;
padding: 5px;
padding: 16px;
}
.oe_im_frame_header .oe_im_searchbox {
width: 168px;
width: 200px;
padding: 1px 21px 1px 19px;
font-size: 13px;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
border: none;
border-bottom: 1px solid #c6c6c6;
background: none;
margin-left: 20px;
height: 38px;
}
.oe_im_frame_header .oe_im_searchbox:focus {
outline: none;
}
.oe_im_frame_header .oe_im_search_icon {
position: absolute;
color: #888;
top: 9px;
left: 10px;
top: 28px;
left: 8px;
font-size: 16px;
font-weight: 300 !important;
}
@@ -68,10 +71,10 @@
}
.oe_im_user {
position: relative;
padding: 2px 6px;
padding: 2px 8px;
cursor: pointer;
font-size: 13px;
margin-bottom: 3px;
margin-bottom: 10px;
}
.oe_im_user:hover {
background: lightGrey;
@@ -108,4 +111,4 @@
height: 11px;
vertical-align: middle;
border: 0;
}
}
@@ -6,7 +6,6 @@
color: #4c4c4c;
font-size: 13px;
background: white;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}
/* button */
@@ -39,16 +38,23 @@
overflow: hidden;
margin-bottom: 5px;
margin-right: 6px;
background: rgba(60, 60, 60, 0.8);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
background-color: #fff;
border: 1px solid #DEDEDE;
width: 240px;
z-index:500;
}
@media screen and (max-width:360px) {
.oe_im_chatview {
width: 100%;
margin-right: 0;
}
.oe_im_chatview .oe_im_chatview_content {
width: 100% !important;
}
.oe_im_chatview .oe_im_chatview_input {
width: 100% !important;
}
}
.oe_im_chatview .oe_im_chatview_disconnected {
display:none;
z-index: 100;
Binary file not shown.

Before

Width:  |  Height:  |  Size: 830 B

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 855 B

After

Width:  |  Height:  |  Size: 1.2 KiB

+1 -1
View File
@@ -96,7 +96,7 @@
<t t-name="im_chat.ImTopButton">
<li t-att-title='_t("Display Instant Messaging")'>
<a href="#">
<i id="oe_topbar_imbutton_icon" class="fa fa-comments-o"/>
<i id="oe_topbar_imbutton_icon" class="fa fa-comments"/>
</a>
</li>
</t>
@@ -32,30 +32,24 @@
<field name="nbr_session"/>
<templates>
<t t-name="kanban-box">
<div class="oe_kanban_card oe_kanban_global_click">
<div class="oe_module_vignette row">
<div class="col-md-4">
<div class="oe_module_icon">
<img t-att-src="kanban_image('im_livechat.channel', 'image_medium', record.id.value)" class="img-responsive"/>
</div>
<div class="o_kanban_two_column oe_kanban_global_click">
<div class="o_kanban_image">
<img t-att-src="kanban_image('im_livechat.channel', 'image_medium', record.id.value)" class="img-responsive"/>
</div>
<div class="oe_kanban_details">
<strong><field name="name"/></strong>
<div>
<p>
<i class="fa fa-user"></i>
<t t-esc="(record.user_ids.raw_value || []).length"/> Operators
<br/>
<i class="fa fa-comments"></i>
<t t-esc="record.nbr_session.raw_value"/> Sessions
</p>
</div>
<div class="col-md-7">
<h3><field name="name"/></h3>
<div>
<p>
<i class="fa fa-user">
<t t-esc="(record.user_ids.raw_value || []).length"/> Operators
</i>
<br/>
<i class="fa fa-comments">
<t t-esc="record.nbr_session.raw_value"/> Sessions
</i>
</p>
<div style="margin-top:5px;">
<button t-if="record.are_you_inside.raw_value" name="action_quit" type="object" class="btn btn-default btn-xs">Quit</button>
<button t-if="! record.are_you_inside.raw_value" name="action_join" type="object" class="btn btn-info btn-xs">Join</button>
</div>
</div>
<div class="o_kanban_button">
<button t-if="record.are_you_inside.raw_value" name="action_quit" type="object" class="btn btn-sm btn-primary">Quit</button>
<button t-if="!record.are_you_inside.raw_value" name="action_join" type="object" class="btn btn-sm btn-primary">Join</button>
</div>
</div>
</div>