<style type="text/css" scoped>
	.colors {
		position: fixed;
		z-index: 1023;
		top: 5px;
		/*height: 100px;*/
		width: 400px;
		left: 20%;
	}
	.colors-container {
		max-width: 370px;
	}
	.dot {
		display: inline-block;
		width: 30px;
		height: 30px;
		border-radius: 30px;
		box-shadow: 0px 1px 3px 0px #3e3e3e;
		margin: 7px 7px 0 0;
		cursor: pointer;
	}
	.shade {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1022;
		background-color: transparent;
		width: 100vw;
		height: 100vh;
	}
	@media only screen and (max-width: 740px) {
		.colors {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
		}
	}
</style>

<template>
	<div>
		<div class="colors">
			<div class="ui raised segment">
				<div class="colors-container">
					<span 
						v-for="(color,index) in colors" 
						class="dot"
						v-on:click="onColorClick(index)"
						:style="`background-color: ${color};`">
					</span>
				</div>
			</div>
		</div>
		<div class="shade" v-on:click="close"></div>
	</div>
</template>

<script>


	export default {
		components:{
			'nm-button':require('@/components/NoteMenuButtonComponent.vue').default
		},
		data: function(){ 
			return {
				hover: false,
				colors: [null,'rgb(67,67,67)','rgb(102,102,102)','rgb(153,153,153)','rgb(183,183,183)','rgb(204,204,204)','rgb(217,217,217)','rgb(239,239,239)','rgb(243,243,243)','rgb(255,255,255)','rgb(152,0,0)','rgb(255,0,0)','rgb(255,153,0)','rgb(255,255,0)','rgb(0,255,0)','rgb(0,255,255)','rgb(74,134,232)','rgb(0,0,255)','rgb(153,0,255)','rgb(255,0,255)','rgb(230,184,175)','rgb(244,204,204)','rgb(252,229,205)','rgb(255,242,204)','rgb(217,234,211)','rgb(208,224,227)','rgb(201,218,248)','rgb(207,226,243)','rgb(217,210,233)','rgb(234,209,220)','rgb(221,126,107)','rgb(234,153,153)','rgb(249,203,156)','rgb(255,229,153)','rgb(182,215,168)','rgb(162,196,201)','rgb(164,194,244)','rgb(159,197,232)','rgb(180,167,214)','rgb(213,166,189)','rgb(204,65,37)','rgb(224,102,102)','rgb(246,178,107)','rgb(255,217,102)','rgb(147,196,125)','rgb(118,165,175)','rgb(109,158,235)','rgb(111,168,220)','rgb(142,124,195)','rgb(194,123,160)','rgb(166,28,0)','rgb(204,0,0)','rgb(230,145,56)','rgb(241,194,50)','rgb(106,168,79)','rgb(69,129,142)','rgb(60,120,216)','rgb(61,133,198)','rgb(103,78,167)','rgb(166,77,121)','rgb(133,32,12)','rgb(153,0,0)','rgb(180,95,6)','rgb(191,144,0)','rgb(56,118,29)','rgb(19,79,92)','rgb(17,85,204)','rgb(11,83,148)','rgb(53,28,117)','rgb(116,27,71)','rgb(91,15,0)','rgb(102,0,0)','rgb(120,63,4)','rgb(127,96,0)','rgb(39,78,19)','rgb(12,52,61)','rgb(28,69,135)','rgb(7,55,99)','rgb(32,18,77)','rgb(76,17,48)'
				],
			}
		},
		beforeCreate: function(){
		},
		mounted: function(){			
		},
		methods: {
			close(){
				this.$emit('close')
			},
			onColorClick(index){

				this.$emit('color',this.colors[index])
				this.$nextTick( () => {
					this.close()
				})
			},
		}
	}
</script>