WordPress.org

Making WordPress.org

Changeset 8751


Ignore:
Timestamp:
05/08/2019 07:33:18 PM (6 months ago)
Author:
ocean90
Message:

Translate: Update editor interface for translations.

  • Increase focus on translation by moving original, context and translation into the same column.
  • Add tabs for plural forms.
  • Move action buttons more closely to textarea.
  • Increase size for textareas.
  • Automatically resize textarea heights.
  • Provide an area for suggestions, see #4430.
  • Add help dialog with support for locale resources, see #3522.
  • Stack columns on mobile.

See #4431.

Location:
sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations
Files:
3 added
6 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/inc/class-plugin.php

    r7833 r8751  
    259259    public function after_setup_theme() {
    260260        register_nav_menu( 'wporg_header_subsite_nav', 'WordPress.org Header Sub-Navigation' );
     261        register_nav_menu( 'wporg_translate_global_resources', 'Global Handbook Resources' );
    261262    }
    262263
  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/footer.php

    r2106 r8751  
    11    </div><!-- gp-content -->
    2     <p id="gp-footer" class="secondary">
    3         <?php printf( __('Proudly powered by <a href="%s" title="Found in translation">GlotPress</a>.'), 'http://glotpress.org/' ); ?>
    4     </p>
     2
    53<?php require WPORGPATH . 'footer.php';
    64
  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/helper-functions.php

    r8502 r8751  
    11<?php
    2 wp_register_style( 'wporg-translate', plugins_url( 'style.css', __FILE__ ), array( 'gp-base' ), '20190324' );
     2wp_register_style(
     3        'wporg-translate',
     4        plugins_url( 'style.css', __FILE__ ),
     5        [ 'gp-base' ],
     6        '20190324'
     7);
    38gp_enqueue_style( 'wporg-translate' );
    49
    5 gp_enqueue_script( 'jquery' );
    6 
    7 wp_register_style( 'chartist', plugins_url( 'css/chartist.min.css', __FILE__ ), array(), '0.9.5' );
    8 wp_register_script( 'chartist', plugins_url( 'js/chartist.min.js', __FILE__ ), array(), '0.9.5' );
     10wp_register_script(
     11    'details-element-polyfill',
     12    plugins_url( 'js/details-element-polyfill.min.js', __FILE__ ),
     13    [],
     14    '2.3.1'
     15);
     16
     17gp_enqueue_script( 'details-element-polyfill' );
     18
     19wp_register_script(
     20    'autosize',
     21    plugins_url( 'js/autosize.min.js', __FILE__ ),
     22    [],
     23    '4.0.2'
     24);
     25
     26wp_register_script(
     27        'wporg-translate-editor',
     28        plugins_url( 'js/editor.js', __FILE__ ),
     29        [ 'gp-editor', 'autosize' ],
     30        '20190506'
     31);
     32
     33wp_register_style(
     34        'chartist',
     35        plugins_url( 'css/chartist.min.css', __FILE__ ),
     36        [],
     37        '0.9.5'
     38);
     39wp_register_script(
     40        'chartist',
     41        plugins_url( 'js/chartist.min.js', __FILE__ ),
     42        [],
     43        '0.9.5'
     44);
     45
     46if ( isset( $template ) && 'translations' === $template ) {
     47    gp_enqueue_script( 'wporg-translate-editor' );
     48}
     49
     50/**
     51 * Prints markup for translations help modal in footer.
     52 */
     53add_action( 'gp_footer', static function() use ( $template, $args ) {
     54    if ( 'translations' === $template && ! empty( $args['locale_slug'] ) ) {
     55        $locale = GP_Locales::by_slug( $args['locale_slug'] );
     56        wporg_translation_help_modal( $locale );
     57    }
     58} );
     59
     60/**
     61 * Prints markup for the translation help dialog.
     62 *
     63 * @param \GP_Locale $locale Locale of the current translation set.
     64 */
     65function wporg_translation_help_modal( $locale ) {
     66    $locale_resources = wporg_get_locale_resources( $locale )
     67    ?>
     68    <div id="wporg-translation-help-modal" class="wporg-translate-modal">
     69        <div class="wporg-translate-modal__overlay">
     70            <div class="wporg-translate-modal__frame" role="dialog" aria-labelledby="wporg-translation-help-modal-headline">
     71                <div class="wporg-translate-modal__header">
     72                    <h1 id="wporg-translation-help-modal-headline" class="wporg-translate-modal__headline">Help</h1>
     73                    <button type="button" aria-label="Close modal" class="wporg-translate-modal__close"><span class="screen-reader-text">Close</span><span aria-hidden="true" class="dashicons dashicons-no-alt"></span></button>
     74                </div>
     75
     76                <div class="wporg-translate-modal__content">
     77                    <div class="wporg-translate-modal__content_primary">
     78                        <h2>Validating Translations</h2>
     79                        <p>After a contributor suggests a string, the string gets a status of “suggested”. In order to transform them into “approved” strings (which will be used in WordPress), a Translation Editor needs to accept (or reject) those suggestions.<br>
     80                            Please give editors a reasonable time to validate suggestions — We are all volunteers.</p>
     81
     82                        <h2>Translation Status</h2>
     83                        <ul class="no-list">
     84                            <li><span style="color: #c1e1b9">◼︎</span> <strong>Current:</strong> Indicates an approved string.</li>
     85                            <li><span style="color: #ffe399">◼︎</span> <strong>Waiting:</strong> Indicates a string that was suggested, but not yet approved by a Translation Editor.</li>
     86                            <li><span style="color: #fbc5a9">◼︎</span> <strong>Fuzzy:</strong> Indicates a “fuzzy” string. Those translations need to be reviewed for accuracy and edited or approved.</li>
     87                            <li><span style="color: #cdc5e1">◼︎</span> <strong>Old:</strong> Indicates a string that was obsoleted by a newer, approved translation.</li>
     88                            <li><span style="color: #dc3232">◼︎</span> <strong>Warning:</strong> Indicates validation warnings. These translations either need to be corrected or their warnings explicitly discarded by a Translation Editor.</li>
     89                        </ul>
     90                    </div>
     91                    <div class="wporg-translate-modal__content_secondary">
     92                        <?php if ( $locale_resources ) : ?>
     93                            <h2><span aria-hidden="true" class="dashicons dashicons-info"></span> Locale Resources for <?php echo esc_html( $locale->english_name ); ?></h2>
     94                            <?php echo wp_kses_post( $locale_resources ); ?>
     95                        <?php endif; ?>
     96
     97                        <h2><span aria-hidden="true" class="dashicons dashicons-admin-page"></span> Global Handbook Resources</h2>
     98                        <?php
     99                        add_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description', 10, 4 );
     100                        wp_nav_menu( [
     101                            'theme_location' => 'wporg_translate_global_resources',
     102                            'fallback_cb'    => false,
     103                            'container'      => false,
     104                            'menu_id'        => 'global-resources',
     105                            'depth'          => 2,
     106                        ] );
     107                        remove_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description' );
     108                        ?>
     109                    </div>
     110                </div>
     111            </div>
     112        </div>
     113    </div>
     114    <?php
     115}
     116
     117/**
     118 * Adds descriptions to navigation items.
     119 *
     120 * @param string  $item_output The menu item output.
     121 * @param WP_Post $item        Menu item object.
     122 * @param int     $depth       Depth of the menu.
     123 * @param array   $args        wp_nav_menu() arguments.
     124 * @return string Menu item with possible description.
     125 */
     126function wporg_add_nav_description( $item_output, $item, $depth, $args ) {
     127    if ( $item->description ) {
     128        $item_output = str_replace(
     129            $args->link_after . '</a>',
     130            $args->link_after . '</a>: <span class="menu-item-description">' . $item->description . '</span>',
     131            $item_output
     132        );
     133    }
     134
     135    return $item_output;
     136}
     137
     138/**
     139 * Retrieves the navigation menu from the assigned Rosetta site.
     140 *
     141 * Output is cached for an hour.
     142 *
     143 * @param \GP_Locale $locale
     144 * @return string The HTML markup of the navigation menu.
     145 */
     146function wporg_get_locale_resources( $locale ) {
     147    if ( empty( $locale->wp_locale ) ) {
     148        return '';
     149    }
     150
     151    $transient_key = 'locale-resources-' . $locale->wp_locale;
     152    $cache         = get_transient( $transient_key );
     153
     154    if ( false !== $cache ) {
     155        return $cache;
     156    }
     157
     158    $result = get_sites( [
     159        'locale'     => $locale->wp_locale,
     160        'network_id' => WPORG_GLOBAL_NETWORK_ID,
     161        'path'       => '/',
     162        'fields'     => 'ids',
     163        'number'     => '1',
     164    ] );
     165    $site_id = array_shift( $result );
     166    if ( ! $site_id ) {
     167        set_transient( $transient_key, '', HOUR_IN_SECONDS );
     168        return '';
     169    }
     170
     171    switch_to_blog( $site_id );
     172
     173    add_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description', 10, 4 );
     174
     175    $menu = wp_nav_menu( [
     176        'theme_location' => 'rosetta_translation_contributor_resources',
     177        'fallback_cb'    => false,
     178        'container'      => false,
     179        'menu_id'        => 'locale-resources',
     180        'depth'          => 2,
     181        'echo'           => false,
     182    ] );
     183
     184    remove_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description' );
     185
     186    restore_current_blog();
     187
     188    set_transient( $transient_key, $menu, HOUR_IN_SECONDS );
     189
     190    return $menu;
     191}
    9192
    10193/**
     
    51234    <?php
    52235} );
     236
     237/**
     238 * Prints HTML markup for translation textareas.
     239 *
     240 * @param object $entry Current translation entry.
     241 * @param array $permissions User's permissions.
     242 * @param int $index Plural index.
     243 */
     244function wporg_gp_translate_textarea( $entry, $permissions, $index = 0 ) {
     245    list( $can_edit, $can_approve ) = $permissions;
     246    $disabled = $can_edit ? '' : 'disabled="disabled"';
     247    ?>
     248    <div class="textareas<?php echo ( 0 === $index ) ? ' active' : ''; ?>" data-plural-index="<?php echo $index; ?>">
     249        <?php
     250        if ( isset( $entry->warnings[ $index ] ) ) :
     251            $warnings = $entry->warnings[ $index ];
     252            foreach ( $warnings as $key => $value ) :
     253                ?>
     254                <div class="warning secondary">
     255                    <strong><?php _e( 'Warning:', 'glotpress' ); ?></strong> <?php echo esc_html( $value ); ?>
     256
     257                    <?php if ( $can_approve ) : ?>
     258                        <a href="#" class="discard-warning" data-nonce="<?php echo esc_attr( wp_create_nonce( 'discard-warning_' . $index . $key ) ); ?>" data-key="<?php echo esc_attr( $key ); ?>" data-index="<?php echo esc_attr( $index ); ?>"><?php _e( 'Discard', 'glotpress' ); ?></a>
     259                    <?php endif; ?>
     260                </div>
     261                <?php
     262            endforeach;
     263        endif;
     264        ?>
     265        <textarea placeholder="Enter translation here" class="foreign-text" name="translation[<?php echo esc_attr( $entry->original_id ); ?>][]" id="translation_<?php echo esc_attr( $entry->original_id ); ?>_<?php echo esc_attr( $index ); ?>" <?php echo $disabled; // WPCS: XSS ok. ?>><?php echo esc_translation( gp_array_get( $entry->translations, $index ) ); // WPCS: XSS ok. ?></textarea>
     266    </div>
     267    <?php
     268}
     269
     270/**
     271 * Counts the number of warnings.
     272 *
     273 * @param object $entry Current translation entry.
     274 * @return int Number of warnings.
     275 */
     276function wporg_gp_count_warnings( $entry ) {
     277    $count = 0;
     278
     279    if ( empty( $entry->warnings ) ) {
     280        return $count;
     281    }
     282
     283    foreach ( $entry->warnings as $warnings ) {
     284        $count += count( $warnings );
     285    }
     286
     287    return $count;
     288}
  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/style.css

    r8501 r8751  
     1body, html {
     2    height: 100%;
     3}
     4
    15.site-header {
    26    font-family: "Open Sans", sans-serif;
     
    1014
    1115.site-header .site-branding {
     16    box-sizing: border-box;
    1217    margin: 0 auto;
    1318    max-width: 960px;
     
    2530    font-weight: 300;
    2631    line-height: 1;
    27     margin: 0 36px 0 0;
    28     max-width: none;
    2932}
    3033
     
    300303    margin-left: .2em;
    301304    background-color: #a0a5aa;
     305    -webkit-box-decoration-break: clone;
    302306    box-decoration-break: clone;
    303307    box-shadow: .3em 0 0 #a0a5aa, -.3em 0 0 #a0a5aa;
     
    433437.editor .textareas textarea {
    434438    width: 100%;
    435     -webkit-box-sizing: border-box;
    436     -moz-box-sizing: border-box;
    437439    box-sizing: border-box;
    438440}
     
    451453    width: 39%;
    452454    float: right;
    453     -webkit-box-sizing: border-box;
    454     -moz-box-sizing: border-box;
    455455    box-sizing: border-box;
    456456}
     
    521521}
    522522
    523 .strings .or-cancel {
    524     margin-left: 5px;
     523.strings textarea:-ms-input-placeholder {
     524    color: #666;
     525}
     526
     527.strings textarea::-ms-input-placeholder {
     528    color: #666;
     529}
     530
     531.strings textarea::placeholder {
     532    color: #666;
     533}
     534
     535.invisibles {
     536    -webkit-user-select: none;
     537    -moz-user-select: none;
     538    -ms-user-select: none;
     539    user-select: none;
     540}
     541
     542span.translation-text,
     543span.original-text {
     544    white-space: pre-wrap;
     545}
     546
     547.ui-tooltip {
     548    background: #fff;
     549    border: 1px solid #ccc;
     550    box-shadow: 0 2px 10px rgba(0,0,0,.1);
     551    border-radius: 0;
     552}
     553
     554.ui-tooltip:after {
     555    border-color: #fff transparent;
     556    top: -9px;
     557}
     558
     559.ui-tooltip:before {
     560    display: block;
     561    content: "";
     562    border-color: #ccc transparent;
     563    border-style: solid;
     564    border-width: 0 10px 10px;
     565    width: 0;
     566    position: absolute;
     567    top: -10px;
     568    left: 1em;
     569}
     570
     571.ui-tooltip ul {
     572    padding: 0;
     573    margin: 5px;
     574}
     575
     576.ui-tooltip ul li {
     577    font-size: 15px;
     578}
     579
     580.ui-tooltip ul li + li {
     581    margin-top: 5px;
    525582}
    526583
     
    579636    display: inline-block;
    580637    position: relative;
    581     -webkit-box-sizing: border-box;
    582     -moz-box-sizing: border-box;
    583638    box-sizing: border-box;
    584639    margin: 30px 0;
    585640    padding: 0 20px;
    586641    width: 100%;
    587     -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    588642    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
    589643    border: 1px solid #dfdfdf;
     
    615669
    616670.filter-header-links .current {
    617     -webkit-box-shadow: none;
    618671    box-shadow: none;
    619672    border-bottom: 4px solid #666;
     
    663716    line-height: 1.5;
    664717    border: 1px solid #ddd;
    665     -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
    666718    box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
    667719    background-color: #fff;
    668720    color: #333;
    669721    outline: none;
    670     -webkit-border-radius: 0;
    671722    border-radius: 0;
    672723    -webkit-appearance: textfield;
     
    689740@supports (display: grid) {
    690741    .locales {
     742        display: -ms-grid;
    691743        display: grid;
     744        -ms-grid-columns: 1fr;
    692745        grid-template-columns: 1fr;
    693746        grid-gap: 30px;
     
    696749    @media (min-width: 500px) {
    697750        .locales {
     751            -ms-grid-columns: 1fr 30px 1fr;
    698752            grid-template-columns: repeat(2, 1fr);
    699753        }
     
    702756    @media (min-width: 700px) {
    703757        .locales {
     758            -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
    704759            grid-template-columns: repeat(3, 1fr);
    705760        }
     
    735790.locale {
    736791    border: 1px solid #ccc;
    737     -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
    738792    box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
    739793    background: #fff;
    740     -webkit-box-sizing: border-box;
    741     -moz-box-sizing: border-box;
    742794    box-sizing: border-box;
    743795}
     
    864916    width: 250px;
    865917    border: 1px solid #ccc;
    866     -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
    867918    box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
    868919    background: #fff;
    869     -webkit-box-sizing: border-box;
    870     -moz-box-sizing: border-box;
    871920    box-sizing: border-box;
    872921}
     
    881930    width: 47.917%;
    882931    border: 1px solid #ccc;
    883     -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
    884932    box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
    885933    background: #fff;
    886     -webkit-box-sizing: border-box;
    887     -moz-box-sizing: border-box;
    888934    box-sizing: border-box;
    889935}
     
    9781024    margin: 20px 0;
    9791025    text-align: center;
    980     -webkit-box-sizing: border-box;
    981     -moz-box-sizing: border-box;
    9821026    box-sizing: border-box;
    9831027}
     
    10361080    width: 350px;
    10371081    border: 1px solid #ccc;
    1038     -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
    10391082    box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
    10401083    background: #fff;
    1041     -webkit-box-sizing: border-box;
    1042     -moz-box-sizing: border-box;
    10431084    box-sizing: border-box;
    10441085}
     
    11151156    top: 50%;
    11161157    right: 15px;
    1117     -webkit-transform: translateY(-50%);
    1118     -ms-transform: translateY(-50%);
    11191158    transform: translateY(-50%);
    11201159    font-size: 20px;
     
    11641203    border: 1px solid #ccc;
    11651204    border-top: 0;
    1166     -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.04);
    11671205    box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.04);
    11681206    display: none;
     
    11961234    border-left: 1px solid #eee;
    11971235    padding: 5px 0 5px 12px;
    1198     -webkit-box-shadow: inset 1px 0 0 #fff;
    11991236    box-shadow: inset 1px 0 0 #fff;
    12001237    -webkit-font-smoothing: antialiased;
     
    13881425    padding: 10px;
    13891426    background: #f9f9f9;
    1390     -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
    13911427    box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
    13921428}
     
    14061442.stats-table tbody td {
    14071443    padding: 10px 0;
    1408     -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
    14091444    box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
    14101445}
     
    15531588    height: 12px;
    15541589    border: 3px solid transparent;
    1555     -webkit-border-radius: 2px;
    15561590    border-radius: 2px;
    15571591}
     
    15821616        -moz-column-count: 2;
    15831617        -moz-column-gap: 3%;
    1584         -webkit-column-count: 2;
    1585         -moz-column-count: 2;
    15861618        column-count: 2;
    1587         -webkit-column-gap: 3%;
    1588         -moz-column-gap: 3%;
    15891619        column-gap: 3%;
    15901620    }
     
    15981628    border: 1px solid #ccc;
    15991629    background: #fff;
    1600     -webkit-box-sizing: border-box;
    1601     -moz-box-sizing: border-box;
    16021630    box-sizing: border-box;
    1603     -webkit-column-break-inside: avoid;
    16041631    page-break-inside: avoid;
    16051632    break-inside: avoid;
     
    16511678    font-weight: 300;
    16521679    border: 1px solid #ddd;
    1653     -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
    16541680    box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
    16551681    background-color: #fff;
    16561682    color: #333;
    16571683    outline: none;
    1658     -webkit-border-radius: 0;
    16591684    border-radius: 0;
    16601685    -webkit-appearance: textfield;
     
    16771702    margin: 0;
    16781703    padding: 0;
    1679     -webkit-box-shadow: none;
    16801704    box-shadow: none;
    16811705    border: 0;
    1682     -webkit-border-radius: 0;
    16831706    border-radius: 0;
    16841707    background: none;
     
    18891912    height: 30px;
    18901913    padding: 3px;
    1891     -webkit-box-sizing: border-box;
    1892     -moz-box-sizing: border-box;
    18931914    box-sizing: border-box;
    18941915    font-size: 15px;
     
    19071928.consistency-form-project:focus {
    19081929    outline: 1px solid #5b9dd9;
    1909     -webkit-box-shadow: 0 0 2px rgba(30,140,190,.8);
    19101930    box-shadow: 0 0 2px rgba(30,128,190,.8);
    19111931}
     
    19531973    background: #0073aa;
    19541974    border-color: #006799;
    1955     -webkit-box-shadow: inset 0 2px 0 #006799;
    19561975    box-shadow: inset 0 2px 0 #006799;
    19571976}
     
    21172136    text-align: center;
    21182137}
     2138
     2139table.translations td.translation span.missing {
     2140    color: #666;
     2141}
     2142
     2143/* NEW EDITOR */
     2144
     2145.editor .strings {
     2146    float: none;
     2147    width: 100%;
     2148    min-width: 100%;
     2149}
     2150
     2151.editor .textareas textarea {
     2152    width: 100%;
     2153    border: 0;
     2154    background: #fff;
     2155    color: #333;
     2156    outline: none;
     2157    padding: 15px 0;
     2158    font-size: 16px;
     2159    resize: vertical;
     2160}
     2161
     2162.textareas p,
     2163.textareas blockquote.translation {
     2164    display: none;
     2165}
     2166
     2167.editor .original {
     2168    max-width: 100%;
     2169    font-weight: normal;
     2170    font-size: 15px;
     2171}
     2172
     2173.editor .original-raw {
     2174    display: none;
     2175}
     2176
     2177.editor .meta {
     2178    float: none;
     2179    width: 100%;
     2180    background: transparent;
     2181    border: 0;
     2182}
     2183
     2184table.translations tr.editor td {
     2185    padding: 0;
     2186}
     2187
     2188@media screen and (min-width: 700px) {
     2189    .editor-panel {
     2190        display: flex;
     2191        align-items: flex-start;
     2192    }
     2193}
     2194
     2195.editor-panel * {
     2196    box-sizing: border-box;
     2197}
     2198
     2199.editor-panel__left {
     2200    flex: 1;
     2201    border-bottom: 3px solid #eee;
     2202    min-width: 1%;
     2203}
     2204
     2205@media screen and (min-width: 700px) {
     2206    .editor-panel__left {
     2207        border-bottom: 0;
     2208        border-right: 3px solid #eee;
     2209    }
     2210}
     2211
     2212.editor-panel__right {
     2213    flex: 0 0 20rem;
     2214    min-width: 1%;
     2215}
     2216
     2217.panel-header {
     2218    display: flex;
     2219    align-items: center;
     2220    justify-content: flex-end;
     2221    border-bottom: 1px solid #eee;
     2222    background-color: #fbfbfb;
     2223    height: 40px;
     2224}
     2225
     2226.editor-panel__left .panel-header {
     2227    position: -webkit-sticky;
     2228    position: sticky;
     2229    top: 0;
     2230    z-index: 10;
     2231}
     2232
     2233.admin-bar .editor-panel__left .panel-header {
     2234    top: 32px;
     2235}
     2236
     2237@media screen and (max-width: 782px) {
     2238    .admin-bar .editor-panel__left .panel-header {
     2239        top: 46px;
     2240    }
     2241}
     2242
     2243@media screen and (max-width: 600px) {
     2244    .admin-bar .editor-panel__left .panel-header {
     2245        top: 0;
     2246    }
     2247}
     2248
     2249.panel-header h3 {
     2250    flex: 1;
     2251    margin: 0 0 0 10px;
     2252    font-size: 13px;
     2253    line-height: 1;
     2254    font-weight: 400;
     2255    letter-spacing: 1px;
     2256    text-transform: uppercase;
     2257    color: #666;
     2258}
     2259
     2260.panel-header__bubble {
     2261    font-size: 12px;
     2262    padding: 2px 4px;
     2263    text-transform: none;
     2264    font-weight: 600;
     2265    border: 1px solid #666;
     2266}
     2267
     2268.panel-header__bubble--warning {
     2269    color: #e44b3e;
     2270    border-color: #e44b3e;
     2271}
     2272
     2273.panel-header__bubble--waiting {
     2274    color: #FFB900;
     2275    border-color: #FFB900;
     2276}
     2277
     2278.panel-header__bubble--fuzzy {
     2279    color: #F56E28;
     2280    border-color: #F56E28;
     2281}
     2282
     2283.panel-header__bubble--current {
     2284    color: #46B450;
     2285    border-color: #46B450;
     2286}
     2287
     2288.panel-header__bubble--old {
     2289    color: #826EB4;
     2290    border-color: #826EB4;
     2291}
     2292
     2293.panel-header-actions button {
     2294    background: none;
     2295    border: none;
     2296    height: 40px;
     2297    width: 40px;
     2298    padding: 0;
     2299    margin: 0;
     2300    vertical-align: middle;
     2301    box-shadow: none;
     2302    border-radius: 0;
     2303}
     2304
     2305.panel-header-actions button:hover {
     2306    background: #eee;
     2307}
     2308
     2309table.translations tbody > tr:first-child + tr  .panel-header-actions__previous,
     2310table.translations tbody > tr:last-child .panel-header-actions__next {
     2311    display: none;
     2312}
     2313
     2314.button-menu {
     2315    position: relative;
     2316    display: inline-block;
     2317}
     2318
     2319.button-menu__dropdown {
     2320    display: none;
     2321    list-style: none;
     2322    position: absolute;
     2323    top: 100%;
     2324    right: 0;
     2325    z-index: 1000;
     2326    min-width: 150px;
     2327    background-color: #fff;
     2328    white-space: nowrap;
     2329    border: 1px solid #ccc;
     2330    padding: 6px 12px !important;
     2331    box-shadow: 0 2px 10px rgba(0,0,0,.1);
     2332}
     2333
     2334.button-menu.active .button-menu__dropdown {
     2335    display: block;
     2336}
     2337
     2338.button-menu__dropdown li a {
     2339    padding: 6px 0;
     2340    display: inline-block;
     2341}
     2342
     2343.panel-content summary {
     2344    cursor: pointer;
     2345    outline: 0;
     2346}
     2347
     2348.panel-content summary:focus {
     2349    color: #0073aa;
     2350}
     2351
     2352.panel-content details[open] summary {
     2353    margin-bottom: 5px;
     2354}
     2355
     2356.source-string {
     2357    padding: 20px 10px;
     2358}
     2359
     2360.source-string__singular small,
     2361.source-string__plural small {
     2362    display: block;
     2363    color: #666;
     2364    font-size: 12px;
     2365}
     2366
     2367.source-string__plural {
     2368    margin-top: 15px;
     2369}
     2370
     2371.source-details {
     2372    padding: 0 10px;
     2373    color: #666;
     2374}
     2375
     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;
     2386}
     2387
     2388.translation-wrapper {
     2389    padding: 0 10px;
     2390    margin: 15px 0;
     2391    border-top: 1px solid;
     2392    border-bottom: 1px solid;
     2393    border-color: #eee;
     2394    background: #fff;
     2395}
     2396
     2397.translation-wrapper:focus-within {
     2398    box-shadow:  0 0 2px 1px #33b3db;
     2399}
     2400
     2401.translation-wrapper .warning {
     2402    margin: 15px 0 0;
     2403}
     2404
     2405.translation-wrapper .textareas {
     2406    display: none;
     2407}
     2408
     2409.translation-wrapper .textareas.active {
     2410    display: block;
     2411}
     2412
     2413.translation-form-wrapper {
     2414    border-bottom: 1px solid #eee;
     2415    margin-left: -10px;
     2416    margin-right: -10px;
     2417    padding: 0 10px;
     2418    line-height: 40px;
     2419    display: flex;
     2420}
     2421
     2422.translation-form-wrapper span {
     2423    font-weight: 400;
     2424    letter-spacing: 1px;
     2425    text-transform: uppercase;
     2426    color: #666;
     2427    font-size: 13px;
     2428}
     2429
     2430ul.translation-form-list {
     2431    padding: 0;
     2432    list-style: none;
     2433    flex: 1;
     2434    margin-left: 10px;
     2435}
     2436
     2437ul.translation-form-list li {
     2438    display: inline-block;
     2439    margin-right: 5px;
     2440    cursor: pointer;
     2441}
     2442
     2443
     2444ul.translation-form-list button {
     2445    background: none;
     2446    border: 0;
     2447    box-shadow: none;
     2448    vertical-align: top;
     2449    height: auto;
     2450    font-size: 13px;
     2451    color: #333;
     2452    line-height: 40px;
     2453    margin: 0;
     2454    padding: 0 5px;
     2455    border-radius: 0;
     2456}
     2457
     2458ul.translation-form-list button:focus,
     2459ul.translation-form-list button:hover {
     2460    box-shadow: inset 0 -2px 0 0 #0085ba;
     2461    background: none;
     2462    border: 0;
     2463}
     2464
     2465ul.translation-form-list button.translation-form-list__tab--active {
     2466    font-weight: 600;
     2467    box-shadow: inset 0 -2px 0 0 #0085ba;
     2468}
     2469
     2470.translation-actions {
     2471    display: flex;
     2472    padding: 7px 0;
     2473    flex-direction: row-reverse;
     2474}
     2475
     2476.translation-actions .info {
     2477    font-style: italic;
     2478}
     2479
     2480.translation-actions__secondary {
     2481    flex: 1;
     2482}
     2483
     2484.translation-actions__secondary button {
     2485    height: 35px;
     2486}
     2487
     2488button.translation-actions__save {
     2489    font-size: 15px;
     2490    height: 35px;
     2491    line-height: 1;
     2492    background: #0085ba;
     2493    border-color: #0073aa #006799 #006799;
     2494    box-shadow: 0 1px 0 #006799;
     2495    color: #fff;
     2496    text-decoration: none;
     2497    text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
     2498}
     2499
     2500button.translation-actions__save:hover {
     2501    background: #008ec2;
     2502    border-color: #006799;
     2503    color: #fff;
     2504}
     2505
     2506button.translation-actions__save:focus {
     2507    background: #008ec2;
     2508    border-color: #006799;
     2509    box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db;
     2510    color: #fff;
     2511}
     2512
     2513.suggestions-wrapper {
     2514    padding: 0 10px;
     2515    margin-bottom: 15px;
     2516}
     2517
     2518.suggestions-wrapper details {
     2519    margin-bottom: 15px;
     2520    color: #666;
     2521}
     2522
     2523.suggestions-wrapper details:last-child {
     2524    margin-bottom: 0;
     2525}
     2526
     2527.with-tooltip {
     2528    position: relative;
     2529}
     2530
     2531@keyframes show {
     2532    0% {
     2533        opacity: 0
     2534    }
     2535
     2536    100% {
     2537        opacity: 1
     2538    }
     2539}
     2540
     2541.with-tooltip:active:after,
     2542.with-tooltip:active:before,
     2543.with-tooltip:focus:after,
     2544.with-tooltip:focus:before,
     2545.with-tooltip:hover:after,
     2546.with-tooltip:hover:before {
     2547    animation-delay: .3s;
     2548    animation-duration: .1s;
     2549    animation-fill-mode: forwards;
     2550    animation-name: show;
     2551    animation-timing-function: ease-in;
     2552    display: inline-block;
     2553}
     2554
     2555.with-tooltip:after {
     2556    transform: translateX(50%);
     2557    bottom: 100%;
     2558    margin-bottom: 6px;
     2559    right: 50%;
     2560    -webkit-font-smoothing: subpixel-antialiased;
     2561    background: #23282d;
     2562    border-radius: 3px;
     2563    color: #fff;
     2564    content: attr(aria-label);
     2565    display: none;
     2566    font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     2567    letter-spacing: normal;
     2568    opacity: 0;
     2569    padding: .5em .75em;
     2570    pointer-events: none;
     2571    position: absolute;
     2572    text-align: center;
     2573    text-decoration: none;
     2574    text-shadow: none;
     2575    text-transform: none;
     2576    white-space: pre;
     2577    word-wrap: break-word;
     2578    z-index: 100;
     2579}
     2580
     2581.with-tooltip:before {
     2582    border: 6px solid transparent;
     2583    border-top-color: #23282d;
     2584    bottom: auto;
     2585    margin-right: -6px;
     2586    right: 50%;
     2587    top: -7px;
     2588    color: #23282d;
     2589    content: "";
     2590    display: none;
     2591    height: 0;
     2592    opacity: 0;
     2593    pointer-events: none;
     2594    position: absolute;
     2595    width: 0;
     2596    z-index: 101;
     2597}
     2598
     2599@keyframes loading-indicator {
     2600    0%, 80%, 100% {
     2601        opacity: 0;
     2602    }
     2603    40% {
     2604        opacity: 1;
     2605    }
     2606}
     2607
     2608.suggestions__loading-indicator__icon {
     2609    font-size: 4px;
     2610    margin-left: .5rem;
     2611    line-height: 1;
     2612    display: inline-block;
     2613    vertical-align: middle;
     2614}
     2615
     2616.suggestions__loading-indicator__icon span {
     2617    animation-duration: 1s;
     2618    animation-delay: 0ms;
     2619    animation-iteration-count: infinite;
     2620    animation-name: loading-indicator;
     2621    animation-timing-function: ease-in-out;
     2622    background-color: #666;
     2623    border-radius: 50%;
     2624    display: inline-block;
     2625    width: 1em;
     2626    vertical-align: top;
     2627    height: 1em;
     2628}
     2629
     2630.suggestions__loading-indicator__icon span:nth-child(2) {
     2631    animation-delay: 160ms;
     2632    margin-left: 1em;
     2633}
     2634
     2635.suggestions__loading-indicator__icon span:nth-child(3) {
     2636    animation-delay: 320ms;
     2637    margin-left: 1em;
     2638}
     2639
     2640html.modal-open {
     2641    overflow: hidden;
     2642}
     2643
     2644.wporg-translate-modal {
     2645    display: none;
     2646}
     2647
     2648.wporg-translate-modal--open {
     2649    display: block;
     2650}
     2651
     2652.wporg-translate-modal__overlay {
     2653    animation: edit-post__fade-in-animation .2s ease-out 0s;
     2654    animation-fill-mode: forwards;
     2655    background-color: hsla(0,0%,100%,.4);
     2656    bottom: 0;
     2657    left: 0;
     2658    position: fixed;
     2659    right: 0;
     2660    top: 0;
     2661    z-index: 100000;
     2662}
     2663
     2664.wporg-translate-modal__frame {
     2665    background: #fff;
     2666    border: 1px solid #ccc;
     2667    box-shadow: 0 2px 10px rgba(0,0,0,.1);
     2668    box-sizing: border-box;
     2669    margin: 0;
     2670    overflow: auto;
     2671    position: absolute;
     2672    right: 0;
     2673    left: 0;
     2674    top: 0;
     2675    bottom: 0;
     2676    z-index: 1000;
     2677    font-family: "Open Sans", sans-serif;
     2678    padding: 15px;
     2679}
     2680
     2681@media (min-width: 600px) {
     2682    .wporg-translate-modal__frame {
     2683        bottom: auto;
     2684        left: 10%;
     2685        right: 10%;
     2686        top: 50%;
     2687        max-height: calc(100% - 100px);
     2688        max-width: 960px;
     2689        min-width: 360px;
     2690        transform: translate(0,-50%);
     2691        margin: 0 auto;
     2692    }
     2693}
     2694
     2695.wporg-translate-modal__header {
     2696    display: flex;
     2697    flex-direction: row;
     2698    align-items: center;
     2699    justify-content: space-between;
     2700    margin-bottom: 15px;
     2701    position: sticky;
     2702    top: -15px;
     2703    background: #fff;
     2704    box-shadow: 0 10px 10px #fff;
     2705}
     2706
     2707.wporg-translate-modal__headline {
     2708    line-height: 1;
     2709    font-weight: 300;
     2710    font-size: 22px;
     2711}
     2712
     2713.wporg-translate-modal__close {
     2714    background: none;
     2715    height: 40px;
     2716    width: 40px;
     2717    font-size: 20px;
     2718    padding: 0;
     2719    line-height: 20px;
     2720    color: #555;
     2721    border: 1px solid transparent;
     2722    cursor: pointer;
     2723    border-radius: 3px;
     2724}
     2725
     2726.wporg-translate-modal__close:focus,
     2727.wporg-translate-modal__close:hover {
     2728    background: #fafafa;
     2729    border-color: #999;
     2730    color: #23282d;
     2731}
     2732
     2733.wporg-translate-modal__close:focus {
     2734    border-color: #5b9dd9;
     2735    box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
     2736    outline: 0;
     2737}
     2738
     2739.wporg-translate-modal__content h2 {
     2740    line-height: 1;
     2741    font-weight: 300;
     2742    font-size: 18px;
     2743    margin: 30px 0 10px;
     2744    font-family: "Open Sans", sans-serif;
     2745}
     2746
     2747.wporg-translate-modal__content h2:first-child {
     2748    margin-top: 0;
     2749}
     2750
     2751.wporg-translate-modal__content ul {
     2752    margin-left: 25px;
     2753    padding-left: 0;
     2754}
     2755
     2756.wporg-translate-modal__content li > ul,
     2757.wporg-translate-modal__content li + li {
     2758    margin-top: 3px;
     2759}
     2760
     2761.wporg-translate-modal__content a {
     2762    color: #0073aa;
     2763}
     2764
     2765.wporg-translate-modal__content a:hover,
     2766.wporg-translate-modal__content a:focus {
     2767    color: #00a0d2;
     2768    text-decoration: underline;
     2769}
     2770
     2771.wporg-translate-modal__content .no-list {
     2772    list-style: none;
     2773    margin: 0;
     2774}
     2775
     2776.wporg-translate-modal__content_primary {
     2777    margin-bottom: 30px;
     2778}
     2779
     2780@media (min-width: 600px) {
     2781    .wporg-translate-modal__content {
     2782        display: flex;
     2783    }
     2784
     2785    .wporg-translate-modal__content_primary {
     2786        flex: 50%;
     2787        margin-right: 15px;
     2788        margin-bottom: 0;
     2789    }
     2790
     2791    .wporg-translate-modal__content_secondary {
     2792        flex: 50%;
     2793        margin-left: 15px;
     2794    }
     2795}
     2796
     2797.textarea-direction-ltr button.translation-actions__rtl,
     2798.translation-sets-rtl button.translation-actions__ltr {
     2799    display: inline-block;
     2800}
     2801
     2802.textarea-direction-ltr button.translation-actions__ltr,
     2803button.translation-actions__ltr,
     2804button.translation-actions__rtl {
     2805    display: none;
     2806}
     2807
     2808table.translations.translation-sets-rtl .textarea-direction-ltr .foreign-text {
     2809    direction: ltr;
     2810}
  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/translation-row-editor.php

    r8395 r8751  
    1010if ( $t->translation_status ) {
    1111    $translation_permalink = gp_url_project_locale( $project, $locale->slug, $translation_set->slug, array( 'filters[status]' => 'either', 'filters[original_id]' => $t->original_id, 'filters[translation_id]' => $t->id ) );
    12     $more_links['translation-permalink'] = '<a tabindex="-1" href="' . esc_url( $translation_permalink ) . '">' . __( 'Permalink to this translation', 'glotpress' ) . '</a>';
     12    $more_links['translation-permalink'] = '<a href="' . esc_url( $translation_permalink ) . '">Permalink to translation</a>';
    1313} else {
    1414    $original_permalink = gp_url_project_locale( $project, $locale->slug, $translation_set->slug, array( 'filters[original_id]' => $t->original_id ) );
    15     $more_links['original-permalink'] = '<a tabindex="-1" href="' . esc_url( $original_permalink ) . '">' . __( 'Permalink to this original', 'glotpress' ) . '</a>';
     15    $more_links['original-permalink'] = '<a href="' . esc_url( $original_permalink ) . '">Permalink to original</a>';
    1616}
    1717
    1818$original_history = gp_url_project_locale( $project, $locale->slug, $translation_set->slug, array( 'filters[status]' => 'either', 'filters[original_id]' => $t->original_id, 'sort[by]' => 'translation_date_added', 'sort[how]' => 'asc' ) );
    19 $more_links['history'] = '<a tabindex="-1" href="' . esc_url( $original_history ) . '">' . __( 'All translations of this original', 'glotpress' ) . '</a>';
     19$more_links['history'] = '<a href="' . esc_url( $original_history ) . '">Translation History</a>';
    2020
    2121/**
     
    4040    $t = map_glossary_entries_to_translation_originals( $t, $glossary, $glossary_entries_terms );
    4141}
     42
    4243?>
    4344<tr class="editor <?php echo gp_translation_row_classes( $t ); ?>" id="editor-<?php echo esc_attr( $t->row_id ); ?>" row="<?php echo esc_attr( $t->row_id ); ?>">
    4445    <td colspan="<?php echo $can_approve ? 5 : 4 ?>">
    45         <div class="strings">
    46         <?php
    47             $singular = isset( $t->singular_glossary_markup ) ? $t->singular_glossary_markup : esc_translation( $t->singular );
    48             $plural   = isset( $t->plural_glossary_markup ) ? $t->plural_glossary_markup : esc_translation( $t->plural );
    49         ?>
    50 
    51         <?php if ( ! $t->plural ): ?>
    52         <p class="original"><?php echo prepare_original( $singular ); ?></p>
    53         <?php textareas( $t, array( $can_edit, $can_approve_translation ) ); ?>
    54         <?php else: ?>
    55             <?php if ( $locale->nplurals == 2 && $locale->plural_expression == 'n != 1'): ?>
    56                 <p><?php printf(__( 'Singular: %s', 'glotpress' ), '<span class="original">'. $singular .'</span>'); ?></p>
    57                 <?php textareas( $t, array( $can_edit, $can_approve ), 0 ); ?>
    58                 <p class="clear">
    59                     <?php printf(__( 'Plural: %s', 'glotpress' ), '<span class="original">'. $plural .'</span>'); ?>
    60                 </p>
    61                 <?php textareas( $t, array( $can_edit, $can_approve ), 1 ); ?>
    62             <?php else: ?>
    63                 <!--
    64                 TODO: labels for each plural textarea and a sample number
    65                 -->
    66                 <p><?php printf(__( 'Singular: %s', 'glotpress' ), '<span class="original">'. $singular .'</span>'); ?></p>
    67                 <p class="clear">
    68                     <?php printf(__( 'Plural: %s', 'glotpress' ), '<span class="original">'. $plural .'</span>'); ?>
    69                 </p>
    70                 <?php foreach( range( 0, $locale->nplurals - 1 ) as $plural_index ): ?>
    71                     <?php if ( $locale->nplurals > 1 ): ?>
    72                     <p class="plural-numbers"><?php printf(__( 'This plural form is used for numbers like: %s', 'glotpress' ),
    73                             '<span class="numbers">'.implode(', ', $locale->numbers_for_index( $plural_index ) ).'</span>' ); ?></p>
    74                     <?php endif; ?>
    75                     <?php textareas( $t, array( $can_edit, $can_approve ), $plural_index ); ?>
    76                 <?php endforeach; ?>
    77             <?php endif; ?>
    78         <?php endif; ?>
    79         </div>
    80 
    81         <div class="meta">
    82             <h3><?php _e( 'Meta', 'glotpress' ); ?></h3>
    83             <dl>
    84                 <dt><?php _e( 'Status:', 'glotpress' ); ?></dt>
    85                 <dd>
    86                     <?php echo display_status( $t->translation_status ); ?>
    87                     <?php if ( $t->translation_status ): ?>
    88                         <?php if ( $can_approve_translation ) : ?>
    89                             <?php if ( 'current' !== $t->translation_status ) : ?>
    90                             <button class="approve" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-current_' . $t->id ) ); ?>"><strong>+</strong> <?php _e( 'Approve', 'glotpress' ); ?></button>
     46        <div class="editor-panel">
     47            <div class="editor-panel__left">
     48                <div class="panel-header">
     49                    <?php
     50                    $status = sprintf(
     51                        '<span class="panel-header__bubble%s">%s</span>',
     52                        $t->translation_status ? ' panel-header__bubble--' . $t->translation_status : '',
     53                        display_status( $t->translation_status )
     54                    );
     55
     56                    $warnings_count = wporg_gp_count_warnings( $t );
     57                    $warnings_info  = '';
     58                    if ( $warnings_count ) {
     59                        $warnings_info = ' <span class="panel-header__bubble panel-header__bubble--warning">' . sprintf(
     60                            _n( '%s warning', '%s warnings', $warnings_count ),
     61                            number_format_i18n( $warnings_count )
     62                        ) . '</span>';
     63                    }
     64                    ?>
     65                    <h3>Original <?php echo $status . $warnings_info; ?></h3>
     66                    <div class="panel-header-actions">
     67                        <button type="button" class="panel-header-actions__cancel with-tooltip" aria-label="Close current editor">
     68                            <span class="screen-reader-text">Close</span><span aria-hidden="true" class="dashicons dashicons-no-alt"></span>
     69                        </button>
     70                        <button type="button" class="panel-header-actions__previous with-tooltip" aria-label="Open previous editor">
     71                            <span class="screen-reader-text">Previous</span><span aria-hidden="true" class="dashicons dashicons-arrow-up-alt2"></span>
     72                        </button>
     73                        <button type="button" class="panel-header-actions__next with-tooltip" aria-label="Open next editor">
     74                            <span class="screen-reader-text">Next</span><span aria-hidden="true" class="dashicons dashicons-arrow-down-alt2"></span>
     75                        </button>
     76                        <div class="button-menu">
     77                            <button type="button" class="button-menu__toggle with-tooltip" aria-label="Show contextual links">
     78                                <span class="screen-reader-text">Links</span><span aria-hidden="true" class="dashicons dashicons-paperclip"></span>
     79                            </button>
     80                            <ul class="button-menu__dropdown">
     81                                <?php foreach ( $more_links as $link ) : ?>
     82                                    <li><?php echo $link; ?></li>
     83                                <?php endforeach; ?>
     84                            </ul>
     85                        </div>
     86                    </div>
     87                </div>
     88                <div class="panel-content">
     89                    <?php
     90                    $singular = isset( $t->singular_glossary_markup ) ? $t->singular_glossary_markup : esc_translation( $t->singular );
     91                    $plural   = isset( $t->plural_glossary_markup ) ? $t->plural_glossary_markup : esc_translation( $t->plural );
     92                    ?>
     93                    <div class="source-string strings">
     94                        <?php if ( ! $t->plural ) : ?>
     95                            <div class="source-string__singular">
     96                                <span class="original"><?php echo prepare_original( $singular ); ?></span>
     97                                <span aria-hidden="true" class="original-raw"><?php echo esc_translation( $t->singular ); ?></span>
     98                            </div>
     99                        <?php else: ?>
     100                            <div class="source-string__singular">
     101                                <small>Singular:</small>
     102                                <span class="original"><?php echo $singular; ?></span>
     103                                <span aria-hidden="true" class="original-raw"><?php echo esc_translation( $t->singular ); ?></span>
     104                            </div>
     105                            <div class="source-string__plural">
     106                                <small>Plural:</small>
     107                                <span class="original"><?php echo $plural; ?></span>
     108                                <span aria-hidden="true" class="original-raw"><?php echo esc_translation( $t->plural ); ?></span>
     109                            </div>
     110                        <?php endif; ?>
     111                    </div>
     112
     113                    <details class="source-details">
     114                        <summary>Context</summary>
     115
     116                        <?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>
     121                        <?php endif; ?>
     122                        <?php if ( $t->extracted_comments ) :
     123                            $comments = trim( preg_replace( '/^translators:/ ', '', $t->extracted_comments ) );
     124                            ?>
     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>
     132
     133                    <div class="translation-wrapper">
     134                        <?php if ( $t->plural && $locale->nplurals > 1 ) : ?>
     135                            <div class="translation-form-wrapper">
     136                                <span>Form:</span>
     137                                <ul class="translation-form-list">
     138                                    <?php if ( 2 === (int) $locale->nplurals && 'n != 1' === $locale->plural_expression ) : ?>
     139                                        <li>
     140                                            <button class="translation-form-list__tab translation-form-list__tab--active with-tooltip"
     141                                                    type="button"
     142                                                    aria-label="Translation for singular form"
     143                                                    data-plural-index="0">
     144                                                Singular
     145                                            </button>
     146                                        </li>
     147                                        <li>
     148                                            <button class="translation-form-list__tab with-tooltip"
     149                                                    type="button"
     150                                                    aria-label="Translation for plural form"
     151                                                    data-plural-index="1">
     152                                                Plural
     153                                            </button>
     154                                        </li>
     155                                    <?php else : ?>
     156                                        <?php foreach( range( 0, $locale->nplurals - 1 ) as $plural_index ):
     157                                            $plural_string = implode(', ', $locale->numbers_for_index( $plural_index ) );
     158                                            ?>
     159                                            <li>
     160                                                <button
     161                                                        class="translation-form-list__tab with-tooltip<?php echo ( 0 === $plural_index ) ? ' translation-form-list__tab--active' : ''; ?>"
     162                                                        data-plural-index="<?php echo $plural_index; ?>"
     163                                                        aria-label="<?php printf('This plural form is used for numbers like: %s', $plural_string ); ?>"
     164                                                        type="button">
     165                                                    <?php echo $plural_string; ?>
     166                                                </button>
     167                                            </li>
     168                                        <?php endforeach; ?>
     169                                    <?php endif; ?>
     170                                </ul>
     171                            </div>
     172                        <?php endif; ?>
     173
     174                        <?php if ( ! $t->plural ) : ?>
     175                            <?php wporg_gp_translate_textarea( $t, [ $can_edit, $can_approve_translation ] ); ?>
     176                        <?php else : ?>
     177                            <?php foreach( range( 0, $locale->nplurals - 1 ) as $plural_index ): ?>
     178                                <?php wporg_gp_translate_textarea( $t, [ $can_edit, $can_approve ], $plural_index ); ?>
     179                            <?php endforeach; ?>
     180                        <?php endif; ?>
     181
     182                        <div class="translation-actions">
     183                            <?php if ( $can_edit ) : ?>
     184                                <div class="translation-actions__primary">
     185                                    <button class="translation-actions__save with-tooltip"
     186                                            type="button"
     187                                            aria-label="<?php echo $can_approve_translation ? 'Save and approve translation' : 'Suggest new translation'; ?>"
     188                                            data-nonce="<?php echo esc_attr( wp_create_nonce( 'add-translation_' . $t->original_id ) ); ?>">
     189                                        <?php echo $can_approve_translation ? 'Save' : 'Suggest'; ?>
     190                                    </button>
     191                                </div>
     192                                <div class="translation-actions__secondary">
     193                                    <button type="button" class="translation-actions__copy with-tooltip" aria-label="Copy original">
     194                                        <span class="screen-reader-text">Copy</span><span aria-hidden="true" class="dashicons dashicons-admin-page"></span>
     195                                    </button>
     196                                    <button type="button" class="translation-actions__ltr with-tooltip" aria-label="Switch to LTR">
     197                                        <span class="screen-reader-text">LTR</span><span aria-hidden="true" class="dashicons dashicons-editor-ltr"></span>
     198                                    </button>
     199                                    <button type="button" class="translation-actions__rtl with-tooltip" aria-label="Switch to RTL">
     200                                        <span class="screen-reader-text">RTL</span><span aria-hidden="true" class="dashicons dashicons-editor-rtl"></span>
     201                                    </button>
     202                                    <button type="button" class="translation-actions__help with-tooltip" aria-label="Show help">
     203                                        <span class="screen-reader-text">Help</span><span aria-hidden="true" class="dashicons dashicons-editor-help"></span>
     204                                    </button>
     205                                </div>
     206                            <?php elseif ( is_user_logged_in() ) : ?>
     207                                You are not allowed to edit this translation.
     208                            <?php else : ?>
     209                                <p class="info">
     210                                    <?php
     211                                    printf(
     212                                        'You <a href="%s">have to log in</a> to edit this translation.',
     213                                        esc_url( wp_login_url( gp_url_current() ) )
     214                                    );
     215                                    ?>
     216                                </p>
    91217                            <?php endif; ?>
    92                             <?php if ( 'rejected' !== $t->translation_status ) : ?>
    93                             <button class="reject" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-rejected_' . $t->id ) ); ?>"><strong>&minus;</strong> <?php _e( 'Reject', 'glotpress' ); ?></button>
     218                        </div>
     219                    </div>
     220
     221                    <?php
     222                    if ( has_action( 'wporg_translate_suggestions' ) ) {
     223                        ?>
     224                        <div class="suggestions-wrapper">
     225                            <?php do_action( 'wporg_translate_suggestions', $t ); ?>
     226                        </div>
     227                        <?php
     228                    }
     229                    ?>
     230                </div>
     231            </div>
     232
     233            <div class="editor-panel__right">
     234                <div class="panel-header">
     235                    <h3><?php _e( 'Meta', 'glotpress' ); ?></h3>
     236                </div>
     237                <div class="panel-content">
     238                    <div class="meta">
     239
     240                        <?php if ( $t->translation_status ): ?>
     241                            <div class="status-actions">
     242                            <?php if ( $can_approve_translation ) : ?>
     243                                <?php if ( 'current' !== $t->translation_status ) : ?>
     244                                    <button class="approve" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-current_' . $t->id ) ); ?>"><strong>+</strong> <?php _e( 'Approve', 'glotpress' ); ?></button>
     245                                <?php endif; ?>
     246                                <?php if ( 'rejected' !== $t->translation_status ) : ?>
     247                                    <button class="reject" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-rejected_' . $t->id ) ); ?>"><strong>&minus;</strong> <?php _e( 'Reject', 'glotpress' ); ?></button>
     248                                <?php endif; ?>
     249                                <?php if ( 'fuzzy' !== $t->translation_status ) : ?>
     250                                    <button class="fuzzy" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-fuzzy_' . $t->id ) ); ?>"><strong>~</strong> <?php _e( 'Fuzzy', 'glotpress' ); ?></button>
     251                                <?php endif; ?>
     252                            <?php elseif ( $can_reject_self ): ?>
     253                                <button class="reject" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-rejected_' . $t->id ) ); ?>"><strong>&minus;</strong> <?php _e( 'Reject Suggestion', 'glotpress' ); ?></button>
     254                                <button class="fuzzy" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-fuzzy_' . $t->id ) ); ?>"><strong>~</strong> <?php _e( 'Fuzzy', 'glotpress' ); ?></button>
    94255                            <?php endif; ?>
    95                             <?php if ( 'fuzzy' !== $t->translation_status ) : ?>
    96                             <button class="fuzzy" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-fuzzy_' . $t->id ) ); ?>"><strong>~</strong> <?php _e( 'Fuzzy', 'glotpress' ); ?></button>
     256                            </div>
     257                        <?php endif; ?>
     258
     259                        <dl>
     260                            <dt><?php _e( 'Status:', 'glotpress' ); ?></dt>
     261                            <dd>
     262                                <?php echo display_status( $t->translation_status ); ?>
     263                            </dd>
     264                        </dl>
     265
     266                        <?php if ( $t->translation_added && $t->translation_added != '0000-00-00 00:00:00' ): ?>
     267                            <dl>
     268                                <dt><?php _e( 'Date added:', 'glotpress' ); ?></dt>
     269                                <dd><?php echo $t->translation_added; ?> GMT</dd>
     270                            </dl>
     271                        <?php endif; ?>
     272                        <?php if ( $t->user ) : ?>
     273                            <dl>
     274                                <dt><?php _e( 'Translated by:', 'glotpress' ); ?></dt>
     275                                <dd><?php gp_link_user( $t->user ); ?></dd>
     276                            </dl>
     277                        <?php endif; ?>
     278                        <?php if ( $t->user_last_modified && ( ! $t->user || $t->user->ID !== $t->user_last_modified->ID ) ) : ?>
     279                            <dl>
     280                                <dt><?php
     281                                    if ( 'current' === $t->translation_status ) {
     282                                        _e( 'Approved by:', 'glotpress' );
     283                                    } elseif ( 'rejected' === $t->translation_status ) {
     284                                        _e( 'Rejected by:', 'glotpress' );
     285                                    } else {
     286                                        _e( 'Last updated by:', 'glotpress' );
     287                                    }
     288                                    ?>
     289                                </dt>
     290                                <dd><?php gp_link_user( $t->user_last_modified ); ?></dd>
     291                            </dl>
     292                        <?php endif; ?>
     293
     294                        <dl>
     295                            <dt><?php _e( 'Priority of the original:', 'glotpress' ); ?></dt>
     296                            <?php if ( $can_write ): ?>
     297                                <dd><?php
     298                                    echo gp_select(
     299                                        'priority-' . $t->original_id,
     300                                        GP::$original->get_static( 'priorities' ),
     301                                        $t->priority,
     302                                        array(
     303                                            'class'      => 'priority',
     304                                            'tabindex'   => '-1',
     305                                            'data-nonce' => wp_create_nonce( 'set-priority_' . $t->original_id ),
     306                                        )
     307                                    );
     308                                    ?></dd>
     309                            <?php else : ?>
     310                                <dd><?php echo gp_array_get( GP::$original->get_static( 'priorities' ), $t->priority, 'unknown' ); // WPCS: XSS ok. ?></dd>
    97311                            <?php endif; ?>
    98                         <?php elseif ( $can_reject_self ): ?>
    99                             <button class="reject" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-rejected_' . $t->id ) ); ?>"><strong>&minus;</strong> <?php _e( 'Reject Suggestion', 'glotpress' ); ?></button>
    100                             <button class="fuzzy" tabindex="-1" data-nonce="<?php echo esc_attr( wp_create_nonce( 'update-translation-status-fuzzy_' . $t->id ) ); ?>"><strong>~</strong> <?php _e( 'Fuzzy', 'glotpress' ); ?></button>
    101                         <?php endif; ?>
    102                     <?php endif; ?>
    103                 </dd>
    104             </dl>
    105             <!--
    106             <dl>
    107                 <dt><?php _e( 'Priority:', 'glotpress' ); ?></dt>
    108                 <dd><?php echo esc_html($t->priority); ?></dd>
    109             </dl>
    110             -->
    111 
    112             <?php if ( $t->context ): ?>
    113             <dl>
    114                 <dt><?php _e( 'Context:', 'glotpress' ); ?></dt>
    115                 <dd><span class="context bubble"><?php echo esc_translation($t->context); ?></span></dd>
    116             </dl>
    117             <?php endif; ?>
    118             <?php if ( $t->extracted_comments ): ?>
    119             <dl>
    120                 <dt><?php _e( 'Comment:', 'glotpress' ); ?></dt>
    121                 <dd><?php echo make_clickable( esc_translation($t->extracted_comments) ); ?></dd>
    122             </dl>
    123             <?php endif; ?>
    124             <?php if ( $t->translation_added && $t->translation_added != '0000-00-00 00:00:00' ): ?>
    125             <dl>
    126                 <dt><?php _e( 'Date added:', 'glotpress' ); ?></dt>
    127                 <dd><?php echo $t->translation_added; ?> GMT</dd>
    128             </dl>
    129             <?php endif; ?>
    130             <?php if ( $t->user ) : ?>
    131             <dl>
    132                 <dt><?php _e( 'Translated by:', 'glotpress' ); ?></dt>
    133                 <dd><?php gp_link_user( $t->user ); ?></dd>
    134             </dl>
    135             <?php endif; ?>
    136             <?php if ( $t->user_last_modified && ( ! $t->user || $t->user->ID !== $t->user_last_modified->ID ) ) : ?>
    137                 <dl>
    138                     <dt><?php
    139                         if ( 'current' === $t->translation_status ) {
    140                             _e( 'Approved by:', 'glotpress' );
    141                         } elseif ( 'rejected' === $t->translation_status ) {
    142                             _e( 'Rejected by:', 'glotpress' );
    143                         } else {
    144                             _e( 'Last updated by:', 'glotpress' );
    145                         }
    146                         ?>
    147                     </dt>
    148                     <dd><?php gp_link_user( $t->user_last_modified ); ?></dd>
    149                 </dl>
    150             <?php endif; ?>
    151             <?php references( $project, $t ); ?>
    152 
    153             <dl>
    154                 <dt><?php _e( 'Priority of the original:', 'glotpress' ); ?></dt>
    155             <?php if ( $can_write ): ?>
    156                 <dd><?php
    157                     echo gp_select(
    158                         'priority-' . $t->original_id,
    159                         GP::$original->get_static( 'priorities' ),
    160                         $t->priority,
    161                         array(
    162                             'class'      => 'priority',
    163                             'tabindex'   => '-1',
    164                             'data-nonce' => wp_create_nonce( 'set-priority_' . $t->original_id ),
    165                         )
    166                     );
    167                     ?></dd>
    168             <?php else : ?>
    169                 <dd><?php echo gp_array_get( GP::$original->get_static( 'priorities' ), $t->priority, 'unknown' ); // WPCS: XSS ok. ?></dd>
    170             <?php endif; ?>
    171             </dl>
    172 
    173             <dl>
    174                 <dt><?php _e( 'More links:', 'glotpress' ); ?>
    175                 <ul>
    176                     <?php foreach ( $more_links as $link ) : ?>
    177                         <li><?php echo $link; // WPCS: XSS ok. ?></li>
    178                     <?php endforeach; ?>
    179                 </ul>
    180                 </dt>
    181             </dl>
    182         </div>
    183         <div class="actions">
    184         <?php if ( $can_edit ): ?>
    185             <button class="ok" data-nonce="<?php echo esc_attr( wp_create_nonce( 'add-translation_' . $t->original_id ) ); ?>">
    186                 <?php echo $can_approve_translation ? __( 'Add translation &rarr;', 'glotpress' ) : __( 'Suggest new translation &rarr;', 'glotpress' ); ?>
    187             </button>
    188         <?php endif; ?>
    189             <?php _e( 'or', 'glotpress' ); ?> <a href="#" class="close"><?php _e( 'Cancel', 'glotpress' ); ?></a>
     312                        </dl>
     313                    </div>
     314                </div>
     315            </div>
    190316        </div>
    191317    </td>
  • sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/translation-row-preview.php

    r8386 r8751  
    2222    </td>
    2323    <td class="original">
    24         <?php echo prepare_original( esc_translation( $t->singular ) ); ?>
     24        <span class="original-text"><?php echo esc_translation( $t->singular ); ?></span>
    2525        <?php if ( $t->context ): ?>
    2626        <span class="context bubble" title="<?php printf( __( 'Context: %s', 'glotpress' ), esc_html($t->context) ); ?>"><?php echo esc_html($t->context); ?></span>
     
    4444            echo $missing_text;
    4545        elseif ( ! $t->plural ) :
    46             echo esc_translation( $t->translations[0] );
     46            echo '<span class="translation-text">' . esc_translation( $t->translations[0] ) . '</span>';
    4747        else: ?>
    4848        <ul>
     
    5050                foreach( $t->translations as $translation ):
    5151            ?>
    52                 <li><?php echo gp_is_empty_string( $translation ) ? $missing_text : esc_translation( $translation ); ?></li>
     52                <li><?php echo gp_is_empty_string( $translation ) ? $missing_text : '<span class="translation-text">' . esc_translation( $translation ) . '</span>' ; ?></li>
    5353            <?php
    5454                endforeach;
Note: See TracChangeset for help on using the changeset viewer.