LoginSignup
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@ryuringin株式会社キャッチアップ

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

Posted at

はじめに

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

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?