From 673806a29e66d72ba2d8cc4e0f42611d96e0bfd7 Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Tue, 9 Aug 2016 00:04:39 +0100
Subject: [PATCH] Some more styling tweaks and added jasmine test
---
app/assets/javascripts/abuse_reports.js.es6 | 5 ++-
app/assets/stylesheets/pages/admin.scss | 13 ++++--
.../abuse_reports/_abuse_report.html.haml | 7 ++--
spec/javascripts/abuse_reports_spec.js.es6 | 41 +++++++++++++++++++
.../fixtures/abuse_reports.html.haml | 16 ++++++++
5 files changed, 74 insertions(+), 8 deletions(-)
create mode 100644 spec/javascripts/abuse_reports_spec.js.es6
create mode 100644 spec/javascripts/fixtures/abuse_reports.html.haml
diff --git a/app/assets/javascripts/abuse_reports.js.es6 b/app/assets/javascripts/abuse_reports.js.es6
index a85ba2006d7..ecafa1dee8d 100644
--- a/app/assets/javascripts/abuse_reports.js.es6
+++ b/app/assets/javascripts/abuse_reports.js.es6
@@ -1,3 +1,4 @@
+window.gl = window.gl || {};
((global) => {
const MAX_MESSAGE_LENGTH = 500;
const MESSAGE_CELL_SELECTOR = '.abuse-reports .message';
@@ -16,7 +17,7 @@
if (reportMessage.length > MAX_MESSAGE_LENGTH) {
$messageCellElement.data('original-message', reportMessage);
$messageCellElement.data('message-truncated', 'true');
- $messageCellElement.text(`${reportMessage.substr(0, MAX_MESSAGE_LENGTH)}...`);
+ $messageCellElement.text(`${reportMessage.substr(0, (MAX_MESSAGE_LENGTH - 3))}...`);
}
}
@@ -29,7 +30,7 @@
$messageCellElement.text(originalMessage);
} else {
$messageCellElement.data('message-truncated', 'true');
- $messageCellElement.text(`${originalMessage.substr(0, MAX_MESSAGE_LENGTH)}...`);
+ $messageCellElement.text(`${originalMessage.substr(0, (MAX_MESSAGE_LENGTH - 3))}...`);
}
}
}
diff --git a/app/assets/stylesheets/pages/admin.scss b/app/assets/stylesheets/pages/admin.scss
index caf68308cc2..265ca3da3e6 100644
--- a/app/assets/stylesheets/pages/admin.scss
+++ b/app/assets/stylesheets/pages/admin.scss
@@ -99,10 +99,16 @@
}
.abuse-reports {
- table-layout: fixed;
- .action-buttons a {
- white-space: normal;
+ .table {
+ table-layout: fixed;
}
+ .subheading {
+ padding-bottom: $gl-padding;
+ }
+ .message {
+ word-wrap: break-word;
+ }
+
th {
width: 15%;
&.wide {
@@ -118,6 +124,7 @@
float: left;
}
}
+
.no-reports {
.emoji-icon {
margin-left: $btn-side-margin;
diff --git a/app/views/admin/abuse_reports/_abuse_report.html.haml b/app/views/admin/abuse_reports/_abuse_report.html.haml
index 1feec221d2c..56bf6194914 100644
--- a/app/views/admin/abuse_reports/_abuse_report.html.haml
+++ b/app/views/admin/abuse_reports/_abuse_report.html.haml
@@ -1,7 +1,8 @@
- reporter = abuse_report.reporter
- user = abuse_report.user
%tr
- %th.visible-xs-block.visible-sm-block User
+ %th.visible-xs-block.visible-sm-block
+ %strong User
%td
- if user
= link_to user.name, user
@@ -10,7 +11,7 @@
- else
(removed)
%td
- %strong.visible-xs-block.visible-sm-block Reported by
+ %strong.subheading.visible-xs-block.visible-sm-block Reported by
- if reporter
= link_to reporter.name, reporter
- else
@@ -18,7 +19,7 @@
.light.small
= time_ago_with_tooltip(abuse_report.created_at)
%td
- %strong.visible-xs-block.visible-sm-block Message
+ %strong.subheading.visible-xs-block.visible-sm-block Message
.message
= markdown(abuse_report.message.squish!, pipeline: :single_line, author: reporter)
%td
diff --git a/spec/javascripts/abuse_reports_spec.js.es6 b/spec/javascripts/abuse_reports_spec.js.es6
new file mode 100644
index 00000000000..6bcfdf191c2
--- /dev/null
+++ b/spec/javascripts/abuse_reports_spec.js.es6
@@ -0,0 +1,41 @@
+/*= require abuse_reports */
+
+/*= require jquery */
+
+((global) => {
+ const FIXTURE = 'abuse_reports.html';
+ const MAX_MESSAGE_LENGTH = 500;
+
+ function assertMaxLength($message) {
+ expect($message.text().length).toEqual(MAX_MESSAGE_LENGTH);
+ }
+
+ describe('Abuse Reports', function() {
+ fixture.preload(FIXTURE);
+
+ beforeEach(function() {
+ fixture.load(FIXTURE);
+ new global.AbuseReports();
+ });
+
+ it('should truncate long messages', function() {
+ const $longMessage = $('#long');
+ expect($longMessage.data('original-message')).toEqual(jasmine.anything());
+ assertMaxLength($longMessage);
+ });
+
+ it('should not truncate short messages', function() {
+ const $shortMessage = $('#short');
+ expect($shortMessage.data('original-message')).not.toEqual(jasmine.anything());
+ });
+
+ it('should allow clicking a truncated message to expand and collapse the full message', function() {
+ const $longMessage = $('#long');
+ $longMessage.click();
+ expect($longMessage.data('original-message').length).toEqual($longMessage.text().length);
+ $longMessage.click();
+ assertMaxLength($longMessage);
+ });
+ });
+
+})(window.gl);
diff --git a/spec/javascripts/fixtures/abuse_reports.html.haml b/spec/javascripts/fixtures/abuse_reports.html.haml
new file mode 100644
index 00000000000..2ec302abcb7
--- /dev/null
+++ b/spec/javascripts/fixtures/abuse_reports.html.haml
@@ -0,0 +1,16 @@
+.abuse-reports
+ .message#long
+ Cat ipsum dolor sit amet, hide head under blanket so no one can see.
+ Gate keepers of hell eat and than sleep on your face but hunt by meowing
+ loudly at 5am next to human slave food dispenser cats go for world
+ domination or chase laser, yet poop on grasses chirp at birds. Cat is love,
+ cat is life chase after silly colored fish toys around the house climb a
+ tree, wait for a fireman jump to fireman then scratch his face fall asleep
+ on the washing machine lies down always hungry so caticus cuteicus. Sit on
+ human. Spot something, big eyes, big eyes, crouch, shake butt, prepare to
+ pounce sleep in the bathroom sink hiss at vacuum cleaner hide head under
+ blanket so no one can see throwup on your pillow.
+ .message#short
+ Cat ipsum dolor sit amet, groom yourself 4 hours - checked, have your
+ beauty sleep 18 hours - checked, be fabulous for the rest of the day -
+ checked! for shake treat bag.
--
GitLab