Skip to content

Commit 5bb8207

Browse files
lipskijlipskij
authored
feat: added port picker vue component (#3543)
* feat: added port picker vue component * feat: added translantions
1 parent a4e8e2e commit 5bb8207

File tree

6 files changed

+558
-0
lines changed

6 files changed

+558
-0
lines changed

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import FirmwareVirtualOption from "./FirmwareVirtualOption";
2+
3+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4+
export default {
5+
title: "Firmware virtual option",
6+
component: FirmwareVirtualOption,
7+
};
8+
9+
const Template = (_args, {argTypes}) => ({
10+
props: Object.keys(argTypes),
11+
components: { FirmwareVirtualOption },
12+
template: '<firmware-virtual-option v-bind="$props" />',
13+
});
14+
15+
export const Primary = Template.bind({});

‎src/components/port-picker/FirmwareVirtualOption.vue‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
<template>
2+
<div
3+
id="firmware-virtual-option"
4+
style="display: block"
5+
:style="{ display: isVirtual ? 'block' : 'none' }"
6+
>
7+
<div class="dropdown dropdown-dark">
8+
<select
9+
id="firmware-version-dropdown"
10+
i18n_title="virtualMSPVersion"
11+
class="dropdown-select i18n_title-replaced"
12+
title="Virtual Firmware Version"
13+
>
14+
<option value="1.46.0">
15+
MSP: 1.46 | Firmware: 4.5.*
16+
</option>
17+
<option value="1.45.0">
18+
MSP: 1.45 | Firmware: 4.4.*
19+
</option>
20+
<option value="1.44.0">
21+
MSP: 1.44 | Firmware: 4.3.*
22+
</option>
23+
<option value="1.43.0">
24+
MSP: 1.43 | Firmware: 4.2.*
25+
</option>
26+
<option value="1.42.0">
27+
MSP: 1.42 | Firmware: 4.1.*
28+
</option>
29+
<option value="1.41.0">
30+
MSP: 1.41 | Firmware: 4.0.*
31+
</option>
32+
</select>
33+
</div>
34+
</div>
35+
</template>
36+
37+
<script>
38+
export default {
39+
props: {
40+
isVirtual: {
41+
type: Boolean,
42+
default: true,
43+
},
44+
},
45+
};
46+
</script>
47+
48+
<style>
49+
#firmware-virtual-option {
50+
height: 76px;
51+
width: 180px;
52+
margin-right: 15px;
53+
margin-top: 16px;
54+
display: none;
55+
}
56+
.dropdown {
57+
display: inline-block;
58+
position: relative;
59+
overflow: hidden;
60+
height: 20px;
61+
background: #fff;
62+
background-image: -webkit-linear-gradient(
63+
top,
64+
transparent,
65+
rgba(0, 0, 0, 0.06)
66+
);
67+
background-image: -moz-linear-gradient(
68+
top,
69+
transparent,
70+
rgba(0, 0, 0, 0.06)
71+
);
72+
background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
73+
background-image: linear-gradient(
74+
to bottom,
75+
transparent,
76+
rgba(0, 0, 0, 0.06)
77+
);
78+
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
79+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
80+
width: 99%;
81+
margin-bottom: 7px;
82+
border: 1px solid;
83+
border-color: #ccc #ccc #ccc;
84+
border-radius: 3px;
85+
}
86+
87+
.dropdown:before,
88+
.dropdown:after {
89+
content: "";
90+
position: absolute;
91+
z-index: 2;
92+
top: 7px;
93+
right: 7px;
94+
width: 0;
95+
height: 0;
96+
border: 4px dashed;
97+
border-color: #888 transparent;
98+
pointer-events: none;
99+
}
100+
101+
.dropdown:before {
102+
border-bottom-style: solid;
103+
border-top: none;
104+
margin-top: -2px;
105+
}
106+
107+
.dropdown:after {
108+
margin-top: 5px;
109+
border-top-style: solid;
110+
border-bottom: none;
111+
}
112+
113+
.dropdown-select {
114+
position: relative;
115+
overflow: visible;
116+
width: 100%;
117+
margin-top: 0px;
118+
padding: 1px 8px 6px 5px;
119+
height: 23px;
120+
line-height: 20px;
121+
font-size: 12px;
122+
color: #62717a;
123+
text-shadow: 0 1px white;
124+
/* Fallback for IE 8 */
125+
background: #f2f2f2;
126+
/* "transparent" doesn't work with Opera */
127+
background: rgba(0, 0, 0, 0) !important;
128+
border: 0;
129+
border-radius: 0;
130+
-webkit-appearance: none;
131+
appearance: 'none';
132+
}
133+
134+
.dropdown-select:focus {
135+
z-index: 3;
136+
width: 90%;
137+
color: #4fa619;
138+
outline: 0px solid #49aff2;
139+
outline: 0px solid -webkit-focus-ring-color;
140+
outline-offset: 5px;
141+
height: 25px;
142+
}
143+
144+
.dropdown-select > option {
145+
margin: 3px;
146+
padding: 6px 8px;
147+
text-shadow: none;
148+
background: #f2f2f2;
149+
border-radius: 3px;
150+
cursor: pointer;
151+
}
152+
153+
/* Fix for IE 8 putting the arrows behind the select element. */
154+
.lt-ie9 .dropdown {
155+
z-index: 1;
156+
}
157+
158+
.lt-ie9 .dropdown-select {
159+
z-index: -1;
160+
}
161+
162+
.lt-ie9 .dropdown-select:focus {
163+
z-index: 3;
164+
}
165+
166+
.dropdown-dark {
167+
background: #636363; /* NEW2 */
168+
background: #3e403f; /* NEW */
169+
border-color: #111 #0a0a0a black;
170+
background-image: -webkit-linear-gradient(
171+
top,
172+
transparent,
173+
rgba(0, 0, 0, 0.4)
174+
);
175+
background-image: -moz-linear-gradient(
176+
top,
177+
transparent,
178+
rgba(0, 0, 0, 0.4)
179+
);
180+
background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
181+
background-image: linear-gradient(
182+
to bottom,
183+
transparent,
184+
rgba(0, 0, 0, 0.4)
185+
);
186+
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
187+
0 1px 1px rgba(0, 0, 0, 0.2);
188+
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
189+
0 1px 1px rgba(0, 0, 0, 0.2);
190+
color: #a6a6a6;
191+
text-shadow: 0px 1px rgba(0, 0, 0, 0.25);
192+
}
193+
194+
.dropdown-dark:before {
195+
border-bottom-color: #aaa;
196+
}
197+
198+
.dropdown-dark:after {
199+
border-top-color: #aaa;
200+
}
201+
202+
.dropdown-dark .dropdown-select {
203+
color: #a6a6a6;
204+
text-shadow: 0 1px black;
205+
width: calc(100% - 10px);
206+
/* Fallback for IE 8 */
207+
background: #444;
208+
}
209+
210+
.dropdown-dark .dropdown-select:focus {
211+
color: #fff;
212+
}
213+
214+
.dropdown-dark .dropdown-select > option {
215+
background: #56ab1a;
216+
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
217+
}
218+
</style>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import PortOverrideOption from "./PortOverrideOption";
2+
3+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4+
export default {
5+
title: "Port override option",
6+
component: PortOverrideOption,
7+
};
8+
9+
const Template = (_args, {argTypes}) => ({
10+
props: Object.keys(argTypes),
11+
components: { PortOverrideOption },
12+
template: '<port-override-option v-bind="$props" />',
13+
});
14+
15+
export const Primary = Template.bind({});

‎src/components/port-picker/PortOverrideOption.vue‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div
3+
id="port-override-option"
4+
style="display: none"
5+
:style="{ display: isManual ? 'flex' : 'none' }"
6+
>
7+
<label
8+
for="port-override"
9+
><span
10+
i18n="portOverrideText"
11+
class="i18n-replaced"
12+
>Port:</span>
13+
<input
14+
id="port-override"
15+
type="text"
16+
value="/dev/rfcomm0"
17+
></label>
18+
</div>
19+
</template>
20+
21+
<script>
22+
export default {
23+
props: {
24+
isManual: {
25+
type: Boolean,
26+
default: true,
27+
},
28+
},
29+
};
30+
</script>
31+
<style scoped>
32+
#port-override-option {
33+
font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
34+
font-size: 12px;
35+
margin-top: 16px;
36+
margin-right: 15px;
37+
label {
38+
background-color: #2b2b2b;
39+
border-radius: 3px;
40+
padding: 3px;
41+
color: var(--subtleAccent);
42+
}
43+
}
44+
45+
#port-override-option label {
46+
background-color: #2b2b2b;
47+
border-radius: 3px;
48+
/* might be less */
49+
padding: 2px;
50+
color: var(--subtleAccent);
51+
}
52+
53+
#port-override {
54+
background-color: rgba(0, 0, 0, 0.1);
55+
color: #888888;
56+
width: 140px;
57+
margin-left: 2px;
58+
padding: 1px;
59+
border-radius: 3px;
60+
height: 15px;
61+
font-size: 12px;
62+
}
63+
</style>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import PortsInput from "./PortsInput";
2+
3+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4+
export default {
5+
title: "Ports input",
6+
component: PortsInput,
7+
};
8+
9+
const Template = (_args, {argTypes}) => ({
10+
props: Object.keys(argTypes),
11+
components: { PortsInput },
12+
template: '<ports-input v-bind="$props" />',
13+
});
14+
15+
export const Primary = Template.bind({});

0 commit comments

Comments
 (0)