Improved UI of text comparisons / diff

See #2243

diff --git a/com.woltlab.wcf/templates/editHistory.tpl b/com.woltlab.wcf/templates/editHistory.tpl
index f5feb3ce8213ce71cb83f71e63a24cf91ed2c95b..697a8f8f3f9d13f63473c2e9f8494cdfd7f21405 100644 (file)
--- a/com.woltlab.wcf/templates/editHistory.tpl
+++ b/com.woltlab.wcf/templates/editHistory.tpl
@@ -8,49 +8,50 @@
 
 {if $diff}
 <div class="section editHistoryDiff">
-       <div class="sideBySide">
-               <div class="containerHeadline">
-                       <h3>{lang}wcf.edit.headline.old{/lang}</h3>
-               </div>
-               <div class="containerHeadline">
-                       <h3>{lang}wcf.edit.headline.new{/lang}</h3>
-               </div>
-       </div>
-
-<div><div>
-{assign var='prevType' value=''}
-{foreach from=$diff item='line'}
-{if $line[0] !== $prevType}
-       </div>
+       <table class="table">
+               <thead>
+                       <tr>
+                               <th>{lang}wcf.edit.headline.old{/lang}</th>
+                               <th>{lang}wcf.edit.headline.new{/lang}</th>
+                       </tr>
+               </thead>
+               
+               <tbody>
+                       <tr><td>{*
+*}{assign var='prevType' value=''}{*
+*}{assign var='colspan' value=false}{*
+*}{foreach from=$diff item='line'}{*
+*}{if $line[0] !== $prevType}{*
+       *}</td>
        
        {* unmodified, after deletion needs a "fake" insertion *}
-       {if $line[0] === ' ' && $prevType === '-'}<div></div>{/if}
+       {if $line[0] === ' ' && $prevType === '-'}<td></td>{/if}
        
        {* unmodified and deleted start a new container *}
-       {if $line[0] === ' ' || $line[0] === '-'}</div>{/if}
+       {if $line[0] === ' ' || $line[0] === '-'}</tr>{/if}
        
        {* adding, without deleting needs a "fake" deletion *}
        {if $line[0] === '+' && $prevType !== '-'}
-               </div>
-               <div class="sideBySide">
-                       <div></div>
+               </tr>
+               <tr>
+                       {assign var='colspan' value=true}
        {/if}
        
        {if $line[0] === ' '}
-               <div>
+               <tr>
+               {assign var='colspan' value=true}
        {/if}
        {if $line[0] === '-'}
-               <div class="sideBySide">
+               <tr>
        {/if}
-       <div{if $line[0] === '+'} style="color: green;"{elseif $line[0] === '-'} style="color: red;"{/if}>
+       <td{if $line[0] === '+'} class="diffAdded"{elseif $line[0] === '-'} class="diffRemoved"{/if}{if $colspan} colspan="2"{assign var='colspan' value=false}{/if}>
 {/if}
 {if $line[0] === ' '}{@$line[1]}<br>{/if}
 {if $line[0] === '-'}{@$line[1]}<br>{/if}
 {if $line[0] === '+'}{@$line[1]}<br>{/if}
 {assign var='prevType' value=$line[0]}
 {/foreach}
-</div></div>
-</div>
+</td></tr></table>
 {/if}
 
 <form action="{link controller='EditHistory'}{/link}" method="post">

diff --git a/wcfsetup/install/files/acp/templates/versionTrackerList.tpl b/wcfsetup/install/files/acp/templates/versionTrackerList.tpl
index 52bf9e4ca5d982b75ec9e77f551712d4a9361858..ce56e34009accdf39738826fe9c0405ae6fb4141 100644 (file)
--- a/wcfsetup/install/files/acp/templates/versionTrackerList.tpl
+++ b/wcfsetup/install/files/acp/templates/versionTrackerList.tpl
@@ -30,54 +30,59 @@
 {/if}
 {foreach from=$diffs key=languageID item=properties}
 {if $languageID}<div class="tabMenuContent" data-name="language{@$languageID}">{/if}
+<div class="section editHistoryDiff">
+       <table class="table">
+               <thead>
+                       <tr>
+                               <th>{lang}wcf.edit.headline.old{/lang}</th>
+                               <th>{lang}wcf.edit.headline.newOrCurrent{/lang}</th>
+                       </tr>
+               </thead>
+               
+               <tbody>
 {foreach from=$properties key=property item=diff}
-<section class="section editHistoryDiff">
-       <h2 class="sectionTitle">{lang}wcf.edit.headline.comparison{/lang}: {$objectTypeProcessor->getPropertyLabel($property)}</h2>
+                       <tr>
+                               <td class="diffSection" colspan="2">{lang}wcf.edit.headline.comparison{/lang}: {$objectTypeProcessor->getPropertyLabel($property)}</td>
+                       </tr>
        
-       <div class="sideBySide">
-               <div class="containerHeadline">
-                       <h3>{lang}wcf.edit.headline.old{/lang}</h3>
-               </div>
-               <div class="containerHeadline">
-                       <h3>{lang}wcf.edit.headline.newOrCurrent{/lang}</h3>
-               </div>
-       </div>
-
-<div><div>
-{assign var='prevType' value=''}
-{foreach from=$diff item='line'}
-{if $line[0] !== $prevType}
-       </div>
+                       <tr><td>{*
+*}{assign var='prevType' value=''}{*
+*}{assign var='colspan' value=false}{*
+*}{foreach from=$diff item='line'}{*
+*}{if $line[0] !== $prevType}{*
+       *}</td>
        
        {* unmodified, after deletion needs a "fake" insertion *}
-       {if $line[0] === ' ' && $prevType === '-'}<div></div>{/if}
+       {if $line[0] === ' ' && $prevType === '-'}<td></td>{/if}
        
        {* unmodified and deleted start a new container *}
-       {if $line[0] === ' ' || $line[0] === '-'}</div>{/if}
+       {if $line[0] === ' ' || $line[0] === '-'}</tr>{/if}
        
        {* adding, without deleting needs a "fake" deletion *}
        {if $line[0] === '+' && $prevType !== '-'}
-               </div>
-               <div class="sideBySide">
-                       <div></div>
+               </tr>
+               <tr>
+                       {assign var='colspan' value=true}
        {/if}
        
        {if $line[0] === ' '}
-               <div>
+               <tr>
+               {assign var='colspan' value=true}
        {/if}
        {if $line[0] === '-'}
-               <div class="sideBySide">
+               <tr>
        {/if}
-       <div{if $line[0] === '+'} style="color: green;"{elseif $line[0] === '-'} style="color: red;"{/if}>
+       <td{if $line[0] === '+'} class="diffAdded"{elseif $line[0] === '-'} class="diffRemoved"{/if}{if $colspan} colspan="2"{assign var='colspan' value=false}{/if}>
 {/if}
 {if $line[0] === ' '}{@$line[1]}<br>{/if}
 {if $line[0] === '-'}{@$line[1]}<br>{/if}
 {if $line[0] === '+'}{@$line[1]}<br>{/if}
 {assign var='prevType' value=$line[0]}
 {/foreach}
-</div></div>
-</section>
 {/foreach}
+</td></tr></tbody></table>
+
+</div>
 {if $languageID}</div>{/if}
 {/foreach}
 {if !$diffs[0]|isset}</div>{/if}

diff --git a/wcfsetup/install/files/style/ui/messageEditHistory.scss b/wcfsetup/install/files/style/ui/messageEditHistory.scss
index d946d94bd071735342dcd186874f578f29d97a8e..b427cd782ee94a57db2d2f046d0ceeaa3c09da34 100644 (file)
--- a/wcfsetup/install/files/style/ui/messageEditHistory.scss
+++ b/wcfsetup/install/files/style/ui/messageEditHistory.scss
@@ -1,5 +1,62 @@
 /* edit history */
 .editHistoryDiff {
+       > .table {
+               table-layout: fixed;
+               width: 100%;
+               
+               th {
+                       text-align: center;
+               }
+               
+               td {
+                       background-color: rgb(250, 250, 250);
+                       color: rgb(44, 62, 80);
+                       padding: 5px;
+                       
+                       &:not(.diffSection) {
+                               border-bottom-width: 0 !important;
+                       }
+                       
+                       &:first-child:last-child:empty {
+                               display: none;
+                       }
+                       
+                       &:last-child:not(:first-child) {
+                               border-left: 1px solid $wcfContentBorderInner;
+                       }
+                       
+                       &.diffAdded {
+                               background-color: rgb(223, 240, 216);
+                               color: rgb(60, 118, 61);
+                       }
+                       
+                       &.diffRemoved {
+                               background-color: rgb(242, 222, 222);
+                               color: rgb(169, 68, 66);
+                       }
+                       
+                       &.diffSection {
+                               background-clip: padding-box;
+                               background-color: rgb(236, 239, 241);
+                               border-bottom: 20px solid transparent;
+                               color: rgb(44, 62, 80);
+                               padding: 10px;
+                               text-align: center;
+                               
+                               @include wcfFontHeadline;
+                       }
+               }
+               
+               tr:not(:first-child) > .diffSection {
+                       border-top: 20px solid transparent;
+               }
+               
+               & + form {
+                       /* Out of the way, Lydia! */
+                       margin-top: 40px;
+               }
+       }
+       
        > .sideBySide:first-child {
                margin-bottom: 20px;
                text-align: center;