system-themes-page.html.twig 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. {#
  2. /**
  3. * @file
  4. * Theme override for the Appearance page.
  5. *
  6. * Available variables:
  7. * - attributes: HTML attributes for the main container.
  8. * - theme_groups: A list of theme groups. Each theme group contains:
  9. * - attributes: HTML attributes specific to this theme group.
  10. * - title: Title for the theme group.
  11. * - state: State of the theme group, e.g. installed or uninstalled.
  12. * - themes: A list of themes within the theme group. Each theme contains:
  13. * - attributes: HTML attributes specific to this theme.
  14. * - screenshot: A screenshot representing the theme.
  15. * - description: Description of the theme.
  16. * - name: Theme name.
  17. * - version: The theme's version number.
  18. * - is_default: Boolean indicating whether the theme is the default theme
  19. * or not.
  20. * - is_admin: Boolean indicating whether the theme is the admin theme or
  21. * not.
  22. * - notes: Identifies what context this theme is being used in, e.g.,
  23. * default theme, admin theme.
  24. * - incompatible: Text describing any compatibility issues.
  25. * - module_dependencies: A list of modules that this theme requires.
  26. * - operations: A list of operation links, e.g., Settings, Enable, Disable,
  27. * etc. these links should only be displayed if the theme is compatible.
  28. * - title_id: The unique id of the theme label.
  29. * - description_id: The unique id of the theme description. This is
  30. * undefined if the description is casted to an empty string.
  31. *
  32. * @see template_preprocess_system_themes_page()
  33. * @see claro_preprocess_system_themes_page()
  34. */
  35. #}
  36. <div{{ attributes }}>
  37. {% for theme_group in theme_groups %}
  38. {%
  39. set theme_group_classes = [
  40. 'system-themes-list',
  41. 'system-themes-list--' ~ theme_group.state,
  42. 'clearfix',
  43. ]
  44. %}
  45. {%
  46. set card_alignment = theme_group.state == 'installed' ? 'horizontal' : 'vertical'
  47. %}
  48. {% if not loop.first %}
  49. <hr>
  50. {% endif %}
  51. <div{{ theme_group.attributes.addClass(theme_group_classes) }}>
  52. <h2 class="system-themes-list__header">{{ theme_group.title }}</h2>
  53. <div class="card-list {{ card_alignment == 'horizontal' ? 'card-list--two-cols' : 'card-list--four-cols' }}">
  54. {% for theme in theme_group.themes %}
  55. {%
  56. set theme_classes = [
  57. theme.is_default ? 'theme-default',
  58. theme.is_admin ? 'theme-admin',
  59. 'card',
  60. 'card--' ~ card_alignment,
  61. 'card-list__item',
  62. ]
  63. %}
  64. {%
  65. set theme_title_classes = [
  66. 'card__content-item',
  67. 'heading-f',
  68. ]
  69. %}
  70. {%
  71. set theme_description_classes = [
  72. 'card__content-item',
  73. ]
  74. %}
  75. <div{{ theme.attributes.addClass(theme_classes).setAttribute('aria-labelledby', theme.title_id).setAttribute('aria-describedby', theme.description_id ?: null) }}>
  76. {% if theme.screenshot %}
  77. <div class="card__image">
  78. {{ theme.screenshot }}
  79. </div>
  80. {% endif %}
  81. <div class="card__content-wrapper">
  82. <div class="card__content">
  83. <h3{{ create_attribute({'id': theme.title_id}).addClass(theme_title_classes) }} id={{ theme.title_id }}>
  84. {{- theme.name }} {{ theme.version -}}
  85. {% if theme.notes %}
  86. ({{ theme.notes|safe_join(', ') }})
  87. {%- endif -%}
  88. </h3>
  89. {% if theme.description and theme.description_id %}
  90. <div{{ create_attribute({'id': theme.description_id ?: null}).addClass(theme_description_classes) }}>
  91. {{ theme.description }}
  92. </div>
  93. {%- endif -%}
  94. </div>
  95. <div class="card__footer">
  96. {% if theme.module_dependencies %}
  97. <div class="theme-info__requires">
  98. {{ 'Requires: @module_dependencies'|t({ '@module_dependencies': theme.module_dependencies|render }) }}
  99. </div>
  100. {% endif %}
  101. {# Display operation links only if the theme is compatible. #}
  102. {% if theme.incompatible %}
  103. <small class="incompatible">{{ theme.incompatible }}</small>
  104. {% else %}
  105. {{ theme.operations }}
  106. {% endif %}
  107. </div>
  108. </div>
  109. </div>
  110. {% endfor %}
  111. </div>
  112. </div>
  113. {% endfor %}
  114. </div>