From 078aab76d8601f8b666564df281548700c9b8845 Mon Sep 17 00:00:00 2001 From: Jan Drewniak Date: Thu, 18 Apr 2019 20:08:15 +0200 Subject: [PATCH] Adds AMC styles for action=history page Styles the action=history page to resemble it's desktop counterpart for users in AMC mode. Bug: T219895 Change-Id: Ide359724a4628f69ef03acee7718d70c698b8faf --- includes/skins/SkinMinerva.php | 6 + minerva.less/minerva.mixins.less | 6 + .../mediawiki.action.history.styles.less | 234 ++++++++++++++++-- 3 files changed, 226 insertions(+), 20 deletions(-) diff --git a/includes/skins/SkinMinerva.php b/includes/skins/SkinMinerva.php index 239c86c..dd26a9e 100644 --- a/includes/skins/SkinMinerva.php +++ b/includes/skins/SkinMinerva.php @@ -1141,6 +1141,7 @@ class SkinMinerva extends SkinTemplate { $modules = []; $user = $this->getUser(); $title = $this->getTitle(); + $action = Action::getActionName( $this->getContext() ); if ( !$title->isSpecialPage() && $this->isAllowedPageAction( 'watch' ) ) { // Explicitly add the mobile watchstar code. @@ -1166,6 +1167,11 @@ class SkinMinerva extends SkinTemplate { if ( $this->skinOptions->get( SkinOptions::OPTION_SHARE_BUTTON ) ) { $modules[] = 'skins.minerva.share'; } + + if ( $action === 'history' ) { + $modules[] = 'mediawiki.action.history'; + } + return $modules; } diff --git a/minerva.less/minerva.mixins.less b/minerva.less/minerva.mixins.less index 689314f..0b1d04d 100644 --- a/minerva.less/minerva.mixins.less +++ b/minerva.less/minerva.mixins.less @@ -11,6 +11,12 @@ resize: none; } +.clearfix() { + display: block; + content: ''; + clear: both; +} + // Mixins for history, contributions, watchlist and recent changes' changes list .changeslist-minor-edit() { background-color: @colorGray14; diff --git a/skinStyles/mediawiki.action.history.styles.less b/skinStyles/mediawiki.action.history.styles.less index 8be7446..df8f20c 100644 --- a/skinStyles/mediawiki.action.history.styles.less +++ b/skinStyles/mediawiki.action.history.styles.less @@ -1,10 +1,18 @@ @import '../minerva.less/minerva.mixins'; +@import '../minerva.less/minerva.variables'; +@import 'mediawiki.ui/variables'; +@import 'mediawiki.ui/mixins.buttons'; .action-history { #mw-content-text > form { margin: 0; } + // TODO: Show the filters when show/hide functionality is enabled on Minerva. + .oo-ui-panelLayout-padded.oo-ui-panelLayout-framed { + display: none; + } + #pagehistory { padding: 0; @@ -14,26 +22,10 @@ } } -.mw-history-compareselectedversions, -.mw-history-legend { - font-size: 0.8em; -} - -.minerva--amc-enabled { - #pagehistory input { - margin-right: 10px; - } - - #pagehistory { - padding: 0; - - li { - min-height: inherit; - padding-bottom: 0; - } - } -} - +/** + * Non-AMC mode styling for the action=history page. + * Meant to mimic the look of the mobile Special:History page. + */ .minerva--amc-disabled { .mw-rollback-link, .mw-tag-markers, @@ -113,3 +105,205 @@ } } } + +/** + * AMC-mode styling for action=history page. + * Meant to make the page resemble the desktop version. + */ +.minerva--amc-enabled.action-history { + // the margin value used to create a "faux" column after the + // radio buttons. + @revision-selectors-width: 50px; + + // form element wrapping history page content. Overrides #mw-content-text > form + // for tablet widths. + #mw-history-compare { + width: 100%; + max-width: 100%; + } + + // The large "Compare selected revisions" button container + .mw-history-compareselectedversions { + position: sticky; + position: -webkit-sticky; + top: 0; + background: @skinContentBgColor; + z-index: @z-indexOverlay; + + // "Compare selected revisions" button + .mw-history-compareselectedversions-button { + .mw-ui-button-colors-primary( @colorProgressive, @colorProgressiveHighlight, @colorProgressiveActive ); + width: 100%; + max-width: 100%; + -webkit-appearance: unset; + font-weight: bold; + border-radius: 2px; + margin: 10px 0; + } + + // Admin specific "change visibility of selected revisions" buttons. + .mw-history-revisionactions, + .mw-checkbox-toggle-controls { + display: none; + } + + // Second large "Compare selected revisions" button container at bottom of page + & ~ .mw-history-compareselectedversions { + // hide second "Compare selected revisions" button near bottom + .mw-history-compareselectedversions-button { + display: none; + } + + // show second "Change visibility of selected revisions" button near bottom + .mw-history-revisionactions, + .mw-checkbox-toggle-controls { + display: block; + } + } + } + + // "Change visibility of selected revisions" button (for admins only) + .mw-history-revisiondelete-button { + .mw-ui-button(); + .mw-ui-button-states(); + background-color: @colorGray15; + margin-bottom: 1em; + } + + #pagehistory { + margin-bottom: 24px; + + li { + min-height: inherit; + padding: 12px 0; + font-size: 0.85em; + } + + li:after { + .clearfix(); + } + + // diff radio buttons, admin revision-delete checkbox + input[ type='radio' ], + input[ type='checkbox' ] { + float: left; + position: relative; + display: inline-block; + vertical-align: baseline; + // aligning checkboxes with text + top: 5px; + margin-right: 10px; + // FIXME: Overrides the border: 0 in reset.less + // When that reset rule doesn't exist, neither should this. + border: 1px solid @grayLight; + } + + // FIXME: Override the background: none; in reset.less. + // When that reset rule doesn't exist, neither should this. + input[ type='radio' ] { + background: @grayMediumDark; + } + + // checkbox appears slightly smaller than radio buttons, + // moving down 6px to vertically center. + input[ type='checkbox' ] { + top: 6px; + } + + // (cur|prev) links + .mw-history-histlinks { + float: right; + } + + // date + .mw-changeslist-date { + float: left; + font-weight: bold; + } + + // user name + .history-user { + float: left; + // margin separates the entire username (talk | contrib) block + // from the (cur|prev) links on the right. Approximates a   + margin-right: 0.5em; + + .mw-userlink { + // margin separates the username + // from the (talk | contrib) links. Approximates a   + margin-right: 0.5em; + } + } + + // container for rollback, undo buttons + .mw-changeslist-links:not( .mw-usertoollinks ):not( .mw-history-histlinks ) { + float: right; + font-size: 0.85em; + + &:after { + .clearfix(); + } + + // removing parentheses around undo button + & > span:before { + content: ''; + } + + & > span:after { + content: ''; + } + + // rollback edit link + .mw-rollback-link a { + // separating rollback link from undo link. + margin-left: 1em; + } + + // undo link, styled as button + .mw-history-undo a, .mw-rollback-link a { + float: right; + background-color: @colorGray15; + color: @colorText; + text-decoration: none; + .mw-ui-button(); + .mw-ui-button-states(); + } + } + + // edit summary + .comment { + // meant to give space for the undo button to the right of + // the revision description. + width: 65%; + } + + // edit summary, +/- bytes changed, tags + .comment, + .mw-diff-bytes, + .mw-tag-markers { + float: left; + clear: left; + } + + // add left margin to create a faux column after the radio buttons + .history-user, + .comment, + .mw-diff-bytes, + .mw-history-tools, + .mw-tag-markers { + margin-left: @revision-selectors-width; + } + } + + // hide page instructions + .mw-history-legend, + // article size + .history-size, + // double dot separator + .mw-changeslist-separator, + // thank link + .mw-thanks-thank-link, + abbr { + display: none; + } +}