[ui] Add more tooltips

RoboCup-SSL · Aug 6, 2018 · 5b36f10 · 5b36f10
1 parent d793cf8
commit 5b36f10
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 22 deletions.
diff --git a/ui/src/components/control/ControlGeneral.vue b/ui/src/components/control/ControlGeneral.vue
@@ -1,25 +1,37 @@
 <template>
     <span class="control-general">
-        <b-button v-hotkey="keymapHalt"
-                  v-on:click="send('halt')"
-                  v-bind:disabled="halted">
-            Halt
-        </b-button>
-        <b-button v-hotkey="keymapStop"
-                  v-on:click="send('stop')"
-                  v-bind:disabled="stopped || !inNormalHalf">
-            Stop
-        </b-button>
-        <b-button v-hotkey="keymapForceStart"
-                  v-on:click="send('forceStart')"
-                  v-bind:disabled="!stopped || !inNormalHalf">
-            Force Start
-        </b-button>
-        <b-button v-hotkey="keymapNormalStart"
-                  v-on:click="send('normalStart')"
-                  v-bind:disabled="!prepareSth || !inNormalHalf">
-            Normal Start
-        </b-button>
+        <span v-b-tooltip.hover
+              title="Immediately stop all robots">
+            <b-button v-hotkey="keymapHalt"
+                      v-on:click="send('halt')"
+                      v-bind:disabled="halted">
+                Halt
+            </b-button>
+        </span>
+        <span v-b-tooltip.hover
+              title="Robots have to keep distance to the ball">
+            <b-button v-hotkey="keymapStop"
+                      v-on:click="send('stop')"
+                      v-bind:disabled="stopped || !inNormalHalf">
+                Stop
+            </b-button>
+        </span>
+        <span v-b-tooltip.hover
+              title="Restart the game in draw situations">
+            <b-button v-hotkey="keymapForceStart"
+                      v-on:click="send('forceStart')"
+                      v-bind:disabled="!stopped || !inNormalHalf">
+                Force Start
+            </b-button>
+        </span>
+        <span v-b-tooltip.hover
+              title="Continue game after a prepare state">
+            <b-button v-hotkey="keymapNormalStart"
+                      v-on:click="send('normalStart')"
+                      v-bind:disabled="!prepareSth || !inNormalHalf">
+                Normal Start
+            </b-button>
+        </span>
     </span>
 </template>
 

diff --git a/ui/src/components/control/ControlTeam.vue b/ui/src/components/control/ControlTeam.vue
@@ -1,25 +1,37 @@
 <template>
     <div class="control-team">
         <h2>Team {{teamColor}}</h2>
+        <span v-b-tooltip.hover
+              title="Prepare for a kickoff">
         <b-button v-hotkey="keymapKickoff"
                   v-on:click="send('kickoff')"
                   v-bind:disabled="halted || running || preparing">
             Kickoff
         </b-button>
+        </span>
+        <span v-b-tooltip.hover
+              title="Perform direct kick (corner and goal kicks)">
         <b-button v-hotkey="keymapDirect"
                   v-on:click="send('direct')"
                   v-bind:disabled="halted || running || preparing">
             Direct
         </b-button>
+        </span>
+        <span v-b-tooltip.hover
+              title="Perform indirect kick (throw-in)">
         <b-button v-hotkey="keymapIndirect"
                   v-on:click="send('indirect')"
                   v-bind:disabled="halted || running || preparing">
             Indirect
         </b-button>
+        </span>
+        <span v-b-tooltip.hover
+              title="Prepare for a penalty kick">
         <b-button v-on:click="send('penalty')"
                   v-bind:disabled="halted || running || preparing">
             Penalty
         </b-button>
+        </span>
 
         <br/>
 

diff --git a/ui/src/components/team/TeamOverview.vue b/ui/src/components/team/TeamOverview.vue
@@ -1,5 +1,5 @@
 <template>
-    <span>
+    <div>
         <h2 v-b-tooltip.hover title="Edit team data by double-clicking a value"> Team {{teamColor}}</h2>
         <div>
             <TeamName
@@ -36,7 +36,7 @@
                     :yellow-cards="team.yellowCards"
                     :yellow-card-times="team.yellowCardTimes"/>
         </div>
-    </span>
+    </div>
 </template>
 
 <script>