Skip to content

Commit 7dcc5b0

Browse files
jissereitsmajissereitsma
committed
Fix CSS utils
1 parent daffde2 commit 7dcc5b0

11 files changed

Lines changed: 169 additions & 100 deletions

File tree

‎view/adminhtml/templates/form.phtml‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,23 @@ if (!isset($viewModel)) {
2020
throw new RuntimeException('Did you make sure to declare the block "'.$block->getNameInLayout().'" as a Loki Component via "etc/loki_components.xml"?');
2121
}
2222
?>
23-
<div class="<?= $css('loki-form form', '@todo') ?>">
24-
<?= /* @noEscape */ $blockRenderer->html($block, 'loki-admin.form.actions', ['view_model' => $viewModel]) ?>
23+
<div class="<?= $css('loki-form form') ?>">
24+
<?= /* @noEscape */ $blockRenderer->html(
25+
$block,
26+
'loki-admin.form.actions',
27+
['view_model' => $viewModel]
28+
) ?>
2529

26-
<div class="<?= $css('page-columns', '@todo') ?>">
27-
<div class="<?= $css('main-col', '@todo') ?>">
30+
<div class="<?= $css('page-columns', 'columns') ?>">
31+
<div class="<?= $css('main-col', 'main-col') ?>">
2832
<?= /* @noEscape */ $blockRenderer->html($block, 'loki-admin.form.spinner') ?>
2933
<?= /* @noEscape */ $blockRenderer->html($block, 'loki-admin.form.inner') ?>
3034

31-
<div class="<?= $css('entry-edit form-inline', '@todo') ?>">
32-
<div class="<?= $css('fieldset-wrapper', '@todo') ?>">
35+
<div class="<?= $css('entry-edit form-inline', 'form') ?>">
36+
<div class="<?= $css('fieldset-wrapper', 'field-wrapper') ?>">
3337
<h1><?= $escaper->escapeHtml($block->getLabel()) ?></h1>
34-
<div class="<?= $css('admin__fieldset-wrapper-content', '@todo') ?>">
35-
<fieldset class="<?= $css('admin__fieldset', '@todo') ?>">
38+
<div class="<?= $css('admin__fieldset-wrapper-content', 'wrapper-content') ?>">
39+
<fieldset class="<?= $css('admin__fieldset', 'fieldset') ?>">
3640
<?php foreach ($viewModel->getFields() as $field) : ?>
3741
<?= /* @noEscape */ $templateRenderer->html(
3842
$block,

‎view/adminhtml/templates/form/actions.phtml‎

Lines changed: 57 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,58 +3,94 @@ declare(strict_types=1);
33

44
/** @version 0.2.3 */
55

6+
use Loki\AdminComponents\Form\Field\Field;
7+
use Loki\CssUtils\Util\CssClass;
68
use Magento\Framework\Escaper;
79
use Magento\Framework\View\Element\Template;
810
use Loki\AdminComponents\Component\Form\FormViewModel;
9-
use Loki\AdminComponents\Form\Fieldset\Field;
1011
use Loki\Components\Util\Block\ChildRenderer;
1112

1213
/** @var Escaper $escaper */
1314
/** @var Template $block */
1415
/** @var Field $field */
1516
/** @var FormViewModel $viewModel */
1617
/** @var ChildRenderer $childRenderer */
18+
/** @var CssClass $css */
1719

1820
$viewModel = $block->getViewModel();
1921
$buttons = $viewModel->getButtons();
20-
21-
2222
$mainSaveAction = false;
2323
$otherSaveActions = [];
2424
?>
25-
<div class="<?= $css('page-main-actions', '@todo') ?>">
26-
<div class="<?= $css('page-actions-placeholder', '@todo') ?>"></div>
27-
<div class="<?= $css('page-actions', '@todo') ?>">
28-
<div class="<?= $css('page-actions-inner', '@todo') ?>">
29-
<div class="<?= $css('page-actions-buttons', '@todo') ?>">
25+
<div class="<?= $css('page-main-actions') ?>">
26+
<div class="<?= $css('page-actions-placeholder', 'placeholder') ?>"></div>
27+
28+
<div class="<?= $css('page-actions', 'actions') ?>">
29+
<div class="<?= $css('page-actions-inner', 'actions-inner') ?>">
30+
<div class="<?= $css('page-actions-buttons', 'actions-buttons') ?>">
3031
<?php foreach ($buttons as $button) : ?>
3132
<?php $subButtons = $button->getSubButtons(); ?>
3233
<button
33-
@click="<?= $escaper->escapeHtml($button->getMethod()) ?>"
34-
title="<?= $escaper->escapeHtml(__($button->getLabel())) ?>"
34+
@click="<?= $escaper->escapeHtml(
35+
$button->getMethod()
36+
) ?>"
37+
title="<?= $escaper->escapeHtml(
38+
__($button->getLabel())
39+
) ?>"
3540
type="button"
36-
class="action- scalable <?= $escaper->escapeHtml($button->getCssClass()) ?>">
37-
<span><?= $escaper->escapeHtml(__($button->getLabel())) ?></span>
41+
class="action- scalable <?= $escaper->escapeHtml(
42+
$button->getCssClass()
43+
) ?>">
44+
<span><?= $escaper->escapeHtml(
45+
__($button->getLabel())
46+
) ?></span>
3847
</button>
3948
<?php endforeach; ?>
4049

4150
<?php if (!empty($otherSaveActions)) : ?>
42-
<div title="Save and Continue" class="<?= $css('actions-split save primary', '@todo') ?>">
43-
<button @click="saveAndContinueAction" title="Save and Continue" class="<?= $css('action-default primary', '@todo') ?>">
51+
<div
52+
title="Save and Continue"
53+
class="<?= $css(
54+
'actions-split save primary', 'button-container'
55+
) ?>"
56+
>
57+
<button
58+
@click="saveAndContinueAction"
59+
title="Save and Continue"
60+
class="<?= $css(
61+
'action-default primary',
62+
'button-save-and-continue'
63+
) ?>"
64+
>
4465
<span>Save and Continue</span>
4566
</button>
4667

47-
<button @click="toggleOtherActions" title="Save and Continue"
48-
class="<?= $css('action-toggle primary save', '@todo') ?>">
68+
<button @click="toggleOtherActions"
69+
title="Save and Continue"
70+
class="<?= $css(
71+
'action-toggle primary save',
72+
'button-toggle-actions'
73+
) ?>">
4974
<span>Select</span>
5075
</button>
5176

52-
<ul class="<?= $css('dropdown-menu', '@todo') ?>" x-cloak x-show="showOtherActions">
53-
<?php foreach ($otherSaveActions as $otherSaveAction): ?>
77+
<ul
78+
class="<?= $css('dropdown-menu', 'listing') ?>"
79+
x-cloak x-show="showOtherActions"
80+
>
81+
<?php foreach (
82+
$otherSaveActions as $otherSaveAction
83+
): ?>
5484
<li>
55-
<span @click="saveAndDuplicateAction" title="Save &amp; Duplicate" class="<?= $css('item', '@todo') ?>">
56-
Save &amp; Duplicate
57-
</span>
85+
<span
86+
@click="saveAndDuplicateAction"
87+
title="Save &amp; Duplicate"
88+
class="<?= $css(
89+
'item', 'action-label'
90+
) ?>"
91+
>
92+
Save &amp; Duplicate
93+
</span>
5894
</li>
5995
<?php endforeach; ?>
6096
</ul>

‎view/adminhtml/templates/form/field_type/from_to.phtml‎

Lines changed: 44 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,35 +18,50 @@ use Loki\Components\Util\Block\TemplateRenderer;
1818
$field = $block->getField();
1919
$fieldType = $field->getFieldType();
2020
?>
21-
<div class="<?= $css('admin__form-field', '@todo') ?>">
22-
<label class="<?= $css('admin__form-field-label', '@todo') ?>">
23-
<span>from</span>
24-
</label>
25-
<div class="<?= $css('admin__form-field-control', '@todo') ?>">
26-
<input
27-
class="<?= $css('admin__control-text', '@todo') ?>"
28-
type="text"
29-
data-name="<?= $escaper->escapeHtml($field->getCode()) ?>"
30-
maxlength="<?= $escaper->escapeHtml($fieldType->getMaximumLength()) ?>"
31-
:value="<?= $escaper->escapeHtml($field->getScope()) ?>.<?= $escaper->escapeHtml($field->getCode()) ?>"
32-
@change="setValue"
33-
placeholder="<?= $escaper->escapeHtml($field->getBlock()->getPlaceholder()) ?>"
34-
>
21+
<div class="<?= $css('') ?>">
22+
<div class="<?= $css('admin__form-field', 'field-container') ?>">
23+
<label class="<?= $css('admin__form-field-label', 'label') ?>">
24+
<span>from</span>
25+
</label>
26+
27+
<div class="<?= $css('admin__form-field-control', 'field-control') ?>">
28+
<input
29+
class="<?= $css('admin__control-text', 'field') ?>"
30+
type="text"
31+
data-name="<?= $escaper->escapeHtml($field->getCode()) ?>"
32+
maxlength="<?= $escaper->escapeHtml(
33+
$fieldType->getMaximumLength()
34+
) ?>"
35+
:value="<?= $escaper->escapeHtml(
36+
$field->getScope()
37+
) ?>.<?= $escaper->escapeHtml($field->getCode()) ?>"
38+
@change="setValue"
39+
placeholder="<?= $escaper->escapeHtml(
40+
$field->getBlock()->getPlaceholder()
41+
) ?>"
42+
>
43+
</div>
3544
</div>
36-
</div>
37-
<div class="<?= $css('admin__form-field', '@todo') ?>">
38-
<label class="<?= $css('admin__form-field-label', '@todo') ?>">
39-
<span>to</span>
40-
</label>
41-
<div class="<?= $css('admin__form-field-control', '@todo') ?>">
42-
<input
43-
class="<?= $css('admin__control-text', '@todo') ?>"
44-
type="text"
45-
data-name="<?= $escaper->escapeHtml($field->getCode()) ?>"
46-
maxlength="<?= $escaper->escapeHtml($fieldType->getMaximumLength()) ?>"
47-
:value="<?= $escaper->escapeHtml($field->getScope()) ?>.<?= $escaper->escapeHtml($field->getCode()) ?>"
48-
@change="setValue"
49-
placeholder="<?= $escaper->escapeHtml($field->getBlock()->getPlaceholder()) ?>"
50-
>
45+
46+
<div class="<?= $css('admin__form-field', 'field-container') ?>">
47+
<label class="<?= $css('admin__form-field-label', 'label') ?>">
48+
<span>to</span>
49+
</label>
50+
51+
<div class="<?= $css('admin__form-field-control', 'field-control') ?>">
52+
<input
53+
class="<?= $css('admin__control-text', 'field') ?>"
54+
type="text"
55+
data-name="<?= $escaper->escapeHtml($field->getCode()) ?>"
56+
maxlength="<?= $escaper->escapeHtml(
57+
$fieldType->getMaximumLength()
58+
) ?>"
59+
:value="<?= $escaper->escapeHtml($field->getScope()) ?>.<?= $escaper->escapeHtml($field->getCode()) ?>"
60+
@change="setValue"
61+
placeholder="<?= $escaper->escapeHtml(
62+
$field->getBlock()->getPlaceholder()
63+
) ?>"
64+
>
65+
</div>
5166
</div>
5267
</div>

‎view/adminhtml/templates/form/fieldset.phtml‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@ use Magento\Framework\View\Element\Template;
99
/** @var Escaper $escaper */
1010
/** @var Template $block */
1111
?>
12-
<div class="<?= $css('entry-edit form-inline', '@todo') ?>">
13-
<div class="<?= $css('fieldset-wrapper', '@todo') ?>">
12+
<div class="<?= $css('entry-edit form-inline') ?>">
13+
<div class="<?= $css('fieldset-wrapper', 'wrapper') ?>">
1414
<h1><?= $escaper->escapeHtml($block->getLabel()) ?></h1>
15-
<div class="<?= $css('admin__fieldset-wrapper-content', '@todo') ?>">
16-
<fieldset class="<?= $css('admin__fieldset', '@todo') ?>">
15+
16+
<div class="<?= $css('admin__fieldset-wrapper-content', 'wrapper-content') ?>">
17+
<fieldset class="<?= $css('admin__fieldset', 'fieldset') ?>">
1718
<?= /* @noEscape */ $block->getChildHtml() ?>
1819
</fieldset>
1920
</div>

‎view/adminhtml/templates/form/inner.phtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@ use Magento\Framework\View\Element\Template;
88
/** @var Template $block */
99

1010
?>
11-
<div class="<?= $css('form-inner', '@todo') ?>">
11+
<div class="<?= $css('form-inner') ?>">
1212
<?= /* @noEscape */ $block->getChildHtml() ?>
1313
</div>

‎view/adminhtml/templates/form/spinner.phtml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ use Magento\Framework\View\Element\Template;
77
/** @var Template $block */
88
/** @version 0.0.1 */
99
?>
10-
<div x-show="loading" data-role="spinner" class="<?= $css('admin__data-grid-loading-mask', '@todo') ?>" >
11-
<div class="<?= $css('spinner', '@todo') ?>">
10+
<div x-show="loading" data-role="spinner" class="<?= $css('admin__data-grid-loading-mask') ?>" >
11+
<div class="<?= $css('spinner', 'inner') ?>">
1212
<span></span>
1313
</div>
1414
</div>

‎view/adminhtml/templates/grid.phtml‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,33 +15,33 @@ if (!isset($viewModel)) {
1515
throw new RuntimeException('Did you make sure to declare the block "'.$block->getNameInLayout().'" as a Loki Component via "etc/loki_components.xml"?');
1616
}
1717
?>
18-
<div class="<?= $css('loki-grid grid', '@todo') ?>">
18+
<div class="<?= $css('loki-grid grid') ?>">
1919
<?php if ($viewModel->allowActions()): ?>
2020
<?= /* @noEscape */ $blockRenderer->html($block, 'loki-admin.grid.actions') ?>
2121
<?php endif; ?>
2222

23-
<div class="<?= $css('page-columns', '@todo') ?>">
24-
<div class="<?= $css('main-col', '@todo') ?>">
25-
<div class="<?= $css('admin__data-grid-outer-wrap', '@todo') ?>">
23+
<div class="<?= $css('page-columns', 'page-columns') ?>">
24+
<div class="<?= $css('main-col', 'main-col') ?>">
25+
<div class="<?= $css('admin__data-grid-outer-wrap', 'outer-wrap') ?>">
2626
<?= /* @noEscape */ $blockRenderer->html($block, 'loki-admin.grid.spinner') ?>
2727

28-
<div class="<?= $css('admin__data-grid-header', '@todo') ?>">
29-
<div class="<?= $css('admin__data-grid-header-row', '@todo') ?>">
28+
<div class="<?= $css('admin__data-grid-header', 'header') ?>">
29+
<div class="<?= $css('admin__data-grid-header-row', 'header-row') ?>">
3030
<?= /* @noEscape */ $blockRenderer->html($block, 'loki-admin.grid.filters') ?>
3131
</div>
32-
<div class="<?= $css('admin__data-grid-header-row', '@todo') ?>">
32+
<div class="<?= $css('admin__data-grid-header-row', 'header-row') ?>">
3333
<?= /* @noEscape */ $blockRenderer->html($block, 'loki-admin.grid.search') ?>
3434
</div>
35-
<div class="<?= $css('admin__data-grid-header-row row row-gutter', '@todo') ?>">
35+
<div class="<?= $css('admin__data-grid-header-row row row-gutter', 'row') ?>">
3636
<?= /* @noEscape */ $blockRenderer->html($block, 'loki-admin.grid.massactions') ?>
3737
<?= /* @noEscape */ $blockRenderer->html($block, 'loki-admin.grid.pager') ?>
3838
<?= /* @noEscape */ $blockRenderer->html($block, 'loki-admin.grid.records') ?>
3939
</div>
4040
</div>
4141

42-
<div class="<?= $css('admin__data-grid-header-row row row-gutter', '@todo') ?>">
43-
<div class="<?= $css('col-xs-2', '@todo') ?>">
44-
<div class="<?= $css('action-select-wrap', '@todo') ?>">
42+
<div class="<?= $css('admin__data-grid-header-row row row-gutter', 'row') ?>">
43+
<div class="<?= $css('col-xs-2', 'row-inner') ?>">
44+
<div class="<?= $css('action-select-wrap', 'row-wrapper') ?>">
4545
<?= /* @noEscape */ $blockRenderer->html($block, 'loki-admin.grid.row-actions') ?>
4646
</div>
4747
</div>

‎view/adminhtml/templates/grid/massactions.phtml‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,17 @@ if (empty($massActions)) {
1919
return;
2020
}
2121
?>
22-
<div class="<?= $css('col-xs-2', '@todo') ?>">
23-
<div class="<?= $css('action-select-wrap', '@todo') ?>">
24-
<button class="<?= $css('action-select', '@todo') ?>" title="Select Items" @click="toggleMassActions">
22+
<div class="<?= $css('col-xs-2') ?>">
23+
<div class="<?= $css('action-select-wrap', 'wrapper') ?>">
24+
<button class="<?= $css('action-select', 'button') ?>" title="Select Items" @click="toggleMassActions">
2525
<span>Actions</span>
2626
</button>
27-
<div class="<?= $css('action-menu-items', '@todo') ?>" x-cloak x-show="showMassActions" style="z-index:300">
28-
<ul class="<?= $css('action-menu', '@todo') ?>">
27+
28+
<div class="<?= $css('action-menu-items', 'listing-wrapper') ?>" x-cloak x-show="showMassActions" style="z-index:300">
29+
<ul class="<?= $css('action-menu', 'listing') ?>">
2930
<?php foreach ($massActions as $massAction): ?>
3031
<li @click="massAction" data-url="<?= /* @noEscape */ $massAction->getUrl() ?>">
31-
<span class="<?= $css('action-menu-item', '@todo') ?>"><?= $escaper->escapeHtml($massAction->getLabel()) ?></span>
32+
<span class="<?= $css('action-menu-item', 'item-span') ?>"><?= $escaper->escapeHtml($massAction->getLabel()) ?></span>
3233
</li>
3334
<?php endforeach; ?>
3435
</ul>

‎view/adminhtml/templates/grid/records.phtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ use Magento\Framework\View\Element\Template;
99
/** @var Escaper $escaper */
1010
/** @var Template $block */
1111
?>
12-
<div class="<?= $css('admin__control-support-text', '@todo') ?>">
12+
<div class="<?= $css('admin__control-support-text') ?>">
1313
<span x-html="totalItems"></span> <?= $escaper->escapeHtml(__('records found')) ?>
1414

1515
<span x-cloak x-show="getSelectedIdCount">

0 commit comments

Comments
 (0)