thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Adjust widths of bubbles and chat window

Browse source 
With these changes, message bubbles in the default-sized chat popup are
just wide enough to display the full complement of html5 media player
controls.
This commit is contained in:
lilia 2015-03-04 13:59:40 -08:00
parent 8bc77fa02b
commit 567a48e82b
3 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/panel_controller.js
View file

@ -57,7 +57,7 @@
url: 'conversation.html',
type: 'panel',
focused: true,
width: 280,
width: 300,
height: 420
}, function (windowInfo) {
windowMap.add({ windowId: windowInfo.id, modelId: modelId });

12
stylesheets/_conversation.scss
View file

@ -107,7 +107,7 @@
left: -2px;
display: inline-block;
vertical-align: top;
max-width: calc(100% - 54px - 2 * 12px);
max-width: calc(100% - 20px - 2 * 12px);
padding: 9px 12px;
border-radius: 4px;
box-shadow: 0 3px 3px -4px black;
@ -120,13 +120,13 @@
}
&::before {
top: (54px / 2) - 8px;
top: (44px / 2) - 8px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
&::after {
top: (54px / 2) - 6px;
top: (44px / 2) - 6px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
@ -192,10 +192,10 @@
}
img.avatar {
height: 44px;
width: 44px;
height: 36px;
width: 36px;
background: $grey_l;
border-radius: (44px / 2);
border-radius: (36px / 2);
}
.timestamp {

12
stylesheets/manifest.css
View file

@ -359,7 +359,7 @@ input.new-message {
left: -2px;
display: inline-block;
vertical-align: top;
max-width: calc(100% - 54px - 2 * 12px);
max-width: calc(100% - 20px - 2 * 12px);
padding: 9px 12px;
border-radius: 4px;
box-shadow: 0 3px 3px -4px black; }
@ -372,12 +372,12 @@ input.new-message {
width: 0; }
.message-detail .bubble::before,
.message-list .bubble::before {
top: 19px;
top: 14px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent; }
.message-detail .bubble::after,
.message-list .bubble::after {
top: 21px;
top: 16px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent; }
.message-detail .incoming .bubble,
@ -425,10 +425,10 @@ input.new-message {
display: none; }
.message-detail img.avatar,
.message-list img.avatar {
height: 44px;
width: 44px;
height: 36px;
width: 36px;
background: #f3f3f3;
border-radius: 22px; }
border-radius: 18px; }
.message-detail .timestamp,
.message-list .timestamp {
margin-top: 3px;