Issue #3282696 by sanduhrs: Port of l10n_community: Add progress bar and library

.l10n-community-progress {

  height: 1em;

  background-color: #eaeae1;

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;

}

.l10n-community-progress-translated,

.l10n-community-progress-untranslated {

  background-color: #96bc44;

  height: 1em;

  float: left; /* LTR */

  -moz-border-radius: 4px;

  -webkit-border-radius: 4px;

  border-radius: 4px;

}

.l10n-community-progress-untranslated {

  background-color: transparent;

}

progress:

  css:

    component:

      css/l10n-community-progress.css: {}

<?php

/**

 * @file

 * Primary module hooks for Localization community UI module.

 */

/**

 * Implements hook_theme().

 */

function l10n_community_theme() {

  return [

    'l10n_community_progress_columns' => [

      'variables' => ['sum' => NULL, 'translated' => NULL, 'has_suggestion' => NULL],

    ],

  ];

}

/**

 * Prepares variables for l10n_community_progress_columns template.

 *

 * Default template: l10n_community_progress_columns.html.twig.

 *

 * @param array $variables

 *   An associative array containing of template variables.

 */

function template_preprocess_l10n_community_progress_columns(array &$variables) {

    $sum = $variables['sum'];

  $translated = $variables['translated'];

  $has_suggestion = $variables['has_suggestion'];

  if ($sum == 0) {

    // We handle a project without any source strings available for translation.

    return [

      ['data' => t('No data available yet.'), 'colspan' => 3],

    ];

  }

  // Compute numbers, percentages and provide alternate text titles.

  $done_percent = round($translated / $sum * 100, 2);

  $status = [

    'translated' => [(int) $translated, $done_percent, t('!percent translated')],

    'untranslated' => [$sum - $translated, 100 - $done_percent, t('!percent untranslated')],

    // suggestions are not in the bar as they overlap with both translated and

    // untranslated strings, so we cannot display them here.

  ];

  // Visual summary with a progress bar.

  $bar = '<div class="l10n-community-progress">';

  foreach ($status as $key => $values) {

    if ($values[1] > 0) {

      $bar .= '<div class="l10n-community-progress-' . $key . '" style="width:' . $values[1] . '%;" title="' . strtr($values[2], ['!percent' => $values[1] . '%']) . '"></div>';

    }

  }

  $bar .= '</div>';

  $variables['bar'] = $bar;

  $variables['untranslated'] = max($sum - $translated, 0);

}

{#

/**

 * @file

 * Default theme implementation to display something.

 *

 * Available variables:

 * - foo: Foo variable description.

 *

 * @see template_preprocess_l10n_community_progress_columns()

 *

 * @ingroup themeable

 */

#}

{{ attach_library('l10n_community/progress') }}

{{ bar|raw }}