diff options
| author | Joas Schilling <213943+nickvergessen@users.noreply.github.com> | 2021-11-18 14:15:53 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-11-18 14:15:53 +0300 |
| commit | 8c54fefbb5b2e884f359733d035838cd83a7df0f (patch) | |
| tree | b2dd74c7b90915702dec3e43866a11dbb8c37ace | |
| parent | a39fb549a5c518a1ba29ea64103e818e4a6cf7a1 (diff) | |
| parent | a6d657f389f79b47b7c1d11b0313ea44d726129c (diff) | |
Merge pull request #6548 from nextcloud/backport/6538/stable23
[stable23] Fix connection warning positioning
| -rw-r--r-- | src/components/CallView/shared/LocalMediaControls.vue | 84 |
1 files changed, 41 insertions, 43 deletions
diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue index 775291ec5..e6abbb988 100644 --- a/src/components/CallView/shared/LocalMediaControls.vue +++ b/src/components/CallView/shared/LocalMediaControls.vue @@ -21,6 +21,41 @@ <div v-shortkey.push="['space']" @shortkey="handleShortkey"> <div class="buttons-bar"> + <div class="network-connection-state"> + <Popover + v-if="qualityWarningTooltip" + :boundaries-element="boundaryElement" + :aria-label="qualityWarningAriaLabel" + trigger="hover" + :auto-hide="false" + :open="showQualityWarningTooltip"> + <NetworkStrength2Alert + slot="trigger" + decorative + fill-color="#e9322d" + title="" + :size="24" + @mouseover="mouseover = true" + @mouseleave="mouseover = false" /> + <div class="hint"> + <span>{{ qualityWarningTooltip.content }}</span> + <div class="hint__actions"> + <button + v-if="qualityWarningTooltip.action" + class="primary hint__button" + @click="executeQualityWarningTooltipAction"> + {{ qualityWarningTooltip.actionLabel }} + </button> + <button + v-if="!isQualityWarningTooltipDismissed" + class="hint__button" + @click="dismissQualityWarningTooltip"> + {{ t('spreed', 'Dismiss') }} + </button> + </div> + </div> + </Popover> + </div> <div id="muteWrapper"> <button id="mute" @@ -212,41 +247,6 @@ </ActionButton> </Actions> </div> - <div class="network-connection-state"> - <Popover - v-if="qualityWarningTooltip" - :boundaries-element="boundaryElement" - :aria-label="qualityWarningAriaLabel" - trigger="hover" - :auto-hide="false" - :open="showQualityWarningTooltip"> - <NetworkStrength2Alert - slot="trigger" - decorative - fill-color="#e9322d" - title="" - :size="24" - @mouseover="mouseover = true" - @mouseleave="mouseover = false" /> - <div class="hint"> - <span>{{ qualityWarningTooltip.content }}</span> - <div class="hint__actions"> - <button - v-if="qualityWarningTooltip.action" - class="primary hint__button" - @click="executeQualityWarningTooltipAction"> - {{ qualityWarningTooltip.actionLabel }} - </button> - <button - v-if="!isQualityWarningTooltipDismissed" - class="hint__button" - @click="dismissQualityWarningTooltip"> - {{ t('spreed', 'Dismiss') }} - </button> - </div> - </div> - </Popover> - </div> </div> </template> @@ -907,6 +907,8 @@ export default { @import '../../../assets/variables.scss'; .buttons-bar { + display: flex; + align-items: center; button, .action-item { vertical-align: middle; } @@ -990,14 +992,6 @@ export default { background: linear-gradient(0deg, gray, white 36px); } -.network-connection-state { - position: absolute; - bottom: 3px; - right: 12px; - width: 32px; - height: 32px; -} - .hint { padding: 12px; max-width: 300px; @@ -1022,4 +1016,8 @@ export default { background-color: transparent; } } + +::v-deep .trigger { + display: flex; +} </style> |