From 8a038a2c077bb4e011ebb65132e266310b0b637e Mon Sep 17 00:00:00 2001 From: OldHawk Date: Tue, 9 May 2017 19:02:22 +0800 Subject: [PATCH] init chat view --- .../controllers/chat.client.controller.js | 8 ++ modules/chat/client/less/chat.less | 51 +++++++++++ .../chat/client/views/chat.client.view.html | 90 +++++++++++++------ modules/core/client/app/trans-string-en.js | 4 + modules/core/client/app/trans-string-zh.js | 4 + .../core/client/views/footer.client.view.html | 2 +- 6 files changed, 131 insertions(+), 28 deletions(-) create mode 100644 modules/chat/client/less/chat.less diff --git a/modules/chat/client/controllers/chat.client.controller.js b/modules/chat/client/controllers/chat.client.controller.js index 52df51cc..88f21268 100644 --- a/modules/chat/client/controllers/chat.client.controller.js +++ b/modules/chat/client/controllers/chat.client.controller.js @@ -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'); + }; } }()); diff --git a/modules/chat/client/less/chat.less b/modules/chat/client/less/chat.less new file mode 100644 index 00000000..24fc8954 --- /dev/null +++ b/modules/chat/client/less/chat.less @@ -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%); + } +} \ No newline at end of file diff --git a/modules/chat/client/views/chat.client.view.html b/modules/chat/client/views/chat.client.view.html index ad45efa5..ff26e46e 100644 --- a/modules/chat/client/views/chat.client.view.html +++ b/modules/chat/client/views/chat.client.view.html @@ -1,29 +1,65 @@ -
-
-

Chat Example

-
- -
-
-
- - - - -
-
-
- +
+
+
+
+
+ {{'CHAT_WELCOME' | translate}} +
+ +
+ +
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ {{'CHAT_USERS_LIST' | translate}} +
+ +
+ +
+ +
+ +
+ +
+
+
diff --git a/modules/core/client/app/trans-string-en.js b/modules/core/client/app/trans-string-en.js index 53c589ba..0e305fd6 100644 --- a/modules/core/client/app/trans-string-en.js +++ b/modules/core/client/app/trans-string-en.js @@ -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 MIT open source protocol', GIT_REPO: 'Power by ©meanTottent，view on GitHub', diff --git a/modules/core/client/app/trans-string-zh.js b/modules/core/client/app/trans-string-zh.js index c4ca520d..c9142093 100644 --- a/modules/core/client/app/trans-string-zh.js +++ b/modules/core/client/app/trans-string-zh.js @@ -282,6 +282,10 @@ RESET_PASSKEY_SUCCESSFULLY: 'Passkey 重置成功', RESET_PASSKEY_ERROR: 'Passkey 重置失败', + //chat view + CHAT_USERS_LIST: '用户列表', + CHAT_WELCOME: '欢迎进入聊天室，请注意自已的言行，共同维护良好的聊天环境！', + //footer view MIT_PROTOCOL: '本项目源码受 MIT 开源协议保护', GIT_REPO: 'Power by ©meanTottent，GitHub 源码仓库', diff --git a/modules/core/client/views/footer.client.view.html b/modules/core/client/views/footer.client.view.html index cba22ba7..f7fdaa84 100644 --- a/modules/core/client/views/footer.client.view.html +++ b/modules/core/client/views/footer.client.view.html @@ -1,4 +1,4 @@ -
+