イベント機能のマスタ設定作成

2017-12-17 14:43 to 2017-12-17 15:00

概要

イベント機能のベース部分はざっと出来たので、イベントの種別選択のためのマスタ設定を追加。

自動生成されたものでほとんど出来てはいるが、色設定や、並び替えがスマートにできないかVueコンポーネントで実装を試す。

目標

とりあえず色設定くらいは終わらせたい。

経過

2017-12-17 16:01

色設定を作った。(カレンダーには未反映)

グラーデーションが並んでいるとそれだけでちゃんとした画面に見えるから不思議だ。

<template>
  <div class="row">
    <div class="col-12">
      <div class="sample">
        <span class="event-color-sample" v-bind:style="{backgroundColor: currentBgColor.hex, color: currentTextColor.hex}">サンプル</span>
      </div>
    </div>
    <div class="col-12 col-sm-4">
      <div>背景色</div>
      <swatches-picker v-model="currentBgColor"></swatches-picker>
    </div>
    <div class="col-12 col-sm-4">
      <div>文字色</div>
      <swatches-picker v-model="currentTextColor"></swatches-picker>
    </div>
    <input type="hidden" :name="bg_color_name" :value="currentBgColor.hex">
    <input type="hidden" :name="text_color_name" :value="currentTextColor.hex">
  </div>
</template>

<style scoped>
div.row {
  margin-bottom: 20px;
}
</style>

<script>
import { Swatches } from 'vue-color'

export default {
  props: ['bg_color_name', 'text_color_name', 'bg_color', 'text_color'],

  components: {
    'swatches-picker': Swatches,
  },

  data () {
    return {
      currentBgColor: {hex: this.bg_color === undefined ? '#3F51B5' : this.bg_color},
      currentTextColor: {hex: this.text_color === undefined ? '#FFFFFF' : this.text_color},
    }
  },

  mounted() {
  },

  methods: {
  }
}
</script>

並び替え面倒だなぁ。画面関係なく汎用的に作れたら良いんだけど。テーブルの項目とか違うから無理そうだな。

コメント