Changeset 8751

Timestamp:

05/08/2019 07:33:18 PM (6 years 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:

• inc/class-plugin.php (modified) (1 diff)
• templates/footer.php (modified) (1 diff)
• templates/helper-functions.php (modified) (2 diffs)
• templates/js/autosize.min.js (added)
• templates/js/details-element-polyfill.min.js (added)
• templates/js/editor.js (added)
• templates/style.css (modified) (32 diffs)
• templates/translation-row-editor.php (modified) (2 diffs)
• templates/translation-row-preview.php (modified) (3 diffs)

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

@@ -259 +259 @@
     public function after_setup_theme() {
         register_nav_menu( 'wporg_header_subsite_nav', 'WordPress.org Header Sub-Navigation' );
+        register_nav_menu( 'wporg_translate_global_resources', 'Global Handbook Resources' );
     }
 

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

@@ -1 +1 @@
     </div><!-- gp-content -->
-    <p id="gp-footer" class="secondary">
-        <?php printf( __('Proudly powered by <a href="%s" title="Found in translation">GlotPress</a>.'), 'http://glotpress.org/' ); ?>
-    </p>
+
 <?php require WPORGPATH . 'footer.php';
 

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

@@ -1 +1 @@
 <?php
-wp_register_style( 'wporg-translate', plugins_url( 'style.css', __FILE__ ), array( 'gp-base' ), '20190324' );
+wp_register_style(
+        'wporg-translate',
+        plugins_url( 'style.css', __FILE__ ),
+        [ 'gp-base' ],
+        '20190324'
+);
 gp_enqueue_style( 'wporg-translate' );
 
-gp_enqueue_script( 'jquery' );
-
-wp_register_style( 'chartist', plugins_url( 'css/chartist.min.css', __FILE__ ), array(), '0.9.5' );
-wp_register_script( 'chartist', plugins_url( 'js/chartist.min.js', __FILE__ ), array(), '0.9.5' );
+wp_register_script(
+    'details-element-polyfill',
+    plugins_url( 'js/details-element-polyfill.min.js', __FILE__ ),
+    [],
+    '2.3.1'
+);
+
+gp_enqueue_script( 'details-element-polyfill' );
+
+wp_register_script(
+    'autosize',
+    plugins_url( 'js/autosize.min.js', __FILE__ ),
+    [],
+    '4.0.2'
+);
+
+wp_register_script(
+        'wporg-translate-editor',
+        plugins_url( 'js/editor.js', __FILE__ ),
+        [ 'gp-editor', 'autosize' ],
+        '20190506'
+);
+
+wp_register_style(
+        'chartist',
+        plugins_url( 'css/chartist.min.css', __FILE__ ),
+        [],
+        '0.9.5'
+);
+wp_register_script(
+        'chartist',
+        plugins_url( 'js/chartist.min.js', __FILE__ ),
+        [],
+        '0.9.5'
+);
+
+if ( isset( $template ) && 'translations' === $template ) {
+    gp_enqueue_script( 'wporg-translate-editor' );
+}
+
+/**
+ * Prints markup for translations help modal in footer.
+ */
+add_action( 'gp_footer', static function() use ( $template, $args ) {
+    if ( 'translations' === $template && ! empty( $args['locale_slug'] ) ) {
+        $locale = GP_Locales::by_slug( $args['locale_slug'] );
+        wporg_translation_help_modal( $locale );
+    }
+} );
+
+/**
+ * Prints markup for the translation help dialog.
+ *
+ * @param \GP_Locale $locale Locale of the current translation set.
+ */
+function wporg_translation_help_modal( $locale ) {
+    $locale_resources = wporg_get_locale_resources( $locale )
+    ?>
+    <div id="wporg-translation-help-modal" class="wporg-translate-modal">
+        <div class="wporg-translate-modal__overlay">
+            <div class="wporg-translate-modal__frame" role="dialog" aria-labelledby="wporg-translation-help-modal-headline">
+                <div class="wporg-translate-modal__header">
+                    <h1 id="wporg-translation-help-modal-headline" class="wporg-translate-modal__headline">Help</h1>
+                    <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>
+                </div>
+
+                <div class="wporg-translate-modal__content">
+                    <div class="wporg-translate-modal__content_primary">
+                        <h2>Validating Translations</h2>
+                        <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>
+                            Please give editors a reasonable time to validate suggestions — We are all volunteers.</p>
+
+                        <h2>Translation Status</h2>
+                        <ul class="no-list">
+                            <li><span style="color: #c1e1b9">◼︎</span> <strong>Current:</strong> Indicates an approved string.</li>
+                            <li><span style="color: #ffe399">◼︎</span> <strong>Waiting:</strong> Indicates a string that was suggested, but not yet approved by a Translation Editor.</li>
+                            <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>
+                            <li><span style="color: #cdc5e1">◼︎</span> <strong>Old:</strong> Indicates a string that was obsoleted by a newer, approved translation.</li>
+                            <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>
+                        </ul>
+                    </div>
+                    <div class="wporg-translate-modal__content_secondary">
+                        <?php if ( $locale_resources ) : ?>
+                            <h2><span aria-hidden="true" class="dashicons dashicons-info"></span> Locale Resources for <?php echo esc_html( $locale->english_name ); ?></h2>
+                            <?php echo wp_kses_post( $locale_resources ); ?>
+                        <?php endif; ?>
+
+                        <h2><span aria-hidden="true" class="dashicons dashicons-admin-page"></span> Global Handbook Resources</h2>
+                        <?php
+                        add_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description', 10, 4 );
+                        wp_nav_menu( [
+                            'theme_location' => 'wporg_translate_global_resources',
+                            'fallback_cb'    => false,
+                            'container'      => false,
+                            'menu_id'        => 'global-resources',
+                            'depth'          => 2,
+                        ] );
+                        remove_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description' );
+                        ?>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <?php
+}
+
+/**
+ * Adds descriptions to navigation items.
+ *
+ * @param string  $item_output The menu item output.
+ * @param WP_Post $item        Menu item object.
+ * @param int     $depth       Depth of the menu.
+ * @param array   $args        wp_nav_menu() arguments.
+ * @return string Menu item with possible description.
+ */
+function wporg_add_nav_description( $item_output, $item, $depth, $args ) {
+    if ( $item->description ) {
+        $item_output = str_replace(
+            $args->link_after . '</a>',
+            $args->link_after . '</a>: <span class="menu-item-description">' . $item->description . '</span>',
+            $item_output
+        );
+    }
+
+    return $item_output;
+}
+
+/**
+ * Retrieves the navigation menu from the assigned Rosetta site.
+ *
+ * Output is cached for an hour.
+ *
+ * @param \GP_Locale $locale
+ * @return string The HTML markup of the navigation menu.
+ */
+function wporg_get_locale_resources( $locale ) {
+    if ( empty( $locale->wp_locale ) ) {
+        return '';
+    }
+
+    $transient_key = 'locale-resources-' . $locale->wp_locale;
+    $cache         = get_transient( $transient_key );
+
+    if ( false !== $cache ) {
+        return $cache;
+    }
+
+    $result = get_sites( [
+        'locale'     => $locale->wp_locale,
+        'network_id' => WPORG_GLOBAL_NETWORK_ID,
+        'path'       => '/',
+        'fields'     => 'ids',
+        'number'     => '1',
+    ] );
+    $site_id = array_shift( $result );
+    if ( ! $site_id ) {
+        set_transient( $transient_key, '', HOUR_IN_SECONDS );
+        return '';
+    }
+
+    switch_to_blog( $site_id );
+
+    add_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description', 10, 4 );
+
+    $menu = wp_nav_menu( [
+        'theme_location' => 'rosetta_translation_contributor_resources',
+        'fallback_cb'    => false,
+        'container'      => false,
+        'menu_id'        => 'locale-resources',
+        'depth'          => 2,
+        'echo'           => false,
+    ] );
+
+    remove_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description' );
+
+    restore_current_blog();
+
+    set_transient( $transient_key, $menu, HOUR_IN_SECONDS );
+
+    return $menu;
+}
 
 /**
@@ -51 +234 @@
     <?php
 } );
+
+/**
+ * Prints HTML markup for translation textareas.
+ *
+ * @param object $entry Current translation entry.
+ * @param array $permissions User's permissions.
+ * @param int $index Plural index.
+ */
+function wporg_gp_translate_textarea( $entry, $permissions, $index = 0 ) {
+    list( $can_edit, $can_approve ) = $permissions;
+    $disabled = $can_edit ? '' : 'disabled="disabled"';
+    ?>
+    <div class="textareas<?php echo ( 0 === $index ) ? ' active' : ''; ?>" data-plural-index="<?php echo $index; ?>">
+        <?php
+        if ( isset( $entry->warnings[ $index ] ) ) :
+            $warnings = $entry->warnings[ $index ];
+            foreach ( $warnings as $key => $value ) :
+                ?>
+                <div class="warning secondary">
+                    <strong><?php _e( 'Warning:', 'glotpress' ); ?></strong> <?php echo esc_html( $value ); ?>
+
+                    <?php if ( $can_approve ) : ?>
+                        <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>
+                    <?php endif; ?>
+                </div>
+                <?php
+            endforeach;
+        endif;
+        ?>
+        <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>
+    </div>
+    <?php
+}
+
+/**
+ * Counts the number of warnings.
+ *
+ * @param object $entry Current translation entry.
+ * @return int Number of warnings.
+ */
+function wporg_gp_count_warnings( $entry ) {
+    $count = 0;
+
+    if ( empty( $entry->warnings ) ) {
+        return $count;
+    }
+
+    foreach ( $entry->warnings as $warnings ) {
+        $count += count( $warnings );
+    }
+
+    return $count;
+}

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

@@ +1 @@
+body, html {
+    height: 100%;
+}
+
 .site-header {
     font-family: "Open Sans", sans-serif;
@@ -10 +14 @@
 
 .site-header .site-branding {
+    box-sizing: border-box;
     margin: 0 auto;
     max-width: 960px;
@@ -25 +30 @@
     font-weight: 300;
     line-height: 1;
-    margin: 0 36px 0 0;
-    max-width: none;
 }
 
@@ -300 +303 @@
     margin-left: .2em;
     background-color: #a0a5aa;
+    -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
     box-shadow: .3em 0 0 #a0a5aa, -.3em 0 0 #a0a5aa;
@@ -433 +437 @@
 .editor .textareas textarea {
     width: 100%;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
@@ -451 +453 @@
     width: 39%;
     float: right;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
@@ -521 +521 @@
 }
 
-.strings .or-cancel {
-    margin-left: 5px;
+.strings textarea:-ms-input-placeholder {
+    color: #666;
+}
+
+.strings textarea::-ms-input-placeholder {
+    color: #666;
+}
+
+.strings textarea::placeholder {
+    color: #666;
+}
+
+.invisibles {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+span.translation-text,
+span.original-text {
+    white-space: pre-wrap;
+}
+
+.ui-tooltip {
+    background: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 2px 10px rgba(0,0,0,.1);
+    border-radius: 0;
+}
+
+.ui-tooltip:after {
+    border-color: #fff transparent;
+    top: -9px;
+}
+
+.ui-tooltip:before {
+    display: block;
+    content: "";
+    border-color: #ccc transparent;
+    border-style: solid;
+    border-width: 0 10px 10px;
+    width: 0;
+    position: absolute;
+    top: -10px;
+    left: 1em;
+}
+
+.ui-tooltip ul {
+    padding: 0;
+    margin: 5px;
+}
+
+.ui-tooltip ul li {
+    font-size: 15px;
+}
+
+.ui-tooltip ul li + li {
+    margin-top: 5px;
 }
 
@@ -579 +636 @@
     display: inline-block;
     position: relative;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
     margin: 30px 0;
     padding: 0 20px;
     width: 100%;
-    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     box-shadow: 0 1px 1px rgba(0,0,0,0.04);
     border: 1px solid #dfdfdf;
@@ -615 +669 @@
 
 .filter-header-links .current {
-    -webkit-box-shadow: none;
     box-shadow: none;
     border-bottom: 4px solid #666;
@@ -663 +716 @@
     line-height: 1.5;
     border: 1px solid #ddd;
-    -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
     box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
     background-color: #fff;
     color: #333;
     outline: none;
-    -webkit-border-radius: 0;
     border-radius: 0;
     -webkit-appearance: textfield;
@@ -689 +740 @@
 @supports (display: grid) {
     .locales {
+        display: -ms-grid;
         display: grid;
+        -ms-grid-columns: 1fr;
         grid-template-columns: 1fr;
         grid-gap: 30px;
@@ -696 +749 @@
     @media (min-width: 500px) {
         .locales {
+            -ms-grid-columns: 1fr 30px 1fr;
             grid-template-columns: repeat(2, 1fr);
         }
@@ -702 +756 @@
     @media (min-width: 700px) {
         .locales {
+            -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
             grid-template-columns: repeat(3, 1fr);
         }
@@ -735 +790 @@
 .locale {
     border: 1px solid #ccc;
-    -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
     box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
     background: #fff;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
@@ -864 +916 @@
     width: 250px;
     border: 1px solid #ccc;
-    -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
     box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
     background: #fff;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
@@ -881 +930 @@
     width: 47.917%;
     border: 1px solid #ccc;
-    -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
     box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
     background: #fff;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
@@ -978 +1024 @@
     margin: 20px 0;
     text-align: center;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
@@ -1036 +1080 @@
     width: 350px;
     border: 1px solid #ccc;
-    -webkit-box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
     box-shadow: 0 1px 1px -1px rgba(0,0,0,0.1);
     background: #fff;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
@@ -1115 +1156 @@
     top: 50%;
     right: 15px;
-    -webkit-transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     font-size: 20px;
@@ -1164 +1203 @@
     border: 1px solid #ccc;
     border-top: 0;
-    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.04);
     box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.04);
     display: none;
@@ -1196 +1234 @@
     border-left: 1px solid #eee;
     padding: 5px 0 5px 12px;
-    -webkit-box-shadow: inset 1px 0 0 #fff;
     box-shadow: inset 1px 0 0 #fff;
     -webkit-font-smoothing: antialiased;
@@ -1388 +1425 @@
     padding: 10px;
     background: #f9f9f9;
-    -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
     box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
 }
@@ -1406 +1442 @@
 .stats-table tbody td {
     padding: 10px 0;
-    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
     box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
 }
@@ -1553 +1588 @@
     height: 12px;
     border: 3px solid transparent;
-    -webkit-border-radius: 2px;
     border-radius: 2px;
 }
@@ -1582 +1616 @@
         -moz-column-count: 2;
         -moz-column-gap: 3%;
-        -webkit-column-count: 2;
-        -moz-column-count: 2;
         column-count: 2;
-        -webkit-column-gap: 3%;
-        -moz-column-gap: 3%;
         column-gap: 3%;
     }
@@ -1598 +1628 @@
     border: 1px solid #ccc;
     background: #fff;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
-    -webkit-column-break-inside: avoid;
     page-break-inside: avoid;
     break-inside: avoid;
@@ -1651 +1678 @@
     font-weight: 300;
     border: 1px solid #ddd;
-    -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
     box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
     background-color: #fff;
     color: #333;
     outline: none;
-    -webkit-border-radius: 0;
     border-radius: 0;
     -webkit-appearance: textfield;
@@ -1677 +1702 @@
     margin: 0;
     padding: 0;
-    -webkit-box-shadow: none;
     box-shadow: none;
     border: 0;
-    -webkit-border-radius: 0;
     border-radius: 0;
     background: none;
@@ -1889 +1912 @@
     height: 30px;
     padding: 3px;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
     font-size: 15px;
@@ -1907 +1928 @@
 .consistency-form-project:focus {
     outline: 1px solid #5b9dd9;
-    -webkit-box-shadow: 0 0 2px rgba(30,140,190,.8);
     box-shadow: 0 0 2px rgba(30,128,190,.8);
 }
@@ -1953 +1973 @@
     background: #0073aa;
     border-color: #006799;
-    -webkit-box-shadow: inset 0 2px 0 #006799;
     box-shadow: inset 0 2px 0 #006799;
 }
@@ -2117 +2136 @@
     text-align: center;
 }
+
+table.translations td.translation span.missing {
+    color: #666;
+}
+
+/* NEW EDITOR */
+
+.editor .strings {
+    float: none;
+    width: 100%;
+    min-width: 100%;
+}
+
+.editor .textareas textarea {
+    width: 100%;
+    border: 0;
+    background: #fff;
+    color: #333;
+    outline: none;
+    padding: 15px 0;
+    font-size: 16px;
+    resize: vertical;
+}
+
+.textareas p,
+.textareas blockquote.translation {
+    display: none;
+}
+
+.editor .original {
+    max-width: 100%;
+    font-weight: normal;
+    font-size: 15px;
+}
+
+.editor .original-raw {
+    display: none;
+}
+
+.editor .meta {
+    float: none;
+    width: 100%;
+    background: transparent;
+    border: 0;
+}
+
+table.translations tr.editor td {
+    padding: 0;
+}
+
+@media screen and (min-width: 700px) {
+    .editor-panel {
+        display: flex;
+        align-items: flex-start;
+    }
+}
+
+.editor-panel * {
+    box-sizing: border-box;
+}
+
+.editor-panel__left {
+    flex: 1;
+    border-bottom: 3px solid #eee;
+    min-width: 1%;
+}
+
+@media screen and (min-width: 700px) {
+    .editor-panel__left {
+        border-bottom: 0;
+        border-right: 3px solid #eee;
+    }
+}
+
+.editor-panel__right {
+    flex: 0 0 20rem;
+    min-width: 1%;
+}
+
+.panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    border-bottom: 1px solid #eee;
+    background-color: #fbfbfb;
+    height: 40px;
+}
+
+.editor-panel__left .panel-header {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.admin-bar .editor-panel__left .panel-header {
+    top: 32px;
+}
+
+@media screen and (max-width: 782px) {
+    .admin-bar .editor-panel__left .panel-header {
+        top: 46px;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .admin-bar .editor-panel__left .panel-header {
+        top: 0;
+    }
+}
+
+.panel-header h3 {
+    flex: 1;
+    margin: 0 0 0 10px;
+    font-size: 13px;
+    line-height: 1;
+    font-weight: 400;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    color: #666;
+}
+
+.panel-header__bubble {
+    font-size: 12px;
+    padding: 2px 4px;
+    text-transform: none;
+    font-weight: 600;
+    border: 1px solid #666;
+}
+
+.panel-header__bubble--warning {
+    color: #e44b3e;
+    border-color: #e44b3e;
+}
+
+.panel-header__bubble--waiting {
+    color: #FFB900;
+    border-color: #FFB900;
+}
+
+.panel-header__bubble--fuzzy {
+    color: #F56E28;
+    border-color: #F56E28;
+}
+
+.panel-header__bubble--current {
+    color: #46B450;
+    border-color: #46B450;
+}
+
+.panel-header__bubble--old {
+    color: #826EB4;
+    border-color: #826EB4;
+}
+
+.panel-header-actions button {
+    background: none;
+    border: none;
+    height: 40px;
+    width: 40px;
+    padding: 0;
+    margin: 0;
+    vertical-align: middle;
+    box-shadow: none;
+    border-radius: 0;
+}
+
+.panel-header-actions button:hover {
+    background: #eee;
+}
+
+table.translations tbody > tr:first-child + tr  .panel-header-actions__previous,
+table.translations tbody > tr:last-child .panel-header-actions__next {
+    display: none;
+}
+
+.button-menu {
+    position: relative;
+    display: inline-block;
+}
+
+.button-menu__dropdown {
+    display: none;
+    list-style: none;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: 1000;
+    min-width: 150px;
+    background-color: #fff;
+    white-space: nowrap;
+    border: 1px solid #ccc;
+    padding: 6px 12px !important;
+    box-shadow: 0 2px 10px rgba(0,0,0,.1);
+}
+
+.button-menu.active .button-menu__dropdown {
+    display: block;
+}
+
+.button-menu__dropdown li a {
+    padding: 6px 0;
+    display: inline-block;
+}
+
+.panel-content summary {
+    cursor: pointer;
+    outline: 0;
+}
+
+.panel-content summary:focus {
+    color: #0073aa;
+}
+
+.panel-content details[open] summary {
+    margin-bottom: 5px;
+}
+
+.source-string {
+    padding: 20px 10px;
+}
+
+.source-string__singular small,
+.source-string__plural small {
+    display: block;
+    color: #666;
+    font-size: 12px;
+}
+
+.source-string__plural {
+    margin-top: 15px;
+}
+
+.source-details {
+    padding: 0 10px;
+    color: #666;
+}
+
+.source-details dl + dl {
+    margin-top: 10px;
+}
+
+.source-details dt {
+    font-size: 12px;
+}
+
+.source-details dd {
+    color: #333;
+}
+
+.translation-wrapper {
+    padding: 0 10px;
+    margin: 15px 0;
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+    border-color: #eee;
+    background: #fff;
+}
+
+.translation-wrapper:focus-within {
+    box-shadow:  0 0 2px 1px #33b3db;
+}
+
+.translation-wrapper .warning {
+    margin: 15px 0 0;
+}
+
+.translation-wrapper .textareas {
+    display: none;
+}
+
+.translation-wrapper .textareas.active {
+    display: block;
+}
+
+.translation-form-wrapper {
+    border-bottom: 1px solid #eee;
+    margin-left: -10px;
+    margin-right: -10px;
+    padding: 0 10px;
+    line-height: 40px;
+    display: flex;
+}
+
+.translation-form-wrapper span {
+    font-weight: 400;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    color: #666;
+    font-size: 13px;
+}
+
+ul.translation-form-list {
+    padding: 0;
+    list-style: none;
+    flex: 1;
+    margin-left: 10px;
+}
+
+ul.translation-form-list li {
+    display: inline-block;
+    margin-right: 5px;
+    cursor: pointer;
+}
+
+
+ul.translation-form-list button {
+    background: none;
+    border: 0;
+    box-shadow: none;
+    vertical-align: top;
+    height: auto;
+    font-size: 13px;
+    color: #333;
+    line-height: 40px;
+    margin: 0;
+    padding: 0 5px;
+    border-radius: 0;
+}
+
+ul.translation-form-list button:focus,
+ul.translation-form-list button:hover {
+    box-shadow: inset 0 -2px 0 0 #0085ba;
+    background: none;
+    border: 0;
+}
+
+ul.translation-form-list button.translation-form-list__tab--active {
+    font-weight: 600;
+    box-shadow: inset 0 -2px 0 0 #0085ba;
+}
+
+.translation-actions {
+    display: flex;
+    padding: 7px 0;
+    flex-direction: row-reverse;
+}
+
+.translation-actions .info {
+    font-style: italic;
+}
+
+.translation-actions__secondary {
+    flex: 1;
+}
+
+.translation-actions__secondary button {
+    height: 35px;
+}
+
+button.translation-actions__save {
+    font-size: 15px;
+    height: 35px;
+    line-height: 1;
+    background: #0085ba;
+    border-color: #0073aa #006799 #006799;
+    box-shadow: 0 1px 0 #006799;
+    color: #fff;
+    text-decoration: none;
+    text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
+}
+
+button.translation-actions__save:hover {
+    background: #008ec2;
+    border-color: #006799;
+    color: #fff;
+}
+
+button.translation-actions__save:focus {
+    background: #008ec2;
+    border-color: #006799;
+    box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db;
+    color: #fff;
+}
+
+.suggestions-wrapper {
+    padding: 0 10px;
+    margin-bottom: 15px;
+}
+
+.suggestions-wrapper details {
+    margin-bottom: 15px;
+    color: #666;
+}
+
+.suggestions-wrapper details:last-child {
+    margin-bottom: 0;
+}
+
+.with-tooltip {
+    position: relative;
+}
+
+@keyframes show {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1
+    }
+}
+
+.with-tooltip:active:after,
+.with-tooltip:active:before,
+.with-tooltip:focus:after,
+.with-tooltip:focus:before,
+.with-tooltip:hover:after,
+.with-tooltip:hover:before {
+    animation-delay: .3s;
+    animation-duration: .1s;
+    animation-fill-mode: forwards;
+    animation-name: show;
+    animation-timing-function: ease-in;
+    display: inline-block;
+}
+
+.with-tooltip:after {
+    transform: translateX(50%);
+    bottom: 100%;
+    margin-bottom: 6px;
+    right: 50%;
+    -webkit-font-smoothing: subpixel-antialiased;
+    background: #23282d;
+    border-radius: 3px;
+    color: #fff;
+    content: attr(aria-label);
+    display: none;
+    font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    letter-spacing: normal;
+    opacity: 0;
+    padding: .5em .75em;
+    pointer-events: none;
+    position: absolute;
+    text-align: center;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    white-space: pre;
+    word-wrap: break-word;
+    z-index: 100;
+}
+
+.with-tooltip:before {
+    border: 6px solid transparent;
+    border-top-color: #23282d;
+    bottom: auto;
+    margin-right: -6px;
+    right: 50%;
+    top: -7px;
+    color: #23282d;
+    content: "";
+    display: none;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    width: 0;
+    z-index: 101;
+}
+
+@keyframes loading-indicator {
+    0%, 80%, 100% {
+        opacity: 0;
+    }
+    40% {
+        opacity: 1;
+    }
+}
+
+.suggestions__loading-indicator__icon {
+    font-size: 4px;
+    margin-left: .5rem;
+    line-height: 1;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.suggestions__loading-indicator__icon span {
+    animation-duration: 1s;
+    animation-delay: 0ms;
+    animation-iteration-count: infinite;
+    animation-name: loading-indicator;
+    animation-timing-function: ease-in-out;
+    background-color: #666;
+    border-radius: 50%;
+    display: inline-block;
+    width: 1em;
+    vertical-align: top;
+    height: 1em;
+}
+
+.suggestions__loading-indicator__icon span:nth-child(2) {
+    animation-delay: 160ms;
+    margin-left: 1em;
+}
+
+.suggestions__loading-indicator__icon span:nth-child(3) {
+    animation-delay: 320ms;
+    margin-left: 1em;
+}
+
+html.modal-open {
+    overflow: hidden;
+}
+
+.wporg-translate-modal {
+    display: none;
+}
+
+.wporg-translate-modal--open {
+    display: block;
+}
+
+.wporg-translate-modal__overlay {
+    animation: edit-post__fade-in-animation .2s ease-out 0s;
+    animation-fill-mode: forwards;
+    background-color: hsla(0,0%,100%,.4);
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 100000;
+}
+
+.wporg-translate-modal__frame {
+    background: #fff;
+    border: 1px solid #ccc;
+    box-shadow: 0 2px 10px rgba(0,0,0,.1);
+    box-sizing: border-box;
+    margin: 0;
+    overflow: auto;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 1000;
+    font-family: "Open Sans", sans-serif;
+    padding: 15px;
+}
+
+@media (min-width: 600px) {
+    .wporg-translate-modal__frame {
+        bottom: auto;
+        left: 10%;
+        right: 10%;
+        top: 50%;
+        max-height: calc(100% - 100px);
+        max-width: 960px;
+        min-width: 360px;
+        transform: translate(0,-50%);
+        margin: 0 auto;
+    }
+}
+
+.wporg-translate-modal__header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    position: sticky;
+    top: -15px;
+    background: #fff;
+    box-shadow: 0 10px 10px #fff;
+}
+
+.wporg-translate-modal__headline {
+    line-height: 1;
+    font-weight: 300;
+    font-size: 22px;
+}
+
+.wporg-translate-modal__close {
+    background: none;
+    height: 40px;
+    width: 40px;
+    font-size: 20px;
+    padding: 0;
+    line-height: 20px;
+    color: #555;
+    border: 1px solid transparent;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+.wporg-translate-modal__close:focus,
+.wporg-translate-modal__close:hover {
+    background: #fafafa;
+    border-color: #999;
+    color: #23282d;
+}
+
+.wporg-translate-modal__close:focus {
+    border-color: #5b9dd9;
+    box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
+    outline: 0;
+}
+
+.wporg-translate-modal__content h2 {
+    line-height: 1;
+    font-weight: 300;
+    font-size: 18px;
+    margin: 30px 0 10px;
+    font-family: "Open Sans", sans-serif;
+}
+
+.wporg-translate-modal__content h2:first-child {
+    margin-top: 0;
+}
+
+.wporg-translate-modal__content ul {
+    margin-left: 25px;
+    padding-left: 0;
+}
+
+.wporg-translate-modal__content li > ul,
+.wporg-translate-modal__content li + li {
+    margin-top: 3px;
+}
+
+.wporg-translate-modal__content a {
+    color: #0073aa;
+}
+
+.wporg-translate-modal__content a:hover,
+.wporg-translate-modal__content a:focus {
+    color: #00a0d2;
+    text-decoration: underline;
+}
+
+.wporg-translate-modal__content .no-list {
+    list-style: none;
+    margin: 0;
+}
+
+.wporg-translate-modal__content_primary {
+    margin-bottom: 30px;
+}
+
+@media (min-width: 600px) {
+    .wporg-translate-modal__content {
+        display: flex;
+    }
+
+    .wporg-translate-modal__content_primary {
+        flex: 50%;
+        margin-right: 15px;
+        margin-bottom: 0;
+    }
+
+    .wporg-translate-modal__content_secondary {
+        flex: 50%;
+        margin-left: 15px;
+    }
+}
+
+.textarea-direction-ltr button.translation-actions__rtl,
+.translation-sets-rtl button.translation-actions__ltr {
+    display: inline-block;
+}
+
+.textarea-direction-ltr button.translation-actions__ltr,
+button.translation-actions__ltr,
+button.translation-actions__rtl {
+    display: none;
+}
+
+table.translations.translation-sets-rtl .textarea-direction-ltr .foreign-text {
+    direction: ltr;
+}

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

@@ -10 +10 @@
 if ( $t->translation_status ) {
     $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 ) );
-    $more_links['translation-permalink'] = '<a tabindex="-1" href="' . esc_url( $translation_permalink ) . '">' . __( 'Permalink to this translation', 'glotpress' ) . '</a>';
+    $more_links['translation-permalink'] = '<a href="' . esc_url( $translation_permalink ) . '">Permalink to translation</a>';
 } else {
     $original_permalink = gp_url_project_locale( $project, $locale->slug, $translation_set->slug, array( 'filters[original_id]' => $t->original_id ) );
-    $more_links['original-permalink'] = '<a tabindex="-1" href="' . esc_url( $original_permalink ) . '">' . __( 'Permalink to this original', 'glotpress' ) . '</a>';
+    $more_links['original-permalink'] = '<a href="' . esc_url( $original_permalink ) . '">Permalink to original</a>';
 }
 
 $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' ) );
-$more_links['history'] = '<a tabindex="-1" href="' . esc_url( $original_history ) . '">' . __( 'All translations of this original', 'glotpress' ) . '</a>';
+$more_links['history'] = '<a href="' . esc_url( $original_history ) . '">Translation History</a>';
 
 /**
@@ -40 +40 @@
     $t = map_glossary_entries_to_translation_originals( $t, $glossary, $glossary_entries_terms );
 }
+
 ?>
 <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 ); ?>">
     <td colspan="<?php echo $can_approve ? 5 : 4 ?>">
-        <div class="strings">
-        <?php
-            $singular = isset( $t->singular_glossary_markup ) ? $t->singular_glossary_markup : esc_translation( $t->singular );
-            $plural   = isset( $t->plural_glossary_markup ) ? $t->plural_glossary_markup : esc_translation( $t->plural );
-        ?>
-
-        <?php if ( ! $t->plural ): ?>
-        <p class="original"><?php echo prepare_original( $singular ); ?></p>
-        <?php textareas( $t, array( $can_edit, $can_approve_translation ) ); ?>
-        <?php else: ?>
-            <?php if ( $locale->nplurals == 2 && $locale->plural_expression == 'n != 1'): ?>
-                <p><?php printf(__( 'Singular: %s', 'glotpress' ), '<span class="original">'. $singular .'</span>'); ?></p>
-                <?php textareas( $t, array( $can_edit, $can_approve ), 0 ); ?>
-                <p class="clear">
-                    <?php printf(__( 'Plural: %s', 'glotpress' ), '<span class="original">'. $plural .'</span>'); ?>
-                </p>
-                <?php textareas( $t, array( $can_edit, $can_approve ), 1 ); ?>
-            <?php else: ?>
-                <!--
-                TODO: labels for each plural textarea and a sample number
-                -->
-                <p><?php printf(__( 'Singular: %s', 'glotpress' ), '<span class="original">'. $singular .'</span>'); ?></p>
-                <p class="clear">
-                    <?php printf(__( 'Plural: %s', 'glotpress' ), '<span class="original">'. $plural .'</span>'); ?>
-                </p>
-                <?php foreach( range( 0, $locale->nplurals - 1 ) as $plural_index ): ?>
-                    <?php if ( $locale->nplurals > 1 ): ?>
-                    <p class="plural-numbers"><?php printf(__( 'This plural form is used for numbers like: %s', 'glotpress' ),
-                            '<span class="numbers">'.implode(', ', $locale->numbers_for_index( $plural_index ) ).'</span>' ); ?></p>
-                    <?php endif; ?>
-                    <?php textareas( $t, array( $can_edit, $can_approve ), $plural_index ); ?>
-                <?php endforeach; ?>
-            <?php endif; ?>
-        <?php endif; ?>
-        </div>
-
-        <div class="meta">
-            <h3><?php _e( 'Meta', 'glotpress' ); ?></h3>
-            <dl>
-                <dt><?php _e( 'Status:', 'glotpress' ); ?></dt>
-                <dd>
-                    <?php echo display_status( $t->translation_status ); ?>
-                    <?php if ( $t->translation_status ): ?>
-                        <?php if ( $can_approve_translation ) : ?>
-                            <?php if ( 'current' !== $t->translation_status ) : ?>
-                            <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>
+        <div class="editor-panel">
+            <div class="editor-panel__left">
+                <div class="panel-header">
+                    <?php
+                    $status = sprintf(
+                        '<span class="panel-header__bubble%s">%s</span>',
+                        $t->translation_status ? ' panel-header__bubble--' . $t->translation_status : '',
+                        display_status( $t->translation_status )
+                    );
+
+                    $warnings_count = wporg_gp_count_warnings( $t );
+                    $warnings_info  = '';
+                    if ( $warnings_count ) {
+                        $warnings_info = ' <span class="panel-header__bubble panel-header__bubble--warning">' . sprintf(
+                            _n( '%s warning', '%s warnings', $warnings_count ),
+                            number_format_i18n( $warnings_count )
+                        ) . '</span>';
+                    }
+                    ?>
+                    <h3>Original <?php echo $status . $warnings_info; ?></h3>
+                    <div class="panel-header-actions">
+                        <button type="button" class="panel-header-actions__cancel with-tooltip" aria-label="Close current editor">
+                            <span class="screen-reader-text">Close</span><span aria-hidden="true" class="dashicons dashicons-no-alt"></span>
+                        </button>
+                        <button type="button" class="panel-header-actions__previous with-tooltip" aria-label="Open previous editor">
+                            <span class="screen-reader-text">Previous</span><span aria-hidden="true" class="dashicons dashicons-arrow-up-alt2"></span>
+                        </button>
+                        <button type="button" class="panel-header-actions__next with-tooltip" aria-label="Open next editor">
+                            <span class="screen-reader-text">Next</span><span aria-hidden="true" class="dashicons dashicons-arrow-down-alt2"></span>
+                        </button>
+                        <div class="button-menu">
+                            <button type="button" class="button-menu__toggle with-tooltip" aria-label="Show contextual links">
+                                <span class="screen-reader-text">Links</span><span aria-hidden="true" class="dashicons dashicons-paperclip"></span>
+                            </button>
+                            <ul class="button-menu__dropdown">
+                                <?php foreach ( $more_links as $link ) : ?>
+                                    <li><?php echo $link; ?></li>
+                                <?php endforeach; ?>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="panel-content">
+                    <?php
+                    $singular = isset( $t->singular_glossary_markup ) ? $t->singular_glossary_markup : esc_translation( $t->singular );
+                    $plural   = isset( $t->plural_glossary_markup ) ? $t->plural_glossary_markup : esc_translation( $t->plural );
+                    ?>
+                    <div class="source-string strings">
+                        <?php if ( ! $t->plural ) : ?>
+                            <div class="source-string__singular">
+                                <span class="original"><?php echo prepare_original( $singular ); ?></span>
+                                <span aria-hidden="true" class="original-raw"><?php echo esc_translation( $t->singular ); ?></span>
+                            </div>
+                        <?php else: ?>
+                            <div class="source-string__singular">
+                                <small>Singular:</small>
+                                <span class="original"><?php echo $singular; ?></span>
+                                <span aria-hidden="true" class="original-raw"><?php echo esc_translation( $t->singular ); ?></span>
+                            </div>
+                            <div class="source-string__plural">
+                                <small>Plural:</small>
+                                <span class="original"><?php echo $plural; ?></span>
+                                <span aria-hidden="true" class="original-raw"><?php echo esc_translation( $t->plural ); ?></span>
+                            </div>
+                        <?php endif; ?>
+                    </div>
+
+                    <details class="source-details">
+                        <summary>Context</summary>
+
+                        <?php if ( $t->context ): ?>
+                            <dl class="source-details__context">
+                                <dt><?php _e( 'Context:', 'glotpress' ); ?></dt>
+                                <dd><span class="context bubble"><?php echo esc_translation( $t->context ); ?></span></dd>
+                            </dl>
+                        <?php endif; ?>
+                        <?php if ( $t->extracted_comments ) :
+                            $comments = trim( preg_replace( '/^translators:/ ', '', $t->extracted_comments ) );
+                            ?>
+                            <dl class="source-details__comments">
+                                <dt><?php _e( 'Comment:', 'glotpress' ); ?></dt>
+                                <dd><?php echo make_clickable( esc_translation( $comments ) ); ?></dd>
+                            </dl>
+                        <?php endif; ?>
+                        <?php references( $project, $t ); ?>
+                    </details>
+
+                    <div class="translation-wrapper">
+                        <?php if ( $t->plural && $locale->nplurals > 1 ) : ?>
+                            <div class="translation-form-wrapper">
+                                <span>Form:</span>
+                                <ul class="translation-form-list">
+                                    <?php if ( 2 === (int) $locale->nplurals && 'n != 1' === $locale->plural_expression ) : ?>
+                                        <li>
+                                            <button class="translation-form-list__tab translation-form-list__tab--active with-tooltip"
+                                                    type="button"
+                                                    aria-label="Translation for singular form"
+                                                    data-plural-index="0">
+                                                Singular
+                                            </button>
+                                        </li>
+                                        <li>
+                                            <button class="translation-form-list__tab with-tooltip"
+                                                    type="button"
+                                                    aria-label="Translation for plural form"
+                                                    data-plural-index="1">
+                                                Plural
+                                            </button>
+                                        </li>
+                                    <?php else : ?>
+                                        <?php foreach( range( 0, $locale->nplurals - 1 ) as $plural_index ):
+                                            $plural_string = implode(', ', $locale->numbers_for_index( $plural_index ) );
+                                            ?>
+                                            <li>
+                                                <button
+                                                        class="translation-form-list__tab with-tooltip<?php echo ( 0 === $plural_index ) ? ' translation-form-list__tab--active' : ''; ?>"
+                                                        data-plural-index="<?php echo $plural_index; ?>"
+                                                        aria-label="<?php printf('This plural form is used for numbers like: %s', $plural_string ); ?>"
+                                                        type="button">
+                                                    <?php echo $plural_string; ?>
+                                                </button>
+                                            </li>
+                                        <?php endforeach; ?>
+                                    <?php endif; ?>
+                                </ul>
+                            </div>
+                        <?php endif; ?>
+
+                        <?php if ( ! $t->plural ) : ?>
+                            <?php wporg_gp_translate_textarea( $t, [ $can_edit, $can_approve_translation ] ); ?>
+                        <?php else : ?>
+                            <?php foreach( range( 0, $locale->nplurals - 1 ) as $plural_index ): ?>
+                                <?php wporg_gp_translate_textarea( $t, [ $can_edit, $can_approve ], $plural_index ); ?>
+                            <?php endforeach; ?>
+                        <?php endif; ?>
+
+                        <div class="translation-actions">
+                            <?php if ( $can_edit ) : ?>
+                                <div class="translation-actions__primary">
+                                    <button class="translation-actions__save with-tooltip"
+                                            type="button"
+                                            aria-label="<?php echo $can_approve_translation ? 'Save and approve translation' : 'Suggest new translation'; ?>"
+                                            data-nonce="<?php echo esc_attr( wp_create_nonce( 'add-translation_' . $t->original_id ) ); ?>">
+                                        <?php echo $can_approve_translation ? 'Save' : 'Suggest'; ?>
+                                    </button>
+                                </div>
+                                <div class="translation-actions__secondary">
+                                    <button type="button" class="translation-actions__copy with-tooltip" aria-label="Copy original">
+                                        <span class="screen-reader-text">Copy</span><span aria-hidden="true" class="dashicons dashicons-admin-page"></span>
+                                    </button>
+                                    <button type="button" class="translation-actions__ltr with-tooltip" aria-label="Switch to LTR">
+                                        <span class="screen-reader-text">LTR</span><span aria-hidden="true" class="dashicons dashicons-editor-ltr"></span>
+                                    </button>
+                                    <button type="button" class="translation-actions__rtl with-tooltip" aria-label="Switch to RTL">
+                                        <span class="screen-reader-text">RTL</span><span aria-hidden="true" class="dashicons dashicons-editor-rtl"></span>
+                                    </button>
+                                    <button type="button" class="translation-actions__help with-tooltip" aria-label="Show help">
+                                        <span class="screen-reader-text">Help</span><span aria-hidden="true" class="dashicons dashicons-editor-help"></span>
+                                    </button>
+                                </div>
+                            <?php elseif ( is_user_logged_in() ) : ?>
+                                You are not allowed to edit this translation.
+                            <?php else : ?>
+                                <p class="info">
+                                    <?php
+                                    printf(
+                                        'You <a href="%s">have to log in</a> to edit this translation.',
+                                        esc_url( wp_login_url( gp_url_current() ) )
+                                    );
+                                    ?>
+                                </p>
                             <?php endif; ?>
-                            <?php if ( 'rejected' !== $t->translation_status ) : ?>
-                            <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>
+                        </div>
+                    </div>
+
+                    <?php
+                    if ( has_action( 'wporg_translate_suggestions' ) ) {
+                        ?>
+                        <div class="suggestions-wrapper">
+                            <?php do_action( 'wporg_translate_suggestions', $t ); ?>
+                        </div>
+                        <?php
+                    }
+                    ?>
+                </div>
+            </div>
+
+            <div class="editor-panel__right">
+                <div class="panel-header">
+                    <h3><?php _e( 'Meta', 'glotpress' ); ?></h3>
+                </div>
+                <div class="panel-content">
+                    <div class="meta">
+
+                        <?php if ( $t->translation_status ): ?>
+                            <div class="status-actions">
+                            <?php if ( $can_approve_translation ) : ?>
+                                <?php if ( 'current' !== $t->translation_status ) : ?>
+                                    <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>
+                                <?php endif; ?>
+                                <?php if ( 'rejected' !== $t->translation_status ) : ?>
+                                    <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>
+                                <?php endif; ?>
+                                <?php if ( 'fuzzy' !== $t->translation_status ) : ?>
+                                    <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>
+                                <?php endif; ?>
+                            <?php elseif ( $can_reject_self ): ?>
+                                <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>
+                                <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>
                             <?php endif; ?>
-                            <?php if ( 'fuzzy' !== $t->translation_status ) : ?>
-                            <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>
+                            </div>
+                        <?php endif; ?>
+
+                        <dl>
+                            <dt><?php _e( 'Status:', 'glotpress' ); ?></dt>
+                            <dd>
+                                <?php echo display_status( $t->translation_status ); ?>
+                            </dd>
+                        </dl>
+
+                        <?php if ( $t->translation_added && $t->translation_added != '0000-00-00 00:00:00' ): ?>
+                            <dl>
+                                <dt><?php _e( 'Date added:', 'glotpress' ); ?></dt>
+                                <dd><?php echo $t->translation_added; ?> GMT</dd>
+                            </dl>
+                        <?php endif; ?>
+                        <?php if ( $t->user ) : ?>
+                            <dl>
+                                <dt><?php _e( 'Translated by:', 'glotpress' ); ?></dt>
+                                <dd><?php gp_link_user( $t->user ); ?></dd>
+                            </dl>
+                        <?php endif; ?>
+                        <?php if ( $t->user_last_modified && ( ! $t->user || $t->user->ID !== $t->user_last_modified->ID ) ) : ?>
+                            <dl>
+                                <dt><?php
+                                    if ( 'current' === $t->translation_status ) {
+                                        _e( 'Approved by:', 'glotpress' );
+                                    } elseif ( 'rejected' === $t->translation_status ) {
+                                        _e( 'Rejected by:', 'glotpress' );
+                                    } else {
+                                        _e( 'Last updated by:', 'glotpress' );
+                                    }
+                                    ?>
+                                </dt>
+                                <dd><?php gp_link_user( $t->user_last_modified ); ?></dd>
+                            </dl>
+                        <?php endif; ?>
+
+                        <dl>
+                            <dt><?php _e( 'Priority of the original:', 'glotpress' ); ?></dt>
+                            <?php if ( $can_write ): ?>
+                                <dd><?php
+                                    echo gp_select(
+                                        'priority-' . $t->original_id,
+                                        GP::$original->get_static( 'priorities' ),
+                                        $t->priority,
+                                        array(
+                                            'class'      => 'priority',
+                                            'tabindex'   => '-1',
+                                            'data-nonce' => wp_create_nonce( 'set-priority_' . $t->original_id ),
+                                        )
+                                    );
+                                    ?></dd>
+                            <?php else : ?>
+                                <dd><?php echo gp_array_get( GP::$original->get_static( 'priorities' ), $t->priority, 'unknown' ); // WPCS: XSS ok. ?></dd>
                             <?php endif; ?>
-                        <?php elseif ( $can_reject_self ): ?>
-                            <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>
-                            <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>
-                        <?php endif; ?>
-                    <?php endif; ?>
-                </dd>
-            </dl>
-            <!--
-            <dl>
-                <dt><?php _e( 'Priority:', 'glotpress' ); ?></dt>
-                <dd><?php echo esc_html($t->priority); ?></dd>
-            </dl>
-            -->
-
-            <?php if ( $t->context ): ?>
-            <dl>
-                <dt><?php _e( 'Context:', 'glotpress' ); ?></dt>
-                <dd><span class="context bubble"><?php echo esc_translation($t->context); ?></span></dd>
-            </dl>
-            <?php endif; ?>
-            <?php if ( $t->extracted_comments ): ?>
-            <dl>
-                <dt><?php _e( 'Comment:', 'glotpress' ); ?></dt>
-                <dd><?php echo make_clickable( esc_translation($t->extracted_comments) ); ?></dd>
-            </dl>
-            <?php endif; ?>
-            <?php if ( $t->translation_added && $t->translation_added != '0000-00-00 00:00:00' ): ?>
-            <dl>
-                <dt><?php _e( 'Date added:', 'glotpress' ); ?></dt>
-                <dd><?php echo $t->translation_added; ?> GMT</dd>
-            </dl>
-            <?php endif; ?>
-            <?php if ( $t->user ) : ?>
-            <dl>
-                <dt><?php _e( 'Translated by:', 'glotpress' ); ?></dt>
-                <dd><?php gp_link_user( $t->user ); ?></dd>
-            </dl>
-            <?php endif; ?>
-            <?php if ( $t->user_last_modified && ( ! $t->user || $t->user->ID !== $t->user_last_modified->ID ) ) : ?>
-                <dl>
-                    <dt><?php
-                        if ( 'current' === $t->translation_status ) {
-                            _e( 'Approved by:', 'glotpress' );
-                        } elseif ( 'rejected' === $t->translation_status ) {
-                            _e( 'Rejected by:', 'glotpress' );
-                        } else {
-                            _e( 'Last updated by:', 'glotpress' );
-                        }
-                        ?>
-                    </dt>
-                    <dd><?php gp_link_user( $t->user_last_modified ); ?></dd>
-                </dl>
-            <?php endif; ?>
-            <?php references( $project, $t ); ?>
-
-            <dl>
-                <dt><?php _e( 'Priority of the original:', 'glotpress' ); ?></dt>
-            <?php if ( $can_write ): ?>
-                <dd><?php
-                    echo gp_select(
-                        'priority-' . $t->original_id,
-                        GP::$original->get_static( 'priorities' ),
-                        $t->priority,
-                        array(
-                            'class'      => 'priority',
-                            'tabindex'   => '-1',
-                            'data-nonce' => wp_create_nonce( 'set-priority_' . $t->original_id ),
-                        )
-                    );
-                    ?></dd>
-            <?php else : ?>
-                <dd><?php echo gp_array_get( GP::$original->get_static( 'priorities' ), $t->priority, 'unknown' ); // WPCS: XSS ok. ?></dd>
-            <?php endif; ?>
-            </dl>
-
-            <dl>
-                <dt><?php _e( 'More links:', 'glotpress' ); ?>
-                <ul>
-                    <?php foreach ( $more_links as $link ) : ?>
-                        <li><?php echo $link; // WPCS: XSS ok. ?></li>
-                    <?php endforeach; ?>
-                </ul>
-                </dt>
-            </dl>
-        </div>
-        <div class="actions">
-        <?php if ( $can_edit ): ?>
-            <button class="ok" data-nonce="<?php echo esc_attr( wp_create_nonce( 'add-translation_' . $t->original_id ) ); ?>">
-                <?php echo $can_approve_translation ? __( 'Add translation &rarr;', 'glotpress' ) : __( 'Suggest new translation &rarr;', 'glotpress' ); ?>
-            </button>
-        <?php endif; ?>
-            <?php _e( 'or', 'glotpress' ); ?> <a href="#" class="close"><?php _e( 'Cancel', 'glotpress' ); ?></a>
+                        </dl>
+                    </div>
+                </div>
+            </div>
         </div>
     </td>

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

@@ -22 +22 @@
     </td>
     <td class="original">
-        <?php echo prepare_original( esc_translation( $t->singular ) ); ?>
+        <span class="original-text"><?php echo esc_translation( $t->singular ); ?></span>
         <?php if ( $t->context ): ?>
         <span class="context bubble" title="<?php printf( __( 'Context: %s', 'glotpress' ), esc_html($t->context) ); ?>"><?php echo esc_html($t->context); ?></span>
@@ -44 +44 @@
             echo $missing_text;
         elseif ( ! $t->plural ) :
-            echo esc_translation( $t->translations[0] );
+            echo '<span class="translation-text">' . esc_translation( $t->translations[0] ) . '</span>';
         else: ?>
         <ul>
@@ -50 +50 @@
                 foreach( $t->translations as $translation ):
             ?>
-                <li><?php echo gp_is_empty_string( $translation ) ? $missing_text : esc_translation( $translation ); ?></li>
+                <li><?php echo gp_is_empty_string( $translation ) ? $missing_text : '<span class="translation-text">' . esc_translation( $translation ) . '</span>' ; ?></li>
             <?php
                 endforeach;