diff --git a/app/assets/javascripts/admin/components/flagged-post-response.js.es6 b/app/assets/javascripts/admin/components/flagged-post-response.js.es6 new file mode 100644 index 00000000000..e031f33e031 --- /dev/null +++ b/app/assets/javascripts/admin/components/flagged-post-response.js.es6 @@ -0,0 +1,3 @@ +export default Ember.Component.extend({ + classNames: ['flagged-post-response'] +}); diff --git a/app/assets/javascripts/admin/components/flagged-post.js.es6 b/app/assets/javascripts/admin/components/flagged-post.js.es6 index c798bb3ae7b..4623c17e59c 100644 --- a/app/assets/javascripts/admin/components/flagged-post.js.es6 +++ b/app/assets/javascripts/admin/components/flagged-post.js.es6 @@ -1,7 +1,12 @@ import showModal from 'discourse/lib/show-modal'; export default Ember.Component.extend({ - tagName: '', + tagName: 'div', + classNameBindings: [ + ':flagged-post', + 'flaggedPost.hidden:hidden-post', + 'flaggedPost.deleted' + ], removeAfter(promise) { return promise.then(() => { diff --git a/app/assets/javascripts/admin/models/flagged-post.js.es6 b/app/assets/javascripts/admin/models/flagged-post.js.es6 index b2198e75ca4..14af903c220 100644 --- a/app/assets/javascripts/admin/models/flagged-post.js.es6 +++ b/app/assets/javascripts/admin/models/flagged-post.js.es6 @@ -134,15 +134,7 @@ const FlaggedPost = Post.extend({ postHidden: Ember.computed.alias('hidden'), - @computed - extraClasses() { - let classes = []; - if (this.get('hidden')) { classes.push('hidden-post'); } - if (this.get('deleted')) { classes.push('deleted'); } - return classes.join(' '); - }, - - deleted: Ember.computed.or('deleted_at', 'topic_deleted_at') + deleted: Ember.computed.or('deleted_at', 'topic_deleted_at'), }); FlaggedPost.reopenClass({ diff --git a/app/assets/javascripts/admin/templates/components/flagged-post-response.hbs b/app/assets/javascripts/admin/templates/components/flagged-post-response.hbs new file mode 100644 index 00000000000..1cac2cc51be --- /dev/null +++ b/app/assets/javascripts/admin/templates/components/flagged-post-response.hbs @@ -0,0 +1,7 @@ +{{#link-to 'adminUser' response.user class="response-avatar"}} + {{avatar response.user imageSize="medium"}} +{{/link-to}} +
{{{response.excerpt}}}
+{{#if hasMore}} + {{i18n 'admin.flags.more'}} +{{/if}} diff --git a/app/assets/javascripts/admin/templates/components/flagged-post.hbs b/app/assets/javascripts/admin/templates/components/flagged-post.hbs index 69a9a302c82..2f20803255a 100644 --- a/app/assets/javascripts/admin/templates/components/flagged-post.hbs +++ b/app/assets/javascripts/admin/templates/components/flagged-post.hbs @@ -1,175 +1,144 @@ - - -
-
- {{#if flaggedPost.postAuthorFlagged}} - {{#if flaggedPost.user}} - {{#link-to 'adminUser' flaggedPost.user}}{{avatar flaggedPost.user imageSize="large"}}{{/link-to}} - {{#if flaggedPost.wasEdited}} - {{d-icon "pencil" title="admin.flags.was_edited"}} - {{/if}} - {{/if}} +
+
+ {{#if flaggedPost.postAuthorFlagged}} + {{#if flaggedPost.user}} + {{#link-to 'adminUser' flaggedPost.user}}{{avatar flaggedPost.user imageSize="large"}}{{/link-to}} + {{#if flaggedPost.wasEdited}} + {{d-icon "pencil" title="admin.flags.was_edited"}} {{/if}} - {{#if canAct}} - {{#if flaggedPost.previous_flags_count}} - {{flaggedPost.previous_flags_count}} - {{/if}} - {{/if}} -
-
- {{#unless hideTitle}} -

- {{#if flaggedPost.topic.isPrivateMessage}} - {{d-icon "envelope"}} - {{/if}} - {{topic-status topic=flaggedPost.topic}} - {{{unbound flaggedPost.topic.fancyTitle}}} -

- {{/unless}} - {{#unless site.mobileView}} - {{#if flaggedPost.postAuthorFlagged}} -

{{{flaggedPost.excerpt}}}

- {{/if}} - {{/unless}} -
-
- - {{#if site.mobileView}} - {{#if flaggedPost.postAuthorFlagged}} -

{{{flaggedPost.excerpt}}}

{{/if}} {{/if}} - - - - - - {{#each flaggedPost.flaggers as |flagger|}} - - - - - {{/each}} - -
- {{#link-to 'adminUser' flagger.user class='flagger'}} - {{avatar flagger.user imageSize="medium"}} - {{/link-to}} - - {{#link-to 'adminUser' flagger.user}} - {{flagger.user.username}} - {{/link-to}} - {{format-age flagger.flaggedAt}} -
- {{flagger.flagType}} -
- - - - {{#if showResolvedBy}} - - - {{#each flaggedPost.flaggers as |flagger|}} - - - - - {{/each}} - -
- {{#link-to 'adminUser' flagger.disposedBy}} - {{avatar flagger.disposedBy imageSize="medium"}} - {{/link-to}} - - {{format-age flagger.disposedAt}} - {{{flagger.dispositionIcon}}} - {{#if flagger.tookAction}} - {{d-icon "gavel" title="admin.flags.took_action"}} - {{/if}} -
+ {{#if canAct}} + {{#if flaggedPost.previous_flags_count}} + {{flaggedPost.previous_flags_count}} + {{/if}} {{/if}} - +
- +
+ {{#unless hideTitle}} +

+ {{#if flaggedPost.topic.isPrivateMessage}} + {{d-icon "envelope"}} + {{/if}} + {{topic-status topic=flaggedPost.topic}} + {{{unbound flaggedPost.topic.fancyTitle}}} +

+ {{/unless}} + {{#if flaggedPost.postAuthorFlagged}} +

{{{flaggedPost.excerpt}}}

+ {{/if}} +
+ +
+ {{#if site.mobileView}} +
+ {{i18n 'admin.flags.flagged_by'}} +
+ {{/if}} + + {{#each flaggedPost.flaggers as |flagger|}} +
+ {{#link-to 'adminUser' flagger.user class='flagger-avatar'}} + {{avatar flagger.user imageSize="medium"}} + {{/link-to}} +
+
+ {{#link-to 'adminUser' flagger.user}} + {{flagger.user.username}} + {{/link-to}} +
+
+ {{format-age flagger.flaggedAt}} +
+
+ {{flagger.flagType}} +
+
+
+ {{/each}} +
+ + {{#if showResolvedBy}} +
+ {{#each flaggedPost.flaggers as |flagger|}} +
+ {{#link-to 'adminUser' flagger.disposedBy class="disposer-avatar"}} + {{avatar flagger.disposedBy imageSize="medium"}} + {{/link-to}} +
+ {{format-age flagger.disposedAt}} + {{{flagger.dispositionIcon}}} + {{#if flagger.tookAction}} + {{d-icon "gavel" title="admin.flags.took_action"}} + {{/if}} +
+
+ {{/each}} +
+ {{/if}} +
{{#if flaggedPost.topicFlagged}} - - -
- {{{i18n 'admin.flags.topic_flagged'}}} {{i18n 'admin.flags.visit_topic'}} -
- - +
+ {{{i18n 'admin.flags.topic_flagged'}}} + {{i18n 'admin.flags.visit_topic'}} +
{{/if}} {{#each flaggedPost.conversations as |c|}} - - -
- {{#if c.response}} -

- {{#link-to 'adminUser' c.response.user}}{{avatar c.response.user imageSize="medium"}}{{/link-to}} {{{c.response.excerpt}}} -

- {{#if c.reply}} -

- {{#link-to 'adminUser' c.reply.user}}{{avatar c.reply.user imageSize="medium"}}{{/link-to}} {{{c.reply.excerpt}}} - {{#if c.hasMore}} - {{i18n 'admin.flags.more'}} - {{/if}} -

- {{/if}} - - {{d-button - class="btn-reply" - icon="reply" - label="admin.flags.reply_message"}} - - {{/if}} -
- - +
+ {{#if c.response}} + {{flagged-post-response response=c.response}} + {{#if c.reply}} + {{flagged-post-response response=c.reply hasMore=c.hasMore permalink=c.permalink}} + {{/if}} + + {{d-icon "reply"}} + {{i18n "admin.flags.reply_message"}} + + {{/if}} +
{{/each}} {{#if canAct}} - - - {{d-button - title="admin.flags.agree_title" - class="agree-flag" - label="admin.flags.agree" - icon="thumbs-o-up" - action="showAgreeFlagModal" - ellipsis=true}} - - {{#if flaggedPost.postHidden}} - {{d-button - title="admin.flags.disagree_flag_unhide_post_title" - class="disagree-flag" - action="disagree" - icon="thumbs-o-down" - label="admin.flags.disagree_flag_unhide_post"}} - {{else}} - {{d-button - title="admin.flags.disagree_flag_title" - class="disagree-flag" - action="disagree" - icon="thumbs-o-down" - label="admin.flags.disagree_flag"}} - {{/if}} +
+ {{d-button + title="admin.flags.agree_title" + class="agree-flag" + label="admin.flags.agree" + icon="thumbs-o-up" + action="showAgreeFlagModal" + ellipsis=true}} + {{#if flaggedPost.postHidden}} {{d-button - class="defer-flag" - title="admin.flags.defer_flag_title" - action="defer" - icon="external-link" - label="admin.flags.defer_flag"}} - + title="admin.flags.disagree_flag_unhide_post_title" + class="disagree-flag" + action="disagree" + icon="thumbs-o-down" + label="admin.flags.disagree_flag_unhide_post"}} + {{else}} {{d-button - class="btn-danger delete-flag" - title="admin.flags.delete_title" - action="showDeleteFlagModal" - icon="trash-o" - label="admin.flags.delete"}} - - + title="admin.flags.disagree_flag_title" + class="disagree-flag" + action="disagree" + icon="thumbs-o-down" + label="admin.flags.disagree_flag"}} + {{/if}} + + {{d-button + class="defer-flag" + title="admin.flags.defer_flag_title" + action="defer" + icon="external-link" + label="admin.flags.defer_flag"}} + + {{d-button + class="btn-danger delete-flag" + title="admin.flags.delete_title" + action="showDeleteFlagModal" + icon="trash-o" + label="admin.flags.delete"}} +
{{/if}} diff --git a/app/assets/javascripts/admin/templates/components/flagged-posts.hbs b/app/assets/javascripts/admin/templates/components/flagged-posts.hbs index ff1073db43d..e2ae697d6f2 100644 --- a/app/assets/javascripts/admin/templates/components/flagged-posts.hbs +++ b/app/assets/javascripts/admin/templates/components/flagged-posts.hbs @@ -1,24 +1,24 @@ {{#if flaggedPosts}} {{#load-more selector=".flagged-post" action=(action "loadMore")}} - - - - - - - - - - {{#each flaggedPosts as |flaggedPost|}} - {{flagged-post - flaggedPost=flaggedPost - canAct=canAct - showResolvedBy=showResolvedBy - removePost=(action "removePost" flaggedPost) - hideTitle=topic}} - {{/each}} - -
{{i18n 'admin.flags.flagged_by'}}{{#if showResolvedBy}}{{i18n 'admin.flags.resolved_by'}}{{/if}}
+
+
+ {{i18n 'admin.flags.flagged_by'}} +
+ {{#if showResolvedBy}} + {{i18n 'admin.flags.resolved_by'}} + {{/if}} +
+ +
+ {{#each flaggedPosts as |flaggedPost|}} + {{flagged-post + flaggedPost=flaggedPost + canAct=canAct + showResolvedBy=showResolvedBy + removePost=(action "removePost" flaggedPost) + hideTitle=topic}} + {{/each}} +
{{/load-more}} {{else}}

{{i18n 'admin.flags.no_results'}}

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index e398bf7f2b3..e54c11cc491 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -4,7 +4,7 @@ @import "common/foundation/helpers"; @import "common/admin/customize"; -@import "common/admin/flagged_topics"; +@import "common/admin/flagging"; $mobile-breakpoint: 700px; @@ -63,11 +63,6 @@ $mobile-breakpoint: 700px; .filters input { margin-bottom: 0; } } -td.flaggers td { - border-bottom: none; - border-top: none; -} - .site-texts { .search-area { margin-bottom: 2em; @@ -766,49 +761,6 @@ section.details { } } -.admin-flags { - .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: $highlight-medium; } - .message:hover { background-color: $highlight-low; } - - .flagged-post-avatar { - margin-right: 10px; - } - - .excerpt { - padding: 8px; - word-wrap: break-word; - .fa { display: inline-block; } - h3 { - margin-top: 0; - margin-bottom: 5px; - } - p:last-child { - margin-bottom: 0; - } - } - - tr.message td { - padding-left: 60px; - } - - .flagged-posts { background: $danger; } - - .action { - button { margin: 4px; } - text-align: right; - } -} - /* Dashboard */ .dashboard-left { @@ -1421,14 +1373,6 @@ button.ru { visibility: hidden; } -.delete-flag-modal, .agree-flag-modal { - button { - display: block; - margin: 10px 0 10px 10px; - padding: 10px 15px; - } -} - .start-backup-modal { .btn { margin: 10px 0 10px 5px; @@ -1904,18 +1848,6 @@ table#user-badges { left: -100%; } -.mobile-view .admin-flags { - .flaggers { - padding: 2px; - .avatar { - padding: 0; - } - } - tr.message td { - padding-left: 8px; - } -} - .cboxcontainer { diff --git a/app/assets/stylesheets/common/admin/flagged_topics.scss b/app/assets/stylesheets/common/admin/flagged_topics.scss deleted file mode 100644 index 23f56b76e8d..00000000000 --- a/app/assets/stylesheets/common/admin/flagged_topics.scss +++ /dev/null @@ -1,28 +0,0 @@ -.flag-counts { - display: inline-block; - margin-right: 0.5em; - - .type-count { - color: $primary-medium; - font-size: 0.9em; - } -} - -.flagged-topic { - td.topic-title { - width: 400px; - a { - width: 400px; - display: inline-block; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } -} - -.flagged-topic-details { - display: flex; - justify-content: space-between; - -} diff --git a/app/assets/stylesheets/common/admin/flagging.scss b/app/assets/stylesheets/common/admin/flagging.scss new file mode 100644 index 00000000000..b5f290c5962 --- /dev/null +++ b/app/assets/stylesheets/common/admin/flagging.scss @@ -0,0 +1,193 @@ +.flagged-posts-header { + display: flex; + justify-content: flex-end; + + font-weight: bold; + .flagged-by-header { + width: 12em; + } + padding-bottom: 0.5em; + border-bottom: 1px solid $primary-low; +} + +.flagged-post.hidden-post { + .flagged-post-excerpt, .flagged-post-avatar { + opacity: 0.5; + } +} + +.flagged-post.deleted { + .flagged-post-excerpt, .flagged-post-avatar { + background-color: scale-color($danger, $lightness: 70%); + } +} + +.flagged-post { + padding: 1em 0 0 0; + border-bottom: 1px solid $primary-low; + + .flagged-post-details { + display: flex; + justify-content: space-between; + + .flagged-post-avatar { + margin-right: 1em; + position: relative; + + img.avatar { + min-width: 45px; + } + + .previous-flagged-posts { + position: absolute; + right: -5px; + top: -5px; + background-color: $danger; + } + } + + .flagged-post-excerpt { + min-width: 70%; + width: 80%; + word-wrap: break-word; + .d-icon { + display: inline-block; + } + h3 { + margin-top: 0; + margin-bottom: 0.5em; + } + p:last-child { + margin-bottom: 0; + } + margin-right: 1em; + } + } + + .flagger { + width: 12em; + display: flex; + margin-bottom: 1em; + } + + .flagger-avatar, .disposer-avatar { + margin-right: 1em; + min-width: 32px; + } + + .disposer { + width: 7em; + justify-content: flex-end; + display: flex; + margin-bottom: 1em; + } + + .flagged-post-resolved-by { + width: 12em; + } + + .flagged-post-message { + padding: 0.5em 0 0.5em 4em; + margin-bottom: 0.5em; + background-color: $highlight-medium; + + .text { + margin-right: 1em; + } + + &:hover { + background-color: $highlight-low; + } + } + + .flagged-post-response { + display: flex; + align-items: center; + margin-bottom: 0.5em; + + .response-avatar { + margin-right: 0.5em; + } + + .has-more { + margin-left: 1em; + } + } + + .flagged-post-controls { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + + button { + margin-right: 0.5em; + margin-bottom: 0.5em; + } + } +} + +.flag-counts { + display: inline-block; + margin-right: 0.5em; + + .type-count { + color: $primary-medium; + font-size: 0.9em; + } +} + +.flagged-topic { + td.topic-title { + width: 400px; + a { + width: 400px; + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } +} + +.flagged-topic-details { + display: flex; + justify-content: space-between; +} + +.delete-flag-modal, .agree-flag-modal { + button { + display: block; + margin: 10px 0 10px 10px; + padding: 10px 15px; + } +} + +.mobile-view { + .flagged-posts-header { + display: none; + } + .flagged-posts { + .flagged-post-details { + flex-wrap: wrap; + justify-content: flex-start; + + .flagged-post-avatar { + margin-right: 10px; + } + + .flagged-post-excerpt { + width: 70%; + } + + .flaggers-title { + font-weight: bold; + margin: 0.5em 0; + } + + .flaggers { + margin-left: 4em; + margin-bottom: 1em; + } + } + } +} diff --git a/test/javascripts/acceptance/admin-flags-test.js.es6 b/test/javascripts/acceptance/admin-flags-test.js.es6 index 1da3ce45f26..aa799b99a6a 100644 --- a/test/javascripts/acceptance/admin-flags-test.js.es6 +++ b/test/javascripts/acceptance/admin-flags-test.js.es6 @@ -4,7 +4,7 @@ acceptance("Admin - Flagging", { loggedIn: true }); QUnit.test("flagged posts", assert => { visit("/admin/flags/active"); andThen(() => { - assert.equal(find('.admin-flags .flagged-post').length, 1); + assert.equal(find('.flagged-posts .flagged-post').length, 1); assert.equal(find('.flagged-post .flaggers .flagger').length, 1, 'shows who flagged it'); }); });