[TASK] Streamline Version Module 04/42004/8
authorBenjamin Kott <benjamin.kott@outlook.com>
Mon, 27 Jul 2015 22:14:36 +0000 (00:14 +0200)
committerAnja Leichsenring <aleichsenring@ab-softlab.de>
Tue, 18 Aug 2015 18:37:50 +0000 (20:37 +0200)
- Streamline appearance
- Remove unused JavaScript
- Remove unused CSS
- Use IconFactory

Resolves: #48125
Releases: master
Change-Id: I9efe60a30c895c68c2e4da8105f243f181418525
Reviewed-on: http://review.typo3.org/42004
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Build/Resources/Public/Less/TYPO3/_element_panel.less
Build/Resources/Public/Less/TYPO3/_element_table.less
Build/Resources/Public/Less/TYPO3/structure/_element_version.less
Build/Resources/Public/Less/TYPO3/structure/_module_web_list.less
Build/Resources/Public/Less/TYPO3/visual/_element_version.less
typo3/sysext/core/Classes/Imaging/IconRegistry.php
typo3/sysext/recordlist/Classes/RecordList/DatabaseRecordList.php
typo3/sysext/t3skin/Resources/Public/Css/backend.css
typo3/sysext/version/Classes/ClickMenu/VersionClickMenu.php
typo3/sysext/version/Classes/Controller/VersionModuleController.php
typo3/sysext/version/Classes/View/VersionView.php

index 8129f61..80ed1a3 100644 (file)
@@ -15,8 +15,8 @@
        .panel-heading {
                font-weight: bold;
        }
-       .table,
-       .table-fit {
+       .table,
+       .table-fit {
                border: 0;
                margin: 0;
        }
index 4b2262b..6fdc94f 100644 (file)
@@ -50,6 +50,12 @@ table {
 // Default table styling
 //
 .table {
+       .table {
+               + .table {
+                       margin-top: 6px;
+               }
+               margin: 0;
+       }
        background-color: @table-bg;
        border: 1px solid @table-border-color;
        * {
index ebc9daf..46ea19d 100644 (file)
@@ -2,48 +2,9 @@
 // Workspace
 //
 
-div.workspace-info {
+.workspace-info {
        padding: 7px;
 }
-
-table.workspace-overview td {
-       vertical-align: top;
-}
-
-table.ver-subtree tr td img {
-       vertical-align: middle;
-}
-
-.t3-version-infolayer {
-       z-index: 1;
-       visibility: hidden;
-       position: absolute;
-}
-
-table.ver-verElement {
-       width: 100%;
-}
-
-.ver-wl-details-table {
-       width: 100%;
-       margin: 5px 0 10px;
-}
-
-.ver-wl-details {
-       padding: 0 2px;
-       vertical-align: top;
-}
-
-.ver-wl-details-label {
-       width: 150px;
+.workspace-overview td {
        vertical-align: top;
-}
-
-.ver-wl-details-user-list-label {
-       width: 100px;
-}
-
-#ver-wl-new-workspace-icon {
-       margin-right: 5px;
-       float: left;
-}
+}
\ No newline at end of file
index 2f57b40..7cc2869 100644 (file)
@@ -72,18 +72,6 @@ table.typo3-dblist-overview {
        }
 }
 
-
-table#typo3-versionSelector {
-       margin-bottom: 5px;
-       margin-top: 5px;
-       padding: 5px;
-       td {
-               padding-left: 2px;
-               padding-right: 2px;
-               vertical-align:middle;
-       }
-}
-
 div#typo3-newRecordLink,
 div.typo3-newRecordLink,
 div.typo3-localizationLink,
index 4ec0840..90b8f2f 100644 (file)
@@ -1,108 +1,7 @@
 //
 // Workspace
 //
-
 #typo3-pagetree .workspace-info {
        background-color: #ffec97;
        font-weight: bold;
 }
-
-table#typo3-versionSelector {
-       background-color: #ffec97;
-       border: 1px solid #a2aab8;
-}
-
-.ver-element div.treeLinkItem,
-.ver-versions div.treeLinkItem,
-.ver-page div.treeLinkItem {
-       background-color: #ffec97;
-}
-
-.ver-branch div.treeLinkItem,
-.ver-branchpoint div.treeLinkItem {
-       background-color: #ff9999;
-}
-
-.ver-element ul div.treeLinkItem,
-.ver-versions ul div.treeLinkItem,
-.ver-page ul div.treeLinkItem,
-.ver-branch div.treeLinkItem,
-.ver-branchpoint div.treeLinkItem {
-       background-color: transparent;
-}
-
-table.ver-subtree {
-       a {
-               text-decoration: none;
-       }
-       tr td.iconTitle {
-               white-space: nowrap;
-       }
-       tr td.diffCell {
-               white-space: normal;
-       }
-       table.diffTable {
-               background-color: white;
-               border: 1px solid black;
-       }
-       tr.typo3-ver td.iconTitle,
-       tr.typo3-ver td.diffCell,
-       tr.typo3-ver td.cmdCell {
-               background-color: #c5c1b5;
-       }
-       tr.typo3-ver-hl td.iconTitle,
-       tr.typo3-ver-hl td.diffCell,
-       tr.typo3-ver-hl td.cmdCell {
-               background-color: #999;
-       }
-       tr.typo3-ver-new td {
-               background-color: #eee;
-               color: #666;
-       }
-       tr.typo3-ver-noComp td {
-               font-style: italic;
-       }
-}
-
-
-table.ver-subtree div.diffLayer,
-div.logLayer {
-       background-color: white;
-       border: 1px solid black;
-}
-
-table.ver-subtree,
-table.ver-verElement td.c-diffCell {
-       border: 1px solid #666;
-}
-
-
-.ver-wl-table {
-       border: 1px solid black;
-}
-
-.ver-wl-details-table {
-       border: 1px solid #cccccc;
-}
-
-.ver-wl-details {
-       background-color: #ffffff;
-}
-
-.ver-wl-details-label {
-       background-color: #ffffff;
-       white-space: nowrap;
-}
-
-#ver-wl-new-workspace-icon {
-       border: none;
-}
-
-.ver-wl-mp-inacessible {
-       color: #7c7c7c;
-       font-style: italic;
-}
-
-.ver-wl-current-user {
-       font-weight: bold;
-}
index c528be0..9cf3ab1 100644 (file)
@@ -188,6 +188,30 @@ class IconRegistry implements \TYPO3\CMS\Core\SingletonInterface {
                                'name' => 'square-o',
                        )
                ),
+               'actions-page-open' => array(
+                       'provider' => FontawesomeIconProvider::class,
+                       'options' => array(
+                               'name' => 'pencil-square-o',
+                       )
+               ),
+               'actions-system-list-open' => array(
+                       'provider' => FontawesomeIconProvider::class,
+                       'options' => array(
+                               'name' => 'list-alt',
+                       )
+               ),
+               'actions-version-open' => array(
+                       'provider' => FontawesomeIconProvider::class,
+                       'options' => array(
+                               'name' => 'refresh',
+                       )
+               ),
+               'actions-version-swap-version' => array(
+                       'provider' => FontawesomeIconProvider::class,
+                       'options' => array(
+                               'name' => 'exchange',
+                       )
+               ),
                'actions-unmarkstate' => array(
                        'provider' => FontawesomeIconProvider::class,
                        'options' => array(
@@ -195,7 +219,15 @@ class IconRegistry implements \TYPO3\CMS\Core\SingletonInterface {
                        )
                ),
 
-               // OVERLAYS
+               // Status
+               'status-status-current' => array(
+                       'provider' => FontawesomeIconProvider::class,
+                       'options' => array(
+                               'name' => 'caret-right text-danger',
+                       )
+               ),
+
+               // Overlays
                'overlay-read-only' => array(
                        'provider' => FontawesomeIconProvider::class,
                        'options' => array(
index 4177c95..85f9d99 100644 (file)
@@ -1283,7 +1283,7 @@ class DatabaseRecordList extends AbstractDatabaseRecordList {
                                        ));
                                        $versionAction = '<a class="btn btn-default" href="' . htmlspecialchars($href) . '" title="'
                                                . $this->getLanguageService()->getLL('displayVersions', TRUE) . '">'
-                                               . '<span class="t3-icon fa fa-refresh"></span>' . '</a>';
+                                               . $this->iconFactory->getIcon('actions-version-open', Icon::SIZE_SMALL) . '</a>';
                                        $this->addActionToCellGroup($cells, $versionAction, 'version');
                                }
                        }
index dd4a8e5..0f92f5c 100644 (file)
@@ -10476,6 +10476,12 @@ table {
   background-color: #fafafa;
   border: 1px solid #cccccc;
 }
+.table .table {
+  margin: 0;
+}
+.table .table + .table {
+  margin-top: 6px;
+}
 .table * {
   box-sizing: border-box;
 }
@@ -10749,8 +10755,8 @@ fieldset[disabled] .table .btn-default.active {
 .panel .panel-heading {
   font-weight: bold;
 }
-.panel .table,
-.panel .table-fit {
+.panel .table,
+.panel .table-fit {
   border: 0;
   margin: 0;
 }
@@ -13823,42 +13829,12 @@ div.typo3-module-lang div.progress-bar {
   margin-left: 6px;
   display: block;
 }
-div.workspace-info {
+.workspace-info {
   padding: 7px;
 }
-table.workspace-overview td {
+.workspace-overview td {
   vertical-align: top;
 }
-table.ver-subtree tr td img {
-  vertical-align: middle;
-}
-.t3-version-infolayer {
-  z-index: 1;
-  visibility: hidden;
-  position: absolute;
-}
-table.ver-verElement {
-  width: 100%;
-}
-.ver-wl-details-table {
-  width: 100%;
-  margin: 5px 0 10px;
-}
-.ver-wl-details {
-  padding: 0 2px;
-  vertical-align: top;
-}
-.ver-wl-details-label {
-  width: 150px;
-  vertical-align: top;
-}
-.ver-wl-details-user-list-label {
-  width: 100px;
-}
-#ver-wl-new-workspace-icon {
-  margin-right: 5px;
-  float: left;
-}
 input.c-inputButton,
 img.c-inputButton {
   margin-right: 2px;
@@ -13926,16 +13902,6 @@ table.typo3-dblist-overview td.c-tableDescription {
 table.typo3-dblist-overview td.c-tableDescription img {
   margin-right: 10px;
 }
-table#typo3-versionSelector {
-  margin-bottom: 5px;
-  margin-top: 5px;
-  padding: 5px;
-}
-table#typo3-versionSelector td {
-  padding-left: 2px;
-  padding-right: 2px;
-  vertical-align: middle;
-}
 div#typo3-newRecordLink,
 div.typo3-newRecordLink,
 div.typo3-localizationLink,
@@ -14049,88 +14015,6 @@ pre.ts-hl .ts-linenum {
   background-color: #ffec97;
   font-weight: bold;
 }
-table#typo3-versionSelector {
-  background-color: #ffec97;
-  border: 1px solid #a2aab8;
-}
-.ver-element div.treeLinkItem,
-.ver-versions div.treeLinkItem,
-.ver-page div.treeLinkItem {
-  background-color: #ffec97;
-}
-.ver-branch div.treeLinkItem,
-.ver-branchpoint div.treeLinkItem {
-  background-color: #ff9999;
-}
-.ver-element ul div.treeLinkItem,
-.ver-versions ul div.treeLinkItem,
-.ver-page ul div.treeLinkItem,
-.ver-branch div.treeLinkItem,
-.ver-branchpoint div.treeLinkItem {
-  background-color: transparent;
-}
-table.ver-subtree a {
-  text-decoration: none;
-}
-table.ver-subtree tr td.iconTitle {
-  white-space: nowrap;
-}
-table.ver-subtree tr td.diffCell {
-  white-space: normal;
-}
-table.ver-subtree table.diffTable {
-  background-color: white;
-  border: 1px solid black;
-}
-table.ver-subtree tr.typo3-ver td.iconTitle,
-table.ver-subtree tr.typo3-ver td.diffCell,
-table.ver-subtree tr.typo3-ver td.cmdCell {
-  background-color: #c5c1b5;
-}
-table.ver-subtree tr.typo3-ver-hl td.iconTitle,
-table.ver-subtree tr.typo3-ver-hl td.diffCell,
-table.ver-subtree tr.typo3-ver-hl td.cmdCell {
-  background-color: #999;
-}
-table.ver-subtree tr.typo3-ver-new td {
-  background-color: #eee;
-  color: #666;
-}
-table.ver-subtree tr.typo3-ver-noComp td {
-  font-style: italic;
-}
-table.ver-subtree div.diffLayer,
-div.logLayer {
-  background-color: white;
-  border: 1px solid black;
-}
-table.ver-subtree,
-table.ver-verElement td.c-diffCell {
-  border: 1px solid #666;
-}
-.ver-wl-table {
-  border: 1px solid black;
-}
-.ver-wl-details-table {
-  border: 1px solid #cccccc;
-}
-.ver-wl-details {
-  background-color: #ffffff;
-}
-.ver-wl-details-label {
-  background-color: #ffffff;
-  white-space: nowrap;
-}
-#ver-wl-new-workspace-icon {
-  border: none;
-}
-.ver-wl-mp-inacessible {
-  color: #7c7c7c;
-  font-style: italic;
-}
-.ver-wl-current-user {
-  font-weight: bold;
-}
 .t3icon-ext-upload {
   background: url('../../../../icons/gfx/upload.gif') 1px 1px no-repeat !important;
 }
index bc27bd5..02c6112 100644 (file)
@@ -15,6 +15,9 @@ namespace TYPO3\CMS\Version\ClickMenu;
  */
 
 use TYPO3\CMS\Backend\ClickMenu\ClickMenu;
+use TYPO3\CMS\Core\Imaging\Icon;
+use TYPO3\CMS\Core\Imaging\IconFactory;
+use TYPO3\CMS\Core\Utility\GeneralUtility;
 
 /**
  * "Versioning" item added to click menu of elements.
@@ -22,6 +25,18 @@ use TYPO3\CMS\Backend\ClickMenu\ClickMenu;
 class VersionClickMenu {
 
        /**
+        * @var IconFactory
+        */
+       protected $iconFactory;
+
+       /**
+        * Initialize
+        */
+       public function __construct() {
+               $this->iconFactory = GeneralUtility::makeInstance(IconFactory::class);
+       }
+
+       /**
         * Main function, adding the item to input menuItems array
         *
         * @param ClickMenu $backRef References to parent clickmenu objects.
@@ -43,7 +58,7 @@ class VersionClickMenu {
                        $url = \TYPO3\CMS\Backend\Utility\BackendUtility::getModuleUrl('web_txversionM1', array('table' => $table, 'uid' => $uid));
                        $localItems[] = $backRef->linkItem(
                                $GLOBALS['LANG']->getLLL('title', $LL),
-                               $backRef->excludeIcon('<span class="t3-icon fa fa-refresh"></span>'),
+                               $backRef->excludeIcon($this->iconFactory->getIcon('actions-version-open', Icon::SIZE_SMALL)),
                                $backRef->urlRefForCM($url),
                                TRUE
                        );
index 6ebe9ee..ffe8e40 100644 (file)
@@ -17,6 +17,7 @@ namespace TYPO3\CMS\Version\Controller;
 use TYPO3\CMS\Core\Imaging\Icon;
 use TYPO3\CMS\Core\Imaging\IconFactory;
 use TYPO3\CMS\Core\Utility\ArrayUtility;
+use TYPO3\CMS\Core\Utility\DiffUtility;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Backend\Utility\BackendUtility;
 use TYPO3\CMS\Backend\Utility\IconUtility;
@@ -147,11 +148,7 @@ class VersionModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass
                // Draw the header.
                $this->doc = GeneralUtility::makeInstance(\TYPO3\CMS\Backend\Template\DocumentTemplate::class);
                $this->doc->setModuleTemplate('EXT:version/Resources/Private/Templates/version.html');
-               // Add styles
-               $this->doc->inDocStylesArray[$GLOBALS['MCONF']['name']] = '
-.version-diff-1 { background-color: green; }
-.version-diff-2 { background-color: red; }
-';
+
                // Setting up the context sensitive menu:
                $this->doc->getContextMenuCode();
                // Getting input data:
@@ -178,7 +175,6 @@ class VersionModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass
                $pidValue = $this->table === 'pages' ? $this->uid : $record['pid'];
                // Checking access etc.
                if ($this->recordFound && $GLOBALS['TCA'][$this->table]['ctrl']['versioningWS'] && !$this->id) {
-                       $this->doc->form = '<form action="" method="post">';
                        $this->uid = $record['uid'];
                        // Might have changed if new live record was found!
                        // Access check!
@@ -186,25 +182,6 @@ class VersionModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass
                        $this->pageinfo = BackendUtility::readPageAccess($pidValue, $this->perms_clause);
                        $access = is_array($this->pageinfo) ? 1 : 0;
                        if ($pidValue && $access || $GLOBALS['BE_USER']->user['admin'] && !$pidValue) {
-                               // JavaScript
-                               $this->doc->JScode .= $this->doc->wrapScriptTags('
-
-                                               function hlSubelements(origId, verId, over, diffLayer)  {       //
-                                                       if (over) {
-                                                               document.getElementById(\'orig_\'+origId).attributes.getNamedItem("class").nodeValue = \'typo3-ver-hl\';
-                                                               document.getElementById(\'ver_\'+verId).attributes.getNamedItem("class").nodeValue = \'typo3-ver-hl\';
-                                                               if (diffLayer) {
-                                                                       document.getElementById(\'diff_\'+verId).style.visibility = \'visible\';
-                                                               }
-                                                       } else {
-                                                               document.getElementById(\'orig_\'+origId).attributes.getNamedItem("class").nodeValue = \'typo3-ver\';
-                                                               document.getElementById(\'ver_\'+verId).attributes.getNamedItem("class").nodeValue = \'typo3-ver\';
-                                                               if (diffLayer) {
-                                                                       document.getElementById(\'diff_\'+verId).style.visibility = \'hidden\';
-                                                               }
-                                                       }
-                                               }
-                               ');
                                // If another page module was specified, replace the default Page module with the new one
                                $newPageModule = trim($GLOBALS['BE_USER']->getTSConfigVal('options.overridePageModule'));
                                $this->pageModule = BackendUtility::isModuleSetInTBE_MODULES($newPageModule) ? $newPageModule : 'web_layout';
@@ -212,7 +189,6 @@ class VersionModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass
                                $this->publishAccess = $GLOBALS['BE_USER']->workspacePublishAccess($GLOBALS['BE_USER']->workspace);
                                $this->versioningMgm();
                        }
-                       $this->content .= $this->doc->spacer(10);
                        // Setting up the buttons and markers for docheader
                        $docHeaderButtons = $this->getButtons();
                        $markers['CSH'] = $docHeaderButtons['csh'];
@@ -256,7 +232,10 @@ class VersionModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass
                // CSH
                if ($this->recordFound && $GLOBALS['TCA'][$this->table]['ctrl']['versioningWS']) {
                        // View page
-                       $buttons['view'] = '<a href="#" onclick="' . htmlspecialchars(BackendUtility::viewOnClick($this->pageinfo['uid'], '', BackendUtility::BEgetRootLine($this->pageinfo['uid']))) . '" title="' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:labels.showPage', TRUE) . '">' . $this->iconFactory->getIcon('actions-document-view', Icon::SIZE_SMALL) . '</a>';
+                       $buttons['view'] = '
+                               <a href="#" onclick="' . htmlspecialchars(BackendUtility::viewOnClick($this->pageinfo['uid'], '', BackendUtility::BEgetRootLine($this->pageinfo['uid']))) . '" title="' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:labels.showPage', TRUE) . '">
+                                       ' . $this->iconFactory->getIcon('actions-document-view', Icon::SIZE_SMALL) . '
+                               </a>';
                        // Shortcut
                        if ($GLOBALS['BE_USER']->mayMakeShortcut()) {
                                $buttons['shortcut'] = $this->doc->makeShortcutIcon('id, edit_record, pointer, new_unique_uid, search_field, search_levels, showLimit', implode(',', array_keys($this->MOD_MENU)), $this->MCONF['name']);
@@ -286,25 +265,29 @@ class VersionModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass
                $diff_2 = GeneralUtility::_POST('diff_2');
                if (GeneralUtility::_POST('do_diff')) {
                        $content = '';
-                       $content .= '<h3>' . $GLOBALS['LANG']->getLL('diffing') . ':</h3>';
+                       $content .= '<div class="panel panel-space panel-default">';
+                       $content .= '<div class="panel-heading">' . $GLOBALS['LANG']->getLL('diffing') . '</div>';
                        if ($diff_1 && $diff_2) {
                                $diff_1_record = BackendUtility::getRecord($this->table, $diff_1);
                                $diff_2_record = BackendUtility::getRecord($this->table, $diff_2);
                                if (is_array($diff_1_record) && is_array($diff_2_record)) {
-                                       $diffUtility = GeneralUtility::makeInstance(\TYPO3\CMS\Core\Utility\DiffUtility::class);
-                                       $tRows = array();
-                                       $tRows[] = '
-                                                                       <tr class="bgColor5 tableheader">
-                                                                               <td>' . $GLOBALS['LANG']->getLL('fieldname') . '</td>
-                                                                               <td width="98%">' . $GLOBALS['LANG']->getLL('coloredDiffView') . ':</td>
+                                       $diffUtility = GeneralUtility::makeInstance(DiffUtility::class);
+                                       $rows = array();
+                                       $rows[] = '
+                                                                       <tr>
+                                                                               <th>' . $GLOBALS['LANG']->getLL('fieldname') . '</th>
+                                                                               <th width="98%">' . $GLOBALS['LANG']->getLL('coloredDiffView') . ':</th>
                                                                        </tr>
                                                                ';
                                        foreach ($diff_1_record as $fN => $fV) {
                                                if ($GLOBALS['TCA'][$this->table]['columns'][$fN] && $GLOBALS['TCA'][$this->table]['columns'][$fN]['config']['type'] !== 'passthrough' && !GeneralUtility::inList('t3ver_label', $fN)) {
                                                        if ((string)$diff_1_record[$fN] !== (string)$diff_2_record[$fN]) {
-                                                               $diffres = $diffUtility->makeDiffDisplay(BackendUtility::getProcessedValue($this->table, $fN, $diff_2_record[$fN], 0, 1), BackendUtility::getProcessedValue($this->table, $fN, $diff_1_record[$fN], 0, 1));
-                                                               $tRows[] = '
-                                                                       <tr class="bgColor4">
+                                                               $diffres = $diffUtility->makeDiffDisplay(
+                                                                       BackendUtility::getProcessedValue($this->table, $fN, $diff_2_record[$fN], 0, 1),
+                                                                       BackendUtility::getProcessedValue($this->table, $fN, $diff_1_record[$fN], 0, 1)
+                                                               );
+                                                               $rows[] = '
+                                                                       <tr>
                                                                                <td>' . $fN . '</td>
                                                                                <td width="98%">' . $diffres . '</td>
                                                                        </tr>
@@ -312,53 +295,65 @@ class VersionModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass
                                                        }
                                                }
                                        }
-                                       if (count($tRows) > 1) {
-                                               $content .= '<table border="0" cellpadding="1" cellspacing="1" width="100%">' . implode('', $tRows) . '</table><br /><br />';
+                                       if (count($rows) > 1) {
+                                               $content .= '<div class="table-fit"><table class="table">' . implode('', $rows) . '</table></div>';
                                        } else {
-                                               $content .= $GLOBALS['LANG']->getLL('recordsMatchesCompletely');
+                                               $content .= '<div class="panel-body">' . $GLOBALS['LANG']->getLL('recordsMatchesCompletely') . '</div>';
                                        }
                                } else {
-                                       $content .= $GLOBALS['LANG']->getLL('errorRecordsNotFound');
+                                       $content .= '<div class="panel-body">' . $GLOBALS['LANG']->getLL('errorRecordsNotFound') . '</div>';
                                }
                        } else {
-                               $content .= $GLOBALS['LANG']->getLL('errorDiffSources');
+                               $content .= '<div class="panel-body">' . $GLOBALS['LANG']->getLL('errorDiffSources') . '</div>';
                        }
+                       $content .= '</div>';
                }
                // Element:
                $record = BackendUtility::getRecord($this->table, $this->uid);
-               $recordIcon = IconUtility::getSpriteIconForRecord($this->table, $record);
                $recTitle = BackendUtility::getRecordTitle($this->table, $record, TRUE);
                // Display versions:
                $content .= '
-                       ' . $recordIcon . $recTitle . '
                        <form name="theform" action="' . str_replace('&sendToReview=1', '', $this->REQUEST_URI) . '" method="post">
-                       <table border="0" cellspacing="1" cellpadding="1">';
-               $content .= '
-                               <tr class="bgColor5 tableheader">
-                                       <td>&nbsp;</td>
-                                       <td>&nbsp;</td>
-                                       <td title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_title') . '">' . $GLOBALS['LANG']->getLL('tblHeader_title') . '</td>
-                                       <td title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_uid') . '">' . $GLOBALS['LANG']->getLL('tblHeader_uid') . '</td>
-                                       <td title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_t3ver_oid') . '">' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_oid') . '</td>
-                                       <td title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_t3ver_id') . '">' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_id') . '</td>
-                                       <td title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_t3ver_wsid') . '">' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_wsid') . '</td>
-                                       <td title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_t3ver_state') . '">' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_state') . '</td>
-                                       <td title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_t3ver_stage') . '">' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_stage') . '</td>
-                                       <td title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_t3ver_count') . '">' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_count') . '</td>
-                                       <td title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_pid') . '">' . $GLOBALS['LANG']->getLL('tblHeader_pid') . '</td>
-                                       <td title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_t3ver_label') . '">' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_label') . '</td>
-                                       <td colspan="2"><input class="btn btn-default" type="submit" name="do_diff" value="' . $GLOBALS['LANG']->getLL('diff') . '" /></td>
-                               </tr>';
+                               <div class="panel panel-space panel-default">
+                               <div class="panel-heading">' . $recTitle . '</div>
+                                       <div class="table-fit">
+                                               <table class="table">
+                                                       <thead>
+                                                               <tr>
+                                                                       <th colspan="2" class="col-icon"></th>
+                                                                       <th title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_title') . '">' . $GLOBALS['LANG']->getLL('tblHeader_title') . '</th>
+                                                                       <th title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_uid') . '"><i>' . $GLOBALS['LANG']->getLL('tblHeader_uid') . '</i></th>
+                                                                       <th title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_t3ver_oid') . '"><i>' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_oid') . '</i></th>
+                                                                       <th title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_t3ver_id') . '"><i>' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_id') . '</i></th>
+                                                                       <th title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_t3ver_wsid') . '"><i>' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_wsid') . '</i></th>
+                                                                       <th title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_t3ver_state', TRUE) . '"><i>' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_state') . '</i></th>
+                                                                       <th title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_t3ver_stage') . '"><i>' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_stage') . '</i></th>
+                                                                       <th title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_t3ver_count') . '"><i>' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_count') . '</i></th>
+                                                                       <th title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_pid') . '"><i>' . $GLOBALS['LANG']->getLL('tblHeader_pid') . '</i></th>
+                                                                       <th title="' . $GLOBALS['LANG']->getLL('tblHeaderDesc_t3ver_label') . '"><i>' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_label') . '</i></th>
+                                                                       <th></th>
+                                                                       <th colspan="2">
+                                                                               <button class="btn btn-default btn-sm" type="submit"  name="do_diff" value="true">
+                                                                                       ' . $GLOBALS['LANG']->getLL('diff') . '
+                                                                               </button>
+                                                                       </th>
+                                                               </tr>
+                                                       </thead>
+                                                       <tbody>
+                       ';
                $versions = BackendUtility::selectVersionsOfRecord($this->table, $this->uid, '*', $GLOBALS['BE_USER']->workspace);
                foreach ($versions as $row) {
                        $adminLinks = $this->adminLinks($this->table, $row);
                        $content .= '
-                               <tr class="' . ($row['uid'] != $this->uid ? 'bgColor4' : 'bgColor2 tableheader') . '">
-                                       <td>' . ($row['uid'] != $this->uid ?
-                                               '<a href="' . $this->doc->issueCommand('&cmd[' . $this->table . '][' . $this->uid . '][version][swapWith]=' . $row['uid'] . '&cmd[' . $this->table . '][' . $this->uid . '][version][action]=swap') . '" title="' . $GLOBALS['LANG']->getLL('swapWithCurrent', TRUE) . '">' . IconUtility::getSpriteIcon('actions-version-swap-version') . '</a>' :
-                                                       IconUtility::getSpriteIcon('status-status-current', array('title' => $GLOBALS['LANG']->getLL('currentOnlineVersion', TRUE)))) . '</td>
-                                       <td nowrap="nowrap">' . $adminLinks . '</td>
-                                       <td nowrap="nowrap">' . BackendUtility::getRecordTitle($this->table, $row, TRUE) . '</td>
+                               <tr' . ($row['uid'] != $this->uid ? '' : ' class="active"') . '>
+                                       <td  class="col-icon">' .
+                                               ($row['uid'] != $this->uid ?
+                                                       '<a href="' . $this->doc->issueCommand('&cmd[' . $this->table . '][' . $this->uid . '][version][swapWith]=' . $row['uid'] . '&cmd[' . $this->table . '][' . $this->uid . '][version][action]=swap') . '" title="' . $GLOBALS['LANG']->getLL('swapWithCurrent', TRUE) . '">' . $this->iconFactory->getIcon('actions-version-swap-version', Icon::SIZE_SMALL) . '</a>' :
+                                                       '<span title="' . $GLOBALS['LANG']->getLL('currentOnlineVersion', TRUE) . '">' . $this->iconFactory->getIcon('status-status-current', Icon::SIZE_SMALL) . '</span>'
+                                               ) . '
+                                       </td>
+                                       <td  class="col-icon">' . IconUtility::getSpriteIconForRecord($this->table, $row) . '</td>
+                                       <td>' . BackendUtility::getRecordTitle($this->table, $row, TRUE) . '</td>
                                        <td>' . $row['uid'] . '</td>
                                        <td>' . $row['t3ver_oid'] . '</td>
                                        <td>' . $row['t3ver_id'] . '</td>
@@ -367,40 +362,57 @@ class VersionModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass
                                        <td>' . $row['t3ver_stage'] . '</td>
                                        <td>' . $row['t3ver_count'] . '</td>
                                        <td>' . $row['pid'] . '</td>
-                                       <td nowrap="nowrap"><a href="#" onclick="' . htmlspecialchars(BackendUtility::editOnClick('&edit[' . $this->table . '][' . $row['uid'] . ']=edit&columnsOnly=t3ver_label')) . '" title="' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:cm.edit', TRUE) . '">' . IconUtility::getSpriteIcon('actions-document-open') . '</a>' . htmlspecialchars($row['t3ver_label']) . '</td>
-                                       <td class="version-diff-1"><input type="radio" name="diff_1" value="' . $row['uid'] . '"' . ($diff_1 == $row['uid'] ? ' checked="checked"' : '') . '/></td>
-                                       <td class="version-diff-2"><input type="radio" name="diff_2" value="' . $row['uid'] . '"' . ($diff_2 == $row['uid'] ? ' checked="checked"' : '') . '/></td>
+                                       <td>
+                                               <a href="#" onclick="' . htmlspecialchars(BackendUtility::editOnClick('&edit[' . $this->table . '][' . $row['uid'] . ']=edit&columnsOnly=t3ver_label')) . '" title="' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:cm.edit', TRUE) . '">
+                                                       ' . $this->iconFactory->getIcon('actions-document-open', Icon::SIZE_SMALL) . '
+                                               </a>' . htmlspecialchars($row['t3ver_label']) . '
+                                       </td>
+                                       <td class="col-control">' . $adminLinks . '</td>
+                                       <td class="text-center success"><input type="radio" name="diff_1" value="' . $row['uid'] . '"' . ($diff_1 == $row['uid'] ? ' checked="checked"' : '') . '/></td>
+                                       <td class="text-center danger"><input type="radio" name="diff_2" value="' . $row['uid'] . '"' . ($diff_2 == $row['uid'] ? ' checked="checked"' : '') . '/></td>
                                </tr>';
                        // Show sub-content if the table is pages AND it is not the online branch (because that will mostly render the WHOLE tree below - not smart;)
-                       if ($this->table == 'pages' && $row['uid'] != $this->uid) {
+                       if ($this->table === 'pages' && $row['uid'] != $this->uid) {
                                $sub = $this->pageSubContent($row['uid']);
                                if ($sub) {
                                        $content .= '
                                                <tr>
-                                                       <td></td>
-                                                       <td></td>
-                                                       <td colspan="10">' . $sub . '</td>
                                                        <td colspan="2"></td>
+                                                       <td colspan="11">' . $sub . '</td>
+                                                       <td class="success"></td>
+                                                       <td class="danger"></td>
                                                </tr>';
                                }
                        }
                }
-               $content .= '</table></form>';
+               $content .= '
+                                                       </tbody>
+                                               </table>
+                                       </div>
+                               </div>
+                       </form>';
                $this->content .= $this->doc->section($GLOBALS['LANG']->getLL('title'), $content, 0, 1);
                // Create new:
                $content = '
-
                        <form action="' . htmlspecialchars(BackendUtility::getModuleUrl('tce_db')) . '" method="post">
-                       ' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_label') . ': <input type="text" name="cmd[' . $this->table . '][' . $this->uid . '][version][label]" /><br />
-                       <br /><input type="hidden" name="cmd[' . $this->table . '][' . $this->uid . '][version][action]" value="new" />
-                       <input type="hidden" name="prErr" value="1" />
-                       <input type="hidden" name="redirect" value="' . htmlspecialchars($this->REQUEST_URI) . '" />
-                       <input class="btn btn-default" type="submit" name="_" value="' . $GLOBALS['LANG']->getLL('createNewVersion') . '" />
-                       ' . \TYPO3\CMS\Backend\Form\FormEngine::getHiddenTokenField('tceAction') . '
+                               <div class="row">
+                                       <div class="col-sm-6 col-md-4 col-lg-3">
+                                               <div class="form-group">
+                                                       <label for="typo3-new-version-label">' . $GLOBALS['LANG']->getLL('tblHeader_t3ver_label') . '</label>
+                                                       <input id="typo3-new-version-label" class="form-control" type="text" name="cmd[' . $this->table . '][' . $this->uid . '][version][label]" />
+                                               </div>
+                                               <div class="form-group">
+                                                       <input type="hidden" name="cmd[' . $this->table . '][' . $this->uid . '][version][action]" value="new" />
+                                                       <input type="hidden" name="prErr" value="1" />
+                                                       <input type="hidden" name="redirect" value="' . htmlspecialchars($this->REQUEST_URI) . '" />
+                                                       <input class="btn btn-default" type="submit" name="_" value="' . $GLOBALS['LANG']->getLL('createNewVersion') . '" />
+                                                       ' . \TYPO3\CMS\Backend\Form\FormEngine::getHiddenTokenField('tceAction') . '
+                                               </div>
+                                       </div>
+                               </div>
                        </form>
 
                ';
-               $this->content .= $this->doc->spacer(15);
                $this->content .= $this->doc->section($GLOBALS['LANG']->getLL('createNewVersion'), $content, 0, 1);
        }
 
@@ -415,26 +427,28 @@ class VersionModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass
                $tableNames = ArrayUtility::removeArrayEntryByValue(array_keys($GLOBALS['TCA']), 'pages');
                $tableNames[] = 'pages';
                $content = '';
-               foreach ($tableNames as $tN) {
+               foreach ($tableNames as $table) {
                        // Basically list ALL tables - not only those being copied might be found!
-                       $mres = $GLOBALS['TYPO3_DB']->exec_SELECTquery('*', $tN, 'pid=' . (int)$pid . BackendUtility::deleteClause($tN), '', $GLOBALS['TCA'][$tN]['ctrl']['sortby'] ? $GLOBALS['TCA'][$tN]['ctrl']['sortby'] : '');
+                       $mres = $GLOBALS['TYPO3_DB']->exec_SELECTquery('*', $table, 'pid=' . (int)$pid . BackendUtility::deleteClause($table), '', $GLOBALS['TCA'][$table]['ctrl']['sortby'] ? $GLOBALS['TCA'][$table]['ctrl']['sortby'] : '');
                        if ($GLOBALS['TYPO3_DB']->sql_num_rows($mres)) {
                                $content .= '
-                                       <tr>
-                                               <td colspan="4" class="' . ($GLOBALS['TCA'][$tN]['ctrl']['versioning_followPages'] ? 'bgColor6' : ($tN == 'pages' ? 'bgColor5' : 'bgColor-10')) . '"' . (!$GLOBALS['TCA'][$tN]['ctrl']['versioning_followPages'] && $tN !== 'pages' ? ' style="color: #666666; font-style:italic;"' : '') . '>' . $tN . '</td>
-                                       </tr>';
+                                       <table class="table">
+                                               <tr>
+                                                       <th class="col-icon">' . IconUtility::getSpriteIconForRecord($table, array()) . '</th>
+                                                       <th class="col-title">' . $GLOBALS['LANG']->sL($GLOBALS['TCA'][$table]['ctrl']['title'], TRUE) . '</th>
+                                                       <th></th>
+                                                       <th></th>
+                                               </tr>';
                                while ($subrow = $GLOBALS['TYPO3_DB']->sql_fetch_assoc($mres)) {
-                                       $ownVer = $this->lookForOwnVersions($tN, $subrow['uid']);
+                                       $ownVer = $this->lookForOwnVersions($table, $subrow['uid']);
                                        $content .= '
                                                <tr>
-                                                       <td>' . $this->adminLinks($tN, $subrow) . '</td>
-                                                       <td>' . $subrow['uid'] . '</td>
-                                                       ' . ($ownVer > 1 ? '<td style="font-weight: bold; background-color: yellow;"><a href="' .
-                                                       htmlspecialchars(BackendUtility::getModuleUrl('web_txversionM1', array('table' => $tN, 'uid' => $subrow['uid']))) .
-                                                       '">' . ($ownVer - 1) . '</a></td>' : '<td></td>') . '
-                                                       <td width="98%">' . BackendUtility::getRecordTitle($tN, $subrow, TRUE) . '</td>
+                                                       <td class="col-icon">' . IconUtility::getSpriteIconForRecord($table, $subrow) . '</td>
+                                                       <td class="col-title">' . BackendUtility::getRecordTitle($table, $subrow, TRUE) . '</td>
+                                                       <td>' . ($ownVer > 1 ? '<a href="' . htmlspecialchars(BackendUtility::getModuleUrl('web_txversionM1', array('table' => $table, 'uid' => $subrow['uid']))) . '">' . ($ownVer - 1) . '</a>' : '') . '</td>
+                                                       <td class="col-control">' . $this->adminLinks($table, $subrow) . '</td>
                                                </tr>';
-                                       if ($tN == 'pages' && $c < 100) {
+                                       if ($table == 'pages' && $c < 100) {
                                                $sub = $this->pageSubContent($subrow['uid'], $c + 1);
                                                if ($sub) {
                                                        $content .= '
@@ -447,10 +461,11 @@ class VersionModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass
                                                }
                                        }
                                }
+                               $content .= '</table>';
                        }
                        $GLOBALS['TYPO3_DB']->sql_free_result($mres);
                }
-               return $content ? '<table border="1" cellpadding="1" cellspacing="0" width="100%">' . $content . '</table>' : '';
+               return $content;
        }
 
        /**
@@ -477,9 +492,9 @@ class VersionModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass
         */
        public function adminLinks($table, $row) {
                // Edit link:
-               $adminLink = '<a href="#" onclick="' . htmlspecialchars(BackendUtility::editOnClick('&edit[' . $table . '][' . $row['uid'] . ']=edit')) . '" title="' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:cm.edit', TRUE) . '">' . IconUtility::getSpriteIcon('actions-document-open') . '</a>';
+               $adminLink = '<a class="btn btn-default" href="#" onclick="' . htmlspecialchars(BackendUtility::editOnClick('&edit[' . $table . '][' . $row['uid'] . ']=edit')) . '" title="' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:cm.edit', TRUE) . '">' . $this->iconFactory->getIcon('actions-document-open', Icon::SIZE_SMALL) . '</a>';
                // Delete link:
-               $adminLink .= '<a href="' . htmlspecialchars($this->doc->issueCommand('&cmd[' . $table . '][' . $row['uid'] . '][delete]=1')) . '" title="' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:cm.delete', TRUE) . '">' . $this->iconFactory->getIcon('actions-edit-delete', Icon::SIZE_SMALL) . '</a>';
+               $adminLink .= '<a class="btn btn-default" href="' . htmlspecialchars($this->doc->issueCommand('&cmd[' . $table . '][' . $row['uid'] . '][delete]=1')) . '" title="' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:cm.delete', TRUE) . '">' . $this->iconFactory->getIcon('actions-edit-delete', Icon::SIZE_SMALL) . '</a>';
                if ($table === 'pages') {
                        // If another page module was specified, replace the default Page module with the new one
                        $newPageModule = trim($GLOBALS['BE_USER']->getTSConfigVal('options.overridePageModule'));
@@ -487,18 +502,18 @@ class VersionModuleController extends \TYPO3\CMS\Backend\Module\BaseScriptClass
                        // Perform some acccess checks:
                        $a_wl = $GLOBALS['BE_USER']->check('modules', 'web_list');
                        $a_wp = $GLOBALS['BE_USER']->check('modules', $pageModule);
-                       $adminLink .= '<a href="#" onclick="top.loadEditId(' . $row['uid'] . ');top.goToModule(\'' . $pageModule . '\'); return false;">' . IconUtility::getSpriteIcon('actions-page-open') . '</a>';
-                       $adminLink .= '<a href="#" onclick="top.loadEditId(' . $row['uid'] . ');top.goToModule(\'web_list\'); return false;">' . IconUtility::getSpriteIcon('actions-system-list-open') . '</a>';
+                       $adminLink .= '<a class="btn btn-default" href="#" onclick="top.loadEditId(' . $row['uid'] . ');top.goToModule(\'' . $pageModule . '\'); return false;">' . $this->iconFactory->getIcon('actions-page-open', Icon::SIZE_SMALL) . '</a>';
+                       $adminLink .= '<a class="btn btn-default" href="#" onclick="top.loadEditId(' . $row['uid'] . ');top.goToModule(\'web_list\'); return false;">' . $this->iconFactory->getIcon('actions-system-list-open', Icon::SIZE_SMALL) . '</a>';
                        // "View page" icon is added:
-                       $adminLink .= '<a href="#" onclick="' . htmlspecialchars(BackendUtility::viewOnClick($row['uid'], '', BackendUtility::BEgetRootLine($row['uid']))) . '">' . $this->iconFactory->getIcon('actions-document-view', Icon::SIZE_SMALL) . '</a>';
+                       $adminLink .= '<a class="btn btn-default" href="#" onclick="' . htmlspecialchars(BackendUtility::viewOnClick($row['uid'], '', BackendUtility::BEgetRootLine($row['uid']))) . '">' . $this->iconFactory->getIcon('actions-document-view', Icon::SIZE_SMALL) . '</a>';
                } else {
                        if ($row['pid'] == -1) {
                                $getVars = '&ADMCMD_vPrev[' . rawurlencode(($table . ':' . $row['t3ver_oid'])) . ']=' . $row['uid'];
                                // "View page" icon is added:
-                               $adminLink .= '<a href="#" onclick="' . htmlspecialchars(BackendUtility::viewOnClick($row['_REAL_PID'], '', BackendUtility::BEgetRootLine($row['_REAL_PID']), '', '', $getVars)) . '">' . $this->iconFactory->getIcon('actions-document-view', Icon::SIZE_SMALL) . '</a>';
+                               $adminLink .= '<a class="btn btn-default" href="#" onclick="' . htmlspecialchars(BackendUtility::viewOnClick($row['_REAL_PID'], '', BackendUtility::BEgetRootLine($row['_REAL_PID']), '', '', $getVars)) . '">' . $this->iconFactory->getIcon('actions-document-view', Icon::SIZE_SMALL) . '</a>';
                        }
                }
-               return $adminLink;
+               return '<div class="btn-group btn-group-sm" role="group">' . $adminLink . '</div>';
        }
 
 }
index bfce0c7..9808eed 100644 (file)
@@ -13,6 +13,10 @@ namespace TYPO3\CMS\Version\View;
  *
  * The TYPO3 project - inspiring people to share!
  */
+
+use TYPO3\CMS\Core\Imaging\Icon;
+use TYPO3\CMS\Core\Imaging\IconFactory;
+use TYPO3\CMS\Backend\Utility\BackendUtility;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 
 /**
@@ -36,14 +40,13 @@ class VersionView {
                }
                if ($GLOBALS['BE_USER']->workspace == 0) {
                        // Get Current page record:
-                       $curPage = \TYPO3\CMS\Backend\Utility\BackendUtility::getRecord('pages', $id);
+                       $curPage = BackendUtility::getRecord('pages', $id);
                        // If the selected page is not online, find the right ID
                        $onlineId = $curPage['pid'] == -1 ? $curPage['t3ver_oid'] : $id;
                        // Select all versions of online version:
-                       $versions = \TYPO3\CMS\Backend\Utility\BackendUtility::selectVersionsOfRecord('pages', $onlineId, 'uid,pid,t3ver_label,t3ver_oid,t3ver_wsid,t3ver_id');
+                       $versions = BackendUtility::selectVersionsOfRecord('pages', $onlineId, 'uid,pid,t3ver_label,t3ver_oid,t3ver_wsid,t3ver_id');
                        // If more than one was found...:
                        if (count($versions) > 1) {
-                               $selectorLabel = '<strong>' . $GLOBALS['LANG']->sL('LLL:EXT:version/Resources/Private/Language/locallang.xlf:versionSelect.label', TRUE) . '</strong>';
                                // Create selector box entries:
                                $opt = array();
                                foreach ($versions as $vRow) {
@@ -55,39 +58,49 @@ class VersionView {
                                        }
                                        $opt[] = '<option value="' . htmlspecialchars(GeneralUtility::linkThisScript(array('id' => $vRow['uid']))) . '"' . ($id == $vRow['uid'] ? ' selected="selected"' : '') . '>' . htmlspecialchars($label) . '</option>';
                                }
+                               /** @var $iconFactory \TYPO3\CMS\Core\Imaging\IconFactory */
+                               $iconFactory = GeneralUtility::makeInstance(IconFactory::class);
                                // Add management link:
-                               $management = '<input type="button" value="' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:ver.mgm', TRUE) . '" onclick="window.location.href=\'' . htmlspecialchars(\TYPO3\CMS\Backend\Utility\BackendUtility::getModuleUrl('web_txversionM1', array('table' => 'pages', 'uid' => $onlineId))) . '\';" />';
+                               $management = '
+                                       <a class="btn btn-default" href="' . htmlspecialchars(\TYPO3\CMS\Backend\Utility\BackendUtility::getModuleUrl('web_txversionM1', array('table' => 'pages', 'uid' => $onlineId))) . '">
+                                               ' . $iconFactory->getIcon('actions-version-open', Icon::SIZE_SMALL) . '
+                                               ' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:ver.mgm', TRUE) . '
+                                       </a>';
                                // Create onchange handler:
                                $onChange = 'window.location.href=this.options[this.selectedIndex].value;';
                                // Controls:
                                if ($id == $onlineId) {
-                                       $controls = '<strong>' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:ver.online', TRUE) . '</strong>';
+                                       $controls = '<strong class="text-success">' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:ver.online', TRUE) . '</strong>';
                                } elseif (!$noAction) {
                                        $href = $GLOBALS['TBE_TEMPLATE']->issueCommand(
                                                '&cmd[pages][' . $onlineId . '][version][swapWith]=' . $id . '&cmd[pages][' . $onlineId . '][version][action]=swap',
                                                GeneralUtility::linkThisScript(array('id' => $onlineId))
                                        );
-                                       $controls = '<a href="' . htmlspecialchars($href) . '" class="text-nowrap">' . \TYPO3\CMS\Backend\Utility\IconUtility::getSpriteIcon('actions-version-swap-version', array(
-                                               'title' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:ver.swapPage', TRUE),
-                                               'style' => 'margin-left:5px;vertical-align:bottom;'
-                                       )) . '<strong>' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:ver.swap', TRUE) . '</strong></a>';
+                                       $controls = '
+                                               <a href="' . htmlspecialchars($href) . '" class="btn btn-default" title="' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:ver.swapPage', TRUE) . '">
+                                                       ' . $iconFactory->getIcon('actions-version-swap-version', Icon::SIZE_SMALL) . '
+                                                       ' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:ver.swap', TRUE) . '
+                                               </a>';
                                }
                                // Write out HTML code:
                                return '
                                        <!--
                                                Version selector:
                                        -->
-                                       <table border="0" cellpadding="0" cellspacing="0" id="typo3-versionSelector">
-                                               <tr>
-                                                       <td>' . $selectorLabel . '</td>
-                                                       <td>
-                                                               <select onchange="' . htmlspecialchars($onChange) . '">
-                                                                       ' . implode('', $opt) . '
-                                                               </select></td>
-                                                       <td>' . $controls . '</td>
-                                                       <td>' . $management . '</td>
-                                               </tr>
-                                       </table>
+                                       <div id="typo3-version-selector" class="form-inline form-inline-spaced">
+                                               <div class="form-group">
+                                                       <label for="version-selector">' . $GLOBALS['LANG']->sL('LLL:EXT:version/Resources/Private/Language/locallang.xlf:versionSelect.label', TRUE) . '</label>
+                                                       <select id="version-selector" class="form-control" onchange="' . htmlspecialchars($onChange) . '">
+                                                               ' . implode('', $opt) . '
+                                                       </select>
+                                               </div>
+                                               <div class="form-group">
+                                                       ' . $controls . '
+                                               </div>
+                                               <div class="form-group">
+                                                       ' . $management . '
+                                               </div>
+                                       </div>
                                ';
                        }
                }