github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-10 17:33:42 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: admin flags needed some ❤️

Browse Source
This commit is contained in:
Régis Hanol
2016-06-22 16:32:50 +02:00
parent 2ecd0da59f
commit fc9cfd698d
2 changed files with 136 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
app/assets/javascripts/admin/templates/flags-list.hbs
View File

@ -1,150 +1,154 @@
{{#if model.length}} {{#if model.length}}
{{#load-more tagName="table" className="admin-flags" selector="tbody tr" action="loadMore"}} {{#load-more selector="tbody tr" action="loadMore"}}
<thead> <table class="admin-flags">
<tr> <thead>
<th class='user'></th> <tr>
<th class='excerpt'></th> <th class='user'></th>
<th class='flaggers'>{{i18n 'admin.flags.flagged_by'}}</th> <th class='excerpt'></th>
<th class='flaggers'>{{#if adminOldFlagsView}}{{i18n 'admin.flags.resolved_by'}}{{/if}}</th> <th class='flaggers'>{{i18n 'admin.flags.flagged_by'}}</th>
</tr> <th class='flaggers'>{{#if adminOldFlagsView}}{{i18n 'admin.flags.resolved_by'}}{{/if}}</th>
</thead> </tr>
<tbody> </thead>
{{#each content as |flaggedPost|}} <tbody>
<tr class={{flaggedPost.extraClasses}}> {{#each content as |flaggedPost|}}
<tr class={{flaggedPost.extraClasses}}>
<td class='user'> <td class='user'>
{{#if flaggedPost.postAuthorFlagged}} {{#if flaggedPost.postAuthorFlagged}}
{{#if flaggedPost.user}} {{#if flaggedPost.user}}
{{#link-to 'adminUser' flaggedPost.user}}{{avatar flaggedPost.user imageSize="small"}}{{/link-to}} {{#link-to 'adminUser' flaggedPost.user}}{{avatar flaggedPost.user imageSize="large"}}{{/link-to}}
{{#if flaggedPost.wasEdited}}<i class="fa fa-pencil" title="{{i18n 'admin.flags.was_edited'}}"></i>{{/if}} {{#if flaggedPost.wasEdited}}<i class="fa fa-pencil" title="{{i18n 'admin.flags.was_edited'}}"></i>{{/if}}
{{/if}}
{{/if}} {{/if}}
{{/if}} {{#if adminActiveFlagsView}}
{{#if adminActiveFlagsView}} {{#if flaggedPost.previous_flags_count}}
{{#if flaggedPost.previous_flags_count}} <span title="{{i18n 'admin.flags.previous_flags_count' count=flaggedPost.previous_flags_count}}" class="badge-notification flagged-posts">{{flaggedPost.previous_flags_count}}</span>
<span title="{{i18n 'admin.flags.previous_flags_count' count=flaggedPost.previous_flags_count}}" class="badge-notification flagged-posts">{{flaggedPost.previous_flags_count}}</span> {{/if}}
{{/if}} {{/if}}
{{/if}} </td>
</td>
<td class='excerpt'> <td class='excerpt'>
<h3> <h3>
{{#if flaggedPost.topic.isPrivateMessage}} {{#if flaggedPost.topic.isPrivateMessage}}
<span class="private-message-glyph">{{fa-icon "envelope"}}</span> <span class="private-message-glyph">{{fa-icon "envelope"}}</span>
{{/if}}
{{topic-status topic=flaggedPost.topic}}
<a href='{{unbound flaggedPost.url}}'>{{{unbound flaggedPost.topic.fancyTitle}}}</a>
</h3>
{{#if flaggedPost.postAuthorFlagged}}
<p>{{{flaggedPost.excerpt}}}</p>
{{/if}} {{/if}}
{{topic-status topic=flaggedPost.topic}} </td>
<a href='{{unbound flaggedPost.url}}'>{{{unbound flaggedPost.topic.fancyTitle}}}</a>
</h3>
{{#if flaggedPost.postAuthorFlagged}}
{{{flaggedPost.excerpt}}}
{{/if}}
</td>
<td class='flaggers'> <td class='flaggers'>
<table>
<tbody>
{{#each flaggedPost.flaggers as |flagger|}}
<tr>
<td class='avatar'>
{{#link-to 'adminUser' flagger.user}}
{{avatar flagger.user imageSize="small"}}
{{/link-to}}
</td>
<td>
{{#link-to 'adminUser' flagger.user}}
{{flagger.user.username}}
{{/link-to}}
{{format-age flagger.flaggedAt}}
<br />
{{flagger.flagType}}
</td>
</tr>
{{/each}}
</tbody>
</table>
</td>
<td class='flaggers result'>
{{#if adminOldFlagsView}}
<table> <table>
<tbody> <tbody>
{{#each flaggedPost.flaggers as |flagger|}} {{#each flaggedPost.flaggers as |flagger|}}
<tr> <tr>
<td class='avatar'> <td class='avatar'>
{{#link-to 'adminUser' flagger.disposedBy}} {{#link-to 'adminUser' flagger.user}}
{{avatar flagger.disposedBy imageSize="small"}} {{avatar flagger.user imageSize="medium"}}
{{/link-to}} {{/link-to}}
</td> </td>
<td> <td>
{{format-age flagger.disposedAt}} {{#link-to 'adminUser' flagger.user}}
{{{flagger.dispositionIcon}}} {{flagger.user.username}}
{{#if flagger.tookAction}} {{/link-to}}
<i class='fa fa-gavel' title='{{i18n 'admin.flags.took_action'}}'></i> {{format-age flagger.flaggedAt}}
{{/if}} <br />
{{flagger.flagType}}
</td> </td>
</tr> </tr>
{{/each}} {{/each}}
</tbody> </tbody>
</table> </table>
{{/if}}
</td>
</tr>
{{#if flaggedPost.topicFlagged}}
<tr class='message'>
<td></td>
<td colspan="3">
<div>
{{{i18n 'admin.flags.topic_flagged'}}}&nbsp;<a href='{{unbound flaggedPost.url}}' class="btn">{{i18n 'admin.flags.visit_topic'}}</a>
</div>
</td> </td>
</tr>
{{/if}}
{{#each flaggedPost.conversations as |c|}} <td class='flaggers result'>
<tr class='message'> {{#if adminOldFlagsView}}
<td></td> <table>
<td colspan="3"> <tbody>
<div> {{#each flaggedPost.flaggers as |flagger|}}
{{#if c.response}} <tr>
<p> <td class='avatar'>
{{#link-to 'adminUser' c.response.user}}{{avatar c.response.user imageSize="small"}}{{/link-to}}&nbsp;{{{c.response.excerpt}}} {{#link-to 'adminUser' flagger.disposedBy}}
</p> {{avatar flagger.disposedBy imageSize="medium"}}
{{#if c.reply}} {{/link-to}}
</td>
<td>
{{format-age flagger.disposedAt}}
{{{flagger.dispositionIcon}}}
{{#if flagger.tookAction}}
<i class='fa fa-gavel' title='{{i18n 'admin.flags.took_action'}}'></i>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
</table>
{{/if}}
</td>
</tr>
{{#if flaggedPost.topicFlagged}}
<tr class='message'>
<td></td>
<td colspan="3">
<div>
{{{i18n 'admin.flags.topic_flagged'}}}&nbsp;<a href='{{unbound flaggedPost.url}}' class="btn">{{i18n 'admin.flags.visit_topic'}}</a>
</div>
</td>
</tr>
{{/if}}
{{#each flaggedPost.conversations as |c|}}
<tr class='message'>
<td></td>
<td colspan="3">
<div>
{{#if c.response}}
<p> <p>
{{#link-to 'adminUser' c.reply.user}}{{avatar c.reply.user imageSize="small"}}{{/link-to}}&nbsp;{{{c.reply.excerpt}}} {{#link-to 'adminUser' c.response.user}}{{avatar c.response.user imageSize="medium"}}{{/link-to}}&nbsp;{{{c.response.excerpt}}}
{{#if c.hasMore}}
<a href="{{unbound c.permalink}}">{{i18n 'admin.flags.more'}}</a>
{{/if}}
</p> </p>
{{#if c.reply}}
<p>
{{#link-to 'adminUser' c.reply.user}}{{avatar c.reply.user imageSize="medium"}}{{/link-to}}&nbsp;{{{c.reply.excerpt}}}
{{#if c.hasMore}}
<a href="{{unbound c.permalink}}">{{i18n 'admin.flags.more'}}</a>
{{/if}}
</p>
{{/if}}
<a href="{{unbound c.permalink}}">
<button class='btn btn-reply'><i class="fa fa-reply"></i>&nbsp;{{i18n 'admin.flags.reply_message'}}</button>
</a>
{{/if}} {{/if}}
<a href="{{unbound c.permalink}}"> </div>
<button class='btn btn-reply'><i class="fa fa-reply"></i>&nbsp;{{i18n 'admin.flags.reply_message'}}</button> </td>
</a> </tr>
{{/each}}
{{#unless adminOldFlagsView}}
<tr>
<td colspan="4" class="action">
{{#if adminActiveFlagsView}}
<button title='{{i18n 'admin.flags.agree_title'}}' class='btn' {{action "showAgreeFlagModal" flaggedPost}}><i class="fa fa-thumbs-o-up"></i>{{i18n 'admin.flags.agree'}}&hellip;</button>
{{#if flaggedPost.postHidden}}
<button title='{{i18n 'admin.flags.disagree_flag_unhide_post_title'}}' class='btn' {{action "disagreeFlags" flaggedPost}}><i class="fa fa-thumbs-o-down"></i>{{i18n 'admin.flags.disagree_flag_unhide_post'}}</button>
{{else}}
<button title='{{i18n 'admin.flags.disagree_flag_title'}}' class='btn' {{action "disagreeFlags" flaggedPost}}><i class="fa fa-thumbs-o-down"></i>{{i18n 'admin.flags.disagree_flag'}}</button>
{{/if}}
<button title='{{i18n 'admin.flags.defer_flag_title'}}' class='btn' {{action "deferFlags" flaggedPost}}><i class="fa fa-external-link"></i>{{i18n 'admin.flags.defer_flag'}}</button>
<button title='{{i18n 'admin.flags.delete_title'}}' class='btn btn-danger' {{action "showDeleteFlagModal" flaggedPost}}><i class="fa fa-trash-o"></i>{{i18n 'admin.flags.delete'}}&hellip;</button>
{{/if}} {{/if}}
</div> </td>
</td> </tr>
</tr> {{/unless}}
{{/each}} {{/each}}
<tr> </tbody>
<td colspan="4" class="action"> </table>
{{#if adminActiveFlagsView}}
<button title='{{i18n 'admin.flags.agree_title'}}' class='btn' {{action "showAgreeFlagModal" flaggedPost}}><i class="fa fa-thumbs-o-up"></i>{{i18n 'admin.flags.agree'}}&hellip;</button>
{{#if flaggedPost.postHidden}}
<button title='{{i18n 'admin.flags.disagree_flag_unhide_post_title'}}' class='btn' {{action "disagreeFlags" flaggedPost}}><i class="fa fa-thumbs-o-down"></i>{{i18n 'admin.flags.disagree_flag_unhide_post'}}</button>
{{else}}
<button title='{{i18n 'admin.flags.disagree_flag_title'}}' class='btn' {{action "disagreeFlags" flaggedPost}}><i class="fa fa-thumbs-o-down"></i>{{i18n 'admin.flags.disagree_flag'}}</button>
{{/if}}
<button title='{{i18n 'admin.flags.defer_flag_title'}}' class='btn' {{action "deferFlags" flaggedPost}}><i class="fa fa-external-link"></i>{{i18n 'admin.flags.defer_flag'}}</button>
<button title='{{i18n 'admin.flags.delete_title'}}' class='btn btn-danger' {{action "showDeleteFlagModal" flaggedPost}}><i class="fa fa-trash-o"></i>{{i18n 'admin.flags.delete'}}&hellip;</button>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
{{/load-more}} {{/load-more}}
{{else}} {{else}}

50
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -818,24 +818,21 @@ section.details {
} }
} }
.admin-flags { .admin-flags {
table-layout: fixed; .hidden-post td.excerpt,
.hidden-post td.user {
opacity: 0.5;
}
.deleted td.excerpt,
.deleted td.user {
background-color: scale-color($danger, $lightness: 70%);
}
.hidden-post td.excerpt, .hidden-post td.user { opacity: 0.5; }
.deleted td.excerpt, .deleted td.user { background-color: scale-color($danger, $lightness: 70%); }
.message { background-color: dark-light-diff($highlight, $secondary, 50%, -70%); } .message { background-color: dark-light-diff($highlight, $secondary, 50%, -70%); }
.message:hover { background-color: dark-light-diff($highlight, $secondary, 60%, -60%); } .message:hover { background-color: dark-light-diff($highlight, $secondary, 60%, -60%); }
td { vertical-align: top; }
th { text-align: left; }
.user {
width: 25px;
padding: 8px 0 0 0;
text-align: center;
}
.excerpt { .excerpt {
max-width: 700px;
width: 75%;
padding: 8px; padding: 8px;
word-wrap: break-word; word-wrap: break-word;
.fa { display: inline-block; } .fa { display: inline-block; }
@ -846,34 +843,13 @@ section.details {
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
.flaggers {
font-size: 11px; .flagged-posts { background: $danger; }
padding: 8px 0 0 5px;
.avatar {
width: 25px;
}
table {
max-width: 145px;
}
tr {
height: 44px;
}
td {
vertical-align: middle;
padding: 3px;
line-height: 1.4;
}
}
.action { .action {
button { margin: 4px; } button { margin: 4px; }
text-align: right; text-align: right;
padding-bottom: 20px;
} }
td p {
font-size: 0.929em;
margin: 0 0 5px 0;
}
.flagged-posts { background: $danger; }
} }
/* Dashboard */ /* Dashboard */