Skip to content

U
ulakbus-ui
Commit 5cbbc193 authored by Vladimir Baranov's avatar Vladimir Baranov
Browse files
Options

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

parents f148e4d8 ad175408
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 14 deletions
app/app.css
View file @ 5cbbc193
...@@ -25,6 +25,10 @@ body { ...@@ -25,6 +25,10 @@ body {
padding:15px; padding:15px;
} }
.dropdown-toggle {
cursor:pointer;
}
.badge { .badge {
border-radius: 100%; border-radius: 100%;
width: 22px; width: 22px;
...@@ -2115,6 +2119,10 @@ table.dataTable thead .sorting:after { ...@@ -2115,6 +2119,10 @@ table.dataTable thead .sorting:after {
padding-bottom: 15px; padding-bottom: 15px;
} }
.chat-app .side-navigation ul.channels li.public-ro-channel {
font-style:italic;
}
.chat-app .side-navigation ul li { .chat-app .side-navigation ul li {
list-style: none; list-style: none;
color: #fff; color: #fff;
...@@ -2203,7 +2211,7 @@ table.dataTable thead .sorting:after { ...@@ -2203,7 +2211,7 @@ table.dataTable thead .sorting:after {
top: 9px; top: 9px;
} }
.chat-app .side-navigation ul li.notification:after { .chat-app .side-navigation ul li.unread:after {
content: " "; content: " ";
width: 8px; width: 8px;
height: 8px; height: 8px;
...@@ -2232,7 +2240,7 @@ table.dataTable thead .sorting:after { ...@@ -2232,7 +2240,7 @@ table.dataTable thead .sorting:after {
.chat-app .conversation-header .conversation-user { .chat-app .conversation-header .conversation-user {
display: inline-block; display: inline-block;
width: 280px; width: 240px;
margin-left: 23px; margin-left: 23px;
float: left; float: left;
} }
...@@ -2248,6 +2256,10 @@ table.dataTable thead .sorting:after { ...@@ -2248,6 +2256,10 @@ table.dataTable thead .sorting:after {
margin-left: 10px; margin-left: 10px;
font-family: 'robotobold'; font-family: 'robotobold';
font-size: 16px; font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 180px;
} }
.chat-app .conversation-header .conversation-search { .chat-app .conversation-header .conversation-search {
...@@ -2278,6 +2290,19 @@ table.dataTable thead .sorting:after { ...@@ -2278,6 +2290,19 @@ table.dataTable thead .sorting:after {
margin-top:15px; 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 { .chat-app .conversation-body {
overflow: auto; overflow: auto;
height: calc(100% - 140px); height: calc(100% - 140px);
...@@ -2422,7 +2447,7 @@ table.dataTable thead .sorting:after { ...@@ -2422,7 +2447,7 @@ table.dataTable thead .sorting:after {
font-family: 'robotomedium'; font-family: 'robotomedium';
} }
.chat-app .create-new-message-window { .chat-app .chat-popup-window {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -2445,7 +2470,7 @@ table.dataTable thead .sorting:after { ...@@ -2445,7 +2470,7 @@ table.dataTable thead .sorting:after {
outline:none; outline:none;
} }
.chat-app .close-create-new-message-window { .chat-app .close-chat-popup-window {
width: 50px; width: 50px;
height: 50px; height: 50px;
border: 1px solid #ccc; border: 1px solid #ccc;
...@@ -2460,7 +2485,7 @@ table.dataTable thead .sorting:after { ...@@ -2460,7 +2485,7 @@ table.dataTable thead .sorting:after {
cursor:pointer; cursor:pointer;
} }
.chat-app .close-create-new-message-window:hover { .chat-app .close-chat-popup-window:hover {
background-color:#efefef; background-color:#efefef;
color:#000000; color:#000000;
} }
...@@ -2500,6 +2525,60 @@ table.dataTable thead .sorting:after { ...@@ -2500,6 +2525,60 @@ table.dataTable thead .sorting:after {
margin-top: 9px; 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 */ /* END OF CHAT APPLICATION */
......
app/shared/templates/directives/messaging/detail.html
View file @ 5cbbc193
...@@ -8,6 +8,16 @@ ...@@ -8,6 +8,16 @@
<div class="conversation-search"> <div class="conversation-search">
<input type="text" placeholder="Arama Yap"> <input type="text" placeholder="Arama Yap">
</div> </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"> <div class="close-chat-app">
<span class="glyphicon glyphicon-remove"></span> <span class="glyphicon glyphicon-remove"></span>
</div> </div>
...@@ -23,8 +33,14 @@ ...@@ -23,8 +33,14 @@
<div class="conversation-block clearfix"> <div class="conversation-block clearfix">
<div class="conversation-actions"> <div class="conversation-actions">
<div class="action">Edit</div> <div class="action"><span class="glyphicon glyphicon-star-empty"></span></div>
<div class="action">Delete</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>
<div class="user-photo"> <div class="user-photo">
...@@ -48,8 +64,14 @@ ...@@ -48,8 +64,14 @@
<textarea placeholder="Mesajını buraya yaz..."></textarea> <textarea placeholder="Mesajını buraya yaz..."></textarea>
<div class="add-attachment"> <div class="add-attachment">
<span class="glyphicon glyphicon-file"></span> <span class="glyphicon glyphicon-send"></span>
<span class="glyphicon glyphicon-picture"></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>
</div> </div>
......
app/shared/templates/directives/messaging/index.html
View file @ 5cbbc193
...@@ -5,26 +5,27 @@ ...@@ -5,26 +5,27 @@
<ul class="channels"> <ul class="channels">
<li class="title">CHANNELS <span class="badge">{{ }}</span></li> <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>
<ul class="channels"> <ul class="channels">
<li class="title">NOTIFICATIONS <span class="badge">8</span></li> <li class="title">NOTIFICATIONS <span class="badge">8</span></li>
<li class="notification">Notification One</li> <li class="unread">Notification One</li>
</ul> </ul>
<ul class="direct-messages"> <ul class="direct-messages">
<li class="compose"><span class="glyphicon glyphicon-plus-sign"></span> Create New Message</li> <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="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> </ul>
</div> </div>
<message-detail></message-detail> <message-detail></message-detail>
<div class="create-new-message-window"> <div class="chat-popup-window create-new-message-window">
<div class="close-create-new-message-window"><span class="glyphicon glyphicon-remove"></span></div> <div class="close-chat-popup-window"><span class="glyphicon glyphicon-remove"></span></div>
<input type="text" placeholder="Birini ismi ile ara..."> <input type="text" placeholder="Birini ismi ile ara...">
<div class="search-results"> <div class="search-results">
<div class="user"> <div class="user">
...@@ -33,6 +34,27 @@ ...@@ -33,6 +34,27 @@
</div> </div>
</div> </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>
</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