WordPress.org
Get WordPress

Making WordPress.org

Changeset 8766


Ignore:
Timestamp:
05/09/2019 09:59:52 PM (7 years ago)
Author:
ocean90
Message:

Translate: Split source details into separate <details> elements and add persistent storage for open/close state.

See #4431.

Location:
sites/trunk/wordpress.org/public_html/wp-content/plugins
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/helper-functions.php

    r8758 r8766  
    289289        return $count;
    290290}
     291
     292/**
     293 * Lists file references for a translation.
     294 *
     295 * @param \GP_Project $project Current project.
     296 * @param object      $entry Current translation entry.
     297 */
     298function wporg_references( $project, $entry ) {
     299        ?>
     300        <ul>
     301                <?php
     302                foreach ( $entry->references as $reference ) :
     303                        list( $file, $line ) = array_pad( explode( ':', $reference ), 2, 0 );
     304                        if ( $source_url = $project->source_url( $file, $line ) ) :
     305                                ?>
     306                                <li><a target="_blank" href="<?php echo $source_url; ?>"><?php echo $file.':'.$line ?></a></li>
     307                        <?php
     308                        else :
     309                                echo "<li>$file:$line</li>";
     310                        endif;
     311                endforeach;
     312                ?>
     313        </ul>
     314        <?php
     315}

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/js/editor.js

    r8751 r8766  
    22        var $html = $( 'html' );
    33        var $document = $( document );
     4
     5        function checkStorage() {
     6                var test = 'test',
     7                        result = false;
     8
     9                try {
     10                        window.localStorage.setItem( 'test', test );
     11                        result = window.localStorage.getItem( 'test' ) === test;
     12                        window.localStorage.removeItem( 'test' );
     13                } catch(e) {}
     14
     15                hasStorage = result;
     16                return result;
     17        }
     18
     19        var hasStorage = checkStorage();
    420
    521        // Handle tab view for plural forms.
    … …  
    124140                } );
    125141        }
     142
     143        $gp.editor.keydown  = ( function( original ) {
     144                return function( event ) {
     145                        // Shift-Enter = Save.
     146                        if ( 13 === event.keyCode && event.shiftKey ) {
     147                                var $textarea = $( event.target );
     148
     149                                if ( ! $textarea.val().trim() ) {
     150                                        $gp.notices.error( 'Translation is empty.' );
     151                                        return false;
     152                                }
     153
     154                                // Check plural forms.
     155                                var $textareas = $gp.editor.current.find( '.textareas:not(.active) textarea' );
     156                                var isValid = true;
     157                                $textareas.each( function() {
     158                                        if ( ! this.value.trim() ) {
     159                                                isValid = false;
     160                                        }
     161                                } );
     162
     163                                if ( ! isValid ) {
     164                                        $gp.notices.error( 'Translation is empty.' );
     165                                        return false;
     166                                }
     167
     168                                $gp.editor.save( $gp.editor.current.find( 'button.translation-actions__save' ) );
     169
     170                        // Ctrl-Enter or Ctrl-Shift-B = Copy original.
     171                        } else if (
     172                                ( 13 === event.keyCode && event.ctrlKey ) ||
     173                                ( 66 === event.keyCode && event.shiftKey && event.ctrlKey ) )
     174                        {
     175                                var $button = $gp.editor.current.find( 'button.translation-actions__copy' );
     176
     177                                $button.trigger( 'click' );
     178                        } else {
     179                                return original.apply( $gp.editor, arguments );
     180                        }
     181
     182                        return false;
     183                }
     184        })( $gp.editor.keydown );
     185
     186        // Store the open/close state of <details> element in locale storage and apply state when editor is shown.
     187        var DETAILS_STORE_KEY = 'translate-details-state';
     188        function updateDetailsState( type, state ) {
     189                if ( ! hasStorage ) {
     190                        return;
     191                }
     192
     193                var store  = window.localStorage.getItem( DETAILS_STORE_KEY );
     194                var states = store ? JSON.parse( store ) : {};
     195
     196                states[ type ] = state;
     197
     198                window.localStorage.setItem( DETAILS_STORE_KEY, JSON.stringify( states ) );
     199        }
     200
     201        function toggleDetails( event ) {
     202                var $el = $( event.target ).closest( 'details' );
     203                var isClosed = $el.attr( 'open' ) === 'open'; // Gets closed when open attribute was previously set.
     204                var className = $el.attr( 'class' ).replace( /^(\S*).*/, '$1' );
     205
     206                updateDetailsState( className, isClosed ? 'close' : 'open' );
     207        }
     208
     209        function applyDetailsState() {
     210                if ( ! hasStorage || ! $gp.editor.current.length ) {
     211                        return;
     212                }
     213
     214                var store  = window.localStorage.getItem( DETAILS_STORE_KEY );
     215                var states = store ? JSON.parse( store ) : {};
     216
     217                for ( var type in states ) {
     218                        var state = states[ type ];
     219
     220                        if ( 'open' === state ) {
     221                                $gp.editor.current.find( '.' + type ).attr( 'open', 'open' );
     222                        } else {
     223                                $gp.editor.current.find( '.' + type ).removeAttr( 'open' );
     224                        }
     225                }
     226        }
     227
     228        $gp.editor.show = ( function( original ) {
     229                return function() {
     230                        original.apply( $gp.editor, arguments );
     231
     232                        applyDetailsState();
     233                }
     234        })( $gp.editor.show );
    126235
    127236        $gp.editor.install_hooks = ( function( original ) {
    … …  
    140249                                .on( 'click', 'button.translation-actions__rtl', switchTextDirection )
    141250                                .on( 'focus', 'textarea', textareaAutosize )
     251                                .on( 'click', 'summary', toggleDetails )
    142252                                .on( 'click', 'button.button-menu__toggle', toggleLinkMenu );
    143253                }

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/style.css

    r8751 r8766  
    11body, html {
    22        height: 100%;
     3}
     4
     5body,
     6html,
     7.gp-content,
     8.gp-content textarea,
     9.gp-content input {
     10        color: #191e23;
    311}
    412
    … …  
    313321
    314322table.translations td.translation li {
    315         border-bottom: 1px dotted #eee;
     323        border-bottom: 1px dotted #e2e4e7;
    316324}
    317325
    … …  
    346354table.locale-sub-projects td {
    347355        border: 0;
    348         border-bottom: 1px solid #eee;
    349         border-right: 1px solid #eee;
     356        border-bottom: 1px solid #e2e4e7;
     357        border-right: 1px solid #e2e4e7;
    350358}
    351359
    … …  
    360368table.locale-sub-projects th:first-child,
    361369table.locale-sub-projects td:first-child {
    362         border-left: 1px solid #eee;
     370        border-left: 1px solid #e2e4e7;
    363371}
    364372
    … …  
    447455.editor .meta {
    448456        background: #fff;
    449         border: 1px solid #eee;
     457        border: 1px solid #e2e4e7;
    450458        font-size: 13px;
    451459        margin: 0;
    … …  
    458466.editor .meta h3 {
    459467        text-align: center;
    460         border-bottom: 1px solid #eee;
     468        border-bottom: 1px solid #e2e4e7;
    461469        margin-bottom: 15px;
    462470}
    … …  
    859867        padding: 10px 20px;
    860868        color: #006799;
    861         border-left: 1px solid #eee;
     869        border-left: 1px solid #e2e4e7;
    862870        text-align: center;
    863871}
    … …  
    10281036
    10291037.projects .project-status > div:not(:first-child) {
    1030         border-left: 1px solid #eee;
     1038        border-left: 1px solid #e2e4e7;
    10311039}
    10321040
    … …  
    11611169        color: #509040;
    11621170        padding: 10px 0 10px 15px;
    1163         border-left: 1px solid #eee;
     1171        border-left: 1px solid #e2e4e7;
    11641172}
    11651173
    … …  
    12321240        height: 20px;
    12331241        font: 20px/1 "dashicons";
    1234         border-left: 1px solid #eee;
     1242        border-left: 1px solid #e2e4e7;
    12351243        padding: 5px 0 5px 12px;
    12361244        box-shadow: inset 1px 0 0 #fff;
    … …  
    14971505        float: right;
    14981506        margin: -30px 0 5px 5px;
    1499         background-color: #eee;
     1507        background-color: #e2e4e7;
    15001508        padding: 5px;
    15011509        border: 1px solid #dfdfdf;
    … …  
    18061814.locale-project-contributors-table th {
    18071815        font-weight: bold;
    1808         border-bottom: 1px solid #eee;
     1816        border-bottom: 1px solid #e2e4e7;
    18091817}
    18101818
    … …  
    18591867.locale-project-contributors-table tbody td {
    18601868        padding: 10px 0;
    1861         border-bottom: 1px solid #eee;
     1869        border-bottom: 1px solid #e2e4e7;
    18621870}
    18631871
    … …  
    20022010
    20032011.consistency-table tr {
    2004         border-bottom: 1px solid #eee;
     2012        border-bottom: 1px solid #e2e4e7;
    20052013}
    20062014
    … …  
    21532161        border: 0;
    21542162        background: #fff;
    2155         color: #333;
     2163        color: #191e23;
    21562164        outline: none;
    21572165        padding: 15px 0;
    … …  
    21992207.editor-panel__left {
    22002208        flex: 1;
    2201         border-bottom: 3px solid #eee;
     2209        border-bottom: 3px solid #e2e4e7;
    22022210        min-width: 1%;
    22032211}
    … …  
    22062214        .editor-panel__left {
    22072215                border-bottom: 0;
    2208                 border-right: 3px solid #eee;
     2216                border-right: 3px solid #e2e4e7;
    22092217        }
    22102218}
    … …  
    22192227        align-items: center;
    22202228        justify-content: flex-end;
    2221         border-bottom: 1px solid #eee;
    2222         background-color: #fbfbfb;
     2229        border-bottom: 1px solid #e2e4e7;
     2230        background-color: #f3f4f5;
    22232231        height: 40px;
    22242232}
    … …  
    22552263        letter-spacing: 1px;
    22562264        text-transform: uppercase;
    2257         color: #666;
     2265        color: #191e23;
    22582266}
    22592267
    … …  
    23042312
    23052313.panel-header-actions button:hover {
    2306         background: #eee;
     2314        background: #e2e4e7;
    23072315}
    23082316
    … …  
    23472355
    23482356.panel-content summary:focus {
    2349         color: #0073aa;
     2357        color: #191e23;
    23502358}
    23512359
    … …  
    23712379.source-details {
    23722380        padding: 0 10px;
     2381        font-size: 13px;
     2382}
     2383
     2384.source-details summary {
    23732385        color: #666;
    23742386}
    23752387
    2376 .source-details dl + dl {
    2377         margin-top: 10px;
    2378 }
    2379 
    2380 .source-details dt {
    2381         font-size: 12px;
    2382 }
    2383 
    2384 .source-details dd {
    2385         color: #333;
     2388.source-details details[open] summary {
     2389        margin: 0;
     2390}
     2391
     2392.source-details details + details{
     2393        margin-top: 5px;
    23862394}
    23872395
    … …  
    23912399        border-top: 1px solid;
    23922400        border-bottom: 1px solid;
    2393         border-color: #eee;
     2401        border-color: #e2e4e7;
    23942402        background: #fff;
    23952403}
    … …  
    24122420
    24132421.translation-form-wrapper {
    2414         border-bottom: 1px solid #eee;
     2422        border-bottom: 1px solid #e2e4e7;
    24152423        margin-left: -10px;
    24162424        margin-right: -10px;

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/translation-row-editor.php

    r8751 r8766  
    111111                                        </div>
    112112
    113                                         <details class="source-details">
    114                                                 <summary>Context</summary>
    115 
     113                                        <div class="source-details">
    116114                                                <?php if ( $t->context ): ?>
    117                                                         <dl class="source-details__context">
    118                                                                 <dt><?php _e( 'Context:', 'glotpress' ); ?></dt>
    119                                                                 <dd><span class="context bubble"><?php echo esc_translation( $t->context ); ?></span></dd>
    120                                                         </dl>
     115                                                        <details open class="source-details__context">
     116                                                                <summary>Context</summary>
     117                                                                <span class="context bubble"><?php echo esc_translation( $t->context ); ?></span>
     118                                                        </details>
    121119                                                <?php endif; ?>
    122120                                                <?php if ( $t->extracted_comments ) :
    123121                                                        $comments = trim( preg_replace( '/^translators:/ ', '', $t->extracted_comments ) );
    124122                                                        ?>
    125                                                         <dl class="source-details__comments">
    126                                                                 <dt><?php _e( 'Comment:', 'glotpress' ); ?></dt>
    127                                                                 <dd><?php echo make_clickable( esc_translation( $comments ) ); ?></dd>
    128                                                         </dl>
    129                                                 <?php endif; ?>
    130                                                 <?php references( $project, $t ); ?>
    131                                         </details>
     123                                                        <details open class="source-details__comment">
     124                                                                <summary><?php _e( 'Comment', 'glotpress' ); ?></summary>
     125                                                                <p><?php echo make_clickable( esc_translation( $comments ) ); ?></p>
     126                                                        </details>
     127                                                <?php endif; ?>
     128                                                <?php if ( $t->references ) : ?>
     129                                                        <details class="source-details__references">
     130                                                                <summary>References</summary>
     131                                                                <?php wporg_references( $project, $t ); ?>
     132                                                        </details>
     133                                                <?php endif; ?>
     134                                        </div>
    132135
    133136                                        <div class="translation-wrapper">

  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-translation-suggestions/js/translation-suggestions.js

    r8732 r8766  
    11( function( $ ){
    2         function fetchTranslationMemorySuggestions( $container, originalId, nonce ) {
     2        function fetchSuggestions( $container, apiUrl, originalId, nonce ) {
    33                var xhr = $.ajax( {
    4                         url: window.WPORG_TRANSLATION_MEMORY_API_URL,
     4                        url: apiUrl,
    55                        data: {
    66                                'original': originalId,
    … …  
    3333        function maybeFetchTranslationMemorySuggestions() {
    3434                var $container = $gp.editor.current.find( '.suggestions__translation-memory' );
    35                 if ( ! $container.length ) {
     35                if ( !$container.length ) {
    3636                        return;
    3737                }
    … …  
    4646                var nonce = $container.data( 'nonce' );
    4747
    48                 fetchTranslationMemorySuggestions( $container, originalId , nonce );
    49         }
    50 
    51         function fetchOtherLanguageSuggestions( $container, originalId, nonce ) {
    52                 var xhr = $.ajax( {
    53                         url: window.WPORG_OTHER_LANGUAGES_API_URL,
    54                         data: {
    55                                 'original': originalId,
    56                                 'nonce': nonce
    57                         },
    58                         dataType: 'json'
    59                 } );
    60 
    61                 xhr.done( function( response ) {
    62                         $container.find( '.suggestions__loading-indicator' ).remove();
    63                         if ( response.success ) {
    64                                 $container.append( response.data );
    65                         } else {
    66                                 $container.append( $( '<span/>', { 'text': 'Error while loading suggestions.' } ) );
    67                         }
    68                         $container.addClass( 'initialized' );
    69                 } );
    70 
    71                 xhr.fail( function() {
    72                         $container.find( '.suggestions__loading-indicator' ).remove();
    73                         $container.append( $( '<span/>', { 'text': 'Error while loading suggestions.' } ) );
    74                         $container.addClass( 'initialized' );
    75                 } );
    76 
    77                 xhr.always( function() {
    78                         $container.removeClass( 'fetching' );
    79                 } );
     48                fetchSuggestions( $container, window.WPORG_TRANSLATION_MEMORY_API_URL, originalId, nonce );
    8049        }
    8150
    … …  
    9564                var nonce = $container.data( 'nonce' );
    9665
    97                 fetchOtherLanguageSuggestions( $container, originalId , nonce );
     66                fetchSuggestions( $container, window.WPORG_OTHER_LANGUAGES_API_URL, originalId , nonce );
    9867        }
    9968
    … …  
    12695
    12796                        maybeFetchTranslationMemorySuggestions();
     97                        maybeFetchOtherLanguageSuggestions();
    12898                }
    12999        })( $gp.editor.show );
    … …  
    134104
    135105                        $( $gp.editor.table )
    136                                 .on( 'click', '.translation-suggestion', copySuggestion )
    137                                 .on( 'click', '.suggestions__other-languages summary', maybeFetchOtherLanguageSuggestions );
     106                                .on( 'click', '.translation-suggestion', copySuggestion );
    138107                }
    139108        })( $gp.editor.install_hooks );
Note: See TracChangeset for help on using the changeset viewer.