Skip to content
This repository has been archived by the owner on Feb 11, 2021. It is now read-only.

Commit

Permalink
Merge pull request #49 from codekiln/#48_ChatWindow_basic_styles
Browse files Browse the repository at this point in the history 
closes #48 chat window basic styles
  • Loading branch information
@codekiln
codekiln authored Feb 18, 2018
2 parents 163a2cf + 90b4299 commit c43ccfa
Show file tree
Hide file tree
Showing 10 changed files with 826 additions and 103 deletions.
1 change: 1 addition & 0 deletions django_react_chat_example_project/bsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"bs-dependencies": [
"reason-react",
"reason-apollo",
"bs-material-ui",
"bs-jest"
],
"reason": {
Expand Down
3 changes: 2 additions & 1 deletion ..._example_project/django_react_chat_example_project/static/js/chat/rechat/src/RechatApp.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions ..._example_project/django_react_chat_example_project/static/js/chat/rechat/src/RechatApp.re
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,6 @@ let make = (_children) => {
render: (_self) =>
<div className="RechatApp">
<RechatSidebar/>
<RechatWindow/>
</div>
};
304 changes: 205 additions & 99 deletions ...xample_project/django_react_chat_example_project/static/js/chat/rechat/src/RechatApp.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,118 +8,224 @@ $grey-v8: rgba(0, 0, 0, .4);
$grey-v10: #4c4c4c;
$grey-v12: #333;

// https://coolors.co/3e3e3e-e4e4e4-db4d3f-b03d32-a6a5a5
$black-olive: #3E3E3E;
$platinum: #E4E4E4;
$carmine-pink: #DB4D3F;
$pale-carmine: #B03D32;
$quicksilver: #A6A5A5;

$primary: $carmine-pink;
$primary-darker: $pale-carmine;
$secondary: $platinum;
$secondary-darker: $quicksilver;
$dark: $black-olive;

#rechat {
.RechatApp {
.RechatSidebar {
background-clip: padding-box;
background-color: $grey-v3;
border-left: 1px solid $grey-v8;
box-shadow: inset 2px 0 2px -2px $grey-v7;
font-size: 12px;
height: 100%;
line-height: 16px;
width: 205px;
position: fixed;
right: 0;
top: 0;

.users-list {

.header {
color: $grey-v10;
font-size: 11px;
font-weight: bold;
margin: 8px 0 8px 8px;
height: 16px;
overflow: hidden;
text-overflow: ellipsis;
}
// Avatar uses material-ui, so nesting is needed to increase the specificity
.RechatWindow__Avatar {
width: 30px;
height: 30px;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}
}

li {
.RechatSidebar {
background-clip: padding-box;
background-color: $grey-v3;
border-left: 1px solid $grey-v8;
box-shadow: inset 2px 0 2px -2px $grey-v7;
font-size: 12px;
height: 100%;
line-height: 16px;
width: 205px;
position: fixed;
right: 0;
top: 0;

.users-list {

.header {
color: $grey-v10;
font-size: 11px;
font-weight: bold;
margin: 8px 0 8px 8px;
height: 16px;
overflow: hidden;
text-overflow: ellipsis;
}

&:hover {
background-color: $grey-v4;
box-shadow: 1px 0 0 $grey-v2 inset;
text-decoration: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

a.chatgroup-link {
color: $grey-v12;
display: block;
height: 32px;
line-height: 32px;
padding: 4px 0;
position: relative;
text-decoration: none;
}
li {

.chatgroup-item {
padding-left: 8px;
position: relative;
}
&:hover {
background-color: $grey-v4;
box-shadow: 1px 0 0 $grey-v2 inset;
text-decoration: none;
}

.avatar-container {
a.chatgroup-link {
color: $grey-v12;
display: block;
height: 32px;
line-height: 32px;
padding: 4px 0;
position: relative;
text-decoration: none;
}

border-radius: 50%;
color: #333;
display: block;
float: left;
height: 32px;
line-height: 32px;
overflow: hidden;
padding: 4px 0;
position: relative;
top: -1px;
width: 34px;

.avatar {
width: 34px;
border-radius: 50%;
color: #333;
display: block;
height: 32px;
line-height: 32px;
padding: 4px 0;
position: relative;
}
}
.chatgroup-item {
padding-left: 8px;
position: relative;
}

.status-container {
float: right;
line-height: 32px;
margin: 0 1px 0 4px;
text-align: right;

.status-indicator {
display: inline-block;
padding-right: 12px;

span {
background: $brightgreen;
border-radius: 50%;
display: inline-block;
height: 6px;
margin-left: 4px;
width: 6px;
}
}
}
.avatar-container {

border-radius: 50%;
color: #333;
display: block;
float: left;
height: 32px;
line-height: 32px;
overflow: hidden;
padding: 4px 0;
position: relative;
top: -1px;
width: 34px;

.avatar {
width: 34px;
border-radius: 50%;
color: #333;
display: block;
height: 32px;
line-height: 32px;
padding: 4px 0;
position: relative;
}
}

.name, .rightBuffer {
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis;
white-space: nowrap
}
.status-container {
float: right;
line-height: 32px;
margin: 0 1px 0 4px;
text-align: right;

.status-indicator {
display: inline-block;
padding-right: 12px;

span {
background: $brightgreen;
border-radius: 50%;
display: inline-block;
height: 6px;
margin-left: 4px;
width: 6px;
}
}
}

.name, .rightBuffer {
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis;
white-space: nowrap
}

}
}
}


$RechatWindow_height: 334px;
$RechatWindow_Header_height: 22px;
$RechatWindow_Footer_height: 22px;
$RechatWindow_MessagePort_height: $RechatWindow_height - $RechatWindow_Header_height - $RechatWindow_Footer_height;

.RechatWindow {
position: fixed;
height: $RechatWindow_height;
width: 260px;
bottom: 0;
// TODO: use absolute positioning with margins so we can have more than one window
right: 350px;
background-color: white;
border: 1px solid $grey-v8;
box-shadow: 2px 0 1px -1px $grey-v7;
font-size: 12px;
}

.RechatWindow__Header {
background-color: $primary-darker;
color: white;
padding: 3px;
height: $RechatWindow_Header_height;
}

.RechatWindow__HeaderTitle {
float: left;
width: 92%;
}

.RechatWindow__CloseButton {
float: right;
width: 5%;

&:hover {
cursor: pointer;
}
}

.RechatWindow__MessagesPort {
padding: 5px;
overflow-y: scroll;
height: $RechatWindow_MessagePort_height;
}

.RechatWindow__AvatarContainer, .RechatWindow__Message {
display: inline-block;
}

.RechatWindow__MessageContainer--Theirs {
float: left;
}

.RechatWindow__MessageContainer--Ours {
float: right;
}

.RechatWindow__Message {
width: 155px;
border-radius: 10px;
padding: 3px;
margin: 3px;
clear: both;
}

.RechatWindow__Message--Theirs {
background-color: $secondary;
border-bottom-left-radius: 0;
}

.RechatWindow__Message--Ours {
background-color: $primary-darker;
color: white;
border-bottom-right-radius: 0;
}

.RechatWindow__Footer {
position: absolute;
height: $RechatWindow_Footer_height;
bottom: 0;
width: 100%;
}

.RechatWindow__Input {
width: 100%;
}
23 changes: 23 additions & 0 deletions ...ject/django_react_chat_example_project/static/js/chat/rechat/src/RechatMessageListItem.re
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
let component = ReasonReact.statelessComponent("RechatUsersListItem");

let make = (~chatUser, _children) => {
...component,
render: (_) => {
<li>
<a className="chatgroup-link" rel="ignore">
<div className="chatgroup-item">
<div className="avatar-container">
<div className="avatar"></div>
</div>
<div className="status-container">
<div className="status-indicator">
<span></span>
</div>
</div>
<div className="name">(ReasonReact.stringToElement(chatUser##username))</div>
<div className="rightBuffer"></div>
</div>
</a>
</li>
}
};
Loading

0 comments on commit c43ccfa

Please sign in to comment.