Skip to content

Develop.sprint8.chat sample #228

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
IegorKozakov merged 19 commits into from
Apr 25, 2017
Merged

Develop.sprint8.chat sample #228

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
de05a1a
initial commit
IegorKozakov Mar 27, 2017
073a2dd
in progress
IegorKozakov Mar 27, 2017
ff96f7b
Merge branch 'develop' into develop.sprint8.chatSample
IegorKozakov Mar 27, 2017
b2b3c9b
WIP newChat V2
IegorKozakov Apr 3, 2017
194a145
WIP router
IegorKozakov Apr 5, 2017
63087d6
WIP Promises
IegorKozakov Apr 7, 2017
54d5506
WIP
IegorKozakov Apr 12, 2017
b61f0a2
WIP update dialog
IegorKozakov Apr 13, 2017
8f7e82a
WIP delete chat
IegorKozakov Apr 13, 2017
8ff5971
wid notifications
IegorKozakov Apr 14, 2017
3747ea3
wip notifications
IegorKozakov Apr 18, 2017
dafd3aa
wip notifications
IegorKozakov Apr 19, 2017
7b3588c
Merge branch 'develop' into develop.sprint8.chatSample
IegorKozakov Apr 19, 2017
fbc803d
after merge
IegorKozakov Apr 19, 2017
45ac35e
tests
IegorKozakov Apr 19, 2017
963ad7e
Notifications
IegorKozakov Apr 20, 2017
d93354b
Loading page
IegorKozakov Apr 20, 2017
2756daf
logout fix
IegorKozakov Apr 20, 2017
e298c3b
after review
IegorKozakov Apr 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,039 changes: 959 additions & 1,080 deletions quickblox.min.js
View file
Open in desktop

Large diffs are not rendered by default.

366 changes: 99 additions & 267 deletions samples/newChat/css/dashboard.css
View file
Open in desktop

Large diffs are not rendered by default.

248 changes: 248 additions & 0 deletions samples/newChat/css/dialogs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,248 @@

.sidebar__dilog_list {
flex: 1 1 100%;
overflow-y: auto;
text-align: left;
}

.sidebar__dilog_list.loading:after {
content: "";
display: block;
background: url(../img/loader2.gif);
width: 30px;
height: 30px;
background-size: contain;
margin: 15px auto;
}

.sidebar__dilog_list .dialog__item {
display: block;
width: 100%;
}

.sidebar__dilog_list .dialog__item.selected,
.sidebar__dilog_list .dialog__item:hover {
background: rgba(42, 100, 150, 0.1);
}

.dialog__item_link {
padding: 16px;
display: flex;
flex-wrap: nowrap;
text-decoration: none;
}

.open_sidebar {
border: none;
width: 24px;
height: 24px;
background-color: #778594;
-webkit-mask: url(../img/ic_arrow_back.svg) no-repeat 50% 50%;
mask: url(../img/ic_arrow_back.svg) no-repeat 50% 50%;
cursor: pointer;
flex: 0 0 24px;
padding: 0;
margin: 0 16px 0 0;
}
.dialog__title {
font-size: 15px;
font-weight: 500;
line-height: 18px;
color: #4A4A4A;
flex: 1 1 100%;
}

.dialog__item {
cursor: pointer;
}

.dialog__avatar.m-user__img_1,
.message__avatar.m-user__img_1,
.user__avatar.m-user__img_1 {
color: #FF9600;
background-color: #ffd599;
}
.message__avatar {
transition: .3s;
}

.dialog__avatar.m-user__img_2,
.message__avatar.m-user__img_2,
.user__avatar.m-user__img_2 {
color: #CDDA49;
background-color: #ebfcb6;
}

.dialog__avatar.m-user__img_3,
.message__avatar.m-user__img_3,
.user__avatar.m-user__img_3 {
color: #159588;
background-color: #a1d5cf;
}

.dialog__avatar.m-user__img_4,
.message__avatar.m-user__img_4,
.user__avatar.m-user__img_4 {
color: #FF2D55;
background-color: #ffabbb;
}

.dialog__avatar.m-user__img_5,
.message__avatar.m-user__img_5,
.user__avatar.m-user__img_5 {
color: #44DB5E;
background-color: #b4f1bf;
}

.dialog__avatar.m-user__img_6,
.message__avatar.m-user__img_6,
.user__avatar.m-user__img_6 {
color: #1FBCD2;
background-color: #a5e4ed;
}

.dialog__avatar.m-user__img_7,
.message__avatar.m-user__img_7,
.user__avatar.m-user__img_7 {
color: #007AFF;
background-color: #99caff;
}

.dialog__avatar.m-user__img_8,
.message__avatar.m-user__img_8,
.user__avatar.m-user__img_8 {
color: #9B2FAE;
background-color: #d5acdf;
}

.dialog__avatar.m-user__img_9,
.message__avatar.m-user__img_9,
.user__avatar.m-user__img_9 {
color: #54C7FC;
background-color: #bbe9fe;
}

.dialog__avatar.m-user__img_10,
.message__avatar.m-user__img_10,
.user__avatar.m-user__img_10 {
color: #4054B2;
background-color: #b3bbe0;
}

.dialog__avatar.m-type_group.m-user__img_1 {
color: #ffd599;
background-color: #FF9600;
}

.dialog__avatar.m-type_group.m-user__img_2 {
color: #ebfcb6;
background-color: #CDDA49;
}

.dialog__avatar.m-type_group.m-user__img_3 {
color: #a1d5cf;
background-color: #159588;
}

.dialog__avatar.m-type_group.m-user__img_4 {
color: #ffabbb;
background-color: #FF2D55;
}

.dialog__avatar.m-type_group.m-user__img_5 {
color: #b4f1bf;
background-color: #44DB5E;
}

.dialog__avatar.m-type_group.m-user__img_6 {
color: #a5e4ed;
background-color: #1FBCD2;
}

.dialog__avatar.m-type_group.m-user__img_7 {
color: #99caff;
background-color: #007AFF;
}

.dialog__avatar.m-type_group.m-user__img_8 {
color: #d5acdf;
background-color: #9B2FAE;
}

.dialog__avatar.m-type_group.m-user__img_9 {
color: #bbe9fe;
background-color: #54C7FC;
}

.dialog__avatar.m-type_group.m-user__img_10 {
color: #b3bbe0;
background-color: #4054B2;
}

.message__avatar.m-user__img_not_loaded,
.message__avatar.m-typing_unknown {
opacity: .1;
}

.dialog__info {
flex: 1 1 100%;
overflow: hidden;
}

.dialog__name {
display: block;
width: 100%;
font-size: 15px;
font-weight: 500;
line-height: 18px;
color: #4A4A4A;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin: 0 10px 6px 0;
}

.dialog__last_message {
display: block;
width: 100%;
font-size: 13px;
line-height: 15px;
color: #778594;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.dialog__last_message.attachment {
color: #007AFF;
}


.dialog_additional_info {
flex:0 0 24px;
text-align: right;
}

.dialog__last_message_date {
font-size: 12px;
line-height: 14px;
color: #4A4A4A;
margin: 0 0 2px;
display: inline-block;
}

.dialog_unread_counter {
min-width: 23px;
background-color: #17D04B;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
line-height: 19px;
color: #FFFFFF;
text-align: center;
display: inline-block;
}

.dialog_unread_counter.hidden {
display: none;
}
84 changes: 41 additions & 43 deletions samples/newChat/css/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,52 +44,51 @@
color: #4A4A4A;
}

.login__user_list {
.login_form__row {
position: relative;
margin: 0 0 70px;
height: 56px;
width: 100%;
margin: 0 0 8px;
}

.login__user_list:before {
content: '';
.login__button_wrap {
padding: 22px 0 0;
}

.login_form__row label {
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #778594;
left: 0;
top: 20px;
font-size: 16px;
line-height: 19px;
color: #C5CACE;
transition: top 0.15s, color 0.15s;
}

.login__select {
.login_form__row input{
border: none;
display: block;
background: none;
width: 100%;
height: 48px;
font-size: 16px;
line-height: 19px;
color: #778594;
width: 100%;
padding: 6px 0px;
cursor: pointer;
color: #4A4A4A;
padding: 7px 0 0;
border-bottom: 1px solid #C5CACE;
}
.login__user_list hr {
box-sizing: border-box;
width: 100%;
height: 2px;
border: 1px solid #C5CACE;

.login_form__row.filled input {
border-bottom: 2px solid #17D04B;
}

.login__button {
color: white;
background-color: #17D04B;
text-transform: uppercase;
text-align: center;
font-size: 14px;
font-weight: 500;
padding: 12px;
.login_form__row.filled label {
top: 0;
font-size: 12px;
line-height: 14px;
color: #17D04B;
}

.m-login__button {
width: 100%;
border: none;
border-radius: 2px;
cursor: pointer;
}

.login__button:active {
Expand Down Expand Up @@ -149,35 +148,34 @@
}

.login__inner {
flex: 0 0 390px;
flex: 0 0;
padding: 61px 56px 56px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 0 1px 3px 0 rgba(0,0,0,0.1);
border-radius: 4px;
}

.login__top {
margin: 0 0 74px;
margin: 0 0 28px;
}

.login__logo {
display: inline-block;
vertical-align: middle;
width: 36px;
margin: 0 20px 0 0;
margin: 0 20px 21px 0;
}

.login__top h1 {
font-size: 22px;
line-height: 25px;
}

.login__user_list hr {
width: 304px;
}

.login__user_list {
position: relative;
margin: 0 0 81px;
.login__top h3 {
max-width: 304px;
font-size: 14px;
line-height: 20px;
text-align: center;
color: #778594;
}

.login__footer {
Expand Down
Loading