feat(messages): new css style for official message center

This commit is contained in:
OldHawk
2018-04-28 12:05:13 +08:00
parent 04c5dbf2f1
commit 40a34c49a6
4 changed files with 42 additions and 20 deletions

View File

@@ -1012,9 +1012,11 @@
MESSAGES_BOX: 'Messages Box',
MESSAGES_SEND: 'Send Messages',
ADMIN_MESSAGES_SEND: 'Send System Messages',
ADMIN_MESSAGES_ALREADY_SEND: 'Sended System Messages',
MESSAGES_SEND_BUTTON: 'Send',
MESSAGES_IS_LOADING: 'Loading messages, please wait ...',
MESSAGES_IS_EMPTY: 'Messages Box is empty!',
OFFICIAL_MESSAGES_TOOLTIP: '<h4>Tip:</h4>In order to maintain a clean list of official messages, please delete messages that have expired over time as they cannot be unilaterally cleared in the users message center.',
MESSAGES_FIELD: {
TO: 'Send to:',
TYPE: 'Message type:',

View File

@@ -1012,9 +1012,11 @@
MESSAGES_BOX: '站内消息',
MESSAGES_SEND: '发送消息',
ADMIN_MESSAGES_SEND: '发送系统消息',
ADMIN_MESSAGES_ALREADY_SEND: '已经发送的系统消息',
MESSAGES_SEND_BUTTON: '发送',
MESSAGES_IS_LOADING: '正在装载, 请稍候 ...',
MESSAGES_IS_EMPTY: '消息列表为空!',
OFFICIAL_MESSAGES_TOOLTIP: '<h4>提示:</h4>为了维护一个干净的官方消息列表,请及时将长时间过期的消息删除,因为这些消息在用户的消息中心里不能被单方面清理。',
MESSAGES_FIELD: {
TO: '发送至:',
TYPE: '消息类型:',

View File

@@ -85,7 +85,6 @@
font-size: 18px;
margin: 5px 0;
width: max-content;
border-bottom: double #aaa;
}
.message-info {
font-size: 12px;
@@ -117,6 +116,10 @@
.message-content {
word-break: normal;
}
.message-content-admin {
color: #6A6A6A;
word-break: normal;
}
}
.popup-side-overlay {

View File

@@ -1,13 +1,14 @@
<section class="container" ng-controller="AdminMessageController as vm" ng-init="vm.getAdminMessages();">
<div class="row margin-top-50">
<div class="col-md-10 col-md-offset-1">
<div class="col-xs-12">
<div class="margin-bottom-20">
<h4>{{'ADMIN_MESSAGES_SEND' | translate}}</h4>
<h3>{{'ADMIN_MESSAGES_SEND' | translate}}</h3>
<li class="status-divider"></li>
</div>
</div>
<div class="margin-bottom-20">
<div class="col-md-10 col-md-offset-1">
<div class="margin-bottom-20 margin-top-20">
<form name="vm.messageForm" ng-submit="vm.sendMessage(vm.messageForm.$valid)" novalidate autocomplete="off">
<dl class="dl-horizontal">
<div class="margin-bottom-10 form-group">
@@ -24,7 +25,8 @@
<div class="margin-bottom-10 form-group" show-errors>
<dt class="h-line">{{ 'MESSAGES_FIELD.TITLE' | translate}}</dt>
<dd class="h-line">
<input type="text" class="form-control" id="title" name="title" maxlength="{{vm.inputLengthConfig.messageTitleLength}}"
<input type="text" class="form-control" id="title" name="title"
maxlength="{{vm.inputLengthConfig.messageTitleLength}}"
ng-model="vm.messageFields.title" autofocus required>
<div ng-messages="vm.messageForm.title.$error" role="alert">
@@ -36,8 +38,10 @@
<div class="margin-bottom-10 form-group" show-errors>
<dt class="h-line">{{ 'MESSAGES_FIELD.CONTENT' | translate}}</dt>
<dd class="h-line">
<textarea id="messageContent" name="messageContent" class="form-control message-textarea" ng-model="vm.messageFields.content"
mt-markdown-editor="messageContent" maxlength="{{vm.inputLengthConfig.messageBoxContentLength}}" required></textarea>
<textarea id="messageContent" name="messageContent" class="form-control message-textarea"
ng-model="vm.messageFields.content"
mt-markdown-editor="messageContent" maxlength="{{vm.inputLengthConfig.messageBoxContentLength}}"
required></textarea>
<div ng-messages="vm.messageForm.messageContent.$error" role="alert">
<p class="help-block error-text" ng-message="required">{{ 'MESSAGES_FIELD.CT_REQUIRED' | translate}}</p>
@@ -70,40 +74,51 @@
</div>
<div class="row margin-top-50 margin-bottom-50">
<div class="col-md-12">
<div class="col-xs-12">
<div class="margin-bottom-20">
<h3>{{'ADMIN_MESSAGES_ALREADY_SEND' | translate}}</h3>
<li class="status-divider"></li>
</div>
</div>
<div class="col-xs-12 margin-top-10">
<div class="alert alert-warning" role="alert" style="padding: 20px 50px;">
<span translate="OFFICIAL_MESSAGES_TOOLTIP"></span>
</div>
</div>
<div class="col-md-12 margin-top-20">
<div class="table-responsive" ng-if="vm.adminMessages.length">
<table class="table table-hover tb-v-middle">
<table class="table table-hover tb-v-middle top-border">
<thead>
<tr>
<th>{{ 'MESSAGES_FIELD.LIST_TITLE_CONTENT' | translate}}</th>
<th class="text-center">{{ 'MESSAGES_FIELD.LIST_READERS' | translate}}</th>
<th class="text-center">{{ 'MESSAGES_FIELD.LIST_TYPE' | translate}}</th>
<th class="text-center">{{ 'MESSAGES_FIELD.LIST_SENDAT' | translate}}</th>
<!--<th class="text-center">{{ 'MESSAGES_FIELD.LIST_SENDAT' | translate}}</th>-->
<th class="text-center">{{ 'MESSAGES_FIELD.LIST_SELECT' | translate}}</th>
</tr>
</thead>
<tbody>
<tr class="message-item" ng-repeat="m in vm.adminMessages">
<td>
<div class="message-title-admin text-long"><span ng-bind="m.title"></span></div>
<td class="col-md-8 width-400">
<div class="message-title-admin text-long"><h4 ng-bind="m.title"></h4></div>
<p class="message-content" ng-bind-html="vm.getContentMarked(m);"></p>
<p class="message-content-admin" ng-bind-html="vm.getContentMarked(m);"></p>
<p class="message-info">
<span user-info="m.from_user"
info-name></span> {{'MESSAGES_FIELD.INFO_SEND_AT' | translate}} {{m.createdat | date: 'yyyy-MM-dd HH:mm:ss' }}
</p>
</td>
<td class="td-v-middle text-center">
<td class="col-md-1 td-v-middle text-center width-70">
<span ng-class="vm.getMessageClass(m);">{{m._readers.length}}</span>
</td>
<td class="td-v-middle text-center">
<td class="col-md-2 td-v-middle text-center width-140">
<span ng-class="vm.getMessageClass(m);">{{'MESSAGE_TYPE_' + m.type.toUpperCase() | translate}}</span>
</td>
<td class="td-v-middle text-center">
<span ng-class="vm.getMessageClass(m);">{{m.createdat | life}}</span>
</td>
<td class="td-v-middle text-center">
<!--<td class="col-md-1 td-v-middle text-center width-80">-->
<!--<span ng-class="vm.getMessageClass(m);">{{m.createdat | life}}</span>-->
<!--</td>-->
<td class="col-md-1 td-v-middle text-center width-70">
<input type="checkbox" class="tcheckbox" ng-model="vm.selected[m._id]"
id="checkbox_{{m._id}}">
</label>