Add color picker when creating a new label

src/components/misc/create.vue

@@ -1,10 +1,10 @@
 <template>
-	<modal @close="$router.back()">
+	<modal @close="$router.back()" :overflow="true">
 		<card
 			:title="title"
 			:shadow="false"
 			:padding="false"
-			class="has-text-left"
+			class="has-text-left has-overflow"
 			:has-close="true"
 			close-icon="times"
 			@close="$router.back()"

src/components/modal/modal.vue

@@ -2,7 +2,7 @@
 	<transition name="modal">
 		<div class="modal-mask">
 			<div class="modal-container" @click.self.prevent.stop="$emit('close')">
-				<div class="modal-content">
+				<div class="modal-content" :class="{'has-overflow': overflow}">
 					<slot>
 						<div class="header">
 							<slot name="header"></slot>
@@ -44,5 +44,11 @@ export default {
 			}
 		})
 	},
+	props: {
+		overflow: {
+			type: Boolean,
+			default: false,
+		},
+	},
 }
 </script>

src/views/labels/NewLabel.vue

@@ -22,6 +22,12 @@
 				/>
 			</div>
 		</div>
+		<div class="field">
+			<label class="label">Color</label>
+			<div class="control">
+				<color-picker v-model="label.hexColor" />
+			</div>
+		</div>
 		<p class="help is-danger" v-if="showError && label.title === ''">
 			Please specify a title.
 		</p>
@@ -34,6 +40,7 @@ import labelService from '../../services/label'
 import LabelModel from '../../models/label'
 import LabelService from '../../services/label'
 import Create from '@/components/misc/create'
+import ColorPicker from '../../components/input/colorPicker'
 
 export default {
 	name: 'NewLabel',
@@ -46,6 +53,7 @@ export default {
 	},
 	components: {
 		Create,
+		ColorPicker,
 	},
 	created() {
 		this.labelService = new LabelService()