Share feedback

src/renderer/App.vue

@@ -28,6 +28,9 @@
 			<dropdown-item @click.native="reportIssue">
 				Report a bug 🐛
 			</dropdown-item>
+			<dropdown-item @click.native="shareFeedback">
+				Share feedback 🗣
+			</dropdown-item>
 			<dropdown-divider />
 			<div class="help__widget-version">
 				{{ appVersion }}
@@ -53,6 +56,7 @@ import newRemote from "./modal/newRemote";
 import initializeGitRepository from "./modal/initializeGitRepository";
 import cloneRepository from "./modal/cloneRepository";
 import switchRepository from "./modal/switchRepository";
+import feedback from "./modal/feedback";
 
 // help widget
 import packageJson from "../../package.json";
@@ -78,6 +82,7 @@ export default {
 		initializeGitRepository,
 		cloneRepository,
 		switchRepository,
+		feedback,
 		DropdownList,
 		DropdownItem,
 		DropdownDivider
@@ -149,6 +154,10 @@ export default {
 			);
 			this.toggleHelpWidget();
 		},
+		shareFeedback() {
+			this.$store.commit("modal/toggleFeedbackModal", true);
+			this.toggleHelpWidget();
+		},
 		toggleHelpWidget() {
 			this.helpWidget = !this.helpWidget;
 		}

src/renderer/components/icon/frown.vue

@@ -0,0 +1,3 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M16 16s-1.5-2-4-2-4 2-4 2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
+</template>

src/renderer/components/icon/smile.vue

@@ -0,0 +1,3 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
+</template>

src/renderer/components/input/textarea.vue

@@ -0,0 +1,111 @@
+<template>
+	<textarea
+		:name="name"
+		class="textarea"
+		:class="{
+			'textarea-disable': disabled,
+			'textarea-invalid': isInvalid
+		}"
+		:placeholder="placeholder"
+		:disabled="disabled"
+		:style="{
+			...spacingProps,
+			...borderProps,
+			...fontProps,
+			resize
+		}"
+		:rows="rows"
+		:cols="cols"
+		@input="$emit('input', $event.target.value)"
+	></textarea>
+</template>
+
+<script>
+import spacingProps from "../../mixins/spacingProps";
+import borderProps from "../../mixins/borderProps";
+import fontProps from "../../mixins/fontProps";
+
+export default {
+	name: "TextArea",
+	mixins: [spacingProps, borderProps, fontProps],
+	props: {
+		name: {
+			type: String,
+			default: "inputField",
+			required: true
+		},
+		placeholder: {
+			type: String,
+			default: "Enter the value",
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		isInvalid: {
+			type: Boolean,
+			default: false
+		},
+		cols: {
+			type: Number,
+			default: 5
+		},
+		rows: {
+			type: Number,
+			default: 5
+		},
+		borderRadius: {
+			type: String,
+			default: ".3"
+		},
+		fontSize: {
+			type: Number,
+			default: 0.833
+		},
+		paddingTop: {
+			type: String,
+			default: ".5rem"
+		},
+		paddingBottom: {
+			type: String,
+			default: ".5rem"
+		},
+		paddingLeft: {
+			type: String,
+			default: ".8rem"
+		},
+		paddingRight: {
+			type: String,
+			default: ".8rem"
+		},
+		width: {
+			type: String,
+			default: "100%"
+		},
+		resize: {
+			type: String,
+			default: "both"
+		}
+	}
+};
+</script>
+
+<style lang="sass">
+.textarea
+	outline: none
+	border-color: #eeeeee
+
+	&-disable
+		background-color: #eeeeee
+		color: #222831
+		cursor: not-allowed
+		user-select: none
+
+	&-invalid
+		border-color: #f04747
+
+	&:focus
+		box-shadow: rgba(#00adb5, .2) 0 0 0 3px
+		border-color: #00adb5
+</style>

src/renderer/components/input/textareaLabel.vue

@@ -0,0 +1,82 @@
+<template>
+	<div :style="{ ...spacingProps }">
+		<p class="textarea__label" :for="labelName">
+			{{ label }}
+		</p>
+		<text-area
+			name="Feedback message"
+			placeholder="Enter your message"
+			label="Message"
+			:cols="cols"
+			:value="value"
+			:disabled="disabled"
+			:is-invalid="isInvalid"
+			:resize="resize"
+			@input="$emit('input', $event)"
+		/>
+	</div>
+</template>
+
+<script>
+import spacingProps from "../../mixins/spacingProps";
+import TextArea from "./textarea";
+
+export default {
+	name: "TextAreaLabel",
+	components: {
+		TextArea
+	},
+	mixins: [spacingProps],
+	props: {
+		name: {
+			type: String,
+			default: "inputField",
+			required: true
+		},
+		placeholder: {
+			type: String,
+			default: "Enter the value",
+			required: true
+		},
+		value: {
+			type: String,
+			default: ""
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		isInvalid: {
+			type: Boolean,
+			default: false
+		},
+		cols: {
+			type: Number,
+			default: 5
+		},
+		rows: {
+			type: Number,
+			default: 5
+		},
+		label: {
+			type: String,
+			required: true
+		},
+		resize: {
+			type: String,
+			default: "both"
+		}
+	},
+	computed: {
+		labelName() {
+			return this.label.toLowerCase().replace(" ", "_");
+		}
+	}
+};
+</script>
+
+<style lang="sass">
+.textarea__label
+	font-size: 12px
+	margin-bottom: .2rem
+</style>