Commit 5cbbc193 authored by Vladimir Baranov's avatar Vladimir Baranov

Merge branch 'chat-app-ui-update' into develop

parents f148e4d8 ad175408
......@@ -25,6 +25,10 @@ body {
padding:15px;
}
.dropdown-toggle {
cursor:pointer;
}
.badge {
border-radius: 100%;
width: 22px;
......@@ -2115,6 +2119,10 @@ table.dataTable thead .sorting:after {
padding-bottom: 15px;
}
.chat-app .side-navigation ul.channels li.public-ro-channel {
font-style:italic;
}
.chat-app .side-navigation ul li {
list-style: none;
color: #fff;
......@@ -2203,7 +2211,7 @@ table.dataTable thead .sorting:after {
top: 9px;
}
.chat-app .side-navigation ul li.notification:after {
.chat-app .side-navigation ul li.unread:after {
content: " ";
width: 8px;
height: 8px;
......@@ -2232,7 +2240,7 @@ table.dataTable thead .sorting:after {
.chat-app .conversation-header .conversation-user {
display: inline-block;
width: 280px;
width: 240px;
margin-left: 23px;
float: left;
}
......@@ -2248,6 +2256,10 @@ table.dataTable thead .sorting:after {
margin-left: 10px;
font-family: 'robotobold';
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 180px;
}
.chat-app .conversation-header .conversation-search {
......@@ -2278,6 +2290,19 @@ table.dataTable thead .sorting:after {
margin-top:15px;
}
.chat-app .conversation-header .chat-app-actions {
display: inline-block;
float: left;
width: 40px;
height: 40px;
border: 1px solid #efefef;
text-align: center;
line-height: 40px;
margin-left: 10px;
border-radius: 3px;
margin-top:15px;
}
.chat-app .conversation-body {
overflow: auto;
height: calc(100% - 140px);
......@@ -2422,7 +2447,7 @@ table.dataTable thead .sorting:after {
font-family: 'robotomedium';
}
.chat-app .create-new-message-window {
.chat-app .chat-popup-window {
position: absolute;
top: 0;
left: 0;
......@@ -2445,7 +2470,7 @@ table.dataTable thead .sorting:after {
outline:none;
}
.chat-app .close-create-new-message-window {
.chat-app .close-chat-popup-window {
width: 50px;
height: 50px;
border: 1px solid #ccc;
......@@ -2460,7 +2485,7 @@ table.dataTable thead .sorting:after {
cursor:pointer;
}
.chat-app .close-create-new-message-window:hover {
.chat-app .close-chat-popup-window:hover {
background-color:#efefef;
color:#000000;
}
......@@ -2500,6 +2525,60 @@ table.dataTable thead .sorting:after {
margin-top: 9px;
}
.chat-app .create-new-channel-window h3 {
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.chat-app .create-new-channel-window .text-center input {
width: 400px;
margin-top: 40px;
height: 50px;
padding-left: 15px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
}
.chat-app .create-new-channel-window .text-center textarea {
width: 400px;
margin: 20px;
height: 110px;
padding-left: 15px;
padding-top: 15px;
border: 1px solid rgb(204, 204, 204);
border-radius: 5px;
outline: none;
max-width: 400px;
max-height:200px;
}
.chat-app .create-new-channel-window button {
width: 400px;
margin-top:0px;
height: 50px;
font-size: 19px;
}
.chat-app .add-user-unit h3 {
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.chat-app .add-user-unit input {
width: 400px;
margin-top: 40px;
height: 50px;
padding-left: 15px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
}
/* END OF CHAT APPLICATION */
......
......@@ -8,6 +8,16 @@
<div class="conversation-search">
<input type="text" placeholder="Arama Yap">
</div>
<div class="dropdown">
<div class="chat-app-actions dropdown-toggle" data-toggle="dropdown" id="chat-app-actions">
<span class="glyphicon glyphicon-option-vertical"></span>
</div>
<ul class="dropdown-menu" aria-labelledby="chat-app-actions" style="left: inherit; top: 53px; right: 66px;">
<li><a href="#">Action One</a></li>
<li><a href="#">Action Two</a></li>
<li><a href="#">Action Three</a></li>
</ul>
</div>
<div class="close-chat-app">
<span class="glyphicon glyphicon-remove"></span>
</div>
......@@ -23,8 +33,14 @@
<div class="conversation-block clearfix">
<div class="conversation-actions">
<div class="action">Edit</div>
<div class="action">Delete</div>
<div class="action"><span class="glyphicon glyphicon-star-empty"></span></div>
<div class="action dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-option-horizontal"></span>
</div>
<ul class="dropdown-menu" style="left:-86px;">
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
<div class="user-photo">
......@@ -48,8 +64,14 @@
<textarea placeholder="Mesajını buraya yaz..."></textarea>
<div class="add-attachment">
<span class="glyphicon glyphicon-file"></span>
<span class="glyphicon glyphicon-picture"></span>
<span class="glyphicon glyphicon-send"></span>
<div class="dropup" style="float:left;">
<span class="glyphicon glyphicon-paperclip dropdown-toggle" data-toggle="dropdown" id="attachment"></span>
<ul class="dropdown-menu" aria-labelledby="attachment" style="left:-104px;">
<li><a href="#">Image</a></li>
<li><a href="#">File</a></li>
</ul>
</div>
</div>
</div>
......
......@@ -5,26 +5,27 @@
<ul class="channels">
<li class="title">CHANNELS <span class="badge">{{ }}</span></li>
<li class="notification">Channel One</li>
<li class="unread">Public Channel</li>
<li class="public-ro-channel">Public Read Only Channel</li>
</ul>
<ul class="channels">
<li class="title">NOTIFICATIONS <span class="badge">8</span></li>
<li class="notification">Notification One</li>
<li class="unread">Notification One</li>
</ul>
<ul class="direct-messages">
<li class="compose"><span class="glyphicon glyphicon-plus-sign"></span> Create New Message</li>
<li class="title">DIRECT MESSAGES <span class="badge">14</span></li>
<li class="online" ng-class="{'active':'active', 'notification': 'notification'}">Erkan Öğümsöğütlü</li>
<li class="online" ng-class="{'active':'active', 'unread': 'unread'}">Erkan Öğümsöğütlü</li>
</ul>
</div>
<message-detail></message-detail>
<div class="create-new-message-window">
<div class="close-create-new-message-window"><span class="glyphicon glyphicon-remove"></span></div>
<div class="chat-popup-window create-new-message-window">
<div class="close-chat-popup-window"><span class="glyphicon glyphicon-remove"></span></div>
<input type="text" placeholder="Birini ismi ile ara...">
<div class="search-results">
<div class="user">
......@@ -33,6 +34,27 @@
</div>
</div>
</div>
<!-- end of create-new-message-window -->
<div class="chat-popup-window create-new-channel-window">
<div class="close-chat-popup-window"><span class="glyphicon glyphicon-remove"></span></div>
<h3>Create New Channel</h3>
<div class="text-center">
<input type="text" placeholder="Channel Name"><br>
<textarea placeholder="Channel Description"></textarea>
<button class="btn btn-success">Create</button>
</div>
</div>
<!-- end of create-new-message-window -->
<div class="chat-popup-window add-user-unit" style="display:block;">
<div class="close-chat-popup-window"><span class="glyphicon glyphicon-remove"></span></div>
<h3>Add User/Unit</h3>
<div class="text-center">
<input type="text" placeholder="Search User/Unit to Add"><br>
</div>
</div>
<!-- end of create-new-message-window -->
</div>
</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment