feat: added port picker vue component

src/components/port-picker/FirmwareVirtualOption.stories.js

@@ -0,0 +1,15 @@
+import FirmwareVirtualOption from "./FirmwareVirtualOption";
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+    title: "Firmware virtual option",
+    component: FirmwareVirtualOption,
+};
+
+const Template = (_args, {argTypes}) => ({
+    props: Object.keys(argTypes),
+    components: { FirmwareVirtualOption },
+    template: '<firmware-virtual-option v-bind="$props" />',
+});
+
+export const Primary = Template.bind({});

src/components/port-picker/FirmwareVirtualOption.vue

@@ -0,0 +1,218 @@
+<template>
+  <div
+    id="firmware-virtual-option"
+    style="display: block"
+    :style="{ display: isVirtual ? 'block' : 'none' }"
+  >
+    <div class="dropdown dropdown-dark">
+      <select
+        id="firmware-version-dropdown"
+        i18n_title="virtualMSPVersion"
+        class="dropdown-select i18n_title-replaced"
+        title="Virtual Firmware Version"
+      >
+        <option value="1.46.0">
+          MSP: 1.46 | Firmware: 4.5.*
+        </option>
+        <option value="1.45.0">
+          MSP: 1.45 | Firmware: 4.4.*
+        </option>
+        <option value="1.44.0">
+          MSP: 1.44 | Firmware: 4.3.*
+        </option>
+        <option value="1.43.0">
+          MSP: 1.43 | Firmware: 4.2.*
+        </option>
+        <option value="1.42.0">
+          MSP: 1.42 | Firmware: 4.1.*
+        </option>
+        <option value="1.41.0">
+          MSP: 1.41 | Firmware: 4.0.*
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {
+        isVirtual: {
+            type: Boolean,
+            default: true,
+        },
+    },
+};
+</script>
+
+<style>
+#firmware-virtual-option {
+    height: 76px;
+    width: 180px;
+    margin-right: 15px;
+    margin-top: 16px;
+    display: none;
+}
+.dropdown {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    height: 20px;
+    background: #fff;
+    background-image: -webkit-linear-gradient(
+        top,
+        transparent,
+        rgba(0, 0, 0, 0.06)
+    );
+    background-image: -moz-linear-gradient(
+        top,
+        transparent,
+        rgba(0, 0, 0, 0.06)
+    );
+    background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
+    background-image: linear-gradient(
+        to bottom,
+        transparent,
+        rgba(0, 0, 0, 0.06)
+    );
+    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
+    width: 99%;
+    margin-bottom: 7px;
+    border: 1px solid;
+    border-color: #ccc #ccc #ccc;
+    border-radius: 3px;
+}
+
+.dropdown:before,
+.dropdown:after {
+    content: "";
+    position: absolute;
+    z-index: 2;
+    top: 7px;
+    right: 7px;
+    width: 0;
+    height: 0;
+    border: 4px dashed;
+    border-color: #888 transparent;
+    pointer-events: none;
+}
+
+.dropdown:before {
+    border-bottom-style: solid;
+    border-top: none;
+    margin-top: -2px;
+}
+
+.dropdown:after {
+    margin-top: 5px;
+    border-top-style: solid;
+    border-bottom: none;
+}
+
+.dropdown-select {
+    position: relative;
+    overflow: visible;
+    width: 100%;
+    margin-top: 0px;
+    padding: 1px 8px 6px 5px;
+    height: 23px;
+    line-height: 20px;
+    font-size: 12px;
+    color: #62717a;
+    text-shadow: 0 1px white;
+    /* Fallback for IE 8 */
+    background: #f2f2f2;
+    /* "transparent" doesn't work with Opera */
+    background: rgba(0, 0, 0, 0) !important;
+    border: 0;
+    border-radius: 0;
+    -webkit-appearance: none;
+    appearance: 'none';
+}
+
+.dropdown-select:focus {
+    z-index: 3;
+    width: 90%;
+    color: #4fa619;
+    outline: 0px solid #49aff2;
+    outline: 0px solid -webkit-focus-ring-color;
+    outline-offset: 5px;
+    height: 25px;
+}
+
+.dropdown-select > option {
+    margin: 3px;
+    padding: 6px 8px;
+    text-shadow: none;
+    background: #f2f2f2;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+/* Fix for IE 8 putting the arrows behind the select element. */
+.lt-ie9 .dropdown {
+    z-index: 1;
+}
+
+.lt-ie9 .dropdown-select {
+    z-index: -1;
+}
+
+.lt-ie9 .dropdown-select:focus {
+    z-index: 3;
+}
+
+.dropdown-dark {
+    background: #636363; /* NEW2 */
+    background: #3e403f; /* NEW */
+    border-color: #111 #0a0a0a black;
+    background-image: -webkit-linear-gradient(
+        top,
+        transparent,
+        rgba(0, 0, 0, 0.4)
+    );
+    background-image: -moz-linear-gradient(
+        top,
+        transparent,
+        rgba(0, 0, 0, 0.4)
+    );
+    background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
+    background-image: linear-gradient(
+        to bottom,
+        transparent,
+        rgba(0, 0, 0, 0.4)
+    );
+    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
+        0 1px 1px rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
+        0 1px 1px rgba(0, 0, 0, 0.2);
+    color: #a6a6a6;
+    text-shadow: 0px 1px rgba(0, 0, 0, 0.25);
+}
+
+.dropdown-dark:before {
+    border-bottom-color: #aaa;
+}
+
+.dropdown-dark:after {
+    border-top-color: #aaa;
+}
+
+.dropdown-dark .dropdown-select {
+    color: #a6a6a6;
+    text-shadow: 0 1px black;
+    width: calc(100% - 10px);
+    /* Fallback for IE 8 */
+    background: #444;
+}
+
+.dropdown-dark .dropdown-select:focus {
+    color: #fff;
+}
+
+.dropdown-dark .dropdown-select > option {
+    background: #56ab1a;
+    text-shadow: 0 1px rgba(0, 0, 0, 0.4);
+}
+</style>

src/components/port-picker/PortOverrideOption.stories.js

@@ -0,0 +1,15 @@
+import PortOverrideOption from "./PortOverrideOption";
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+    title: "Port override option",
+    component: PortOverrideOption,
+};
+
+const Template = (_args, {argTypes}) => ({
+    props: Object.keys(argTypes),
+    components: { PortOverrideOption },
+    template: '<port-override-option v-bind="$props" />',
+});
+
+export const Primary = Template.bind({});

src/components/port-picker/PortOverrideOption.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    id="port-override-option"
+    style="display: none"
+    :style="{ display: isManual ? 'flex' : 'none' }"
+  >
+    <label
+      for="port-override"
+    ><span
+       i18n="portOverrideText"
+       class="i18n-replaced"
+     >Port:</span>
+      <input
+        id="port-override"
+        type="text"
+        value="/dev/rfcomm0"
+      ></label>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {
+        isManual: {
+            type: Boolean,
+            default: true,
+        },
+    },
+};
+</script>
+<style scoped>
+#port-override-option {
+    font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
+    font-size: 12px;
+    margin-top: 16px;
+    margin-right: 15px;
+    label {
+        background-color: #2b2b2b;
+        border-radius: 3px;
+        padding: 3px;
+        color: var(--subtleAccent);
+    }
+}
+
+#port-override-option label {
+    background-color: #2b2b2b;
+    border-radius: 3px;
+    /* might be less */
+    padding: 2px;
+    color: var(--subtleAccent);
+}
+
+#port-override {
+    background-color: rgba(0, 0, 0, 0.1);
+    color: #888888;
+    width: 140px;
+    margin-left: 2px;
+    padding: 1px;
+    border-radius: 3px;
+    height: 15px;
+    font-size: 12px;
+}
+</style>

src/components/port-picker/PortsInput.stories.js

@@ -0,0 +1,15 @@
+import PortsInput from "./PortsInput";
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+    title: "Ports input",
+    component: PortsInput,
+};
+
+const Template = (_args, {argTypes}) => ({
+    props: Object.keys(argTypes),
+    components: { PortsInput },
+    template: '<ports-input v-bind="$props" />',
+});
+
+export const Primary = Template.bind({});