Changeset 2660

Timestamp:

03/01/2016 08:10:20 PM (9 years ago)

Author:

ocean90

Message:

Translate: Add filters to plugin's contributors page and display the WP locale of a language pack.

See #1388.

Location:

sites/trunk/translate.wordpress.org/public_html/gp-templates-new

Files:

• projects-wp-plugins-contributors.php (modified) (4 diffs)
• projects-wp-plugins-language-packs.php (modified) (2 diffs)
• style.css (modified) (3 diffs)

sites/trunk/translate.wordpress.org/public_html/gp-templates-new/projects-wp-plugins-contributors.php

@@ -44 +44 @@
 
     <h3>Activity</h3>
-    <p>The graph shows the recent activity of your contributors. It's updated once per day.</p>
+    <p>The graph shows the recent activity of your contributors. It&#8217;s updated once per day.</p>
 
     <div class="ct-chart ct-chart-contributors"></div>
@@ -52 +52 @@
     <?php
     if ( $contributors_by_locale ) {
-        echo '<div class="contributors-list-search"><input type="search" placeholder="Filter teams&hellip;" id="contributors-list-search"></div>';
+        ?>
+        <div class="contributors-list-filter">
+            <button type="button" class="button-link filter active" data-filter="all">All</button> |
+            <button type="button" class="button-link filter" data-filter="has-editors">With Editors</button> |
+            <button type="button" class="button-link filter" data-filter="no-editors">Without Editors</button>
+
+            <input type="search" class="search" placeholder="Filter teams&hellip;" id="contributors-list-search">
+        </div>
+        <?php
         echo '<div id="contributors-list" class="contributors-list">';
         foreach ( $contributors_by_locale as $locale_slug => $data ) {
             $locale = GP_Locales::by_slug( $locale_slug );
+            $has_editors = ! empty ( $data['editors'] );
 
             $editors_list = array();
@@ -84 +93 @@
 
             printf(
-                '<div class="contributors-list-box">
+                '<div class="contributors-list-box%s">
                     <h4><span class="locale-name">%s<span> <span class="contributors-count">%s</span> <span class="locale-code">#%s</span></h4>
                     <p><strong>Editors:</strong> %s</p>
                     <p><strong>Contributors:</strong> %s</p>
                 </div>',
+                $has_editors ? ' has-editors' : ' no-editors',
                 $locale->english_name,
                 sprintf( _n( '%s person', '%s persons', $data['count'] ), number_format_i18n( $data['count'] ) ),
@@ -127 +137 @@
             }).show();
         }
+    });
+
+    $( '.contributors-list-filter .filter' ).on( 'click', function() {
+        var $el = $( this ), filter = $el.data( 'filter' );
+
+        $el.siblings( '.active' ).removeClass( 'active' );
+        $el.addClass( 'active' );
+        $( '#contributors-list' ).attr( 'data-current-filter', filter );
     });
 });

sites/trunk/translate.wordpress.org/public_html/gp-templates-new/projects-wp-plugins-language-packs.php

@@ -43 +43 @@
     <h3>Language Packs</h3>
 
-    <p>Language packs are installed automatically if they are available. If no secent</p>
+    <p>Language packs are installed automatically if they are available. Once a locale has reached the threshold for a package build it will be listed here. It also means that you don&#8217;t have to include this language in your plugin anymore.</p>
 
     <?php
@@ -50 +50 @@
         foreach ( $language_packs->translations as $language_pack ) {
             printf(
-                '<li><strong>%s:</strong> Last updated %s for version %s (<a href="%s">zip</a>)</li>',
+                '<li><strong>%s <span class="locale-code">(%s)</span>:</strong> Last updated %s for version %s (<a href="%s">zip</a>)</li>',
                 $language_pack->english_name,
+                $language_pack->language,
                 $language_pack->updated,
                 $language_pack->version,

sites/trunk/translate.wordpress.org/public_html/gp-templates-new/style.css

@@ -1088 +1088 @@
 }
 
+.language-packs-list li strong .locale-code {
+    font-size: 11px;
+    color: #555d66;
+}
+
 .ct-chart-contributors {
     position: relative;
@@ -1212 +1217 @@
 }
 
-.contributors-list-search {
+.contributors-list-filter {
     margin: 15px 0 10px;
     text-align: right;
 }
 
-.contributors-list-search input {
-    margin: 0;
+.contributors-list-filter .search {
+    margin: 0 0 0 10px;
     padding: 2px 4px;
     width: 280px;
@@ -1234 +1239 @@
 }
 
+@media (max-width: 600px) {
+    .contributors-list-filter {
+        text-align: center;
+    }
+
+    .contributors-list-filter .search {
+        display: block;
+        width: 100%;
+        margin: 10px 0;
+    }
+}
+
+/* Buttons that look like links, for a cross of good semantics with the visual */
+.button-link {
+    margin: 0;
+    padding: 0;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    border: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    background: none;
+    outline: none;
+    cursor: pointer;
+    font: inherit;
+    color: #0074a2;
+}
+
+.button-link:hover {
+    color: #2ea2cc;
+}
+
+.contributors-list-filter .filter.active {
+    border-bottom: 1px solid #dfdfdf;
+}
+
+.contributors-list[data-current-filter="has-editors"] .no-editors,
+.contributors-list[data-current-filter="no-editors"] .has-editors {
+    display: none !important;
+}