Skip to content

Commit 0e978a0

Browse files
avivaceavivace
committed
Improve control UI
1 parent d54056d commit 0e978a0

File tree

1 file changed

+64
-53
lines changed

1 file changed

+64
-53
lines changed

‎src/components/Control.vue

Lines changed: 64 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -29,63 +29,65 @@
2929
<v-container grid-list-md text-xs-center>
3030
<v-layout row wrap>
3131
<v-flex xs12 lg8>
32-
<v-img :src="webcamStream"/>
33-
</v-flex>
34-
<v-flex xs12 lg4>
35-
<br>
36-
<v-layout row wrap>
37-
<v-flex xs12 sm12>
38-
<v-btn-toggle>
39-
<v-btn large color="blue-grey darken-4" class="white--text" v-on:mousedown="move(0)" v-on:mouseup="stop()">
40-
<v-icon dark>keyboard_arrow_up</v-icon>
41-
</v-btn>
42-
</v-btn-toggle>
43-
</v-flex>
44-
<v-flex xs12 sm12>
45-
<v-btn-toggle>
46-
<v-btn large color="blue-grey darken-4" class="white--text" v-on:mousedown="move(1)" v-on:mouseup="stop()">
47-
<v-icon dark>keyboard_arrow_left</v-icon>
48-
</v-btn>
49-
<span style="background-color: #fafafa;width: 64px" > </span>
50-
<v-btn large color="blue-grey darken-4" class="white--text" v-on:mousedown="move(2)" v-on:mouseup="stop()">
51-
<v-icon dark>keyboard_arrow_right</v-icon>
52-
</v-btn>
53-
</v-btn-toggle>
54-
</v-flex>
55-
<v-flex xs12 sm12>
56-
<v-btn-toggle>
57-
<v-btn large color="blue-grey darken-4" class="white--text" v-on:mousedown="move(3)" v-on:mouseup="stop()">
58-
<v-icon dark>keyboard_arrow_down</v-icon>
59-
</v-btn>
60-
</v-btn-toggle>
61-
</v-flex>
62-
<v-flex xs12 sm12>
63-
<br><br><br>
64-
<v-btn large color="blue-grey darken-1" v-on:click="ttsdialog = true" class="controlBtn" :disabled="!ttsBtnEnabled">
65-
Pronuncia
66-
<v-icon>chat_bubble_outline</v-icon>
32+
<v-img :src="webcamStream" />
33+
</v-flex>
34+
<v-flex xs12 lg4>
35+
<br>
36+
<v-layout row wrap>
37+
<v-flex xs12 sm12>
38+
39+
<v-btn large color="blue-grey darken-4" class="white--text jp-btn" v-on:mousedown="move(0)" v-on:mouseup="stop()">
40+
<v-icon dark>keyboard_arrow_up</v-icon>
6741
</v-btn>
68-
</v-flex>
69-
<v-flex xs12 sm12>
70-
<v-btn large color="blue-grey darken-1" class="controlBtn" v-on:click="takePhoto()" :disabled="!photoBtnEnabled">
71-
Scatta foto
72-
<v-icon dark>camera_alt</v-icon>
42+
43+
</v-flex>
44+
<v-flex xs12 sm12>
45+
46+
<v-btn large color="blue-grey darken-4" class="white--text jp-btn" v-on:mousedown="move(1)" v-on:mouseup="stop()">
47+
<v-icon dark>keyboard_arrow_left</v-icon>
7348
</v-btn>
74-
</v-flex>
75-
<v-flex xs12 sm12>
76-
<v-btn large color="blue-grey darken-1" class="controlBtn" v-on:click="videoHandler()" :disabled="!videoBtn.enabled">
77-
{{ videoBtn.text }}
78-
<v-icon dark>{{ videoBtn.icon }} </v-icon>
49+
50+
51+
52+
<v-btn large color="blue-grey darken-4" class="white--text jp-btn" v-on:mousedown="move(2)" v-on:mouseup="stop()">
53+
<v-icon dark>keyboard_arrow_right</v-icon>
7954
</v-btn>
80-
</v-flex>
81-
<v-flex xs12 sm12>
82-
<v-btn large color="blue-grey darken-1" class="controlBtn" to="/gallery">
83-
Galleria
84-
<v-icon dark>photo_library</v-icon>
55+
56+
</v-flex>
57+
<v-flex xs12 sm12>
58+
59+
<v-btn large color="blue-grey darken-4" class="white--text jp-btn" v-on:mousedown="move(3)" v-on:mouseup="stop()">
60+
<v-icon dark>keyboard_arrow_down</v-icon>
8561
</v-btn>
86-
</v-flex>
87-
</v-layout>
88-
</v-flex>
62+
63+
</v-flex>
64+
<v-flex xs12 sm12>
65+
<br><br><br>
66+
<v-btn large color="blue-grey darken-1" v-on:click="ttsdialog = true" class="controlBtn" :disabled="!ttsBtnEnabled">
67+
Pronuncia
68+
<v-icon>chat_bubble_outline</v-icon>
69+
</v-btn>
70+
</v-flex>
71+
<v-flex xs12 sm12>
72+
<v-btn large color="blue-grey darken-1" class="controlBtn" v-on:click="takePhoto()" :disabled="!photoBtnEnabled">
73+
Scatta foto
74+
<v-icon dark>camera_alt</v-icon>
75+
</v-btn>
76+
</v-flex>
77+
<v-flex xs12 sm12>
78+
<v-btn large color="blue-grey darken-1" class="controlBtn" v-on:click="videoHandler()" :disabled="!videoBtn.enabled">
79+
{{ videoBtn.text }}
80+
<v-icon dark>{{ videoBtn.icon }} </v-icon>
81+
</v-btn>
82+
</v-flex>
83+
<v-flex xs12 sm12>
84+
<v-btn large color="blue-grey darken-1" class="controlBtn" to="/gallery">
85+
Galleria
86+
<v-icon dark>photo_library</v-icon>
87+
</v-btn>
88+
</v-flex>
89+
</v-layout>
90+
</v-flex>
8991
</v-layout>
9092
</v-container>
9193
</div>
@@ -338,4 +340,13 @@ export default {
338340
margin: 7px;
339341
}
340342
343+
.jp-btn{
344+
margin:0px;
345+
margin-left:28px;
346+
margin-right:28px;
347+
height: 48px;
348+
min-width: 0px;
349+
width: 48px;
350+
padding: 0 0;
351+
}
341352
</style>

0 commit comments

Comments
 (0)