Nemcio/meanTorrent
1
0
Fork 0
mirror of https://github.com/taobataoma/meanTorrent.git synced 2026-05-07 16:57:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

add chat message font color style select function

Browse Source
This commit is contained in:
OldHawk
2017-05-14 18:42:26 +08:00
parent 2f27dc0267
commit b7f87be94e
7 changed files with 116 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
modules/chat/client/controllers/chat.client.controller.js
View File

@@ -17,6 +17,27 @@
vm.messageText = '';
vm.scrollAtBottom = true;
vm.selectedFontColor = '#000';
vm.fontColorPopover = {
templateUrl: 'fontColor.html',
isOpen: false
};
vm.colorList = [
'#000000',
'#000080',
'#0000FF',
'#00CC00',
'#008000',
'#008080',
'#800000',
'#800080',
'#808000',
'#DC143C',
'#FF1493',
'#FF4500'
];
init();
/**
@@ -144,7 +165,8 @@
vm.sendMessage = function () {
// Create a new message object
var message = {
text: sanitizeHTML(vm.messageText)
text: sanitizeHTML(vm.messageText),
fontColor: vm.selectedFontColor
};
// Emit a 'chatMessage' message event
@@ -298,6 +320,10 @@
newmsg = newmsg.replace(m, atulink);
});
if (msg.fontColor) {
newmsg = '<font color="' + msg.fontColor + '">' + newmsg + '</font>'
}
return newmsg || '&nbsp;';
};
@@ -387,5 +413,36 @@
Socket.emit('ban', message);
});
};
/**
* onColorItemClicked
* @param c
*/
vm.onColorItemClicked = function (c) {
angular.element('#font-color-icon').css('color', c);
angular.element('#messageText').css('color', c);
vm.fontColorPopover.isOpen = false;
vm.selectedFontColor = c;
angular.element('#messageText').trigger('focus');
};
/**
* onColorItemMouseEnter
* @param c
*/
vm.onColorItemMouseEnter = function (c) {
angular.element('#font-color-icon').css('color', c);
angular.element('#messageText').css('color', c);
};
/**
* onColorItemMouseLeave
* @param c
*/
vm.onColorItemMouseLeave = function (c) {
angular.element('#font-color-icon').css('color', vm.selectedFontColor);
angular.element('#messageText').css('color', vm.selectedFontColor);
};
}
}());

28
modules/chat/client/less/chat.less
View File

@@ -139,14 +139,14 @@
display: inline-block;
.chat-message-item {
position: relative;
border: 1px solid @chat-message-me-border;
border: 1px solid lighten(@chat-message-me-border, 15%);
border-radius: 3px;
&:after {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 0 6px 6px;
border-color: transparent @chat-message-me-background;
border-color: transparent lighten(@chat-message-me-background, 30%);
display: block;
width: 0;
z-index: 1;
@@ -158,7 +158,7 @@
position: absolute;
border-style: solid;
border-width: 6px 0 6px 6px;
border-color: transparent @chat-message-me-border;
border-color: transparent lighten(@chat-message-me-border, 15%);
display: block;
width: 0;
z-index: 0;
@@ -168,7 +168,7 @@
.chat-message-body {
text-align: left;
padding: 6px;
background-color: @chat-message-me-background;
background-color: lighten(@chat-message-me-background, 30%);
border-radius: 3px;
}
}
@@ -307,4 +307,22 @@
}
}
}
}
}
.font-color-popover {
max-width: 150px;
max-height: 130px;
width: auto;
height: auto;
}
.color-list {
margin: 4px -14px -12px -7px;
.color-item {
cursor: pointer;
width: 30px;
height: 30px;
margin-top: -6px;
margin-right: 4px;
}
}

29
modules/chat/client/views/chat.client.view.html
View File

@@ -9,7 +9,8 @@
<div class="chat-body" id="chat-body" mt-scroll="vm.onMessageScroll($event);">
<ul class="list-unstyled">
<li class="chat-message-list {{message.type}}" ng-class="{'me': (message.user.username == vm.user.username) && (message.type == 'message')}"
<li class="chat-message-list {{message.type}}"
ng-class="{'me': (message.user.username == vm.user.username) && (message.type == 'message')}"
ng-repeat="message in vm.messages" repeat-done="vm.onMessageRepeatDone();">
<div ng-class="(message.user.username == vm.user.username) && (message.type == 'message') ? 'chat-message-header-me' : 'chat-message-header'">
<div class="chat-message-header-text">{{message.user.displayName}}　{{message.created | date:'MM-dd HH:mm'}}
@@ -44,6 +45,16 @@
<input type="checkbox" ng-model="vm.fontStyleItalic"> <i>{{'CHAT_FONT_ITALIC' | translate}}</i>
</label>
</div>
<div class="pull-right margin-right-20">
<span class="glyphicon glyphicon-text-color"
style="color: {{vm.selectedFontColor}}"
id="font-color-icon"
title="{{'CHAT_FONT_COLOR' | translate}}" aria-hidden="true"
uib-popover-template="vm.fontColorPopover.templateUrl"
popover-trigger="'outsideClick'"
popover-placement="top" popover-is-open="vm.fontColorPopover.isOpen"
popover-class="font-color-popover"></span>
</div>
</div>
<div class="footer-input">
<textarea class="form-control" id="messageText" name="messageText" ng-model="vm.messageText"
@@ -75,7 +86,8 @@
ng-class="{'user-is-admin': u.isAdmin, 'user-is-oper': !u.isAdmin && u.isOper, 'user-is-vip': u.isVip}"
ng-bind="u.displayName"></div>
<span class="glyphicon glyphicon-flash ban-kick" title="{{'CHAT_BAN_KICK' | translate}}" aria-hidden="true"
ng-click="vm.banKickUser(u);" ng-show="vm.user.isOper && !u.isOper && u.username != vm.user.username"></span>
ng-click="vm.banKickUser(u);"
ng-show="vm.user.isOper && !u.isOper && u.username != vm.user.username"></span>
</div>
</div>
</li>
@@ -84,4 +96,17 @@
</div>
</div>
</div>
<script type="text/ng-template" id="fontColor.html">
<div class="color-list">
<label ng-repeat="c in vm.colorList">
<div style="background-color: {{c}}" class="color-item" mt-scale="{scale: 1.2, duration: '.5s'}"
ng-click="vm.onColorItemClicked(c);"
ng-mouseenter="vm.onColorItemMouseEnter(c);"
ng-mouseleave="vm.onColorItemMouseLeave(c);"></div>
</label>
</div>
</script>
</section>

1
modules/core/client/app/trans-string-en.js
View File

@@ -303,6 +303,7 @@
CHAT_CONFIRM_BAN_HEADER_TEXT: 'Ban & Kick Confirm',
CHAT_CONFIRM_BAN_BODY_TEXT: 'Are you sure want to kick this user and ban the ip?',
CHAT_DISCONNECT: 'disconnect from server, please check your network or chat server is down',
CHAT_FONT_COLOR: 'Font color',
//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',

1
modules/core/client/app/trans-string-zh.js
View File

@@ -303,6 +303,7 @@
CHAT_CONFIRM_BAN_HEADER_TEXT: '踢出确认',
CHAT_CONFIRM_BAN_BODY_TEXT: '你确定要把该用户踢出聊天室并禁止他的ip登录吗?',
CHAT_DISCONNECT: '已与服务器断开连接，请检查网络或聊天服务器已关闭',
CHAT_FONT_COLOR: '字体颜色',
//footer view
MIT_PROTOCOL: '本项目源码受 <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a> 开源协议保护',

11
modules/core/client/directives/mt-scale.client.directive.js
View File

@@ -13,16 +13,17 @@
return directive;
function link(scope, element, attrs) {
if (attrs.mtScale) {
scope.$watch(attrs.mtScale, function (s) {
var mtScale = JSON.parse(JSON.stringify(eval('(' + attrs.mtScale + ')')));
console.log(mtScale);
element.css('transition-property', 'transform, opacity');
console.log('mtScale.duration=' + mtScale['duration']);
console.log('mtScale.duration=' + mtScale.duration);
element.css('transition-duration', mtScale.duration || '.5s');
console.log('mtScale.function=' + mtScale.function);
element.css('transition-timing-function', mtScale.function || 'ease');
console.log('mtScale.scale=' + mtScale.scale);
element.on('mouseenter', function () {
element.css('transform', 'scale(' + (mtScale.scale || 1.1) + ')');
});
@@ -30,7 +31,7 @@
element.css('transform', 'scale(1)');
});
}
});
}
}
}());

30
modules/core/client/less/popover.less
View File

@@ -1,30 +0,0 @@
@import (reference) "../../../core/client/less/mt-var.less";
.popover {
width: 300px;
max-width: none;
}
.popover-200 .popover {
width: 200px;
max-width: none;
}
.popover-150 .popover {
width: 150px;
max-width: none;
}
.popover-400 .popover {
width: 400px;
max-width: none;
}
.popover-500 .popover {
width: 500px;
max-width: none;
}
.popover-600 .popover {
width: 600px;
max-width: none;
}
.popover-800 .popover {
width: 800px;
max-width: none;
}