はじめに
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']) ?>
<?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 もほとんど圧縮されていますので、表示速度も向上します。ぜひ、チャレンジしてみてください。