From ce04ba9230d4b8efb5ce4f00cdac6e9ade7c08e9 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 17 Jun 2016 10:57:09 +0200
Subject: [PATCH] Added proper styling for code

---
 wcfsetup/install/files/js/WCF.Message.js      |  4 +-
 wcfsetup/install/files/style/bbcode/code.scss | 58 ++++++++++++++++++-
 wcfsetup/install/lang/de.xml                  |  2 +
 wcfsetup/install/lang/en.xml                  |  2 +
 4 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/wcfsetup/install/files/js/WCF.Message.js b/wcfsetup/install/files/js/WCF.Message.js
index d76dae7589..c3772e0262 100644
--- a/wcfsetup/install/files/js/WCF.Message.js
+++ b/wcfsetup/install/files/js/WCF.Message.js
@@ -43,7 +43,7 @@ WCF.Message.BBCode.CodeViewer = Class.extend({
 		$('.codeBox:not(.jsCodeViewer)').each($.proxy(function(index, codeBox) {
 			var $codeBox = $(codeBox).addClass('jsCodeViewer');
 			
-			$('<span class="icon icon16 fa-files-o pointer jsTooltip" title="' + WCF.Language.get('wcf.message.bbcode.code.copy') + '" />').appendTo($codeBox.find('div > h3')).click($.proxy(this._click, this));
+			$('<span class="codeBoxPlainSource icon icon16 fa-files-o pointer jsTooltip" title="' + WCF.Language.get('wcf.message.bbcode.code.copy') + '" />').appendTo($codeBox.find('.codeBoxHeader')).click($.proxy(this._click, this));
 		}, this));
 	},
 	
@@ -64,7 +64,7 @@ WCF.Message.BBCode.CodeViewer = Class.extend({
 		});
 		
 		if (this._dialog === null) {
-			this._dialog = $('<div><textarea cols="60" rows="12" readonly="readonly" /></div>').hide().appendTo(document.body);
+			this._dialog = $('<div><textarea cols="60" rows="12" readonly></textarea></div>').hide().appendTo(document.body);
 			this._dialog.children('textarea').val($content);
 			this._dialog.wcfDialog({
 				title: WCF.Language.get('wcf.message.bbcode.code.copy')
diff --git a/wcfsetup/install/files/style/bbcode/code.scss b/wcfsetup/install/files/style/bbcode/code.scss
index 1660df226c..33eb57db99 100644
--- a/wcfsetup/install/files/style/bbcode/code.scss
+++ b/wcfsetup/install/files/style/bbcode/code.scss
@@ -25,26 +25,82 @@
 	box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
 	border-radius: 2px;
 	margin-top: 1em;
+	overflow: hidden;
 	padding: 10px;
+	position: relative;
+	
+	&.collapsed {
+		max-height: 200px;
+		
+		> .toggleButton {
+			bottom: 0;
+			box-shadow: 0 -10px 50px 10px opacify($wcfContentBackground, .9);
+			left: 0;
+			padding-bottom: 10px;
+			position: absolute;
+			right: 0;
+		}
+	}
 	
 	> div {
+		> .codeBoxHeader {
+			align-items: center;
+			display: flex;
+			
+			> .codeBoxHeadline {
+				flex: 1 1 auto;
+				padding: 0 10px;
+				
+				@include wcfFontHeadline;
+			}
+			
+			> .codeBoxPlainSource {
+				flex: 0 0 auto;
+				margin-left: 10px;
+			}
+		}
+		
 		> ol {
-			margin-left: 3.4em !important;
+			margin: 20px 0 0 3.4em !important;
 			position: relative;
 			
 			&::before {
 				border-right: 1px solid $wcfContentBorderInner;
 				bottom: 0;
 				content: "";
+				left: -5px;
 				position: absolute;
 				top: 0;
 			}
 			
 			> li {
+				font-family: Consolas, 'Courier New', monospace;
 				padding-left: 5px;
+				position: relative;
+				white-space: pre-wrap;
+				word-break: break-all;
+				word-wrap: break-word;
+				
+				.lineAnchor {
+					bottom: 0;
+					left: -3.4em;
+					position: absolute;
+					top: 0;
+					width: 3.4em;
+				}
 			}
 		}
 	}
+	
+	> .toggleButton {
+		background-color: opacify($wcfContentBackground, .9);
+		cursor: pointer;
+		display: block;
+		padding: 10px 20px 0 10px;
+		text-align: center;
+		
+		@include wcfFontSmall;
+	}
 }
 
 /* ############## Code Styles ############## */
diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index fb95574c9c..7b696fc559 100644
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -1775,6 +1775,8 @@ Erlaubte Dateiendungen: {', '|implode:$attachmentHandler->getFormattedAllowedExt
 	</category>
 	
 	<category name="wcf.bbcode">
+		<item name="wcf.bbcode.button.collapse"><![CDATA[Weniger anzeigen]]></item>
+		<item name="wcf.bbcode.button.showAll"><![CDATA[Alles anzeigen]]></item>
 		<item name="wcf.bbcode.code"><![CDATA[Code]]></item>
 		<item name="wcf.bbcode.code.bash.title"><![CDATA[Shell-Script]]></item>
 		<item name="wcf.bbcode.code.c.title"><![CDATA[C]]></item>
diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index c4ad3104af..63472ec81a 100644
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -1782,6 +1782,8 @@ Allowed extensions: {', '|implode:$attachmentHandler->getFormattedAllowedExtensi
 	</category>
 	
 	<category name="wcf.bbcode">
+		<item name="wcf.bbcode.button.collapse"><![CDATA[Display Less]]></item>
+		<item name="wcf.bbcode.button.showAll"><![CDATA[Display More]]></item>
 		<item name="wcf.bbcode.code"><![CDATA[Code]]></item>
 		<item name="wcf.bbcode.code.bash.title"><![CDATA[Shell-Script]]></item>
 		<item name="wcf.bbcode.code.c.title"><![CDATA[C]]></item>
-- 
2.20.1