baserCMSのプラグインを新管理画面 admin-third に対応する #CSS

はじめに

baserCMS v4.2 より、新管理画面「admin-third」が利用できるようになりました。それに伴い、これまでのプラグインで、管理画面を作成していた場合、機能自体は動作しますが、デザイン崩れを引き起こしてしまいます。

基本的には、新管理画面用のCSSクラスを各パーツに付与していけば、新しいデザインに対応できますので、プラグイン開発者の方は試してみてください。

一覧画面を admin-third に対応する

新規作成ボタンを配置

admin-third では、タイトルの横に新規追加ボタンを配置します。
テンプレート上の上部あたりに次の関数を実行します。

$this->BcAdmin->addAdminMainBodyHeaderLinks([
    'url' => ['action' => 'add', $bannerArea['BannerArea']['id']],
    'title' => __d('baser', '新規追加'),
]);

一覧のテーブルにクラスを付与

table タグに、bca-table-listup クラスを追加します。

<table cellpadding="0" cellspacing="0" class="list-table sort-table" id="ListTable">
↓
<table cellpadding="0" cellspacing="0" class="list-table sort-table bca-table-listup" id="ListTable">

thead タグに bca-table-listup__thead クラスを追加します。

<thead>
↓
<thead class="bca-table-listup__thead">

th タグに、bca-table-listup__thead-th クラスを追加します。

<th>
↓
<th class="bca-table-listup__thead-th">

td タグに bca-table-listup__tbody-td クラスを追加します。

<td>
↓
<td class="bca-table-listup__tbody-td">

並び替え機能のボタンのアイコンを FontAwesome に変更

昇順アイコンを <i class="bca-icon--asc"></i> に変更
降順アイコンを <i class="bca-icon--desc"></i> に変更
クラス bca-table-listup__a を追加

<?php echo $this->Paginator->sort('name', [
        'asc' => $this->BcBaser->getImg('admin/blt_list_down.png', array('alt' => '昇順', 'title' => '昇順')).' 表示場所',
        'desc' => $this->BcBaser->getImg('admin/blt_list_up.png', array('alt' => '降順', 'title' => '降順')).' 表示場所'
    ], ['escape' => false, 'class' => 'btn-direction']
) ?>
↓
<?php echo $this->Paginator->sort('name', [
        'asc' => '<i class="bca-icon--asc"></i>'.' 表示場所',
        'desc' => '<i class="bca-icon--desc"></i>'.' 表示場所'
    ], ['escape' => false, 'class' => 'btn-direction bca-table-listup__a']
) ?>

アクション欄を一番最後のカラムへ移動しアイコンを FontAwesome に変更

admin-third では、編集、削除等を配置するアクション欄は一番最後、のカラムに移動します。

また、アイコンを FontAwesome に変更する場合は次の手順を踏みます。

リンク対象を空文字に変更
bca-btn-icon クラスを付与
data-bca-btn-type にアイコンを特定する文字を指定
data-bca-btn-size に lg

data-bca-btn-type には、色々してできますが、次のようなものがあります。

th-list、edit、copy、edit、delete、publish、unpublish

<?php $this->BcBaser->link(
    $this->BcBaser->getImg('admin/icn_tool_manage.png', ['alt' => 'バナー管理', 'class' => 'btn']),
    ['controller' => 'banner_files', 'action' => 'index', $data['BannerArea']['id']], 
    ['title' => 'バナー管理']
) ?>
↓
<?php $this->BcBaser->link(
    '',
    ['controller' => 'banner_files', 'action' => 'index', $data['BannerArea']['id']],
    ['title' => 'バナー管理', 
        'class' => 'bca-btn-icon', 
        'data-bca-btn-type' => 'th-list', 
        'data-bca-btn-size' => 'lg'
]) ?>

アクション欄の見出しの th を次のように指定します。

<th class="bca-table-listup__thead-th"><?php echo __d('baser', 'アクション') ?></th>

一列目に、レコード選択機能や、並べ替え機能のパーツを配置する

th について、一括選択や並べ替えがある場合は、次のタグを利用します。

// 一括選択
<?php echo $this->BcForm->input('ListTool.checkall', ['type' => 'checkbox', 'label' => __d('baser', '一括選択')]) ?>
// 並び替え
<?php $this->BcBaser->link('<i class="bca-btn-icon-text" data-bca-btn-type="draggable"></i>' . __d('baser', '並び替え'), ['sortmode' => 1, $this->request->params['pass'][0]]) ?>
// 並び替え（ノーマル）
<?php $this->BcBaser->link('<i class="bca-btn-icon-text" data-bca-btn-type="draggable"></i>' . __d('baser', 'ノーマル'), ['sortmode' => 0, $this->request->params['pass'][0]]) ?>

td について、レコード選択や並び替えがある場合は次のタグを利用します。

// チェックボックス
<?php echo $this->BcForm->input(
    'ListTool.batch_targets.' . $data['MailField']['id'], 
    ['type' => 'checkbox', 
        'label'=> '<span class="bca-visually-hidden">' . __d('baser', 'チェックする') . '</span>', 
        'class' => 'batch-targets bca-checkbox__input', 
        'value' => $data['MailField']['id']
]) ?>
// 並べ替え用ドラッグボタン
<span class="sort-handle"><i class="bca-btn-icon-text" data-bca-btn-type="draggable"></i><?php echo __d('baser', 'ドラッグ可能') ?></span>
<?php echo $this->BcForm->hidden('Sort.id' . $data['MailField']['id'], ['class' => 'id', 'value' => $data['MailField']['id']]) ?>

一括処理のコントロールを追加

一括処理用のコントロールがある場合は、テーブルの上部に次のコードを配置します。

<div>
    <?php echo $this->BcForm->input(
        'ListTool.batch', 
        ['type' => 'select', 
            'options' => ['publish' => __d('baser', '有効'), 'unpublish' => __d('baser', '無効'), 'del' => __d('baser', '削除')], 
            'empty' => __d('baser', '一括処理')
    ]) ?>
    <?php echo $this->BcForm->button(
        __d('baser', '適用'), 
        ['id' => 'BtnApplyBatch', 
            'disabled' => 'disabled', 
            'class' => 'bca-btn', 
            'data-bca-btn-size' => 'lg'
    ]) ?>
</div>

検索機能にクラスを追加

検索条件を入力するコントロールを囲む p タグに、 bca-search__input-list クラスを追加します。
検索条件を入力するコントロールを囲む span タグに、 bbca-search__input-item クラスを追加します。
label タグに、 bca-search__input-item-label を追加します。

<p class="bca-search__input-list">
    <span class="bca-search__input-item">
        <?php echo $this->BcForm->label('BannerArea.name', '表示場所', ['class' => 'bca-search__input-item-label']) ?>&nbsp;
        <?php echo $this->BcForm->input('BannerArea.name', ['type' => 'text', 'size' => '30']) ?>
    </span>
</p>

検索ボタンを囲む div タグに bca-search__btns クラスを追加します。
各ボタンを bca-search__btns-item を追加した div タグで囲います。
各ボタンに bca-btn クラスを追加します。
各ボタンについて、 data-bca-btn-type 属性で、ボタンのタイプを指定します。

data-bca-btn-type は、以下のようなものがあります。

search、clear

<div class="button bca-search__btns">
    <div class="bca-search__btns-item">
        <?php $this->BcBaser->link(
            __d('baser', '検索'), 
            "javascript:void(0)", 
            ['id' => 'BtnSearchSubmit', 
                'class' => 'bca-btn', 
                'data-bca-btn-type' => 'search'
        ]) ?>
    </div>
    <div class="bca-search__btns-item">
        <?php $this->BcBaser->link(
            __d('baser', 'クリア'), 
            "javascript:void(0)", 
            ['id' => 'BtnSearchClear', 
                'class' => 'bca-btn', 
                'data-bca-btn-type' => 'clear'
        ]) ?>
    </div>
</div>

編集画面を admin-third に対応する

フォームのテーブルにクラスを付与

table タグに bca-form-table クラスを追加します。

<table cellpadding="0" cellspacing="0" class="form-table section">
↓
<table cellpadding="0" cellspacing="0" class="form-table section bca-form-table">

th タグに bca-form-table__labelクラスを追加します。

<th class="col-head"><?php echo $this->BcForm->label('BannerArea.name', '表示場所名') ?></th>
↓
<th class="col-head bca-form-table__label"><?php echo $this->BcForm->label('BannerArea.name', '表示場所名') ?></th>

td タグに bca-form-table__input クラスを追加します。

<td class="col-input">
↓
<td class="col-input bca-form-table__input">

保存ボタンにクラスを付与

保存ボタンを囲う div タグに、bca-actions クラスを追加
保存ボタンに、 bca-btn、bca-actions__item クラスを追加
保存ボタンに、 data-bca-btn-type 属性として、 save を追加
保存ボタンに、 data-bca-btn-size 属性として、 lg を追加
保存ボタンに、 data-bca-btn-width 属性として、 lg を追加

<div class="submit">
<?php echo $this->BcForm->submit('保　存', array('div' => false, 'class' => 'btn-red button')) ?>
</div>
↓
<div class="submit bca-actions">
<?php echo $this->BcForm->submit('保　存', array('div' => false, 'class' => 'button bca-btn bca-actions__item', 'data-bca-btn-type' => 'save', 'data-bca-btn-size' => 'lg', 'data-bca-btn-width' => 'lg')) ?>
</div>

削除ボタンにクラスを付与

削除ボタンを bca-actions__sub クラスを追加した div タグで囲う
削除ボタンに、 bca-btn、bca-actions__item クラスを追加
削除ボタンに、 data-bca-btn-type 属性として、 delete を追加
削除ボタンに、 data-bca-btn-size 属性として、 sm を追加
削除ボタンに、 data-bca-btn-color 属性として、 danger を追加

<?php $this->BcBaser->link('削　除',
    ['action' => 'delete', $bannerArea['BannerArea']['id'], $this->BcForm->value('BannerFile.id')],
    ['class'=>'button', 
        'id' => 'BtnDelete'],
    sprintf('%s を本当に削除してもいいですか？', $this->BcForm->value('BannerFile.id')),
    false
) ?>
↓
<div class="bca-actions__sub">
     <?php $this->BcBaser->link('削　除',
        ['action' => 'delete', $bannerArea['BannerArea']['id'], $this->BcForm->value('BannerFile.id')],
        ['class' => 'button bca-btn bca-actions__itemn', 
            'data-bca-btn-type' => 'delete',
            'data-bca-btn-size' => 'sm', 
            'data-bca-btn-color' => 'danger', 
            'id' => 'BtnDelete'],
        sprintf('%s を本当に削除してもいいですか？', $this->BcForm->value('BannerFile.id')),
        false
    ) ?>
</div>

ヘルプアイコンを FontAwesome に変更

これは一括置換でいけそう

<?php echo $this->BcBaser->img('admin/icn_help.png', array('id' => 'helpDescription', 'class' => 'btn help', 'alt' => 'ヘルプ')) ?>
↓
<i class="bca-icon--question-circle btn help bca-help"></i>

まとめ

正直、けっこうメンドイですが、 admin-third に対応すると、デザインが刷新できて気持ちがいいです。
また、 admin-third テーマは、これまで大量に読み込んでいた、CSS や Javascript もほとんど圧縮されていますので、表示速度も向上します。ぜひ、チャレンジしてみてください。