mirror of
https://github.com/taobataoma/meanTorrent.git
synced 2026-07-16 17:23:12 +02:00
init chat view
This commit is contained in:
OldHawk
@@ -51,5 +51,13 @@
|
||||
// Clear the message text
|
||||
vm.messageText = '';
|
||||
}
|
||||
|
||||
vm.initChatView = function () {
|
||||
var e = angular.element('.chat-message-list');
|
||||
var u = angular.element('.chat-user-list');
|
||||
var h = document.documentElement.clientHeight - 50 - 88 - 16;
|
||||
e.css('height', h + 'px');
|
||||
u.css('height', h + 'px');
|
||||
};
|
||||
}
|
||||
}());
|
||||
|
||||
51
modules/chat/client/less/chat.less
Normal file
51
modules/chat/client/less/chat.less
Normal file
@@ -0,0 +1,51 @@
|
||||
@import (reference) "../../../core/client/less/mt-var.less";
|
||||
|
||||
.chat-message-list {
|
||||
height: 100%;
|
||||
margin: 8px -15px 8px 0;
|
||||
border: solid 1px lighten(@gray-light, 38%);
|
||||
border-radius: 3px;
|
||||
.chat-title {
|
||||
color: @gray-light;
|
||||
height: 40px;
|
||||
padding: 10px 15px 0 15px;
|
||||
background-color: lighten(@gray-light, 48%);
|
||||
border-bottom: solid 1px lighten(@gray-light, 45%);
|
||||
.glyphicon {
|
||||
color: @mt-base-color;
|
||||
}
|
||||
}
|
||||
.chat-body {
|
||||
height: ~"calc(100% - 80px)";
|
||||
}
|
||||
.chat-footer {
|
||||
height: 40px;
|
||||
background-color: lighten(@gray-light, 48%);
|
||||
border-top: solid 1px lighten(@gray-light, 45%);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-user-list {
|
||||
height: 100%;
|
||||
margin: 8px 0;
|
||||
border: solid 1px lighten(@gray-light, 38%);
|
||||
border-radius: 3px;
|
||||
.user-title {
|
||||
color: @gray-light;
|
||||
height: 40px;
|
||||
padding: 10px 15px 0 15px;
|
||||
background-color: lighten(@gray-light, 48%);
|
||||
border-bottom: solid 1px lighten(@gray-light, 45%);
|
||||
.glyphicon {
|
||||
color: @mt-base-color;
|
||||
}
|
||||
}
|
||||
.user-body {
|
||||
height: ~"calc(100% - 80px)";
|
||||
}
|
||||
.user-footer {
|
||||
height: 40px;
|
||||
background-color: lighten(@gray-light, 48%);
|
||||
border-top: solid 1px lighten(@gray-light, 45%);
|
||||
}
|
||||
}
|
||||
@@ -1,29 +1,65 @@
|
||||
<!-- The chat view -->
|
||||
<section class="container">
|
||||
<div class="page-header">
|
||||
<h1>Chat Example</h1>
|
||||
</div>
|
||||
<!-- The message form -->
|
||||
<form class="col-xs-12 col-md-offset-4 col-md-4" ng-submit="vm.sendMessage();">
|
||||
<fieldset class="row">
|
||||
<div class="input-group">
|
||||
<input type="text" id="messageText" name="messageText" class="form-control" ng-model="vm.messageText" placeholder="Enter new message" autofocus>
|
||||
<span class="input-group-btn">
|
||||
<button type="submit" class="btn btn-primary" ng-disabled="!vm.messageText.length">Submit</button>
|
||||
</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<ul class="list-unstyled">
|
||||
<!-- List all messages -->
|
||||
<li class="col-xs-12 col-md-offset-4 col-md-4 chat-message" ng-repeat="message in vm.messages">
|
||||
<small class="pull-right text-muted" ng-bind="message.created | date:'mediumTime'"></small>
|
||||
<img ng-src="/{{message.profileImageURL}}" alt="{{message.username}}" class="pull-left chat-profile-image" />
|
||||
<div class="pull-left chat-message-details">
|
||||
<strong ng-bind="message.username"></strong>
|
||||
<br>
|
||||
<span ng-bind="message.text"></span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<section class="container chat-container" ng-init="vm.initChatView();">
|
||||
<div class="row">
|
||||
<div class="col-sm-9">
|
||||
<div class="chat-message-list">
|
||||
<div class="chat-title">
|
||||
<span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span> <span>{{'CHAT_WELCOME' | translate}}</span>
|
||||
</div>
|
||||
|
||||
<div class="chat-body">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="chat-footer">
|
||||
|
||||
</div>
|
||||
|
||||
<!--<div class="row">-->
|
||||
<!--<form class="col-xs-12 col-md-offset-4 col-md-4" ng-submit="vm.sendMessage();">-->
|
||||
<!--<fieldset class="row">-->
|
||||
<!--<div class="input-group">-->
|
||||
<!--<input type="text" id="messageText" name="messageText" class="form-control" ng-model="vm.messageText"-->
|
||||
<!--placeholder="Enter new message"-->
|
||||
<!--autofocus>-->
|
||||
<!--<span class="input-group-btn">-->
|
||||
<!--<button type="submit" class="btn btn-primary" ng-disabled="!vm.messageText.length">Submit</button>-->
|
||||
<!--</span>-->
|
||||
<!--</div>-->
|
||||
<!--</fieldset>-->
|
||||
<!--</form>-->
|
||||
<!--<ul class="list-unstyled">-->
|
||||
<!--<!– List all messages –>-->
|
||||
<!--<li class="col-xs-12 col-md-offset-4 col-md-4 chat-message" ng-repeat="message in vm.messages">-->
|
||||
<!--<small class="pull-right text-muted" ng-bind="message.created | date:'mediumTime'"></small>-->
|
||||
<!--<img ng-src="/{{message.profileImageURL}}" alt="{{message.username}}" class="pull-left chat-profile-image"/>-->
|
||||
|
||||
<!--<div class="pull-left chat-message-details">-->
|
||||
<!--<strong ng-bind="message.username"></strong>-->
|
||||
<!--<br>-->
|
||||
<!--<span ng-bind="message.text"></span>-->
|
||||
<!--</div>-->
|
||||
<!--</li>-->
|
||||
<!--</ul>-->
|
||||
<!--</div>-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="chat-user-list">
|
||||
<div class="user-title">
|
||||
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> <span>{{'CHAT_USERS_LIST' | translate}}</span>
|
||||
</div>
|
||||
|
||||
<div class="user-body">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="user-footer">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -282,6 +282,10 @@
|
||||
RESET_PASSKEY_SUCCESSFULLY: 'Passkey reset successfully',
|
||||
RESET_PASSKEY_ERROR: 'Passkey reset failed',
|
||||
|
||||
//chat view
|
||||
CHAT_USERS_LIST: 'Users List',
|
||||
CHAT_WELCOME: 'Welcome to join the chat room, please follow the chat rules, and have a good time!',
|
||||
|
||||
//footer view
|
||||
MIT_PROTOCOL: 'The source of this project is protected by <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a> open source protocol',
|
||||
GIT_REPO: 'Power by ©meanTottent，<a href="https://github.com/taobataoma/meanTorrent" target="_blank">view on GitHub</a>',
|
||||
|
||||
@@ -282,6 +282,10 @@
|
||||
RESET_PASSKEY_SUCCESSFULLY: 'Passkey 重置成功',
|
||||
RESET_PASSKEY_ERROR: 'Passkey 重置失败',
|
||||
|
||||
//chat view
|
||||
CHAT_USERS_LIST: '用户列表',
|
||||
CHAT_WELCOME: '欢迎进入聊天室，请注意自已的言行，共同维护良好的聊天环境！',
|
||||
|
||||
//footer view
|
||||
MIT_PROTOCOL: '本项目源码受 <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a> 开源协议保护',
|
||||
GIT_REPO: 'Power by ©meanTottent，<a href="https://github.com/taobataoma/meanTorrent" target="_blank">GitHub 源码仓库</a>',
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="container-fluid" style="padding-top: 30px; padding-bottom: 30px;" ng-controller="HeaderController as vm">
|
||||
<div class="container-fluid" style="padding-top: 15px; padding-bottom: 5px;" ng-controller="HeaderController as vm">
|
||||
<div class="container">
|
||||
<div class="row view-footer">
|
||||
<div class="col-sm-7 col-sm-offset-1">
|
||||
|
||||
Reference in New Issue
Block a user