Florianschmidtwelzow has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/298029

Change subject: Change Categories button to a list of categories
......................................................................

Change Categories button to a list of categories

The category button is removed and after the "last edited by" bar
a new list of max. 2 categories is added. The second row of the
list can be a link "+ $1 more categories", which has the same
function as the removed categories button (open a list of all
categories).

Bug: T128145
Change-Id: I97d7de723fe72da26c7dbde0a559a13704c7099a
---
M extension.json
M i18n/en.json
M i18n/qqq.json
M includes/skins/MinervaTemplateBeta.php
M includes/skins/SkinMinervaBeta.php
A resources/skins.minerva.categories.styles/categories.less
6 files changed, 180 insertions(+), 17 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend 
refs/changes/29/298029/1

diff --git a/extension.json b/extension.json
index e2348dc..900d9f6 100644
--- a/extension.json
+++ b/extension.json
@@ -1750,6 +1750,15 @@
                                "resources/skins.minerva.categories/init.js"
                        ]
                },
+               "skins.minerva.categories.styles": {
+                       "targets": [
+                               "mobile",
+                               "desktop"
+                       ],
+                       "styles": [
+                               
"resources/skins.minerva.categories.styles/categories.less"
+                       ]
+               },
                "skins.minerva.talk": {
                        "targets": [
                                "mobile",
diff --git a/i18n/en.json b/i18n/en.json
index a131751..fcefb7d 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -58,6 +58,7 @@
        "mobile-frontend-categories-add-wait": "Saving categories, please 
wait.",
        "mobile-frontend-categories-normal": "Content based",
        "mobile-frontend-categories-hidden": "Organizational",
+       "mobile-frontend-categories-morelink-text": "+ $1 more 
{{PLURAL:$1|category|categories}}",
        "mobile-frontend-changeslist-ip": "Anonymous user",
        "mobile-frontend-changeslist-nocomment": "no edit summary",
        "mobile-frontend-cite-error-title": "Error loading citations",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index c1c4098..8cf53d6 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -57,6 +57,7 @@
        "mobile-frontend-categories-add-wait": "Text that displays while 
categories are saved.\nSee also {{msg-mw|mobile-frontend-editor-wait}}",
        "mobile-frontend-categories-normal": "Link message to switch to 
non-hidden categories.\nSee also {{msg-mw|mobile-frontend-categories-hidden}}",
        "mobile-frontend-categories-hidden": "Link message to switch to hidden 
categories.\nSee also 
{{msg-mw|mobile-frontend-categories-normal}}\n{{Identical|Organizational}}",
+       "mobile-frontend-categories-morelink-text": "Link text at the end of 
the categories list which gives the user the option to see the remaining 
categories.\nParameters:\n$1 - Number of remaining categories",
        "mobile-frontend-changeslist-ip": "Label used in mobile 
watchlist/history/recentchanges overview for IP (non-logged-in) 
edits.\n{{Identical|Anonymous user}}",
        "mobile-frontend-changeslist-nocomment": "Text to mark an empty edit 
summary in mobile watchlist/history/recentchanges overview.",
        "mobile-frontend-cite-error-title": "Title for Special:MobileCite error 
page.",
diff --git a/includes/skins/MinervaTemplateBeta.php 
b/includes/skins/MinervaTemplateBeta.php
index 9710a0e..323139a 100644
--- a/includes/skins/MinervaTemplateBeta.php
+++ b/includes/skins/MinervaTemplateBeta.php
@@ -23,25 +23,140 @@
         * @return array A map of the button's friendly name, "categories" to 
its
         *   spec if the button can be displayed.
         */
-       protected function getCategoryButton() {
-               $skin = $this->getSkin();
-               $categories = $skin->getCategoryLinks( false /* don't render 
the heading */ );
+       protected function getPostContentHtml( $data ) {
+               $sk = $this->getSkin();
+               $out = $sk->getOutput();
+               $postContent = parent::getPostContentHtml( $data );
 
-               if ( !$categories ) {
-                       return [];
+               $categories = $out->getCategories();
+               $categoryLinks = $out->getCategoryLinks();
+               if ( !isset( $categoryLinks['normal'] ) ) {
+                       return $postContent;
                }
 
-               return [
-                       'categories' => [
-                               'attributes' => [
-                                       'href' => '#/categories',
-                                       // add hidden class (the overlay works 
only, when JS is enabled (class will
-                                       // be removed in categories/init.js)
-                                       'class' => 'category-button hidden',
+               $categoryLinks = array_flip( $categoryLinks['normal'] );
+
+               $postContent .=
+                       $this->getCategoryListHeader() .
+                       $this->getCategoryList( $categories, $categoryLinks ) .
+                       $this->getCategoryListFooter();
+
+               return $postContent;
+       }
+
+       /**
+        * Creates the header of the category list with an opening ul and the 
title.
+        *
+        * @return string
+        */
+       protected function getCategoryListHeader() {
+               $listHeader = Html::openElement(
+                               'div',
+                               [
+                                       'class' => 
'mw-mobilefrontend-categories post-content'
+                               ]
+                       ) .
+                       Html::element(
+                               'h2',
+                               [
+                                       'class' => 
'mw-mobilefrontend-categories-header',
                                ],
-                               'label' => $this->getMsg( 'categories' )->text()
-                       ],
-               ];
+                               $this->getMsg( 'categories' )->text()
+                       ) .
+                       Html::openElement(
+                               'ul',
+                               [
+                                       'class' => 
'mw-mobilefrontend-categories-list',
+                               ]
+                       );
+
+               return $listHeader;
+       }
+
+       /**
+        * Return the closing footer for the category list.
+        *
+        * @return string
+        */
+       protected function getCategoryListFooter() {
+               return Html::closeElement( 'ul' ) .
+               Html::closeElement( 'div' );
+       }
+
+       /**
+        * Returns the list of categories, which should be added to the output.
+        *
+        * @param $categories
+        * @param $categoryLinks
+        *
+        * @return string
+        */
+       protected function getCategoryList( $categories, $categoryLinks ) {
+               global $wgContLang;
+
+               $listHtml = '';
+               $categoryCount = 1;
+               $showMoreLink = false;
+               foreach ( $categories as $category ) {
+                       if ( $categoryCount === 3 ) {
+                               $showMoreLink = true;
+                               break;
+                       }
+
+                       $title = Title::newFromText( $category, NS_CATEGORY );
+                       if ( isset( $categoryLinks[Linker::link( $title,
+                                       $wgContLang->convertHtml( 
$title->getText() ) )] ) ) {
+
+                               $listHtml .= Html::openElement(
+                                               'a',
+                                               [
+                                                       'href' => 
$title->getLocalURL(),
+                                                       'class' => 
'mw-mobilefrontend-categories-category',
+                                               ]
+                                       ) .
+                                       Html::rawElement(
+                                               'li',
+                                               [],
+                                               $category
+                                       ) .
+                                       Html::closeElement( 'a' );
+
+                               $categoryCount++;
+                       }
+               }
+
+               if ( $showMoreLink ) {
+                       $listHtml .= $this->getCategroyLinkHtml( $categoryLinks 
);
+               }
+
+               return $listHtml;
+       }
+
+       /**
+        * Returns the html of the category link to see the remaining 
categories.
+        * @param $categoryLinks
+        *
+        * @return string
+        */
+       protected function getCategroyLinkHtml( $categoryLinks ) {
+               return Html::openElement(
+                       'a',
+                       [
+                               'href' => '#/categories',
+                               // add hidden class (the overlay works only, 
when JS is enabled (class will
+                               // be removed in categories/init.js)
+                               'class' => 
'mw-mobilefrontend-categories-category category-button hidden',
+                       ]
+               ) .
+               Html::element(
+                       'li',
+                       [],
+                       $this->getMsg( 
'mobile-frontend-categories-morelink-text' )
+                               ->params( count( $categoryLinks ) - 2 )
+                               ->text()
+               ) .
+               Html::closeElement( 'li' );
+
        }
 
        /**
@@ -60,8 +175,6 @@
                                'label' => $this->getMsg( 
'mobile-frontend-donate-button-label' )->text()
                        ];
                }
-
-               $result += $this->getCategoryButton();
 
                return $result;
        }
diff --git a/includes/skins/SkinMinervaBeta.php 
b/includes/skins/SkinMinervaBeta.php
index d004d98..1517f37 100644
--- a/includes/skins/SkinMinervaBeta.php
+++ b/includes/skins/SkinMinervaBeta.php
@@ -126,6 +126,9 @@
                if ( $title->isMainPage() ) {
                        $styles[] = 'skins.minerva.mainPage.beta.styles';
                }
+               if ( $this->getCategoryLinks() ) {
+                       $styles[] = 'skins.minerva.categories.styles';
+               }
                $styles[] = 'skins.minerva.beta.styles';
                $styles[] = 'skins.minerva.content.styles.beta';
                $styles[] = 'skins.minerva.icons.beta.images';
diff --git a/resources/skins.minerva.categories.styles/categories.less 
b/resources/skins.minerva.categories.styles/categories.less
new file mode 100644
index 0000000..ce11299
--- /dev/null
+++ b/resources/skins.minerva.categories.styles/categories.less
@@ -0,0 +1,36 @@
+@import 'minerva.variables';
+
+.mw-mobilefrontend-categories {
+       .mw-mobilefrontend-categories-header {
+               text-transform: uppercase;
+               margin: 1em 0 0.5em;
+               font-size: .8em;
+               font-weight: normal;
+               color: @colorGray9;
+               letter-spacing: 1px;
+       }
+
+       .mw-mobilefrontend-categories-list {
+               .mw-mobilefrontend-categories-category {
+                       color: black;
+                       text-decoration: none;
+                       padding: 0.5em;
+                       display: block;
+                       border: 1px solid rgba(0, 0, 0, 0.2);
+
+                       &.category-button {
+                               color: @colorProgressive;
+                       }
+               }
+
+               .mw-mobilefrontend-categories-category + 
.mw-mobilefrontend-categories-category {
+                       border-top: none;
+               }
+               .mw-mobilefrontend-categories-category:first-child {
+                       border-radius: 2px 2px 0 0;
+               }
+               .mw-mobilefrontend-categories-category:last-child {
+                       border-radius: 0 0 2px 2px;
+               }
+       }
+}

-- 
To view, visit https://gerrit.wikimedia.org/r/298029
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I97d7de723fe72da26c7dbde0a559a13704c7099a
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Florianschmidtwelzow <florian.schmidt.stargatewis...@gmail.com>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to