はじめに
さて、私の職場ではRedmineが稼働してまして、さらにそのデータを見やすく加工したダッシュボードを作成して、大型ディスプレイに表示してるんですけど。
そのダッシュボード、今まではAngularで作ってたんですが、Vue.jsも勉強したいしVuetifyでマテリアルデザインを満喫したいし……ということで、現在リプレースの真っ最中です。Vue.jsもたのしー!
その過程で覚えた小ネタをひとつ。
テーマにカスタムカラーを追加する
Vuetifyとは、Vue.jsベースのフレームワークで、ダッシュボードみたいなWebアプリを作るのに最適なんですけど。
このVuetify、「テーマ」という機能を持っていて、これがRedmineのデータの表示にとても便利なんです。
具体的に言うと……
チケットの一覧なんかを表示する際、チケットのステータスやトラッカーの値によって色を変えたい……ってこと、良くあるじゃないですか。
そんな時、「tracker1
」とか「status1
」なんていう名前のカスタムカラーを簡単に追加できます。
こんな感じで、plugins/vuetify.js
を編集しましょう。
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors'; // 追加
Vue.use(Vuetify);
export default new Vuetify({
theme: { // 追加
themes: {
light: {
// トラッカー
tracker1: colors.red.base, // バグ
tracker2: colors.amber.base, // 機能
tracker3: colors.blue.base, // サポート
// ステータス
status1: colors.red.accent1, // 新規
status2: colors.blue.lighten5, // 進行中
status3: colors.green.lighten5, // 解決
status4: colors.amber.lighten5, // フィードバック
status5: colors.grey.lighten1, // 終了
status6: colors.grey.lighten1, // 対応中
}
}
},
});
で、コンポーネント側ではこんな感じでカラーを指定します。
<v-list-item :class="'status'+issue.status.id">
<v-list-item-title>
<v-chip dark v-text="'#'+issue.id" :color="'tracker'+issue.tracker.id"/>
{{issue.subject}}
</v-list-item-title>
</v-list-item>
こんな感じで、ステータスやトラッカーの値に応じた色を簡単に適用できますよ。
今までは似たような事をSassで定義してたんですけど、断然こっちの方が手軽ですねー。とっても便利。