Blur controls after click

in order to hide tooltip when not hovering anymore. (The tooltip stayed visible e.g. when en/disabling the camera)
palavatv · Nov 27, 2021 · 3a5b2a5 · 3a5b2a5
1 parent e300e64
commit 3a5b2a5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/src/components/Party.vue b/src/components/Party.vue
@@ -25,7 +25,8 @@
         <button
           :title="$t('party.infoTitle')"
           class="control control--info"
-          @click="$emit('open-info-screen', 'about')"
+          @click="$emit('open-info-screen', 'about'); $refs.info.blur()"
+          ref="info"
           v-if="controlsActive"
           >
           <inline-svg
@@ -40,7 +41,7 @@
         <button
           :title="$t('party.copyLinkTitle')"
           class="control control--copy-link"
-          @click="copyShareLink"
+          @click="copyShareLink(); $refs.copyLink.blur()"
           ref="copyLink"
           v-if="controlsActive && canShare"
           >
@@ -56,7 +57,8 @@
         <button
           :title="cameraOff ? $t('party.turnOnCameraTitle') : $t('party.turnOffCameraTitle')"
           class="control control--camera"
-          @click="toggleCamera"
+          @click="toggleCamera(); $refs.camera.blur()"
+          ref="camera"
           v-if="controlsActive && localPeer.hasVideo()"
           >
           <inline-svg
@@ -71,7 +73,8 @@
         <button
           :title="microphoneMuted ? $t('party.unmuteMicrophoneTitle') : $t('party.muteMicrophoneTitle')"
           class="control control--microphone"
-          @click="toggleMicrophone"
+          @click="toggleMicrophone(); $refs.microphone.blur()"
+          ref="microphone"
           v-if="controlsActive && localPeer.hasAudio()"
           >
           <inline-svg
@@ -101,7 +104,8 @@
           :title="$t('party.openTextChatTitle')"
           class="control control--text-chat"
           :class="{'control--alert': this.chatNewMessages}"
-          @click="toggleChat"
+          @click="toggleChat(); $refs.chat.blur()"
+          ref="chat"
           v-if="controlsActive"
           >
           <inline-svg
@@ -117,7 +121,7 @@
           :title="$t('switchLanguageTitle')"
           class="control control--switch-language"
           ref="switchLanguage"
-          @click="switchLanguage"
+          @click="switchLanguage(); $refs.switchLanguage.blur()"
           v-if="controlsActive"
           >
           <span :aria-label="$t('switchLanguageAlt')">{{ $root.$i18n.locale }}</span>

diff --git a/src/css/styles.scss b/src/css/styles.scss
@@ -118,7 +118,7 @@ $lobby-border-radius: 0px;
 
 @mixin focusTitle() {
   position: relative;
-  &:focus {
+  &:focus, &:hover {
     @include focusTitlePseudo();
   }
   @media (max-width: $mobile-plus - 1px) {