Added support for collapsible quotes

diff --git a/com.woltlab.wcf/templates/codeBBCodeTag.tpl b/com.woltlab.wcf/templates/codeBBCodeTag.tpl
deleted file mode 100644 (file)
index 37743a4..0000000
--- a/com.woltlab.wcf/templates/codeBBCodeTag.tpl
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="codeBox collapsibleBbcode jsCollapsibleBbcode {$highlighter|get_class|substr:30|lcfirst}{if $lines > 10} collapsed{/if}">
-       <div>
-               <div>
-                       <h3>{@$highlighter->getTitle()}{if $filename}: {$filename}{/if}</h3>
-               </div>
-               
-               <ol start="{$startLineNumber}">
-                       {assign var='lineNumber' value=$startLineNumber}
-                       {foreach from=$content item=line}
-                               {if $lineNumbers[$lineNumber]|isset}
-                                       <li id="{@$lineNumbers[$lineNumber]}"><a href="{@$__wcf->getAnchor($lineNumbers[$lineNumber])}" class="lineAnchor"></a>{@$line}</li>
-                               {else}
-                                       <li>{@$line}</li>
-                               {/if}
-                               
-                               {assign var='lineNumber' value=$lineNumber+1}
-                       {/foreach}
-               </ol>
-       </div>
-       
-       {if $lines > 10}
-               <span class="toggleButton" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}">{lang}wcf.bbcode.button.showAll{/lang}</span>
-               
-               {if !$__overlongCodeBoxSeen|isset}
-                       {assign var='__overlongCodeBoxSeen' value=true}
-                       <script data-relocate="true">
-                               require(['WoltLabSuite/Core/Bbcode/Collapsible'], function(BbcodeCollapsible) {
-                                       BbcodeCollapsible.observe();
-                               });
-                       </script>
-               {/if}
-       {/if}
-</div>

diff --git a/com.woltlab.wcf/templates/codeMetaCode.tpl b/com.woltlab.wcf/templates/codeMetaCode.tpl
index 8310015ef7b1c8cc2b16519ed002cbd2846651db..9a52c8554d3c2cbafb46346817858a62b694dedb 100644 (file)
--- a/com.woltlab.wcf/templates/codeMetaCode.tpl
+++ b/com.woltlab.wcf/templates/codeMetaCode.tpl
@@ -21,8 +21,8 @@
        {if $lines > 10}
                <span class="toggleButton" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}">{lang}wcf.bbcode.button.showAll{/lang}</span>
                
-               {if !$__overlongCodeBoxSeen|isset}
-                       {assign var='__overlongCodeBoxSeen' value=true}
+               {if !$__overlongBBCodeBoxSeen|isset}
+                       {assign var='__overlongBBCodeBoxSeen' value=true}
                        <script data-relocate="true">
                                require(['WoltLabSuite/Core/Bbcode/Collapsible'], function(BbcodeCollapsible) {
                                        BbcodeCollapsible.observe();

diff --git a/com.woltlab.wcf/templates/quoteBBCodeTag.tpl b/com.woltlab.wcf/templates/quoteBBCodeTag.tpl
deleted file mode 100644 (file)
index dde8342..0000000
--- a/com.woltlab.wcf/templates/quoteBBCodeTag.tpl
+++ /dev/null
@@ -1,26 +0,0 @@
-<blockquote class="quoteBox{if !$quoteAuthorObject} quoteBoxSimple{/if}"{if $quoteLink} cite="{$quoteLink}"{/if}>
-       <header class="quoteBoxHeader">
-               <span class="quoteBoxIcon">
-                       {if $quoteAuthorObject}
-                               <a href="{link controller='User' object=$quoteAuthorObject}{/link}" class="userLink" data-user-id="{@$quoteAuthorObject->userID}">{@$quoteAuthorObject->getAvatar()->getImageTag(32)}</a>
-                       {else}
-                               <span class="icon icon24 fa-quote-left"></span>
-                       {/if}
-               </span>
-               <span class="quoteBoxTitle">
-                       {if $quoteAuthor}
-                               {if $quoteLink}
-                                       <a href="{@$quoteLink}"{if $isExternalQuoteLink} class="externalURL"{if EXTERNAL_LINK_REL_NOFOLLOW || EXTERNAL_LINK_TARGET_BLANK} rel="{if EXTERNAL_LINK_REL_NOFOLLOW}nofollow{/if}{if EXTERNAL_LINK_TARGET_BLANK}{if EXTERNAL_LINK_REL_NOFOLLOW} {/if}noopener noreferrer{/if}"{/if}{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}{/if}>{lang}wcf.bbcode.quote.title{/lang}</a>
-                               {else}
-                                       {lang}wcf.bbcode.quote.title{/lang}
-                               {/if}
-                       {else}
-                               {lang}wcf.bbcode.quote{/lang}
-                       {/if}
-               </span>
-       </header>
-       
-       <div>
-               {@$content}
-       </div>
-</blockquote>

diff --git a/com.woltlab.wcf/templates/quoteMetaCode.tpl b/com.woltlab.wcf/templates/quoteMetaCode.tpl
index dd6f2e4d2cee1ccf7741a2c464e0fc5a3e4ddf96..f695da1f9a7808cdfc2b8a7a7471168d3427e1ce 100644 (file)
--- a/com.woltlab.wcf/templates/quoteMetaCode.tpl
+++ b/com.woltlab.wcf/templates/quoteMetaCode.tpl
@@ -1,4 +1,4 @@
-<blockquote class="quoteBox{if !$quoteAuthorObject} quoteBoxSimple{/if}"{if $quoteLink} cite="{$quoteLink}"{/if}>
+<blockquote class="quoteBox collapsibleBbcode jsCollapsibleBbcode{if $collapseQuote} collapsed{/if}{if !$quoteAuthorObject} quoteBoxSimple{/if}"{if $quoteLink} cite="{$quoteLink}"{/if}>
        <div class="quoteBoxIcon">
                {if $quoteAuthorObject}
                        <a href="{link controller='User' object=$quoteAuthorObject}{/link}" class="userLink" data-user-id="{@$quoteAuthorObject->userID}">{@$quoteAuthorObject->getAvatar()->getImageTag(64)}</a>
@@ -21,7 +21,20 @@
                </span>
        </div>
        
-       <div>
+       <div class="quoteBoxContent">
                <!-- META_CODE_INNER_CONTENT -->
        </div>
+       
+       {if $collapseQuote}
+               <span class="toggleButton" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}">{lang}wcf.bbcode.button.showAll{/lang}</span>
+               
+               {if !$__overlongBBCodeBoxSeen|isset}
+                       {assign var='__overlongBBCodeBoxSeen' value=true}
+                       <script data-relocate="true">
+                               require(['WoltLabSuite/Core/Bbcode/Collapsible'], function(BbcodeCollapsible) {
+                                       BbcodeCollapsible.observe();
+                               });
+                       </script>
+               {/if}
+       {/if}
 </blockquote>

diff --git a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabQuote.class.php b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabQuote.class.php
index f45d884690eed161b47ed0c1d175df3ef9e4748c..2c10a3f78d78e3d35697e16be63aaab32bb2845b 100644 (file)
--- a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabQuote.class.php
+++ b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabQuote.class.php
@@ -31,9 +31,17 @@ class HtmlOutputNodeWoltlabQuote extends AbstractHtmlOutputNode {
                foreach ($elements as $element) {
                        switch ($this->outputType) {
                                case 'text/html':
+                                       $collapse = false;
+                                       
+                                       // try to predict long content
+                                       if ($element->getElementsByTagName('p')->length > 5 || $element->getElementsByTagName('br')->length > 5) {
+                                               $collapse = true;
+                                       }
+                                       
                                        $nodeIdentifier = StringUtil::getRandomID();
                                        $htmlNodeProcessor->addNodeData($this, $nodeIdentifier, [
                                                'author' => $element->getAttribute('data-author'),
+                                               'collapse' => $collapse,
                                                'url' => $element->getAttribute('data-link')
                                        ]);
                                        
@@ -79,6 +87,7 @@ class HtmlOutputNodeWoltlabQuote extends AbstractHtmlOutputNode {
                }
                
                WCF::getTPL()->assign([
+                       'collapseQuote' => $data['collapse'],
                        'quoteLink' => $data['url'],
                        'quoteAuthor' => $data['author'],
                        'quoteAuthorObject' => $quoteAuthorObject,

diff --git a/wcfsetup/install/files/style/bbcode/quote.scss b/wcfsetup/install/files/style/bbcode/quote.scss
index cf288f6b884e3695483a63ea5ee1cbc6f990ace1..704f4a3d7496f25a79c04b3b01a681e0d43db6de 100644 (file)
--- a/wcfsetup/install/files/style/bbcode/quote.scss
+++ b/wcfsetup/install/files/style/bbcode/quote.scss
@@ -33,6 +33,35 @@ woltlab-quote,
                min-height: 104px;
        }
        
+       &.collapsed {
+               position: relative;
+               
+               > .quoteBoxContent {
+                       overflow: hidden;
+                       max-height: 100px;
+               }
+               
+               > .toggleButton {
+                       bottom: 0;
+                       box-shadow: 0 -10px 50px 10px opacify($wcfContentBackground, .9);
+                       left: 0;
+                       padding-bottom: 10px;
+                       position: absolute;
+                       right: 0;
+                       z-index: 1;
+               }
+       }
+       
+       > .toggleButton {
+               background-color: opacify($wcfContentBackground, .9);
+               cursor: pointer;
+               display: block;
+               padding: 10px 20px 0 10px;
+               text-align: center;
+               
+               @include wcfFontSmall;
+       }
+       
        .quoteBox {
                min-height: 0;
        }